Version Packages (#1136)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

.changeset/fair-hoops-taste.md

@@ -1,5 +1,22 @@
 # qwik-ui
 
+## 0.4.0
+
+### Minor Changes
+
+- ✨ Qwik UI has now fully migrated and updated the global.css config and components to use tailwind v4. You can copy/paste the components into your project(s) or use the CLI. (by [@maiieul](https://github.com/maiieul) in [#1122](https://github.com/qwikifiers/qwik-ui/pull/1122))
+
+  ## Migration guide:
+
+  - Make sure to commit any changes before you start the steps below
+  - Run the `npx @tailwindcss/upgrade` script and let it do most of the work for you
+  - Remove your tailwind.config.cjs and postcss.config.cjs
+  - install the @tailwindcss/vite package and pass it to your vite.config plugins array
+  - Copy paste the new css config base tokens, or use the `qwik-ui init` to get them, and adapt them to your project
+  - If you are in a monorepo, make sure to `@source “../../../path/to/your/components“;`
+  - Add `"w-full"` to Modal PanelVariants position.top and position.bottom; add `"m-auto"` to position.center
+  - If you didn't modify some components, you can re-copy/paste (or re-install them with the cli) for their most up to date version
+
 ## 0.3.2
 
 ### Patch Changes

.changeset/mean-books-act.md

@@ -1,6 +1,6 @@
 {
   "name": "qwik-ui",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -19,7 +19,7 @@
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@qwik-ui/styled": "0.3.5",
+    "@qwik-ui/styled": "0.4.0",
     "prettier-2": "npm:prettier@^2"
   },
   "type": "commonjs",

packages/cli/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.7.3
+
+### Patch Changes
+
+- 🐞🩹 the accordion `offsetHeight` is now properly calculated with tailwind v4. (by [@maiieul](https://github.com/maiieul) in [#1122](https://github.com/qwikifiers/qwik-ui/pull/1122))
+
 ## 0.7.2
 
 ### Patch Changes
@@ -49,6 +55,7 @@
 ### Patch Changes
 
 - Select fixes for: (by [@thejackshelton](https://github.com/thejackshelton) in [#1042](https://github.com/qwikifiers/qwik-ui/pull/1042))
+
   - [#1001](https://github.com/qwikifiers/qwik-ui/issues/1001)
   - [#979](https://github.com/qwikifiers/qwik-ui/issues/979)
 
@@ -65,6 +72,7 @@
   💡 Combobox inline mode allows for command palettes or other use cases where the search input is directly on the page.
 
   🎠 Carousel fixes:
+
   - [#1032](https://github.com/qwikifiers/qwik-ui/issues/1032)
   - [#1023](https://github.com/qwikifiers/qwik-ui/issues/1023)
   - [#1006](https://github.com/qwikifiers/qwik-ui/issues/1006)
@@ -94,22 +102,27 @@
 - # Combobox Improvements (by [@thejackshelton](https://github.com/thejackshelton) in [#968](https://github.com/qwikifiers/qwik-ui/pull/968))
 
   ## 🔄 Reactive Improvements
+
   - Better handling of array-based values
   - Improved handling of initial and reactive values
 
   ## 🐛 Key Bug Fixes
+
   - Fixed highlight jumping issues
   - Enhanced empty input handling
   - Better filtered item highlighting
 
   ## 🖱️ Interaction Enhancements
+
   - Smoother scrolling experience
   - Improved keyboard and mouse coordination
 
   ## 🚀 Performance Optimizations
+
   - More efficient item filtering
 
   ## 🧪 Reliability
+
   - Added tests for reactivity handling, item unselection, and mouse-to-pointer interaction switching
   - Improved handling of edge cases in user interactions
 
@@ -196,30 +209,39 @@
   ```
 
   ### Anatomy Changes
+
   1. **Combobox.Option** has been renamed to **Combobox.Item**:
+
      - The item is no longer restricted to a string value; any UI can be placed inside the item.
      - Use the `Combobox.ItemLabel` component to display the item's label, which becomes the item's value if no `value` prop is passed to the `Combobox.Item`. (required)
 
   2. **Combobox.Listbox** has been deprecated.
   3. **Combobox.ItemLabel** has been added:
+
      - Move the string value that was once inside `Combobox.Option` into `Combobox.ItemLabel`. (required)
 
   4. **Combobox.ItemIndicator** has been added:
+
      - This component is used to render UI based on the selected state of the item. (optional)
 
   5. **Combobox.Description** has been added:
+
      - The text rendered inside the description component is displayed to screen readers as an accessible description of the combobox. (optional)
 
   6. **Combobox.ErrorMessage** has been added:
+
      - When this component is rendered, the Combobox will be marked as invalid. (optional)
 
   7. **Combobox.HiddenNativeSelect** has been added:
+
      - A native select element allows the submission of forms with the combobox. This component is visually hidden and hidden from screen readers. (optional)
 
   8. **Combobox.Group** has been added:
+
      - Used to visually group related items together. (optional)
 
   9. **Combobox.GroupLabel** has been added:
+
      - Provides an accessible name for the group. (optional)
 
   10. **Combobox.Empty** has been added:
@@ -233,6 +255,7 @@
   The `optionRenderer# Changelog prop on the `Combobox.Listbox` component has been deprecated.
 
   Instead:
+
   1. pass a `<Combobox.Item />` as a child of the `<Combobox.Popover />` component.
   2. pass a `Combobox.ItemLabel` as a child of the `<Combobox.Item />` component.
 
@@ -400,6 +423,7 @@
   #### Forms
 
   The Combobox now supports form submissions. To enable this:
+
   1.  Add the `name` prop to the `Combobox.Root` component, with the name of the Combobox form field.
   2.  Add the `<Combobox.HiddenNativeSelect />` component inside of the `<Combobox.Root />` component.
 
@@ -445,6 +469,7 @@
   | Enter | Toggles the selection of the highlighted item without closing the combobox. |
 
   ### Data Attributes
+
   - `data-invalid` is added to the combobox when the combobox is invalid.
   - `data-open` is added to the combobox when the combobox is open.
   - `data-closed` is added to the combobox when the combobox is closed.
@@ -659,6 +684,7 @@
   There is a new root compomnent. Configurable props have been moved to the root component.
 
   #### Deprecated Props
+
   - You no longer need to style the popover open state with `:popover-open`. Instead, use the `data-open` attribute for it to style across browsers.
 
   ```css
@@ -681,6 +707,7 @@
   ### Docs Improvements
 
   A couple of docs improvements have been made:
+
   - The docs have been updated to reflect the new API.
   - The headless docs no longer include styles in the examples. There is an example CSS section in each component page. If you do not find one, please open an issue on GitHub.
   - Part of the Accordion and Modal docs have been simplified
@@ -689,6 +716,7 @@
 - ### Modal API Changes (by [@thejackshelton](https://github.com/thejackshelton) in [#734](https://github.com/qwikifiers/qwik-ui/pull/734))
 
   In a previous release, the following components have been deprecated:
+
   - ModalHeader
   - ModalContent
   - ModalFooter
@@ -700,6 +728,7 @@
   #### <Modal.Root>
 
   This is the main container of the modal, and now holds the major props and configuration. Examples include:
+
   - 'bind:show'?: Signal<boolean>;
   - closeOnBackdropClick?: boolean;
   - alert?: boolean;
@@ -727,6 +756,7 @@
   This is a button that closes the modal when clicked.
 
 - ### Select API Changes (by [@thejackshelton](https://github.com/thejackshelton) in [#724](https://github.com/qwikifiers/qwik-ui/pull/724))
+
   - `<SelectOption />` has been renamed to `<Select.ItemLabel />`.
   - `<Select.Value />` has been renamed to `<Select.DisplayValue />`.
 
@@ -788,6 +818,7 @@
   The Accordion has been refactored from the ground up to be more accessible and performant.
 
   #### 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.
   - The `animated` prop has been removed. Animations are now automatically detected!
@@ -798,19 +829,22 @@
   - 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# Changelog prop has been deprecated. Use the `onChange# Changelog prop instead.
 
   For more information, please refer to the updated Collapsible documentation.
 
   ### Deprecated Components
 
   In 0.4, we have deprecated the following headless components:
+
   - Drawer
   - Breadcrumb
   - Action Button
@@ -952,6 +986,7 @@
 - ## Select component hits beta! (by [@thejackshelton](https://github.com/thejackshelton) in [#637](https://github.com/qwikifiers/qwik-ui/pull/637))
 
   ## Features
+
   - Accessible as a button that shows a list, following web a11y standards.
   - Support for single selection.
   - Controlled or uncontrolled.
@@ -968,6 +1003,7 @@
   - Supports a custom placeholder.
 
   ## Roadmap
+
   - Opt-in native form support via a visually hidden select.
   - RTL support.
   - Multiple Selection and its respective keyboard interactions.

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwik-ui/headless",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Qwik UI headless components library",
   "publishConfig": {
     "access": "public"

packages/kit-headless/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @qwik-ui/styled
 
+## 0.4.0
+
+### Minor Changes
+
+- ✨ Qwik UI has now fully migrated and updated the global.css config and components to use tailwind v4. You can copy/paste the components into your project(s) or use the CLI. (by [@maiieul](https://github.com/maiieul) in [#1122](https://github.com/qwikifiers/qwik-ui/pull/1122))
+
+  ## Migration guide:
+
+  - Make sure to commit any changes before you start the steps below
+  - Run the `npx @tailwindcss/upgrade` script and let it do most of the work for you
+  - Remove your tailwind.config.cjs and postcss.config.cjs
+  - install the @tailwindcss/vite package and pass it to your vite.config plugins array
+  - Copy paste the new css config base tokens, or use the `qwik-ui init` to get them, and adapt them to your project
+  - If you are in a monorepo, make sure to `@source “../../../path/to/your/components“;`
+  - Add `"w-full"` to Modal PanelVariants position.top and position.bottom; add `"m-auto"` to position.center
+  - If you didn't modify some components, you can re-copy/paste (or re-install them with the cli) for their most up to date version
+
 ## 0.3.5
 
 ### Patch Changes
@@ -127,20 +144,20 @@
   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',
+      'data-[closing]:animate-out data-[closing]:duration-300 data-[open]:animate-in data-[open]:duration-300',
+      'backdrop:data-[closing]:animate-out backdrop:data-[closing]:duration-300 backdrop:data-[closing]:fade-out backdrop:data-[open]:animate-in backdrop:data-[open]:duration-300 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',
+            'rounded-base max-w-lg shadow-lg backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in data-[state=closed]:zoom-out-95 data-[state=closed]:fade-out data-[state=open]:zoom-in-95 data-[state=open]:fade-in data-[state=open]:slide-in-from-bottom-2',
+          top: 'rounded-b-base inset-x-0 top-0 mt-0 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',
+            'rounded-t-base inset-x-0 bottom-0 mb-0 border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
+          left: 'rounded-r-base inset-y-0 left-0 ml-0 h-full max-w-sm 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',
+            'rounded-l-base inset-y-0 right-0 mr-0 h-full max-w-sm border-l data-[closing]:slide-out-to-right data-[open]:slide-in-from-right',
         },
       },
       defaultVariants: {

packages/kit-headless/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwik-ui/styled",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "Qwik UI components library with styles",
   "publishConfig": {
     "access": "public"
@@ -24,7 +24,7 @@
     "@builder.io/qwik": ">=1.3.1"
   },
   "devDependencies": {
-    "@qwik-ui/headless": "^0.7.1",
+    "@qwik-ui/headless": "^0.7.3",
     "@qwik-ui/utils": "0.3.2"
   },
   "sideEffects": false