@moduix/react-tailwind 1.0.0 → 1.1.0

package/dist/components/chart/Chart.js

@@ -35,11 +35,11 @@ function withTooltipStyles(definition) {
 const Chart_ChartRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.figure, {
         ref: ref,
+        className: cn('grid w-full min-w-0 gap-5 rounded-lg border border-border bg-card p-5 text-card-foreground shadow-sm', className),
+        ...props,
         "data-scope": "chart",
         "data-part": "root",
-        "data-slot": "chart-root",
-        className: cn('grid w-full min-w-0 gap-5 rounded-lg border border-border bg-card p-5 text-card-foreground shadow-sm', className),
-        ...props
+        "data-slot": "chart-root"
     });
 });
 const renderDefaultTooltipBody = ({ content })=>{
@@ -110,53 +110,53 @@ const Chart_ChartPlot = function({ className, definition, motion = true, renderT
 const Chart_ChartHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.figcaption, {
         ref: ref,
+        className: cn('grid gap-1', className),
+        ...props,
         "data-scope": "chart",
         "data-part": "header",
-        "data-slot": "chart-header",
-        className: cn('grid gap-1', className),
-        ...props
+        "data-slot": "chart-header"
     });
 });
 const Chart_ChartTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.h3, {
         ref: ref,
+        className: cn('text-lg font-semibold', className),
+        ...props,
         "data-scope": "chart",
         "data-part": "title",
-        "data-slot": "chart-title",
-        className: cn('text-lg font-semibold', className),
-        ...props
+        "data-slot": "chart-title"
     });
 });
 const Chart_ChartDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.p, {
         ref: ref,
+        className: cn('text-sm text-muted-foreground', className),
+        ...props,
         "data-scope": "chart",
         "data-part": "description",
-        "data-slot": "chart-description",
-        className: cn('text-sm text-muted-foreground', className),
-        ...props
+        "data-slot": "chart-description"
     });
 });
 const Chart_ChartLegend = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.ul, {
         ref: ref,
+        className: cn('flex flex-wrap gap-3', className),
+        ...props,
         "data-scope": "chart",
         "data-part": "legend",
-        "data-slot": "chart-legend",
-        className: cn('flex flex-wrap gap-3', className),
-        ...props
+        "data-slot": "chart-legend"
     });
 });
 const Chart_ChartLegendItem = /*#__PURE__*/ forwardRef(function({ asChild, children, className, color, style, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.li, {
         ref: ref,
         asChild: asChild,
-        "data-scope": "chart",
-        "data-part": "legend-item",
-        "data-slot": "chart-legend-item",
         className: cn('inline-flex items-center gap-2 text-sm text-muted-foreground', className),
         style: style,
         ...props,
+        "data-scope": "chart",
+        "data-part": "legend-item",
+        "data-slot": "chart-legend-item",
         children: asChild ? children : /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx("span", {

package/dist/components/checkbox/Checkbox.js

@@ -7,29 +7,29 @@ import { CheckIcon, IndeterminateIcon } from "../../internal/icons/ui/index.js";
 const Checkbox_CheckboxRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.Root, {
         ref: ref,
-        "data-slot": "checkbox-root",
-        "data-size": size,
         className: cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', className),
-        ...props
+        ...props,
+        "data-size": size,
+        "data-slot": "checkbox-root"
     });
 });
 const Checkbox_CheckboxRootProvider = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.RootProvider, {
         ref: ref,
-        "data-slot": "checkbox-root-provider",
-        "data-size": size,
         className: cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', className),
-        ...props
+        ...props,
+        "data-size": size,
+        "data-slot": "checkbox-root-provider"
     });
 });
 const Checkbox_CheckboxIndicator = /*#__PURE__*/ forwardRef(function({ className, children, indeterminate, ...props }, ref) {
     const slot = indeterminate ? 'checkbox-indicator-indeterminate-icon' : 'checkbox-indicator-checked-icon';
     return /*#__PURE__*/ jsx(Checkbox.Indicator, {
         ref: ref,
-        "data-slot": "checkbox-indicator",
         className: cn('inline-flex h-full w-full items-center justify-center text-inherit', className),
         indeterminate: indeterminate,
         ...props,
+        "data-slot": "checkbox-indicator",
         children: children ?? /*#__PURE__*/ jsx("span", {
             "aria-hidden": "true",
             "data-slot": slot,
@@ -41,9 +41,9 @@ const Checkbox_CheckboxIndicator = /*#__PURE__*/ forwardRef(function({ className
 const Checkbox_CheckboxControl = /*#__PURE__*/ forwardRef(function({ children, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.Control, {
         ref: ref,
-        "data-slot": "checkbox-control",
         className: cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent box-border inline-flex size-5 shrink-0 items-center justify-center rounded-xs border border-border bg-background p-0 leading-none text-primary-foreground transition-[background-color,border-color,color,opacity] duration-200 select-none group-data-[size=lg]/checkbox:size-control-xs group-data-[size=sm]/checkbox:size-4 group-data-[size=xl]/checkbox:size-7 group-data-[size=xs]/checkbox:size-3.5 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:data-focus-visible:outline-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-invalid:data-[state=checked]:border-destructive data-invalid:data-[state=checked]:bg-destructive data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-invalid:data-[state=indeterminate]:border-destructive data-invalid:data-[state=indeterminate]:bg-destructive motion-reduce:transition-none", className),
         ...props,
+        "data-slot": "checkbox-control",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(Checkbox_CheckboxIndicator, {}),
@@ -57,17 +57,17 @@ const Checkbox_CheckboxControl = /*#__PURE__*/ forwardRef(function({ children, c
 const Checkbox_CheckboxLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.Label, {
         ref: ref,
-        "data-slot": "checkbox-label",
         className: cn('text-sm leading-5 font-medium text-inherit', className),
-        ...props
+        ...props,
+        "data-slot": "checkbox-label"
     });
 });
 const Checkbox_CheckboxGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.Group, {
         ref: ref,
-        "data-slot": "checkbox-group",
         className: cn('flex flex-col gap-2 text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "checkbox-group"
     });
 });
 const Checkbox_Checkbox = Object.assign(Checkbox_CheckboxRoot, {

package/dist/components/clipboard/Clipboard.js

@@ -7,55 +7,54 @@ import { CheckIcon, CopyIcon } from "../../internal/icons/ui/index.js";
 const Clipboard_ClipboardRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Root, {
         ref: ref,
-        "data-slot": "clipboard-root",
         className: cn('flex w-full flex-col gap-1.5 text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "clipboard-root"
     });
 });
 const Clipboard_ClipboardRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.RootProvider, {
         ref: ref,
-        "data-slot": "clipboard-root-provider",
         className: cn('flex w-full flex-col gap-1.5 text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "clipboard-root-provider"
     });
 });
 const Clipboard_ClipboardLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Label, {
         ref: ref,
-        "data-slot": "clipboard-label",
         className: cn('text-sm leading-5 font-medium', className),
-        ...props
+        ...props,
+        "data-slot": "clipboard-label"
     });
 });
 const Clipboard_ClipboardControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Control, {
         ref: ref,
-        "data-slot": "clipboard-control",
         className: cn('flex w-full items-center gap-2', className),
-        ...props
+        ...props,
+        "data-slot": "clipboard-control"
     });
 });
 const Clipboard_ClipboardInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Input, {
         ref: ref,
-        "data-slot": "clipboard-input",
         className: cn('box-border min-h-control-md w-full min-w-0 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground outline-1 -outline-offset-1 outline-transparent transition duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50', className),
-        ...props
+        ...props,
+        "data-slot": "clipboard-input"
     });
 });
 const Clipboard_ClipboardTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Trigger, {
         ref: ref,
-        "data-slot": "clipboard-trigger",
         className: cn('box-border inline-flex min-h-control-md shrink-0 cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&:active:not(:disabled):not([data-disabled])]:opacity-[0.94] motion-safe:[&:active:not(:disabled):not([data-disabled])]:translate-y-px motion-safe:[&:active:not(:disabled):not([data-disabled])]:scale-[0.985] [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-accent', className),
-        ...props
+        ...props,
+        "data-slot": "clipboard-trigger"
     });
 });
 const Clipboard_ClipboardIndicator = /*#__PURE__*/ forwardRef(function({ className, children, copied, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Indicator, {
         ref: ref,
-        "data-slot": "clipboard-indicator",
         className: cn('inline-flex shrink-0 items-center justify-center', className),
         copied: copied ?? /*#__PURE__*/ jsx("span", {
             "aria-hidden": "true",
@@ -64,6 +63,7 @@ const Clipboard_ClipboardIndicator = /*#__PURE__*/ forwardRef(function({ classNa
             children: /*#__PURE__*/ jsx(CheckIcon, {})
         }),
         ...props,
+        "data-slot": "clipboard-indicator",
         children: children ?? /*#__PURE__*/ jsx("span", {
             "aria-hidden": "true",
             "data-slot": "clipboard-indicator-idle-icon",
@@ -75,17 +75,18 @@ const Clipboard_ClipboardIndicator = /*#__PURE__*/ forwardRef(function({ classNa
 const Clipboard_ClipboardValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.ValueText, {
         ref: ref,
-        "data-slot": "clipboard-value-text",
         className: cn('min-w-0 overflow-hidden text-ellipsis whitespace-nowrap', className),
-        ...props
+        ...props,
+        "data-slot": "clipboard-value-text"
     });
 });
-const Clipboard_ClipboardCopyText = /*#__PURE__*/ forwardRef(function({ copied = 'Copied', children = 'Copy', ...props }, ref) {
-    return /*#__PURE__*/ jsx(Clipboard_ClipboardIndicator, {
+const Clipboard_ClipboardCopyText = /*#__PURE__*/ forwardRef(function({ className, copied = 'Copied', children = 'Copy', ...props }, ref) {
+    return /*#__PURE__*/ jsx(Clipboard.Indicator, {
         ref: ref,
-        "data-slot": "clipboard-copy-text",
+        className: cn('inline-flex shrink-0 items-center justify-center', className),
         copied: copied,
         ...props,
+        "data-slot": "clipboard-copy-text",
         children: children
     });
 });

package/dist/components/collapsible/Collapsible.js

@@ -8,51 +8,51 @@ import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
 const Collapsible_CollapsibleRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.Root, {
         ref: ref,
-        "data-slot": "collapsible-root",
         className: cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "collapsible-root"
     });
 });
 const Collapsible_CollapsibleRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.RootProvider, {
         ref: ref,
-        "data-slot": "collapsible-root-provider",
         className: cn('box-border flex w-full max-w-full min-w-0 flex-col text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "collapsible-root-provider"
     });
 });
 const Collapsible_CollapsibleTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.Trigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "collapsible-trigger",
         className: cn(!asChild && 'box-border flex w-full cursor-pointer items-center justify-between gap-2 bg-transparent px-0 py-1 text-start text-sm outline-0 transition-colors duration-200 select-none focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:cursor-default disabled:opacity-50 data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none', className),
-        ...props
+        ...props,
+        "data-slot": "collapsible-trigger"
     });
 });
 const Collapsible_CollapsibleIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.Indicator, {
         ref: ref,
-        "data-slot": "collapsible-indicator",
         className: cn('inline-flex size-3 shrink-0 items-center justify-center transition-transform duration-200 data-disabled:opacity-50 data-[state=open]:rotate-180 motion-reduce:transition-none [&_svg]:size-full', className),
         ...props,
+        "data-slot": "collapsible-indicator",
         children: children ?? /*#__PURE__*/ jsx(ChevronDownIcon, {})
     });
 });
 const Collapsible_CollapsibleContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.Content, {
         ref: ref,
-        "data-slot": "collapsible-content",
         className: cn('box-border overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-moduix-collapsible-closed data-[has-collapsed-size]:data-[state=closed]:animate-moduix-collapsible-closed-partial data-[state=open]:animate-moduix-collapsible-open data-[has-collapsed-size]:data-[state=open]:animate-moduix-collapsible-open-partial motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
-        ...props
+        ...props,
+        "data-slot": "collapsible-content"
     });
 });
 const Collapsible_CollapsibleBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "collapsible-body",
         className: cn('grid min-w-0 gap-2', className),
-        ...props
+        ...props,
+        "data-slot": "collapsible-body"
     });
 });
 const Collapsible_Collapsible = Object.assign(Collapsible_CollapsibleRoot, {

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

@@ -12,11 +12,11 @@ const ColorPicker_ColorPickerRoot = /*#__PURE__*/ forwardRef(function({ asChild,
         children: /*#__PURE__*/ jsx(ColorPicker.Root, {
             ref: ref,
             asChild: asChild,
-            "data-slot": "color-picker-root",
             className: cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props,
+            "data-slot": "color-picker-root",
             children: children
         })
     });
@@ -28,11 +28,11 @@ const ColorPicker_ColorPickerRootProvider = /*#__PURE__*/ forwardRef(function({
         children: /*#__PURE__*/ jsx(ColorPicker.RootProvider, {
             ref: ref,
             asChild: asChild,
-            "data-slot": "color-picker-root-provider",
             className: cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props,
+            "data-slot": "color-picker-root-provider",
             children: children
         })
     });
@@ -40,25 +40,25 @@ const ColorPicker_ColorPickerRootProvider = /*#__PURE__*/ forwardRef(function({
 const ColorPicker_ColorPickerLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.Label, {
         ref: ref,
-        "data-slot": "color-picker-label",
         className: cn('inline-flex items-center text-sm font-medium text-foreground select-none', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-label"
     });
 });
 const ColorPicker_ColorPickerControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.Control, {
         ref: ref,
-        "data-slot": "color-picker-control",
         className: cn('flex min-w-0 items-center gap-2 data-disabled:opacity-50', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-control"
     });
 });
 const ColorPicker_ColorPickerTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.Trigger, {
         ref: ref,
-        "data-slot": "color-picker-trigger",
         className: 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', className),
         ...props,
+        "data-slot": "color-picker-trigger",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(ColorPicker.TransparencyGrid, {
@@ -77,26 +77,26 @@ const ColorPicker_ColorPickerPositioner = /*#__PURE__*/ forwardRef(function({ cl
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(ColorPicker.Positioner, {
             ref: ref,
-            "data-slot": "color-picker-positioner",
             className: cn('z-[var(--z-index)] outline-0', className),
-            ...props
+            ...props,
+            "data-slot": "color-picker-positioner"
         })
     });
 });
 const ColorPicker_ColorPickerContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.Content, {
         ref: ref,
-        "data-slot": "color-picker-content",
         className: 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]', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-content"
     });
 });
 const ColorPicker_ColorPickerArea = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.Area, {
         ref: ref,
-        "data-slot": "color-picker-area",
         className: 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', className),
         ...props,
+        "data-slot": "color-picker-area",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(ColorPicker.AreaBackground, {
@@ -114,26 +114,26 @@ const ColorPicker_ColorPickerArea = /*#__PURE__*/ forwardRef(function({ classNam
 const ColorPicker_ColorPickerAreaBackground = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.AreaBackground, {
         ref: ref,
-        "data-slot": "color-picker-area-background",
         className: cn('size-full rounded-[inherit]', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-area-background"
     });
 });
 const ColorPicker_ColorPickerAreaThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.AreaThumb, {
         ref: ref,
-        "data-slot": "color-picker-area-thumb",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-area-thumb"
     });
 });
 const ColorPicker_ColorPickerChannelSlider = /*#__PURE__*/ forwardRef(function({ className, children, channel, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.ChannelSlider, {
         ref: ref,
-        "data-slot": "color-picker-channel-slider",
         className: 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', className),
         channel: channel,
         ...props,
+        "data-slot": "color-picker-channel-slider",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 'alpha' === channel && /*#__PURE__*/ jsx(ColorPicker.TransparencyGrid, {
@@ -155,9 +155,9 @@ const ColorPicker_ColorPickerChannelSlider = /*#__PURE__*/ forwardRef(function({
 const ColorPicker_ColorPickerSliders = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
-        "data-slot": "color-picker-sliders",
         className: cn('flex min-w-0 flex-1 flex-col gap-2', className),
         ...props,
+        "data-slot": "color-picker-sliders",
         children: [
             /*#__PURE__*/ jsx(ColorPicker_ColorPickerChannelSlider, {
                 channel: "hue"
@@ -171,49 +171,49 @@ const ColorPicker_ColorPickerSliders = /*#__PURE__*/ forwardRef(function({ class
 const ColorPicker_ColorPickerChannelSliderTrack = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.ChannelSliderTrack, {
         ref: ref,
-        "data-slot": "color-picker-channel-slider-track",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-channel-slider-track"
     });
 });
 const ColorPicker_ColorPickerChannelSliderThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.ChannelSliderThumb, {
         ref: ref,
-        "data-slot": "color-picker-channel-slider-thumb",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-channel-slider-thumb"
     });
 });
 const ColorPicker_ColorPickerChannelSliderLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.ChannelSliderLabel, {
         ref: ref,
-        "data-slot": "color-picker-channel-slider-label",
         className: cn('text-sm font-medium text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-channel-slider-label"
     });
 });
 const ColorPicker_ColorPickerChannelSliderValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.ChannelSliderValueText, {
         ref: ref,
-        "data-slot": "color-picker-channel-slider-value-text",
         className: cn('text-sm text-muted-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-channel-slider-value-text"
     });
 });
 const ColorPicker_ColorPickerChannelInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.ChannelInput, {
         ref: ref,
-        "data-slot": "color-picker-channel-input",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-channel-input"
     });
 });
 const ColorPicker_ColorPickerEyeDropperTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.EyeDropperTrigger, {
         ref: ref,
-        "data-slot": "color-picker-eye-dropper-trigger",
         className: 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', className),
         ...props,
+        "data-slot": "color-picker-eye-dropper-trigger",
         children: children ?? /*#__PURE__*/ jsx(PipetteIcon, {})
     });
 });
@@ -223,9 +223,9 @@ const ColorPicker_ColorPickerFormatSelect = /*#__PURE__*/ forwardRef(function({
         children: [
             /*#__PURE__*/ jsx(ColorPicker.FormatSelect, {
                 ref: ref,
-                "data-slot": "color-picker-format-select",
                 className: 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', className),
-                ...props
+                ...props,
+                "data-slot": "color-picker-format-select"
             }),
             /*#__PURE__*/ jsx("span", {
                 "aria-hidden": "true",
@@ -238,26 +238,26 @@ const ColorPicker_ColorPickerFormatSelect = /*#__PURE__*/ forwardRef(function({
 const ColorPicker_ColorPickerFormatTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.FormatTrigger, {
         ref: ref,
-        "data-slot": "color-picker-format-trigger",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-format-trigger"
     });
 });
 const ColorPicker_ColorPickerSwatchGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.SwatchGroup, {
         ref: ref,
-        "data-slot": "color-picker-swatch-group",
         className: cn('flex flex-wrap gap-2', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-swatch-group"
     });
 });
 const ColorPicker_ColorPickerSwatchTrigger = /*#__PURE__*/ forwardRef(function({ className, children, value, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.SwatchTrigger, {
         ref: ref,
-        "data-slot": "color-picker-swatch-trigger",
         className: 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', className),
         value: value,
         ...props,
+        "data-slot": "color-picker-swatch-trigger",
         children: children ?? /*#__PURE__*/ jsx(ColorPicker.Swatch, {
             "data-slot": "color-picker-swatch",
             className: "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)]",
@@ -273,50 +273,50 @@ const ColorPicker_ColorPickerSwatchTrigger = /*#__PURE__*/ forwardRef(function({
 const ColorPicker_ColorPickerSwatch = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.Swatch, {
         ref: ref,
-        "data-slot": "color-picker-swatch",
         className: 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)]', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-swatch"
     });
 });
 const ColorPicker_ColorPickerSwatchIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.SwatchIndicator, {
         ref: ref,
-        "data-slot": "color-picker-swatch-indicator",
         className: 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', className),
         ...props,
+        "data-slot": "color-picker-swatch-indicator",
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
 });
 const ColorPicker_ColorPickerTransparencyGrid = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.TransparencyGrid, {
         ref: ref,
-        "data-slot": "color-picker-transparency-grid",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-transparency-grid"
     });
 });
 const ColorPicker_ColorPickerValueSwatch = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.ValueSwatch, {
         ref: ref,
-        "data-slot": "color-picker-value-swatch",
         className: 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', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-value-swatch"
     });
 });
 const ColorPicker_ColorPickerValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.ValueText, {
         ref: ref,
-        "data-slot": "color-picker-value-text",
         className: cn('min-w-0 text-sm text-foreground', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-value-text"
     });
 });
 const ColorPicker_ColorPickerView = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ColorPicker.View, {
         ref: ref,
-        "data-slot": "color-picker-view",
         className: cn('flex min-w-0 flex-col gap-2 [&[hidden]:not([hidden="until-found"])]:hidden', className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-view"
     });
 });
 const ColorPicker_ColorPicker = Object.assign(ColorPicker_ColorPickerRoot, {