@codefast/ui 0.4.0-canary.4 → 0.4.0-canary.5

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @codefast/ui
 
+## 0.4.0-canary.5
+
+### Minor Changes
+
+- [#503](https://github.com/codefastlabs/codefast/pull/503) [`4738966`](https://github.com/codefastlabs/codefast/commit/473896609b6e4c4713fb8b391e7e6088b31f1cab) 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
+
+### Patch Changes
+
+- [#502](https://github.com/codefastlabs/codefast/pull/502) [`5a61b82`](https://github.com/codefastlabs/codefast/commit/5a61b827ba2a99920dcbf10d2589dfa59c3aa682) 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.
+
+- [#502](https://github.com/codefastlabs/codefast/pull/502) [`4da0e77`](https://github.com/codefastlabs/codefast/commit/4da0e77e7a7a3fe83709cba44ac8c2013f57755b) 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.
+
+- [#502](https://github.com/codefastlabs/codefast/pull/502) [`930a916`](https://github.com/codefastlabs/codefast/commit/930a91678b6d370a273dc21b88a3e4fe06710b63) 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.
+
+- [#501](https://github.com/codefastlabs/codefast/pull/501) [`5469e9d`](https://github.com/codefastlabs/codefast/commit/5469e9d9c8c998258f5b008655943a6404b48edf) Thanks [@thevuong](https://github.com/thevuong)! - Migrate physical CSS direction utilities to their logical (start/end) equivalents so components mirror correctly under RTL.
+
+- [#502](https://github.com/codefastlabs/codefast/pull/502) [`9813afd`](https://github.com/codefastlabs/codefast/commit/9813afdbe4f5049e720820a048c304a5165c5b0c) 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.
+
+- [#501](https://github.com/codefastlabs/codefast/pull/501) [`f84c59f`](https://github.com/codefastlabs/codefast/commit/f84c59f176033344002abc473747314d8800233d) 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.
+
+- [#502](https://github.com/codefastlabs/codefast/pull/502) [`3647cb2`](https://github.com/codefastlabs/codefast/commit/3647cb28a72616a26f9b0e943217790b2735a7fd) 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).
+
+- [#497](https://github.com/codefastlabs/codefast/pull/497) [`a9ead5c`](https://github.com/codefastlabs/codefast/commit/a9ead5c97d442093dbd0fab2a846325e6310160f) 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.
+
+- Updated dependencies []:
+  - @codefast/tailwind-variants@0.4.0-canary.5
+
 ## 0.4.0-canary.4
 
 ### Minor Changes

package/dist/components/accordion.mjs

@@ -30,7 +30,7 @@ function AccordionTrigger({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Header, {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
-			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
+			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
 			"data-slot": "accordion-trigger",
 			...props,
 			children: [

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 top-1/2 left-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 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 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),
 			"data-size": size,
 			"data-slot": "alert-dialog-content",
 			...props
@@ -43,7 +43,7 @@ function AlertDialogContent({ className, size = "default", ...props }) {
 */
 function AlertDialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("grid shrink-0 grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+		className: cn("grid shrink-0 grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
 		"data-slot": "alert-dialog-header",
 		...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 top-2.5 right-3", className),
+		className: cn("absolute end-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 right-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 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),
 		"data-slot": "avatar-badge",
 		...props
 	});

package/dist/components/calendar.mjs

@@ -25,17 +25,17 @@ function Calendar({ buttonVariant = "ghost", captionLayout = "label", className,
 			dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
 			dropdown_root: cn("relative rounded-(--cell-radius) border border-input shadow-xs has-focus:border-ring has-focus:ring-3 has-focus:ring-ring/50", defaultClassNames.dropdown_root),
 			dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
-			caption_label: cn("font-medium select-none", captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-(--cell-radius) pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+			caption_label: cn("font-medium select-none", captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-(--cell-radius) ps-2 pe-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
 			month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
 			weekdays: cn("flex", defaultClassNames.weekdays),
 			weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
 			week: cn("mt-2 flex w-full", defaultClassNames.week),
 			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-r-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
-			range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
+			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_middle: cn("rounded-none", defaultClassNames.range_middle),
-			range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-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:start-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),
@@ -102,7 +102,7 @@ function CalendarDayButton({ className, day, locale, modifiers, ...props }) {
 	}, [modifiers.focused]);
 	return /* @__PURE__ */ jsx(Button, {
 		ref,
-		className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-focused/day:relative group-data-focused/day:z-10 group-data-focused/day:border-ring group-data-focused/day:ring-3 group-data-focused/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-focused/day:relative group-data-focused/day:z-10 group-data-focused/day:border-ring group-data-focused/day:ring-3 group-data-focused/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
 		"data-day": day.date.toLocaleDateString(locale?.code),
 		"data-range-end": modifiers.range_end,
 		"data-range-middle": modifiers.range_middle,

package/dist/components/carousel.mjs

@@ -98,7 +98,7 @@ function CarouselContent({ __scopeCarousel, className, classNames, ...props }) {
 		className: cn("overflow-hidden", classNames?.wrapper),
 		"data-slot": "carousel-content",
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 h-full flex-col", classNames?.content, className),
+			className: cn("flex", orientation === "horizontal" ? "-ms-4" : "-mt-4 h-full flex-col", classNames?.content, className),
 			...props
 		})
 	});
@@ -111,7 +111,7 @@ function CarouselItem({ __scopeCarousel, className, ...props }) {
 	const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
 	return /* @__PURE__ */ jsx("div", {
 		"aria-roledescription": "slide",
-		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "ps-4" : "pt-4", className),
 		"data-slot": "carousel-item",
 		role: "group",
 		...props
@@ -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" ? "top-1/2 -left-12 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		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),
 		"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" ? "top-1/2 -right-12 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		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),
 		"data-slot": "carousel-next",
 		disabled: !canScrollNext,
 		size,

package/dist/components/checkbox-cards.mjs

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.mjs";
 import { Label } from "./label.mjs";
 import { CheckboxGroup, CheckboxGroupIndicator, CheckboxGroupItem } from "../primitives/checkbox-group.mjs";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox-cards.tsx
 /**
@@ -18,16 +18,16 @@ function CheckboxCards(props) {
 */
 function CheckboxCardsItem({ checkboxClassName, children, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Label, {
-		className: cn("flex items-start gap-3 rounded-md border border-input p-3 transition has-focus-visible:border-ring has-disabled:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5", className),
+		className: cn("flex items-start gap-3 rounded-md border border-input p-3 transition has-focus-visible:border-ring has-disabled:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-data-indeterminate:border-primary/30 has-data-indeterminate:bg-primary/5", className),
 		"data-slot": "checkbox-card",
 		children: [/* @__PURE__ */ jsx(CheckboxGroupItem, {
-			className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", checkboxClassName),
+			className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow duration-control ease-snappy outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary", checkboxClassName),
 			"data-slot": "checkbox-card-item",
 			...props,
-			children: /* @__PURE__ */ jsx(CheckboxGroupIndicator, {
-				className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: /* @__PURE__ */ jsxs(CheckboxGroupIndicator, {
+				className: "group/checkbox-card-indicator grid animate-in place-content-center text-current duration-control-indicator ease-spring zoom-in-50 [&>svg]:size-3.5",
 				"data-slot": "checkbox-card-indicator",
-				children: /* @__PURE__ */ jsx(CheckIcon, {})
+				children: [/* @__PURE__ */ jsx(CheckIcon, { className: "group-data-indeterminate/checkbox-card-indicator:hidden" }), /* @__PURE__ */ jsx(MinusIcon, { className: "hidden group-data-indeterminate/checkbox-card-indicator:block" })]
 			})
 		}), children]
 	});

package/dist/components/checkbox-group.mjs

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.mjs";
 import { CheckboxGroup as CheckboxGroup$1, CheckboxGroupIndicator, CheckboxGroupItem as CheckboxGroupItem$1 } from "../primitives/checkbox-group.mjs";
-import { CheckIcon } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox-group.tsx
 /**
 * @since 0.3.16-canary.0
@@ -18,13 +18,13 @@ function CheckboxGroup({ className, ...props }) {
 */
 function CheckboxGroupItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxGroupItem$1, {
-		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow duration-control ease-snappy outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary", className),
 		"data-slot": "checkbox-group-item",
 		...props,
-		children: /* @__PURE__ */ jsx(CheckboxGroupIndicator, {
-			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+		children: /* @__PURE__ */ jsxs(CheckboxGroupIndicator, {
+			className: "group/checkbox-group-indicator grid animate-in place-content-center text-current duration-control-indicator ease-spring zoom-in-50 [&>svg]:size-3.5",
 			"data-slot": "checkbox-group-indicator",
-			children: /* @__PURE__ */ jsx(CheckIcon, {})
+			children: [/* @__PURE__ */ jsx(CheckIcon, { className: "group-data-indeterminate/checkbox-group-indicator:hidden" }), /* @__PURE__ */ jsx(MinusIcon, { className: "hidden group-data-indeterminate/checkbox-group-indicator:block" })]
 		})
 	});
 }

package/dist/components/checkbox.mjs

@@ -1,20 +1,20 @@
 import { cn } from "../lib/utils.mjs";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import { Checkbox as Checkbox$1 } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox.tsx
 /**
 * @since 0.3.16-canary.0
 */
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
-		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow duration-control ease-snappy outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary", className),
 		"data-slot": "checkbox",
 		...props,
-		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
-			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
+			className: "group/checkbox-indicator grid animate-in place-content-center text-current duration-control-indicator ease-spring zoom-in-50 [&>svg]:size-3.5",
 			"data-slot": "checkbox-indicator",
-			children: /* @__PURE__ */ jsx(CheckIcon, {})
+			children: [/* @__PURE__ */ jsx(CheckIcon, { className: "group-data-indeterminate/checkbox-indicator:hidden" }), /* @__PURE__ */ jsx(MinusIcon, { className: "hidden group-data-indeterminate/checkbox-indicator:block" })]
 		})
 	});
 }

package/dist/components/command.mjs

@@ -41,7 +41,7 @@ function CommandInput({ className, ...props }) {
 		className: "p-1 pb-0",
 		"data-slot": "command-input-wrapper",
 		children: /* @__PURE__ */ jsxs(InputGroup, {
-			className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!",
+			className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:ps-2!",
 			children: [/* @__PURE__ */ jsx(Command$1.Input, {
 				className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
 				"data-slot": "command-input",
@@ -98,7 +98,7 @@ function CommandItem({ children, className, ...props }) {
 		className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground", className),
 		"data-slot": "command-item",
 		...props,
-		children: [children, /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-checked/command-item:opacity-100" })]
+		children: [children, /* @__PURE__ */ jsx(CheckIcon, { className: "ms-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-checked/command-item:opacity-100" })]
 	});
 }
 /**
@@ -116,7 +116,7 @@ function CommandLoading({ className, ...props }) {
 */
 function CommandShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className),
+		className: cn("ms-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className),
 		"data-slot": "command-shortcut",
 		...props
 	});

package/dist/components/context-menu.mjs

@@ -54,11 +54,11 @@ function ContextMenuRadioGroup({ ...props }) {
 */
 function ContextMenuSubTrigger({ children, className, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.SubTrigger, {
-		className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		"data-inset": inset,
 		"data-slot": "context-menu-sub-trigger",
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto rtl:rotate-180" })]
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ms-auto rtl:rotate-180" })]
 	});
 }
 /**
@@ -89,7 +89,7 @@ function ContextMenuContent({ className, ...props }) {
 */
 function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
-		className: cn("group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
+		className: cn("group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
 		"data-inset": inset,
 		"data-slot": "context-menu-item",
 		"data-variant": variant,
@@ -102,12 +102,12 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 function ContextMenuCheckboxItem({ checked, children, className, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
 		checked,
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		"data-inset": inset,
 		"data-slot": "context-menu-checkbox-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute right-2",
+			className: "pointer-events-none absolute end-2",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
@@ -117,12 +117,12 @@ function ContextMenuCheckboxItem({ checked, children, className, inset, ...props
 */
 function ContextMenuRadioItem({ children, className, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		"data-inset": inset,
 		"data-slot": "context-menu-radio-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute right-2",
+			className: "pointer-events-none absolute end-2",
 			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
@@ -132,7 +132,7 @@ function ContextMenuRadioItem({ children, className, inset, ...props }) {
 */
 function ContextMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Label, {
-		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className),
+		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:ps-8", className),
 		"data-inset": inset,
 		"data-slot": "context-menu-label",
 		...props
@@ -153,7 +153,7 @@ function ContextMenuSeparator({ className, ...props }) {
 */
 function ContextMenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className),
+		className: cn("ms-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className),
 		"data-slot": "context-menu-shortcut",
 		...props
 	});

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 top-1/2 left-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 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 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),
 			"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 top-4 right-4",
+					className: "absolute end-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]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l 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]: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),
 			"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]
@@ -44,7 +44,7 @@ function DrawerContent({ children, className, ...props }) {
 */
 function DrawerHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", className),
+		className: cn("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-start", className),
 		"data-slot": "drawer-header",
 		...props
 	});

package/dist/components/dropdown-menu.mjs

@@ -53,11 +53,11 @@ function DropdownMenuRadioGroup({ ...props }) {
 */
 function DropdownMenuSubTrigger({ children, className, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu$1.SubTrigger, {
-		className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		"data-inset": inset,
 		"data-slot": "dropdown-menu-sub-trigger",
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto rtl:rotate-180" })]
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ms-auto rtl:rotate-180" })]
 	});
 }
 /**
@@ -93,7 +93,7 @@ function DropdownMenuContent({ align = "start", className, sideOffset = 4, ...pr
 */
 function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenu$1.Item, {
-		className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
+		className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
 		"data-inset": inset,
 		"data-slot": "dropdown-menu-item",
 		"data-variant": variant,
@@ -106,12 +106,12 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 function DropdownMenuCheckboxItem({ checked, children, className, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu$1.CheckboxItem, {
 		checked,
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		"data-inset": inset,
 		"data-slot": "dropdown-menu-checkbox-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			className: "pointer-events-none absolute end-2 flex items-center justify-center",
 			"data-slot": "dropdown-menu-checkbox-item-indicator",
 			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
@@ -122,12 +122,12 @@ function DropdownMenuCheckboxItem({ checked, children, className, inset, ...prop
 */
 function DropdownMenuRadioItem({ children, className, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu$1.RadioItem, {
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		"data-inset": inset,
 		"data-slot": "dropdown-menu-radio-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			className: "pointer-events-none absolute end-2 flex items-center justify-center",
 			"data-slot": "dropdown-menu-radio-item-indicator",
 			children: /* @__PURE__ */ jsx(DropdownMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
@@ -138,7 +138,7 @@ function DropdownMenuRadioItem({ children, className, inset, ...props }) {
 */
 function DropdownMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenu$1.Label, {
-		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className),
+		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:ps-8", className),
 		"data-inset": inset,
 		"data-slot": "dropdown-menu-label",
 		...props
@@ -159,7 +159,7 @@ function DropdownMenuSeparator({ className, ...props }) {
 */
 function DropdownMenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
+		className: cn("ms-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
 		"data-slot": "dropdown-menu-shortcut",
 		...props
 	});

package/dist/components/field.mjs

@@ -86,7 +86,7 @@ function FieldTitle({ className, ...props }) {
 */
 function FieldDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
-		className: cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		className: cn("text-start text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
 		"data-slot": "field-description",
 		...props
 	});
@@ -117,7 +117,7 @@ function FieldError({ children, className, errors, ...props }) {
 		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
 		if (uniqueErrors.length === 1) return uniqueErrors[0]?.message ?? null;
 		return /* @__PURE__ */ jsx("ul", {
-			className: "ml-4 flex list-disc flex-col gap-1",
+			className: "ms-4 flex list-disc flex-col gap-1",
 			children: uniqueErrors.map((error) => error?.message ? /* @__PURE__ */ jsx("li", { children: error.message }, error.message) : null)
 		});
 	}, [errors]);

package/dist/components/input-otp.mjs

@@ -36,7 +36,7 @@ function InputOTPSlot({ className, index, ...props }) {
 	if (slot === void 0) throw new Error(`InputOTPSlot: no slot at index ${index}`);
 	const { char, hasFakeCaret, isActive } = slot;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className),
+		className: cn("relative flex size-9 items-center justify-center border-y border-e border-input text-sm shadow-xs transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className),
 		"data-active": isActive,
 		"data-slot": "input-otp-slot",
 		...props,

package/dist/components/item.mjs

@@ -81,7 +81,7 @@ function ItemTitle({ className, ...props }) {
 */
 function ItemDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
-		className: cn("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		className: cn("line-clamp-2 text-start text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
 		"data-slot": "item-description",
 		...props
 	});