latest from main

Author: thejackshelton

.changeset/orange-points-reflect.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+FEAT new styled select component

.changeset/silent-yaks-crash.md

@@ -5,7 +5,7 @@
 ### Select API Changes
 
 - `<SelectOption />` has been renamed to `<Select.ItemLabel />`.
-- `<Select.Value />` has been renamed to `<Select.DisplayText />`.
+- `<Select.Value />` has been renamed to `<Select.DisplayValue />`.
 
 ### `<Select.Item />`
 
@@ -32,7 +32,7 @@ The previous API did not allow for customization of list items. The new API intr
 
 You can now put anything you'd like in your `<Select.Item />`, just like a normal li tag!
 
-There is a new reactive signal called `bind:displayText` that can be used to read the value of the display text. There is a new docs example that shows this in action with item pills.
+There is a new reactive signal called `bind:displayValue` that can be used to read the value of the display text. There is a new docs example that shows this in action with item pills.
 
 #### bind syntax
 

.changeset/slimy-snakes-poke.md

@@ -0,0 +1,96 @@
+---
+'@qwik-ui/styled': minor
+---
+
+## tailwind.config.cjs
+
+Now uses tailwindcss-animate
+
+```ts
+  plugins: [
+    require('tailwindcss-animate'),
+    ...
+  ],
+```
+
+Instead of manually defined animations through a custom plugin like
+
+```ts
+plugins: [
+  plugin(function ({ addUtilities }) {
+    addUtilities({
+      '.appear': {
+        opacity: 1,
+      },
+      '.disappear': {
+        opacity: 0,
+      },
+    });
+  }),
+];
+```
+
+## Modal refactor
+
+### Modal.Panel
+
+The Panel now uses tailwindcss-animate and comes built-in with 5 `position` variant props
+
+```tsx
+export const panelVariants = cva(
+  [
+    'fixed w-full bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-sm',
+    'data-[closing]:duration-300 data-[open]:duration-300 data-[open]:animate-in data-[closing]:animate-out',
+    'backdrop:data-[closing]:duration-300 backdrop:data-[open]:duration-300 backdrop:data-[open]:animate-in backdrop:data-[closing]:animate-out backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
+  ],
+  {
+    variants: {
+      position: {
+        center:
+          'max-w-lg rounded-base shadow-lg data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
+        top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-[closing]:slide-out-to-left data-[open]:slide-in-from-left',
+        right:
+          'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-[closing]:slide-out-to-right data-[open]:slide-in-from-right',
+      },
+    },
+    defaultVariants: {
+      position: 'center',
+    },
+  },
+);
+
+type PanelProps = PropsOf<typeof HeadlessModal.Panel> &
+  VariantProps<typeof panelVariants>;
+
+const Panel = component$<PanelProps>(({ position, ...props }) => {
+  return (
+    <HeadlessModal.Panel {...props} class={cn(panelVariants({ position }), props.class)}>
+      <Slot />
+    </HeadlessModal.Panel>
+  );
+});
+```
+
+over previous tailwind.config.js home-made plugin
+
+```tsx
+        '.appear': {
+          opacity: 1,
+        },
+        '.disappear': {
+          opacity: 0,
+        },
+```
+
+to avoid re-inventing the wheel.
+
+### Modal.Title
+
+Title now holds `text-lg font-semibold` classes.
+
+### Modal.Description
+
+Description now holds `text-muted-foreground` class.

.changeset/ten-actors-explain.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+Styled button now uses `transition-all` for every variant shared class

.changeset/two-glasses-fix.md

@@ -2,6 +2,42 @@
 '@qwik-ui/headless': minor
 ---
 
+### Accordion
+
+The Accordion has been refactored from the ground up to be more accessible and performant.
+
+The entire Qwik UI library now does not execute code until interaction.
+
+#### Accordion.Root
+
+- The `behavior="multi"` prop has been deprecated with `multiple` on the `<Accordion.Root />` component.
+
+- The default behavior is a single item open at a time.
+
+- `onSelectIndexChange$` has been deprecated and removed in favor of `onChange$`.
+
+- `onFocusIndexChange$` has been deprecated and removed. Let us know if you have a use case for this.
+
+- Reactively control the accordion with the `bind:value` prop.
+
+- Control the initial value with the `value` prop.
+
+- Disable the entire accordion by using the `disabled` prop.
+
+#### Accordion.Item
+
+- Pass distinct values to the `<Accordion.Item />` component with the `value` prop.
+
+- Disable Accordion items by setting the `disabled` prop to true on the `<Accordion.Item />` component.
+
+For more information, please refer to the updated Accordion documentation.
+
+### Collapsible
+
+- The `onOpenChange$` prop has been deprecated. Use the `onChange$` prop instead.
+
+For more information, please refer to the updated Collapsible documentation.
+
 ### Deprecated Components
 
 In 0.4, we have deprecated the following headless components:

.github/workflows/test.yml

@@ -10,7 +10,7 @@ jobs:
 
     strategy:
       matrix:
-        node_version: [18, 20, 22]
+        node_version: [20, 22]
 
     steps:
       - name: Cancel Previous Runs
@@ -29,3 +29,17 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           chromatic_token: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+  continuous-release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup
+        uses: ./.github/actions/setup
+        with:
+          node_version: 20
+      - run: pnpm build.headless
+      - run: pnpx pkg-pr-new publish ./dist/packages/kit-headless
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GITHUB_TOKEN is provided automatically in any repository

.gitignore

@@ -75,4 +75,4 @@ Thumbs.db
 
 # Verdaccio
 tmp
-.nx/cache
+

.npmignore

@@ -1,2 +1,3 @@
 node_modules
+.nx/cache
 coverage

.prettierrc

@@ -5,5 +5,5 @@
   "printWidth": 90,
   "plugins": ["prettier-plugin-tailwindcss"],
   "tailwindConfig": "./apps/website/tailwind.config.cjs",
-  "tailwindFunctions": ["clsx", "cva", "cn"]
+  "tailwindFunctions": ["clsx", "cva"]
 }

apps/component-tests/tailwind.config.cjs

@@ -10,19 +10,13 @@ module.exports = {
     join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
   ],
   plugins: [
-    require('tailwindcss-animate'),
     // PLUGIN-START
+    require('tailwindcss-animate'),
     plugin(function ({ addUtilities }) {
       addUtilities({
         '.press': {
           transform: 'var(--transform-press)',
         },
-        '.appear': {
-          opacity: 1,
-        },
-        '.disappear': {
-          opacity: 0,
-        },
       });
     }),
     // PLUGIN-END
@@ -112,16 +106,6 @@ module.exports = {
         step: 'cubic-bezier(0.6, 0.6, 0, 1)',
         jumpy: 'cubic-bezier(0.87, 0, 0.13, 1)',
       },
-      keyframes: {
-        fadeIn: {
-          '0%': { opacity: 0 },
-          '100%': { opacity: 1 },
-        },
-        fadeOut: {
-          '0%': { opacity: 1 },
-          '100%': { opacity: 0 },
-        },
-      },
     },
   },
 };