From f0066fb431f106f7fb5d16909f86ab25656e57fb Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 26 May 2024 00:18:17 +0000 Subject: [PATCH] Version Packages --- .changeset/fast-actors-report.md | 141 -------------- .changeset/few-keys-argue.md | 45 ----- .changeset/lemon-zoos-compete.md | 5 - .changeset/orange-points-reflect.md | 5 - .changeset/silent-yaks-crash.md | 53 ----- .changeset/slimy-snakes-poke.md | 96 --------- .changeset/ten-actors-explain.md | 5 - .changeset/two-glasses-fix.md | 64 ------ packages/cli/package.json | 2 +- packages/kit-headless/CHANGELOG.md | 289 ++++++++++++++++++++++++++++ packages/kit-headless/package.json | 2 +- packages/kit-styled/CHANGELOG.md | 106 ++++++++++ packages/kit-styled/package.json | 4 +- pnpm-lock.yaml | 8 +- 14 files changed, 405 insertions(+), 420 deletions(-) delete mode 100644 .changeset/fast-actors-report.md delete mode 100644 .changeset/few-keys-argue.md delete mode 100644 .changeset/lemon-zoos-compete.md delete mode 100644 .changeset/orange-points-reflect.md delete mode 100644 .changeset/silent-yaks-crash.md delete mode 100644 .changeset/slimy-snakes-poke.md delete mode 100644 .changeset/ten-actors-explain.md delete mode 100644 .changeset/two-glasses-fix.md diff --git a/.changeset/fast-actors-report.md b/.changeset/fast-actors-report.md deleted file mode 100644 index 6323d10c7..000000000 --- a/.changeset/fast-actors-report.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -'@qwik-ui/headless': minor ---- - -## 100% Lazy execution - -The entire Qwik UI library does not execute code until interaction. Your components are HTML, until the user decides to interact with them. - -## Bundling improvements - -We have reduced the bundle size significantly of the headless library. If you are a Qwik library author, please refer to [this issue](https://github.com/QwikDev/qwik/issues/5473) as it may impact your bundle size as well. - -## Dot notation - -The biggest change of v0.4 is the addition of dot notation to the API. Also known as "namespaced components". - -This includes our largest breaking change to Qwik UI yet. We hope it is the largest ever, and want to ensure a much smoother transition going forward. Before we can do that, we need to make sure the API's are consistent across the library. - -**The component API's have been updated to use dot notation.** - -We believe that dot notation will significantly improve the developer experience. Below are some of the benefits of dot notation. - -### Simple Imports - -In previous versions, imports needed to be defined for each component. - -```tsx -import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless'; -``` - -While this is trivial with three components, it can be a pain with the more "pieces" a component has. - -```tsx -import { - Combobox, - ComboboxControl, - ComboboxIcon, - ComboboxInput, - ComboboxLabel, - ComboboxListbox, - ComboboxOption, - ComboboxPopover, - ComboboxTrigger, - ResolvedOption, -} from '@qwik-ui/headless'; -``` - -In v0.4, the new import syntax is the following: - -```tsx -import { Collapsible, Combobox } from '@qwik-ui/headless'; -``` - -### TypeScript Autocomplete - -The searchability of available components has also been improved. You can now use the autocomplete feature to find a specific sub-component. - -![component autocomplete](image-1.png) - -### Improved legibility - -For longer component names, the dot notation is arguably more legible. For example, `Combobox.Listbox` vs. `ComboboxListbox`. - -### Migration Cheat Sheet - -As an easier way to migrate, we've created a mini cheat sheet below. If you have any questions, or need help migrating, don't hesistate to reach out to us on Discord. - -**Components named , like are now ** - -> Except for and , which is now and respectively. - -With new root components, the **main props** have been moved to the root component. (for example, props previously on the Popover and Modal panels). - -Ex: - -``` - -> -``` - -For further reference, read the [RFC](https://github.com/qwikifiers/qwik-ui/issues/700) on dot notation. - -### Popover Refactor - -Based on feedback we have received from the community, we have also improved the developer experience of the Popover component. - -```tsx -import { component$ } from '@builder.io/qwik'; -import { Popover } from '@qwik-ui/headless'; - -export default component$(() => { - return ( - - Click me - - I am anchored to the popover trigger! - - - ); -}); -``` - -- By default, the popover is now anchored to its trigger. The API surface should also be simpler. - -- A new `hover` prop has also been introduced on the root, useful for things like tooltips. - -- Programmatically toggling the popover is still possible, make sure to put the same id on the `` that is passed to the `usePopover` hook. Refer to the docs for more info. - -#### - -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 -.popover-panel[data-open] { - background: green; -} -``` - -- You no longer need to pass a `popovertarget` prop to the `` component. Same with an id prop on the `` component. - -- The `placement` prop has been deprecated, and combined with the `floating` prop. - -For example, `floating="right` will now float the popover to the right. - -#### Opting out of the floating library - -To opt-out of the floating library, set the `floating={false}` on the `` component. - -May 2024, Chrome will be adding support for the CSS anchor API. This will allow us to remove the floating UI library entirely when that gains more support across browsers. - -### 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 -- The examples now include icons from the `qwikest/icons` package rather than an abstract component you could not use. diff --git a/.changeset/few-keys-argue.md b/.changeset/few-keys-argue.md deleted file mode 100644 index f264ad5bd..000000000 --- a/.changeset/few-keys-argue.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -'@qwik-ui/headless': minor ---- - -### Modal API Changes - -In a previous release, the following components have been deprecated: - -- ModalHeader -- ModalContent -- ModalFooter - -These components were native header, div, and footer elements and did nothing special under the hood. We are deprecating them in order to simplify the API and make it more consistent with the rest of the components. - -The new components are: - -#### - -This is the main container of the modal, and now holds the major props and configuration. Examples include: - -- 'bind:show'?: Signal; -- closeOnBackdropClick?: boolean; -- alert?: boolean; -- onShow$?: QRL<() => void>; -- onClose$?: QRL<() => void>; - -#### - -Previously `` the modal panel is the dialog element that is rendered on top of the page. Its props have since been moved to the `` component, please refer to the docs for more information. - -#### - -The modal now comes with a default trigger, which will open the modal when clicked. - -#### - -This computes the accessible name from the string children of the modal. - -### - -This computes the accessible description from the string children of the modal. - -### - -This is a button that closes the modal when clicked. diff --git a/.changeset/lemon-zoos-compete.md b/.changeset/lemon-zoos-compete.md deleted file mode 100644 index b2895aec9..000000000 --- a/.changeset/lemon-zoos-compete.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@qwik-ui/headless': patch ---- - -fix: popover API programmatic behavior works correctly diff --git a/.changeset/orange-points-reflect.md b/.changeset/orange-points-reflect.md deleted file mode 100644 index 03565f05e..000000000 --- a/.changeset/orange-points-reflect.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@qwik-ui/styled': patch ---- - -FEAT new styled select component diff --git a/.changeset/silent-yaks-crash.md b/.changeset/silent-yaks-crash.md deleted file mode 100644 index 116e54ccb..000000000 --- a/.changeset/silent-yaks-crash.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -'@qwik-ui/headless': minor ---- - -### Select API Changes - -- `` has been renamed to ``. -- `` has been renamed to ``. - -### `` - -A new component that allows for customize of the list item. - -#### `` - -This component is used to render an icon or other visual element that is displayed next to the `` whenever an item is selected. - -### Multi-select - -To opt-in to the multi-select mode, set the `multiple` prop to `true`. Please refer to the `Multiple Selections` section in the docs for more information. - -The previous API did not allow for customization of list items. The new API introduces a couple new components: - -```tsx - - My Display Option! - - {/* anything goes here */} - - -``` - -You can now put anything you'd like in your ``, just like a normal li tag! - -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 - -We have been exploring more with the `bind` syntax. `bind:x` is a convention based on `bind:value` and `bind:checked`, where a signal is passed and two way data binding is enabled. - -> This is much more performant than previous two way data binding, thanks to signals. - -As a general note: - -name -> initial value - -anything that does not start with `bind:` is a static value. - -bind:name -> reactive signal - -anything that starts with `bind:` is a reactive signal. - -If you find yourself curious to explore the bind syntax more, try typing `bind:` on a root component in Qwik UI, you should see a list of available things you can reactively customize! diff --git a/.changeset/slimy-snakes-poke.md b/.changeset/slimy-snakes-poke.md deleted file mode 100644 index c02d6b75c..000000000 --- a/.changeset/slimy-snakes-poke.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -'@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 & - VariantProps; - -const Panel = component$(({ position, ...props }) => { - return ( - - - - ); -}); -``` - -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. diff --git a/.changeset/ten-actors-explain.md b/.changeset/ten-actors-explain.md deleted file mode 100644 index b68f3ba7f..000000000 --- a/.changeset/ten-actors-explain.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@qwik-ui/styled': patch ---- - -Styled button now uses `transition-all` for every variant shared class diff --git a/.changeset/two-glasses-fix.md b/.changeset/two-glasses-fix.md deleted file mode 100644 index e4d037ffc..000000000 --- a/.changeset/two-glasses-fix.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -'@qwik-ui/headless': minor ---- - -### Tooltip - -The Tooltip component has been refactored from the ground up to be more accessible and performant. - -It is now built on top of the popover primitive, and has a similar API. - -It remains in `draft` status, and is not yet ready for production use. We will be working on it more deeply in the near future. - -### Accordion - -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 `` 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 `` component with the `value` prop. - -- Disable Accordion items by setting the `disabled` prop to true on the `` 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: - -- Drawer -- Breadcrumb -- Action Button -- Button Group -- Toast -- Card -- Badge -- Spinner -- Rating -- Checkbox - -Most of these components were in a pre-alpha state, duplicates from the styled kit, or were not yet ready for production use. They were lying around in the codebase for a while, and we have gained many insights since then on creating accessible, unstyled, and performant components. - -You can expect the **Toast** and the **Tooltip** to come back with a much more polished form in a future release. diff --git a/packages/cli/package.json b/packages/cli/package.json index d3a4056b3..98f30ce57 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -14,7 +14,7 @@ "yargs": "17.7.2" }, "devDependencies": { - "@qwik-ui/styled": "0.0.6" + "@qwik-ui/styled": "0.1.0" }, "type": "commonjs", "main": "./src/index.js", diff --git a/packages/kit-headless/CHANGELOG.md b/packages/kit-headless/CHANGELOG.md index 078ea56a2..6e7f44001 100644 --- a/packages/kit-headless/CHANGELOG.md +++ b/packages/kit-headless/CHANGELOG.md @@ -1,5 +1,294 @@ # Changelog +## 0.4.0 + +### Minor Changes + +- ## 100% Lazy execution (by [@thejackshelton](https://github.com/thejackshelton) in [#737](https://github.com/qwikifiers/qwik-ui/pull/737)) + + The entire Qwik UI library does not execute code until interaction. Your components are HTML, until the user decides to interact with them. + + ## Bundling improvements + + We have reduced the bundle size significantly of the headless library. If you are a Qwik library author, please refer to [this issue](https://github.com/QwikDev/qwik/issues/5473) as it may impact your bundle size as well. + + ## Dot notation + + The biggest change of v0.4 is the addition of dot notation to the API. Also known as "namespaced components". + + This includes our largest breaking change to Qwik UI yet. We hope it is the largest ever, and want to ensure a much smoother transition going forward. Before we can do that, we need to make sure the API's are consistent across the library. + + **The component API's have been updated to use dot notation.** + + We believe that dot notation will significantly improve the developer experience. Below are some of the benefits of dot notation. + + ### Simple Imports + + In previous versions, imports needed to be defined for each component. + + ```tsx + import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless'; + ``` + + While this is trivial with three components, it can be a pain with the more "pieces" a component has. + + ```tsx + import { + Combobox, + ComboboxControl, + ComboboxIcon, + ComboboxInput, + ComboboxLabel, + ComboboxListbox, + ComboboxOption, + ComboboxPopover, + ComboboxTrigger, + ResolvedOption, + } from '@qwik-ui/headless'; + ``` + + In v0.4, the new import syntax is the following: + + ```tsx + import { Collapsible, Combobox } from '@qwik-ui/headless'; + ``` + + ### TypeScript Autocomplete + + The searchability of available components has also been improved. You can now use the autocomplete feature to find a specific sub-component. + + ![component autocomplete](image-1.png) + + ### Improved legibility + + For longer component names, the dot notation is arguably more legible. For example, `Combobox.Listbox` vs. `ComboboxListbox`. + + ### Migration Cheat Sheet + + As an easier way to migrate, we've created a mini cheat sheet below. If you have any questions, or need help migrating, don't hesistate to reach out to us on Discord. + + **Components named , like are now ** + + > Except for and , which is now and respectively. + + With new root components, the **main props** have been moved to the root component. (for example, props previously on the Popover and Modal panels). + + Ex: + + ``` + -> + ``` + + For further reference, read the [RFC](https://github.com/qwikifiers/qwik-ui/issues/700) on dot notation. + + ### Popover Refactor + + Based on feedback we have received from the community, we have also improved the developer experience of the Popover component. + + ```tsx + import { component$ } from '@builder.io/qwik'; + import { Popover } from '@qwik-ui/headless'; + + export default component$(() => { + return ( + + Click me + + I am anchored to the popover trigger! + + + ); + }); + ``` + + - By default, the popover is now anchored to its trigger. The API surface should also be simpler. + - A new `hover` prop has also been introduced on the root, useful for things like tooltips. + - Programmatically toggling the popover is still possible, make sure to put the same id on the `` that is passed to the `usePopover` hook. Refer to the docs for more info. + + #### + + 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 + .popover-panel[data-open] { + background: green; + } + ``` + + - You no longer need to pass a `popovertarget` prop to the `` component. Same with an id prop on the `` component. + - The `placement` prop has been deprecated, and combined with the `floating` prop. + + For example, `floating="right` will now float the popover to the right. + + #### Opting out of the floating library + + To opt-out of the floating library, set the `floating={false}` on the `` component. + + May 2024, Chrome will be adding support for the CSS anchor API. This will allow us to remove the floating UI library entirely when that gains more support across browsers. + + ### 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 + - The examples now include icons from the `qwikest/icons` package rather than an abstract component you could not use. + +- ### 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 + + These components were native header, div, and footer elements and did nothing special under the hood. We are deprecating them in order to simplify the API and make it more consistent with the rest of the components. + + The new components are: + + #### + + This is the main container of the modal, and now holds the major props and configuration. Examples include: + + - 'bind:show'?: Signal; + - closeOnBackdropClick?: boolean; + - alert?: boolean; + - onShow$?: QRL<() => void>; + - onClose$?: QRL<() => void>; + + #### + + Previously `` the modal panel is the dialog element that is rendered on top of the page. Its props have since been moved to the `` component, please refer to the docs for more information. + + #### + + The modal now comes with a default trigger, which will open the modal when clicked. + + #### + + This computes the accessible name from the string children of the modal. + + ### + + This computes the accessible description from the string children of the modal. + + ### + + 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)) + + - `` has been renamed to ``. + - `` has been renamed to ``. + + ### `` + + A new component that allows for customize of the list item. + + #### `` + + This component is used to render an icon or other visual element that is displayed next to the `` whenever an item is selected. + + ### Multi-select + + To opt-in to the multi-select mode, set the `multiple` prop to `true`. Please refer to the `Multiple Selections` section in the docs for more information. + + The previous API did not allow for customization of list items. The new API introduces a couple new components: + + ```tsx + + My Display Option! + + {/* anything goes here */} + + + ``` + + You can now put anything you'd like in your ``, just like a normal li tag! + + 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 + + We have been exploring more with the `bind` syntax. `bind:x` is a convention based on `bind:value` and `bind:checked`, where a signal is passed and two way data binding is enabled. + + > This is much more performant than previous two way data binding, thanks to signals. + + As a general note: + + name -> initial value + + anything that does not start with `bind:` is a static value. + + bind:name -> reactive signal + + anything that starts with `bind:` is a reactive signal. + + If you find yourself curious to explore the bind syntax more, try typing `bind:` on a root component in Qwik UI, you should see a list of available things you can reactively customize! + +- ### Tooltip (by [@thejackshelton](https://github.com/thejackshelton) in [#733](https://github.com/qwikifiers/qwik-ui/pull/733)) + + The Tooltip component has been refactored from the ground up to be more accessible and performant. + + It is now built on top of the popover primitive, and has a similar API. + + It remains in `draft` status, and is not yet ready for production use. We will be working on it more deeply in the near future. + + ### Accordion + + 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 `` component. + - The default behavior is a single item open at a time. + - `onSelectIndexChange# Changelog has been deprecated and removed in favor of `onChange# Changelog. + - `onFocusIndexChange# Changelog 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 `` component with the `value` prop. + - Disable Accordion items by setting the `disabled` prop to true on the `` 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 + - Button Group + - Toast + - Card + - Badge + - Spinner + - Rating + - Checkbox + + Most of these components were in a pre-alpha state, duplicates from the styled kit, or were not yet ready for production use. They were lying around in the codebase for a while, and we have gained many insights since then on creating accessible, unstyled, and performant components. + + You can expect the **Toast** and the **Tooltip** to come back with a much more polished form in a future release. + +### Patch Changes + +- 🐞🩹 popover API programmatic behavior works correctly (by [@thejackshelton](https://github.com/thejackshelton) in [#730](https://github.com/qwikifiers/qwik-ui/pull/730)) + ## 0.3.8 ### Patch Changes diff --git a/packages/kit-headless/package.json b/packages/kit-headless/package.json index 50f029f6d..4ede245da 100644 --- a/packages/kit-headless/package.json +++ b/packages/kit-headless/package.json @@ -1,6 +1,6 @@ { "name": "@qwik-ui/headless", - "version": "0.3.8", + "version": "0.4.0", "description": "Qwik UI headless components library", "publishConfig": { "access": "public" diff --git a/packages/kit-styled/CHANGELOG.md b/packages/kit-styled/CHANGELOG.md index 34c554fb0..2453dd245 100644 --- a/packages/kit-styled/CHANGELOG.md +++ b/packages/kit-styled/CHANGELOG.md @@ -1,5 +1,111 @@ # @qwik-ui/styled +## 0.1.0 + +### Minor Changes + +- ## tailwind.config.cjs (by [@maiieul](https://github.com/maiieul) in [#753](https://github.com/qwikifiers/qwik-ui/pull/753)) + + 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 & + VariantProps; + + const Panel = component$(({ position, ...props }) => { + return ( + + + + ); + }); + ``` + + 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. + +### Patch Changes + +- FEAT new styled select component (by [@maiieul](https://github.com/maiieul) in [#759](https://github.com/qwikifiers/qwik-ui/pull/759)) + +- Styled button now uses `transition-all` for every variant shared class (by [@maiieul](https://github.com/maiieul) in [#753](https://github.com/qwikifiers/qwik-ui/pull/753)) + ## 0.0.6 ### Patch Changes diff --git a/packages/kit-styled/package.json b/packages/kit-styled/package.json index 83d89a580..0376e106b 100644 --- a/packages/kit-styled/package.json +++ b/packages/kit-styled/package.json @@ -1,6 +1,6 @@ { "name": "@qwik-ui/styled", - "version": "0.0.6", + "version": "0.1.0", "description": "Qwik UI components library with styles", "publishConfig": { "access": "public" @@ -18,7 +18,7 @@ "@builder.io/qwik": "^1.1.0" }, "devDependencies": { - "@qwik-ui/headless": "0.3.8", + "@qwik-ui/headless": "0.4.0", "@qwik-ui/utils": "0.2.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4856746eb..8972c4b3a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + importers: .: @@ -353,7 +357,7 @@ importers: version: 17.7.2 devDependencies: '@qwik-ui/styled': - specifier: 0.0.6 + specifier: 0.1.0 version: link:../kit-styled packages/kit-headless: @@ -373,7 +377,7 @@ importers: version: 1.5.5(@types/node@20.12.12)(sass@1.77.2)(undici@5.28.4) devDependencies: '@qwik-ui/headless': - specifier: 0.3.8 + specifier: 0.4.0 version: link:../kit-headless '@qwik-ui/utils': specifier: 0.2.1