@moduix/react 2.5.0 → 2.6.0

package/dist/components/combobox/Combobox.js

@@ -5,7 +5,6 @@ import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import { CloseButton } from "../close-button/index.js";
 import Combobox_module from "./Combobox.module.js";
@@ -16,7 +15,7 @@ const Combobox_ComboboxRoot = /*#__PURE__*/ forwardRef(function({ className, laz
         children: /*#__PURE__*/ jsx(Combobox.Root, {
             ref: ref,
             "data-slot": "combobox-root",
-            className: clsx(Combobox_module.root, normalizeClassName(className)),
+            className: clsx(Combobox_module.root, className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props
@@ -30,7 +29,7 @@ const Combobox_ComboboxRootProvider = /*#__PURE__*/ forwardRef(function({ classN
         children: /*#__PURE__*/ jsx(Combobox.RootProvider, {
             ref: ref,
             "data-slot": "combobox-root-provider",
-            className: clsx(Combobox_module.root, normalizeClassName(className)),
+            className: clsx(Combobox_module.root, className),
             lazyMount: lazyMount,
             unmountOnExit: unmountOnExit,
             ...props
@@ -41,7 +40,7 @@ const Combobox_ComboboxLabel = /*#__PURE__*/ forwardRef(function({ className, ..
     return /*#__PURE__*/ jsx(Combobox.Label, {
         ref: ref,
         "data-slot": "combobox-label",
-        className: clsx(Combobox_module.label, normalizeClassName(className)),
+        className: clsx(Combobox_module.label, className),
         ...props
     });
 });
@@ -49,7 +48,7 @@ const Combobox_ComboboxControl = /*#__PURE__*/ forwardRef(function({ className,
     return /*#__PURE__*/ jsx(Combobox.Control, {
         ref: ref,
         "data-slot": "combobox-control",
-        className: clsx(Combobox_module.control, normalizeClassName(className)),
+        className: clsx(Combobox_module.control, className),
         ...props
     });
 });
@@ -58,29 +57,21 @@ const Combobox_ComboboxInput = /*#__PURE__*/ forwardRef(function({ asChild, clas
         ref: ref,
         "data-slot": "combobox-input",
         asChild: asChild,
-        className: clsx(!asChild && Combobox_module.input, normalizeClassName(className)),
+        className: clsx(!asChild && Combobox_module.input, className),
         ...props
     });
 });
 const Combobox_ComboboxClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
-    const triggerClassName = clsx(Combobox_module.clearTrigger, normalizeClassName(className));
-    if (asChild) return /*#__PURE__*/ jsx(Combobox.ClearTrigger, {
-        ref: ref,
-        asChild: true,
-        "data-slot": "combobox-clear-trigger",
-        className: triggerClassName,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        ...props,
-        children: children
-    });
+    const triggerClassName = clsx(Combobox_module.clearTrigger, className);
     return /*#__PURE__*/ jsx(Combobox.ClearTrigger, {
         ref: ref,
         asChild: true,
         "data-slot": "combobox-clear-trigger",
         className: triggerClassName,
+        "aria-label": asChild ? ariaLabel : void 0,
+        "aria-labelledby": asChild ? ariaLabelledBy : void 0,
         ...props,
-        children: /*#__PURE__*/ jsx(CloseButton.Root, {
+        children: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
             "aria-label": ariaLabel ?? (null == ariaLabelledBy ? 'Clear selection' : void 0),
             "aria-labelledby": ariaLabelledBy,
             children: children
@@ -91,7 +82,7 @@ const Combobox_ComboboxTrigger = /*#__PURE__*/ forwardRef(function({ className,
     return /*#__PURE__*/ jsx(Combobox.Trigger, {
         ref: ref,
         "data-slot": "combobox-trigger",
-        className: clsx(Combobox_module.trigger, normalizeClassName(className)),
+        className: clsx(Combobox_module.trigger, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(ChevronUpDownIcon, {})
     });
@@ -101,7 +92,7 @@ const Combobox_ComboboxPositioner = /*#__PURE__*/ forwardRef(function({ classNam
         children: /*#__PURE__*/ jsx(Combobox.Positioner, {
             ref: ref,
             "data-slot": "combobox-positioner",
-            className: clsx(Combobox_module.positioner, normalizeClassName(className)),
+            className: clsx(Combobox_module.positioner, className),
             ...props
         })
     });
@@ -110,7 +101,7 @@ const Combobox_ComboboxContent = /*#__PURE__*/ forwardRef(function({ className,
     return /*#__PURE__*/ jsx(Combobox.Content, {
         ref: ref,
         "data-slot": "combobox-content",
-        className: clsx(Combobox_module.content, normalizeClassName(className)),
+        className: clsx(Combobox_module.content, className),
         ...props
     });
 });
@@ -118,7 +109,7 @@ const Combobox_ComboboxEmpty = /*#__PURE__*/ forwardRef(function({ className, ..
     return /*#__PURE__*/ jsx(Combobox.Empty, {
         ref: ref,
         "data-slot": "combobox-empty",
-        className: clsx(Combobox_module.empty, normalizeClassName(className)),
+        className: clsx(Combobox_module.empty, className),
         ...props
     });
 });
@@ -126,7 +117,7 @@ const Combobox_ComboboxStatus = /*#__PURE__*/ forwardRef(function({ className, .
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "combobox-status",
-        className: clsx(Combobox_module.status, normalizeClassName(className)),
+        className: clsx(Combobox_module.status, className),
         ...props
     });
 });
@@ -134,7 +125,7 @@ const Combobox_ComboboxList = /*#__PURE__*/ forwardRef(function({ className, ...
     return /*#__PURE__*/ jsx(Combobox.List, {
         ref: ref,
         "data-slot": "combobox-list",
-        className: clsx(Combobox_module.list, normalizeClassName(className)),
+        className: clsx(Combobox_module.list, className),
         ...props
     });
 });
@@ -142,7 +133,7 @@ const Combobox_ComboboxItemGroup = /*#__PURE__*/ forwardRef(function({ className
     return /*#__PURE__*/ jsx(Combobox.ItemGroup, {
         ref: ref,
         "data-slot": "combobox-item-group",
-        className: clsx(Combobox_module.itemGroup, normalizeClassName(className)),
+        className: clsx(Combobox_module.itemGroup, className),
         ...props
     });
 });
@@ -150,7 +141,7 @@ const Combobox_ComboboxItemGroupLabel = /*#__PURE__*/ forwardRef(function({ clas
     return /*#__PURE__*/ jsx(Combobox.ItemGroupLabel, {
         ref: ref,
         "data-slot": "combobox-item-group-label",
-        className: clsx(Combobox_module.itemGroupLabel, normalizeClassName(className)),
+        className: clsx(Combobox_module.itemGroupLabel, className),
         ...props
     });
 });
@@ -158,7 +149,7 @@ const Combobox_ComboboxItem = /*#__PURE__*/ forwardRef(function({ className, ...
     return /*#__PURE__*/ jsx(Combobox.Item, {
         ref: ref,
         "data-slot": "combobox-item",
-        className: clsx(Combobox_module.item, normalizeClassName(className)),
+        className: clsx(Combobox_module.item, className),
         ...props
     });
 });
@@ -166,7 +157,7 @@ const Combobox_ComboboxItemText = /*#__PURE__*/ forwardRef(function({ className,
     return /*#__PURE__*/ jsx(Combobox.ItemText, {
         ref: ref,
         "data-slot": "combobox-item-text",
-        className: clsx(Combobox_module.itemText, normalizeClassName(className)),
+        className: clsx(Combobox_module.itemText, className),
         ...props
     });
 });
@@ -174,7 +165,7 @@ const Combobox_ComboboxItemIndicator = /*#__PURE__*/ forwardRef(function({ class
     return /*#__PURE__*/ jsx(Combobox.ItemIndicator, {
         ref: ref,
         "data-slot": "combobox-item-indicator",
-        className: clsx(Combobox_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(Combobox_module.itemIndicator, className),
         ...props,
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });

package/dist/components/combobox/Combobox_module.css

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

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,
@@ -80,7 +63,7 @@ const CommandPalette_CommandPaletteTrigger = /*#__PURE__*/ forwardRef(function({
         ref: ref,
         asChild: asChild,
         "data-slot": "command-palette-trigger",
-        className: clsx(!asChild && CommandPalette_module.trigger, normalizeClassName(className)),
+        className: clsx(!asChild && CommandPalette_module.trigger, className),
         ...props
     });
 });
@@ -89,7 +72,7 @@ const CommandPalette_CommandPaletteBackdrop = /*#__PURE__*/ forwardRef(function(
         children: /*#__PURE__*/ jsx(Dialog.Backdrop, {
             ref: ref,
             "data-slot": "command-palette-backdrop",
-            className: clsx(CommandPalette_module.backdrop, normalizeClassName(className)),
+            className: clsx(CommandPalette_module.backdrop, className),
             ...props
         })
     });
@@ -99,7 +82,7 @@ const CommandPalette_CommandPalettePositioner = /*#__PURE__*/ forwardRef(functio
         children: /*#__PURE__*/ jsx(Dialog.Positioner, {
             ref: ref,
             "data-slot": "command-palette-positioner",
-            className: clsx(CommandPalette_module.positioner, normalizeClassName(className)),
+            className: clsx(CommandPalette_module.positioner, className),
             ...props
         })
     });
@@ -108,7 +91,7 @@ const CommandPalette_CommandPaletteContent = /*#__PURE__*/ forwardRef(function({
     return /*#__PURE__*/ jsx(Dialog.Content, {
         ref: ref,
         "data-slot": "command-palette-content",
-        className: clsx(CommandPalette_module.content, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.content, className),
         ...props
     });
 });
@@ -132,7 +115,7 @@ const CommandPalette_CommandPaletteTitle = /*#__PURE__*/ forwardRef(function({ c
     return /*#__PURE__*/ jsx(Dialog.Title, {
         ref: ref,
         "data-slot": "command-palette-title",
-        className: clsx(CommandPalette_module.title, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.title, className),
         ...props
     });
 });
@@ -140,7 +123,7 @@ const CommandPalette_CommandPaletteDescription = /*#__PURE__*/ forwardRef(functi
     return /*#__PURE__*/ jsx(Dialog.Description, {
         ref: ref,
         "data-slot": "command-palette-description",
-        className: clsx(CommandPalette_module.description, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.description, className),
         ...props
     });
 });
@@ -148,7 +131,7 @@ const CommandPalette_CommandPaletteHeader = /*#__PURE__*/ forwardRef(function({
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "command-palette-header",
-        className: clsx(CommandPalette_module.header, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.header, className),
         ...props
     });
 });
@@ -156,7 +139,7 @@ const CommandPalette_CommandPaletteBody = /*#__PURE__*/ forwardRef(function({ cl
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "command-palette-body",
-        className: clsx(CommandPalette_module.body, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.body, className),
         ...props
     });
 });
@@ -169,7 +152,7 @@ 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,
@@ -183,7 +166,7 @@ const CommandPalette_CommandPaletteControl = /*#__PURE__*/ forwardRef(function({
     return /*#__PURE__*/ jsx(Combobox.Control, {
         ref: ref,
         "data-slot": "command-palette-control",
-        className: clsx(CommandPalette_module.control, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.control, className),
         ...props
     });
 });
@@ -191,13 +174,12 @@ const CommandPalette_CommandPaletteInput = /*#__PURE__*/ forwardRef(function({ c
     return /*#__PURE__*/ jsx(Combobox.Input, {
         ref: ref,
         "data-slot": "command-palette-input",
-        className: clsx(CommandPalette_module.input, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.input, className),
         ...props
     });
 });
-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,50 +187,41 @@ 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,
         children: /*#__PURE__*/ jsx(ScrollArea, {
             "data-slot": "command-palette-scroll-area",
@@ -269,7 +242,7 @@ const CommandPalette_CommandPaletteEmpty = /*#__PURE__*/ forwardRef(function({ c
     return /*#__PURE__*/ jsx(Combobox.Empty, {
         ref: ref,
         "data-slot": "command-palette-empty",
-        className: clsx(CommandPalette_module.empty, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.empty, className),
         ...props
     });
 });
@@ -277,7 +250,7 @@ const CommandPalette_CommandPaletteItemGroup = /*#__PURE__*/ forwardRef(function
     return /*#__PURE__*/ jsx(Combobox.ItemGroup, {
         ref: ref,
         "data-slot": "command-palette-item-group",
-        className: clsx(CommandPalette_module.itemGroup, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemGroup, className),
         ...props
     });
 });
@@ -285,7 +258,7 @@ const CommandPalette_CommandPaletteItemGroupLabel = /*#__PURE__*/ forwardRef(fun
     return /*#__PURE__*/ jsx(Combobox.ItemGroupLabel, {
         ref: ref,
         "data-slot": "command-palette-item-group-label",
-        className: clsx(CommandPalette_module.itemGroupLabel, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemGroupLabel, className),
         ...props
     });
 });
@@ -293,7 +266,7 @@ const CommandPalette_CommandPaletteItem = /*#__PURE__*/ forwardRef(function({ cl
     return /*#__PURE__*/ jsx(Combobox.Item, {
         ref: ref,
         "data-slot": "command-palette-item",
-        className: clsx(CommandPalette_module.item, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.item, className),
         ...props
     });
 });
@@ -301,7 +274,7 @@ const CommandPalette_CommandPaletteItemText = /*#__PURE__*/ forwardRef(function(
     return /*#__PURE__*/ jsx(Combobox.ItemText, {
         ref: ref,
         "data-slot": "command-palette-item-text",
-        className: clsx(CommandPalette_module.itemText, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemText, className),
         ...props
     });
 });
@@ -309,7 +282,7 @@ const CommandPalette_CommandPaletteItemIndicator = /*#__PURE__*/ forwardRef(func
     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,
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
     });
@@ -318,7 +291,7 @@ const CommandPalette_CommandPaletteItemIcon = /*#__PURE__*/ forwardRef(function(
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "command-palette-item-icon",
-        className: clsx(CommandPalette_module.itemIcon, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemIcon, className),
         ...props
     });
 });
@@ -326,7 +299,7 @@ const CommandPalette_CommandPaletteItemLabel = /*#__PURE__*/ forwardRef(function
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "command-palette-item-label",
-        className: clsx(CommandPalette_module.itemLabel, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemLabel, className),
         ...props
     });
 });
@@ -334,7 +307,7 @@ const CommandPalette_CommandPaletteItemDescription = /*#__PURE__*/ forwardRef(fu
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "command-palette-item-description",
-        className: clsx(CommandPalette_module.itemDescription, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemDescription, className),
         ...props
     });
 });
@@ -342,7 +315,7 @@ const CommandPalette_CommandPaletteItemMeta = /*#__PURE__*/ forwardRef(function(
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-slot": "command-palette-item-meta",
-        className: clsx(CommandPalette_module.itemMeta, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.itemMeta, className),
         ...props
     });
 });
@@ -351,7 +324,7 @@ const CommandPalette_CommandPaletteSeparator = /*#__PURE__*/ forwardRef(function
         ref: ref,
         role: "separator",
         "data-slot": "command-palette-separator",
-        className: clsx(CommandPalette_module.separator, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.separator, className),
         ...props
     });
 });
@@ -359,14 +332,14 @@ const CommandPalette_CommandPaletteFooter = /*#__PURE__*/ forwardRef(function({
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-slot": "command-palette-footer",
-        className: clsx(CommandPalette_module.footer, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.footer, className),
         ...props
     });
 });
 function CommandPaletteKbd({ className, ...props }) {
     return /*#__PURE__*/ jsx(Kbd.Root, {
         "data-slot": "command-palette-kbd",
-        className: clsx(CommandPalette_module.kbd, normalizeClassName(className)),
+        className: clsx(CommandPalette_module.kbd, className),
         ...props
     });
 }

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