@moduix/solid-tailwind 1.0.0 → 1.1.0

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

@@ -4,7 +4,7 @@ import { children, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { CheckIcon, ChevronDownIcon, PipetteIcon } from "../../internal/icons/ui/Icons.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
-var _tmpl$ = /*#__PURE__*/ template("<div data-slot=color-picker-sliders>"), _tmpl$2 = /*#__PURE__*/ template('<span class="group/format-select relative inline-grid w-fit max-w-full min-w-0 shrink-0"><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 [&amp;>svg]:block [&amp;>svg]:size-full">');
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template('<span class="group/format-select relative inline-grid w-fit max-w-full min-w-0 shrink-0"><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 [&amp;>svg]:block [&amp;>svg]:size-full">');
 function ColorPickerRoot(props) {
     const [local, others] = splitProps(props, [
         'asChild',
@@ -27,7 +27,6 @@ function ColorPickerRoot(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "color-picker-root",
                 get ["class"] () {
                     return cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
                 },
@@ -38,6 +37,7 @@ function ColorPickerRoot(props) {
                     return local.unmountOnExit ?? true;
                 }
             }, others, {
+                "data-slot": "color-picker-root",
                 get children () {
                     return local.children;
                 }
@@ -67,7 +67,6 @@ function ColorPickerRootProvider(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "color-picker-root-provider",
                 get ["class"] () {
                     return cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
                 },
@@ -78,6 +77,7 @@ function ColorPickerRootProvider(props) {
                     return local.unmountOnExit ?? true;
                 }
             }, others, {
+                "data-slot": "color-picker-root-provider",
                 get children () {
                     return local.children;
                 }
@@ -90,22 +90,24 @@ function ColorPickerLabel(props) {
         'class'
     ]);
     return createComponent(ColorPicker.Label, mergeProps({
-        "data-slot": "color-picker-label",
         get ["class"] () {
             return cn('inline-flex items-center text-sm font-medium text-foreground select-none', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-label"
+    }));
 }
 function ColorPickerControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.Control, mergeProps({
-        "data-slot": "color-picker-control",
         get ["class"] () {
             return cn('flex min-w-0 items-center gap-2 data-disabled:opacity-50', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-control"
+    }));
 }
 function ColorPickerTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -114,11 +116,11 @@ function ColorPickerTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(ColorPicker.Trigger, mergeProps({
-        "data-slot": "color-picker-trigger",
         get ["class"] () {
             return 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",
         get children () {
             return resolvedChildren() ?? [
                 createComponent(ColorPicker.TransparencyGrid, {
@@ -140,11 +142,12 @@ function ColorPickerPositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(ColorPicker.Positioner, mergeProps({
-                "data-slot": "color-picker-positioner",
                 get ["class"] () {
                     return cn('z-[var(--z-index)] outline-0', local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "color-picker-positioner"
+            }));
         }
     });
 }
@@ -153,11 +156,12 @@ function ColorPickerContent(props) {
         'class'
     ]);
     return createComponent(ColorPicker.Content, mergeProps({
-        "data-slot": "color-picker-content",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "color-picker-content"
+    }));
 }
 function ColorPickerArea(props) {
     const [local, others] = splitProps(props, [
@@ -166,11 +170,11 @@ function ColorPickerArea(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(ColorPicker.Area, mergeProps({
-        "data-slot": "color-picker-area",
         get ["class"] () {
             return 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",
         get children () {
             return resolvedChildren() ?? [
                 createComponent(ColorPicker.AreaBackground, {
@@ -190,22 +194,24 @@ function ColorPickerAreaBackground(props) {
         'class'
     ]);
     return createComponent(ColorPicker.AreaBackground, mergeProps({
-        "data-slot": "color-picker-area-background",
         get ["class"] () {
             return cn('size-full rounded-[inherit]', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-area-background"
+    }));
 }
 function ColorPickerAreaThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.AreaThumb, mergeProps({
-        "data-slot": "color-picker-area-thumb",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "color-picker-area-thumb"
+    }));
 }
 function ColorPickerChannelSlider(props) {
     const [local, others] = splitProps(props, [
@@ -218,11 +224,11 @@ function ColorPickerChannelSlider(props) {
         get channel () {
             return local.channel;
         },
-        "data-slot": "color-picker-channel-slider",
         get ["class"] () {
             return 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",
         get children () {
             return resolvedChildren() ?? [
                 memo(()=>memo(()=>'alpha' === local.channel)() && createComponent(ColorPicker.TransparencyGrid, {
@@ -251,7 +257,9 @@ function ColorPickerSliders(props) {
             get ["class"] () {
                 return cn('flex min-w-0 flex-1 flex-col gap-2', local.class);
             }
-        }, others), false, true);
+        }, others, {
+            "data-slot": "color-picker-sliders"
+        }), false, true);
         insert(_el$, createComponent(ColorPickerChannelSlider, {
             channel: "hue"
         }), null);
@@ -266,55 +274,60 @@ function ColorPickerChannelSliderTrack(props) {
         'class'
     ]);
     return createComponent(ColorPicker.ChannelSliderTrack, mergeProps({
-        "data-slot": "color-picker-channel-slider-track",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "color-picker-channel-slider-track"
+    }));
 }
 function ColorPickerChannelSliderThumb(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ChannelSliderThumb, mergeProps({
-        "data-slot": "color-picker-channel-slider-thumb",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "color-picker-channel-slider-thumb"
+    }));
 }
 function ColorPickerChannelSliderLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ChannelSliderLabel, mergeProps({
-        "data-slot": "color-picker-channel-slider-label",
         get ["class"] () {
             return cn('text-sm font-medium text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-channel-slider-label"
+    }));
 }
 function ColorPickerChannelSliderValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ChannelSliderValueText, mergeProps({
-        "data-slot": "color-picker-channel-slider-value-text",
         get ["class"] () {
             return cn('text-sm text-muted-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-channel-slider-value-text"
+    }));
 }
 function ColorPickerChannelInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ChannelInput, mergeProps({
-        "data-slot": "color-picker-channel-input",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "color-picker-channel-input"
+    }));
 }
 function ColorPickerEyeDropperTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -323,11 +336,11 @@ function ColorPickerEyeDropperTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(ColorPicker.EyeDropperTrigger, mergeProps({
-        "data-slot": "color-picker-eye-dropper-trigger",
         get ["class"] () {
             return 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",
         get children () {
             return resolvedChildren() ?? createComponent(PipetteIcon, {});
         }
@@ -340,11 +353,12 @@ function ColorPickerFormatSelect(props) {
     return (()=>{
         var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
         insert(_el$2, createComponent(ColorPicker.FormatSelect, mergeProps({
-            "data-slot": "color-picker-format-select",
             get ["class"] () {
                 return 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)), _el$3);
+        }, others, {
+            "data-slot": "color-picker-format-select"
+        })), _el$3);
         insert(_el$3, createComponent(ChevronDownIcon, {}));
         return _el$2;
     })();
@@ -354,22 +368,24 @@ function ColorPickerFormatTrigger(props) {
         'class'
     ]);
     return createComponent(ColorPicker.FormatTrigger, mergeProps({
-        "data-slot": "color-picker-format-trigger",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "color-picker-format-trigger"
+    }));
 }
 function ColorPickerSwatchGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.SwatchGroup, mergeProps({
-        "data-slot": "color-picker-swatch-group",
         get ["class"] () {
             return cn('flex flex-wrap gap-2', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-swatch-group"
+    }));
 }
 function ColorPickerSwatchTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -379,7 +395,6 @@ function ColorPickerSwatchTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(ColorPicker.SwatchTrigger, mergeProps({
-        "data-slot": "color-picker-swatch-trigger",
         get ["class"] () {
             return 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);
         },
@@ -387,6 +402,7 @@ function ColorPickerSwatchTrigger(props) {
             return local.value;
         }
     }, others, {
+        "data-slot": "color-picker-swatch-trigger",
         get children () {
             return resolvedChildren() ?? createComponent(ColorPicker.Swatch, {
                 "data-slot": "color-picker-swatch",
@@ -412,11 +428,12 @@ function ColorPickerSwatch(props) {
         'class'
     ]);
     return createComponent(ColorPicker.Swatch, mergeProps({
-        "data-slot": "color-picker-swatch",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "color-picker-swatch"
+    }));
 }
 function ColorPickerSwatchIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -425,11 +442,11 @@ function ColorPickerSwatchIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(ColorPicker.SwatchIndicator, mergeProps({
-        "data-slot": "color-picker-swatch-indicator",
         get ["class"] () {
             return 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",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }
@@ -440,44 +457,48 @@ function ColorPickerTransparencyGrid(props) {
         'class'
     ]);
     return createComponent(ColorPicker.TransparencyGrid, mergeProps({
-        "data-slot": "color-picker-transparency-grid",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "color-picker-transparency-grid"
+    }));
 }
 function ColorPickerValueSwatch(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ValueSwatch, mergeProps({
-        "data-slot": "color-picker-value-swatch",
         get ["class"] () {
             return 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));
+    }, others, {
+        "data-slot": "color-picker-value-swatch"
+    }));
 }
 function ColorPickerValueText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.ValueText, mergeProps({
-        "data-slot": "color-picker-value-text",
         get ["class"] () {
             return cn('min-w-0 text-sm text-foreground', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-value-text"
+    }));
 }
 function ColorPickerView(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ColorPicker.View, mergeProps({
-        "data-slot": "color-picker-view",
         get ["class"] () {
             return cn('flex min-w-0 flex-col gap-2 [&[hidden]:not([hidden="until-found"])]:hidden', local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "color-picker-view"
+    }));
 }
 const ColorPicker_ColorPicker = Object.assign(ColorPickerRoot, {
     Root: ColorPickerRoot,