@moduix/react 2.6.0 → 2.7.0

package/dist/components/checkbox/Checkbox.js

@@ -8,29 +8,29 @@ import Checkbox_module from "./Checkbox.module.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: clsx(Checkbox_module.root, 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: clsx(Checkbox_module.root, 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: clsx(Checkbox_module.indicator, className),
         indeterminate: indeterminate,
         ...props,
+        "data-slot": "checkbox-indicator",
         children: children ?? /*#__PURE__*/ jsx("span", {
             "aria-hidden": "true",
             "data-slot": slot,
@@ -42,9 +42,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: clsx(Checkbox_module.control, className),
         ...props,
+        "data-slot": "checkbox-control",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(Checkbox_CheckboxIndicator, {}),
@@ -58,17 +58,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: clsx(Checkbox_module.label, 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: clsx(Checkbox_module.group, className),
-        ...props
+        ...props,
+        "data-slot": "checkbox-group"
     });
 });
 const Checkbox_Checkbox = Object.assign(Checkbox_CheckboxRoot, {

package/dist/components/clipboard/Clipboard.js

@@ -8,55 +8,54 @@ import Clipboard_module from "./Clipboard.module.js";
 const Clipboard_ClipboardRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Root, {
         ref: ref,
-        "data-slot": "clipboard-root",
         className: clsx(Clipboard_module.root, 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: clsx(Clipboard_module.root, 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: clsx(Clipboard_module.label, 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: clsx(Clipboard_module.control, 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: clsx(Clipboard_module.input, 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: clsx(Clipboard_module.trigger, 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: clsx(Clipboard_module.indicator, className),
         copied: copied ?? /*#__PURE__*/ jsx("span", {
             "aria-hidden": "true",
@@ -65,6 +64,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",
@@ -76,17 +76,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: clsx(Clipboard_module.valueText, 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: clsx(Clipboard_module.indicator, className),
         copied: copied,
         ...props,
+        "data-slot": "clipboard-copy-text",
         children: children
     });
 });

package/dist/components/collapsible/Collapsible.js

@@ -9,51 +9,51 @@ import Collapsible_module from "./Collapsible.module.js";
 const Collapsible_CollapsibleRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.Root, {
         ref: ref,
-        "data-slot": "collapsible-root",
         className: clsx(Collapsible_module.root, 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: clsx(Collapsible_module.root, 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: clsx(!asChild && Collapsible_module.trigger, 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: clsx(Collapsible_module.indicator, 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: clsx(Collapsible_module.content, 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: clsx(Collapsible_module.body, className),
-        ...props
+        ...props,
+        "data-slot": "collapsible-body"
     });
 });
 const Collapsible_Collapsible = Object.assign(Collapsible_CollapsibleRoot, {

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

@@ -13,11 +13,11 @@ const ColorPicker_ColorPickerRoot = /*#__PURE__*/ forwardRef(function({ asChild,
         children: /*#__PURE__*/ jsx(ColorPicker.Root, {
             ref: ref,
             asChild: asChild,
-            "data-slot": "color-picker-root",
             className: clsx(ColorPicker_module.root, className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props,
+            "data-slot": "color-picker-root",
             children: children
         })
     });
@@ -29,11 +29,11 @@ const ColorPicker_ColorPickerRootProvider = /*#__PURE__*/ forwardRef(function({
         children: /*#__PURE__*/ jsx(ColorPicker.RootProvider, {
             ref: ref,
             asChild: asChild,
-            "data-slot": "color-picker-root-provider",
             className: clsx(ColorPicker_module.root, className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props,
+            "data-slot": "color-picker-root-provider",
             children: children
         })
     });
@@ -41,25 +41,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: clsx(ColorPicker_module.label, 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: clsx(ColorPicker_module.control, 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: clsx(ColorPicker_module.trigger, className),
         ...props,
+        "data-slot": "color-picker-trigger",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(ColorPicker.TransparencyGrid, {
@@ -78,26 +78,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: clsx(ColorPicker_module.positioner, 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: clsx(ColorPicker_module.content, 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: clsx(ColorPicker_module.area, className),
         ...props,
+        "data-slot": "color-picker-area",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(ColorPicker.AreaBackground, {
@@ -115,26 +115,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: clsx(ColorPicker_module.areaBackground, 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: clsx(ColorPicker_module.thumb, 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: clsx(ColorPicker_module.channelSlider, className),
         channel: channel,
         ...props,
+        "data-slot": "color-picker-channel-slider",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 'alpha' === channel && /*#__PURE__*/ jsx(ColorPicker.TransparencyGrid, {
@@ -156,9 +156,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: clsx(ColorPicker_module.sliders, className),
         ...props,
+        "data-slot": "color-picker-sliders",
         children: [
             /*#__PURE__*/ jsx(ColorPicker_ColorPickerChannelSlider, {
                 channel: "hue"
@@ -172,49 +172,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: clsx(ColorPicker_module.channelSliderTrack, 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: clsx(ColorPicker_module.thumb, 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: clsx(ColorPicker_module.channelSliderLabel, 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: clsx(ColorPicker_module.channelSliderValueText, 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: clsx(ColorPicker_module.channelInput, 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: clsx(ColorPicker_module.eyeDropperTrigger, className),
         ...props,
+        "data-slot": "color-picker-eye-dropper-trigger",
         children: children ?? /*#__PURE__*/ jsx(PipetteIcon, {})
     });
 });
@@ -224,9 +224,9 @@ const ColorPicker_ColorPickerFormatSelect = /*#__PURE__*/ forwardRef(function({
         children: [
             /*#__PURE__*/ jsx(ColorPicker.FormatSelect, {
                 ref: ref,
-                "data-slot": "color-picker-format-select",
                 className: clsx(ColorPicker_module.formatSelect, className),
-                ...props
+                ...props,
+                "data-slot": "color-picker-format-select"
             }),
             /*#__PURE__*/ jsx("span", {
                 "aria-hidden": "true",
@@ -239,26 +239,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: clsx(ColorPicker_module.formatTrigger, 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: clsx(ColorPicker_module.swatchGroup, 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: clsx(ColorPicker_module.swatchTrigger, className),
         value: value,
         ...props,
+        "data-slot": "color-picker-swatch-trigger",
         children: children ?? /*#__PURE__*/ jsx(ColorPicker.Swatch, {
             "data-slot": "color-picker-swatch",
             className: ColorPicker_module.swatch,
@@ -274,50 +274,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: clsx(ColorPicker_module.swatch, 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: clsx(ColorPicker_module.swatchIndicator, 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: clsx(ColorPicker_module.transparencyGrid, 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: clsx(ColorPicker_module.valueSwatch, 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: clsx(ColorPicker_module.valueText, 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: clsx(ColorPicker_module.view, className),
-        ...props
+        ...props,
+        "data-slot": "color-picker-view"
     });
 });
 const ColorPicker_ColorPicker = Object.assign(ColorPicker_ColorPickerRoot, {