@moduix/react-tailwind 1.0.0

package/dist/components/combobox/Combobox.js

@@ -0,0 +1,208 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox, useCombobox, useComboboxContext, useComboboxItemContext } from "@ark-ui/react/combobox";
+import { ark } from "@ark-ui/react/factory";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, ChevronUpDownIcon } from "../../internal/icons/ui/index.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { CloseButton } from "../close-button/index.js";
+const Combobox_ComboboxRoot = /*#__PURE__*/ forwardRef(function({ className, lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Combobox.Root, {
+            ref: ref,
+            "data-slot": "combobox-root",
+            className: cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', className),
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
+});
+const Combobox_ComboboxRootProvider = /*#__PURE__*/ forwardRef(function({ className, lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Combobox.RootProvider, {
+            ref: ref,
+            "data-slot": "combobox-root-provider",
+            className: cn('box-border flex w-64 max-w-full min-w-0 flex-col gap-1.5 text-foreground', className),
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
+});
+const Combobox_ComboboxLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Label, {
+        ref: ref,
+        "data-slot": "combobox-label",
+        className: cn('inline-flex items-center text-sm font-medium text-foreground select-none data-disabled:opacity-50', className),
+        ...props
+    });
+});
+const Combobox_ComboboxControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Control, {
+        ref: ref,
+        "data-slot": "combobox-control",
+        className: cn('group/combobox-control relative flex w-full min-w-0 items-center rounded-md border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out data-disabled:opacity-50 data-focus:border-ring data-focus:outline-ring data-invalid:border-destructive data-invalid:outline-destructive data-[state=open]:border-ring data-[state=open]:outline-ring motion-reduce:transition-none', className),
+        ...props
+    });
+});
+const Combobox_ComboboxInput = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Input, {
+        ref: ref,
+        "data-slot": "combobox-input",
+        asChild: asChild,
+        className: cn(!asChild && 'm-0 box-border h-control-md w-full min-w-0 rounded-[inherit] border-0 bg-transparent px-3.5 text-inherit outline-0 [font:inherit] group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:pe-[4.375rem] group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-11 group-has-[>[data-slot=combobox-clear-trigger]]/combobox-control:group-has-[>[data-slot=combobox-trigger]]/combobox-control:pe-[4.375rem] placeholder:text-muted-foreground', className),
+        ...props
+    });
+});
+const Combobox_ComboboxClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
+    const triggerClassName = cn('absolute inset-y-0 end-[2.125rem] my-auto size-control-xs transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 motion-reduce:transition-none [&>svg]:size-4', 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: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
+            "aria-label": ariaLabel ?? (null == ariaLabelledBy ? 'Clear selection' : void 0),
+            "aria-labelledby": ariaLabelledBy,
+            children: children
+        })
+    });
+});
+const Combobox_ComboboxTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Trigger, {
+        ref: ref,
+        "data-slot": "combobox-trigger",
+        className: cn('absolute end-2 top-1/2 m-0 box-border inline-flex size-control-xs shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 [line-height:0] text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:cursor-default data-disabled:cursor-default motion-reduce:transition-none [&>svg]:block [&>svg]:size-4 [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:bg-muted [@media(hover:hover)]:[&:not(:disabled):not([data-disabled]):hover]:text-foreground', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronUpDownIcon, {})
+    });
+});
+const Combobox_ComboboxPositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(Combobox.Positioner, {
+            ref: ref,
+            "data-slot": "combobox-positioner",
+            className: cn('z-[var(--z-index)] outline-0', className),
+            ...props
+        })
+    });
+});
+const Combobox_ComboboxContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Content, {
+        ref: ref,
+        "data-slot": "combobox-content",
+        className: cn('z-[calc(60+var(--layer-index,0))] box-border flex max-h-[min(24rem,var(--available-height))] max-w-[var(--available-width)] min-w-[var(--reference-width)] origin-[var(--transform-origin)] scroll-py-1 flex-col overflow-auto overscroll-contain rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-lg outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:[animation-delay:0ms] motion-reduce:[animation-duration:1ms]', className),
+        ...props
+    });
+});
+const Combobox_ComboboxEmpty = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Empty, {
+        ref: ref,
+        "data-slot": "combobox-empty",
+        className: cn('px-4 py-1 text-sm text-muted-foreground', className),
+        ...props
+    });
+});
+const Combobox_ComboboxStatus = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "combobox-status",
+        className: cn('px-4 py-1 text-sm text-muted-foreground', className),
+        ...props
+    });
+});
+const Combobox_ComboboxList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.List, {
+        ref: ref,
+        "data-slot": "combobox-list",
+        className: cn('flex min-h-0 flex-col outline-0 data-empty:hidden', className),
+        ...props
+    });
+});
+const Combobox_ComboboxItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.ItemGroup, {
+        ref: ref,
+        "data-slot": "combobox-item-group",
+        className: cn('flex flex-col [&+&]:mt-2', className),
+        ...props
+    });
+});
+const Combobox_ComboboxItemGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.ItemGroupLabel, {
+        ref: ref,
+        "data-slot": "combobox-item-group-label",
+        className: cn('sticky -top-1 z-1 bg-popover px-2.5 py-1 text-xs font-normal text-muted-foreground', className),
+        ...props
+    });
+});
+const Combobox_ComboboxItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Item, {
+        ref: ref,
+        "data-slot": "combobox-item",
+        className: cn('relative mx-1 box-border flex min-h-control-sm w-[calc(100%-0.5rem)] cursor-default items-center justify-between gap-2 rounded-sm border-0 bg-transparent px-3 py-1 text-sm text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=checked]:text-popover-foreground', className),
+        ...props
+    });
+});
+const Combobox_ComboboxItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.ItemText, {
+        ref: ref,
+        "data-slot": "combobox-item-text",
+        className: cn('min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap', className),
+        ...props
+    });
+});
+const Combobox_ComboboxItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.ItemIndicator, {
+        ref: ref,
+        "data-slot": "combobox-item-indicator",
+        className: cn('inline-flex size-3 shrink-0 items-center justify-center [&>svg]:size-full', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(CheckIcon, {})
+    });
+});
+const Combobox_ComboboxOption = /*#__PURE__*/ forwardRef(function({ children, indicator, ...props }, ref) {
+    return /*#__PURE__*/ jsxs(Combobox_ComboboxItem, {
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(Combobox_ComboboxItemText, {
+                children: children
+            }),
+            false !== indicator ? /*#__PURE__*/ jsx(Combobox_ComboboxItemIndicator, {
+                children: indicator
+            }) : null
+        ]
+    });
+});
+const Combobox_Combobox = Object.assign(Combobox_ComboboxRoot, {
+    Root: Combobox_ComboboxRoot,
+    RootProvider: Combobox_ComboboxRootProvider,
+    Label: Combobox_ComboboxLabel,
+    Control: Combobox_ComboboxControl,
+    Input: Combobox_ComboboxInput,
+    ClearTrigger: Combobox_ComboboxClearTrigger,
+    Trigger: Combobox_ComboboxTrigger,
+    Positioner: Combobox_ComboboxPositioner,
+    Content: Combobox_ComboboxContent,
+    Empty: Combobox_ComboboxEmpty,
+    Status: Combobox_ComboboxStatus,
+    List: Combobox_ComboboxList,
+    ItemGroup: Combobox_ComboboxItemGroup,
+    ItemGroupLabel: Combobox_ComboboxItemGroupLabel,
+    Item: Combobox_ComboboxItem,
+    ItemText: Combobox_ComboboxItemText,
+    ItemIndicator: Combobox_ComboboxItemIndicator,
+    Option: Combobox_ComboboxOption,
+    Context: Combobox.Context,
+    ItemContext: Combobox.ItemContext
+});
+export { Combobox_Combobox as Combobox, useCombobox, useComboboxContext, useComboboxItemContext };

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

@@ -0,0 +1 @@
+export * from './Combobox.js';

package/dist/components/combobox/index.js

@@ -0,0 +1 @@
+export * from "./Combobox.js";

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

@@ -0,0 +1,45 @@
+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.js';
+import { Kbd } from '../kbd/index.js';
+type CommandPaletteRootProps = ComponentProps<typeof DialogPrimitive.Root> & {
+    shortcut?: false | string;
+} & OverlayPortalProps;
+type CommandPaletteRootProviderProps = ComponentProps<typeof DialogPrimitive.RootProvider> & OverlayPortalProps;
+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 & {
+    Root: typeof CommandPaletteRoot;
+    RootProvider: typeof CommandPaletteRootProvider;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Panel: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    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: 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<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>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<ComboboxPrimitive.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemMeta: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Kbd: typeof CommandPaletteKbd;
+};
+export { CommandPalette };

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

@@ -0,0 +1,376 @@
+"use client";
+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 { forwardRef, useEffect } from "react";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, CloseIcon } from "../../internal/icons/ui/index.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import { Kbd } from "../kbd/index.js";
+import { ScrollArea } from "../scroll-area/index.js";
+const DEFAULT_CLEAR_TRIGGER_LABEL = 'Clear search';
+const DEFAULT_SEARCH_INPUT_LABEL = 'Search commands';
+function CommandPaletteRoot({ shortcut = false, lazyMount = true, unmountOnExit = true, immediate, onExitComplete, portalled, present, portalRef, skipAnimationOnMount, children, ...props }) {
+    const dialog = useDialog(props);
+    useEffect(()=>{
+        if (!shortcut) return;
+        const handleKeyDown = (event)=>{
+            if (event.defaultPrevented || event.repeat || event.isComposing || !isHotKey(shortcut, event, {
+                enableOnContentEditable: dialog.open,
+                enableOnFormTags: dialog.open
+            })) return;
+            event.preventDefault();
+            dialog.setOpen(!dialog.open);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
+    }, [
+        dialog,
+        shortcut
+    ]);
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Dialog.RootProvider, {
+            value: dialog,
+            immediate: immediate,
+            lazyMount: lazyMount,
+            onExitComplete: onExitComplete,
+            present: present,
+            skipAnimationOnMount: skipAnimationOnMount,
+            unmountOnExit: unmountOnExit,
+            children: children
+        })
+    });
+}
+function CommandPaletteRootProvider({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+    return /*#__PURE__*/ jsx(OverlayPortalProvider, {
+        portalled: portalled,
+        portalRef: portalRef,
+        children: /*#__PURE__*/ jsx(Dialog.RootProvider, {
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            ...props
+        })
+    });
+}
+const CommandPalette_CommandPaletteTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Trigger, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "command-palette-trigger",
+        className: cn(!asChild && 'inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border border-border bg-background px-3.5 py-1 text-md leading-6 text-foreground transition-[background-color,border-color,color] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring [@media(hover:hover)]:hover:bg-accent', className),
+        ...props
+    });
+});
+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: cn('fixed inset-0 z-[calc(40+var(--layer-index,0))] bg-overlay backdrop-blur-[4px] data-[state=closed]:animate-[moduix-fade-out_200ms_ease-in-out_forwards] data-[state=open]:animate-[moduix-fade-in_200ms_ease-in-out] motion-reduce:animate-none', className),
+            ...props
+        })
+    });
+});
+const CommandPalette_CommandPalettePositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(OverlayPortal, {
+        children: /*#__PURE__*/ jsx(Dialog.Positioner, {
+            ref: ref,
+            "data-slot": "command-palette-positioner",
+            className: cn('fixed inset-0 z-[calc(50+var(--layer-index,0))] grid items-start justify-items-center overflow-hidden overscroll-contain px-4 pt-[10dvh] pb-4', className),
+            ...props
+        })
+    });
+});
+const CommandPalette_CommandPaletteContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Content, {
+        ref: ref,
+        "data-slot": "command-palette-content",
+        className: cn('flex max-h-[min(34rem,calc(100dvh-5rem))] w-[min(37.5rem,calc(100vw-2rem))] origin-top flex-col overflow-hidden rounded-lg border border-border/84 bg-popover bg-linear-to-b from-white/4 to-transparent text-popover-foreground shadow-lg outline-0 data-[state=closed]:animate-moduix-menu-closed data-[state=open]:animate-moduix-menu-open motion-reduce:animate-none', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPalettePanel = /*#__PURE__*/ forwardRef(function({ children, ...props }, ref) {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(CommandPalette_CommandPaletteBackdrop, {}),
+            /*#__PURE__*/ jsx(CommandPalette_CommandPalettePositioner, {
+                children: /*#__PURE__*/ jsx(CommandPalette_CommandPaletteContent, {
+                    ref: ref,
+                    ...props,
+                    children: /*#__PURE__*/ jsx(CommandPalette_CommandPaletteBody, {
+                        children: children
+                    })
+                })
+            })
+        ]
+    });
+});
+const CommandPalette_CommandPaletteTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Title, {
+        ref: ref,
+        "data-slot": "command-palette-title",
+        className: cn('text-md leading-6 font-semibold text-popover-foreground', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Dialog.Description, {
+        ref: ref,
+        "data-slot": "command-palette-description",
+        className: cn('text-sm leading-5 text-muted-foreground', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "command-palette-header",
+        className: cn('grid gap-1 px-4 pt-4', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "command-palette-body",
+        className: cn('flex min-h-0 flex-1 flex-col', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteCombobox = /*#__PURE__*/ forwardRef(function({ className, open = true, inputBehavior = 'autohighlight', selectionBehavior = 'preserve', closeOnSelect = true, disableLayer = true, onSelect, ...props }, ref) {
+    const dialog = useDialogContext();
+    const handleSelect = (details)=>{
+        onSelect?.(details);
+        if (closeOnSelect) dialog.setOpen(false);
+    };
+    return /*#__PURE__*/ jsx(Combobox.Root, {
+        ref: ref,
+        "data-slot": "command-palette-combobox",
+        className: cn('flex min-h-0 flex-1 flex-col overflow-hidden', className),
+        open: open,
+        inputBehavior: inputBehavior,
+        selectionBehavior: selectionBehavior,
+        closeOnSelect: closeOnSelect,
+        disableLayer: disableLayer,
+        onSelect: handleSelect,
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Control, {
+        ref: ref,
+        "data-slot": "command-palette-control",
+        className: cn('relative mx-3 mt-3 flex min-h-control-md flex-none items-center gap-2 rounded-md border border-border bg-background px-3 py-1 text-foreground transition-[background-color,border-color] duration-200 ease-in-out has-[[aria-invalid=true]]:border-destructive has-[[data-invalid]]:border-destructive', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Input, {
+        ref: ref,
+        "data-slot": "command-palette-input",
+        className: cn('h-auto w-full min-w-0 flex-1 bg-transparent text-sm leading-5 text-inherit outline-0 placeholder:text-muted-foreground data-invalid:text-destructive', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteSearch = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
+    return /*#__PURE__*/ jsxs(CommandPalette_CommandPaletteControl, {
+        children: [
+            /*#__PURE__*/ jsx(CommandPalette_CommandPaletteInput, {
+                ref: ref,
+                "aria-label": ariaLabel ?? (null == ariaLabelledBy ? DEFAULT_SEARCH_INPUT_LABEL : void 0),
+                "aria-labelledby": ariaLabelledBy,
+                ...props
+            }),
+            /*#__PURE__*/ jsx(CommandPalette_CommandPaletteClearTrigger, {})
+        ]
+    });
+});
+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)=>/*#__PURE__*/ jsx(Combobox.ClearTrigger, {
+                ref: ref,
+                asChild: asChild,
+                ...props,
+                "data-slot": "command-palette-clear-trigger",
+                hidden: 0 === combobox.inputValue.length,
+                "aria-label": ariaLabel ?? (asChild || null != children || null != ariaLabelledBy ? void 0 : DEFAULT_CLEAR_TRIGGER_LABEL),
+                "aria-labelledby": ariaLabelledBy,
+                className: cn('inline-flex size-6 shrink-0 cursor-pointer appearance-none items-center justify-center rounded-md bg-transparent text-muted-foreground transition-[background-color,color,opacity,translate,scale] duration-200 ease-in-out select-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-3 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-popover-foreground', className),
+                onClick: (event)=>{
+                    onClick?.(event);
+                    if (!event.defaultPrevented) {
+                        event.preventDefault();
+                        combobox.setInputValue('');
+                    }
+                },
+                onPointerDown: (event)=>{
+                    onPointerDown?.(event);
+                    if (0 === event.button) event.preventDefault();
+                },
+                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: cn('group/list flex min-h-0 flex-1 overflow-hidden outline-0', className),
+        ...props,
+        children: /*#__PURE__*/ jsx(ScrollArea, {
+            "data-slot": "command-palette-scroll-area",
+            className: "h-auto min-h-0 flex-1",
+            children: /*#__PURE__*/ jsx(ScrollArea.Viewport, {
+                "data-slot": "command-palette-scroll-viewport",
+                className: "scroll-py-2",
+                children: /*#__PURE__*/ jsx(ScrollArea.Content, {
+                    "data-slot": "command-palette-scroll-content",
+                    className: "min-h-full px-3 py-3 group-data-[empty]/list:p-0",
+                    children: children
+                })
+            })
+        })
+    });
+});
+const CommandPalette_CommandPaletteEmpty = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Empty, {
+        ref: ref,
+        "data-slot": "command-palette-empty",
+        className: cn('[&:not(:empty)]:px-4 [&:not(:empty)]:py-3 [&:not(:empty)]:text-sm [&:not(:empty)]:leading-5 [&:not(:empty)]:text-muted-foreground', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.ItemGroup, {
+        ref: ref,
+        "data-slot": "command-palette-item-group",
+        className: cn('grid gap-1 [&:not(:last-child)]:pb-2', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteItemGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.ItemGroupLabel, {
+        ref: ref,
+        "data-slot": "command-palette-item-group-label",
+        className: cn('sticky top-0 z-1 block bg-popover px-3 py-1 text-xs leading-4 font-normal text-muted-foreground', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.Item, {
+        ref: ref,
+        "data-slot": "command-palette-item",
+        className: cn('relative z-0 grid min-h-control-sm cursor-default grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-3 rounded-md px-3 py-1 text-sm leading-5 text-popover-foreground outline-0 select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.ItemText, {
+        ref: ref,
+        "data-slot": "command-palette-item-text",
+        className: cn('grid min-w-0 gap-1', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Combobox.ItemIndicator, {
+        ref: ref,
+        "data-slot": "command-palette-item-indicator",
+        className: cn('inline-flex size-8 items-center justify-center justify-self-end rounded-md border border-transparent bg-transparent text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', className),
+        ...props,
+        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: cn('inline-flex size-8 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteItemLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-slot": "command-palette-item-label",
+        className: cn('min-w-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteItemDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-slot": "command-palette-item-description",
+        className: cn('min-w-0 overflow-hidden text-xs leading-4 text-ellipsis whitespace-nowrap text-muted-foreground', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteItemMeta = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-slot": "command-palette-item-meta",
+        className: cn('justify-self-end text-xs leading-4 whitespace-nowrap text-muted-foreground', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        role: "separator",
+        "data-slot": "command-palette-separator",
+        className: cn('mx-2 my-2 h-px bg-border', className),
+        ...props
+    });
+});
+const CommandPalette_CommandPaletteFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-slot": "command-palette-footer",
+        className: cn('flex flex-none items-center justify-between gap-3 border-t border-border px-4 py-2 text-xs leading-4 text-muted-foreground', className),
+        ...props
+    });
+});
+function CommandPaletteKbd({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Kbd.Root, {
+        "data-slot": "command-palette-kbd",
+        className: cn('min-h-5 min-w-5 rounded-sm px-1 text-xs leading-4 text-muted-foreground', className),
+        ...props
+    });
+}
+const CommandPalette = Object.assign(CommandPaletteRoot, {
+    Root: CommandPaletteRoot,
+    RootProvider: CommandPaletteRootProvider,
+    Trigger: CommandPalette_CommandPaletteTrigger,
+    Backdrop: CommandPalette_CommandPaletteBackdrop,
+    Positioner: CommandPalette_CommandPalettePositioner,
+    Content: CommandPalette_CommandPaletteContent,
+    Panel: CommandPalette_CommandPalettePanel,
+    Title: CommandPalette_CommandPaletteTitle,
+    Description: CommandPalette_CommandPaletteDescription,
+    Header: CommandPalette_CommandPaletteHeader,
+    Body: CommandPalette_CommandPaletteBody,
+    Combobox: CommandPalette_CommandPaletteCombobox,
+    Control: CommandPalette_CommandPaletteControl,
+    Input: CommandPalette_CommandPaletteInput,
+    Search: CommandPalette_CommandPaletteSearch,
+    ClearTrigger: CommandPalette_CommandPaletteClearTrigger,
+    List: CommandPalette_CommandPaletteList,
+    Empty: CommandPalette_CommandPaletteEmpty,
+    ItemGroup: CommandPalette_CommandPaletteItemGroup,
+    ItemGroupLabel: CommandPalette_CommandPaletteItemGroupLabel,
+    Item: CommandPalette_CommandPaletteItem,
+    ItemText: CommandPalette_CommandPaletteItemText,
+    ItemIndicator: CommandPalette_CommandPaletteItemIndicator,
+    ItemIcon: CommandPalette_CommandPaletteItemIcon,
+    ItemLabel: CommandPalette_CommandPaletteItemLabel,
+    ItemDescription: CommandPalette_CommandPaletteItemDescription,
+    ItemMeta: CommandPalette_CommandPaletteItemMeta,
+    Separator: CommandPalette_CommandPaletteSeparator,
+    Footer: CommandPalette_CommandPaletteFooter,
+    Kbd: CommandPaletteKbd
+});
+export { CommandPalette };

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

@@ -0,0 +1 @@
+export * from './CommandPalette.js';

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

@@ -0,0 +1 @@
+export * from "./CommandPalette.js";