@moduix/react 2.5.1 → 2.7.0

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

@@ -2,9 +2,8 @@
 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 { forwardRef } from "react";
 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";
 const ColorPicker_ColorPickerRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }, ref) {
@@ -14,12 +13,12 @@ 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, normalizeClassName(className)),
+            className: clsx(ColorPicker_module.root, className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props,
-            children: withHiddenInput(children, asChild)
+            "data-slot": "color-picker-root",
+            children: children
         })
     });
 });
@@ -30,37 +29,37 @@ 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, normalizeClassName(className)),
+            className: clsx(ColorPicker_module.root, className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props,
-            children: withHiddenInput(children, asChild)
+            "data-slot": "color-picker-root-provider",
+            children: children
         })
     });
 });
 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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.label, className),
+        ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.control, className),
+        ...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, normalizeClassName(className)),
+        className: clsx(ColorPicker_module.trigger, className),
         ...props,
+        "data-slot": "color-picker-trigger",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(ColorPicker.TransparencyGrid, {
@@ -79,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, normalizeClassName(className)),
-            ...props
+            className: clsx(ColorPicker_module.positioner, className),
+            ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.content, className),
+        ...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, normalizeClassName(className)),
+        className: clsx(ColorPicker_module.area, className),
         ...props,
+        "data-slot": "color-picker-area",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(ColorPicker.AreaBackground, {
@@ -116,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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.areaBackground, className),
+        ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.thumb, className),
+        ...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, normalizeClassName(className)),
+        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, {
@@ -157,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, normalizeClassName(className)),
+        className: clsx(ColorPicker_module.sliders, className),
         ...props,
+        "data-slot": "color-picker-sliders",
         children: [
             /*#__PURE__*/ jsx(ColorPicker_ColorPickerChannelSlider, {
                 channel: "hue"
@@ -173,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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.channelSliderTrack, className),
+        ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.thumb, className),
+        ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.channelSliderLabel, className),
+        ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.channelSliderValueText, className),
+        ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.channelInput, className),
+        ...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, normalizeClassName(className)),
+        className: clsx(ColorPicker_module.eyeDropperTrigger, className),
         ...props,
+        "data-slot": "color-picker-eye-dropper-trigger",
         children: children ?? /*#__PURE__*/ jsx(PipetteIcon, {})
     });
 });
@@ -225,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, normalizeClassName(className)),
-                ...props
+                className: clsx(ColorPicker_module.formatSelect, className),
+                ...props,
+                "data-slot": "color-picker-format-select"
             }),
             /*#__PURE__*/ jsx("span", {
                 "aria-hidden": "true",
@@ -240,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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.formatTrigger, className),
+        ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.swatchGroup, className),
+        ...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, normalizeClassName(className)),
+        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,
@@ -275,69 +274,57 @@ 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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.swatch, className),
+        ...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, normalizeClassName(className)),
+        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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.transparencyGrid, className),
+        ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.valueSwatch, className),
+        ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.valueText, className),
+        ...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, normalizeClassName(className)),
-        ...props
+        className: clsx(ColorPicker_module.view, className),
+        ...props,
+        "data-slot": "color-picker-view"
     });
 });
-function withHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(ColorPicker.HiddenInput, {
-        "data-slot": "color-picker-hidden-input"
-    });
-    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children,
-            hiddenInput
-        ]
-    });
-    const child = Children.only(children);
-    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
-}
 const ColorPicker_ColorPicker = Object.assign(ColorPicker_ColorPickerRoot, {
     Root: ColorPicker_ColorPickerRoot,
     RootProvider: ColorPicker_ColorPickerRootProvider,
     Context: ColorPicker.Context,
+    HiddenInput: ColorPicker.HiddenInput,
     Label: ColorPicker_ColorPickerLabel,
     Control: ColorPicker_ColorPickerControl,
     Trigger: ColorPicker_ColorPickerTrigger,

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

@@ -351,7 +351,6 @@
 
   .formatSelectControl-S40Hse {
     flex-shrink: 0;
-    width: -moz-fit-content;
     width: fit-content;
     min-width: 0;
     max-width: 100%;

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

@@ -1,13 +1,13 @@
-import { Combobox as ComboboxPrimitive, useCombobox, useComboboxContext, useComboboxItemContext } from '@ark-ui/react/combobox';
+import { Combobox as ComboboxPrimitive, type ComboboxRootComponent as ArkComboboxRootComponent, type ComboboxRootProviderComponent as ArkComboboxRootProviderComponent, useCombobox, useComboboxContext, useComboboxItemContext } from '@ark-ui/react/combobox';
 import type { ComponentProps, ReactNode } from 'react';
-import { type OverlayPortalProps } from '../../internal/overlayPortal';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
 type ComboboxOptionProps = Omit<ComponentProps<typeof ComboboxPrimitive.Item>, 'asChild' | 'children'> & {
     children: ReactNode;
     indicator?: ReactNode | false;
 };
-declare const Combobox: ComboboxPrimitive.RootComponent<OverlayPortalProps> & {
-    Root: ComboboxPrimitive.RootComponent<OverlayPortalProps>;
-    RootProvider: ComboboxPrimitive.RootProviderComponent<OverlayPortalProps>;
+declare const Combobox: ArkComboboxRootComponent<OverlayPortalProps> & {
+    Root: ArkComboboxRootComponent<OverlayPortalProps>;
+    RootProvider: ArkComboboxRootProviderComponent<OverlayPortalProps>;
     Label: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Input: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/combobox/Combobox.js

@@ -5,7 +5,6 @@ import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import { CloseButton } from "../close-button/index.js";
 import Combobox_module from "./Combobox.module.js";
@@ -15,11 +14,11 @@ const Combobox_ComboboxRoot = /*#__PURE__*/ forwardRef(function({ className, laz
         portalRef: portalRef,
         children: /*#__PURE__*/ jsx(Combobox.Root, {
             ref: ref,
-            "data-slot": "combobox-root",
-            className: clsx(Combobox_module.root, normalizeClassName(className)),
+            className: clsx(Combobox_module.root, className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
-            ...props
+            ...props,
+            "data-slot": "combobox-root"
         })
     });
 });
@@ -29,58 +28,50 @@ const Combobox_ComboboxRootProvider = /*#__PURE__*/ forwardRef(function({ classN
         portalRef: portalRef,
         children: /*#__PURE__*/ jsx(Combobox.RootProvider, {
             ref: ref,
-            "data-slot": "combobox-root-provider",
-            className: clsx(Combobox_module.root, normalizeClassName(className)),
+            className: clsx(Combobox_module.root, className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
-            ...props
+            ...props,
+            "data-slot": "combobox-root-provider"
         })
     });
 });
 const Combobox_ComboboxLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Label, {
         ref: ref,
-        "data-slot": "combobox-label",
-        className: clsx(Combobox_module.label, normalizeClassName(className)),
-        ...props
+        className: clsx(Combobox_module.label, className),
+        ...props,
+        "data-slot": "combobox-label"
     });
 });
 const Combobox_ComboboxControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Control, {
         ref: ref,
-        "data-slot": "combobox-control",
-        className: clsx(Combobox_module.control, normalizeClassName(className)),
-        ...props
+        className: clsx(Combobox_module.control, className),
+        ...props,
+        "data-slot": "combobox-control"
     });
 });
 const Combobox_ComboboxInput = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Input, {
         ref: ref,
-        "data-slot": "combobox-input",
         asChild: asChild,
-        className: clsx(!asChild && Combobox_module.input, normalizeClassName(className)),
-        ...props
+        className: clsx(!asChild && Combobox_module.input, className),
+        ...props,
+        "data-slot": "combobox-input"
     });
 });
 const Combobox_ComboboxClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
-    const triggerClassName = clsx(Combobox_module.clearTrigger, normalizeClassName(className));
-    if (asChild) return /*#__PURE__*/ jsx(Combobox.ClearTrigger, {
-        ref: ref,
-        asChild: true,
-        "data-slot": "combobox-clear-trigger",
-        className: triggerClassName,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        ...props,
-        children: children
-    });
+    const triggerClassName = clsx(Combobox_module.clearTrigger, className);
     return /*#__PURE__*/ jsx(Combobox.ClearTrigger, {
         ref: ref,
         asChild: true,
-        "data-slot": "combobox-clear-trigger",
         className: triggerClassName,
+        "aria-label": asChild ? ariaLabel : void 0,
+        "aria-labelledby": asChild ? ariaLabelledBy : void 0,
         ...props,
-        children: /*#__PURE__*/ jsx(CloseButton.Root, {
+        "data-slot": "combobox-clear-trigger",
+        children: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
             "aria-label": ariaLabel ?? (null == ariaLabelledBy ? 'Clear selection' : void 0),
             "aria-labelledby": ariaLabelledBy,
             children: children
@@ -90,9 +81,9 @@ const Combobox_ComboboxClearTrigger = /*#__PURE__*/ forwardRef(function({ asChil
 const Combobox_ComboboxTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Trigger, {
         ref: ref,
-        "data-slot": "combobox-trigger",
-        className: clsx(Combobox_module.trigger, normalizeClassName(className)),
+        className: clsx(Combobox_module.trigger, className),
         ...props,
+        "data-slot": "combobox-trigger",
         children: children ?? /*#__PURE__*/ jsx(ChevronUpDownIcon, {})
     });
 });
@@ -100,82 +91,82 @@ const Combobox_ComboboxPositioner = /*#__PURE__*/ forwardRef(function({ classNam
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Combobox.Positioner, {
             ref: ref,
-            "data-slot": "combobox-positioner",
-            className: clsx(Combobox_module.positioner, normalizeClassName(className)),
-            ...props
+            className: clsx(Combobox_module.positioner, className),
+            ...props,
+            "data-slot": "combobox-positioner"
         })
     });
 });
 const Combobox_ComboboxContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Content, {
         ref: ref,
-        "data-slot": "combobox-content",
-        className: clsx(Combobox_module.content, normalizeClassName(className)),
-        ...props
+        className: clsx(Combobox_module.content, className),
+        ...props,
+        "data-slot": "combobox-content"
     });
 });
 const Combobox_ComboboxEmpty = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Empty, {
         ref: ref,
-        "data-slot": "combobox-empty",
-        className: clsx(Combobox_module.empty, normalizeClassName(className)),
-        ...props
+        className: clsx(Combobox_module.empty, className),
+        ...props,
+        "data-slot": "combobox-empty"
     });
 });
 const Combobox_ComboboxStatus = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "combobox-status",
-        className: clsx(Combobox_module.status, normalizeClassName(className)),
-        ...props
+        className: clsx(Combobox_module.status, className),
+        ...props,
+        "data-slot": "combobox-status"
     });
 });
 const Combobox_ComboboxList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.List, {
         ref: ref,
-        "data-slot": "combobox-list",
-        className: clsx(Combobox_module.list, normalizeClassName(className)),
-        ...props
+        className: clsx(Combobox_module.list, className),
+        ...props,
+        "data-slot": "combobox-list"
     });
 });
 const Combobox_ComboboxItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.ItemGroup, {
         ref: ref,
-        "data-slot": "combobox-item-group",
-        className: clsx(Combobox_module.itemGroup, normalizeClassName(className)),
-        ...props
+        className: clsx(Combobox_module.itemGroup, className),
+        ...props,
+        "data-slot": "combobox-item-group"
     });
 });
 const Combobox_ComboboxItemGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.ItemGroupLabel, {
         ref: ref,
-        "data-slot": "combobox-item-group-label",
-        className: clsx(Combobox_module.itemGroupLabel, normalizeClassName(className)),
-        ...props
+        className: clsx(Combobox_module.itemGroupLabel, className),
+        ...props,
+        "data-slot": "combobox-item-group-label"
     });
 });
 const Combobox_ComboboxItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Item, {
         ref: ref,
-        "data-slot": "combobox-item",
-        className: clsx(Combobox_module.item, normalizeClassName(className)),
-        ...props
+        className: clsx(Combobox_module.item, className),
+        ...props,
+        "data-slot": "combobox-item"
     });
 });
 const Combobox_ComboboxItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.ItemText, {
         ref: ref,
-        "data-slot": "combobox-item-text",
-        className: clsx(Combobox_module.itemText, normalizeClassName(className)),
-        ...props
+        className: clsx(Combobox_module.itemText, className),
+        ...props,
+        "data-slot": "combobox-item-text"
     });
 });
 const Combobox_ComboboxItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.ItemIndicator, {
         ref: ref,
-        "data-slot": "combobox-item-indicator",
-        className: clsx(Combobox_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(Combobox_module.itemIndicator, className),
         ...props,
+        "data-slot": "combobox-item-indicator",
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
 });

package/dist/components/combobox/Combobox_module.css

@@ -177,7 +177,6 @@
     --moduix-close-button-focus-ring-width: var(--moduix-combobox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)));
     --moduix-close-button-focus-ring-color: var(--moduix-combobox-focus-ring-color, var(--moduix-color-ring));
     --moduix-close-button-focus-ring-offset: var(--moduix-combobox-focus-ring-offset, var(--moduix-border-width-sm));
-    --moduix-close-button-transition: var(--moduix-combobox-transition, var(--moduix-transition-default));
     top: 50%;
     position: absolute;
     inset-inline-end: calc(var(--moduix-combobox-action-offset-right, var(--moduix-spacing-2)) +