@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/color-picker/ColorPicker.jsx

@@ -14,7 +14,7 @@ function ColorPickerRoot(props) {
         'unmountOnExit'
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
-      <ColorPicker.Root asChild={local.asChild} data-slot="color-picker-root" class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+      <ColorPicker.Root asChild={local.asChild} class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others} data-slot="color-picker-root">
         {local.children}
       </ColorPicker.Root>
     </OverlayPortalProvider>;
@@ -30,7 +30,7 @@ function ColorPickerRootProvider(props) {
         'unmountOnExit'
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
-      <ColorPicker.RootProvider asChild={local.asChild} data-slot="color-picker-root-provider" class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others}>
+      <ColorPicker.RootProvider asChild={local.asChild} class={cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} lazyMount={local.lazyMount ?? true} unmountOnExit={local.unmountOnExit ?? true} {...others} data-slot="color-picker-root-provider">
         {local.children}
       </ColorPicker.RootProvider>
     </OverlayPortalProvider>;
@@ -39,13 +39,13 @@ function ColorPickerLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.Label data-slot="color-picker-label" class={cn('inline-flex items-center text-sm font-medium text-foreground select-none', local.class)} {...others}/>;
+    return <ColorPicker.Label class={cn('inline-flex items-center text-sm font-medium text-foreground select-none', local.class)} {...others} data-slot="color-picker-label"/>;
 }
 function ColorPickerControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.Control data-slot="color-picker-control" class={cn('flex min-w-0 items-center gap-2 data-disabled:opacity-50', local.class)} {...others}/>;
+    return <ColorPicker.Control class={cn('flex min-w-0 items-center gap-2 data-disabled:opacity-50', local.class)} {...others} data-slot="color-picker-control"/>;
 }
 function ColorPickerTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -53,7 +53,7 @@ function ColorPickerTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.Trigger data-slot="color-picker-trigger" class={cn('group/trigger box-border grid size-control-md shrink-0 place-items-center overflow-hidden rounded-md border border-border bg-background p-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out select-none focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-invalid:border-destructive data-invalid:outline-destructive data-readonly:cursor-default data-[fit-content]:inline-flex data-[fit-content]:w-auto data-[fit-content]:min-w-control-md data-[fit-content]:gap-2 data-[fit-content]:px-3 data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class)} {...others}>
+    return <ColorPicker.Trigger class={cn('group/trigger box-border grid size-control-md shrink-0 place-items-center overflow-hidden rounded-md border border-border bg-background p-1 text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color] duration-200 ease-in-out select-none focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-invalid:border-destructive data-invalid:outline-destructive data-readonly:cursor-default data-[fit-content]:inline-flex data-[fit-content]:w-auto data-[fit-content]:min-w-control-md data-[fit-content]:gap-2 data-[fit-content]:px-3 data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class)} {...others} data-slot="color-picker-trigger">
       {resolvedChildren() ?? <>
           <ColorPicker.TransparencyGrid data-slot="color-picker-transparency-grid" class="col-start-1 row-start-1 size-full rounded-[inherit] group-data-[fit-content]/trigger:col-auto group-data-[fit-content]/trigger:row-auto group-data-[fit-content]/trigger:size-4 group-data-[fit-content]/trigger:shrink-0"/>
           <ColorPicker.ValueSwatch data-slot="color-picker-value-swatch" class="z-1 col-start-1 row-start-1 size-full rounded-[inherit] group-data-[fit-content]/trigger:col-auto group-data-[fit-content]/trigger:row-auto group-data-[fit-content]/trigger:size-4 group-data-[fit-content]/trigger:shrink-0"/>
@@ -65,14 +65,14 @@ function ColorPickerPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <ColorPicker.Positioner data-slot="color-picker-positioner" class={cn('z-[var(--z-index)] outline-0', local.class)} {...others}/>
+      <ColorPicker.Positioner class={cn('z-[var(--z-index)] outline-0', local.class)} {...others} data-slot="color-picker-positioner"/>
     </OverlayPortal>;
 }
 function ColorPickerContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.Content data-slot="color-picker-content" class={cn('z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] box-border flex max-h-[min(32rem,var(--available-height))] w-64 max-w-[var(--available-width)] origin-[var(--transform-origin)] flex-col gap-3 overflow-auto overscroll-contain rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-0 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 <ColorPicker.Content class={cn('z-[calc(var(--moduix-z-popup)+var(--layer-index,0))] box-border flex max-h-[min(32rem,var(--available-height))] w-64 max-w-[var(--available-width)] origin-[var(--transform-origin)] flex-col gap-3 overflow-auto overscroll-contain rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-0 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="color-picker-content"/>;
 }
 function ColorPickerArea(props) {
     const [local, others] = splitProps(props, [
@@ -80,7 +80,7 @@ function ColorPickerArea(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.Area data-slot="color-picker-area" class={cn('relative box-border h-40 w-full touch-none overflow-hidden rounded-md shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)] select-none data-disabled:cursor-default data-readonly:cursor-default', local.class)} {...others}>
+    return <ColorPicker.Area class={cn('relative box-border h-40 w-full touch-none overflow-hidden rounded-md shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)] select-none data-disabled:cursor-default data-readonly:cursor-default', local.class)} {...others} data-slot="color-picker-area">
       {resolvedChildren() ?? <>
           <ColorPicker.AreaBackground data-slot="color-picker-area-background" class="size-full rounded-[inherit]"/>
           <ColorPicker.AreaThumb data-slot="color-picker-area-thumb" class="box-border size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background shadow-[0_0_0_4px_rgb(0_0_0_/_18%),0_2px_4px_0_rgb(0_0_0_/_10%),0_1px_2px_-1px_rgb(0_0_0_/_10%)] ring-2 ring-background outline-0 focus-visible:ring-ring data-disabled:pointer-events-none"/>
@@ -91,13 +91,13 @@ function ColorPickerAreaBackground(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.AreaBackground data-slot="color-picker-area-background" class={cn('size-full rounded-[inherit]', local.class)} {...others}/>;
+    return <ColorPicker.AreaBackground class={cn('size-full rounded-[inherit]', local.class)} {...others} data-slot="color-picker-area-background"/>;
 }
 function ColorPickerAreaThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.AreaThumb data-slot="color-picker-area-thumb" class={cn('box-border size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background shadow-[0_0_0_4px_rgb(0_0_0_/_18%),0_2px_4px_0_rgb(0_0_0_/_10%),0_1px_2px_-1px_rgb(0_0_0_/_10%)] ring-2 ring-background outline-0 focus-visible:ring-ring data-disabled:pointer-events-none', local.class)} {...others}/>;
+    return <ColorPicker.AreaThumb class={cn('box-border size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background shadow-[0_0_0_4px_rgb(0_0_0_/_18%),0_2px_4px_0_rgb(0_0_0_/_10%),0_1px_2px_-1px_rgb(0_0_0_/_10%)] ring-2 ring-background outline-0 focus-visible:ring-ring data-disabled:pointer-events-none', local.class)} {...others} data-slot="color-picker-area-thumb"/>;
 }
 function ColorPickerChannelSlider(props) {
     const [local, others] = splitProps(props, [
@@ -106,7 +106,7 @@ function ColorPickerChannelSlider(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.ChannelSlider channel={local.channel} data-slot="color-picker-channel-slider" class={cn('relative box-border flex h-3 touch-none items-center rounded-full select-none data-[orientation=vertical]:h-40 data-[orientation=vertical]:w-3 data-[orientation=vertical]:items-stretch data-[orientation=vertical]:justify-center', local.class)} {...others}>
+    return <ColorPicker.ChannelSlider channel={local.channel} class={cn('relative box-border flex h-3 touch-none items-center rounded-full select-none data-[orientation=vertical]:h-40 data-[orientation=vertical]:w-3 data-[orientation=vertical]:items-stretch data-[orientation=vertical]:justify-center', local.class)} {...others} data-slot="color-picker-channel-slider">
       {resolvedChildren() ?? <>
           {'alpha' === local.channel && <ColorPicker.TransparencyGrid data-slot="color-picker-transparency-grid" class="size-full rounded-[inherit]"/>}
           <ColorPicker.ChannelSliderTrack data-slot="color-picker-channel-slider-track" class="h-3 w-full rounded-[inherit] shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)] data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3"/>
@@ -118,7 +118,7 @@ function ColorPickerSliders(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <div data-slot="color-picker-sliders" class={cn('flex min-w-0 flex-1 flex-col gap-2', local.class)} {...others}>
+    return <div class={cn('flex min-w-0 flex-1 flex-col gap-2', local.class)} {...others} data-slot="color-picker-sliders">
       <ColorPickerChannelSlider channel="hue"/>
       <ColorPickerChannelSlider channel="alpha"/>
     </div>;
@@ -127,31 +127,31 @@ function ColorPickerChannelSliderTrack(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ChannelSliderTrack data-slot="color-picker-channel-slider-track" class={cn('h-3 w-full rounded-[inherit] shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)] data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3', local.class)} {...others}/>;
+    return <ColorPicker.ChannelSliderTrack class={cn('h-3 w-full rounded-[inherit] shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)] data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3', local.class)} {...others} data-slot="color-picker-channel-slider-track"/>;
 }
 function ColorPickerChannelSliderThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ChannelSliderThumb data-slot="color-picker-channel-slider-thumb" class={cn('box-border size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background shadow-[0_0_0_4px_rgb(0_0_0_/_18%),0_2px_4px_0_rgb(0_0_0_/_10%),0_1px_2px_-1px_rgb(0_0_0_/_10%)] ring-2 ring-background outline-0 focus-visible:ring-ring data-disabled:pointer-events-none', local.class)} {...others}/>;
+    return <ColorPicker.ChannelSliderThumb class={cn('box-border size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background shadow-[0_0_0_4px_rgb(0_0_0_/_18%),0_2px_4px_0_rgb(0_0_0_/_10%),0_1px_2px_-1px_rgb(0_0_0_/_10%)] ring-2 ring-background outline-0 focus-visible:ring-ring data-disabled:pointer-events-none', local.class)} {...others} data-slot="color-picker-channel-slider-thumb"/>;
 }
 function ColorPickerChannelSliderLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ChannelSliderLabel data-slot="color-picker-channel-slider-label" class={cn('text-sm font-medium text-foreground', local.class)} {...others}/>;
+    return <ColorPicker.ChannelSliderLabel class={cn('text-sm font-medium text-foreground', local.class)} {...others} data-slot="color-picker-channel-slider-label"/>;
 }
 function ColorPickerChannelSliderValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ChannelSliderValueText data-slot="color-picker-channel-slider-value-text" class={cn('text-sm text-muted-foreground', local.class)} {...others}/>;
+    return <ColorPicker.ChannelSliderValueText class={cn('text-sm text-muted-foreground', local.class)} {...others} data-slot="color-picker-channel-slider-value-text"/>;
 }
 function ColorPickerChannelInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ChannelInput data-slot="color-picker-channel-input" class={cn('box-border h-control-md w-full min-w-0 [appearance:textfield] rounded-md border border-border bg-background px-3 text-sm text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring data-disabled:opacity-50 data-invalid:border-destructive data-invalid:outline-destructive data-[channel=alpha]:w-16 data-[channel=alpha]:flex-none motion-reduce:transition-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none', local.class)} {...others}/>;
+    return <ColorPicker.ChannelInput class={cn('box-border h-control-md w-full min-w-0 [appearance:textfield] rounded-md border border-border bg-background px-3 text-sm text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring data-disabled:opacity-50 data-invalid:border-destructive data-invalid:outline-destructive data-[channel=alpha]:w-16 data-[channel=alpha]:flex-none motion-reduce:transition-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none', local.class)} {...others} data-slot="color-picker-channel-input"/>;
 }
 function ColorPickerEyeDropperTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -159,7 +159,7 @@ function ColorPickerEyeDropperTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.EyeDropperTrigger data-slot="color-picker-eye-dropper-trigger" class={cn('box-border inline-flex h-control-md min-w-control-md shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-transparent px-2 text-sm text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,color] duration-200 ease-in-out focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-focus:border-ring data-focus:outline-ring data-readonly:cursor-default motion-reduce:transition-none [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:bg-muted [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:text-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others}>
+    return <ColorPicker.EyeDropperTrigger class={cn('box-border inline-flex h-control-md min-w-control-md shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-transparent px-2 text-sm text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,color] duration-200 ease-in-out focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-focus:border-ring data-focus:outline-ring data-readonly:cursor-default motion-reduce:transition-none [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:bg-muted [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:text-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others} data-slot="color-picker-eye-dropper-trigger">
       {resolvedChildren() ?? <PipetteIcon/>}
     </ColorPicker.EyeDropperTrigger>;
 }
@@ -168,7 +168,7 @@ function ColorPickerFormatSelect(props) {
         'class'
     ]);
     return <span class="group/format-select relative inline-grid w-fit max-w-full min-w-0 shrink-0">
-      <ColorPicker.FormatSelect data-slot="color-picker-format-select" class={cn('peer/format-select box-border h-control-md w-auto min-w-0 rounded-md border border-border bg-background px-3 pe-8 text-sm text-foreground uppercase outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring disabled:cursor-default data-disabled:cursor-default data-disabled:opacity-50 data-invalid:border-destructive data-invalid:outline-destructive forced-colors:appearance-auto forced-colors:pe-3', local.class)} {...others}/>
+      <ColorPicker.FormatSelect class={cn('peer/format-select box-border h-control-md w-auto min-w-0 rounded-md border border-border bg-background px-3 pe-8 text-sm text-foreground uppercase outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color] duration-200 ease-in-out focus:border-ring focus:outline-ring disabled:cursor-default data-disabled:cursor-default data-disabled:opacity-50 data-invalid:border-destructive data-invalid:outline-destructive forced-colors:appearance-auto forced-colors:pe-3', local.class)} {...others} data-slot="color-picker-format-select"/>
       <span aria-hidden="true" class="pointer-events-none absolute top-1/2 right-3 inline-flex size-4 -translate-y-1/2 items-center justify-center rounded-sm bg-transparent leading-none text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out peer-disabled/format-select:opacity-50 peer-data-disabled/format-select:opacity-50 peer-[:not([disabled]):hover]/format-select:bg-muted peer-[:not([disabled]):hover]/format-select:text-foreground forced-colors:hidden [&>svg]:block [&>svg]:size-full">
         <ChevronDownIcon/>
       </span>
@@ -178,13 +178,13 @@ function ColorPickerFormatTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.FormatTrigger data-slot="color-picker-format-trigger" class={cn('box-border inline-flex h-control-md min-w-control-md shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-transparent px-2 text-sm text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,color] duration-200 ease-in-out focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-focus:border-ring data-focus:outline-ring data-readonly:cursor-default motion-reduce:transition-none [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:bg-muted [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:text-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others}/>;
+    return <ColorPicker.FormatTrigger class={cn('box-border inline-flex h-control-md min-w-control-md shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-transparent px-2 text-sm text-muted-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,color] duration-200 ease-in-out focus-visible:border-ring focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default data-focus:border-ring data-focus:outline-ring data-readonly:cursor-default motion-reduce:transition-none [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:bg-muted [&:not([disabled]):not([data-disabled]):not([data-readonly]):hover]:text-foreground [&>svg]:size-4 [&>svg]:shrink-0', local.class)} {...others} data-slot="color-picker-format-trigger"/>;
 }
 function ColorPickerSwatchGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.SwatchGroup data-slot="color-picker-swatch-group" class={cn('flex flex-wrap gap-2', local.class)} {...others}/>;
+    return <ColorPicker.SwatchGroup class={cn('flex flex-wrap gap-2', local.class)} {...others} data-slot="color-picker-swatch-group"/>;
 }
 function ColorPickerSwatchTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -193,7 +193,7 @@ function ColorPickerSwatchTrigger(props) {
         'value'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.SwatchTrigger data-slot="color-picker-swatch-trigger" class={cn('group/swatch inline-flex cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 outline-0 focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-default data-disabled:opacity-50', local.class)} value={local.value} {...others}>
+    return <ColorPicker.SwatchTrigger class={cn('group/swatch inline-flex cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 outline-0 focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-default data-disabled:opacity-50', local.class)} value={local.value} {...others} data-slot="color-picker-swatch-trigger">
       {resolvedChildren() ?? <ColorPicker.Swatch data-slot="color-picker-swatch" class="relative grid size-control-sm shrink-0 place-items-center overflow-hidden rounded-[inherit] shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)]" value={local.value}>
           <ColorPicker.SwatchIndicator data-slot="color-picker-swatch-indicator" class="pointer-events-none absolute inset-0 hidden items-center justify-center text-white [filter:drop-shadow(0_1px_1px_rgb(0_0_0_/_45%))] group-data-[state=checked]/swatch:inline-flex data-[state=checked]:inline-flex [&>svg]:size-4">
             <CheckIcon/>
@@ -205,7 +205,7 @@ function ColorPickerSwatch(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.Swatch data-slot="color-picker-swatch" class={cn('relative grid size-control-sm shrink-0 place-items-center overflow-hidden rounded-[inherit] shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)]', local.class)} {...others}/>;
+    return <ColorPicker.Swatch class={cn('relative grid size-control-sm shrink-0 place-items-center overflow-hidden rounded-[inherit] shadow-[inset_0_0_0_1px_color-mix(in_oklab,black_14%,transparent)]', local.class)} {...others} data-slot="color-picker-swatch"/>;
 }
 function ColorPickerSwatchIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -213,7 +213,7 @@ function ColorPickerSwatchIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ColorPicker.SwatchIndicator data-slot="color-picker-swatch-indicator" class={cn('pointer-events-none absolute inset-0 hidden items-center justify-center text-white [filter:drop-shadow(0_1px_1px_rgb(0_0_0_/_45%))] data-[state=checked]:inline-flex [&>svg]:size-4', local.class)} {...others}>
+    return <ColorPicker.SwatchIndicator class={cn('pointer-events-none absolute inset-0 hidden items-center justify-center text-white [filter:drop-shadow(0_1px_1px_rgb(0_0_0_/_45%))] data-[state=checked]:inline-flex [&>svg]:size-4', local.class)} {...others} data-slot="color-picker-swatch-indicator">
       {resolvedChildren() ?? <CheckIcon/>}
     </ColorPicker.SwatchIndicator>;
 }
@@ -221,25 +221,25 @@ function ColorPickerTransparencyGrid(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.TransparencyGrid data-slot="color-picker-transparency-grid" class={cn('col-start-1 row-start-1 size-full rounded-[inherit] group-data-[fit-content]/trigger:col-auto group-data-[fit-content]/trigger:row-auto group-data-[fit-content]/trigger:size-4 group-data-[fit-content]/trigger:shrink-0', local.class)} {...others}/>;
+    return <ColorPicker.TransparencyGrid class={cn('col-start-1 row-start-1 size-full rounded-[inherit] group-data-[fit-content]/trigger:col-auto group-data-[fit-content]/trigger:row-auto group-data-[fit-content]/trigger:size-4 group-data-[fit-content]/trigger:shrink-0', local.class)} {...others} data-slot="color-picker-transparency-grid"/>;
 }
 function ColorPickerValueSwatch(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ValueSwatch data-slot="color-picker-value-swatch" class={cn('z-1 col-start-1 row-start-1 size-full rounded-[inherit] group-data-[fit-content]/trigger:col-auto group-data-[fit-content]/trigger:row-auto group-data-[fit-content]/trigger:size-4 group-data-[fit-content]/trigger:shrink-0', local.class)} {...others}/>;
+    return <ColorPicker.ValueSwatch class={cn('z-1 col-start-1 row-start-1 size-full rounded-[inherit] group-data-[fit-content]/trigger:col-auto group-data-[fit-content]/trigger:row-auto group-data-[fit-content]/trigger:size-4 group-data-[fit-content]/trigger:shrink-0', local.class)} {...others} data-slot="color-picker-value-swatch"/>;
 }
 function ColorPickerValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.ValueText data-slot="color-picker-value-text" class={cn('min-w-0 text-sm text-foreground', local.class)} {...others}/>;
+    return <ColorPicker.ValueText class={cn('min-w-0 text-sm text-foreground', local.class)} {...others} data-slot="color-picker-value-text"/>;
 }
 function ColorPickerView(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ColorPicker.View data-slot="color-picker-view" class={cn('flex min-w-0 flex-col gap-2 [&[hidden]:not([hidden="until-found"])]:hidden', local.class)} {...others}/>;
+    return <ColorPicker.View class={cn('flex min-w-0 flex-col gap-2 [&[hidden]:not([hidden="until-found"])]:hidden', local.class)} {...others} data-slot="color-picker-view"/>;
 }
 const ColorPicker_ColorPicker = Object.assign(ColorPickerRoot, {
     Root: ColorPickerRoot,

package/dist/components/combobox/Combobox.js

@@ -28,7 +28,6 @@ const Combobox_ComboboxRoot = function(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "combobox-root",
                 get ["class"] () {
                     return cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class);
                 },
@@ -39,6 +38,7 @@ const Combobox_ComboboxRoot = function(props) {
                     return local.unmountOnExit ?? true;
                 }
             }, others, {
+                "data-slot": "combobox-root",
                 get children () {
                     return local.children;
                 }
@@ -68,7 +68,6 @@ const Combobox_ComboboxRootProvider = function(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "combobox-root-provider",
                 get ["class"] () {
                     return cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', local.class);
                 },
@@ -79,6 +78,7 @@ const Combobox_ComboboxRootProvider = function(props) {
                     return local.unmountOnExit ?? true;
                 }
             }, others, {
+                "data-slot": "combobox-root-provider",
                 get children () {
                     return local.children;
                 }
@@ -91,22 +91,24 @@ function ComboboxLabel(props) {
         'class'
     ]);
     return createComponent(Combobox.Label, mergeProps({
-        "data-slot": "combobox-label",
         get ["class"] () {
             return cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "combobox-label"
+    }));
 }
 function ComboboxControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.Control, mergeProps({
-        "data-slot": "combobox-control",
         get ["class"] () {
             return cn('group/combobox-control relative flex w-full min-w-0 items-center rounded-md border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out data-disabled:opacity-50 data-focus:border-ring data-focus:outline-ring data-invalid:border-destructive data-invalid:outline-destructive data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "combobox-control"
+    }));
 }
 function ComboboxInput(props) {
     const [local, others] = splitProps(props, [
@@ -117,11 +119,12 @@ function ComboboxInput(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "combobox-input",
         get ["class"] () {
             return cn(!local.asChild && 'm-0 box-border h-control-md w-full min-w-0 rounded-[inherit] border-0 bg-transparent px-3.5 text-inherit outline-0 [font:inherit] group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:pe-[4.375rem] group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-11 group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-[4.375rem] placeholder:text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "combobox-input"
+    }));
 }
 function ComboboxClearTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -143,9 +146,9 @@ function ComboboxClearTrigger(props) {
         get ["aria-labelledby"] () {
             return local['aria-labelledby'];
         },
-        "data-slot": "combobox-clear-trigger",
         class: triggerClass
     }, others, {
+        "data-slot": "combobox-clear-trigger",
         get children () {
             return local.children;
         }
@@ -165,9 +168,10 @@ function ComboboxClearTrigger(props) {
                 }
             }));
         },
-        "data-slot": "combobox-clear-trigger",
         class: triggerClass
-    }, others));
+    }, others, {
+        "data-slot": "combobox-clear-trigger"
+    }));
 }
 function ComboboxTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -176,11 +180,11 @@ function ComboboxTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Combobox.Trigger, mergeProps({
-        "data-slot": "combobox-trigger",
         get ["class"] () {
             return cn('absolute end-2 top-1/2 m-0 box-border inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 [line-height:0] text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default 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": "combobox-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(ChevronUpDownIcon, {});
         }
@@ -193,11 +197,12 @@ function ComboboxPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Combobox.Positioner, mergeProps({
-                "data-slot": "combobox-positioner",
                 get ["class"] () {
                     return cn('z-[var(--z-index)] outline-0', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "combobox-positioner"
+            }));
         }
     });
 }
@@ -206,88 +211,96 @@ function ComboboxContent(props) {
         'class'
     ]);
     return createComponent(Combobox.Content, mergeProps({
-        "data-slot": "combobox-content",
         get ["class"] () {
             return cn('z-[calc(60+var(--layer-index,0))] box-border flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg outline-0 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));
+    }, others, {
+        "data-slot": "combobox-content"
+    }));
 }
 function ComboboxEmpty(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.Empty, mergeProps({
-        "data-slot": "combobox-empty",
         get ["class"] () {
             return cn('px-4 py-1 text-sm text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "combobox-empty"
+    }));
 }
 function ComboboxStatus(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "combobox-status",
         get ["class"] () {
             return cn('px-4 py-1 text-sm text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "combobox-status"
+    }));
 }
 function ComboboxList(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.List, mergeProps({
-        "data-slot": "combobox-list",
         get ["class"] () {
             return cn('flex min-h-0 flex-col outline-0 data-empty:hidden', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "combobox-list"
+    }));
 }
 function ComboboxItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.ItemGroup, mergeProps({
-        "data-slot": "combobox-item-group",
         get ["class"] () {
             return cn('flex flex-col [&+&]:mt-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "combobox-item-group"
+    }));
 }
 function ComboboxItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.ItemGroupLabel, mergeProps({
-        "data-slot": "combobox-item-group-label",
         get ["class"] () {
             return cn('sticky -top-1 z-1 bg-popover px-2.5 py-1 text-xs font-normal text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "combobox-item-group-label"
+    }));
 }
 function ComboboxItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.Item, mergeProps({
-        "data-slot": "combobox-item",
         get ["class"] () {
             return cn('relative mx-1 box-border flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm border-0 bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=checked]:text-popover-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "combobox-item"
+    }));
 }
 function ComboboxItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.ItemText, mergeProps({
-        "data-slot": "combobox-item-text",
         get ["class"] () {
             return cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "combobox-item-text"
+    }));
 }
 function ComboboxItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -296,11 +309,11 @@ function ComboboxItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Combobox.ItemIndicator, mergeProps({
-        "data-slot": "combobox-item-indicator",
         get ["class"] () {
             return cn('inline-flex size-3 shrink-0 items-center justify-center [&>svg]:size-full', local.class);
         }
     }, others, {
+        "data-slot": "combobox-item-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }