@moduix/react 2.5.1 → 2.7.0

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

@@ -1,19 +1,13 @@
-import { Combobox as ComboboxPrimitive } from '@ark-ui/react/combobox';
+import { Combobox as ComboboxPrimitive, type ComboboxRootComponent } from '@ark-ui/react/combobox';
 import { Dialog as DialogPrimitive } from '@ark-ui/react/dialog';
 import type { ComponentProps } from 'react';
-import { type OverlayPortalProps } from '../../internal/overlayPortal';
-import { CloseButton } from '../close-button';
-import { Kbd } from '../kbd';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+import { Kbd } from '../kbd/index.js';
 type CommandPaletteRootProps = ComponentProps<typeof DialogPrimitive.Root> & {
     shortcut?: false | string;
-    shortcutTarget?: Document | HTMLElement | null;
 } & OverlayPortalProps;
 type CommandPaletteRootProviderProps = ComponentProps<typeof DialogPrimitive.RootProvider> & OverlayPortalProps;
-type CommandPaletteSearchProps = ComponentProps<typeof ComboboxPrimitive.Input> & {
-    controlProps?: ComponentProps<typeof ComboboxPrimitive.Control>;
-    clearTriggerProps?: ComponentProps<typeof CloseButton.Root>;
-};
-declare function CommandPaletteRoot({ shortcut, shortcutTarget, lazyMount, unmountOnExit, immediate, onExitComplete, portalled, present, portalRef, skipAnimationOnMount, children, ...props }: CommandPaletteRootProps): import("react").JSX.Element;
+declare function CommandPaletteRoot({ shortcut, lazyMount, unmountOnExit, immediate, onExitComplete, portalled, present, portalRef, skipAnimationOnMount, children, ...props }: CommandPaletteRootProps): import("react").JSX.Element;
 declare function CommandPaletteRootProvider({ lazyMount, portalled, portalRef, unmountOnExit, ...props }: CommandPaletteRootProviderProps): import("react").JSX.Element;
 declare function CommandPaletteKbd({ className, ...props }: ComponentProps<typeof Kbd.Root>): import("react").JSX.Element;
 declare const CommandPalette: typeof CommandPaletteRoot & {
@@ -28,16 +22,11 @@ declare const CommandPalette: typeof CommandPaletteRoot & {
     Description: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     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: ComboboxPrimitive.RootComponent;
+    Combobox: ComboboxRootComponent;
     Control: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Input: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-    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>>;
+    Search: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     List: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Empty: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemGroup: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -3,51 +3,34 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@ark-ui/react/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
 import { ark } from "@ark-ui/react/factory";
+import { isHotKey } from "@zag-js/hotkeys";
 import { clsx } from "clsx";
 import { forwardRef, useEffect } from "react";
-import { CheckIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { CheckIcon, CloseIcon } from "../../internal/icons/ui/index.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
-import { CloseButton } from "../close-button/index.js";
+import CloseButton_module from "../close-button/CloseButton.module.js";
 import { Kbd } from "../kbd/index.js";
 import { ScrollArea } from "../scroll-area/index.js";
 import CommandPalette_module from "./CommandPalette.module.js";
 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;
-    if (!modifier || !key || 2 !== parts.length || event.shiftKey) return false;
-    const eventKey = event.key.toLowerCase();
-    const eventCode = event.code.startsWith('Key') || event.code.startsWith('Digit') ? event.code.slice(event.code.startsWith('Key') ? 3 : 5).toLowerCase() : event.code.toLowerCase();
-    if (eventKey !== key && eventCode !== key) return false;
-    if ('mod' === modifier) return (event.metaKey || event.ctrlKey) && !event.altKey;
-    if ('ctrl' === modifier || 'control' === modifier) return event.ctrlKey && !event.metaKey && !event.altKey;
-    if ('meta' === modifier || 'cmd' === modifier || 'command' === modifier) return event.metaKey && !event.ctrlKey && !event.altKey;
-    if ('alt' === modifier || 'option' === modifier) return event.altKey && !event.metaKey && !event.ctrlKey;
-    return false;
-}
-function isEditableTarget(target) {
-    if (!(target instanceof Element)) return false;
-    return null !== target.closest('input, textarea, select, [contenteditable], [contenteditable="true"]');
-}
-function CommandPaletteRoot({ shortcut = false, shortcutTarget, lazyMount = true, unmountOnExit = true, immediate, onExitComplete, portalled, present, portalRef, skipAnimationOnMount, children, ...props }) {
+function CommandPaletteRoot({ shortcut = false, lazyMount = true, unmountOnExit = true, immediate, onExitComplete, portalled, present, portalRef, skipAnimationOnMount, children, ...props }) {
     const dialog = useDialog(props);
     useEffect(()=>{
-        if (!shortcut || null === shortcutTarget) return;
-        const target = shortcutTarget ?? document;
+        if (!shortcut) return;
         const handleKeyDown = (event)=>{
-            if (event.defaultPrevented || event.repeat || event.isComposing || !isShortcutMatch(event, shortcut) || !dialog.open && isEditableTarget(event.target)) return;
+            if (event.defaultPrevented || event.repeat || event.isComposing || !isHotKey(shortcut, event, {
+                enableOnContentEditable: dialog.open,
+                enableOnFormTags: dialog.open
+            })) return;
             event.preventDefault();
             dialog.setOpen(!dialog.open);
         };
-        const eventListener = handleKeyDown;
-        target.addEventListener('keydown', eventListener);
-        return ()=>target.removeEventListener('keydown', eventListener);
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
     }, [
         dialog,
-        shortcut,
-        shortcutTarget
+        shortcut
     ]);
     return /*#__PURE__*/ jsx(OverlayPortalProvider, {
         portalled: portalled,
@@ -79,18 +62,18 @@ const CommandPalette_CommandPaletteTrigger = /*#__PURE__*/ forwardRef(function({
     return /*#__PURE__*/ jsx(Dialog.Trigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "command-palette-trigger",
-        className: clsx(!asChild && CommandPalette_module.trigger, normalizeClassName(className)),
-        ...props
+        className: clsx(!asChild && CommandPalette_module.trigger, className),
+        ...props,
+        "data-slot": "command-palette-trigger"
     });
 });
 const CommandPalette_CommandPaletteBackdrop = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Dialog.Backdrop, {
             ref: ref,
-            "data-slot": "command-palette-backdrop",
-            className: clsx(CommandPalette_module.backdrop, normalizeClassName(className)),
-            ...props
+            className: clsx(CommandPalette_module.backdrop, className),
+            ...props,
+            "data-slot": "command-palette-backdrop"
         })
     });
 });
@@ -98,18 +81,18 @@ const CommandPalette_CommandPalettePositioner = /*#__PURE__*/ forwardRef(functio
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Dialog.Positioner, {
             ref: ref,
-            "data-slot": "command-palette-positioner",
-            className: clsx(CommandPalette_module.positioner, normalizeClassName(className)),
-            ...props
+            className: clsx(CommandPalette_module.positioner, className),
+            ...props,
+            "data-slot": "command-palette-positioner"
         })
     });
 });
 const CommandPalette_CommandPaletteContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Content, {
         ref: ref,
-        "data-slot": "command-palette-content",
-        className: clsx(CommandPalette_module.content, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.content, className),
+        ...props,
+        "data-slot": "command-palette-content"
     });
 });
 const CommandPalette_CommandPalettePanel = /*#__PURE__*/ forwardRef(function({ children, ...props }, ref) {
@@ -131,33 +114,33 @@ const CommandPalette_CommandPalettePanel = /*#__PURE__*/ forwardRef(function({ c
 const CommandPalette_CommandPaletteTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Title, {
         ref: ref,
-        "data-slot": "command-palette-title",
-        className: clsx(CommandPalette_module.title, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.title, className),
+        ...props,
+        "data-slot": "command-palette-title"
     });
 });
 const CommandPalette_CommandPaletteDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Dialog.Description, {
         ref: ref,
-        "data-slot": "command-palette-description",
-        className: clsx(CommandPalette_module.description, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.description, className),
+        ...props,
+        "data-slot": "command-palette-description"
     });
 });
 const CommandPalette_CommandPaletteHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "command-palette-header",
-        className: clsx(CommandPalette_module.header, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.header, className),
+        ...props,
+        "data-slot": "command-palette-header"
     });
 });
 const CommandPalette_CommandPaletteBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "command-palette-body",
-        className: clsx(CommandPalette_module.body, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.body, className),
+        ...props,
+        "data-slot": "command-palette-body"
     });
 });
 const CommandPalette_CommandPaletteCombobox = /*#__PURE__*/ forwardRef(function({ className, open = true, inputBehavior = 'autohighlight', selectionBehavior = 'preserve', closeOnSelect = true, disableLayer = true, onSelect, ...props }, ref) {
@@ -168,36 +151,35 @@ const CommandPalette_CommandPaletteCombobox = /*#__PURE__*/ forwardRef(function(
     };
     return /*#__PURE__*/ jsx(Combobox.Root, {
         ref: ref,
-        "data-slot": "command-palette-combobox",
-        className: clsx(CommandPalette_module.combobox, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.combobox, className),
         open: open,
         inputBehavior: inputBehavior,
         selectionBehavior: selectionBehavior,
         closeOnSelect: closeOnSelect,
         disableLayer: disableLayer,
         onSelect: handleSelect,
-        ...props
+        ...props,
+        "data-slot": "command-palette-combobox"
     });
 });
 const CommandPalette_CommandPaletteControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Control, {
         ref: ref,
-        "data-slot": "command-palette-control",
-        className: clsx(CommandPalette_module.control, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.control, className),
+        ...props,
+        "data-slot": "command-palette-control"
     });
 });
 const CommandPalette_CommandPaletteInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Input, {
         ref: ref,
-        "data-slot": "command-palette-input",
-        className: clsx(CommandPalette_module.input, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.input, className),
+        ...props,
+        "data-slot": "command-palette-input"
     });
 });
-const CommandPalette_CommandPaletteSearch = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, clearTriggerProps, controlProps, ...props }, ref) {
+const CommandPalette_CommandPaletteSearch = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
     return /*#__PURE__*/ jsxs(CommandPalette_CommandPaletteControl, {
-        ...controlProps,
         children: [
             /*#__PURE__*/ jsx(CommandPalette_CommandPaletteInput, {
                 ref: ref,
@@ -205,51 +187,42 @@ const CommandPalette_CommandPaletteSearch = /*#__PURE__*/ forwardRef(function({
                 "aria-labelledby": ariaLabelledBy,
                 ...props
             }),
-            /*#__PURE__*/ jsx(CommandPalette_CommandPaletteClearTrigger, {
-                ...clearTriggerProps
-            })
+            /*#__PURE__*/ jsx(CommandPalette_CommandPaletteClearTrigger, {})
         ]
     });
 });
-const CommandPalette_CommandPaletteClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, disabled, onClick, onPointerDown, tabIndex, 'aria-controls': ariaControls, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
+const CommandPalette_CommandPaletteClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, onClick, onPointerDown, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Context, {
-        children: (combobox)=>{
-            const inputProps = combobox.getInputProps();
-            const isInvalid = true === inputProps['aria-invalid'] || 'true' === inputProps['aria-invalid'];
-            return /*#__PURE__*/ jsx(CloseButton.Root, {
+        children: (combobox)=>/*#__PURE__*/ jsx(Combobox.ClearTrigger, {
                 ref: ref,
                 asChild: 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: 0 === combobox.inputValue.length,
-                tabIndex: tabIndex ?? -1,
-                "aria-controls": ariaControls ?? inputProps.id,
                 "aria-label": ariaLabel ?? (asChild || null != children || null != ariaLabelledBy ? void 0 : DEFAULT_CLEAR_TRIGGER_LABEL),
                 "aria-labelledby": ariaLabelledBy,
-                className: clsx(CommandPalette_module.clearTrigger, normalizeClassName(className)),
+                className: clsx(CloseButton_module.root, CommandPalette_module.clearTrigger, className),
+                onClick: (event)=>{
+                    onClick?.(event);
+                    if (!event.defaultPrevented) {
+                        event.preventDefault();
+                        combobox.setInputValue('');
+                    }
+                },
                 onPointerDown: (event)=>{
                     onPointerDown?.(event);
                     if (0 === event.button) event.preventDefault();
                 },
-                onClick: (event)=>{
-                    onClick?.(event);
-                    if (!event.defaultPrevented) combobox.setInputValue('');
-                },
-                children: children
-            });
-        }
+                children: children ?? /*#__PURE__*/ jsx(CloseIcon, {})
+            })
     });
 });
 const CommandPalette_CommandPaletteList = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Content, {
         ref: ref,
-        "data-slot": "command-palette-list",
-        className: clsx(CommandPalette_module.list, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.list, className),
         ...props,
+        "data-slot": "command-palette-list",
         children: /*#__PURE__*/ jsx(ScrollArea, {
             "data-slot": "command-palette-scroll-area",
             className: CommandPalette_module.scrollArea,
@@ -268,106 +241,106 @@ const CommandPalette_CommandPaletteList = /*#__PURE__*/ forwardRef(function({ cl
 const CommandPalette_CommandPaletteEmpty = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Empty, {
         ref: ref,
-        "data-slot": "command-palette-empty",
-        className: clsx(CommandPalette_module.empty, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.empty, className),
+        ...props,
+        "data-slot": "command-palette-empty"
     });
 });
 const CommandPalette_CommandPaletteItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.ItemGroup, {
         ref: ref,
-        "data-slot": "command-palette-item-group",
-        className: clsx(CommandPalette_module.itemGroup, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.itemGroup, className),
+        ...props,
+        "data-slot": "command-palette-item-group"
     });
 });
 const CommandPalette_CommandPaletteItemGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.ItemGroupLabel, {
         ref: ref,
-        "data-slot": "command-palette-item-group-label",
-        className: clsx(CommandPalette_module.itemGroupLabel, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.itemGroupLabel, className),
+        ...props,
+        "data-slot": "command-palette-item-group-label"
     });
 });
 const CommandPalette_CommandPaletteItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.Item, {
         ref: ref,
-        "data-slot": "command-palette-item",
-        className: clsx(CommandPalette_module.item, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.item, className),
+        ...props,
+        "data-slot": "command-palette-item"
     });
 });
 const CommandPalette_CommandPaletteItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.ItemText, {
         ref: ref,
-        "data-slot": "command-palette-item-text",
-        className: clsx(CommandPalette_module.itemText, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.itemText, className),
+        ...props,
+        "data-slot": "command-palette-item-text"
     });
 });
 const CommandPalette_CommandPaletteItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Combobox.ItemIndicator, {
         ref: ref,
-        "data-slot": "command-palette-item-indicator",
-        className: clsx(CommandPalette_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemIndicator, className),
         ...props,
+        "data-slot": "command-palette-item-indicator",
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
 });
 const CommandPalette_CommandPaletteItemIcon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "command-palette-item-icon",
-        className: clsx(CommandPalette_module.itemIcon, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.itemIcon, className),
+        ...props,
+        "data-slot": "command-palette-item-icon"
     });
 });
 const CommandPalette_CommandPaletteItemLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "command-palette-item-label",
-        className: clsx(CommandPalette_module.itemLabel, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.itemLabel, className),
+        ...props,
+        "data-slot": "command-palette-item-label"
     });
 });
 const CommandPalette_CommandPaletteItemDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "command-palette-item-description",
-        className: clsx(CommandPalette_module.itemDescription, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.itemDescription, className),
+        ...props,
+        "data-slot": "command-palette-item-description"
     });
 });
 const CommandPalette_CommandPaletteItemMeta = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "command-palette-item-meta",
-        className: clsx(CommandPalette_module.itemMeta, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.itemMeta, className),
+        ...props,
+        "data-slot": "command-palette-item-meta"
     });
 });
 const CommandPalette_CommandPaletteSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         role: "separator",
-        "data-slot": "command-palette-separator",
-        className: clsx(CommandPalette_module.separator, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.separator, className),
+        ...props,
+        "data-slot": "command-palette-separator"
     });
 });
 const CommandPalette_CommandPaletteFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "command-palette-footer",
-        className: clsx(CommandPalette_module.footer, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.footer, className),
+        ...props,
+        "data-slot": "command-palette-footer"
     });
 });
 function CommandPaletteKbd({ className, ...props }) {
     return /*#__PURE__*/ jsx(Kbd.Root, {
-        "data-slot": "command-palette-kbd",
-        className: clsx(CommandPalette_module.kbd, normalizeClassName(className)),
-        ...props
+        className: clsx(CommandPalette_module.kbd, className),
+        ...props,
+        "data-slot": "command-palette-kbd"
     });
 }
 const CommandPalette = Object.assign(CommandPaletteRoot, {

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

@@ -41,7 +41,6 @@
   .backdrop-Y8_IJU {
     z-index: calc(var(--moduix-z-backdrop) + var(--layer-index, 0));
     background-color: var(--moduix-command-palette-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
-    min-height: 100dvh;
     -webkit-backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-command-palette-backdrop-blur, 4px)));
     backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-command-palette-backdrop-blur, 4px)));
     position: fixed;
@@ -127,9 +126,9 @@
   }
 
   .clearTrigger-n6fuk6 {
-    --moduix-close-button-size: var(--moduix-command-palette-clear-size, var(--moduix-size-sm));
+    --moduix-close-button-size: var(--moduix-command-palette-clear-size, var(--moduix-spacing-6));
     --moduix-close-button-radius: var(--moduix-command-palette-clear-radius, var(--moduix-radius-md));
-    --moduix-close-button-icon-size: var(--moduix-command-palette-icon-size, var(--moduix-spacing-4));
+    --moduix-close-button-icon-size: var(--moduix-command-palette-icon-size, var(--moduix-spacing-3));
     --moduix-close-button-bg: transparent;
     --moduix-close-button-bg-hover: var(--moduix-command-palette-clear-bg-hover, var(--moduix-color-accent));
     --moduix-close-button-color: var(--moduix-command-palette-muted-color, var(--moduix-color-muted-foreground));
@@ -192,6 +191,7 @@
     background: none;
     border: 0;
     outline: 0;
+    flex: auto;
     margin: 0;
     padding: 0;
   }
@@ -296,16 +296,8 @@
   }
 
   .item-UA3NPh[data-highlighted] {
-    color: var(--moduix-command-palette-highlight-color, var(--moduix-color-foreground));
-  }
-
-  .item-UA3NPh[data-highlighted]:before {
-    content: "";
-    z-index: -1;
-    border-radius: inherit;
     background-color: var(--moduix-command-palette-highlight-bg, var(--moduix-color-accent));
-    position: absolute;
-    inset: 0;
+    color: var(--moduix-command-palette-highlight-color, var(--moduix-color-foreground));
   }
 
   .item-UA3NPh[data-state="checked"] {
@@ -330,18 +322,13 @@
     display: inline-flex;
   }
 
-  :is(.itemIcon-EO6ViN, .itemIndicator-nhPwW2) > svg {
-    width: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
-    height: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
-  }
-
   .itemIndicator-nhPwW2 {
     background-color: #0000;
     border-color: #0000;
     justify-self: end;
   }
 
-  .itemIndicator-nhPwW2 > svg {
+  .itemIcon-EO6ViN > svg, .itemIndicator-nhPwW2 > svg {
     width: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
     height: var(--moduix-command-palette-item-icon-size, var(--moduix-spacing-4));
   }
@@ -446,5 +433,11 @@
       scale: var(--moduix-command-palette-content-ending-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup)));
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .backdrop-Y8_IJU, .content-EVNfnh {
+      animation: none;
+    }
+  }
 }
 

package/dist/components/container/Container.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Container_module from "./Container.module.js";
 const Container_ContainerRoot = /*#__PURE__*/ forwardRef(function({ size = 'lg', gutter = 'md', className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
@@ -13,7 +12,7 @@ const Container_ContainerRoot = /*#__PURE__*/ forwardRef(function({ size = 'lg',
         "data-slot": "container-root",
         "data-size": size,
         "data-gutter": gutter,
-        className: clsx(Container_module.root, normalizeClassName(className))
+        className: clsx(Container_module.root, className)
     });
 });
 const Container = Object.assign(Container_ContainerRoot, {

package/dist/components/container/Container_module.css

@@ -32,7 +32,7 @@
   }
 
   .root-U4_b43[data-gutter="none"] {
-    --_container-gutter: 0;
+    --_container-gutter: 0px;
   }
 
   .root-U4_b43[data-gutter="sm"] {

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

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