@codefast/ui 0.4.0-canary.6 → 0.5.0-canary.0

package/CHANGELOG.md

@@ -1,5 +1,137 @@
 # @codefast/ui
 
+## 0.5.0-canary.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @codefast/tailwind-variants@0.5.0-canary.0
+
+## 0.4.0
+
+### Minor Changes
+
+- [`aa7bb5c`](https://github.com/codefastlabs/codefast/commit/aa7bb5ce612302876aa437bcd43ef0da4507371c) Thanks [@thevuong](https://github.com/thevuong)! - feat(checkbox): render the indeterminate state across the checkbox family — fill the box and swap to a minus icon when `data-state="indeterminate"`, with a matching `data-indeterminate` variant
+
+- [`6ed13a0`](https://github.com/codefastlabs/codefast/commit/6ed13a07713f4670b0f1813566af2c083989abd1) Thanks [@thevuong](https://github.com/thevuong)! - Add `--ease-exit` motion token and apply asymmetric enter/exit easing across overlay, popup, accordion, and sidebar components, syncing dialog overlay durations with content.
+
+- [`0355d6b`](https://github.com/codefastlabs/codefast/commit/0355d6bfaf26bd465a811a6123e16f88fdb2fede) Thanks [@thevuong](https://github.com/thevuong)! - Add semantic motion duration tokens (`menu`, `popup`, `overlay`, `panel`, `expand`) and retune component timings for snappier feedback — menus 150/100ms, popovers 200/120ms, dialogs 220/150ms, sheets and drawers 320/220ms, accordion 200/150ms.
+
+### Patch Changes
+
+- [`2397801`](https://github.com/codefastlabs/codefast/commit/239780172d7a71c3426382ec66309ec7f39bd883) Thanks [@thevuong](https://github.com/thevuong)! - chore: align package config globs
+
+- [`be5fb85`](https://github.com/codefastlabs/codefast/commit/be5fb8568f871ea6a396b431caa48c1a9a7b6efb) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): update source file patterns in preset.css
+
+- [`b126ce7`](https://github.com/codefastlabs/codefast/commit/b126ce79b786b282914a1b1bffaaeb9d32d528a7) Thanks [@thevuong](https://github.com/thevuong)! - feat(motion): add control duration tokens and apply them to form controls
+
+  Define two semantic timing tokens in the motion foundation and use them across Switch, Checkbox (+ Cards/Group) and Radio (+ Group/Cards):
+
+  - `--transition-duration-control: 200ms` — container/ring (switch track, checkbox & radio box)
+  - `--transition-duration-control-indicator: 300ms` — the moving part (switch thumb, check/dot, native radio dot)
+
+  They live in the `--transition-duration-*` namespace so they mint clean `duration-control` / `duration-control-indicator` utilities. Because `animate-in` falls back to `--tw-duration`, the same `duration-*` utility drives both the state transitions and the indicator keyframes — one token, one utility, no arbitrary `duration-(--…)` syntax.
+
+- [`8a1a2e7`](https://github.com/codefastlabs/codefast/commit/8a1a2e74d985ae36a00855938c8ed7ab8699ad48) Thanks [@thevuong](https://github.com/thevuong)! - refactor(motion): shorten control transition durations (container 200→100ms, indicator 300→200ms) for snappier switches, checkboxes, and radios
+
+- [`7242fb2`](https://github.com/codefastlabs/codefast/commit/7242fb2a10e1dbb4a23d95060e6ab22a52dd04ba) Thanks [@thevuong](https://github.com/thevuong)! - style(controls): differentiate motion tokens by role across form controls
+
+  Apply the design system's motion curves consistently: containers/rings use `ease-snappy`, while the moving/appearing indicators use `ease-spring`.
+
+  - Switch thumb now eases with `ease-spring` (the positional slide); the track keeps `ease-snappy`.
+  - Checkbox, CheckboxCards and CheckboxGroup indicators spring-scale in (`animate-in zoom-in-50 ease-spring`) instead of appearing instantly.
+  - RadioGroup and RadioCards dots spring-scale in, centering preserved.
+
+- [`b80606a`](https://github.com/codefastlabs/codefast/commit/b80606ab8dd9f48afa0b0d8f8da025c0158f70fc) Thanks [@thevuong](https://github.com/thevuong)! - style(switch, checkbox): apply the ease-snappy motion token to control transitions
+
+  Switch (track + thumb slide) and the Checkbox family previously used bare `transition-*` utilities, falling back to Tailwind's hardcoded default curve. They now use the design system's `--ease-snappy` token so the timing stays consistent with the rest of the motion system and follows future theme retunes.
+
+- [`2d80596`](https://github.com/codefastlabs/codefast/commit/2d80596025c11f61ecb4334a28c478ed81bfd409) Thanks [@thevuong](https://github.com/thevuong)! - Migrate physical CSS direction utilities to their logical (start/end) equivalents so components mirror correctly under RTL.
+
+- [`36ced8f`](https://github.com/codefastlabs/codefast/commit/36ced8f754989c50b78722ef07cadb37349c155e) Thanks [@thevuong](https://github.com/thevuong)! - chore(deps): update catalog dependencies — radix-ui 1.5.0, react-hook-form 7.78.0, TanStack Router/Start patches, hono 4.12.25, oxfmt 0.54 / oxlint 1.69, knip 6.16, turbo 2.9.17-canary.7 — and bump pnpm to 11.5.2
+
+- [`72ac094`](https://github.com/codefastlabs/codefast/commit/72ac0945e6901435c01a8d120e9c88e7506ecc1a) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): extract component variants into separate files
+
+- [`81dfc17`](https://github.com/codefastlabs/codefast/commit/81dfc178bd2f01e711a3453036558a66240eb8fa) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): remove "use client" directive from multiple components
+
+- [`61950fa`](https://github.com/codefastlabs/codefast/commit/61950fa1612011dfa0739a71014879097a1d39d5) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): replace @radix-ui/react-context with radix-ui package
+
+- [`8f28029`](https://github.com/codefastlabs/codefast/commit/8f28029886f3e4d2fd4e8de4ef7fa5583afb2489) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): adjust border radius in input group styles
+
+- [`92e085b`](https://github.com/codefastlabs/codefast/commit/92e085b8fe7afd4a3a43dcfe3e46aa1c2c3cb0e3) Thanks [@thevuong](https://github.com/thevuong)! - fix(ui): align ContextMenuSubTrigger spacing with ContextMenuItem so submenu trigger icons sit correctly
+
+- [`4e60f6e`](https://github.com/codefastlabs/codefast/commit/4e60f6ee0366cea83a16c87162751112052204af) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): streamline component styling and className usage
+
+- [`f79b333`](https://github.com/codefastlabs/codefast/commit/f79b333d0599c19028f29b9889afcbfb99db91a1) Thanks [@thevuong](https://github.com/thevuong)! - feat(dev): enable source condition for zero-rebuild HMR in apps/docs
+
+- [`3602626`](https://github.com/codefastlabs/codefast/commit/3602626e720af8710c6cca058f84e96010853c86) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): enhance InputGroup component structure and styling
+
+- [`81fa5b6`](https://github.com/codefastlabs/codefast/commit/81fa5b6ca3e332c0d088d47d2768543e23491350) Thanks [@thevuong](https://github.com/thevuong)! - feat(ui): enhance InputNumber component with new split variant and additional functionality
+
+- [`354c97e`](https://github.com/codefastlabs/codefast/commit/354c97ec3109bd7d59e1200171a78da17dbdc59c) Thanks [@thevuong](https://github.com/thevuong)! - fix(menubar): align `menubar-label` styling with the dropdown/context menu family — use `text-xs` and `text-muted-foreground` to match `dropdown-menu-label` and `context-menu-label`
+
+- [`ea62fa8`](https://github.com/codefastlabs/codefast/commit/ea62fa8243be7d06a9f2f097ac44d2843f003ef1) Thanks [@thevuong](https://github.com/thevuong)! - refactor(navigation-menu): pass the trigger `className` to `navigationMenuTriggerVariants` as a `ClassValue` array instead of pre-merging with `cn`, letting the variant resolver handle merging in one pass
+
+- [`be02960`](https://github.com/codefastlabs/codefast/commit/be029601a0321c79e0d8b12121b144fef3274ef7) Thanks [@thevuong](https://github.com/thevuong)! - Fix navigation menu viewport scale animation by replacing the invalid `origin-top-center` class with `origin-[top_center]`.
+
+- [`43029c0`](https://github.com/codefastlabs/codefast/commit/43029c0e9e2a6c70173f283a13de888c6e350616) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): update component styling for consistency and clarity
+
+- [`5c82b5e`](https://github.com/codefastlabs/codefast/commit/5c82b5ea742701ac7836ffa8bb4bf4135e069d1d) Thanks [@thevuong](https://github.com/thevuong)! - Use minimum `>=` ranges in peerDependencies instead of `^` caret ranges.
+
+- [`bea29d7`](https://github.com/codefastlabs/codefast/commit/bea29d73d18c7d0419db08ee33672794c414a827) Thanks [@thevuong](https://github.com/thevuong)! - Migrate reduced-motion handling to Tailwind `motion-reduce` utilities across UI components.
+
+- [`e3ea150`](https://github.com/codefastlabs/codefast/commit/e3ea15046bc5a23d777719aa0f4ba46efda6d15d) Thanks [@thevuong](https://github.com/thevuong)! - fix(radio-group): lay the root out as a flex column instead of a grid so items stack predictably
+
+- [`90a4aae`](https://github.com/codefastlabs/codefast/commit/90a4aae9720dc36cf89432139c582dba3b40e5bb) Thanks [@thevuong](https://github.com/thevuong)! - style(radio): spring the native radio dot, matching RadioGroup
+
+  The native `Radio` input drew its dot with a `::before` that doubled as the unchecked fill, so animating it made the dot shrink in — the opposite of the Radix-based RadioGroup/RadioCards dots, which scale up. Move the inner fill onto the input's own `bg-background`/`bg-input` so `::before` is purely the dot, then scale it `0 → 1` with `before:transition-transform before:ease-spring` on check. The dot now grows in with the same spring curve as the other radios; the static appearance is unchanged in light and dark.
+
+- [`6c3ac44`](https://github.com/codefastlabs/codefast/commit/6c3ac44b7ddb9e5bcf3fbe0757e00ef86f27b513) Thanks [@thevuong](https://github.com/thevuong)! - Normalize import statement order and package.json key order repo-wide via the new oxfmt `sortImports`/`sortPackageJson` settings — purely mechanical, no runtime behavior change.
+
+- [`908fdb9`](https://github.com/codefastlabs/codefast/commit/908fdb9e4470da6ab9329f705ba4cae8831b92c8) Thanks [@thevuong](https://github.com/thevuong)! - fix(ui): restore side-scoped slide animations on popover, hover-card, select, and tooltip
+
+  Reinstate ease-snappy easing with distinct open/close durations, scope slide-in
+  classes under data-open (and data-delayed-open for tooltip), and bring back
+  directional slide-out on close — matching the previously restored context menu,
+  dropdown menu, and menubar motion.
+
+- [`d059a00`](https://github.com/codefastlabs/codefast/commit/d059a00c8beeff35fc887318486fd4f7a1883e38) Thanks [@thevuong](https://github.com/thevuong)! - fix(ui): flip transforms and resize cursors under `dir="rtl"`
+
+  Logical properties (`start-*`) flip in RTL but the paired `translate-x`/`cursor`
+  utilities do not, leaving elements offset. Add `rtl:` overrides so Dialog and
+  AlertDialog stay centred, the Switch thumb slides the correct way, and the
+  Carousel buttons, Resizable handle, Select popper offset, Sidebar rail cursors,
+  and RadioCards indicator all mirror correctly.
+
+- [`0f9c31b`](https://github.com/codefastlabs/codefast/commit/0f9c31ba3daa6ab84b986277e9f459a03b2efac1) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): enhance BreadcrumbSeparator component styling and props
+
+- [`6dfa3aa`](https://github.com/codefastlabs/codefast/commit/6dfa3aa9bd805870a37e49ec179a7901bc7c550b) Thanks [@thevuong](https://github.com/thevuong)! - Scope overlay enter/exit timing with `animation-duration-*` utilities (no more implicit all-property transitions from `duration-*`), make the navigation menu viewport size transition explicit, and fix the input OTP caret blink speed so the intended 1s duration actually applies.
+
+- [`e7957a7`](https://github.com/codefastlabs/codefast/commit/e7957a7c7f054e27dc8ddc9a2d70dc9611aad86f) Thanks [@thevuong](https://github.com/thevuong)! - Refine component motion with spring, snappy, and gentle easing tokens, shimmer skeleton loading, consistent theme token ordering, polished transitions on overlay and form controls, and subtler checkbox, radio, and switch press feedback.
+
+- [`2758038`](https://github.com/codefastlabs/codefast/commit/275803861ee088d876d736342697b08a5e8ff663) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): replace `react-day-picker` with `@daypicker/react`
+
+- [`7f2916c`](https://github.com/codefastlabs/codefast/commit/7f2916c2048f2e770f29152e6bac0a67ce641e72) Thanks [@thevuong](https://github.com/thevuong)! - refactor(switch): align default size to the spacing grid
+
+  Replace the hand-computed `h-[18.4px]` track and `translate-x-[calc(100%-2px)]` thumb offsets with on-grid utilities (`h-4.5`, `translate-x-3.5`/`translate-x-2.5`). The checked thumb travel is unchanged (14px default, 10px small); the default track is 0.4px shorter (18.4px → 18px).
+
+- [`2acd2a7`](https://github.com/codefastlabs/codefast/commit/2acd2a7fc256a9510fa6efbb62342679dbb0919f) Thanks [@thevuong](https://github.com/thevuong)! - Support system dark mode via prefers-color-scheme, soften dialog and sheet overlays with backdrop blur, and polish bottom sheet layout for mobile safe areas.
+
+- [`19306bb`](https://github.com/codefastlabs/codefast/commit/19306bb40a6a7e8d34f071f90450224ef74cbf3b) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): simplify `utils.ts` imports and cleanup
+
+- [`f37002d`](https://github.com/codefastlabs/codefast/commit/f37002d9e8e5a56d58bf9251a0bae7a6be0ad278) Thanks [@thevuong](https://github.com/thevuong)! - feat(ui): export DirectionProvider to propagate reading direction
+
+- [`84ac2e0`](https://github.com/codefastlabs/codefast/commit/84ac2e02716f8c23956aa0045a48b0e8b117b354) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): simplify DirectionProvider and useDirection
+
+- [`547cf34`](https://github.com/codefastlabs/codefast/commit/547cf34cc43c44f4b46680f66cbe30fb42e7ff2c) Thanks [@thevuong](https://github.com/thevuong)! - Tune dialog, alert-dialog, drawer, and sheet overlay animations with asymmetric open/close durations and gentle easing.
+
+- [`339c794`](https://github.com/codefastlabs/codefast/commit/339c79460e287ac7ec5e12ff68496aad01b664a2) Thanks [@thevuong](https://github.com/thevuong)! - Replace directional `text-left` utilities with logical `text-start` in accordion, alert-dialog, drawer, field, item, table, alert, and sidebar so text alignment follows the document direction in RTL layouts.
+
+- [`2dbf2ea`](https://github.com/codefastlabs/codefast/commit/2dbf2ea8779ed390f7d36ac4c80f63a9f61a6123) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): drop redundant single-arg `cn(className)` in Breadcrumb, CalendarRoot, AlertDialogAction/Cancel, and SidebarTrigger — `className` already forwards through `...props`, so the extra destructure and wrapper added nothing
+
+- Updated dependencies [[`2397801`](https://github.com/codefastlabs/codefast/commit/239780172d7a71c3426382ec66309ec7f39bd883), [`6350584`](https://github.com/codefastlabs/codefast/commit/635058490b7c08a07771897403107b3ae86fca19), [`f79b333`](https://github.com/codefastlabs/codefast/commit/f79b333d0599c19028f29b9889afcbfb99db91a1), [`8432414`](https://github.com/codefastlabs/codefast/commit/8432414b941a61f67800c378da73c8f45913913f), [`6c3ac44`](https://github.com/codefastlabs/codefast/commit/6c3ac44b7ddb9e5bcf3fbe0757e00ef86f27b513), [`d07b567`](https://github.com/codefastlabs/codefast/commit/d07b5671661e0fbef03fbbf42c1d603a65d796e5), [`649cf5a`](https://github.com/codefastlabs/codefast/commit/649cf5a63b654dd6517ff472a1c2a0e35db86fdf)]:
+  - @codefast/tailwind-variants@0.4.0
+
 ## 0.4.0-canary.6
 
 ### Patch Changes

package/dist/components/alert-dialog.mjs

@@ -31,7 +31,7 @@ function AlertDialogContent({ className, size = "default", ...props }) {
 			className: "fixed inset-0 z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0",
 			"data-slot": "alert-dialog-overlay"
 		}), /* @__PURE__ */ jsx(AlertDialog$1.Content, {
-			className: cn("group/alert-dialog-content fixed start-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg rtl:translate-x-1/2 data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			className: cn("group/alert-dialog-content fixed inset-s-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg rtl:translate-x-1/2 data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 			"data-size": size,
 			"data-slot": "alert-dialog-content",
 			...props

package/dist/components/alert.mjs

@@ -41,7 +41,7 @@ function AlertDescription({ className, ...props }) {
 */
 function AlertAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("absolute end-3 top-2.5", className),
+		className: cn("absolute inset-e-3 top-2.5", className),
 		"data-slot": "alert-action",
 		...props
 	});

package/dist/components/avatar.mjs

@@ -38,7 +38,7 @@ function AvatarFallback({ className, ...props }) {
 */
 function AvatarBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		className: cn("absolute inset-e-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
 		"data-slot": "avatar-badge",
 		...props
 	});

package/dist/components/calendar.mjs

@@ -33,9 +33,9 @@ function Calendar({ buttonVariant = "ghost", captionLayout = "label", className,
 			week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
 			week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
 			day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)", defaultClassNames.day),
-			range_start: cn("relative isolate z-0 rounded-s-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:end-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
+			range_start: cn("relative isolate z-0 rounded-s-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:inset-e-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
 			range_middle: cn("rounded-none", defaultClassNames.range_middle),
-			range_end: cn("relative isolate z-0 rounded-e-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:start-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
+			range_end: cn("relative isolate z-0 rounded-e-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:inset-s-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
 			today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
 			outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
 			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),

package/dist/components/carousel.mjs

@@ -125,7 +125,7 @@ function CarouselPrevious({ __scopeCarousel, className, size = "icon-sm", varian
 	const { canScrollPrev, orientation, scrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
 	return /* @__PURE__ */ jsxs(Button, {
 		"aria-label": "Previous slide",
-		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "-start-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]" : "start-1/2 -top-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2", className),
+		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "-inset-s-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]" : "inset-s-1/2 -top-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2", className),
 		"data-slot": "carousel-previous",
 		disabled: !canScrollPrev,
 		size,
@@ -146,7 +146,7 @@ function CarouselNext({ __scopeCarousel, className, size = "icon-sm", variant =
 	const { canScrollNext, orientation, scrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
 	return /* @__PURE__ */ jsxs(Button, {
 		"aria-label": "Next slide",
-		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "-end-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]" : "start-1/2 -bottom-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2", className),
+		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "-inset-e-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]" : "inset-s-1/2 -bottom-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2", className),
 		"data-slot": "carousel-next",
 		disabled: !canScrollNext,
 		size,

package/dist/components/context-menu.mjs

@@ -107,7 +107,7 @@ function ContextMenuCheckboxItem({ checked, children, className, inset, ...props
 		"data-slot": "context-menu-checkbox-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute end-2",
+			className: "pointer-events-none absolute inset-e-2",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
@@ -122,7 +122,7 @@ function ContextMenuRadioItem({ children, className, inset, ...props }) {
 		"data-slot": "context-menu-radio-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute end-2",
+			className: "pointer-events-none absolute inset-e-2",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});

package/dist/components/dialog.mjs

@@ -32,14 +32,14 @@ function DialogContent({ children, className, showCloseButton = true, ...props }
 			className: "fixed inset-0 isolate z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0",
 			"data-slot": "dialog-overlay"
 		}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
-			className: cn("fixed start-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none sm:max-w-md rtl:translate-x-1/2 data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			className: cn("fixed inset-s-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none sm:max-w-md rtl:translate-x-1/2 data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 			"data-slot": "dialog-content",
 			...props,
 			children: [children, showCloseButton ? /* @__PURE__ */ jsx(Dialog$1.Close, {
 				asChild: true,
 				"data-slot": "dialog-close",
 				children: /* @__PURE__ */ jsxs(Button, {
-					className: "absolute end-4 top-4",
+					className: "absolute inset-e-4 top-4",
 					size: "icon-sm",
 					variant: "ghost",
 					children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {

package/dist/components/drawer.mjs

@@ -32,7 +32,7 @@ function DrawerContent({ children, className, ...props }) {
 			className: "fixed inset-0 z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-panel-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-panel-out data-closed:fade-out-0",
 			"data-slot": "drawer-overlay"
 		}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
-			className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
+			className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:inset-s-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:inset-e-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
 			"data-slot": "drawer-content",
 			...props,
 			children: [/* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 hidden h-1.5 w-25 shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]

package/dist/components/dropdown-menu.mjs

@@ -111,7 +111,7 @@ function DropdownMenuCheckboxItem({ checked, children, className, inset, ...prop
 		"data-slot": "dropdown-menu-checkbox-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute end-2 flex items-center justify-center",
+			className: "pointer-events-none absolute inset-e-2 flex items-center justify-center",
 			"data-slot": "dropdown-menu-checkbox-item-indicator",
 			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
@@ -127,7 +127,7 @@ function DropdownMenuRadioItem({ children, className, inset, ...props }) {
 		"data-slot": "dropdown-menu-radio-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute end-2 flex items-center justify-center",
+			className: "pointer-events-none absolute inset-e-2 flex items-center justify-center",
 			"data-slot": "dropdown-menu-radio-item-indicator",
 			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]

package/dist/components/menubar.mjs

@@ -123,7 +123,7 @@ function MenubarCheckboxItem({ checked, children, className, inset, ...props })
 		"data-slot": "menubar-checkbox-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			className: "pointer-events-none absolute inset-s-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
 			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
@@ -138,7 +138,7 @@ function MenubarRadioItem({ children, className, inset, ...props }) {
 		"data-slot": "menubar-radio-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			className: "pointer-events-none absolute inset-s-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
 			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});

package/dist/components/native-select.mjs

@@ -17,7 +17,7 @@ function NativeSelect({ className, size = "default", ...props }) {
 			...props
 		}), /* @__PURE__ */ jsx(ChevronDownIcon, {
 			"aria-hidden": "true",
-			className: "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground select-none",
+			className: "pointer-events-none absolute inset-e-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground select-none",
 			"data-slot": "native-select-icon"
 		})]
 	});

package/dist/components/navigation-menu.mjs

@@ -60,7 +60,7 @@ function NavigationMenuTrigger({ children, className, ...props }) {
 */
 function NavigationMenuContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
-		className: cn("start-0 top-0 w-full p-2 pe-2.5 ease-snappy group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:animation-duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:ease-exit data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 data-closed:ease-exit group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95", className),
+		className: cn("inset-s-0 top-0 w-full p-2 pe-2.5 ease-snappy group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:animation-duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:ease-exit data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 data-closed:ease-exit group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95", className),
 		"data-slot": "navigation-menu-content",
 		...props
 	});
@@ -80,7 +80,7 @@ function NavigationMenuLink({ className, ...props }) {
 */
 function NavigationMenuViewport({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "absolute start-0 top-full isolate z-50 flex justify-center",
+		className: "absolute inset-s-0 top-full isolate z-50 flex justify-center",
 		children: /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, {
 			className: cn("relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full origin-[top_center] overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[width,height] duration-100 ease-snappy md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:animation-duration-100 data-open:zoom-in-90 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-100 data-closed:zoom-out-90", className),
 			"data-slot": "navigation-menu-viewport",

package/dist/components/radio-cards.mjs

@@ -26,7 +26,7 @@ function RadioCardsItem({ children, className, ...props }) {
 			children: /* @__PURE__ */ jsx(RadioGroup.Indicator, {
 				className: "flex size-4 items-center justify-center",
 				"data-slot": "radio-card-indicator",
-				children: /* @__PURE__ */ jsx("span", { className: "absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 animate-in rounded-full bg-primary-foreground duration-control-indicator ease-spring zoom-in-50 rtl:translate-x-1/2" })
+				children: /* @__PURE__ */ jsx("span", { className: "absolute inset-s-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 animate-in rounded-full bg-primary-foreground duration-control-indicator ease-spring zoom-in-50 rtl:translate-x-1/2" })
 			})
 		}), children]
 	});

package/dist/components/radio-group.mjs

@@ -23,7 +23,7 @@ function RadioGroupItem({ className, ...props }) {
 		children: /* @__PURE__ */ jsx(RadioGroup$1.Indicator, {
 			className: "flex size-4 items-center justify-center",
 			"data-slot": "radio-group-indicator",
-			children: /* @__PURE__ */ jsx("span", { className: "absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 animate-in rounded-full bg-primary-foreground duration-control-indicator ease-spring zoom-in-50 rtl:translate-x-1/2" })
+			children: /* @__PURE__ */ jsx("span", { className: "absolute inset-s-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 animate-in rounded-full bg-primary-foreground duration-control-indicator ease-spring zoom-in-50 rtl:translate-x-1/2" })
 		})
 	});
 }

package/dist/components/resizable.mjs

@@ -26,7 +26,7 @@ function ResizablePanel({ ...props }) {
 */
 function ResizableSeparator({ className, withHandle, ...props }) {
 	return /* @__PURE__ */ jsx(ResizablePrimitive.Separator, {
-		className: cn("relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90", className),
+		className: cn("relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:inset-s-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:inset-s-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90", className),
 		"data-slot": "resizable-separator",
 		...props,
 		children: withHandle ? /* @__PURE__ */ jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" }) : null

package/dist/components/select.mjs

@@ -112,7 +112,7 @@ function SelectItem({ children, className, ...props }) {
 		"data-slot": "select-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute end-2 flex size-4 items-center justify-center",
+			className: "pointer-events-none absolute inset-e-2 flex size-4 items-center justify-center",
 			children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" }) })
 		}), /* @__PURE__ */ jsx(Select$1.ItemText, { children })]
 	});

package/dist/components/sheet.mjs

@@ -42,7 +42,7 @@ function SheetContent({ children, className, showCloseButton = true, side = "rig
 			...props,
 			children: [children, showCloseButton ? /* @__PURE__ */ jsxs(Dialog.Close, {
 				className: buttonVariants({
-					className: "absolute top-4 end-4",
+					className: "absolute top-4 inset-e-4",
 					size: "icon-sm",
 					variant: "ghost"
 				}),

package/dist/components/sidebar.mjs

@@ -117,7 +117,7 @@ function Sidebar({ children, className, collapsible = "offcanvas", side = "left"
 			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-gentle group-data-[collapsible=offcanvas]:w-0 group-data-side-right:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),
 			"data-slot": "sidebar-gap"
 		}), /* @__PURE__ */ jsx("div", {
-			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-gentle md:flex data-side-right:right-0 data-side-right:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] data-side-left:left-0 data-side-left:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-side-right:border-l group-data-side-left:border-r", className),
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-gentle md:flex data-side-right:right-0 data-side-right:group-data-[collapsible=offcanvas]:-right-(--sidebar-width) data-side-left:left-0 data-side-left:group-data-[collapsible=offcanvas]:-left-(--sidebar-width)", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-side-right:border-l group-data-side-left:border-r", className),
 			"data-side": side,
 			"data-slot": "sidebar-container",
 			...props,
@@ -159,7 +159,7 @@ const SIDEBAR_RAIL_NAME = "SidebarRail";
 function SidebarRail({ className, ...props }) {
 	const { toggleSidebar } = useSidebar(SIDEBAR_RAIL_NAME);
 	return /* @__PURE__ */ jsx("button", {
-		className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-gentle group-data-[collapsible=offcanvas]:translate-x-0 group-data-side-right:left-0 group-data-side-left:-right-4 after:absolute after:inset-y-0 after:inset-s-1/2 after:w-0.5 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar hover:after:bg-sidebar-border in-data-side-right:cursor-e-resize in-data-side-left:cursor-w-resize sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2 rtl:group-data-[collapsible=offcanvas]:-translate-x-0 rtl:in-data-side-right:cursor-w-resize rtl:in-data-side-left:cursor-e-resize [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize", className),
+		className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-gentle group-data-[collapsible=offcanvas]:translate-x-0 group-data-side-right:left-0 group-data-side-left:-right-4 after:absolute after:inset-y-0 after:inset-s-1/2 after:w-0.5 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar hover:after:bg-sidebar-border in-data-side-right:cursor-e-resize in-data-side-left:cursor-w-resize sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2 rtl:group-data-[collapsible=offcanvas]:translate-x-0 rtl:in-data-side-right:cursor-w-resize rtl:in-data-side-left:cursor-e-resize [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize", className),
 		"data-sidebar": "rail",
 		"data-slot": "sidebar-rail",
 		title: "Toggle Sidebar",
@@ -260,7 +260,7 @@ function SidebarGroupLabel({ asChild = false, className, ...props }) {
 */
 function SidebarGroupAction({ asChild = false, className, ...props }) {
 	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
-		className: cn("absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className),
+		className: cn("absolute inset-e-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className),
 		"data-sidebar": "group-action",
 		"data-slot": "sidebar-group-action",
 		...props
@@ -335,7 +335,7 @@ function SidebarMenuButton({ asChild = false, className, isActive = false, size
 */
 function SidebarMenuAction({ asChild = false, className, showOnHover = false, ...props }) {
 	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
-		className: cn("absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className),
+		className: cn("absolute inset-e-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className),
 		"data-sidebar": "menu-action",
 		"data-slot": "sidebar-menu-action",
 		...props
@@ -346,7 +346,7 @@ function SidebarMenuAction({ asChild = false, className, showOnHover = false, ..
 */
 function SidebarMenuBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className),
+		className: cn("pointer-events-none absolute inset-e-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className),
 		"data-sidebar": "menu-badge",
 		"data-slot": "sidebar-menu-badge",
 		...props

package/dist/components/switch.mjs

@@ -12,7 +12,7 @@ function Switch({ className, size = "default", ...props }) {
 		"data-slot": "switch",
 		...props,
 		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
-			className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform duration-control-indicator ease-spring group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-3.5 group-data-[size=sm]/switch:data-checked:translate-x-2.5 rtl:group-data-[size=default]/switch:data-checked:-translate-x-3.5 rtl:group-data-[size=sm]/switch:data-checked:-translate-x-2.5 dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground",
+			className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform duration-control-indicator ease-spring group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-3.5 group-data-[size=sm]/switch:data-checked:translate-x-2.5 rtl:group-data-[size=default]/switch:data-checked:-translate-x-3.5 rtl:group-data-[size=sm]/switch:data-checked:-translate-x-2.5 dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground",
 			"data-slot": "switch-thumb"
 		})
 	});

package/dist/components/table.mjs

@@ -60,7 +60,7 @@ function TableRow({ className, ...props }) {
 */
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
-		className: cn("h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0", className),
+		className: cn("h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground has-[[role=checkbox]]:pe-0", className),
 		"data-slot": "table-head",
 		...props
 	});
@@ -70,7 +70,7 @@ function TableHead({ className, ...props }) {
 */
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
-		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0", className),
+		className: cn("p-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pe-0", className),
 		"data-slot": "table-cell",
 		...props
 	});

package/dist/components/tabs.mjs

@@ -34,7 +34,7 @@ function TabsList({ className, variant = "default", ...props }) {
 */
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Trigger, {
-		className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
+		className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-inset-e-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
 		"data-slot": "tabs-trigger",
 		...props
 	});

package/dist/variants/sheet.mjs

@@ -8,8 +8,8 @@ const sheetContentVariants = tv({
 	defaultVariants: { side: "right" },
 	variants: { side: {
 		bottom: "inset-x-0 bottom-0 h-auto border-t data-open:slide-in-from-bottom-10 data-closed:slide-out-to-bottom-10",
-		left: "inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm data-open:slide-in-from-left-10 data-closed:slide-out-to-left-10",
-		right: "inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm data-open:slide-in-from-right-10 data-closed:slide-out-to-right-10",
+		left: "inset-y-0 inset-s-0 h-full w-3/4 border-e sm:max-w-sm data-open:slide-in-from-left-10 data-closed:slide-out-to-left-10",
+		right: "inset-y-0 inset-e-0 h-full w-3/4 border-s sm:max-w-sm data-open:slide-in-from-right-10 data-closed:slide-out-to-right-10",
 		top: "inset-x-0 top-0 h-auto border-b data-open:slide-in-from-top-10 data-closed:slide-out-to-top-10"
 	} }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.4.0-canary.6",
+  "version": "0.5.0-canary.0",
   "description": "Core UI components library built with React and Tailwind CSS",
   "keywords": [
     "components",
@@ -526,36 +526,44 @@
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^1.18.0",
+    "lucide-react": "^1.21.0",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.6.0-rc.1781217402884",
-    "react-hook-form": "^7.79.0",
+    "radix-ui": "^1.6.0",
+    "react-hook-form": "^7.80.0",
     "react-resizable-panels": "^4.11.2",
-    "recharts": "^3.8.1",
+    "recharts": "^3.9.0",
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
-    "@codefast/tailwind-variants": "0.4.0-canary.6"
+    "@codefast/tailwind-variants": "0.5.0-canary.0"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-vitest": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@tailwindcss/postcss": "^4.3.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^25.9.3",
-    "@typescript/native-preview": "7.0.0-dev.20260615.1",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@types/node": "^26.0.1",
+    "@typescript/native-preview": "7.0.0-dev.20260624.1",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/browser": "^4.1.9",
+    "@vitest/browser-playwright": "^4.1.9",
     "@vitest/coverage-v8": "^4.1.9",
     "jest-axe": "^10.0.0",
     "jsdom": "^29.1.1",
+    "playwright": "^1.61.1",
     "postcss": "^8.5.15",
+    "storybook": "^10.4.6",
     "tailwindcss": "^4.3.1",
-    "tsdown": "^0.22.2",
+    "tsdown": "^0.22.3",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
-    "@codefast/typescript-config": "0.4.0-canary.6"
+    "@codefast/typescript-config": "0.5.0-canary.0"
   },
   "peerDependencies": {
     "@types/react": ">=19.0.0",
@@ -576,12 +584,15 @@
   },
   "scripts": {
     "build": "tsdown",
+    "build-storybook": "storybook build",
     "check-types": "tsgo --noEmit",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist storybook-static",
+    "storybook": "storybook dev -p 6006",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:e2e": "vitest run tests/e2e",
     "test:integration": "vitest run tests/integration",
+    "test:stories": "vitest run --project=storybook",
     "test:type": "vitest run tests/types",
     "test:unit": "vitest run tests/unit",
     "test:watch": "vitest"