@moduix/react 1.1.1 → 2.1.0

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

@@ -1,33 +1,37 @@
-import { CheckIcon, PipetteIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, PipetteIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import ColorPicker_module_default from "./ColorPicker.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { ColorPicker, parseColor } from "@ark-ui/react/color-picker";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "@ark-ui/react/color-picker";
 //#region src/components/color-picker/ColorPicker.tsx
-const ColorPickerRoot = forwardRef(function ColorPickerRoot({ className, portalled, portalRef, ...props }, ref) {
+const ColorPickerRoot = forwardRef(function ColorPickerRoot({ asChild, children, className, portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
 		portalled,
 		portalRef,
 		children: /* @__PURE__ */ jsx(ColorPicker.Root, {
 			ref,
+			asChild,
 			"data-slot": "color-picker-root",
 			className: clsx(ColorPicker_module_default.root, normalizeClassName(className)),
-			...props
+			...props,
+			children: withHiddenInput(children, asChild)
 		})
 	});
 });
-const ColorPickerRootProvider = forwardRef(function ColorPickerRootProvider({ className, portalled, portalRef, ...props }, ref) {
+const ColorPickerRootProvider = forwardRef(function ColorPickerRootProvider({ asChild, children, className, portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
 		portalled,
 		portalRef,
 		children: /* @__PURE__ */ jsx(ColorPicker.RootProvider, {
 			ref,
+			asChild,
 			"data-slot": "color-picker-root-provider",
 			className: clsx(ColorPicker_module_default.root, normalizeClassName(className)),
-			...props
+			...props,
+			children: withHiddenInput(children, asChild)
 		})
 	});
 });
@@ -47,12 +51,19 @@ const ColorPickerControl = forwardRef(function ColorPickerControl({ className, .
 		...props
 	});
 });
-const ColorPickerTrigger = forwardRef(function ColorPickerTrigger({ className, ...props }, ref) {
+const ColorPickerTrigger = forwardRef(function ColorPickerTrigger({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ColorPicker.Trigger, {
 		ref,
 		"data-slot": "color-picker-trigger",
 		className: clsx(ColorPicker_module_default.trigger, normalizeClassName(className)),
-		...props
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorPicker.TransparencyGrid, {
+			"data-slot": "color-picker-transparency-grid",
+			className: ColorPicker_module_default.transparencyGrid
+		}), /* @__PURE__ */ jsx(ColorPicker.ValueSwatch, {
+			"data-slot": "color-picker-value-swatch",
+			className: ColorPicker_module_default.valueSwatch
+		})] })
 	});
 });
 const ColorPickerPositioner = forwardRef(function ColorPickerPositioner({ className, ...props }, ref) {
@@ -71,12 +82,19 @@ const ColorPickerContent = forwardRef(function ColorPickerContent({ className, .
 		...props
 	});
 });
-const ColorPickerArea = forwardRef(function ColorPickerArea({ className, ...props }, ref) {
+const ColorPickerArea = forwardRef(function ColorPickerArea({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ColorPicker.Area, {
 		ref,
 		"data-slot": "color-picker-area",
 		className: clsx(ColorPicker_module_default.area, normalizeClassName(className)),
-		...props
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorPicker.AreaBackground, {
+			"data-slot": "color-picker-area-background",
+			className: ColorPicker_module_default.areaBackground
+		}), /* @__PURE__ */ jsx(ColorPicker.AreaThumb, {
+			"data-slot": "color-picker-area-thumb",
+			className: ColorPicker_module_default.thumb
+		})] })
 	});
 });
 const ColorPickerAreaBackground = forwardRef(function ColorPickerAreaBackground({ className, ...props }, ref) {
@@ -95,12 +113,36 @@ const ColorPickerAreaThumb = forwardRef(function ColorPickerAreaThumb({ classNam
 		...props
 	});
 });
-const ColorPickerChannelSlider = forwardRef(function ColorPickerChannelSlider({ className, ...props }, ref) {
+const ColorPickerChannelSlider = forwardRef(function ColorPickerChannelSlider({ className, children, channel, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ColorPicker.ChannelSlider, {
 		ref,
 		"data-slot": "color-picker-channel-slider",
 		className: clsx(ColorPicker_module_default.channelSlider, normalizeClassName(className)),
-		...props
+		channel,
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			channel === "alpha" && /* @__PURE__ */ jsx(ColorPicker.TransparencyGrid, {
+				"data-slot": "color-picker-transparency-grid",
+				className: ColorPicker_module_default.transparencyGrid
+			}),
+			/* @__PURE__ */ jsx(ColorPicker.ChannelSliderTrack, {
+				"data-slot": "color-picker-channel-slider-track",
+				className: ColorPicker_module_default.channelSliderTrack
+			}),
+			/* @__PURE__ */ jsx(ColorPicker.ChannelSliderThumb, {
+				"data-slot": "color-picker-channel-slider-thumb",
+				className: ColorPicker_module_default.thumb
+			})
+		] })
+	});
+});
+const ColorPickerSliders = forwardRef(function ColorPickerSliders({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "color-picker-sliders",
+		className: clsx(ColorPicker_module_default.sliders, normalizeClassName(className)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ColorPickerChannelSlider, { channel: "hue" }), /* @__PURE__ */ jsx(ColorPickerChannelSlider, { channel: "alpha" })]
 	});
 });
 const ColorPickerChannelSliderTrack = forwardRef(function ColorPickerChannelSliderTrack({ className, ...props }, ref) {
@@ -176,12 +218,23 @@ const ColorPickerSwatchGroup = forwardRef(function ColorPickerSwatchGroup({ clas
 		...props
 	});
 });
-const ColorPickerSwatchTrigger = forwardRef(function ColorPickerSwatchTrigger({ className, ...props }, ref) {
+const ColorPickerSwatchTrigger = forwardRef(function ColorPickerSwatchTrigger({ className, children, value, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ColorPicker.SwatchTrigger, {
 		ref,
 		"data-slot": "color-picker-swatch-trigger",
 		className: clsx(ColorPicker_module_default.swatchTrigger, normalizeClassName(className)),
-		...props
+		value,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ColorPicker.Swatch, {
+			"data-slot": "color-picker-swatch",
+			className: ColorPicker_module_default.swatch,
+			value,
+			children: /* @__PURE__ */ jsx(ColorPicker.SwatchIndicator, {
+				"data-slot": "color-picker-swatch-indicator",
+				className: ColorPicker_module_default.swatchIndicator,
+				children: /* @__PURE__ */ jsx(CheckIcon, {})
+			})
+		})
 	});
 });
 const ColorPickerSwatch = forwardRef(function ColorPickerSwatch({ className, ...props }, ref) {
@@ -233,14 +286,12 @@ const ColorPickerView = forwardRef(function ColorPickerView({ className, ...prop
 		...props
 	});
 });
-const ColorPickerHiddenInput = forwardRef(function ColorPickerHiddenInput({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ColorPicker.HiddenInput, {
-		ref,
-		"data-slot": "color-picker-hidden-input",
-		className: normalizeClassName(className),
-		...props
-	});
-});
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(ColorPicker.HiddenInput, { "data-slot": "color-picker-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
 const ColorPicker$1 = Object.assign(ColorPickerRoot, {
 	Root: ColorPickerRoot,
 	RootProvider: ColorPickerRootProvider,
@@ -253,6 +304,7 @@ const ColorPicker$1 = Object.assign(ColorPickerRoot, {
 	AreaBackground: ColorPickerAreaBackground,
 	AreaThumb: ColorPickerAreaThumb,
 	ChannelSlider: ColorPickerChannelSlider,
+	Sliders: ColorPickerSliders,
 	ChannelSliderTrack: ColorPickerChannelSliderTrack,
 	ChannelSliderThumb: ColorPickerChannelSliderThumb,
 	ChannelSliderLabel: ColorPickerChannelSliderLabel,
@@ -268,8 +320,7 @@ const ColorPicker$1 = Object.assign(ColorPickerRoot, {
 	TransparencyGrid: ColorPickerTransparencyGrid,
 	ValueSwatch: ColorPickerValueSwatch,
 	ValueText: ColorPickerValueText,
-	View: ColorPickerView,
-	HiddenInput: ColorPickerHiddenInput
+	View: ColorPickerView
 });
 //#endregion
-export { ColorPicker$1 as ColorPicker, parseColor };
+export { ColorPicker$1 as ColorPicker, parseColor, useColorPicker, useColorPickerContext };

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

@@ -18,6 +18,7 @@ var ColorPicker_module_default = {
 	"label": "kgcaIq_label",
 	"positioner": "kgcaIq_positioner",
 	"root": "kgcaIq_root",
+	"sliders": "kgcaIq_sliders",
 	"swatch": "kgcaIq_swatch",
 	"swatchGroup": "kgcaIq_swatchGroup",
 	"swatchIndicator": "kgcaIq_swatchIndicator",

package/dist/components/color-picker/index.d.ts

@@ -1,2 +1,2 @@
-import { ColorPicker, parseColor } from "./ColorPicker.js";
-export { ColorPicker, parseColor };
+import { ColorPicker, parseColor, useColorPicker, useColorPickerContext } from "./ColorPicker.js";
+export { ColorPicker, parseColor, useColorPicker, useColorPickerContext };

package/dist/components/combobox/Combobox.css

@@ -1,8 +1,10 @@
 @layer ui.components {
   @keyframes mcW7mG_combobox-content-open {
     from {
-      opacity: var(--combobox-content-closed-opacity, 0);
-      transform: scale(var(--combobox-content-closed-scale, var(--scale-popup)));
+      opacity: var(--combobox-content-closed-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--popup-motion-starting-translate-x, 0)
+        var(--popup-motion-starting-translate-y, 0);
+      transform: scale(var(--combobox-content-closed-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -18,8 +20,9 @@
     }
 
     to {
-      opacity: var(--combobox-content-closed-opacity, 0);
-      transform: scale(var(--combobox-content-closed-scale, var(--scale-popup)));
+      opacity: var(--combobox-content-closed-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--popup-motion-ending-translate-x, 0) var(--popup-motion-ending-translate-y, 0);
+      transform: scale(var(--combobox-content-closed-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 
@@ -27,7 +30,7 @@
     box-sizing: border-box;
     width: var(--combobox-width, 16rem);
     max-width: var(--combobox-max-width, 100%);
-    gap: var(--combobox-root-gap, .375rem);
+    gap: var(--combobox-root-gap, var(--spacing-1-5));
     min-width: 0;
     color: var(--combobox-color, var(--color-foreground));
     flex-direction: column;
@@ -56,8 +59,9 @@
     width: 100%;
     min-width: 0;
     color: var(--combobox-color, var(--color-foreground));
-    outline: var(--combobox-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--combobox-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--combobox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--combobox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     transition: background-color var(--combobox-transition, var(--transition-default)),
       border-color var(--combobox-transition, var(--transition-default)),
       outline-color var(--combobox-transition, var(--transition-default));
@@ -65,13 +69,7 @@
     display: flex;
     position: relative;
 
-    &[data-state="open"] {
-      background-color: var(--combobox-bg-active, var(--color-muted));
-      border-color: var(--combobox-focus-ring-color, var(--color-ring));
-      outline-color: var(--combobox-focus-ring-color, var(--color-ring));
-    }
-
-    &[data-focus] {
+    &[data-state="open"], &[data-focus] {
       border-color: var(--combobox-focus-ring-color, var(--color-ring));
       outline-color: var(--combobox-focus-ring-color, var(--color-ring));
     }
@@ -84,24 +82,16 @@
     &[data-disabled] {
       opacity: var(--combobox-disabled-opacity, var(--opacity-disabled));
     }
-
-    &:not([data-disabled]) {
-      @media (hover: hover) {
-        &:hover:not(:has(.mcW7mG_clearTrigger:hover)) {
-          background-color: var(--combobox-bg-hover, var(--color-accent));
-        }
-      }
-    }
   }
 
   .mcW7mG_input {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--combobox-control-height, var(--size-lg));
+    height: var(--combobox-control-height, var(--size-md));
     border-radius: inherit;
-    padding-inline: var(--combobox-input-padding-x-start, .875rem)
-      var(--combobox-input-padding-x-end, 4.25rem);
+    padding-inline: var(--combobox-input-padding-x-start, var(--spacing-3-5))
+      var(--combobox-input-padding-x-end, var(--spacing-3-5));
     color: inherit;
     font: inherit;
     background: none;
@@ -114,10 +104,18 @@
     }
   }
 
-  .mcW7mG_trigger, .mcW7mG_clearTrigger {
+  .mcW7mG_control:has(.mcW7mG_trigger) .mcW7mG_input {
+    padding-inline-end: var(--combobox-input-padding-x-end-with-trigger, 2.75rem);
+  }
+
+  .mcW7mG_control:has(.mcW7mG_clearTrigger) .mcW7mG_input {
+    padding-inline-end: var(--combobox-input-padding-x-end-with-clear, 4.375rem);
+  }
+
+  .mcW7mG_trigger {
     box-sizing: border-box;
-    width: var(--combobox-action-size, 1.5rem);
-    height: var(--combobox-action-size, 1.5rem);
+    width: var(--combobox-action-size, var(--size-xs));
+    height: var(--combobox-action-size, var(--size-xs));
     border-radius: var(--combobox-action-radius, var(--radius-sm));
     background: var(--combobox-action-bg, transparent);
     color: var(--combobox-icon-color, var(--color-muted-foreground));
@@ -138,14 +136,14 @@
     transform: translateY(-50%);
 
     & > svg {
-      width: var(--combobox-icon-size, 1rem);
-      height: var(--combobox-icon-size, 1rem);
+      width: var(--combobox-icon-size, var(--spacing-4));
+      height: var(--combobox-icon-size, var(--spacing-4));
       display: block;
     }
 
     &:focus-visible {
-      outline: var(--combobox-focus-ring-width, var(--border-width-sm)) solid
-        var(--combobox-focus-ring-color, var(--color-ring));
+      outline: var(--combobox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--combobox-focus-ring-color, var(--color-ring));
       outline-offset: var(--combobox-focus-ring-offset, var(--border-width-sm));
     }
 
@@ -164,12 +162,26 @@
   }
 
   .mcW7mG_trigger {
-    right: var(--combobox-action-offset-right, .5rem);
+    inset-inline-end: var(--combobox-action-offset-right, var(--spacing-2));
   }
 
   .mcW7mG_clearTrigger {
-    right: calc(var(--combobox-action-offset-right, .5rem) + var(--combobox-action-size, 1.5rem) +
-        var(--combobox-action-gap, .125rem));
+    --close-button-size: var(--combobox-action-size, var(--size-xs));
+    --close-button-icon-size: var(--combobox-icon-size, var(--spacing-4));
+    --close-button-radius: var(--combobox-action-radius, var(--radius-sm));
+    --close-button-bg: var(--combobox-action-bg, transparent);
+    --close-button-bg-hover: var(--combobox-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--combobox-icon-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--combobox-action-color-hover, var(--color-foreground));
+    --close-button-focus-ring-width: var(--combobox-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)));
+    --close-button-focus-ring-color: var(--combobox-focus-ring-color, var(--color-ring));
+    --close-button-focus-ring-offset: var(--combobox-focus-ring-offset, var(--border-width-sm));
+    --close-button-transition: var(--combobox-transition, var(--transition-default));
+    top: 50%;
+    position: absolute;
+    inset-inline-end: calc(var(--combobox-action-offset-right, var(--spacing-2)) +
+        var(--combobox-action-size, var(--size-xs)) + var(--combobox-action-gap, var(--spacing-0-5)));
+    transform: translateY(-50%);
   }
 
   .mcW7mG_positioner {
@@ -186,7 +198,7 @@
     border: var(--combobox-content-border-width, var(--border-width-sm)) solid
       var(--combobox-content-border-color, var(--color-border));
     border-radius: var(--combobox-radius, var(--radius-md));
-    padding-block: var(--combobox-content-padding-y, var(--spacing-1));
+    padding-block: var(--combobox-content-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
     background-color: var(--combobox-content-bg, var(--color-popover));
     box-shadow: var(--combobox-content-shadow, var(--shadow-lg));
     color: var(--combobox-content-color, var(--color-popover-foreground));
@@ -199,11 +211,15 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: mcW7mG_combobox-content-open var(--combobox-transition, var(--transition-default));
+      animation: mcW7mG_combobox-content-open
+        var(--combobox-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: mcW7mG_combobox-content-closed var(--combobox-transition, var(--transition-default));
+      animation: mcW7mG_combobox-content-closed
+        var(--combobox-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
   }
 
@@ -222,8 +238,8 @@
   }
 
   .mcW7mG_empty {
-    padding-block: var(--combobox-empty-padding-y, .75rem);
-    padding-inline: var(--combobox-empty-padding-x, 1rem);
+    padding-block: var(--combobox-empty-padding-y, var(--spacing-3));
+    padding-inline: var(--combobox-empty-padding-x, var(--spacing-4));
     color: var(--combobox-empty-color, var(--color-muted-foreground));
     font-size: var(--combobox-empty-font-size, var(--text-sm));
     line-height: var(--combobox-empty-line-height, var(--line-height-text-sm));
@@ -240,13 +256,13 @@
 
   .mcW7mG_itemGroupLabel {
     z-index: 1;
-    padding-block: var(--combobox-item-group-label-padding-y, .35rem);
-    padding-inline: var(--combobox-item-group-label-padding-x, .625rem);
+    padding-block: var(--combobox-item-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)));
+    padding-inline: var(--combobox-item-group-label-padding-x, var(--spacing-2-5));
     background-color: var(--combobox-content-bg, var(--color-popover));
-    color: var(--combobox-item-group-label-color, var(--color-muted-foreground));
-    font-size: var(--combobox-item-group-label-font-size, var(--text-xs));
-    font-weight: var(--combobox-item-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--combobox-item-group-label-line-height, var(--line-height-text-xs));
+    color: var(--combobox-item-group-label-color, var(--popup-group-label-color, var(--color-muted-foreground)));
+    font-size: var(--combobox-item-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--combobox-item-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
+    line-height: var(--combobox-item-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
     position: sticky;
     top: 0;
   }
@@ -254,7 +270,7 @@
   .mcW7mG_item {
     box-sizing: border-box;
     width: calc(100% - var(--combobox-item-inset-x, var(--spacing-2)));
-    min-height: var(--combobox-item-min-height, 2rem);
+    min-height: var(--combobox-item-min-height, var(--popup-item-min-height, var(--size-sm)));
     justify-content: space-between;
     align-items: center;
     gap: var(--combobox-item-gap, var(--spacing-2));
@@ -262,13 +278,13 @@
     border: var(--combobox-item-border-width, 0) solid
       var(--combobox-item-border-color, transparent);
     border-radius: var(--combobox-item-radius, var(--radius-sm));
-    padding-block: var(--combobox-item-padding-y, var(--spacing-2));
-    padding-inline: var(--combobox-item-padding-x, .625rem);
+    padding-block: var(--combobox-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--combobox-item-padding-x, var(--popup-item-padding-x-start, var(--spacing-3)));
     background-color: var(--combobox-item-bg, transparent);
     color: var(--combobox-item-color, var(--combobox-content-color, var(--color-foreground)));
     font: inherit;
-    font-size: var(--combobox-item-font-size, var(--text-sm));
-    line-height: var(--combobox-item-line-height, var(--line-height-text-sm));
+    font-size: var(--combobox-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--combobox-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
     cursor: default;
     user-select: none;
     outline: 0;
@@ -300,8 +316,8 @@
   }
 
   .mcW7mG_itemIndicator {
-    width: var(--combobox-item-indicator-size, .75rem);
-    height: var(--combobox-item-indicator-size, .75rem);
+    width: var(--combobox-item-indicator-size, var(--spacing-3));
+    height: var(--combobox-item-indicator-size, var(--spacing-3));
     flex-shrink: 0;
     justify-content: center;
     align-items: center;

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

@@ -1,7 +1,12 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
-import { Combobox } from "@ark-ui/react/combobox";
+import { ComponentProps, ReactNode } from "react";
+import { Combobox, useCombobox, useComboboxContext } from "@ark-ui/react/combobox";
 
 //#region src/components/combobox/Combobox.d.ts
+type ComboboxOptionProps = Omit<ComponentProps<typeof Combobox.Item>, 'asChild' | 'children'> & {
+  children: ReactNode;
+  indicator?: ReactNode | false;
+};
 declare const Combobox$1: Combobox.RootComponent<OverlayPortalProps> & {
   Root: Combobox.RootComponent<OverlayPortalProps>;
   RootProvider: Combobox.RootProviderComponent<OverlayPortalProps>;
@@ -19,6 +24,8 @@ declare const Combobox$1: Combobox.RootComponent<OverlayPortalProps> & {
   Item: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemText: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Option: import("react").ForwardRefExoticComponent<Omit<ComboboxOptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: <T extends unknown>(props: Combobox.ContextProps<T>) => ReactNode;
 };
 //#endregion
-export { Combobox$1 as Combobox };
+export { Combobox$1 as Combobox, useCombobox, useComboboxContext };

package/dist/components/combobox/Combobox.js

@@ -1,11 +1,12 @@
-import { CheckIcon, ChevronUpDownIcon, CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, ChevronUpDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Combobox_module_default from "./Combobox.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Combobox } from "@ark-ui/react/combobox";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox, useCombobox, useComboboxContext } from "@ark-ui/react/combobox";
 //#region src/components/combobox/Combobox.tsx
 const ComboboxRoot = forwardRef(function ComboboxRoot({ className, portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
@@ -56,13 +57,29 @@ const ComboboxInput = forwardRef(function ComboboxInput({ asChild, className, ..
 		...props
 	});
 });
-const ComboboxClearTrigger = forwardRef(function ComboboxClearTrigger({ className, children, ...props }, ref) {
+const ComboboxClearTrigger = forwardRef(function ComboboxClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	const triggerClassName = clsx(Combobox_module_default.clearTrigger, normalizeClassName(className));
+	if (asChild) return /* @__PURE__ */ jsx(Combobox.ClearTrigger, {
+		ref,
+		asChild: true,
+		"data-slot": "combobox-clear-trigger",
+		className: triggerClassName,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(Combobox.ClearTrigger, {
 		ref,
+		asChild: true,
 		"data-slot": "combobox-clear-trigger",
-		className: clsx(Combobox_module_default.clearTrigger, normalizeClassName(className)),
+		className: triggerClassName,
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel ?? (ariaLabelledBy == null ? "Clear selection" : void 0),
+			"aria-labelledby": ariaLabelledBy,
+			children
+		})
 	});
 });
 const ComboboxTrigger = forwardRef(function ComboboxTrigger({ className, children, ...props }, ref) {
@@ -147,6 +164,13 @@ const ComboboxItemIndicator = forwardRef(function ComboboxItemIndicator({ classN
 		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 });
+const ComboboxOption = forwardRef(function ComboboxOption({ children, indicator, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(ComboboxItem, {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(ComboboxItemText, { children }), indicator !== false ? /* @__PURE__ */ jsx(ComboboxItemIndicator, { children: indicator }) : null]
+	});
+});
 const Combobox$1 = Object.assign(ComboboxRoot, {
 	Root: ComboboxRoot,
 	RootProvider: ComboboxRootProvider,
@@ -163,7 +187,9 @@ const Combobox$1 = Object.assign(ComboboxRoot, {
 	ItemGroupLabel: ComboboxItemGroupLabel,
 	Item: ComboboxItem,
 	ItemText: ComboboxItemText,
-	ItemIndicator: ComboboxItemIndicator
+	ItemIndicator: ComboboxItemIndicator,
+	Option: ComboboxOption,
+	Context: Combobox.Context
 });
 //#endregion
-export { Combobox$1 as Combobox };
+export { Combobox$1 as Combobox, useCombobox, useComboboxContext };

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

@@ -1,2 +1,2 @@
-import { Combobox } from "./Combobox.js";
-export { Combobox };
+import { Combobox, useCombobox, useComboboxContext } from "./Combobox.js";
+export { Combobox, useCombobox, useComboboxContext };