@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/command-palette/CommandPalette.jsx

@@ -63,14 +63,14 @@ function CommandPaletteTrigger(props) {
         'asChild',
         'class'
     ]);
-    return <Dialog.Trigger asChild={local.asChild} data-slot="command-palette-trigger" class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+    return <Dialog.Trigger asChild={local.asChild} class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="command-palette-trigger"/>;
 }
 function CommandPaletteBackdrop(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return <OverlayPortal>
-      <Dialog.Backdrop data-slot="command-palette-backdrop" class={cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] bg-overlay backdrop-blur-[4px] data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:animate-none', local.class)} {...others}/>
+      <Dialog.Backdrop class={cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] bg-overlay backdrop-blur-[4px] data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:animate-none', local.class)} {...others} data-slot="command-palette-backdrop"/>
     </OverlayPortal>;
 }
 function CommandPalettePositioner(props) {
@@ -78,14 +78,14 @@ function CommandPalettePositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Dialog.Positioner data-slot="command-palette-positioner" class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid items-start justify-items-center overflow-hidden overscroll-contain px-4 pt-[10dvh] pb-4', local.class)} {...others}/>
+      <Dialog.Positioner class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid items-start justify-items-center overflow-hidden overscroll-contain px-4 pt-[10dvh] pb-4', local.class)} {...others} data-slot="command-palette-positioner"/>
     </OverlayPortal>;
 }
 function CommandPaletteContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Content data-slot="command-palette-content" class={cn('flex max-h-[min(34rem,calc(100dvh-5rem))] w-[min(37.5rem,calc(100vw-2rem))] origin-top flex-col overflow-hidden rounded-lg border border-border/84 bg-popover bg-linear-to-b from-white/4 to-transparent text-popover-foreground shadow-lg outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class)} {...others}/>;
+    return <Dialog.Content class={cn('flex max-h-[min(34rem,calc(100dvh-5rem))] w-[min(37.5rem,calc(100vw-2rem))] origin-top flex-col overflow-hidden rounded-lg border border-border/84 bg-popover bg-linear-to-b from-white/4 to-transparent text-popover-foreground shadow-lg outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', local.class)} {...others} data-slot="command-palette-content"/>;
 }
 function CommandPalettePanel(props) {
     const [local, others] = splitProps(props, [
@@ -104,25 +104,25 @@ function CommandPaletteTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Title data-slot="command-palette-title" class={cn('text-md leading-6 font-semibold text-popover-foreground', local.class)} {...others}/>;
+    return <Dialog.Title class={cn('text-md leading-6 font-semibold text-popover-foreground', local.class)} {...others} data-slot="command-palette-title"/>;
 }
 function CommandPaletteDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Description data-slot="command-palette-description" class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others}/>;
+    return <Dialog.Description class={cn('text-sm leading-5 text-muted-foreground', local.class)} {...others} data-slot="command-palette-description"/>;
 }
 function CommandPaletteHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="command-palette-header" class={cn('grid gap-1 px-4 pt-4', local.class)} {...others}/>;
+    return <ark.div class={cn('grid gap-1 px-4 pt-4', local.class)} {...others} data-slot="command-palette-header"/>;
 }
 function CommandPaletteBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="command-palette-body" class={cn('flex min-h-0 flex-1 flex-col', local.class)} {...others}/>;
+    return <ark.div class={cn('flex min-h-0 flex-1 flex-col', local.class)} {...others} data-slot="command-palette-body"/>;
 }
 const CommandPalette_CommandPaletteCombobox = function(props) {
     const [local, others] = splitProps(props, [
@@ -140,7 +140,7 @@ const CommandPalette_CommandPaletteCombobox = function(props) {
         local.onSelect?.(details);
         if (local.closeOnSelect ?? true) dialog().setOpen(false);
     };
-    return <Combobox.Root data-slot="command-palette-combobox" class={cn('flex min-h-0 flex-1 flex-col overflow-hidden', local.class)} open={local.open ?? true} inputBehavior={local.inputBehavior ?? 'autohighlight'} selectionBehavior={local.selectionBehavior ?? 'preserve'} closeOnSelect={local.closeOnSelect ?? true} disableLayer={local.disableLayer ?? true} onSelect={handleSelect} {...others}>
+    return <Combobox.Root class={cn('flex min-h-0 flex-1 flex-col overflow-hidden', local.class)} open={local.open ?? true} inputBehavior={local.inputBehavior ?? 'autohighlight'} selectionBehavior={local.selectionBehavior ?? 'preserve'} closeOnSelect={local.closeOnSelect ?? true} disableLayer={local.disableLayer ?? true} onSelect={handleSelect} {...others} data-slot="command-palette-combobox">
       {local.children}
     </Combobox.Root>;
 };
@@ -148,13 +148,13 @@ function CommandPaletteControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Control data-slot="command-palette-control" class={cn('relative mx-3 mt-3 flex min-h-control-md flex-none items-center gap-2 rounded-md border border-border bg-background px-3 py-1 text-foreground transition-[background-color,border-color] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive', local.class)} {...others}/>;
+    return <Combobox.Control class={cn('relative mx-3 mt-3 flex min-h-control-md flex-none items-center gap-2 rounded-md border border-border bg-background px-3 py-1 text-foreground transition-[background-color,border-color] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive', local.class)} {...others} data-slot="command-palette-control"/>;
 }
 function CommandPaletteInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Input data-slot="command-palette-input" class={cn('h-auto w-full min-w-0 flex-1 bg-transparent text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground data-invalid:text-destructive', local.class)} {...others}/>;
+    return <Combobox.Input class={cn('h-auto w-full min-w-0 flex-1 bg-transparent text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground data-invalid:text-destructive', local.class)} {...others} data-slot="command-palette-input"/>;
 }
 function CommandPaletteSearch(props) {
     const [local, others] = splitProps(props, [
@@ -178,16 +178,13 @@ function CommandPaletteClearTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return <Combobox.Context>
-      {(combobox)=><Combobox.ClearTrigger asChild={local.asChild} data-slot="command-palette-clear-trigger" hidden={0 === combobox().inputValue.length} aria-label={local['aria-label'] ?? (!local.asChild && null == local.children && null == local['aria-labelledby'] ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0)} aria-labelledby={local['aria-labelledby']} class={cn('inline-flex size-6 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-md bg-transparent text-muted-foreground transition-[background-color,color,opacity,translate,scale] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-3 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-popover-foreground', local.class)} onClick={(event)=>{
+      {(combobox)=><Combobox.ClearTrigger asChild={local.asChild} hidden={0 === combobox().inputValue.length} aria-label={local['aria-label'] ?? (!local.asChild && null == local.children && null == local['aria-labelledby'] ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0)} aria-labelledby={local['aria-labelledby']} class={cn('inline-flex size-6 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-md bg-transparent text-muted-foreground transition-[background-color,color,opacity,translate,scale] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-3 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-popover-foreground', local.class)} onClick={(event)=>{
             local.onClick?.(event);
             if (!event.defaultPrevented) combobox().setInputValue('');
         }} onPointerDown={(event)=>{
             local.onPointerDown?.(event);
-            if (0 === event.button) {
-                event.preventDefault();
-                combobox().setInputValue('');
-            }
-        }} {...others}>
+            if (0 === event.button) event.preventDefault();
+        }} {...others} data-slot="command-palette-clear-trigger">
           {resolvedChildren() ?? <CloseIcon/>}
         </Combobox.ClearTrigger>}
     </Combobox.Context>;
@@ -197,7 +194,7 @@ function CommandPaletteList(props) {
         'class',
         'children'
     ]);
-    return <Combobox.Content data-slot="command-palette-list" class={cn('group/list flex min-h-0 flex-1 overflow-hidden outline-0', local.class)} {...others}>
+    return <Combobox.Content class={cn('group/list flex min-h-0 flex-1 overflow-hidden outline-0', local.class)} {...others} data-slot="command-palette-list">
       <ScrollArea data-slot="command-palette-scroll-area" class="h-auto min-h-0 flex-1">
         <ScrollArea.Viewport data-slot="command-palette-scroll-viewport" class="scroll-py-2">
           <ScrollArea.Content data-slot="command-palette-scroll-content" class="min-h-full px-3 py-3 group-data-[empty]/list:p-0">
@@ -211,31 +208,31 @@ function CommandPaletteEmpty(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Empty data-slot="command-palette-empty" class={cn('[&:not(:empty)]:px-4 [&:not(:empty)]:py-3 [&:not(:empty)]:text-sm [&:not(:empty)]:leading-5 [&:not(:empty)]:text-muted-foreground', local.class)} {...others}/>;
+    return <Combobox.Empty class={cn('[&:not(:empty)]:px-4 [&:not(:empty)]:py-3 [&:not(:empty)]:text-sm [&:not(:empty)]:leading-5 [&:not(:empty)]:text-muted-foreground', local.class)} {...others} data-slot="command-palette-empty"/>;
 }
 function CommandPaletteItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.ItemGroup data-slot="command-palette-item-group" class={cn('grid gap-1 [&:not(:last-child)]:pb-2', local.class)} {...others}/>;
+    return <Combobox.ItemGroup class={cn('grid gap-1 [&:not(:last-child)]:pb-2', local.class)} {...others} data-slot="command-palette-item-group"/>;
 }
 function CommandPaletteItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.ItemGroupLabel data-slot="command-palette-item-group-label" class={cn('sticky top-0 z-1 block bg-popover px-3 py-1 text-xs leading-4 font-normal text-muted-foreground', local.class)} {...others}/>;
+    return <Combobox.ItemGroupLabel class={cn('sticky top-0 z-1 block bg-popover px-3 py-1 text-xs leading-4 font-normal text-muted-foreground', local.class)} {...others} data-slot="command-palette-item-group-label"/>;
 }
 function CommandPaletteItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Item data-slot="command-palette-item" class={cn('relative z-0 grid min-h-control-sm cursor-default grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-3 rounded-md px-3 py-1 text-sm leading-5 text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground', local.class)} {...others}/>;
+    return <Combobox.Item class={cn('relative z-0 grid min-h-control-sm cursor-default grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-3 rounded-md px-3 py-1 text-sm leading-5 text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground', local.class)} {...others} data-slot="command-palette-item"/>;
 }
 function CommandPaletteItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.ItemText data-slot="command-palette-item-text" class={cn('grid min-w-0 gap-1', local.class)} {...others}/>;
+    return <Combobox.ItemText class={cn('grid min-w-0 gap-1', local.class)} {...others} data-slot="command-palette-item-text"/>;
 }
 function CommandPaletteItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -243,7 +240,7 @@ function CommandPaletteItemIndicator(props) {
         'children'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Combobox.ItemIndicator data-slot="command-palette-item-indicator" class={cn('inline-flex size-8 items-center justify-center justify-self-end rounded-md border border-transparent bg-transparent text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others}>
+    return <Combobox.ItemIndicator class={cn('inline-flex size-8 items-center justify-center justify-self-end rounded-md border border-transparent bg-transparent text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others} data-slot="command-palette-item-indicator">
       {resolvedChildren() ?? <CheckIcon/>}
     </Combobox.ItemIndicator>;
 }
@@ -251,43 +248,43 @@ function CommandPaletteItemIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="command-palette-item-icon" class={cn('inline-flex size-8 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others}/>;
+    return <ark.span class={cn('inline-flex size-8 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others} data-slot="command-palette-item-icon"/>;
 }
 function CommandPaletteItemLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="command-palette-item-label" class={cn('min-w-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+    return <ark.span class={cn('min-w-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="command-palette-item-label"/>;
 }
 function CommandPaletteItemDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="command-palette-item-description" class={cn('min-w-0 overflow-hidden text-xs leading-4 text-ellipsis whitespace-nowrap text-muted-foreground', local.class)} {...others}/>;
+    return <ark.span class={cn('min-w-0 overflow-hidden text-xs leading-4 text-ellipsis whitespace-nowrap text-muted-foreground', local.class)} {...others} data-slot="command-palette-item-description"/>;
 }
 function CommandPaletteItemMeta(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="command-palette-item-meta" class={cn('justify-self-end text-xs leading-4 whitespace-nowrap text-muted-foreground', local.class)} {...others}/>;
+    return <ark.span class={cn('justify-self-end text-xs leading-4 whitespace-nowrap text-muted-foreground', local.class)} {...others} data-slot="command-palette-item-meta"/>;
 }
 function CommandPaletteSeparator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div role="separator" data-slot="command-palette-separator" class={cn('mx-2 my-2 h-px bg-border', local.class)} {...others}/>;
+    return <ark.div role="separator" class={cn('mx-2 my-2 h-px bg-border', local.class)} {...others} data-slot="command-palette-separator"/>;
 }
 function CommandPaletteFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="command-palette-footer" class={cn('flex flex-none items-center justify-between gap-3 border-t border-border px-4 py-2 text-xs leading-4 text-muted-foreground', local.class)} {...others}/>;
+    return <ark.div class={cn('flex flex-none items-center justify-between gap-3 border-t border-border px-4 py-2 text-xs leading-4 text-muted-foreground', local.class)} {...others} data-slot="command-palette-footer"/>;
 }
 function CommandPaletteKbd(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Kbd.Root data-slot="command-palette-kbd" class={cn('min-h-5 min-w-5 rounded-sm px-1 text-xs leading-4 text-muted-foreground', local.class)} {...others}/>;
+    return <Kbd.Root class={cn('min-h-5 min-w-5 rounded-sm px-1 text-xs leading-4 text-muted-foreground', local.class)} {...others} data-slot="command-palette-kbd"/>;
 }
 const CommandPalette = Object.assign(CommandPaletteRoot, {
     Root: CommandPaletteRoot,

package/dist/components/container/Container.js

@@ -24,7 +24,7 @@ const containerVariants = cva('w-full min-w-0 mx-auto', {
         {
             size: 'xs',
             gutter: 'none',
-            class: 'max-w-none'
+            class: 'max-w-[40rem]'
         },
         {
             size: 'xs',
@@ -39,7 +39,7 @@ const containerVariants = cva('w-full min-w-0 mx-auto', {
         {
             size: 'sm',
             gutter: 'none',
-            class: 'max-w-none'
+            class: 'max-w-[48rem]'
         },
         {
             size: 'sm',
@@ -54,7 +54,7 @@ const containerVariants = cva('w-full min-w-0 mx-auto', {
         {
             size: 'md',
             gutter: 'none',
-            class: 'max-w-none'
+            class: 'max-w-[64rem]'
         },
         {
             size: 'md',
@@ -69,7 +69,7 @@ const containerVariants = cva('w-full min-w-0 mx-auto', {
         {
             size: 'lg',
             gutter: 'none',
-            class: 'max-w-none'
+            class: 'max-w-[72rem]'
         },
         {
             size: 'lg',
@@ -84,7 +84,7 @@ const containerVariants = cva('w-full min-w-0 mx-auto', {
         {
             size: 'xl',
             gutter: 'none',
-            class: 'max-w-none'
+            class: 'max-w-[90rem]'
         },
         {
             size: 'xl',

package/dist/components/container/Container.jsx

@@ -23,7 +23,7 @@ const containerVariants = cva('w-full min-w-0 mx-auto', {
         {
             size: 'xs',
             gutter: 'none',
-            class: 'max-w-none'
+            class: 'max-w-[40rem]'
         },
         {
             size: 'xs',
@@ -38,7 +38,7 @@ const containerVariants = cva('w-full min-w-0 mx-auto', {
         {
             size: 'sm',
             gutter: 'none',
-            class: 'max-w-none'
+            class: 'max-w-[48rem]'
         },
         {
             size: 'sm',
@@ -53,7 +53,7 @@ const containerVariants = cva('w-full min-w-0 mx-auto', {
         {
             size: 'md',
             gutter: 'none',
-            class: 'max-w-none'
+            class: 'max-w-[64rem]'
         },
         {
             size: 'md',
@@ -68,7 +68,7 @@ const containerVariants = cva('w-full min-w-0 mx-auto', {
         {
             size: 'lg',
             gutter: 'none',
-            class: 'max-w-none'
+            class: 'max-w-[72rem]'
         },
         {
             size: 'lg',
@@ -83,7 +83,7 @@ const containerVariants = cva('w-full min-w-0 mx-auto', {
         {
             size: 'xl',
             gutter: 'none',
-            class: 'max-w-none'
+            class: 'max-w-[90rem]'
         },
         {
             size: 'xl',

package/dist/components/date-input/DateInput.js

@@ -2,7 +2,7 @@ import { createComponent, mergeProps, spread, template } from "solid-js/web";
 import { DateInput, useDateInput, useDateInputContext } from "@ark-ui/solid/date-input";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
-var _tmpl$ = /*#__PURE__*/ template("<span data-slot=date-input-separator>");
+var _tmpl$ = /*#__PURE__*/ template("<span>");
 function DateInputRoot(props) {
     const [local, others] = splitProps(props, [
         'asChild',
@@ -13,11 +13,11 @@ function DateInputRoot(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "date-input-root",
         get ["class"] () {
             return cn('inline-flex w-full max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "date-input-root",
         get children () {
             return local.children;
         }
@@ -33,11 +33,11 @@ function DateInputRootProvider(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "date-input-root-provider",
         get ["class"] () {
             return cn('inline-flex w-full max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class);
         }
     }, others, {
+        "data-slot": "date-input-root-provider",
         get children () {
             return local.children;
         }
@@ -48,44 +48,48 @@ function DateInputLabel(props) {
         'class'
     ]);
     return createComponent(DateInput.Label, mergeProps({
-        "data-slot": "date-input-label",
         get ["class"] () {
             return cn('text-sm leading-5 font-medium text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "date-input-label"
+    }));
 }
 function DateInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(DateInput.Control, mergeProps({
-        "data-slot": "date-input-control",
         get ["class"] () {
             return cn('box-border inline-flex min-h-control-md w-full items-center rounded-md border border-border bg-background px-3 py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out focus-within:outline-ring data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:focus-within:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "date-input-control"
+    }));
 }
 function DateInputSegmentGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(DateInput.SegmentGroup, mergeProps({
-        "data-slot": "date-input-segment-group",
         get ["class"] () {
             return cn('inline-flex items-center gap-0.5 tabular-nums', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "date-input-segment-group"
+    }));
 }
 function DateInputSegment(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(DateInput.Segment, mergeProps({
-        "data-slot": "date-input-segment",
         get ["class"] () {
             return cn('min-w-[2ch] cursor-text rounded-sm px-1 py-0 text-center leading-6 text-current outline-0 transition-colors duration-200 ease-in-out [font:inherit] focus-visible:bg-ring/18 focus-visible:text-foreground data-disabled:cursor-default data-placeholder-shown:text-muted-foreground data-readonly:cursor-default data-[type=literal]:pointer-events-none data-[type=literal]:min-w-auto data-[type=literal]:bg-transparent data-[type=literal]:px-0 data-[type=literal]:text-muted-foreground motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "date-input-segment"
+    }));
 }
 function DateInputSegments(props) {
     return createComponent(DateInputSegmentGroup, mergeProps(props, {
@@ -116,7 +120,9 @@ function DateInputSeparator(props) {
             get ["class"] () {
                 return cn('text-muted-foreground select-none', local.class);
             }
-        }, others), false, false);
+        }, others, {
+            "data-slot": "date-input-separator"
+        }), false, false);
         return _el$;
     })();
 }

package/dist/components/date-input/DateInput.jsx

@@ -7,7 +7,7 @@ function DateInputRoot(props) {
         'children',
         'class'
     ]);
-    return <DateInput.Root asChild={local.asChild} data-slot="date-input-root" class={cn('inline-flex w-full max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class)} {...others}>
+    return <DateInput.Root asChild={local.asChild} class={cn('inline-flex w-full max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class)} {...others} data-slot="date-input-root">
       {local.children}
     </DateInput.Root>;
 }
@@ -17,7 +17,7 @@ function DateInputRootProvider(props) {
         'children',
         'class'
     ]);
-    return <DateInput.RootProvider asChild={local.asChild} data-slot="date-input-root-provider" class={cn('inline-flex w-full max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class)} {...others}>
+    return <DateInput.RootProvider asChild={local.asChild} class={cn('inline-flex w-full max-w-none flex-col items-start gap-1 data-disabled:opacity-50', local.class)} {...others} data-slot="date-input-root-provider">
       {local.children}
     </DateInput.RootProvider>;
 }
@@ -25,25 +25,25 @@ function DateInputLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DateInput.Label data-slot="date-input-label" class={cn('text-sm leading-5 font-medium text-foreground', local.class)} {...others}/>;
+    return <DateInput.Label class={cn('text-sm leading-5 font-medium text-foreground', local.class)} {...others} data-slot="date-input-label"/>;
 }
 function DateInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DateInput.Control data-slot="date-input-control" class={cn('box-border inline-flex min-h-control-md w-full items-center rounded-md border border-border bg-background px-3 py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out focus-within:outline-ring data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:focus-within:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none', local.class)} {...others}/>;
+    return <DateInput.Control class={cn('box-border inline-flex min-h-control-md w-full items-center rounded-md border border-border bg-background px-3 py-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out focus-within:outline-ring data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:focus-within:outline-destructive data-invalid:data-focus:outline-destructive motion-reduce:transition-none', local.class)} {...others} data-slot="date-input-control"/>;
 }
 function DateInputSegmentGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DateInput.SegmentGroup data-slot="date-input-segment-group" class={cn('inline-flex items-center gap-0.5 tabular-nums', local.class)} {...others}/>;
+    return <DateInput.SegmentGroup class={cn('inline-flex items-center gap-0.5 tabular-nums', local.class)} {...others} data-slot="date-input-segment-group"/>;
 }
 function DateInputSegment(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DateInput.Segment data-slot="date-input-segment" class={cn('min-w-[2ch] cursor-text rounded-sm px-1 py-0 text-center leading-6 text-current outline-0 transition-colors duration-200 ease-in-out [font:inherit] focus-visible:bg-ring/18 focus-visible:text-foreground data-disabled:cursor-default data-placeholder-shown:text-muted-foreground data-readonly:cursor-default data-[type=literal]:pointer-events-none data-[type=literal]:min-w-auto data-[type=literal]:bg-transparent data-[type=literal]:px-0 data-[type=literal]:text-muted-foreground motion-reduce:transition-none', local.class)} {...others}/>;
+    return <DateInput.Segment class={cn('min-w-[2ch] cursor-text rounded-sm px-1 py-0 text-center leading-6 text-current outline-0 transition-colors duration-200 ease-in-out [font:inherit] focus-visible:bg-ring/18 focus-visible:text-foreground data-disabled:cursor-default data-placeholder-shown:text-muted-foreground data-readonly:cursor-default data-[type=literal]:pointer-events-none data-[type=literal]:min-w-auto data-[type=literal]:bg-transparent data-[type=literal]:px-0 data-[type=literal]:text-muted-foreground motion-reduce:transition-none', local.class)} {...others} data-slot="date-input-segment"/>;
 }
 function DateInputSegments(props) {
     return <DateInputSegmentGroup {...props}>
@@ -58,7 +58,7 @@ function DateInputSeparator(props) {
         'class',
         'role'
     ]);
-    return <span data-slot="date-input-separator" aria-hidden={local['aria-hidden'] ?? true} role={local.role ?? 'presentation'} class={cn('text-muted-foreground select-none', local.class)} {...others}/>;
+    return <span aria-hidden={local['aria-hidden'] ?? true} role={local.role ?? 'presentation'} class={cn('text-muted-foreground select-none', local.class)} {...others} data-slot="date-input-separator"/>;
 }
 const DateInput_DateInput = Object.assign(DateInputRoot, {
     Root: DateInputRoot,