@moduix/react 1.1.1 → 2.0.0

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 };

package/dist/components/command-palette/CommandPalette.css

@@ -69,11 +69,6 @@
   }
 
   ._4OfG0a_content {
-    --command-palette-close-icon-size-effective: var(--command-palette-close-icon-size, var(--command-palette-clear-size, var(--size-sm)));
-    --command-palette-close-offset-effective: var(--command-palette-close-offset, var(--spacing-3));
-    --command-palette-header-padding-inline-end-effective: var(--command-palette-header-padding-inline-end, calc(var(--command-palette-header-padding-x, var(--spacing-4)) +
-          var(--command-palette-close-icon-size-effective) +
-          var(--command-palette-close-offset-effective)));
     box-sizing: border-box;
     width: min(var(--command-palette-width, 37.5rem),
       var(--command-palette-max-width, calc(100vw - var(--spacing-8, 2rem))));
@@ -90,17 +85,18 @@
     outline: 0;
     flex-direction: column;
     display: flex;
-    position: relative;
     overflow: hidden;
 
     &[data-state="open"] {
       animation: _4OfG0a_command-palette-content-in
-        var(--command-palette-transition, var(--transition-default));
+        var(--command-palette-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
       animation: _4OfG0a_command-palette-content-out
-        var(--command-palette-transition, var(--transition-default));
+        var(--command-palette-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
       animation-fill-mode: forwards;
     }
   }
@@ -109,7 +105,6 @@
     gap: var(--command-palette-header-gap, var(--spacing-1));
     padding: var(--command-palette-header-padding-y, var(--spacing-4))
       var(--command-palette-header-padding-x, var(--spacing-4)) 0;
-    padding-inline-end: var(--command-palette-header-padding-inline-end-effective);
     display: grid;
   }
 
@@ -128,58 +123,17 @@
     margin: 0;
   }
 
-  ._4OfG0a_closeTrigger, ._4OfG0a_clearTrigger {
-    box-sizing: border-box;
-    width: var(--command-palette-clear-size, var(--size-sm));
-    height: var(--command-palette-clear-size, var(--size-sm));
-    border-radius: var(--command-palette-clear-radius, var(--radius-md));
-    color: var(--command-palette-muted-color, var(--color-muted-foreground));
-    cursor: pointer;
-    transition: background-color var(--transition-default),
-      color var(--transition-default);
-    background: none;
-    border: 0;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--command-palette-clear-bg-hover, var(--color-accent));
-        color: var(--command-palette-color, var(--color-popover-foreground));
-      }
-    }
-
-    &:focus-visible {
-      outline: var(--command-palette-focus-ring-width, var(--border-width-sm)) solid
-        var(--command-palette-focus-ring-color, var(--color-ring));
-      outline-offset: var(--command-palette-focus-ring-offset, var(--border-width-sm));
-    }
-  }
-
-  ._4OfG0a_closeTrigger {
-    top: var(--command-palette-close-offset-effective);
-    right: var(--command-palette-close-offset-effective);
-    z-index: 1;
-    position: absolute;
-  }
-
-  ._4OfG0a_closeIcon {
-    --close-button-size: var(--command-palette-close-icon-size-effective);
-    --close-button-radius: var(--command-palette-close-icon-radius, var(--command-palette-clear-radius, var(--radius-md)));
-    --close-button-icon-size: var(--command-palette-close-icon-glyph-size, var(--command-palette-icon-size, 1rem));
-    --close-button-bg: var(--command-palette-close-icon-bg, transparent);
+  ._4OfG0a_clearTrigger {
+    --close-button-size: var(--command-palette-clear-size, var(--size-sm));
+    --close-button-radius: var(--command-palette-clear-radius, var(--radius-md));
+    --close-button-icon-size: var(--command-palette-icon-size, 1rem);
+    --close-button-bg: transparent;
     --close-button-bg-hover: var(--command-palette-clear-bg-hover, var(--color-accent));
-    --close-button-color: var(--command-palette-close-icon-color, var(--command-palette-muted-color, var(--color-muted-foreground)));
+    --close-button-color: var(--command-palette-muted-color, var(--color-muted-foreground));
     --close-button-color-hover: var(--command-palette-color, var(--color-popover-foreground));
+    --close-button-focus-ring-width: var(--command-palette-focus-ring-width, var(--border-width-sm));
     --close-button-focus-ring-color: var(--command-palette-focus-ring-color, var(--color-ring));
-    top: var(--command-palette-close-offset-effective);
-    right: var(--command-palette-close-offset-effective);
-    z-index: 1;
-    position: absolute;
+    --close-button-focus-ring-offset: var(--command-palette-focus-ring-offset, var(--border-width-sm));
   }
 
   ._4OfG0a_body {
@@ -206,25 +160,37 @@
     box-sizing: border-box;
     align-items: center;
     gap: var(--command-palette-input-gap, var(--spacing-2));
-    min-height: var(--command-palette-input-height, 4rem);
-    padding: var(--command-palette-control-padding-y, var(--spacing-3))
-      var(--command-palette-control-padding-x, var(--spacing-4));
-    border-bottom: var(--command-palette-divider-width, var(--border-width-sm)) solid
-      var(--command-palette-divider-color, var(--color-border));
+    min-height: var(--command-palette-input-height, var(--size-md));
+    margin: var(--command-palette-control-margin-y, var(--spacing-2))
+      var(--command-palette-control-margin-x, var(--spacing-4))
+      var(--command-palette-control-margin-bottom, var(--spacing-2));
+    border: var(--command-palette-input-border-width, var(--border-width-sm)) solid
+      var(--command-palette-input-border-color, var(--color-border));
+    border-radius: var(--command-palette-input-radius, var(--radius-md));
+    padding: var(--command-palette-control-padding-y, var(--spacing-1))
+      var(--command-palette-control-padding-x, var(--spacing-3));
+    background-color: var(--command-palette-input-bg, var(--color-background));
+    color: var(--command-palette-input-color, var(--color-foreground));
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default);
     flex: none;
     display: flex;
     position: relative;
+
+    &:has(._4OfG0a_input:is([data-invalid], [aria-invalid="true"])) {
+      border-color: var(--command-palette-input-border-color-invalid, var(--color-destructive));
+    }
   }
 
   ._4OfG0a_input {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--command-palette-input-control-height, var(--size-md));
+    height: var(--command-palette-input-control-height, var(--size-sm));
     color: inherit;
     font: inherit;
-    font-size: var(--command-palette-input-font-size, var(--text-lg));
-    line-height: var(--command-palette-input-line-height, var(--line-height-text-lg));
+    font-size: var(--command-palette-input-font-size, var(--text-sm));
+    line-height: var(--command-palette-input-line-height, var(--line-height-text-sm));
     background: none;
     border: 0;
     outline: 0;
@@ -474,19 +440,19 @@
 
   @keyframes _4OfG0a_command-palette-content-in {
     from {
-      opacity: var(--command-palette-content-starting-opacity, 0);
-      translate: var(--command-palette-content-starting-translate-x, 0)
-        var(--command-palette-content-starting-translate-y, -.75rem);
-      scale: var(--command-palette-content-starting-scale, var(--scale-popup));
+      opacity: var(--command-palette-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--command-palette-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--command-palette-content-starting-translate-y, var(--popup-motion-starting-translate-y, -.75rem));
+      scale: var(--command-palette-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
     }
   }
 
   @keyframes _4OfG0a_command-palette-content-out {
     to {
-      opacity: var(--command-palette-content-ending-opacity, 0);
-      translate: var(--command-palette-content-ending-translate-x, 0)
-        var(--command-palette-content-ending-translate-y, -.75rem);
-      scale: var(--command-palette-content-ending-scale, var(--scale-popup));
+      opacity: var(--command-palette-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--command-palette-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--command-palette-content-ending-translate-y, var(--popup-motion-ending-translate-y, -.75rem));
+      scale: var(--command-palette-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
     }
   }
 }

package/dist/components/command-palette/CommandPalette.d.ts

@@ -1,3 +1,4 @@
+import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { Kbd } from "../kbd/Kbd.js";
 import { ComponentProps } from "react";
@@ -10,6 +11,10 @@ type CommandPaletteRootProps = ComponentProps<typeof Dialog.Root> & {
   shortcutTarget?: Document | HTMLElement | null;
 } & OverlayPortalProps;
 type CommandPaletteRootProviderProps = ComponentProps<typeof Dialog.RootProvider> & OverlayPortalProps;
+type CommandPaletteSearchProps = ComponentProps<typeof Combobox.Input> & {
+  controlProps?: ComponentProps<typeof Combobox.Control>;
+  clearTriggerProps?: ComponentProps<typeof CloseButton.Root>;
+};
 declare function CommandPaletteRoot({
   shortcut,
   shortcutTarget,
@@ -42,16 +47,21 @@ declare const CommandPalette: typeof CommandPaletteRoot & {
   Backdrop: import("react").ForwardRefExoticComponent<Omit<Dialog.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Dialog.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Content: import("react").ForwardRefExoticComponent<Omit<Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Panel: import("react").ForwardRefExoticComponent<Omit<Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Title: import("react").ForwardRefExoticComponent<Omit<Dialog.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
   Description: import("react").ForwardRefExoticComponent<Omit<Dialog.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
   Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
   Combobox: Combobox.RootComponent;
   Control: import("react").ForwardRefExoticComponent<Omit<Combobox.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<Combobox.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-  ClearTrigger: import("react").ForwardRefExoticComponent<Omit<Combobox.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Search: import("react").ForwardRefExoticComponent<Omit<CommandPaletteSearchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  ClearTrigger: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    'data-disabled'?: string;
+    'data-part'?: string;
+    'data-scope'?: string;
+    'data-slot'?: string;
+  } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   List: import("react").ForwardRefExoticComponent<Omit<Combobox.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Empty: import("react").ForwardRefExoticComponent<Omit<Combobox.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemGroup: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/command-palette/CommandPalette.js

@@ -1,20 +1,19 @@
-import { CheckIcon, CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import { Kbd } from "../kbd/Kbd.js";
 import { ScrollArea } from "../scroll-area/ScrollArea.js";
 import CommandPalette_module_default from "./CommandPalette.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef, useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@ark-ui/react/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
 //#region src/components/command-palette/CommandPalette.tsx
-const DEFAULT_CLOSE_TRIGGER_LABEL = "Close command palette";
-const DEFAULT_CLOSE_ICON_LABEL = "Close command palette";
 const DEFAULT_CLEAR_TRIGGER_LABEL = "Clear search";
+const DEFAULT_SEARCH_INPUT_LABEL = "Search commands";
 function isShortcutMatch(event, shortcut) {
 	const parts = shortcut.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
 	const [modifier, key] = parts;
@@ -38,9 +37,9 @@ function CommandPaletteRoot({ shortcut = false, shortcutTarget, lazyMount = true
 		if (!shortcut || shortcutTarget === null) return;
 		const target = shortcutTarget ?? document;
 		const handleKeyDown = (event) => {
-			if (event.defaultPrevented || event.isComposing || isEditableTarget(event.target) || !isShortcutMatch(event, shortcut)) return;
+			if (event.defaultPrevented || event.isComposing || !isShortcutMatch(event, shortcut) || !dialog.open && isEditableTarget(event.target)) return;
 			event.preventDefault();
-			dialog.setOpen(true);
+			dialog.setOpen(!dialog.open);
 		};
 		const eventListener = handleKeyDown;
 		target.addEventListener("keydown", eventListener);
@@ -109,6 +108,13 @@ const CommandPaletteContent = forwardRef(function CommandPaletteContent({ classN
 		...props
 	});
 });
+const CommandPalettePanel = forwardRef(function CommandPalettePanel({ children, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CommandPaletteBackdrop, {}), /* @__PURE__ */ jsx(CommandPalettePositioner, { children: /* @__PURE__ */ jsx(CommandPaletteContent, {
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(CommandPaletteBody, { children })
+	}) })] });
+});
 const CommandPaletteTitle = forwardRef(function CommandPaletteTitle({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Dialog.Title, {
 		ref,
@@ -125,31 +131,6 @@ const CommandPaletteDescription = forwardRef(function CommandPaletteDescription(
 		...props
 	});
 });
-const CommandPaletteCloseTrigger = forwardRef(function CommandPaletteCloseTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
-		ref,
-		asChild,
-		"data-slot": "command-palette-close-trigger",
-		"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLOSE_TRIGGER_LABEL : void 0),
-		"aria-labelledby": ariaLabelledBy,
-		className: clsx(!asChild && CommandPalette_module_default.closeTrigger, normalizeClassName(className)),
-		...props,
-		children: children ?? (!asChild ? /* @__PURE__ */ jsx(CloseIcon, { className: CommandPalette_module_default.iconSvg }) : void 0)
-	});
-});
-const CommandPaletteCloseIcon = forwardRef(function CommandPaletteCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_ICON_LABEL, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
-		asChild: true,
-		...props,
-		children: /* @__PURE__ */ jsx(CloseButton.Root, {
-			ref,
-			"data-slot": "command-palette-close-icon",
-			"aria-label": ariaLabel,
-			className: clsx(CommandPalette_module_default.closeIcon, normalizeClassName(className)),
-			children
-		})
-	});
-});
 const CommandPaletteHeader = forwardRef(function CommandPaletteHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {
 		ref,
@@ -201,18 +182,48 @@ const CommandPaletteInput = forwardRef(function CommandPaletteInput({ className,
 		...props
 	});
 });
-const CommandPaletteClearTrigger = forwardRef(function CommandPaletteClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Combobox.ClearTrigger, {
-		ref,
-		asChild,
-		"data-slot": "command-palette-clear-trigger",
-		"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0),
-		"aria-labelledby": ariaLabelledBy,
-		className: clsx(!asChild && CommandPalette_module_default.clearTrigger, normalizeClassName(className)),
-		...props,
-		children: children ?? (!asChild ? /* @__PURE__ */ jsx(CloseIcon, { className: CommandPalette_module_default.iconSvg }) : void 0)
+const CommandPaletteSearch = forwardRef(function CommandPaletteSearch({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, clearTriggerProps, controlProps, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(CommandPaletteControl, {
+		...controlProps,
+		children: [/* @__PURE__ */ jsx(CommandPaletteInput, {
+			ref,
+			"aria-label": ariaLabel ?? (ariaLabelledBy == null ? DEFAULT_SEARCH_INPUT_LABEL : void 0),
+			"aria-labelledby": ariaLabelledBy,
+			...props
+		}), /* @__PURE__ */ jsx(CommandPaletteClearTrigger, { ...clearTriggerProps })]
 	});
 });
+const CommandPaletteClearTrigger = forwardRef(function CommandPaletteClearTrigger({ asChild, className, children, disabled, onClick, onPointerDown, tabIndex, "aria-controls": ariaControls, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.Context, { children: (combobox) => {
+		const inputProps = combobox.getInputProps();
+		const isInvalid = inputProps["aria-invalid"] === true || inputProps["aria-invalid"] === "true";
+		return /* @__PURE__ */ jsx(CloseButton.Root, {
+			ref,
+			asChild,
+			...props,
+			disabled: disabled ?? combobox.disabled,
+			"data-scope": "combobox",
+			"data-part": "clear-trigger",
+			"data-slot": "command-palette-clear-trigger",
+			"data-invalid": isInvalid ? "" : void 0,
+			hidden: combobox.inputValue.length === 0,
+			tabIndex: tabIndex ?? -1,
+			"aria-controls": ariaControls ?? inputProps.id,
+			"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0),
+			"aria-labelledby": ariaLabelledBy,
+			className: clsx(CommandPalette_module_default.clearTrigger, normalizeClassName(className)),
+			onPointerDown: (event) => {
+				onPointerDown?.(event);
+				if (event.button === 0) event.preventDefault();
+			},
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) combobox.setInputValue("");
+			},
+			children
+		});
+	} });
+});
 const CommandPaletteList = forwardRef(function CommandPaletteList({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Combobox.Content, {
 		ref,
@@ -354,15 +365,15 @@ const CommandPalette = Object.assign(CommandPaletteRoot, {
 	Backdrop: CommandPaletteBackdrop,
 	Positioner: CommandPalettePositioner,
 	Content: CommandPaletteContent,
+	Panel: CommandPalettePanel,
 	Title: CommandPaletteTitle,
 	Description: CommandPaletteDescription,
-	CloseTrigger: CommandPaletteCloseTrigger,
-	CloseIcon: CommandPaletteCloseIcon,
 	Header: CommandPaletteHeader,
 	Body: CommandPaletteBody,
 	Combobox: CommandPaletteCombobox,
 	Control: CommandPaletteControl,
 	Input: CommandPaletteInput,
+	Search: CommandPaletteSearch,
 	ClearTrigger: CommandPaletteClearTrigger,
 	List: CommandPaletteList,
 	Empty: CommandPaletteEmpty,

package/dist/components/command-palette/CommandPalette.module.js

@@ -4,8 +4,6 @@ var CommandPalette_module_default = {
 	"backdrop": "_4OfG0a_backdrop",
 	"body": "_4OfG0a_body",
 	"clearTrigger": "_4OfG0a_clearTrigger",
-	"closeIcon": "_4OfG0a_closeIcon",
-	"closeTrigger": "_4OfG0a_closeTrigger",
 	"combobox": "_4OfG0a_combobox",
 	"command-palette-backdrop-in": "_4OfG0a_command-palette-backdrop-in",
 	"command-palette-backdrop-out": "_4OfG0a_command-palette-backdrop-out",

package/dist/components/container/Container.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Container_module_default from "./Container.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/container/Container.tsx
 const ContainerRoot = forwardRef(function ContainerRoot({ size = "lg", gutter = "md", className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.div, {

package/dist/components/date-input/DateInput.css

@@ -2,7 +2,7 @@
   .X3ODua_root {
     align-items: flex-start;
     gap: var(--date-input-gap, var(--spacing-1));
-    width: var(--date-input-width, auto);
+    width: var(--date-input-width, 100%);
     max-width: var(--date-input-max-width, none);
     flex-direction: column;
     display: inline-flex;
@@ -20,6 +20,8 @@
   }
 
   .X3ODua_control {
+    box-sizing: border-box;
+    width: var(--date-input-control-width, 100%);
     min-height: var(--date-input-control-height, var(--size-lg));
     border: var(--date-input-border-width, var(--border-width-sm))
       var(--date-input-border-style, solid) var(--date-input-border-color, var(--color-border));

package/dist/components/date-input/DateInput.d.ts

@@ -1,22 +1,27 @@
-import { ComponentProps } from "react";
-import { DateInput } from "@ark-ui/react/date-input";
+import { ComponentProps, ReactNode } from "react";
+import { DateInput, DateInputDateValue, useDateInput, useDateInputContext } from "@ark-ui/react/date-input";
 
 //#region src/components/date-input/DateInput.d.ts
+type DateInputFormProps = {
+  names?: readonly string[];
+};
 declare function DateInputSeparator({
   className,
   'aria-hidden': ariaHidden,
   role,
   ...props
 }: ComponentProps<'span'>): import("react").JSX.Element;
-declare const DateInput$1: import("react").ForwardRefExoticComponent<Omit<DateInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<DateInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<DateInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DateInput$1: import("react").ForwardRefExoticComponent<Omit<DateInput.RootProps & import("react").RefAttributes<HTMLDivElement> & DateInputFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<DateInput.RootProps & import("react").RefAttributes<HTMLDivElement> & DateInputFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<DateInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & DateInputFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<DateInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<DateInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   SegmentGroup: import("react").ForwardRefExoticComponent<Omit<DateInput.SegmentGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Segment: import("react").ForwardRefExoticComponent<Omit<DateInput.SegmentProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<DateInput.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Segments: import("react").ForwardRefExoticComponent<Omit<Omit<DateInput.SegmentGroupProps & import("react").RefAttributes<HTMLDivElement>, "children" | "asChild">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Separator: typeof DateInputSeparator;
+  Context: (props: DateInput.ContextProps) => ReactNode;
+  SegmentContext: (props: DateInput.SegmentContextProps) => import("react").JSX.Element[];
 };
 //#endregion
-export { DateInput$1 as DateInput };
+export { DateInput$1 as DateInput, type DateInputDateValue, useDateInput, useDateInputContext };

package/dist/components/date-input/DateInput.js

@@ -1,24 +1,28 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import DateInput_module_default from "./DateInput.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { DateInput } from "@ark-ui/react/date-input";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DateInput, useDateInput, useDateInputContext } from "@ark-ui/react/date-input";
 //#region src/components/date-input/DateInput.tsx
-const DateInputRoot = forwardRef(function DateInputRoot({ className, ...props }, ref) {
+const DateInputRoot = forwardRef(function DateInputRoot({ asChild, children, className, names, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DateInput.Root, {
 		ref,
 		"data-slot": "date-input-root",
 		className: clsx(DateInput_module_default.root, normalizeClassName(className)),
-		...props
+		asChild,
+		...props,
+		children: withHiddenInputs(children, asChild, names)
 	});
 });
-const DateInputRootProvider = forwardRef(function DateInputRootProvider({ className, ...props }, ref) {
+const DateInputRootProvider = forwardRef(function DateInputRootProvider({ asChild, children, className, names, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DateInput.RootProvider, {
 		ref,
 		"data-slot": "date-input-root-provider",
 		className: clsx(DateInput_module_default.root, normalizeClassName(className)),
-		...props
+		asChild,
+		...props,
+		children: withHiddenInputs(children, asChild, names)
 	});
 });
 const DateInputLabel = forwardRef(function DateInputLabel({ className, ...props }, ref) {
@@ -53,13 +57,28 @@ const DateInputSegment = forwardRef(function DateInputSegment({ className, ...pr
 		...props
 	});
 });
-const DateInputHiddenInput = forwardRef(function DateInputHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(DateInput.HiddenInput, {
+const DateInputSegments = forwardRef(function DateInputSegments(props, ref) {
+	return /* @__PURE__ */ jsx(DateInputSegmentGroup, {
 		ref,
-		"data-slot": "date-input-hidden-input",
-		...props
+		...props,
+		children: /* @__PURE__ */ jsx(DateInput.SegmentContext, { children: (segment) => /* @__PURE__ */ jsx(DateInputSegment, { segment }) })
 	});
 });
+function withHiddenInputs(children, asChild, names) {
+	const hiddenInputs = /* @__PURE__ */ jsx(DateInputFormInputs, { names });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInputs] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInputs);
+}
+function DateInputFormInputs({ names }) {
+	const dateInput = useDateInputContext();
+	const inputCount = Math.max(dateInput.displayValues.length, names?.length ?? 0, 1);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from({ length: inputCount }, (_, index) => /* @__PURE__ */ jsx(DateInput.HiddenInput, {
+		index,
+		name: names?.[index],
+		"data-slot": "date-input-hidden-input"
+	}, index)) });
+}
 function DateInputSeparator({ className, "aria-hidden": ariaHidden = true, role = "presentation", ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "date-input-separator",
@@ -76,8 +95,10 @@ const DateInput$1 = Object.assign(DateInputRoot, {
 	Control: DateInputControl,
 	SegmentGroup: DateInputSegmentGroup,
 	Segment: DateInputSegment,
-	HiddenInput: DateInputHiddenInput,
-	Separator: DateInputSeparator
+	Segments: DateInputSegments,
+	Separator: DateInputSeparator,
+	Context: DateInput.Context,
+	SegmentContext: DateInput.SegmentContext
 });
 //#endregion
-export { DateInput$1 as DateInput };
+export { DateInput$1 as DateInput, useDateInput, useDateInputContext };

package/dist/components/date-input/index.d.ts

@@ -1,2 +1,2 @@
-import { DateInput } from "./DateInput.js";
-export { DateInput };
+import { DateInput, DateInputDateValue, useDateInput, useDateInputContext } from "./DateInput.js";
+export { DateInput, type DateInputDateValue, useDateInput, useDateInputContext };