@moduix/react 1.1.1 → 2.1.0

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

@@ -4,9 +4,9 @@
     justify-content: center;
     align-items: center;
     gap: var(--command-palette-trigger-gap, var(--spacing-2));
-    min-height: var(--command-palette-trigger-height, var(--size-lg));
-    padding: var(--command-palette-trigger-padding-y, .5rem)
-      var(--command-palette-trigger-padding-x, .875rem);
+    min-height: var(--command-palette-trigger-height, var(--size-md));
+    padding: var(--command-palette-trigger-padding-y, var(--spacing-1))
+      var(--command-palette-trigger-padding-x, var(--spacing-3-5));
     border: var(--command-palette-trigger-border-width, var(--border-width-sm)) solid
       var(--command-palette-trigger-border-color, var(--color-border));
     border-radius: var(--command-palette-trigger-radius, var(--radius-md));
@@ -30,9 +30,10 @@
     }
 
     &: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: calc(var(--command-palette-focus-ring-width, var(--border-width-sm)) * -1);
+      outline: var(--command-palette-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--command-palette-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--command-palette-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) *
+          -1);
     }
   }
 
@@ -69,11 +70,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 +86,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 +106,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 +124,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, var(--spacing-4));
+    --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 {
@@ -190,8 +145,8 @@
   }
 
   ._4OfG0a_iconSvg {
-    width: var(--command-palette-icon-size, 1rem);
-    height: var(--command-palette-icon-size, 1rem);
+    width: var(--command-palette-icon-size, var(--spacing-4));
+    height: var(--command-palette-icon-size, var(--spacing-4));
   }
 
   ._4OfG0a_combobox {
@@ -206,25 +161,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, auto);
     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;
@@ -245,7 +212,7 @@
     padding: 0;
 
     &:not(:empty) {
-      padding: var(--command-palette-empty-padding-y, .75rem)
+      padding: var(--command-palette-empty-padding-y, var(--spacing-3))
         var(--command-palette-empty-padding-x, var(--spacing-4));
       color: var(--command-palette-muted-color, var(--color-muted-foreground));
       font-size: var(--command-palette-empty-font-size, var(--text-sm));
@@ -265,7 +232,7 @@
   ._4OfG0a_scrollArea {
     --scroll-area-radius: 0;
     --scroll-area-scrollbar-margin: var(--command-palette-scrollbar-margin, var(--spacing-1));
-    --scroll-area-scrollbar-size: var(--command-palette-scrollbar-size, .375rem);
+    --scroll-area-scrollbar-size: var(--command-palette-scrollbar-size, var(--spacing-1-5));
     --scroll-area-thumb-bg: var(--command-palette-scrollbar-thumb-bg, var(--color-border));
     --scroll-area-content-padding: var(--command-palette-list-padding-y, var(--spacing-2))
       calc(var(--command-palette-list-padding-x, var(--spacing-2)) +
@@ -306,13 +273,13 @@
 
   ._4OfG0a_itemGroupLabel {
     z-index: 1;
-    padding: var(--command-palette-group-label-padding-y, var(--spacing-1))
+    padding: var(--command-palette-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)))
       var(--command-palette-group-label-padding-x, var(--spacing-3));
     background-color: var(--command-palette-bg, var(--color-popover));
-    color: var(--command-palette-muted-color, var(--color-muted-foreground));
-    font-size: var(--command-palette-group-label-font-size, var(--text-xs));
-    font-weight: var(--command-palette-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--command-palette-group-label-line-height, var(--line-height-text-xs));
+    color: var(--command-palette-group-label-color, var(--popup-group-label-color, var(--command-palette-muted-color, var(--color-muted-foreground))));
+    font-size: var(--command-palette-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--command-palette-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
+    line-height: var(--command-palette-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
     margin: 0;
     display: block;
     position: sticky;
@@ -324,14 +291,14 @@
     z-index: 0;
     align-items: center;
     gap: var(--command-palette-item-gap, var(--spacing-3));
-    min-height: var(--command-palette-item-min-height, 3rem);
-    padding: var(--command-palette-item-padding-y, var(--spacing-2))
-      var(--command-palette-item-padding-x, var(--spacing-3));
+    min-height: var(--command-palette-item-min-height, var(--popup-item-min-height, var(--size-sm)));
+    padding: var(--command-palette-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)))
+      var(--command-palette-item-padding-x, var(--popup-item-padding-x-start, var(--spacing-3)));
     border-radius: var(--command-palette-item-radius, var(--radius-md));
     color: var(--command-palette-item-color, var(--command-palette-color, var(--color-foreground)));
     font: inherit;
-    font-size: var(--command-palette-item-font-size, var(--text-sm));
-    line-height: var(--command-palette-item-line-height, var(--line-height-text-sm));
+    font-size: var(--command-palette-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--command-palette-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
     cursor: default;
     user-select: none;
     outline: 0;
@@ -363,8 +330,8 @@
   }
 
   ._4OfG0a_itemIcon, ._4OfG0a_itemIndicator {
-    width: var(--command-palette-item-icon-box-size, 2rem);
-    height: var(--command-palette-item-icon-box-size, 2rem);
+    width: var(--command-palette-item-icon-box-size, var(--spacing-8));
+    height: var(--command-palette-item-icon-box-size, var(--spacing-8));
     border: var(--command-palette-item-icon-border-width, var(--border-width-sm)) solid
       var(--command-palette-item-icon-border-color, var(--color-border));
     border-radius: var(--command-palette-item-icon-radius, var(--radius-md));
@@ -375,8 +342,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--command-palette-item-icon-size, 1rem);
-      height: var(--command-palette-item-icon-size, 1rem);
+      width: var(--command-palette-item-icon-size, var(--spacing-4));
+      height: var(--command-palette-item-icon-size, var(--spacing-4));
     }
   }
 
@@ -386,8 +353,8 @@
     justify-self: end;
 
     & > svg {
-      width: var(--command-palette-item-icon-size, 1rem);
-      height: var(--command-palette-item-icon-size, 1rem);
+      width: var(--command-palette-item-icon-size, var(--spacing-4));
+      height: var(--command-palette-item-icon-size, var(--spacing-4));
     }
   }
 
@@ -474,19 +441,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,16 +20,19 @@
   }
 
   .X3ODua_control {
-    min-height: var(--date-input-control-height, var(--size-lg));
+    box-sizing: border-box;
+    width: var(--date-input-control-width, 100%);
+    min-height: var(--date-input-control-height, var(--size-md));
     border: var(--date-input-border-width, var(--border-width-sm))
       var(--date-input-border-style, solid) var(--date-input-border-color, var(--color-border));
     border-radius: var(--date-input-radius, var(--radius-md));
-    padding: var(--date-input-padding-y, .5rem) var(--date-input-padding-x, .75rem);
+    padding: var(--date-input-padding-y, var(--spacing-1))
+      var(--date-input-padding-x, var(--spacing-3));
     background-color: var(--date-input-bg, var(--color-background));
     color: var(--date-input-color, var(--color-foreground));
-    outline: var(--date-input-focus-ring-width, var(--date-input-border-width, var(--border-width-sm)))
+    outline: var(--date-input-focus-ring-width, var(--date-input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
       solid transparent;
-    outline-offset: var(--date-input-focus-ring-offset, -1px);
+    outline-offset: var(--date-input-focus-ring-offset, var(--focus-ring-inset-offset));
     transition: border-color var(--date-input-transition, var(--transition-default)),
       outline-color var(--date-input-transition, var(--transition-default)),
       opacity var(--date-input-transition, var(--transition-default));

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