@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/date-picker/DatePicker.jsx

@@ -23,7 +23,7 @@ function DatePickerRoot(props) {
     const field = useFieldContext();
     const fieldset = useFieldsetContext();
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
-      <DatePicker.Root asChild={local.asChild} data-slot="date-picker-root" class={cn("group/date-picker inline-flex w-75 max-w-full flex-col items-start gap-1 text-foreground has-[input[data-index='1']]:w-96 data-disabled:opacity-50 data-readonly:opacity-50", local.class)} disabled={local.disabled ?? field?.()?.disabled ?? fieldset?.()?.disabled} invalid={local.invalid ?? field?.()?.invalid ?? fieldset?.()?.invalid} lazyMount={local.lazyMount ?? true} readOnly={local.readOnly ?? field?.()?.readOnly} required={local.required ?? field?.()?.required} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+      <DatePicker.Root asChild={local.asChild} class={cn("group/date-picker inline-flex w-75 max-w-full flex-col items-start gap-1 text-foreground has-[input[data-index='1']]:w-96 data-disabled:opacity-50 data-readonly:opacity-50", local.class)} disabled={local.disabled ?? field?.()?.disabled ?? fieldset?.()?.disabled} invalid={local.invalid ?? field?.()?.invalid ?? fieldset?.()?.invalid} lazyMount={local.lazyMount ?? true} readOnly={local.readOnly ?? field?.()?.readOnly} required={local.required ?? field?.()?.required} unmountOnExit={local.unmountOnExit ?? true} {...others} data-slot="date-picker-root">
         {local.children}
       </DatePicker.Root>
     </OverlayPortalProvider>;
@@ -39,7 +39,7 @@ function DatePickerRootProvider(props) {
         'unmountOnExit'
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
-      <DatePicker.RootProvider asChild={local.asChild} data-slot="date-picker-root-provider" class={cn("group/date-picker inline-flex w-75 max-w-full flex-col items-start gap-1 text-foreground has-[input[data-index='1']]:w-96 data-disabled:opacity-50 data-readonly:opacity-50", local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+      <DatePicker.RootProvider asChild={local.asChild} class={cn("group/date-picker inline-flex w-75 max-w-full flex-col items-start gap-1 text-foreground has-[input[data-index='1']]:w-96 data-disabled:opacity-50 data-readonly:opacity-50", local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others} data-slot="date-picker-root-provider">
         {local.children}
       </DatePicker.RootProvider>
     </OverlayPortalProvider>;
@@ -48,13 +48,13 @@ function DatePickerLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.Label data-slot="date-picker-label" class={cn('inline-flex items-center text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others}/>;
+    return <DatePicker.Label class={cn('inline-flex items-center text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others} data-slot="date-picker-label"/>;
 }
 function DatePickerControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.Control data-slot="date-picker-control" class={cn('group/date-picker-control relative flex w-full min-w-0 items-center gap-2 text-foreground', local.class)} {...others}/>;
+    return <DatePicker.Control class={cn('group/date-picker-control relative flex w-full min-w-0 items-center gap-2 text-foreground', local.class)} {...others} data-slot="date-picker-control"/>;
 }
 function DatePickerField(props) {
     const [local, others] = splitProps(props, [
@@ -93,7 +93,7 @@ function DatePickerInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.Input data-slot="date-picker-input" class={cn("readonly:cursor-default h-control-md w-full min-w-30 flex-1 rounded-md border border-border bg-background ps-3.5 pe-17 text-md leading-6 text-current outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out group-has-[input[data-index='1']]/date-picker:pe-3.5 group-data-focus/date-picker-control:border-ring group-data-focus/date-picker-control:outline-ring placeholder:text-muted-foreground focus:border-ring focus:outline-ring disabled:cursor-default aria-invalid:border-destructive aria-invalid:outline-destructive data-disabled:cursor-default data-invalid:border-destructive data-invalid:outline-destructive data-readonly:cursor-default data-[index='1']:pe-17 motion-reduce:transition-none", 'py-1', local.class)} {...others}/>;
+    return <DatePicker.Input class={cn("readonly:cursor-default h-control-md w-full min-w-30 flex-1 rounded-md border border-border bg-background ps-3.5 pe-17 text-md leading-6 text-current outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out group-has-[input[data-index='1']]/date-picker:pe-3.5 group-data-focus/date-picker-control:border-ring group-data-focus/date-picker-control:outline-ring placeholder:text-muted-foreground focus:border-ring focus:outline-ring disabled:cursor-default aria-invalid:border-destructive aria-invalid:outline-destructive data-disabled:cursor-default data-invalid:border-destructive data-invalid:outline-destructive data-readonly:cursor-default data-[index='1']:pe-17 motion-reduce:transition-none", 'py-1', local.class)} {...others} data-slot="date-picker-input"/>;
 }
 function DatePickerTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -102,7 +102,7 @@ function DatePickerTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <DatePicker.Trigger asChild={local.asChild} data-slot="date-picker-trigger" class={cn(!local.asChild && 'absolute end-2 top-1/2 inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others}>
+    return <DatePicker.Trigger asChild={local.asChild} class={cn(!local.asChild && 'absolute end-2 top-1/2 inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others} data-slot="date-picker-trigger">
       {resolvedChildren() ?? <CalendarIcon/>}
     </DatePicker.Trigger>;
 }
@@ -115,7 +115,7 @@ function DatePickerClearTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    if (local.asChild) return <DatePicker.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-slot="date-picker-clear-trigger" class={cn('absolute end-[2.125rem] top-1/2 inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others}>
+    if (local.asChild) return <DatePicker.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} class={cn('absolute end-[2.125rem] top-1/2 inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others} data-slot="date-picker-clear-trigger">
         {local.children}
       </DatePicker.ClearTrigger>;
     return <DatePicker.ClearTrigger asChild={(triggerProps)=>{
@@ -127,33 +127,33 @@ function DatePickerClearTrigger(props) {
         }} class={cn(resolvedProps.class, 'size-control-xs [&>svg]:size-4', local.class)}>
             {resolvedChildren()}
           </CloseButton.Root>;
-    }} data-slot="date-picker-clear-trigger" class={cn('absolute end-[2.125rem] top-1/2 inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others}/>;
+    }} class={cn('absolute end-[2.125rem] top-1/2 inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others} data-slot="date-picker-clear-trigger"/>;
 }
 function DatePickerPositioner(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return <OverlayPortal>
-      <DatePicker.Positioner data-slot="date-picker-positioner" class={cn('z-[var(--z-index)] outline-0', local.class)} {...others}/>
+      <DatePicker.Positioner class={cn('z-[var(--z-index)] outline-0', local.class)} {...others} data-slot="date-picker-positioner"/>
     </OverlayPortal>;
 }
 function DatePickerContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.Content data-slot="date-picker-content" class={cn('z-[calc(60+var(--layer-index,0))] w-75 max-w-[min(calc(100vw-2rem),var(--available-width))] min-w-[min(18.75rem,var(--available-width))] origin-[var(--transform-origin)] rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg outline-0 data-inline:min-w-72 data-inline:shadow-none data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others}/>;
+    return <DatePicker.Content class={cn('z-[calc(60+var(--layer-index,0))] w-75 max-w-[min(calc(100vw-2rem),var(--available-width))] min-w-[min(18.75rem,var(--available-width))] origin-[var(--transform-origin)] rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg outline-0 data-inline:min-w-72 data-inline:shadow-none data-[state=closed]:pointer-events-none data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', local.class)} {...others} data-slot="date-picker-content"/>;
 }
 function DatePickerView(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.View data-slot="date-picker-view" class={cn('grid gap-3', local.class)} {...others}/>;
+    return <DatePicker.View class={cn('grid gap-3', local.class)} {...others} data-slot="date-picker-view"/>;
 }
 function DatePickerViewControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.ViewControl data-slot="date-picker-view-control" class={cn('flex min-w-0 items-center justify-between gap-2', local.class)} {...others}/>;
+    return <DatePicker.ViewControl class={cn('flex min-w-0 items-center justify-between gap-2', local.class)} {...others} data-slot="date-picker-view-control"/>;
 }
 function DatePickerPrevTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -162,7 +162,7 @@ function DatePickerPrevTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <DatePicker.PrevTrigger asChild={local.asChild} data-slot="date-picker-prev-trigger" class={cn(!local.asChild && 'inline-flex size-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others}>
+    return <DatePicker.PrevTrigger asChild={local.asChild} class={cn(!local.asChild && 'inline-flex size-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others} data-slot="date-picker-prev-trigger">
       {resolvedChildren() ?? <ChevronLeftIcon/>}
     </DatePicker.PrevTrigger>;
 }
@@ -173,7 +173,7 @@ function DatePickerNextTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <DatePicker.NextTrigger asChild={local.asChild} data-slot="date-picker-next-trigger" class={cn(!local.asChild && 'inline-flex size-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others}>
+    return <DatePicker.NextTrigger asChild={local.asChild} class={cn(!local.asChild && 'inline-flex size-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 leading-none text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others} data-slot="date-picker-next-trigger">
       {resolvedChildren() ?? <ChevronRightIcon/>}
     </DatePicker.NextTrigger>;
 }
@@ -181,7 +181,7 @@ function DatePickerRangeText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.RangeText data-slot="date-picker-range-text" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+    return <DatePicker.RangeText class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="date-picker-range-text"/>;
 }
 function DatePickerViewTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -190,7 +190,7 @@ function DatePickerViewTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <DatePicker.ViewTrigger asChild={local.asChild} data-slot="date-picker-view-trigger" class={cn(!local.asChild && 'inline-flex min-h-control-sm min-w-0 flex-1 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-sm bg-transparent px-2 text-sm leading-5 font-medium text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others}>
+    return <DatePicker.ViewTrigger asChild={local.asChild} class={cn(!local.asChild && 'inline-flex min-h-control-sm min-w-0 flex-1 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-sm bg-transparent px-2 text-sm leading-5 font-medium text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', local.class)} {...others} data-slot="date-picker-view-trigger">
       {resolvedChildren() ?? <>
           <DatePickerRangeText/>
           <ChevronDownIcon/>
@@ -201,55 +201,55 @@ function DatePickerTable(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.Table data-slot="date-picker-table" class={cn('w-full table-fixed border-separate border-spacing-0.5', local.class)} {...others}/>;
+    return <DatePicker.Table class={cn('w-full table-fixed border-separate border-spacing-0.5', local.class)} {...others} data-slot="date-picker-table"/>;
 }
 function DatePickerTableHead(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.TableHead data-slot="date-picker-table-head" class={local.class} {...others}/>;
+    return <DatePicker.TableHead class={local.class} {...others} data-slot="date-picker-table-head"/>;
 }
 function DatePickerTableBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.TableBody data-slot="date-picker-table-body" class={local.class} {...others}/>;
+    return <DatePicker.TableBody class={local.class} {...others} data-slot="date-picker-table-body"/>;
 }
 function DatePickerTableRow(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.TableRow data-slot="date-picker-table-row" class={local.class} {...others}/>;
+    return <DatePicker.TableRow class={local.class} {...others} data-slot="date-picker-table-row"/>;
 }
 function DatePickerTableHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.TableHeader data-slot="date-picker-table-header" class={cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground', local.class)} {...others}/>;
+    return <DatePicker.TableHeader class={cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground', local.class)} {...others} data-slot="date-picker-table-header"/>;
 }
 function DatePickerWeekNumberHeaderCell(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.WeekNumberHeaderCell data-slot="date-picker-week-number-header-cell" class={cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground tabular-nums', local.class)} {...others}/>;
+    return <DatePicker.WeekNumberHeaderCell class={cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground tabular-nums', local.class)} {...others} data-slot="date-picker-week-number-header-cell"/>;
 }
 function DatePickerWeekNumberCell(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.WeekNumberCell data-slot="date-picker-week-number-cell" class={cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground tabular-nums', local.class)} {...others}/>;
+    return <DatePicker.WeekNumberCell class={cn('h-7 w-control-sm text-center text-xs leading-4 font-medium text-muted-foreground tabular-nums', local.class)} {...others} data-slot="date-picker-week-number-cell"/>;
 }
 function DatePickerTableCell(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.TableCell data-slot="date-picker-table-cell" class={cn('h-control-sm w-control-sm p-0 text-center', local.class)} {...others}/>;
+    return <DatePicker.TableCell class={cn('h-control-sm w-control-sm p-0 text-center', local.class)} {...others} data-slot="date-picker-table-cell"/>;
 }
 function DatePickerTableCellTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.TableCellTrigger data-slot="date-picker-table-cell-trigger" class={cn('inline-flex h-control-sm w-full min-w-control-sm cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring data-in-hover-range:bg-muted data-in-hover-range:text-foreground data-in-range:bg-muted data-in-range:text-foreground data-outside-range:text-muted-foreground data-selected:bg-primary data-selected:text-primary-foreground data-today:border-ring data-unavailable:text-muted-foreground motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:bg-accent [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:text-accent-foreground', local.class)} {...others}/>;
+    return <DatePicker.TableCellTrigger class={cn('inline-flex h-control-sm w-full min-w-control-sm cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring data-in-hover-range:bg-muted data-in-hover-range:text-foreground data-in-range:bg-muted data-in-range:text-foreground data-outside-range:text-muted-foreground data-selected:bg-primary data-selected:text-primary-foreground data-today:border-ring data-unavailable:text-muted-foreground motion-reduce:transition-none [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:bg-accent [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:text-accent-foreground', local.class)} {...others} data-slot="date-picker-table-cell-trigger"/>;
 }
 function DatePickerDayTable(props) {
     const [local, others] = splitProps(props, [
@@ -301,26 +301,26 @@ function DatePickerMonthSelect(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.MonthSelect data-slot="date-picker-month-select" class={cn('min-h-control-sm w-full min-w-0 flex-1 cursor-pointer rounded-sm border border-border bg-background px-2 py-1 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring motion-reduce:transition-none', local.class)} {...others}/>;
+    return <DatePicker.MonthSelect class={cn('min-h-control-sm w-full min-w-0 flex-1 cursor-pointer rounded-sm border border-border bg-background px-2 py-1 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring motion-reduce:transition-none', local.class)} {...others} data-slot="date-picker-month-select"/>;
 }
 function DatePickerYearSelect(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.YearSelect data-slot="date-picker-year-select" class={cn('min-h-control-sm w-full min-w-0 flex-1 cursor-pointer rounded-sm border border-border bg-background px-2 py-1 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring motion-reduce:transition-none', local.class)} {...others}/>;
+    return <DatePicker.YearSelect class={cn('min-h-control-sm w-full min-w-0 flex-1 cursor-pointer rounded-sm border border-border bg-background px-2 py-1 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring motion-reduce:transition-none', local.class)} {...others} data-slot="date-picker-year-select"/>;
 }
 function DatePickerPresetTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <DatePicker.PresetTrigger asChild={local.asChild} data-slot="date-picker-preset-trigger" class={cn(!local.asChild && 'inline-flex min-h-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-muted px-2 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring data-selected:bg-primary data-selected:text-primary-foreground motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:bg-accent', local.class)} {...others}/>;
+    return <DatePicker.PresetTrigger asChild={local.asChild} class={cn(!local.asChild && 'inline-flex min-h-control-sm shrink-0 cursor-pointer items-center justify-center rounded-sm bg-muted px-2 text-sm leading-5 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,color,outline-color,opacity] duration-200 ease-in-out focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 data-focus:outline-ring data-selected:bg-primary data-selected:text-primary-foreground motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):not([data-selected]):hover]:bg-accent', local.class)} {...others} data-slot="date-picker-preset-trigger"/>;
 }
 function DatePickerValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <DatePicker.ValueText data-slot="date-picker-value-text" class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others}/>;
+    return <DatePicker.ValueText class={cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', local.class)} {...others} data-slot="date-picker-value-text"/>;
 }
 const DatePicker_DatePicker = Object.assign(DatePickerRoot, {
     Root: DatePickerRoot,

package/dist/components/dialog/Dialog.js

@@ -77,11 +77,12 @@ function DialogTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "dialog-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "dialog-trigger"
+    }));
 }
 function DialogBackdrop(props) {
     const [local, others] = splitProps(props, [
@@ -90,11 +91,12 @@ function DialogBackdrop(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Dialog.Backdrop, mergeProps({
-                "data-slot": "dialog-backdrop",
                 get ["class"] () {
                     return 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));
+            }, others, {
+                "data-slot": "dialog-backdrop"
+            }));
         }
     });
 }
@@ -105,11 +107,12 @@ function DialogPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Dialog.Positioner, mergeProps({
-                "data-slot": "dialog-positioner",
                 get ["class"] () {
                     return cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid [scrollbar-gutter:stable_both-edges] place-items-center overflow-y-auto overscroll-contain p-4', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "dialog-positioner"
+            }));
         }
     });
 }
@@ -118,33 +121,36 @@ function DialogContent(props) {
         'class'
     ]);
     return createComponent(Dialog.Content, mergeProps({
-        "data-slot": "dialog-content",
         get ["class"] () {
             return cn("relative max-h-[calc(100dvh-2rem)] w-[min(28rem,calc(100vw-2rem))] max-w-full origin-top rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-0 transition-[scale,translate] duration-200 ease-in-out after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-[inherit] after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-[''] data-[has-nested]:[translate:0_calc(2.5rem*var(--nested-layer-count,0))] data-[has-nested]:[scale:calc(1-0.05*var(--nested-layer-count,0))] data-[has-nested]:after:opacity-100 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none motion-reduce:transition-none", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "dialog-content"
+    }));
 }
 function DialogTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Dialog.Title, mergeProps({
-        "data-slot": "dialog-title",
         get ["class"] () {
             return cn('text-lg font-semibold text-popover-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "dialog-title"
+    }));
 }
 function DialogDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Dialog.Description, mergeProps({
-        "data-slot": "dialog-description",
         get ["class"] () {
             return cn('text-md text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "dialog-description"
+    }));
 }
 function DialogCloseTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -155,11 +161,12 @@ function DialogCloseTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "dialog-close-trigger",
         get ["class"] () {
             return cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "dialog-close-trigger"
+    }));
 }
 function DialogCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -192,33 +199,36 @@ function DialogHeader(props) {
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "dialog-header",
         get ["class"] () {
             return cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='dialog-close-trigger']]:col-start-2 [&>[data-slot='dialog-close-trigger']]:justify-self-end [&>[data-slot='dialog-description']]:col-span-2 [&>[data-slot='dialog-title']]:col-start-1", local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "dialog-header"
+    }));
 }
 function DialogBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "dialog-body",
         get ["class"] () {
             return cn('mt-4 text-md text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "dialog-body"
+    }));
 }
 function DialogFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "dialog-footer",
         get ["class"] () {
             return cn('mt-6 flex justify-end gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "dialog-footer"
+    }));
 }
 const Dialog_Dialog = Object.assign(DialogRoot, {
     Root: DialogRoot,

package/dist/components/dialog/Dialog.jsx

@@ -38,14 +38,14 @@ function DialogTrigger(props) {
         'asChild',
         'class'
     ]);
-    return <Dialog.Trigger asChild={local.asChild} data-slot="dialog-trigger" class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@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 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="dialog-trigger"/>;
 }
 function DialogBackdrop(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return <OverlayPortal>
-      <Dialog.Backdrop data-slot="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}/>
+      <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="dialog-backdrop"/>
     </OverlayPortal>;
 }
 function DialogPositioner(props) {
@@ -53,33 +53,33 @@ function DialogPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Dialog.Positioner data-slot="dialog-positioner" class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid [scrollbar-gutter:stable_both-edges] place-items-center overflow-y-auto overscroll-contain p-4', local.class)} {...others}/>
+      <Dialog.Positioner class={cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid [scrollbar-gutter:stable_both-edges] place-items-center overflow-y-auto overscroll-contain p-4', local.class)} {...others} data-slot="dialog-positioner"/>
     </OverlayPortal>;
 }
 function DialogContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Content data-slot="dialog-content" class={cn("relative max-h-[calc(100dvh-2rem)] w-[min(28rem,calc(100vw-2rem))] max-w-full origin-top rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-0 transition-[scale,translate] duration-200 ease-in-out after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-[inherit] after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-[''] data-[has-nested]:[translate:0_calc(2.5rem*var(--nested-layer-count,0))] data-[has-nested]:[scale:calc(1-0.05*var(--nested-layer-count,0))] data-[has-nested]:after:opacity-100 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none motion-reduce:transition-none", local.class)} {...others}/>;
+    return <Dialog.Content class={cn("relative max-h-[calc(100dvh-2rem)] w-[min(28rem,calc(100vw-2rem))] max-w-full origin-top rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-0 transition-[scale,translate] duration-200 ease-in-out after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-[inherit] after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-[''] data-[has-nested]:[translate:0_calc(2.5rem*var(--nested-layer-count,0))] data-[has-nested]:[scale:calc(1-0.05*var(--nested-layer-count,0))] data-[has-nested]:after:opacity-100 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none motion-reduce:transition-none", local.class)} {...others} data-slot="dialog-content"/>;
 }
 function DialogTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Title data-slot="dialog-title" class={cn('text-lg font-semibold text-popover-foreground', local.class)} {...others}/>;
+    return <Dialog.Title class={cn('text-lg font-semibold text-popover-foreground', local.class)} {...others} data-slot="dialog-title"/>;
 }
 function DialogDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Description data-slot="dialog-description" class={cn('text-md text-muted-foreground', local.class)} {...others}/>;
+    return <Dialog.Description class={cn('text-md text-muted-foreground', local.class)} {...others} data-slot="dialog-description"/>;
 }
 function DialogCloseTrigger(props) {
     const [local, others] = splitProps(props, [
         'asChild',
         'class'
     ]);
-    return <Dialog.CloseTrigger asChild={local.asChild} data-slot="dialog-close-trigger" class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others}/>;
+    return <Dialog.CloseTrigger asChild={local.asChild} class={cn(!local.asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center 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 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="dialog-close-trigger"/>;
 }
 function DialogCloseIcon(props) {
     const [local, others] = splitProps(props, [
@@ -97,19 +97,19 @@ function DialogHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="dialog-header" class={cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='dialog-close-trigger']]:col-start-2 [&>[data-slot='dialog-close-trigger']]:justify-self-end [&>[data-slot='dialog-description']]:col-span-2 [&>[data-slot='dialog-title']]:col-start-1", local.class)} {...others}/>;
+    return <ark.div class={cn("grid grid-cols-[minmax(0,1fr)_auto] items-start gap-1 [&>[data-slot='dialog-close-trigger']]:col-start-2 [&>[data-slot='dialog-close-trigger']]:justify-self-end [&>[data-slot='dialog-description']]:col-span-2 [&>[data-slot='dialog-title']]:col-start-1", local.class)} {...others} data-slot="dialog-header"/>;
 }
 function DialogBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="dialog-body" class={cn('mt-4 text-md text-muted-foreground', local.class)} {...others}/>;
+    return <ark.div class={cn('mt-4 text-md text-muted-foreground', local.class)} {...others} data-slot="dialog-body"/>;
 }
 function DialogFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="dialog-footer" class={cn('mt-6 flex justify-end gap-2', local.class)} {...others}/>;
+    return <ark.div class={cn('mt-6 flex justify-end gap-2', local.class)} {...others} data-slot="dialog-footer"/>;
 }
 const Dialog_Dialog = Object.assign(DialogRoot, {
     Root: DialogRoot,