@moduix/react 2.2.4 → 2.3.0

package/dist/components/chart/Chart.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { motion as motion_motion } from "@tanstack/charts/motion";
+import { RendererChart } from "@tanstack/charts/react/tooltip";
+import { svgChartRenderer } from "@tanstack/charts/svg/renderer";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Chart_module from "./Chart.module.js";
+const defaultChartRenderer = motion_motion({
+    transition: {
+        type: 'spring',
+        stiffness: 260,
+        damping: 30,
+        mass: 0.8
+    }
+});
+const Chart_ChartRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.figure, {
+        ref: ref,
+        "data-scope": "chart",
+        "data-part": "root",
+        "data-slot": "chart-root",
+        className: clsx(Chart_module.root, normalizeClassName(className)),
+        ...props
+    });
+});
+const renderDefaultTooltipBody = ({ content })=>{
+    if ('string' == typeof content) return /*#__PURE__*/ jsx("span", {
+        "data-slot": "chart-tooltip-text",
+        children: content
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "chart-tooltip-body",
+        className: Chart_module.defaultTooltipContent,
+        children: [
+            content.title ? /*#__PURE__*/ jsxs("div", {
+                "data-slot": "chart-tooltip-title",
+                className: Chart_module.tooltipTitle,
+                children: [
+                    content.color ? /*#__PURE__*/ jsx("span", {
+                        "aria-hidden": "true",
+                        "data-slot": "chart-tooltip-swatch",
+                        className: Chart_module.tooltipSwatch,
+                        style: {
+                            backgroundColor: content.color
+                        }
+                    }) : null,
+                    content.title
+                ]
+            }) : null,
+            content.rows.length ? /*#__PURE__*/ jsx("div", {
+                "data-slot": "chart-tooltip-rows",
+                className: Chart_module.tooltipRows,
+                children: content.rows.map((row, index)=>/*#__PURE__*/ jsxs("div", {
+                        "data-has-swatch": row.color ? '' : void 0,
+                        "data-slot": "chart-tooltip-row",
+                        className: Chart_module.tooltipRow,
+                        children: [
+                            row.color ? /*#__PURE__*/ jsx("span", {
+                                "aria-hidden": "true",
+                                "data-slot": "chart-tooltip-swatch",
+                                className: Chart_module.tooltipSwatch,
+                                style: {
+                                    backgroundColor: row.color
+                                }
+                            }) : null,
+                            /*#__PURE__*/ jsx("span", {
+                                "data-slot": "chart-tooltip-label",
+                                className: Chart_module.tooltipLabel,
+                                children: row.label
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                "data-slot": "chart-tooltip-value",
+                                className: Chart_module.tooltipValue,
+                                children: row.value
+                            })
+                        ]
+                    }, `${row.label}-${index}`))
+            }) : null
+        ]
+    });
+};
+const Chart_ChartPlot = function({ className, motion = true, renderTooltipBody, renderer, ...props }) {
+    return /*#__PURE__*/ jsx(RendererChart, {
+        ...props,
+        renderer: renderer ?? (motion ? defaultChartRenderer : svgChartRenderer),
+        renderTooltipBody: renderTooltipBody ?? renderDefaultTooltipBody,
+        className: clsx(Chart_module.plot, normalizeClassName(className))
+    });
+};
+const Chart_ChartHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.figcaption, {
+        ref: ref,
+        "data-scope": "chart",
+        "data-part": "header",
+        "data-slot": "chart-header",
+        className: clsx(Chart_module.header, normalizeClassName(className)),
+        ...props
+    });
+});
+const Chart_ChartTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.h3, {
+        ref: ref,
+        "data-scope": "chart",
+        "data-part": "title",
+        "data-slot": "chart-title",
+        className: clsx(Chart_module.title, normalizeClassName(className)),
+        ...props
+    });
+});
+const Chart_ChartDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.p, {
+        ref: ref,
+        "data-scope": "chart",
+        "data-part": "description",
+        "data-slot": "chart-description",
+        className: clsx(Chart_module.description, normalizeClassName(className)),
+        ...props
+    });
+});
+const Chart_ChartLegend = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.ul, {
+        ref: ref,
+        "data-scope": "chart",
+        "data-part": "legend",
+        "data-slot": "chart-legend",
+        className: clsx(Chart_module.legend, normalizeClassName(className)),
+        ...props
+    });
+});
+const Chart_ChartLegendItem = /*#__PURE__*/ forwardRef(function({ className, color, style, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.li, {
+        ref: ref,
+        "data-scope": "chart",
+        "data-part": "legend-item",
+        "data-slot": "chart-legend-item",
+        className: clsx(Chart_module.legendItem, normalizeClassName(className)),
+        style: color ? {
+            '--moduix-chart-legend-indicator-color': color,
+            ...style
+        } : style,
+        ...props
+    });
+});
+const Chart = Object.assign(Chart_ChartRoot, {
+    Root: Chart_ChartRoot,
+    Plot: Chart_ChartPlot,
+    Header: Chart_ChartHeader,
+    Title: Chart_ChartTitle,
+    Description: Chart_ChartDescription,
+    Legend: Chart_ChartLegend,
+    LegendItem: Chart_ChartLegendItem
+});
+export { Chart };

package/dist/components/chart/Chart.module.js

@@ -0,0 +1,18 @@
+import "./Chart_module.css";
+const Chart_module = {
+    root: "root-zPwhEi",
+    plot: "plot-Ww_CVs",
+    header: "header-_H34PS",
+    title: "title-zKDqX9",
+    description: "description-jUUbjj",
+    legend: "legend-iiFN8q",
+    legendItem: "legendItem-B4_u7q",
+    defaultTooltipContent: "defaultTooltipContent-EbORpR",
+    tooltipRows: "tooltipRows-x57rNP",
+    tooltipTitle: "tooltipTitle-rt8wqo",
+    tooltipRow: "tooltipRow-ZRjXCf",
+    tooltipSwatch: "tooltipSwatch-a9pNfu",
+    tooltipLabel: "tooltipLabel-gfLt3N",
+    tooltipValue: "tooltipValue-HkEHds"
+};
+export default Chart_module;

package/dist/components/chart/Chart_module.css

@@ -0,0 +1,138 @@
+@layer moduix.components {
+  .root-zPwhEi {
+    box-sizing: border-box;
+    gap: var(--moduix-chart-gap, var(--moduix-spacing-5));
+    width: 100%;
+    min-width: 0;
+    padding: var(--moduix-chart-padding, var(--moduix-spacing-5));
+    border: var(--moduix-chart-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-chart-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-chart-radius, var(--moduix-radius-lg));
+    background-color: var(--moduix-chart-bg, var(--moduix-color-card));
+    box-shadow: var(--moduix-chart-shadow, var(--moduix-shadow-sm));
+    color: var(--moduix-color-card-foreground);
+    margin: 0;
+    display: grid;
+  }
+
+  .plot-Ww_CVs {
+    border-radius: var(--moduix-chart-plot-radius, var(--moduix-radius-md));
+    min-width: 0;
+    color: var(--moduix-chart-axis-color, var(--moduix-color-muted-foreground));
+    --ts-chart-tooltip-background: var(--moduix-chart-tooltip-bg, var(--moduix-color-popover));
+    --ts-chart-tooltip-border: var(--moduix-chart-tooltip-border-width, var(--moduix-border-width-sm))
+      solid var(--moduix-chart-tooltip-border-color, var(--moduix-color-border));
+    --ts-chart-tooltip-border-radius: var(--moduix-chart-tooltip-radius, var(--moduix-radius-md));
+    --ts-chart-tooltip-color: var(--moduix-chart-tooltip-color, var(--moduix-color-popover-foreground));
+    --ts-chart-tooltip-font: var(--moduix-weight-medium)
+      var(--moduix-chart-tooltip-font-size, var(--moduix-text-xs)) /
+      var(--moduix-chart-tooltip-line-height, var(--moduix-line-height-text-xs))
+      var(--moduix-font-sans);
+    --ts-chart-tooltip-padding: var(--moduix-chart-tooltip-padding, var(--moduix-spacing-3));
+    --ts-chart-tooltip-shadow: var(--moduix-chart-tooltip-shadow, var(--moduix-shadow-lg));
+  }
+
+  .plot-Ww_CVs .ts-chart {
+    border-radius: var(--moduix-chart-plot-radius, var(--moduix-radius-md));
+    outline: none;
+  }
+
+  .plot-Ww_CVs .ts-chart:focus-visible {
+    outline: var(--moduix-chart-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-chart-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-chart-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
+
+  .header-_H34PS {
+    gap: var(--moduix-spacing-1);
+    display: grid;
+  }
+
+  .title-zKDqX9 {
+    color: currentColor;
+    font-size: var(--moduix-text-lg);
+    font-weight: var(--moduix-weight-semibold);
+    line-height: var(--moduix-line-height-text-lg);
+    margin: 0;
+  }
+
+  .description-jUUbjj {
+    color: var(--moduix-color-muted-foreground);
+    font-size: var(--moduix-text-sm);
+    line-height: var(--moduix-line-height-text-sm);
+    margin: 0;
+  }
+
+  .legend-iiFN8q {
+    gap: var(--moduix-spacing-3);
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .legendItem-B4_u7q {
+    align-items: center;
+    gap: var(--moduix-spacing-2);
+    color: var(--moduix-color-muted-foreground);
+    font-size: var(--moduix-text-sm);
+    line-height: var(--moduix-line-height-text-sm);
+    display: inline-flex;
+  }
+
+  .legendItem-B4_u7q:before {
+    width: var(--moduix-spacing-2-5);
+    height: var(--moduix-spacing-2-5);
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-chart-legend-indicator-color, var(--moduix-color-muted-foreground));
+    box-shadow: inset 0 0 0 var(--moduix-border-width-sm) #00000014;
+    content: "";
+    flex: none;
+  }
+
+  .defaultTooltipContent-EbORpR, .tooltipRows-x57rNP {
+    gap: var(--moduix-spacing-1);
+    display: grid;
+  }
+
+  .tooltipTitle-rt8wqo {
+    align-items: center;
+    gap: var(--moduix-spacing-2);
+    color: var(--moduix-color-popover-foreground);
+    font-weight: var(--moduix-weight-semibold);
+    display: flex;
+  }
+
+  .tooltipRow-ZRjXCf {
+    align-items: center;
+    column-gap: var(--moduix-spacing-2);
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  .tooltipRow-ZRjXCf[data-has-swatch] {
+    grid-template-columns: var(--moduix-spacing-2-5) minmax(0, 1fr) auto;
+  }
+
+  .tooltipSwatch-a9pNfu {
+    width: var(--moduix-spacing-2-5);
+    height: var(--moduix-spacing-2-5);
+    border-radius: var(--moduix-radius-full);
+    box-shadow: inset 0 0 0 var(--moduix-border-width-sm) #00000014;
+  }
+
+  .tooltipLabel-gfLt3N {
+    min-width: 0;
+    color: var(--moduix-color-muted-foreground);
+  }
+
+  .tooltipValue-HkEHds {
+    color: var(--moduix-color-popover-foreground);
+    font-weight: var(--moduix-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    white-space: nowrap;
+  }
+}
+

package/dist/components/chart/index.d.ts

@@ -0,0 +1 @@
+export * from './Chart.js';

package/dist/components/chart/index.js

@@ -0,0 +1 @@
+export * from "./Chart.js";

package/dist/components/checkbox/Checkbox.js

@@ -61,9 +61,7 @@ const Checkbox_CheckboxControl = /*#__PURE__*/ forwardRef(function({ children, c
     });
 });
 function withHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(Checkbox.HiddenInput, {
-        "data-slot": "checkbox-hidden-input"
-    });
+    const hiddenInput = /*#__PURE__*/ jsx(CheckboxHiddenInput, {});
     if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             children,
@@ -73,6 +71,14 @@ function withHiddenInput(children, asChild) {
     const child = Children.only(children);
     return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
 }
+function CheckboxHiddenInput() {
+    const checkbox = useCheckboxContext();
+    const readOnly = void 0 !== checkbox.getRootProps()['data-readonly'];
+    return /*#__PURE__*/ jsx(Checkbox.HiddenInput, {
+        "aria-readonly": readOnly || void 0,
+        "data-slot": "checkbox-hidden-input"
+    });
+}
 const Checkbox_CheckboxLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.Label, {
         ref: ref,

package/dist/components/checkbox/Checkbox_module.css

@@ -3,7 +3,7 @@
     align-items: center;
     gap: var(--moduix-checkbox-gap, var(--moduix-spacing-2));
     vertical-align: middle;
-    color: var(--moduix-checkbox-label-color, var(--moduix-color-foreground));
+    color: var(--moduix-checkbox-label-color, var(--moduix-checkbox-group-color, var(--moduix-color-foreground)));
     cursor: pointer;
     display: inline-flex;
   }
@@ -62,13 +62,21 @@
   }
 
   .control-UQ7BTk[data-invalid][data-focus-visible] {
-    outline-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
+    outline-color: var(--moduix-checkbox-focus-ring-color-invalid, var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive)));
   }
 
   @media (hover: hover) {
     .control-UQ7BTk[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
       background-color: var(--moduix-checkbox-bg-hover, var(--moduix-color-accent));
     }
+
+    .control-UQ7BTk:is([data-state="checked"], [data-state="indeterminate"])[data-hover]:not([data-readonly], [data-disabled]) {
+      background-color: var(--moduix-checkbox-bg-checked-hover, var(--moduix-checkbox-bg-checked, var(--moduix-color-primary)));
+    }
+
+    .control-UQ7BTk:is([data-state="checked"], [data-state="indeterminate"])[data-hover]:not([data-readonly], [data-disabled])[data-invalid] {
+      background-color: var(--moduix-checkbox-bg-invalid-hover, var(--moduix-checkbox-bg-invalid, var(--moduix-color-destructive)));
+    }
   }
 
   .root-HuLdBM[data-size="xs"] .control-UQ7BTk {
@@ -121,7 +129,7 @@
   }
 
   .label-YzjPY9 {
-    color: var(--moduix-checkbox-label-color, var(--moduix-color-foreground));
+    color: var(--moduix-checkbox-label-color, var(--moduix-checkbox-group-color, var(--moduix-color-foreground)));
     font-size: var(--moduix-checkbox-label-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-checkbox-label-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-checkbox-label-line-height, var(--moduix-line-height-text-sm));

package/dist/components/clipboard/Clipboard_module.css

@@ -68,7 +68,7 @@
     color: var(--moduix-clipboard-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-clipboard-input-color, var(--moduix-color-foreground))));
   }
 
-  .input-POor1w[data-disabled] {
+  .input-POor1w:is(:disabled, [data-disabled]) {
     pointer-events: none;
     opacity: var(--moduix-clipboard-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled)));
   }
@@ -104,6 +104,8 @@
       opacity
         var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
       box-shadow
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      transform
         var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default)));
     flex-shrink: 0;
     display: inline-flex;
@@ -129,6 +131,16 @@
           -1);
   }
 
+  .trigger-dngdJp:active:not(:disabled, [data-disabled]) {
+    opacity: .94;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .trigger-dngdJp:active:not(:disabled, [data-disabled]) {
+      transform: translateY(1px) scale(.985);
+    }
+  }
+
   .trigger-dngdJp:is(:disabled, [data-disabled]) {
     pointer-events: none;
     opacity: var(--moduix-clipboard-disabled-opacity, var(--moduix-button-disabled-opacity, var(--moduix-opacity-disabled)));

package/dist/components/close-button/CloseButton.js

@@ -5,8 +5,18 @@ import { forwardRef } from "react";
 import { CloseIcon } from "../../internal/icons/ui/index.js";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import CloseButton_module from "./CloseButton.module.js";
-const CloseButton_CloseButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, children, disabled, onClick, type, 'aria-disabled': ariaDisabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'data-disabled': dataDisabled, 'data-part': dataPart, 'data-scope': dataScope, 'data-slot': dataSlot, ...props }, ref) {
+const CloseButton_CloseButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, children, disabled, onClick, onClickCapture, type, 'aria-disabled': ariaDisabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'data-disabled': dataDisabled, 'data-part': dataPart, 'data-scope': dataScope, 'data-slot': dataSlot, ...props }, ref) {
     const isDisabled = disabled || true === ariaDisabled || 'true' === ariaDisabled || void 0 !== dataDisabled;
+    const nativeDisabled = asChild ? void 0 : disabled;
+    const resolvedAriaDisabled = asChild && disabled ? true : ariaDisabled;
+    const handleClickCapture = (event)=>{
+        if (isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        onClickCapture?.(event);
+    };
     const handleClick = (event)=>{
         if (isDisabled) {
             event.preventDefault();
@@ -20,15 +30,16 @@ const CloseButton_CloseButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild,
         asChild: asChild,
         ...props,
         type: asChild ? type : type ?? 'button',
-        disabled: disabled,
+        disabled: nativeDisabled,
         "data-scope": dataScope ?? 'close-button',
         "data-part": dataPart ?? 'root',
         "data-slot": dataSlot ?? 'close-button-root',
         "data-disabled": dataDisabled ?? (isDisabled ? '' : void 0),
         className: clsx(CloseButton_module.root, normalizeClassName(className)),
-        "aria-disabled": ariaDisabled,
+        "aria-disabled": resolvedAriaDisabled,
         "aria-label": ariaLabel ?? (null == ariaLabelledBy ? 'Close' : void 0),
         "aria-labelledby": ariaLabelledBy,
+        onClickCapture: handleClickCapture,
         onClick: handleClick,
         children: children || /*#__PURE__*/ jsx(CloseIcon, {})
     });

package/dist/components/collapsible/Collapsible_module.css

@@ -145,5 +145,16 @@
     padding: var(--moduix-collapsible-body-padding, var(--moduix-spacing-2));
     display: grid;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger-o93fRO, .indicator-ll1vd8 {
+      transition: none;
+    }
+
+    .content-dHAw0w[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
 }
 

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

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "@ark-ui/react/color-picker";
 import { clsx } from "clsx";
 import { Children, cloneElement, forwardRef } from "react";
-import { CheckIcon, PipetteIcon } from "../../internal/icons/ui/index.js";
+import { CheckIcon, ChevronDownIcon, PipetteIcon } from "../../internal/icons/ui/index.js";
 import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import ColorPicker_module from "./ColorPicker.module.js";
@@ -220,11 +220,21 @@ const ColorPicker_ColorPickerEyeDropperTrigger = /*#__PURE__*/ forwardRef(functi
     });
 });
 const ColorPicker_ColorPickerFormatSelect = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx(ColorPicker.FormatSelect, {
-        ref: ref,
-        "data-slot": "color-picker-format-select",
-        className: clsx(ColorPicker_module.formatSelect, normalizeClassName(className)),
-        ...props
+    return /*#__PURE__*/ jsxs("span", {
+        className: ColorPicker_module.formatSelectControl,
+        children: [
+            /*#__PURE__*/ jsx(ColorPicker.FormatSelect, {
+                ref: ref,
+                "data-slot": "color-picker-format-select",
+                className: clsx(ColorPicker_module.formatSelect, normalizeClassName(className)),
+                ...props
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                className: ColorPicker_module.formatSelectIndicator,
+                children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+            })
+        ]
     });
 });
 const ColorPicker_ColorPickerFormatTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {

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

@@ -20,6 +20,8 @@ const ColorPicker_module = {
     channelSliderValueText: "channelSliderValueText-ZFMCO7",
     channelInput: "channelInput-KxngYC",
     formatSelect: "formatSelect-jD2i0e",
+    formatSelectControl: "formatSelectControl-S40Hse",
+    formatSelectIndicator: "formatSelectIndicator-VJN6PV",
     eyeDropperTrigger: "eyeDropperTrigger-jF9YiQ",
     formatTrigger: "formatTrigger-pUu2zb",
     swatchGroup: "swatchGroup-c99XUr",

package/dist/components/color-picker/ColorPicker_module.css

@@ -93,7 +93,7 @@
     overflow: hidden;
   }
 
-  .trigger-o5tyg7:is(:focus-visible, [data-focus]) {
+  .trigger-o5tyg7:is(:focus-visible, [data-state="open"]) {
     border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
     outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
   }
@@ -161,6 +161,13 @@
             var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .content-z7zabu[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
+
   .area-t8_R52 {
     box-sizing: border-box;
     width: 100%;
@@ -305,7 +312,6 @@
         -1);
     transition: border-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
       outline-color var(--moduix-color-picker-transition, var(--moduix-transition-default));
-    appearance: textfield;
     margin: 0;
   }
 
@@ -323,18 +329,19 @@
     opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)::-webkit-outer-spin-button {
-    appearance: none;
-    margin: 0;
+  .channelInput-KxngYC {
+    appearance: textfield;
+    flex: 1;
   }
 
-  :is(.channelInput-KxngYC, .formatSelect-jD2i0e)::-webkit-inner-spin-button {
+  .channelInput-KxngYC::-webkit-outer-spin-button {
     appearance: none;
     margin: 0;
   }
 
-  .channelInput-KxngYC {
-    flex: 1;
+  .channelInput-KxngYC::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
   }
 
   .channelInput-KxngYC[data-channel="alpha"] {
@@ -342,9 +349,77 @@
     flex: 0 0 var(--moduix-color-picker-alpha-input-width, 4rem);
   }
 
+  .formatSelectControl-S40Hse {
+    flex-shrink: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-grid;
+    position: relative;
+  }
+
   .formatSelect-jD2i0e {
-    cursor: pointer;
     width: auto;
+    appearance: none;
+    cursor: pointer;
+    text-transform: uppercase;
+    padding-inline-end: calc(var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3)) +
+        var(--moduix-color-picker-icon-size, var(--moduix-spacing-4)) + var(--moduix-spacing-1));
+  }
+
+  .formatSelect-jD2i0e:is([disabled], [data-disabled]) {
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    .formatSelect-jD2i0e {
+      appearance: auto;
+      padding-inline-end: var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3));
+    }
+  }
+
+  .formatSelectIndicator-VJN6PV {
+    top: 50%;
+    width: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+    border-radius: var(--moduix-radius-sm);
+    background: var(--moduix-color-picker-action-bg, transparent);
+    color: var(--moduix-color-picker-action-color, var(--moduix-color-muted-foreground));
+    pointer-events: none;
+    transition: background-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-color-picker-transition, var(--moduix-transition-default));
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    display: inline-flex;
+    position: absolute;
+    inset-inline-end: var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3));
+    transform: translateY(-50%);
+  }
+
+  .formatSelectIndicator-VJN6PV > svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  @media (forced-colors: active) {
+    .formatSelectIndicator-VJN6PV {
+      display: none;
+    }
+  }
+
+  @media (hover: hover) {
+    .formatSelect-jD2i0e:not(:is([disabled], [data-disabled])):hover + .formatSelectIndicator-VJN6PV {
+      background-color: var(--moduix-color-picker-action-bg-hover, var(--moduix-color-muted));
+      color: var(--moduix-color-picker-action-color-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .formatSelect-jD2i0e:is([disabled], [data-disabled]) + .formatSelectIndicator-VJN6PV {
+    opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
   .eyeDropperTrigger-jF9YiQ, .formatTrigger-pUu2zb {

package/dist/components/combobox/Combobox.d.ts

@@ -16,7 +16,7 @@ declare const Combobox: ComboboxPrimitive.RootComponent<OverlayPortalProps> & {
     Positioner: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Empty: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Status: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Status: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     List: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemGroup: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;