@moduix/react-tailwind 1.1.0 → 2.0.0

package/dist/components/sidebar/Sidebar.js

@@ -66,7 +66,7 @@ const Sidebar_SidebarRoot = /*#__PURE__*/ forwardRef(function({ className, defau
             orientation: "horizontal",
             "data-side": side,
             "data-slot": "sidebar-root",
-            className: cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize data-dragging:data-[orientation=vertical]:cursor-row-resize', 'isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', className),
+            className: cn('group/splitter relative box-border h-112 min-h-0 w-full min-w-0 rounded-md border border-border bg-card text-foreground shadow-sm data-dragging:cursor-col-resize', 'isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', className),
             style: {
                 width: void 0,
                 height: void 0,
@@ -97,7 +97,7 @@ const Sidebar_SidebarPanel = /*#__PURE__*/ forwardRef(function({ className, ...p
         "data-side": config.side,
         "data-slot": "sidebar-panel",
         "data-state": collapsed ? 'collapsed' : 'expanded',
-        className: cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', 'group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', className)
+        className: cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none data-dragging:select-none', 'group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', className)
     });
 });
 const Sidebar_SidebarInset = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -108,7 +108,7 @@ const Sidebar_SidebarInset = /*#__PURE__*/ forwardRef(function({ className, ...p
         id: "content",
         "data-side": side,
         "data-slot": "sidebar-inset",
-        className: cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none group-data-[orientation=vertical]/splitter:min-h-0 data-dragging:select-none', 'relative min-w-0 overflow-auto bg-background p-0 text-foreground', className)
+        className: cn('box-border min-h-50 min-w-0 overflow-auto rounded-none border-0 border-border bg-card p-4 text-card-foreground shadow-none data-dragging:select-none', 'relative min-w-0 overflow-auto bg-background p-0 text-foreground', className)
     });
 });
 const Sidebar_SidebarResizeTrigger = /*#__PURE__*/ forwardRef(function({ asChild, children, className, 'aria-label': ariaLabel = 'Resize sidebar', ...props }, ref) {
@@ -122,7 +122,7 @@ const Sidebar_SidebarResizeTrigger = /*#__PURE__*/ forwardRef(function({ asChild
         "aria-label": ariaLabel,
         "data-side": side,
         "data-slot": "sidebar-resize-trigger",
-        className: cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", 'z-2', className),
+        className: cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", 'z-2', className),
         children: void 0 !== children || asChild ? children : /*#__PURE__*/ jsx(index_js_Splitter.ResizeTriggerIndicator, {})
     });
 });
@@ -140,13 +140,13 @@ const Sidebar_SidebarTrigger = /*#__PURE__*/ forwardRef(function({ className, ch
         type: type,
         "aria-label": ariaLabel,
         "aria-expanded": !collapsed,
+        className: cn('relative z-4 -mx-3.5 inline-flex size-7 flex-none translate-y-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground shadow-sm outline-0 transition-[background-color,color,box-shadow] duration-200 ease-in-out', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none', '[&>svg]:size-4 [&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out data-[side=left]:data-[state=collapsed]:[&>svg]:rotate-180 data-[side=right]:data-[state=expanded]:[&>svg]:rotate-180', 'hover:bg-accent hover:text-accent-foreground', className),
+        onClick: handleClick,
+        ...props,
         "data-scope": "sidebar",
         "data-part": "trigger",
         "data-side": config.side,
         "data-state": collapsed ? 'collapsed' : 'expanded',
-        className: cn('relative z-4 -mx-3.5 inline-flex size-7 flex-none translate-y-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground shadow-sm outline-0 transition-[background-color,color,box-shadow] duration-200 ease-in-out', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none', '[&>svg]:size-4 [&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out data-[side=left]:data-[state=collapsed]:[&>svg]:rotate-180 data-[side=right]:data-[state=expanded]:[&>svg]:rotate-180', 'hover:bg-accent hover:text-accent-foreground', className),
-        onClick: handleClick,
-        ...props,
         "data-slot": "sidebar-trigger",
         children: children ?? /*#__PURE__*/ jsx(ChevronLeftIcon, {})
     });
@@ -154,30 +154,30 @@ const Sidebar_SidebarTrigger = /*#__PURE__*/ forwardRef(function({ className, ch
 const Sidebar_SidebarLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "label",
         className: cn('min-w-0 truncate group-data-[state=collapsed]/sidebar-panel:sr-only', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "label",
         "data-slot": "sidebar-label"
     });
 });
 const Sidebar_SidebarHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.header, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "header",
         className: cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1 [&>*:only-child]:w-full group-data-[state=collapsed]/sidebar-panel:[&>*:only-child]:w-auto', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "header",
         "data-slot": "sidebar-header"
     });
 });
 const Sidebar_SidebarContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "content",
         className: cn('flex min-h-0 flex-auto [scrollbar-gutter:stable] flex-col overflow-auto overscroll-contain group-data-[state=collapsed]/sidebar-panel:[scrollbar-width:none] group-data-[state=collapsed]/sidebar-panel:[scrollbar-gutter:auto] group-data-[state=collapsed]/sidebar-panel:overflow-x-hidden group-data-[state=collapsed]/sidebar-panel:overflow-y-auto', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "content",
         "data-slot": "sidebar-content"
     });
 });
@@ -185,10 +185,10 @@ const Sidebar_SidebarExpandedContent = /*#__PURE__*/ forwardRef(function({ class
     const { collapsed } = useSidebar();
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "expanded-content",
         className: className,
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "expanded-content",
         "data-slot": "sidebar-expanded-content",
         hidden: collapsed
     });
@@ -197,10 +197,10 @@ const Sidebar_SidebarCollapsedContent = /*#__PURE__*/ forwardRef(function({ clas
     const { collapsed } = useSidebar();
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "collapsed-content",
         className: className,
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "collapsed-content",
         "data-slot": "sidebar-collapsed-content",
         hidden: !collapsed
     });
@@ -208,40 +208,40 @@ const Sidebar_SidebarCollapsedContent = /*#__PURE__*/ forwardRef(function({ clas
 const Sidebar_SidebarFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.footer, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "footer",
         className: cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "footer",
         "data-slot": "sidebar-footer"
     });
 });
 const Sidebar_SidebarGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.section, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "group",
         className: cn('flex flex-col gap-1 p-3 group-data-[state=collapsed]/sidebar-panel:px-1', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "group",
         "data-slot": "sidebar-group"
     });
 });
 const Sidebar_SidebarGroupHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "group-header",
         className: cn('flex min-w-0 items-center gap-2', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "group-header",
         "data-slot": "sidebar-group-header"
     });
 });
 const Sidebar_SidebarGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.h3, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "group-label",
         className: cn('min-w-0 flex-1 truncate px-2 text-xs leading-4 font-medium text-muted-foreground group-data-[state=collapsed]/sidebar-panel:sr-only', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "group-label",
         "data-slot": "sidebar-group-label"
     });
 });
@@ -249,30 +249,30 @@ const Sidebar_SidebarGroupAction = /*#__PURE__*/ forwardRef(function({ className
     return /*#__PURE__*/ jsx(ark.button, {
         ref: ref,
         type: type,
-        "data-scope": "sidebar",
-        "data-part": "group-action",
         className: cn('focus-visible:outline-offset-0.5 me-2 inline-flex size-control-xs flex-none cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground outline-0 transition-colors duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring motion-reduce:transition-none @max-[7rem]:hidden [&>svg]:size-4', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "group-action",
         "data-slot": "sidebar-group-action"
     });
 });
 const Sidebar_SidebarNavigationList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.ul, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "navigation-list",
         className: cn('flex w-full min-w-0 flex-col gap-1', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "navigation-list",
         "data-slot": "sidebar-navigation-list"
     });
 });
 const Sidebar_SidebarNavigationItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.li, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "navigation-item",
         className: cn('relative min-w-0', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "navigation-item",
         "data-slot": "sidebar-navigation-item"
     });
 });
@@ -281,42 +281,42 @@ const Sidebar_SidebarNavigationButton = /*#__PURE__*/ forwardRef(function({ acti
         ref: ref,
         type: type,
         "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
+        className: cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === size && 'min-h-control-sm text-xs', 'md' === size && 'min-h-control-md', 'lg' === size && 'min-h-control-lg', className),
+        ...props,
         "data-scope": "sidebar",
         "data-part": "navigation-button",
         "data-active": active ? '' : void 0,
         "data-size": size,
-        className: cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === size && 'min-h-control-sm text-xs', 'md' === size && 'min-h-control-md', 'lg' === size && 'min-h-control-lg', className),
-        ...props,
         "data-slot": "sidebar-navigation-button"
     });
 });
 const Sidebar_SidebarNavigationBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "navigation-badge",
         className: cn('pointer-events-none absolute end-2.5 top-1/2 z-1 box-border inline-grid size-5 -translate-y-1/2 place-items-center rounded-full bg-primary p-0 text-[0.5625rem] leading-none font-medium text-primary-foreground tabular-nums @max-[7rem]:hidden', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "navigation-badge",
         "data-slot": "sidebar-navigation-badge"
     });
 });
 const Sidebar_SidebarNavigationSubList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.ul, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "navigation-sub-list",
         className: cn('ms-4 mt-1 flex w-auto min-w-0 flex-col gap-1 border-s border-border ps-2 group-data-[state=collapsed]/sidebar-panel:hidden', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-list",
         "data-slot": "sidebar-navigation-sub-list"
     });
 });
 const Sidebar_SidebarNavigationSubItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.li, {
         ref: ref,
-        "data-scope": "sidebar",
-        "data-part": "navigation-sub-item",
         className: cn('relative min-w-0', className),
         ...props,
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-item",
         "data-slot": "sidebar-navigation-sub-item"
     });
 });
@@ -324,11 +324,11 @@ const Sidebar_SidebarNavigationSubButton = /*#__PURE__*/ forwardRef(function({ a
     return /*#__PURE__*/ jsx(ark.a, {
         ref: ref,
         "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
+        className: cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', className),
+        ...props,
         "data-scope": "sidebar",
         "data-part": "navigation-sub-button",
         "data-active": active ? '' : void 0,
-        className: cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', className),
-        ...props,
         "data-slot": "sidebar-navigation-sub-button",
         children: 'string' == typeof children ? /*#__PURE__*/ jsx("span", {
             "data-slot": "sidebar-navigation-sub-label",
@@ -365,16 +365,14 @@ const Sidebar_SidebarInput = /*#__PURE__*/ forwardRef(function({ className, ...p
     return /*#__PURE__*/ jsx(Input.Root, {
         ref: ref,
         className: cn('w-full group-data-[state=collapsed]/sidebar-panel:hidden', className),
-        ...props,
-        "data-slot": "sidebar-input"
+        ...props
     });
 });
 const Sidebar_SidebarSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Separator.Root, {
         ref: ref,
         className: cn('border-border', className),
-        ...props,
-        "data-slot": "sidebar-separator"
+        ...props
     });
 });
 const Sidebar = Object.assign(Sidebar_SidebarRoot, {

package/dist/components/signature-pad/SignaturePad.d.ts

@@ -7,7 +7,7 @@ declare const SignaturePad: import("react").ForwardRefExoticComponent<Omit<Signa
     HiddenInput: import("react").ForwardRefExoticComponent<SignaturePadPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Canvas: import("react").ForwardRefExoticComponent<Omit<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Canvas: import("react").ForwardRefExoticComponent<Omit<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "asChild" | "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Segment: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.SegmentProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     Guide: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.GuideProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ClearTrigger: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/signature-pad/SignaturePad.js

@@ -84,7 +84,7 @@ const SignaturePad_SignaturePadClearTrigger = /*#__PURE__*/ forwardRef(function(
         children: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
             "aria-label": ariaLabel,
             "aria-labelledby": ariaLabelledBy,
-            className: cn('size-7 rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground', className),
+            className: cn('size-control-md rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground', className),
             children: children ?? /*#__PURE__*/ jsx(RotateCcwIcon, {
                 className: "size-4",
                 "aria-hidden": "true"

package/dist/components/slider/Slider.js

@@ -6,10 +6,10 @@ import { cn } from "../../internal/cn.js";
 const Slider_SliderRoot = /*#__PURE__*/ forwardRef(function({ className, readOnly, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.Root, {
         ref: ref,
-        "data-readonly": readOnly ? '' : void 0,
         className: cn("group flex w-48 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50 data-[orientation=vertical]:grid data-[orientation=vertical]:h-48 data-[orientation=vertical]:w-max data-[orientation=vertical]:grid-cols-[auto_max-content] data-[orientation=vertical]:grid-rows-[auto_minmax(0,1fr)] data-[orientation=vertical]:items-center data-[orientation=vertical]:gap-x-2 data-[orientation=vertical]:[grid-template-areas:'label_value'_'control_markers']", className),
         readOnly: readOnly,
         ...props,
+        "data-readonly": readOnly ? '' : void 0,
         "data-slot": "slider-root"
     });
 });
@@ -80,7 +80,7 @@ function SliderThumbs({ className }) {
 const Slider_SliderMarkerGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.MarkerGroup, {
         ref: ref,
-        className: cn('mt-2 flex justify-between group-data-[orientation=vertical]:m-0 group-data-[orientation=vertical]:h-full group-data-[orientation=vertical]:flex-col group-data-[orientation=vertical]:[grid-area:markers]', className),
+        className: cn('mt-2 group-data-[orientation=vertical]:m-0 group-data-[orientation=vertical]:h-full group-data-[orientation=vertical]:[grid-area:markers]', className),
         ...props,
         "data-slot": "slider-marker-group"
     });
@@ -88,7 +88,7 @@ const Slider_SliderMarkerGroup = /*#__PURE__*/ forwardRef(function({ className,
 const Slider_SliderMarker = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Slider.Marker, {
         ref: ref,
-        className: cn("relative text-xs leading-4 text-muted-foreground before:absolute before:start-1/2 before:-top-2 before:size-1 before:-translate-x-1/2 before:rounded-full before:bg-border before:content-[''] data-[orientation=vertical]:before:-start-2 data-[orientation=vertical]:before:top-1/2 data-[orientation=vertical]:before:-translate-y-1/2 data-[state=at-value]:before:bg-primary group-data-invalid:data-[state=at-value]:before:bg-destructive data-[state=under-value]:before:bg-primary group-data-invalid:data-[state=under-value]:before:bg-destructive", className),
+        className: cn("text-xs leading-4 text-muted-foreground before:absolute before:start-1/2 before:-top-2 before:size-1 before:-translate-x-1/2 before:rounded-full before:bg-border before:content-[''] data-[orientation=vertical]:before:-start-2 data-[orientation=vertical]:before:top-1/2 data-[orientation=vertical]:before:-translate-y-1/2 data-[state=at-value]:before:bg-primary group-data-invalid:data-[state=at-value]:before:bg-destructive data-[state=under-value]:before:bg-primary group-data-invalid:data-[state=under-value]:before:bg-destructive", className),
         ...props,
         "data-slot": "slider-marker"
     });

package/dist/components/spinner/Spinner.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { cva } from "class-variance-authority";

package/dist/components/split-button/SplitButton.js

@@ -8,12 +8,13 @@ import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
 import { OverlayPortal } from "../../internal/overlayPortal.js";
 import { Button } from "../button/index.js";
 import { Menu as index_js_Menu } from "../menu/index.js";
-const splitButtonTriggerVariants = cva("relative min-w-0 -ms-px rounded-s-none before:pointer-events-none before:absolute before:inset-y-1.5 before:start-0 before:w-px before:bg-current before:opacity-[0.16] before:content-['']", {
+import { menuContentVariants, menuPositionerVariants } from "../menu/Menu.js";
+const splitButtonTriggerVariants = cva("relative min-w-0 -ms-[calc(var(--moduix-button-border-width,var(--moduix-border-width-sm))*-1)] rounded-s-none before:pointer-events-none before:absolute before:inset-y-1.5 before:start-0 before:w-px before:bg-current before:opacity-[0.16] before:content-['']", {
     variants: {
         size: {
             xs: 'px-2',
             sm: 'px-2.5',
-            md: 'px-4',
+            md: 'px-3',
             lg: 'px-3.5',
             xl: 'px-4'
         },
@@ -101,7 +102,7 @@ const SplitButton_SplitButtonPositioner = /*#__PURE__*/ forwardRef(function({ cl
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Menu.Positioner, {
             ref: ref,
-            className: cn('z-[var(--z-index)] w-[var(--positioner-width,auto)] max-w-[var(--available-width)] outline-0', className),
+            className: cn(menuPositionerVariants(), className),
             ...props,
             "data-slot": "split-button-positioner"
         })
@@ -111,7 +112,7 @@ const SplitButton_SplitButtonContent = /*#__PURE__*/ forwardRef(function({ asChi
     return /*#__PURE__*/ jsx(Menu.Content, {
         ref: ref,
         asChild: asChild,
-        className: cn('relative z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] flex max-w-[min(20rem,var(--available-width,100vw))] min-w-[min(max(var(--reference-width,0px),12rem),var(--available-width,100vw))] origin-[var(--transform-origin)] flex-col overflow-visible rounded-md bg-popover py-1 text-popover-foreground shadow-lg outline-1 outline-border [--arrow-background:var(--color-popover)] [--arrow-size:0.625rem] data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
+        className: cn(menuContentVariants(), className),
         ...props,
         "data-slot": "split-button-content",
         children: asChild ? children : /*#__PURE__*/ jsx(index_js_Menu.Viewport, {

package/dist/components/splitter/Splitter.js

@@ -40,7 +40,7 @@ const Splitter_SplitterPanel = /*#__PURE__*/ forwardRef(function({ className, ..
 const Splitter_SplitterResizeTriggerIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Splitter.ResizeTriggerIndicator, {
         ref: ref,
-        className: cn('pointer-events-none absolute start-1/2 top-1/2 z-2 box-border h-control-xs w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm transition-[background-color,border-color,box-shadow,transform] duration-200 ease-in-out group-hover/trigger:border-muted-foreground/40 group-hover/trigger:shadow-md group-focus-visible/trigger:outline-2 group-focus-visible/trigger:outline-offset-1 group-focus-visible/trigger:outline-ring data-disabled:invisible data-dragging:scale-[1.08] data-dragging:bg-background data-dragging:shadow-md data-[orientation=vertical]:h-1.5 data-[orientation=vertical]:w-control-xs', className),
+        className: cn('pointer-events-none absolute start-1/2 top-1/2 z-2 box-border h-control-xs w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm transition-[background-color,border-color,box-shadow,transform] duration-200 ease-in-out group-hover/trigger:border-muted-foreground/40 group-hover/trigger:shadow-md group-focus-visible/trigger:outline-2 group-focus-visible/trigger:outline-offset-1 group-focus-visible/trigger:outline-ring data-disabled:invisible data-dragging:scale-[1.08] data-dragging:bg-background data-dragging:shadow-md data-[orientation=vertical]:h-1.5 data-[orientation=vertical]:w-control-xs motion-reduce:transition-none', className),
         ...props,
         "data-slot": "splitter-resize-trigger-indicator"
     });
@@ -49,7 +49,7 @@ const Splitter_SplitterResizeTrigger = /*#__PURE__*/ forwardRef(function({ asChi
     return /*#__PURE__*/ jsx(Splitter.ResizeTrigger, {
         ref: ref,
         asChild: asChild,
-        className: cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", className),
+        className: cn("group/trigger relative z-1 box-border flex w-px min-w-px cursor-col-resize appearance-none items-center justify-center border-0 bg-transparent p-0 outline-0 transition-opacity duration-200 ease-in-out before:absolute before:h-full before:w-[0.5px] before:rounded-full before:bg-border before:transition-[background-color] before:duration-200 before:ease-in-out before:content-[''] after:absolute after:z-1 after:h-full after:w-2.5 after:content-[''] data-disabled:cursor-default data-disabled:opacity-50 data-dragging:before:bg-muted-foreground/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:min-h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:min-w-0 data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:before:h-[0.5px] data-[orientation=vertical]:before:w-full data-[orientation=vertical]:after:h-2.5 data-[orientation=vertical]:after:w-full motion-reduce:transition-none motion-reduce:before:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:before:bg-muted-foreground/40", className),
         ...props,
         "data-slot": "splitter-resize-trigger",
         children: void 0 !== children || asChild ? children : /*#__PURE__*/ jsx(Splitter_SplitterResizeTriggerIndicator, {})

package/dist/components/steps/Steps.js

@@ -81,7 +81,7 @@ const Steps_StepsCompletedContent = /*#__PURE__*/ forwardRef(function({ classNam
 const Steps_StepsPrevTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.PrevTrigger, {
         ref: ref,
-        className: cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 text-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-accent', className),
+        className: cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 text-foreground transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-accent', className),
         ...props,
         "data-slot": "steps-prev-trigger"
     });
@@ -89,7 +89,7 @@ const Steps_StepsPrevTrigger = /*#__PURE__*/ forwardRef(function({ className, ..
 const Steps_StepsNextTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Steps.NextTrigger, {
         ref: ref,
-        className: cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-foreground bg-foreground px-3 py-1.5 text-sm leading-5 text-background transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', className),
+        className: cn('box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md border border-foreground bg-foreground px-3 py-1.5 text-sm leading-5 text-background transition-[background-color,border-color,color,opacity] duration-200 ease-in-out outline-none focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled])]:hover:bg-foreground', className),
         ...props,
         "data-slot": "steps-next-trigger"
     });

package/dist/components/swap/Swap.js

@@ -6,25 +6,25 @@ import { cn } from "../../internal/cn.js";
 const Swap_SwapRoot = /*#__PURE__*/ forwardRef(function({ animation = 'scale', className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Swap.Root, {
         ref: ref,
-        "data-animation": animation,
-        className: cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", className),
+        className: cn("group/swap place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", className),
         ...props,
+        "data-animation": animation,
         "data-slot": "swap-root"
     });
 });
 const Swap_SwapRootProvider = /*#__PURE__*/ forwardRef(function({ animation = 'scale', className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Swap.RootProvider, {
         ref: ref,
-        "data-animation": animation,
-        className: cn("group/swap inline-grid place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", className),
+        className: cn("group/swap place-items-center align-middle [grid-template-areas:'swap'] data-[animation=flip]:[perspective:24rem]", className),
         ...props,
+        "data-animation": animation,
         "data-slot": "swap-root-provider"
     });
 });
 const Swap_SwapIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Swap.Indicator, {
         ref: ref,
-        className: cn('inline-flex items-center justify-center text-inherit [grid-area:swap] group-data-[animation=flip]/swap:[backface-visibility:hidden] group-data-[animation=fade]/swap:data-[state=closed]:animate-moduix-swap-fade-exit group-data-[animation=flip]/swap:data-[state=closed]:animate-moduix-swap-flip-exit group-data-[animation=rotate]/swap:data-[state=closed]:animate-moduix-swap-rotate-exit group-data-[animation=scale]/swap:data-[state=closed]:animate-moduix-swap-scale-exit group-data-[animation=fade]/swap:data-[state=open]:animate-moduix-swap-fade-enter group-data-[animation=flip]/swap:data-[state=open]:animate-moduix-swap-flip-enter group-data-[animation=rotate]/swap:data-[state=open]:animate-moduix-swap-rotate-enter group-data-[animation=scale]/swap:data-[state=open]:animate-moduix-swap-scale-enter motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
+        className: cn('items-center justify-center text-inherit group-data-[animation=flip]/swap:[backface-visibility:hidden] group-data-[animation=fade]/swap:data-[state=closed]:animate-moduix-swap-fade-exit group-data-[animation=flip]/swap:data-[state=closed]:animate-moduix-swap-flip-exit group-data-[animation=rotate]/swap:data-[state=closed]:animate-moduix-swap-rotate-exit group-data-[animation=scale]/swap:data-[state=closed]:animate-moduix-swap-scale-exit group-data-[animation=fade]/swap:data-[state=open]:animate-moduix-swap-fade-enter group-data-[animation=flip]/swap:data-[state=open]:animate-moduix-swap-flip-enter group-data-[animation=rotate]/swap:data-[state=open]:animate-moduix-swap-rotate-enter group-data-[animation=scale]/swap:data-[state=open]:animate-moduix-swap-scale-enter motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
         ...props,
         "data-slot": "swap-indicator"
     });

package/dist/components/switch/Switch.js

@@ -6,25 +6,25 @@ import { cn } from "../../internal/cn.js";
 const Switch_SwitchRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(Switch.Root, {
         ref: ref,
-        "data-size": size,
         className: cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', className),
         ...props,
+        "data-size": size,
         "data-slot": "switch-root"
     });
 });
 const Switch_SwitchRootProvider = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(Switch.RootProvider, {
         ref: ref,
-        "data-size": size,
         className: cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', className),
         ...props,
+        "data-size": size,
         "data-slot": "switch-root-provider"
     });
 });
 const Switch_SwitchControl = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Switch.Control, {
         ref: ref,
-        className: cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent relative inline-flex h-control-xs w-11 shrink-0 items-center rounded-full border border-border bg-muted p-0.5 leading-none outline-0 transition-[background-color,border-color,opacity] duration-200 ease-in-out select-none group-data-[size=lg]/switch:h-7 group-data-[size=lg]/switch:w-13 group-data-[size=sm]/switch:h-5 group-data-[size=sm]/switch:w-9 group-data-[size=xl]/switch:h-control-sm group-data-[size=xl]/switch:w-15 group-data-[size=xs]/switch:h-4 group-data-[size=xs]/switch:w-7 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary motion-reduce:transition-none", className),
+        className: cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent relative inline-flex h-control-xs w-11 shrink-0 items-center rounded-full border border-border bg-muted p-0.5 leading-none outline-0 transition-[background-color,border-color,opacity] duration-200 ease-in-out select-none group-data-[size=lg]/switch:h-7 group-data-[size=lg]/switch:w-13 group-data-[size=sm]/switch:h-5 group-data-[size=sm]/switch:w-9 group-data-[size=xl]/switch:h-control-sm group-data-[size=xl]/switch:w-15 group-data-[size=xs]/switch:h-4 group-data-[size=xs]/switch:w-7 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:data-invalid:border-destructive motion-reduce:transition-none", className),
         ...props,
         "data-slot": "switch-control",
         children: children ?? /*#__PURE__*/ jsx(Switch_SwitchThumb, {})