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

package/dist/components/menubar.mjs

@@ -64,11 +64,11 @@ function MenubarTrigger({ className, ...props }) {
 */
 function MenubarSubTrigger({ children, className, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menubar$1.SubTrigger, {
-		className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_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-none select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4", className),
 		"data-inset": inset,
 		"data-slot": "menubar-sub-trigger",
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4 rtl:rotate-180" })]
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ms-auto size-4 rtl:rotate-180" })]
 	});
 }
 /**
@@ -105,7 +105,7 @@ function MenubarContent({ align = "start", alignOffset = -4, className, sideOffs
 */
 function MenubarItem({ className, inset, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Menubar$1.Item, {
-		className: cn("group/menubar-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/menubar-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": "menubar-item",
 		"data-variant": variant,
@@ -118,12 +118,12 @@ function MenubarItem({ className, inset, variant = "default", ...props }) {
 function MenubarCheckboxItem({ checked, children, className, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menubar$1.CheckboxItem, {
 		checked,
-		className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 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 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-8 pe-2 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 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
 		"data-inset": inset,
 		"data-slot": "menubar-checkbox-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			className: "pointer-events-none absolute start-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]
 	});
@@ -133,12 +133,12 @@ function MenubarCheckboxItem({ checked, children, className, inset, ...props })
 */
 function MenubarRadioItem({ children, className, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menubar$1.RadioItem, {
-		className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 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-md py-1.5 ps-8 pe-2 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": "menubar-radio-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute left-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			className: "pointer-events-none absolute start-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]
 	});
@@ -148,7 +148,7 @@ function MenubarRadioItem({ children, className, inset, ...props }) {
 */
 function MenubarLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(Menubar$1.Label, {
-		className: cn("px-2 py-1.5 text-sm font-medium 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": "menubar-label",
 		...props
@@ -169,7 +169,7 @@ function MenubarSeparator({ className, ...props }) {
 */
 function MenubarShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground", className),
+		className: cn("ms-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground", className),
 		"data-slot": "menubar-shortcut",
 		...props
 	});

package/dist/components/native-select.mjs

@@ -11,13 +11,13 @@ function NativeSelect({ className, size = "default", ...props }) {
 		"data-size": size,
 		"data-slot": "native-select-wrapper",
 		children: [/* @__PURE__ */ jsx("select", {
-			className: "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+			className: "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 ps-2.5 pe-8 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
 			"data-size": size,
 			"data-slot": "native-select",
 			...props
 		}), /* @__PURE__ */ jsx(ChevronDownIcon, {
 			"aria-hidden": "true",
-			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
+			className: "pointer-events-none absolute end-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

@@ -50,7 +50,7 @@ function NavigationMenuTrigger({ children, className, ...props }) {
 			" ",
 			/* @__PURE__ */ jsx(ChevronDownIcon, {
 				"aria-hidden": "true",
-				className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
+				className: "relative top-px ms-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
 			})
 		]
 	});
@@ -60,7 +60,7 @@ function NavigationMenuTrigger({ children, className, ...props }) {
 */
 function NavigationMenuContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
-		className: cn("top-0 left-0 w-full p-2 pr-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("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),
 		"data-slot": "navigation-menu-content",
 		...props
 	});
@@ -80,7 +80,7 @@ function NavigationMenuLink({ className, ...props }) {
 */
 function NavigationMenuViewport({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "absolute top-full left-0 isolate z-50 flex justify-center",
+		className: "absolute start-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",
@@ -96,7 +96,7 @@ function NavigationMenuIndicator({ className, ...props }) {
 		className: cn("top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-hidden:animate-out data-hidden:fade-out data-visible:animate-in data-visible:fade-in", className),
 		"data-slot": "navigation-menu-indicator",
 		...props,
-		children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+		children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm bg-border shadow-md" })
 	});
 }
 //#endregion

package/dist/components/pagination.mjs

@@ -56,7 +56,7 @@ function PaginationLink({ children, className, isActive, size = "icon", ...props
 function PaginationPrevious({ className, text = "Previous", ...props }) {
 	return /* @__PURE__ */ jsxs(PaginationLink, {
 		"aria-label": "Go to previous page",
-		className: cn("pl-2!", className),
+		className: cn("ps-2!", className),
 		"data-slot": "pagination-previous",
 		size: "default",
 		...props,
@@ -75,7 +75,7 @@ function PaginationPrevious({ className, text = "Previous", ...props }) {
 function PaginationNext({ className, text = "Next", ...props }) {
 	return /* @__PURE__ */ jsxs(PaginationLink, {
 		"aria-label": "Go to next page",
-		className: cn("pr-2!", className),
+		className: cn("pe-2!", className),
 		"data-slot": "pagination-next",
 		size: "default",
 		...props,

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 top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
+				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]
 	});

package/dist/components/radio-group.mjs

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function RadioGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1.Root, {
-		className: cn("grid w-full gap-3", className),
+		className: cn("flex flex-col gap-3", className),
 		"data-slot": "radio-group",
 		...props
 	});
@@ -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 top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
+			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" })
 		})
 	});
 }

package/dist/components/radio.mjs

@@ -7,7 +7,7 @@ import { composeEventHandlers } from "radix-ui/internal";
 */
 function Radio({ className, onChange, onValueChange, ...props }) {
 	return /* @__PURE__ */ jsx("input", {
-		className: cn("peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-full border border-input shadow-xs outline-none before:size-full before:rounded-full before:bg-background after:absolute after:-inset-x-3 after:-inset-y-2 checked:border-primary checked:bg-primary checked:before:size-2 checked:before:bg-primary-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:not-checked:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 checked:aria-invalid:bg-destructive dark:not-checked:before:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+		className: cn("peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-full border border-input bg-background shadow-xs outline-none before:size-2 before:scale-0 before:rounded-full before:bg-primary-foreground before:transition-transform before:duration-control-indicator before:ease-spring after:absolute after:-inset-x-3 after:-inset-y-2 checked:border-primary checked:bg-primary checked:before:scale-100 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:not-checked:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 checked:aria-invalid:bg-destructive dark:not-checked:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
 		"data-slot": "radio",
 		type: "radio",
 		onChange: composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value)),

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:left-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:left-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 [&[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: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),
 		"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

@@ -36,7 +36,7 @@ function SelectValue({ ...props }) {
 */
 function SelectTrigger({ children, className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
-		className: cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none 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 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none 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 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		"data-size": size,
 		"data-slot": "select-trigger",
 		...props,
@@ -76,7 +76,7 @@ function SelectContent({ align = "center", children, className, position = "item
 		"data-slot": "select-portal",
 		children: /* @__PURE__ */ jsxs(Select$1.Content, {
 			align,
-			className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 ease-snappy data-[align-trigger=true]:animate-none data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2", position === "popper" && "data-side-top:-translate-y-1 data-side-right:translate-x-1 data-side-bottom:translate-y-1 data-side-left:-translate-x-1", className),
+			className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 ease-snappy data-[align-trigger=true]:animate-none data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2", position === "popper" && "data-side-top:-translate-y-1 data-side-right:translate-x-1 rtl:data-side-right:-translate-x-1 data-side-bottom:translate-y-1 data-side-left:-translate-x-1 rtl:data-side-left:translate-x-1", className),
 			"data-align-trigger": position === "item-aligned",
 			"data-slot": "select-content",
 			position,
@@ -108,11 +108,11 @@ function SelectLabel({ className, ...props }) {
 */
 function SelectItem({ children, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
-		className: cn("relative flex w-full 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 not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		className: cn("relative flex w-full 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 not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
 		"data-slot": "select-item",
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
+			className: "pointer-events-none absolute end-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 right-4",
+					className: "absolute top-4 end-4",
 					size: "icon-sm",
 					variant: "ghost"
 				}),

package/dist/components/sidebar.mjs

@@ -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 [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-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",
@@ -173,7 +173,7 @@ function SidebarRail({ className, ...props }) {
 */
 function SidebarInset({ className, ...props }) {
 	return /* @__PURE__ */ jsx("main", {
-		className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-collapsed:ml-2", className),
+		className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-collapsed:ms-2", className),
 		"data-slot": "sidebar-inset",
 		...props
 	});
@@ -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 top-3.5 right-3 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 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),
 		"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 top-1.5 right-1 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 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),
 		"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 right-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 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),
 		"data-sidebar": "menu-badge",
 		"data-slot": "sidebar-menu-badge",
 		...props
@@ -377,7 +377,7 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
 */
 function SidebarMenuSub({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
-		className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
+		className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px", className),
 		"data-sidebar": "menu-sub",
 		"data-slot": "sidebar-menu-sub",
 		...props
@@ -399,7 +399,7 @@ function SidebarMenuSubItem({ className, ...props }) {
 */
 function SidebarMenuSubButton({ asChild = false, className, isActive = false, size = "md", ...props }) {
 	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "a", {
-		className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className),
+		className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs rtl:translate-x-px data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className),
 		"data-active": isActive,
 		"data-sidebar": "menu-sub-button",
 		"data-size": size,

package/dist/components/switch.mjs

@@ -7,12 +7,12 @@ import { jsx } from "react/jsx-runtime";
 */
 function Switch({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Switch$1.Root, {
-		className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all duration-control ease-snappy outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-4.5 data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
 		"data-size": size,
 		"data-slot": "switch",
 		...props,
 		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
-			className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] 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 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-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-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])]:pr-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]:pr-1.5 has-data-[icon=inline-start]:pl-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:-right-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:-end-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/components/toggle-group.mjs

@@ -41,7 +41,7 @@ function ToggleGroupItem({ __scopeToggleGroup, className, size = "default", vari
 	const context = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);
 	const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
 	return /* @__PURE__ */ jsx(ToggleGroup$1.Item, {
-		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t data-on:bg-muted", toggleVariants({
+		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pe-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:ps-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t data-on:bg-muted", toggleVariants({
 			className,
 			size: context.size ?? size,
 			variant: context.variant ?? variant

package/dist/components/tooltip.mjs

@@ -37,7 +37,7 @@ function TooltipContent({ children, className, sideOffset = 0, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
 		"data-slot": "tooltip-portal",
 		children: /* @__PURE__ */ jsxs(Tooltip$1.Content, {
-			className: cn("z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ease-snappy has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2 data-delayed-open:animate-in data-delayed-open:animation-duration-menu-in data-delayed-open:fade-in-0 data-delayed-open:zoom-in-95 data-delayed-open:data-side-top:slide-in-from-bottom-2 data-delayed-open:data-side-right:slide-in-from-left-2 data-delayed-open:data-side-bottom:slide-in-from-top-2 data-delayed-open:data-side-left:slide-in-from-right-2", className),
+			className: cn("z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ease-snappy has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2 data-delayed-open:animate-in data-delayed-open:animation-duration-menu-in data-delayed-open:fade-in-0 data-delayed-open:zoom-in-95 data-delayed-open:data-side-top:slide-in-from-bottom-2 data-delayed-open:data-side-right:slide-in-from-left-2 data-delayed-open:data-side-bottom:slide-in-from-top-2 data-delayed-open:data-side-left:slide-in-from-right-2", className),
 			"data-slot": "tooltip-content",
 			sideOffset,
 			...props,

package/dist/variants/alert.mjs

@@ -4,7 +4,7 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const alertVariants = tv({
-	base: "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+	base: "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
 	defaultVariants: { variant: "default" },
 	variants: { variant: {
 		default: "bg-card text-card-foreground",

package/dist/variants/badge.mjs

@@ -4,7 +4,7 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const badgeVariants = tv({
-	base: "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+	base: "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
 	defaultVariants: { variant: "default" },
 	variants: { variant: {
 		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",

package/dist/variants/button-group.mjs

@@ -4,10 +4,10 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const buttonGroupVariants = tv({
-	base: "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+	base: "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
 	defaultVariants: { orientation: "horizontal" },
 	variants: { orientation: {
-		horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!",
+		horizontal: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-md!",
 		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!"
 	} }
 });

package/dist/variants/button.mjs

@@ -11,10 +11,10 @@ const buttonVariants = tv({
 	},
 	variants: {
 		size: {
-			default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-			xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-			sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
-			lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5",
+			lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
 			icon: "size-9",
 			"icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
 			"icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",

package/dist/variants/input-group.mjs

@@ -3,7 +3,7 @@ import { tv } from "../lib/utils.mjs";
 /**
 * @since 0.3.16-canary.0
 */
-const inputGroupVariants = tv({ base: "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5" });
+const inputGroupVariants = tv({ base: "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5" });
 /**
 * @since 0.3.16-canary.0
 */
@@ -13,8 +13,8 @@ const inputGroupAddonVariants = tv({
 	variants: { align: {
 		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
 		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-		"inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
-		"inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]"
+		"inline-end": "order-last pe-2 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem]",
+		"inline-start": "order-first ps-2 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem]"
 	} }
 });
 /**

package/dist/variants/input-number.mjs

@@ -9,11 +9,11 @@ const inputNumberVariants = tv({
 		/**
 		* Split layout: trailing increment button (always on the inline end).
 		*/
-		incrementButton: "order-last h-full w-9 shrink-0 rounded-none rounded-r-[calc(var(--radius-md)-1px)] border-l border-l-input text-muted-foreground group-focus-within/input-number:border-l-ring group-has-aria-invalid/input-number:border-l-destructive focus-visible:bg-ring/50 focus-visible:ring-0 group-has-aria-invalid/input-number:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:focus-visible:bg-destructive/40",
+		incrementButton: "order-last h-full w-9 shrink-0 rounded-none rounded-e-[calc(var(--radius-md)-1px)] border-s border-s-input text-muted-foreground group-focus-within/input-number:border-s-ring group-has-aria-invalid/input-number:border-s-destructive focus-visible:bg-ring/50 focus-visible:ring-0 group-has-aria-invalid/input-number:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:focus-visible:bg-destructive/40",
 		/**
 		* Split layout: leading decrement button (always on the inline start).
 		*/
-		decrementButton: "order-first h-full w-9 shrink-0 rounded-none rounded-l-[calc(var(--radius-md)-1px)] border-r border-r-input text-muted-foreground group-focus-within/input-number:border-r-ring group-has-aria-invalid/input-number:border-r-destructive focus-visible:bg-ring/50 focus-visible:ring-0 group-has-aria-invalid/input-number:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:focus-visible:bg-destructive/40",
+		decrementButton: "order-first h-full w-9 shrink-0 rounded-none rounded-s-[calc(var(--radius-md)-1px)] border-e border-e-input text-muted-foreground group-focus-within/input-number:border-e-ring group-has-aria-invalid/input-number:border-e-destructive focus-visible:bg-ring/50 focus-visible:ring-0 group-has-aria-invalid/input-number:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:focus-visible:bg-destructive/40",
 		/**
 		* Editable numeric input.
 		*/
@@ -25,7 +25,7 @@ const inputNumberVariants = tv({
 		/**
 		* Stepper layout: stacked chevron column on the trailing edge.
 		*/
-		stepper: "order-last grid h-full w-8 shrink-0 divide-y divide-input border-l border-l-input transition-colors group-focus-within/input-number:divide-ring group-focus-within/input-number:border-l-ring group-has-aria-invalid/input-number:divide-destructive group-has-aria-invalid/input-number:border-l-destructive motion-reduce:transition-none *:[button]:focus-visible:bg-ring/50 *:[button]:focus-visible:ring-0 group-has-aria-invalid/input-number:*:[button]:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:*:[button]:focus-visible:bg-destructive/40",
+		stepper: "order-last grid h-full w-8 shrink-0 divide-y divide-input border-s border-s-input transition-colors group-focus-within/input-number:divide-ring group-focus-within/input-number:border-s-ring group-has-aria-invalid/input-number:divide-destructive group-has-aria-invalid/input-number:border-s-destructive motion-reduce:transition-none *:[button]:focus-visible:bg-ring/50 *:[button]:focus-visible:ring-0 group-has-aria-invalid/input-number:*:[button]:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:*:[button]:focus-visible:bg-destructive/40",
 		/**
 		* Stepper layout: individual chevron button (shared by increment/decrement).
 		*/

package/dist/variants/scroll-area.mjs

@@ -4,7 +4,7 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const scrollAreaScrollbarVariants = tv({
-	base: "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+	base: "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-s data-vertical:border-s-transparent",
 	compoundVariants: [
 		{
 			className: "w-1.5",

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 left-0 h-full w-3/4 border-r sm:max-w-sm data-open:slide-in-from-left-10 data-closed:slide-out-to-left-10",
-		right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm data-open:slide-in-from-right-10 data-closed:slide-out-to-right-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",
 		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/dist/variants/sidebar.mjs

@@ -4,7 +4,7 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const sidebarMenuButtonVariants = tv({
-	base: "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+	base: "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
 	defaultVariants: {
 		size: "default",
 		variant: "default"

package/dist/variants/toggle.mjs

@@ -11,9 +11,9 @@ const toggleVariants = tv({
 	},
 	variants: {
 		size: {
-			default: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-			sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
-			lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
+			default: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+			sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5",
+			lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2"
 		},
 		variant: {
 			default: "bg-transparent",