@choco-vanille/ui 1.2.0 → 1.3.1-dev.1

package/dist/components/overlay/alert-dialog/styles/AlertDialog.css.js

@@ -0,0 +1,21 @@
+import '../../../../ui-kit45.css';import '../../../../ui-kit41.css';import '../../../../ui-kit40.css';import '../../../../ui-kit.css';import '../../../../ui-kit4.css';import '../../../../ui-kit6.css';import '../../../../ui-kit3.css';import '../../../../ui-kit8.css';import '../../../../ui-kit13.css';import '../../../../ui-kit14.css';import '../../../../ui-kit12.css';import '../../../../ui-kit10.css';import '../../../../ui-kit5.css';import '../../../../ui-kit7.css';import '../../../../ui-kit11.css';import '../../../../ui-kit9.css';/* empty css                                                              */
+/* empty css                                                               */
+/* empty css                                                                       */
+/* empty css                                                                    */
+/* empty css                                                                     */
+/* empty css                                                                  */
+/* empty css                                                                   */
+/* empty css                                                                     */
+/* empty css                                                                      */
+/* empty css                                                                    */
+/* empty css                                                                     */
+/* empty css                                                                     */
+/* empty css                                            */
+/* empty css                                                      */
+/* empty css                                            */
+/* empty css                               */
+var S = { overlay: "_1toz4gl0", content: "_1bzhpwp0", contentSize: { sm: "_1bzhpwp1", md: "_1bzhpwp2", lg: "_1bzhpwp3", xl: "_1bzhpwp4", "2xl": "_1bzhpwp5", full: "_1bzhpwp6" } };
+export {
+  S as ALERT_DIALOG_STYLES
+};
+//# sourceMappingURL=AlertDialog.css.js.map

package/dist/components/overlay/alert-dialog/styles/AlertDialog.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/components/overlay/alert-dialog/types/AlertDialog.props.d.ts

@@ -0,0 +1,3 @@
+import { DialogProps } from '../../dialog/types/Dialog.props.ts';
+/** Props for the destructive-confirmation `AlertDialog` root. */
+export type AlertDialogProps = DialogProps;

package/dist/components/overlay/alert-dialog/types/AlertDialogCompound.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { default as AlertDialogAction } from '../components/alert-dialog-action/AlertDialogAction.tsx';
+import { default as AlertDialogCancel } from '../components/alert-dialog-cancel/AlertDialogCancel.tsx';
+import { AlertDialogProps } from './AlertDialog.props.ts';
+import { default as DialogBody } from '../../dialog/components/dialog-body/DialogBody.tsx';
+import { default as DialogClose } from '../../dialog/components/dialog-close/DialogClose.tsx';
+import { default as DialogContent } from '../../dialog/components/dialog-content/DialogContent.tsx';
+import { default as DialogDescription } from '../../dialog/components/dialog-description/DialogDescription.tsx';
+import { default as DialogFooter } from '../../dialog/components/dialog-footer/DialogFooter.tsx';
+import { default as DialogHeader } from '../../dialog/components/dialog-header/DialogHeader.tsx';
+import { default as DialogTitle } from '../../dialog/components/dialog-title/DialogTitle.tsx';
+import { default as DialogTrigger } from '../../dialog/components/dialog-trigger/DialogTrigger.tsx';
+export type AlertDialogCompound = FC<AlertDialogProps> & {
+    Trigger: typeof DialogTrigger;
+    Content: typeof DialogContent;
+    Header: typeof DialogHeader;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Close: typeof DialogClose;
+    Action: typeof AlertDialogAction;
+    Cancel: typeof AlertDialogCancel;
+};

package/dist/components/overlay/alert-dialog/types/index.d.ts

@@ -0,0 +1,3 @@
+export type { AlertDialogProps } from './AlertDialog.props.ts';
+export type { AlertDialogCompound } from './AlertDialogCompound.ts';
+export type { DialogSize as AlertDialogSize } from '../../dialog/types/Dialog.types.ts';

package/dist/components/overlay/command/Command.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("@base-ui/react/dialog"),m=require("react"),a=require("./components/command-trigger/CommandTrigger.cjs"),i=require("./components/command-content/CommandContent.cjs"),s=require("./components/command-input/CommandInput.cjs"),u=require("./components/command-list/CommandList.cjs"),c=require("./components/command-group/CommandGroup.cjs"),d=require("./components/command-item/CommandItem.cjs"),C=require("./components/command-empty/CommandEmpty.cjs"),q=require("./components/command-separator/CommandSeparator.cjs"),e=m.memo(({defaultOpen:o=!1,...r})=>t.jsx(n.Dialog.Root,{...r,defaultOpen:o}));e.displayName="Command";e.Trigger=a;e.Content=i;e.Input=s;e.List=u;e.Group=c;e.Item=d;e.Empty=C;e.Separator=q;exports.Command=e;
+//# sourceMappingURL=Command.cjs.map

package/dist/components/overlay/command/Command.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.cjs","sources":["../../../../src/components/overlay/command/Command.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog'\r\nimport { memo } from 'react'\r\n\r\nimport {\r\n    CommandContent,\r\n    CommandEmpty,\r\n    CommandGroup,\r\n    CommandInput,\r\n    CommandItem,\r\n    CommandList,\r\n    CommandSeparator,\r\n    CommandTrigger,\r\n} from '@components/overlay/command/components'\r\nimport type { CommandCompound } from '@components/overlay/command/types'\r\nimport type { CommandProps } from '@components/overlay/command/types/Command.props.ts'\r\n\r\n/**\r\n * A modal command palette for action search and keyboard navigation.\r\n *\r\n * Built on Base UI Dialog for focus-trap, backdrop, Escape-key dismiss and\r\n * portal rendering. Compose with the named sub-components:\r\n *\r\n * - `Command.Trigger` — element that opens the palette.\r\n * - `Command.Content` — the modal panel; creates the search context.\r\n * - `Command.Input` — the combobox search field.\r\n * - `Command.List` — the scrollable results container (`role=\"listbox\"`).\r\n * - `Command.Group` — a labeled section inside the list.\r\n * - `Command.Item` — a single activatable command (`role=\"option\"`).\r\n * - `Command.Empty` — shown when no items match the current search.\r\n * - `Command.Separator` — horizontal divider between groups.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Command>\r\n *   <Command.Trigger>\r\n *     <Button label=\"Open command palette\" variant=\"outlined\" color=\"primary\" />\r\n *   </Command.Trigger>\r\n *   <Command.Content>\r\n *     <Command.Input placeholder=\"Search actions…\" />\r\n *     <Command.List aria-label=\"Commands\">\r\n *       <Command.Group label=\"Actions\">\r\n *         <Command.Item icon=\"lucide:pencil\" shortcut=\"⌘E\" onSelect={() => {}}>\r\n *           Edit profile\r\n *         </Command.Item>\r\n *         <Command.Item icon=\"lucide:settings\" shortcut=\"⌘S\" onSelect={() => {}}>\r\n *           Settings\r\n *         </Command.Item>\r\n *       </Command.Group>\r\n *       <Command.Separator />\r\n *       <Command.Group label=\"Navigation\">\r\n *         <Command.Item icon=\"lucide:home\" onSelect={() => {}}>\r\n *           Go to dashboard\r\n *         </Command.Item>\r\n *       </Command.Group>\r\n *       <Command.Empty>No results found.</Command.Empty>\r\n *     </Command.List>\r\n *   </Command.Content>\r\n * </Command>\r\n * ```\r\n */\r\nconst Command = memo<CommandProps>(({ defaultOpen = false, ...props }) => (\r\n    <BaseDialog.Root\r\n        {...props}\r\n        defaultOpen={defaultOpen}\r\n    />\r\n)) as unknown as CommandCompound\r\n\r\nCommand.displayName = 'Command'\r\nCommand.Trigger = CommandTrigger\r\nCommand.Content = CommandContent\r\nCommand.Input = CommandInput\r\nCommand.List = CommandList\r\nCommand.Group = CommandGroup\r\nCommand.Item = CommandItem\r\nCommand.Empty = CommandEmpty\r\nCommand.Separator = CommandSeparator\r\n\r\nexport { Command }\r\n"],"names":["Command","memo","defaultOpen","props","jsx","BaseDialog","CommandTrigger","CommandContent","CommandInput","CommandList","CommandGroup","CommandItem","CommandEmpty","CommandSeparator"],"mappings":"+nBA4DMA,EAAUC,EAAAA,KAAmB,CAAC,CAAE,YAAAC,EAAc,GAAO,GAAGC,KAC1DC,EAAAA,IAACC,EAAAA,OAAW,KAAX,CACI,GAAGF,EACJ,YAAAD,CAAA,CACJ,CACH,EAEDF,EAAQ,YAAc,UACtBA,EAAQ,QAAUM,EAClBN,EAAQ,QAAUO,EAClBP,EAAQ,MAAQQ,EAChBR,EAAQ,KAAOS,EACfT,EAAQ,MAAQU,EAChBV,EAAQ,KAAOW,EACfX,EAAQ,MAAQY,EAChBZ,EAAQ,UAAYa"}

package/dist/components/overlay/command/Command.d.ts

@@ -0,0 +1,47 @@
+import { CommandCompound } from './types';
+/**
+ * A modal command palette for action search and keyboard navigation.
+ *
+ * Built on Base UI Dialog for focus-trap, backdrop, Escape-key dismiss and
+ * portal rendering. Compose with the named sub-components:
+ *
+ * - `Command.Trigger` — element that opens the palette.
+ * - `Command.Content` — the modal panel; creates the search context.
+ * - `Command.Input` — the combobox search field.
+ * - `Command.List` — the scrollable results container (`role="listbox"`).
+ * - `Command.Group` — a labeled section inside the list.
+ * - `Command.Item` — a single activatable command (`role="option"`).
+ * - `Command.Empty` — shown when no items match the current search.
+ * - `Command.Separator` — horizontal divider between groups.
+ *
+ * @example
+ * ```tsx
+ * <Command>
+ *   <Command.Trigger>
+ *     <Button label="Open command palette" variant="outlined" color="primary" />
+ *   </Command.Trigger>
+ *   <Command.Content>
+ *     <Command.Input placeholder="Search actions…" />
+ *     <Command.List aria-label="Commands">
+ *       <Command.Group label="Actions">
+ *         <Command.Item icon="lucide:pencil" shortcut="⌘E" onSelect={() => {}}>
+ *           Edit profile
+ *         </Command.Item>
+ *         <Command.Item icon="lucide:settings" shortcut="⌘S" onSelect={() => {}}>
+ *           Settings
+ *         </Command.Item>
+ *       </Command.Group>
+ *       <Command.Separator />
+ *       <Command.Group label="Navigation">
+ *         <Command.Item icon="lucide:home" onSelect={() => {}}>
+ *           Go to dashboard
+ *         </Command.Item>
+ *       </Command.Group>
+ *       <Command.Empty>No results found.</Command.Empty>
+ *     </Command.List>
+ *   </Command.Content>
+ * </Command>
+ * ```
+ */
+declare const Command: CommandCompound;
+export { Command };

package/dist/components/overlay/command/Command.js

@@ -0,0 +1,31 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Dialog as p } from "@base-ui/react/dialog";
+import { memo as a } from "react";
+import i from "./components/command-trigger/CommandTrigger.js";
+import n from "./components/command-content/CommandContent.js";
+import e from "./components/command-input/CommandInput.js";
+import f from "./components/command-list/CommandList.js";
+import C from "./components/command-group/CommandGroup.js";
+import d from "./components/command-item/CommandItem.js";
+import s from "./components/command-empty/CommandEmpty.js";
+import g from "./components/command-separator/CommandSeparator.js";
+const m = a(({ defaultOpen: o = !1, ...r }) => /* @__PURE__ */ t(
+  p.Root,
+  {
+    ...r,
+    defaultOpen: o
+  }
+));
+m.displayName = "Command";
+m.Trigger = i;
+m.Content = n;
+m.Input = e;
+m.List = f;
+m.Group = C;
+m.Item = d;
+m.Empty = s;
+m.Separator = g;
+export {
+  m as Command
+};
+//# sourceMappingURL=Command.js.map

package/dist/components/overlay/command/Command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.js","sources":["../../../../src/components/overlay/command/Command.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog'\r\nimport { memo } from 'react'\r\n\r\nimport {\r\n    CommandContent,\r\n    CommandEmpty,\r\n    CommandGroup,\r\n    CommandInput,\r\n    CommandItem,\r\n    CommandList,\r\n    CommandSeparator,\r\n    CommandTrigger,\r\n} from '@components/overlay/command/components'\r\nimport type { CommandCompound } from '@components/overlay/command/types'\r\nimport type { CommandProps } from '@components/overlay/command/types/Command.props.ts'\r\n\r\n/**\r\n * A modal command palette for action search and keyboard navigation.\r\n *\r\n * Built on Base UI Dialog for focus-trap, backdrop, Escape-key dismiss and\r\n * portal rendering. Compose with the named sub-components:\r\n *\r\n * - `Command.Trigger` — element that opens the palette.\r\n * - `Command.Content` — the modal panel; creates the search context.\r\n * - `Command.Input` — the combobox search field.\r\n * - `Command.List` — the scrollable results container (`role=\"listbox\"`).\r\n * - `Command.Group` — a labeled section inside the list.\r\n * - `Command.Item` — a single activatable command (`role=\"option\"`).\r\n * - `Command.Empty` — shown when no items match the current search.\r\n * - `Command.Separator` — horizontal divider between groups.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Command>\r\n *   <Command.Trigger>\r\n *     <Button label=\"Open command palette\" variant=\"outlined\" color=\"primary\" />\r\n *   </Command.Trigger>\r\n *   <Command.Content>\r\n *     <Command.Input placeholder=\"Search actions…\" />\r\n *     <Command.List aria-label=\"Commands\">\r\n *       <Command.Group label=\"Actions\">\r\n *         <Command.Item icon=\"lucide:pencil\" shortcut=\"⌘E\" onSelect={() => {}}>\r\n *           Edit profile\r\n *         </Command.Item>\r\n *         <Command.Item icon=\"lucide:settings\" shortcut=\"⌘S\" onSelect={() => {}}>\r\n *           Settings\r\n *         </Command.Item>\r\n *       </Command.Group>\r\n *       <Command.Separator />\r\n *       <Command.Group label=\"Navigation\">\r\n *         <Command.Item icon=\"lucide:home\" onSelect={() => {}}>\r\n *           Go to dashboard\r\n *         </Command.Item>\r\n *       </Command.Group>\r\n *       <Command.Empty>No results found.</Command.Empty>\r\n *     </Command.List>\r\n *   </Command.Content>\r\n * </Command>\r\n * ```\r\n */\r\nconst Command = memo<CommandProps>(({ defaultOpen = false, ...props }) => (\r\n    <BaseDialog.Root\r\n        {...props}\r\n        defaultOpen={defaultOpen}\r\n    />\r\n)) as unknown as CommandCompound\r\n\r\nCommand.displayName = 'Command'\r\nCommand.Trigger = CommandTrigger\r\nCommand.Content = CommandContent\r\nCommand.Input = CommandInput\r\nCommand.List = CommandList\r\nCommand.Group = CommandGroup\r\nCommand.Item = CommandItem\r\nCommand.Empty = CommandEmpty\r\nCommand.Separator = CommandSeparator\r\n\r\nexport { Command }\r\n"],"names":["Command","memo","defaultOpen","props","jsx","BaseDialog","CommandTrigger","CommandContent","CommandInput","CommandList","CommandGroup","CommandItem","CommandEmpty","CommandSeparator"],"mappings":";;;;;;;;;;;AA4DA,MAAMA,IAAUC,EAAmB,CAAC,EAAE,aAAAC,IAAc,IAAO,GAAGC,QAC1D,gBAAAC;AAAA,EAACC,EAAW;AAAA,EAAX;AAAA,IACI,GAAGF;AAAA,IACJ,aAAAD;AAAA,EAAA;AACJ,CACH;AAEDF,EAAQ,cAAc;AACtBA,EAAQ,UAAUM;AAClBN,EAAQ,UAAUO;AAClBP,EAAQ,QAAQQ;AAChBR,EAAQ,OAAOS;AACfT,EAAQ,QAAQU;AAChBV,EAAQ,OAAOW;AACfX,EAAQ,QAAQY;AAChBZ,EAAQ,YAAYa;"}

package/dist/components/overlay/command/components/command-content/CommandContent.cjs

@@ -0,0 +1,2 @@
+"use strict";const l=require("react/jsx-runtime"),y=require("@base-ui/react/dialog"),o=require("react"),E=require("../../../_shared/components/overlay-backdrop/OverlayBackdrop.cjs"),j=require("../../context/Command.context.cjs"),p=require("../../styles/Command.css.cjs"),M=require("../../../../../utils/cn.cjs"),x=o.memo(({className:D,size:b="md","aria-label":h,"aria-labelledby":d,defaultAriaLabel:w="Command palette",children:C,...I})=>{const[c,S]=o.useState(""),[n,s]=o.useState(void 0),u=o.useId(),m=o.useRef(null),f=o.useRef(c);f.current!==c&&(f.current=c,s(void 0));const A=o.useMemo(()=>({search:c,setSearch:S,activeId:n,setActiveId:s,listId:u,listRef:m}),[c,n,u]),g=h??(d?void 0:w),q=o.useCallback(t=>{const k=m.current;if(!k||t.key!=="ArrowDown"&&t.key!=="ArrowUp"&&t.key!=="Home"&&t.key!=="End"&&t.key!=="Enter")return;const e=Array.from(k.querySelectorAll('[role="option"]:not([hidden]):not([data-disabled])'));if(e.length)if(t.key==="ArrowDown"){t.preventDefault();const i=e.findIndex(a=>a.id===n),r=i<e.length-1?i+1:0;s(e[r].id),e[r].scrollIntoView?.({block:"nearest"})}else if(t.key==="ArrowUp"){t.preventDefault();const i=e.findIndex(a=>a.id===n),r=i>0?i-1:e.length-1;s(e[r].id),e[r].scrollIntoView?.({block:"nearest"})}else t.key==="Home"?(t.preventDefault(),s(e[0].id),e[0].scrollIntoView?.({block:"nearest"})):t.key==="End"?(t.preventDefault(),s(e[e.length-1].id),e[e.length-1].scrollIntoView?.({block:"nearest"})):t.key==="Enter"&&n&&(t.preventDefault(),e.find(r=>r.id===n)?.click())},[n]);return l.jsx(j.CommandContext.Provider,{value:A,children:l.jsxs(y.Dialog.Portal,{children:[l.jsx(E,{}),l.jsx(y.Dialog.Popup,{className:M.cn(p.COMMAND_STYLES.content,p.COMMAND_STYLES.contentSize[b],D),"aria-label":g,"aria-labelledby":d,onKeyDown:q,...I,children:C})]})})});x.displayName="Command.Content";module.exports=x;
+//# sourceMappingURL=CommandContent.cjs.map

package/dist/components/overlay/command/components/command-content/CommandContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandContent.cjs","sources":["../../../../../../src/components/overlay/command/components/command-content/CommandContent.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog'\r\nimport { memo, useCallback, useId, useMemo, useRef, useState, type FC } from 'react'\r\n\r\nimport { OverlayBackdrop } from '@components/overlay/_shared/components/overlay-backdrop'\r\nimport { CommandContext, type CommandContextValue } from '@components/overlay/command/context/Command.context.ts'\r\nimport { COMMAND_STYLES } from '@components/overlay/command/styles/Command.css.ts'\r\nimport type { CommandContentProps } from '@components/overlay/command/components/command-content/types/CommandContent.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * The modal command palette panel.\r\n *\r\n * Renders into a portal with a backdrop. Creates the `CommandContext` that\r\n * provides `search`, `activeId`, `listId` and `listRef` to all descendant\r\n * slots. `Command.Input`, `Command.List`, `Command.Group`, `Command.Item`,\r\n * `Command.Empty` and `Command.Separator` must be rendered inside this slot.\r\n */\r\nconst CommandContent: FC<CommandContentProps> = memo(({\r\n    className,\r\n    size = 'md',\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    defaultAriaLabel = 'Command palette',\r\n    children,\r\n    ...props\r\n}) => {\r\n    const [search, setSearch] = useState('')\r\n    const [activeId, setActiveId] = useState<string | undefined>(undefined)\r\n    const listId = useId()\r\n    const listRef = useRef<HTMLDivElement>(null)\r\n\r\n    // Reset the highlighted item whenever the search query changes so stale\r\n    // positions are never retained after the visible-items set changes.\r\n    const prevSearchRef = useRef(search)\r\n    if (prevSearchRef.current !== search) {\r\n        prevSearchRef.current = search\r\n        setActiveId(undefined)\r\n    }\r\n\r\n    const ctx: CommandContextValue = useMemo(\r\n        () => ({ search, setSearch, activeId, setActiveId, listId, listRef }),\r\n        [search, activeId, listId],\r\n    )\r\n\r\n    // A role=\"dialog\" element must have an accessible name.\r\n    const accessibleName = ariaLabel ?? (ariaLabelledBy ? undefined : defaultAriaLabel)\r\n\r\n    const handleKeyDown = useCallback(\r\n        (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n            const list = listRef.current\r\n            if (!list) {return}\r\n            if (\r\n                event.key !== 'ArrowDown' &&\r\n                event.key !== 'ArrowUp' &&\r\n                event.key !== 'Home' &&\r\n                event.key !== 'End' &&\r\n                event.key !== 'Enter'\r\n            ) {return}\r\n\r\n            // Collect only non-hidden, non-disabled options so that disabled and\r\n            // filtered-out items are transparently skipped by every navigation key.\r\n            const items = Array.from(\r\n                list.querySelectorAll<HTMLElement>(\r\n                    '[role=\"option\"]:not([hidden]):not([data-disabled])',\r\n                ),\r\n            )\r\n            if (!items.length) {return}\r\n\r\n            if (event.key === 'ArrowDown') {\r\n                event.preventDefault()\r\n                const idx = items.findIndex((el) => el.id === activeId)\r\n                // When nothing is highlighted (idx === -1), idx + 1 === 0 — first item.\r\n                const next = idx < items.length - 1 ? idx + 1 : 0\r\n                setActiveId(items[next].id)\r\n                items[next].scrollIntoView?.({ block: 'nearest' })\r\n            } else if (event.key === 'ArrowUp') {\r\n                event.preventDefault()\r\n                const idx = items.findIndex((el) => el.id === activeId)\r\n                // When nothing is highlighted (idx === -1), wrap to last item.\r\n                const prev = idx > 0 ? idx - 1 : items.length - 1\r\n                setActiveId(items[prev].id)\r\n                items[prev].scrollIntoView?.({ block: 'nearest' })\r\n            } else if (event.key === 'Home') {\r\n                // Jump to the first navigable item. preventDefault stops the input\r\n                // cursor from moving to position 0 so the highlight is the sole effect.\r\n                event.preventDefault()\r\n                setActiveId(items[0].id)\r\n                items[0].scrollIntoView?.({ block: 'nearest' })\r\n            } else if (event.key === 'End') {\r\n                // Jump to the last navigable item.\r\n                event.preventDefault()\r\n                setActiveId(items[items.length - 1].id)\r\n                items[items.length - 1].scrollIntoView?.({ block: 'nearest' })\r\n            } else if (event.key === 'Enter') {\r\n                if (activeId) {\r\n                    event.preventDefault()\r\n                    const active = items.find((el) => el.id === activeId)\r\n                    active?.click()\r\n                }\r\n            }\r\n        },\r\n        [activeId],\r\n    )\r\n\r\n    return (\r\n        <CommandContext.Provider value={ctx}>\r\n            <BaseDialog.Portal>\r\n                <OverlayBackdrop />\r\n                <BaseDialog.Popup\r\n                    className={cn(\r\n                        COMMAND_STYLES.content,\r\n                        COMMAND_STYLES.contentSize[size],\r\n                        className,\r\n                    )}\r\n                    aria-label={accessibleName}\r\n                    aria-labelledby={ariaLabelledBy}\r\n                    onKeyDown={handleKeyDown}\r\n                    {...props}\r\n                >\r\n                    {children}\r\n                </BaseDialog.Popup>\r\n            </BaseDialog.Portal>\r\n        </CommandContext.Provider>\r\n    )\r\n})\r\n\r\nCommandContent.displayName = 'Command.Content'\r\n\r\nexport default CommandContent\r\n"],"names":["CommandContent","memo","className","size","ariaLabel","ariaLabelledBy","defaultAriaLabel","children","props","search","setSearch","useState","activeId","setActiveId","listId","useId","listRef","useRef","prevSearchRef","ctx","useMemo","accessibleName","handleKeyDown","useCallback","event","list","items","idx","el","next","prev","jsx","CommandContext","jsxs","BaseDialog","OverlayBackdrop","cn","COMMAND_STYLES"],"mappings":"wTAiBMA,EAA0CC,EAAAA,KAAK,CAAC,CAClD,UAAAC,EACA,KAAAC,EAAO,KACP,aAAcC,EACd,kBAAmBC,EACnB,iBAAAC,EAAmB,kBACnB,SAAAC,EACA,GAAGC,CACP,IAAM,CACF,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAE,EACjC,CAACC,EAAUC,CAAW,EAAIF,EAAAA,SAA6B,MAAS,EAChEG,EAASC,EAAAA,MAAA,EACTC,EAAUC,EAAAA,OAAuB,IAAI,EAIrCC,EAAgBD,EAAAA,OAAOR,CAAM,EAC/BS,EAAc,UAAYT,IAC1BS,EAAc,QAAUT,EACxBI,EAAY,MAAS,GAGzB,MAAMM,EAA2BC,EAAAA,QAC7B,KAAO,CAAE,OAAAX,EAAQ,UAAAC,EAAW,SAAAE,EAAU,YAAAC,EAAa,OAAAC,EAAQ,QAAAE,IAC3D,CAACP,EAAQG,EAAUE,CAAM,CAAA,EAIvBO,EAAiBjB,IAAcC,EAAiB,OAAYC,GAE5DgB,EAAgBC,EAAAA,YACjBC,GAA+C,CAC5C,MAAMC,EAAOT,EAAQ,QAErB,GADI,CAACS,GAEDD,EAAM,MAAQ,aACdA,EAAM,MAAQ,WACdA,EAAM,MAAQ,QACdA,EAAM,MAAQ,OACdA,EAAM,MAAQ,QACf,OAIH,MAAME,EAAQ,MAAM,KAChBD,EAAK,iBACD,oDAAA,CACJ,EAEJ,GAAKC,EAAM,OAEX,GAAIF,EAAM,MAAQ,YAAa,CAC3BA,EAAM,eAAA,EACN,MAAMG,EAAMD,EAAM,UAAWE,GAAOA,EAAG,KAAOhB,CAAQ,EAEhDiB,EAAOF,EAAMD,EAAM,OAAS,EAAIC,EAAM,EAAI,EAChDd,EAAYa,EAAMG,CAAI,EAAE,EAAE,EAC1BH,EAAMG,CAAI,EAAE,iBAAiB,CAAE,MAAO,UAAW,CACrD,SAAWL,EAAM,MAAQ,UAAW,CAChCA,EAAM,eAAA,EACN,MAAMG,EAAMD,EAAM,UAAWE,GAAOA,EAAG,KAAOhB,CAAQ,EAEhDkB,EAAOH,EAAM,EAAIA,EAAM,EAAID,EAAM,OAAS,EAChDb,EAAYa,EAAMI,CAAI,EAAE,EAAE,EAC1BJ,EAAMI,CAAI,EAAE,iBAAiB,CAAE,MAAO,UAAW,CACrD,MAAWN,EAAM,MAAQ,QAGrBA,EAAM,eAAA,EACNX,EAAYa,EAAM,CAAC,EAAE,EAAE,EACvBA,EAAM,CAAC,EAAE,iBAAiB,CAAE,MAAO,UAAW,GACvCF,EAAM,MAAQ,OAErBA,EAAM,eAAA,EACNX,EAAYa,EAAMA,EAAM,OAAS,CAAC,EAAE,EAAE,EACtCA,EAAMA,EAAM,OAAS,CAAC,EAAE,iBAAiB,CAAE,MAAO,UAAW,GACtDF,EAAM,MAAQ,SACjBZ,IACAY,EAAM,eAAA,EACSE,EAAM,KAAME,GAAOA,EAAG,KAAOhB,CAAQ,GAC5C,MAAA,EAGpB,EACA,CAACA,CAAQ,CAAA,EAGb,OACImB,MAACC,EAAAA,eAAe,SAAf,CAAwB,MAAOb,EAC5B,SAAAc,OAACC,EAAAA,OAAW,OAAX,CACG,SAAA,CAAAH,EAAAA,IAACI,EAAA,EAAgB,EACjBJ,EAAAA,IAACG,EAAAA,OAAW,MAAX,CACG,UAAWE,EAAAA,GACPC,EAAAA,eAAe,QACfA,EAAAA,eAAe,YAAYlC,CAAI,EAC/BD,CAAA,EAEJ,aAAYmB,EACZ,kBAAiBhB,EACjB,UAAWiB,EACV,GAAGd,EAEH,SAAAD,CAAA,CAAA,CACL,CAAA,CACJ,CAAA,CACJ,CAER,CAAC,EAEDP,EAAe,YAAc"}

package/dist/components/overlay/command/components/command-content/CommandContent.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { CommandContentProps } from './types/CommandContent.props.ts';
+/**
+ * The modal command palette panel.
+ *
+ * Renders into a portal with a backdrop. Creates the `CommandContext` that
+ * provides `search`, `activeId`, `listId` and `listRef` to all descendant
+ * slots. `Command.Input`, `Command.List`, `Command.Group`, `Command.Item`,
+ * `Command.Empty` and `Command.Separator` must be rendered inside this slot.
+ */
+declare const CommandContent: FC<CommandContentProps>;
+export default CommandContent;

package/dist/components/overlay/command/components/command-content/CommandContent.js

@@ -0,0 +1,68 @@
+import { jsx as s, jsxs as N } from "react/jsx-runtime";
+import { Dialog as u } from "@base-ui/react/dialog";
+import { memo as V, useState as k, useId as v, useRef as y, useMemo as M, useCallback as P } from "react";
+import R from "../../../_shared/components/overlay-backdrop/OverlayBackdrop.js";
+import { CommandContext as j } from "../../context/Command.context.js";
+import { COMMAND_STYLES as b } from "../../styles/Command.css.js";
+import { cn as H } from "../../../../../utils/cn.js";
+const K = V(({
+  className: h,
+  size: w = "md",
+  "aria-label": D,
+  "aria-labelledby": c,
+  defaultAriaLabel: x = "Command palette",
+  children: I,
+  ...C
+}) => {
+  const [i, A] = k(""), [t, n] = k(void 0), d = v(), m = y(null), f = y(i);
+  f.current !== i && (f.current = i, n(void 0));
+  const S = M(
+    () => ({ search: i, setSearch: A, activeId: t, setActiveId: n, listId: d, listRef: m }),
+    [i, t, d]
+  ), g = D ?? (c ? void 0 : x), E = P(
+    (o) => {
+      const p = m.current;
+      if (!p || o.key !== "ArrowDown" && o.key !== "ArrowUp" && o.key !== "Home" && o.key !== "End" && o.key !== "Enter")
+        return;
+      const e = Array.from(
+        p.querySelectorAll(
+          '[role="option"]:not([hidden]):not([data-disabled])'
+        )
+      );
+      if (e.length)
+        if (o.key === "ArrowDown") {
+          o.preventDefault();
+          const l = e.findIndex((a) => a.id === t), r = l < e.length - 1 ? l + 1 : 0;
+          n(e[r].id), e[r].scrollIntoView?.({ block: "nearest" });
+        } else if (o.key === "ArrowUp") {
+          o.preventDefault();
+          const l = e.findIndex((a) => a.id === t), r = l > 0 ? l - 1 : e.length - 1;
+          n(e[r].id), e[r].scrollIntoView?.({ block: "nearest" });
+        } else o.key === "Home" ? (o.preventDefault(), n(e[0].id), e[0].scrollIntoView?.({ block: "nearest" })) : o.key === "End" ? (o.preventDefault(), n(e[e.length - 1].id), e[e.length - 1].scrollIntoView?.({ block: "nearest" })) : o.key === "Enter" && t && (o.preventDefault(), e.find((r) => r.id === t)?.click());
+    },
+    [t]
+  );
+  return /* @__PURE__ */ s(j.Provider, { value: S, children: /* @__PURE__ */ N(u.Portal, { children: [
+    /* @__PURE__ */ s(R, {}),
+    /* @__PURE__ */ s(
+      u.Popup,
+      {
+        className: H(
+          b.content,
+          b.contentSize[w],
+          h
+        ),
+        "aria-label": g,
+        "aria-labelledby": c,
+        onKeyDown: E,
+        ...C,
+        children: I
+      }
+    )
+  ] }) });
+});
+K.displayName = "Command.Content";
+export {
+  K as default
+};
+//# sourceMappingURL=CommandContent.js.map

package/dist/components/overlay/command/components/command-content/CommandContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandContent.js","sources":["../../../../../../src/components/overlay/command/components/command-content/CommandContent.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog'\r\nimport { memo, useCallback, useId, useMemo, useRef, useState, type FC } from 'react'\r\n\r\nimport { OverlayBackdrop } from '@components/overlay/_shared/components/overlay-backdrop'\r\nimport { CommandContext, type CommandContextValue } from '@components/overlay/command/context/Command.context.ts'\r\nimport { COMMAND_STYLES } from '@components/overlay/command/styles/Command.css.ts'\r\nimport type { CommandContentProps } from '@components/overlay/command/components/command-content/types/CommandContent.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * The modal command palette panel.\r\n *\r\n * Renders into a portal with a backdrop. Creates the `CommandContext` that\r\n * provides `search`, `activeId`, `listId` and `listRef` to all descendant\r\n * slots. `Command.Input`, `Command.List`, `Command.Group`, `Command.Item`,\r\n * `Command.Empty` and `Command.Separator` must be rendered inside this slot.\r\n */\r\nconst CommandContent: FC<CommandContentProps> = memo(({\r\n    className,\r\n    size = 'md',\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    defaultAriaLabel = 'Command palette',\r\n    children,\r\n    ...props\r\n}) => {\r\n    const [search, setSearch] = useState('')\r\n    const [activeId, setActiveId] = useState<string | undefined>(undefined)\r\n    const listId = useId()\r\n    const listRef = useRef<HTMLDivElement>(null)\r\n\r\n    // Reset the highlighted item whenever the search query changes so stale\r\n    // positions are never retained after the visible-items set changes.\r\n    const prevSearchRef = useRef(search)\r\n    if (prevSearchRef.current !== search) {\r\n        prevSearchRef.current = search\r\n        setActiveId(undefined)\r\n    }\r\n\r\n    const ctx: CommandContextValue = useMemo(\r\n        () => ({ search, setSearch, activeId, setActiveId, listId, listRef }),\r\n        [search, activeId, listId],\r\n    )\r\n\r\n    // A role=\"dialog\" element must have an accessible name.\r\n    const accessibleName = ariaLabel ?? (ariaLabelledBy ? undefined : defaultAriaLabel)\r\n\r\n    const handleKeyDown = useCallback(\r\n        (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n            const list = listRef.current\r\n            if (!list) {return}\r\n            if (\r\n                event.key !== 'ArrowDown' &&\r\n                event.key !== 'ArrowUp' &&\r\n                event.key !== 'Home' &&\r\n                event.key !== 'End' &&\r\n                event.key !== 'Enter'\r\n            ) {return}\r\n\r\n            // Collect only non-hidden, non-disabled options so that disabled and\r\n            // filtered-out items are transparently skipped by every navigation key.\r\n            const items = Array.from(\r\n                list.querySelectorAll<HTMLElement>(\r\n                    '[role=\"option\"]:not([hidden]):not([data-disabled])',\r\n                ),\r\n            )\r\n            if (!items.length) {return}\r\n\r\n            if (event.key === 'ArrowDown') {\r\n                event.preventDefault()\r\n                const idx = items.findIndex((el) => el.id === activeId)\r\n                // When nothing is highlighted (idx === -1), idx + 1 === 0 — first item.\r\n                const next = idx < items.length - 1 ? idx + 1 : 0\r\n                setActiveId(items[next].id)\r\n                items[next].scrollIntoView?.({ block: 'nearest' })\r\n            } else if (event.key === 'ArrowUp') {\r\n                event.preventDefault()\r\n                const idx = items.findIndex((el) => el.id === activeId)\r\n                // When nothing is highlighted (idx === -1), wrap to last item.\r\n                const prev = idx > 0 ? idx - 1 : items.length - 1\r\n                setActiveId(items[prev].id)\r\n                items[prev].scrollIntoView?.({ block: 'nearest' })\r\n            } else if (event.key === 'Home') {\r\n                // Jump to the first navigable item. preventDefault stops the input\r\n                // cursor from moving to position 0 so the highlight is the sole effect.\r\n                event.preventDefault()\r\n                setActiveId(items[0].id)\r\n                items[0].scrollIntoView?.({ block: 'nearest' })\r\n            } else if (event.key === 'End') {\r\n                // Jump to the last navigable item.\r\n                event.preventDefault()\r\n                setActiveId(items[items.length - 1].id)\r\n                items[items.length - 1].scrollIntoView?.({ block: 'nearest' })\r\n            } else if (event.key === 'Enter') {\r\n                if (activeId) {\r\n                    event.preventDefault()\r\n                    const active = items.find((el) => el.id === activeId)\r\n                    active?.click()\r\n                }\r\n            }\r\n        },\r\n        [activeId],\r\n    )\r\n\r\n    return (\r\n        <CommandContext.Provider value={ctx}>\r\n            <BaseDialog.Portal>\r\n                <OverlayBackdrop />\r\n                <BaseDialog.Popup\r\n                    className={cn(\r\n                        COMMAND_STYLES.content,\r\n                        COMMAND_STYLES.contentSize[size],\r\n                        className,\r\n                    )}\r\n                    aria-label={accessibleName}\r\n                    aria-labelledby={ariaLabelledBy}\r\n                    onKeyDown={handleKeyDown}\r\n                    {...props}\r\n                >\r\n                    {children}\r\n                </BaseDialog.Popup>\r\n            </BaseDialog.Portal>\r\n        </CommandContext.Provider>\r\n    )\r\n})\r\n\r\nCommandContent.displayName = 'Command.Content'\r\n\r\nexport default CommandContent\r\n"],"names":["CommandContent","memo","className","size","ariaLabel","ariaLabelledBy","defaultAriaLabel","children","props","search","setSearch","useState","activeId","setActiveId","listId","useId","listRef","useRef","prevSearchRef","ctx","useMemo","accessibleName","handleKeyDown","useCallback","event","list","items","idx","el","next","prev","jsx","CommandContext","jsxs","BaseDialog","OverlayBackdrop","cn","COMMAND_STYLES"],"mappings":";;;;;;;AAiBA,MAAMA,IAA0CC,EAAK,CAAC;AAAA,EAClD,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAE,GACjC,CAACC,GAAUC,CAAW,IAAIF,EAA6B,MAAS,GAChEG,IAASC,EAAA,GACTC,IAAUC,EAAuB,IAAI,GAIrCC,IAAgBD,EAAOR,CAAM;AACnC,EAAIS,EAAc,YAAYT,MAC1BS,EAAc,UAAUT,GACxBI,EAAY,MAAS;AAGzB,QAAMM,IAA2BC;AAAA,IAC7B,OAAO,EAAE,QAAAX,GAAQ,WAAAC,GAAW,UAAAE,GAAU,aAAAC,GAAa,QAAAC,GAAQ,SAAAE;IAC3D,CAACP,GAAQG,GAAUE,CAAM;AAAA,EAAA,GAIvBO,IAAiBjB,MAAcC,IAAiB,SAAYC,IAE5DgB,IAAgBC;AAAA,IAClB,CAACC,MAA+C;AAC5C,YAAMC,IAAOT,EAAQ;AAErB,UADI,CAACS,KAEDD,EAAM,QAAQ,eACdA,EAAM,QAAQ,aACdA,EAAM,QAAQ,UACdA,EAAM,QAAQ,SACdA,EAAM,QAAQ;AACf;AAIH,YAAME,IAAQ,MAAM;AAAA,QAChBD,EAAK;AAAA,UACD;AAAA,QAAA;AAAA,MACJ;AAEJ,UAAKC,EAAM;AAEX,YAAIF,EAAM,QAAQ,aAAa;AAC3B,UAAAA,EAAM,eAAA;AACN,gBAAMG,IAAMD,EAAM,UAAU,CAACE,MAAOA,EAAG,OAAOhB,CAAQ,GAEhDiB,IAAOF,IAAMD,EAAM,SAAS,IAAIC,IAAM,IAAI;AAChD,UAAAd,EAAYa,EAAMG,CAAI,EAAE,EAAE,GAC1BH,EAAMG,CAAI,EAAE,iBAAiB,EAAE,OAAO,WAAW;AAAA,QACrD,WAAWL,EAAM,QAAQ,WAAW;AAChC,UAAAA,EAAM,eAAA;AACN,gBAAMG,IAAMD,EAAM,UAAU,CAACE,MAAOA,EAAG,OAAOhB,CAAQ,GAEhDkB,IAAOH,IAAM,IAAIA,IAAM,IAAID,EAAM,SAAS;AAChD,UAAAb,EAAYa,EAAMI,CAAI,EAAE,EAAE,GAC1BJ,EAAMI,CAAI,EAAE,iBAAiB,EAAE,OAAO,WAAW;AAAA,QACrD,MAAA,CAAWN,EAAM,QAAQ,UAGrBA,EAAM,eAAA,GACNX,EAAYa,EAAM,CAAC,EAAE,EAAE,GACvBA,EAAM,CAAC,EAAE,iBAAiB,EAAE,OAAO,WAAW,KACvCF,EAAM,QAAQ,SAErBA,EAAM,eAAA,GACNX,EAAYa,EAAMA,EAAM,SAAS,CAAC,EAAE,EAAE,GACtCA,EAAMA,EAAM,SAAS,CAAC,EAAE,iBAAiB,EAAE,OAAO,WAAW,KACtDF,EAAM,QAAQ,WACjBZ,MACAY,EAAM,eAAA,GACSE,EAAM,KAAK,CAACE,MAAOA,EAAG,OAAOhB,CAAQ,GAC5C,MAAA;AAAA,IAGpB;AAAA,IACA,CAACA,CAAQ;AAAA,EAAA;AAGb,SACI,gBAAAmB,EAACC,EAAe,UAAf,EAAwB,OAAOb,GAC5B,UAAA,gBAAAc,EAACC,EAAW,QAAX,EACG,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAgB;AAAA,IACjB,gBAAAJ;AAAA,MAACG,EAAW;AAAA,MAAX;AAAA,QACG,WAAWE;AAAA,UACPC,EAAe;AAAA,UACfA,EAAe,YAAYlC,CAAI;AAAA,UAC/BD;AAAA,QAAA;AAAA,QAEJ,cAAYmB;AAAA,QACZ,mBAAiBhB;AAAA,QACjB,WAAWiB;AAAA,QACV,GAAGd;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,EAAA,CACJ,EAAA,CACJ;AAER,CAAC;AAEDP,EAAe,cAAc;"}

package/dist/components/overlay/command/components/command-content/types/CommandContent.props.d.ts

@@ -0,0 +1,17 @@
+import { Dialog } from '@base-ui/react/dialog';
+import { CommandSize } from '../../../types/Command.types.ts';
+/** Props for `Command.Content`. */
+export type CommandContentProps = Omit<Dialog.Popup.Props, 'children'> & {
+    /**
+     * Width preset for the command panel.
+     * @default 'md'
+     */
+    size?: CommandSize;
+    /**
+     * Accessible name used when neither `aria-label` nor `aria-labelledby` is
+     * provided. Override this for i18n.
+     * @default 'Command palette'
+     */
+    defaultAriaLabel?: string;
+    children?: React.ReactNode;
+};

package/dist/components/overlay/command/components/command-empty/CommandEmpty.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("react/jsx-runtime"),r=require("react"),c=require("./styles/CommandEmpty.css.cjs"),i=require("../../../../../utils/cn.cjs"),e=r.memo(({className:s,children:t,...m})=>o.jsx("div",{className:i.cn(c.COMMAND_EMPTY_STYLES.root,s),"aria-live":"polite",...m,children:t}));e.displayName="Command.Empty";module.exports=e;
+//# sourceMappingURL=CommandEmpty.cjs.map

package/dist/components/overlay/command/components/command-empty/CommandEmpty.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandEmpty.cjs","sources":["../../../../../../src/components/overlay/command/components/command-empty/CommandEmpty.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { COMMAND_EMPTY_STYLES } from '@components/overlay/command/components/command-empty/styles/CommandEmpty.css.ts'\r\nimport type { CommandEmptyProps } from '@components/overlay/command/components/command-empty/types/CommandEmpty.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * Shown inside `Command.List` when no items match the current search query.\r\n *\r\n * Visibility is managed via CSS `:has()` on the list container — no JavaScript\r\n * state is required. The element is always rendered in the DOM; it is hidden\r\n * when at least one `[role=\"option\"]` sibling is not `hidden`.\r\n *\r\n * Must be placed inside `Command.List` as a sibling to `Command.Item` and\r\n * `Command.Group` elements.\r\n */\r\nconst CommandEmpty: FC<CommandEmptyProps> = memo(({ className, children, ...props }) => (\r\n    <div\r\n        className={cn(COMMAND_EMPTY_STYLES.root, className)}\r\n        aria-live={'polite'}\r\n        {...props}\r\n    >\r\n        {children}\r\n    </div>\r\n))\r\n\r\nCommandEmpty.displayName = 'Command.Empty'\r\n\r\nexport default CommandEmpty\r\n"],"names":["CommandEmpty","memo","className","children","props","jsx","cn","COMMAND_EMPTY_STYLES"],"mappings":"yJAgBMA,EAAsCC,EAAAA,KAAK,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,KACxEC,EAAAA,IAAC,MAAA,CACG,UAAWC,EAAAA,GAAGC,uBAAqB,KAAML,CAAS,EAClD,YAAW,SACV,GAAGE,EAEH,SAAAD,CAAA,CACL,CACH,EAEDH,EAAa,YAAc"}

package/dist/components/overlay/command/components/command-empty/CommandEmpty.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { CommandEmptyProps } from './types/CommandEmpty.props.ts';
+/**
+ * Shown inside `Command.List` when no items match the current search query.
+ *
+ * Visibility is managed via CSS `:has()` on the list container — no JavaScript
+ * state is required. The element is always rendered in the DOM; it is hidden
+ * when at least one `[role="option"]` sibling is not `hidden`.
+ *
+ * Must be placed inside `Command.List` as a sibling to `Command.Item` and
+ * `Command.Group` elements.
+ */
+declare const CommandEmpty: FC<CommandEmptyProps>;
+export default CommandEmpty;

package/dist/components/overlay/command/components/command-empty/CommandEmpty.js

@@ -0,0 +1,18 @@
+import { jsx as t } from "react/jsx-runtime";
+import { memo as a } from "react";
+import { COMMAND_EMPTY_STYLES as i } from "./styles/CommandEmpty.css.js";
+import { cn as p } from "../../../../../utils/cn.js";
+const e = a(({ className: m, children: o, ...r }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: p(i.root, m),
+    "aria-live": "polite",
+    ...r,
+    children: o
+  }
+));
+e.displayName = "Command.Empty";
+export {
+  e as default
+};
+//# sourceMappingURL=CommandEmpty.js.map

package/dist/components/overlay/command/components/command-empty/CommandEmpty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandEmpty.js","sources":["../../../../../../src/components/overlay/command/components/command-empty/CommandEmpty.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { COMMAND_EMPTY_STYLES } from '@components/overlay/command/components/command-empty/styles/CommandEmpty.css.ts'\r\nimport type { CommandEmptyProps } from '@components/overlay/command/components/command-empty/types/CommandEmpty.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * Shown inside `Command.List` when no items match the current search query.\r\n *\r\n * Visibility is managed via CSS `:has()` on the list container — no JavaScript\r\n * state is required. The element is always rendered in the DOM; it is hidden\r\n * when at least one `[role=\"option\"]` sibling is not `hidden`.\r\n *\r\n * Must be placed inside `Command.List` as a sibling to `Command.Item` and\r\n * `Command.Group` elements.\r\n */\r\nconst CommandEmpty: FC<CommandEmptyProps> = memo(({ className, children, ...props }) => (\r\n    <div\r\n        className={cn(COMMAND_EMPTY_STYLES.root, className)}\r\n        aria-live={'polite'}\r\n        {...props}\r\n    >\r\n        {children}\r\n    </div>\r\n))\r\n\r\nCommandEmpty.displayName = 'Command.Empty'\r\n\r\nexport default CommandEmpty\r\n"],"names":["CommandEmpty","memo","className","children","props","jsx","cn","COMMAND_EMPTY_STYLES"],"mappings":";;;;AAgBA,MAAMA,IAAsCC,EAAK,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,QACxE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAGC,EAAqB,MAAML,CAAS;AAAA,IAClD,aAAW;AAAA,IACV,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL,CACH;AAEDH,EAAa,cAAc;"}

package/dist/components/overlay/command/components/command-empty/styles/CommandEmpty.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit149.css');require('../../../../../../ui-kit148.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                         */;/* empty css                                  */var e={root:"_15bl8t20"};exports.COMMAND_EMPTY_STYLES=e;
+//# sourceMappingURL=CommandEmpty.css.cjs.map

package/dist/components/overlay/command/components/command-empty/styles/CommandEmpty.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandEmpty.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/overlay/command/components/command-empty/styles/CommandEmpty.css.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Styles for `Command.Empty`.
+ *
+ * The empty state is hidden by default and revealed via CSS `:has()` when the
+ * list contains no visible options, eliminating the need for JavaScript-managed
+ * visible-count state.
+ */
+export declare const COMMAND_EMPTY_STYLES: {
+    root: string;
+};

package/dist/components/overlay/command/components/command-empty/styles/CommandEmpty.css.js

@@ -0,0 +1,8 @@
+import '../../../../../../ui-kit149.css';import '../../../../../../ui-kit148.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+/* empty css                                                       */
+/* empty css                                */
+var p = { root: "_15bl8t20" };
+export {
+  p as COMMAND_EMPTY_STYLES
+};
+//# sourceMappingURL=CommandEmpty.css.js.map

package/dist/components/overlay/command/components/command-empty/styles/CommandEmpty.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandEmpty.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/overlay/command/components/command-empty/types/CommandEmpty.props.d.ts

@@ -0,0 +1,2 @@
+/** Props for `Command.Empty`. */
+export type CommandEmptyProps = React.HTMLAttributes<HTMLDivElement>;

package/dist/components/overlay/command/components/command-group/CommandGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";const n=require("react/jsx-runtime"),e=require("react"),c=require("./styles/CommandGroup.css.cjs"),f=require("../../context/Command.context.cjs"),h=require("../../../../../utils/cn.cjs"),d=e.memo(({className:i,label:o,children:u,...a})=>{const r=e.useId(),{search:l}=f.useCommandContext(),s=e.useRef(null),[m,p]=e.useState(!1);return e.useLayoutEffect(()=>{const t=s.current;if(!t)return;const C=t.querySelectorAll('[role="option"]:not([hidden])').length>0;p(!C)},[l]),n.jsxs("div",{ref:s,role:"group","aria-labelledby":o?r:void 0,hidden:m||void 0,className:h.cn(c.COMMAND_GROUP_STYLES.root,i),...a,children:[o&&n.jsx("div",{id:r,className:c.COMMAND_GROUP_STYLES.label,children:o}),u]})});d.displayName="Command.Group";module.exports=d;
+//# sourceMappingURL=CommandGroup.cjs.map

package/dist/components/overlay/command/components/command-group/CommandGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandGroup.cjs","sources":["../../../../../../src/components/overlay/command/components/command-group/CommandGroup.tsx"],"sourcesContent":["import { memo, useId, useLayoutEffect, useRef, useState, type FC } from 'react'\r\n\r\nimport { COMMAND_GROUP_STYLES } from '@components/overlay/command/components/command-group/styles/CommandGroup.css.ts'\r\nimport type { CommandGroupProps } from '@components/overlay/command/components/command-group/types/CommandGroup.props.ts'\r\nimport { useCommandContext } from '@components/overlay/command/context/Command.context.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A labeled group of `Command.Item` elements inside `Command.List`.\r\n *\r\n * Renders as `role=\"group\"` with an optional visible label. When `label` is\r\n * provided it is connected to the group via `aria-labelledby`.\r\n *\r\n * The group is hidden (via the HTML `hidden` attribute) whenever every\r\n * descendant `Command.Item` has been filtered out by the current search query.\r\n * It becomes visible again as soon as at least one item matches.\r\n */\r\nconst CommandGroup: FC<CommandGroupProps> = memo(({\r\n    className,\r\n    label,\r\n    children,\r\n    ...props\r\n}) => {\r\n    const labelId = useId()\r\n    const { search } = useCommandContext()\r\n    const rootRef = useRef<HTMLDivElement>(null)\r\n    const [groupHidden, setGroupHidden] = useState(false)\r\n\r\n    // After every commit triggered by a search change, query the actual DOM to\r\n    // determine whether any visible (non-hidden, non-disabled) option remains\r\n    // inside this group. Using the DOM as the source of truth avoids duplicating\r\n    // the filter logic already owned by each CommandItem.\r\n    useLayoutEffect(() => {\r\n        const root = rootRef.current\r\n        if (!root) {return}\r\n        const hasVisible =\r\n            root.querySelectorAll<HTMLElement>('[role=\"option\"]:not([hidden])').length > 0\r\n        setGroupHidden(!hasVisible)\r\n    }, [search])\r\n\r\n    return (\r\n        <div\r\n            ref={rootRef}\r\n            role={'group'}\r\n            aria-labelledby={label ? labelId : undefined}\r\n            hidden={groupHidden || undefined}\r\n            className={cn(COMMAND_GROUP_STYLES.root, className)}\r\n            {...props}\r\n        >\r\n            {label && (\r\n                <div\r\n                    id={labelId}\r\n                    className={COMMAND_GROUP_STYLES.label}\r\n                >\r\n                    {label}\r\n                </div>\r\n            )}\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n\r\nCommandGroup.displayName = 'Command.Group'\r\n\r\nexport default CommandGroup\r\n"],"names":["CommandGroup","memo","className","label","children","props","labelId","useId","search","useCommandContext","rootRef","useRef","groupHidden","setGroupHidden","useState","useLayoutEffect","root","hasVisible","jsxs","cn","COMMAND_GROUP_STYLES","jsx"],"mappings":"wMAiBMA,EAAsCC,EAAAA,KAAK,CAAC,CAC9C,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAUC,EAAAA,MAAA,EACV,CAAE,OAAAC,CAAA,EAAWC,oBAAA,EACbC,EAAUC,EAAAA,OAAuB,IAAI,EACrC,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAK,EAMpDC,OAAAA,EAAAA,gBAAgB,IAAM,CAClB,MAAMC,EAAON,EAAQ,QACrB,GAAI,CAACM,EAAO,OACZ,MAAMC,EACFD,EAAK,iBAA8B,+BAA+B,EAAE,OAAS,EACjFH,EAAe,CAACI,CAAU,CAC9B,EAAG,CAACT,CAAM,CAAC,EAGPU,EAAAA,KAAC,MAAA,CACG,IAAKR,EACL,KAAM,QACN,kBAAiBP,EAAQG,EAAU,OACnC,OAAQM,GAAe,OACvB,UAAWO,EAAAA,GAAGC,uBAAqB,KAAMlB,CAAS,EACjD,GAAGG,EAEH,SAAA,CAAAF,GACGkB,EAAAA,IAAC,MAAA,CACG,GAAIf,EACJ,UAAWc,EAAAA,qBAAqB,MAE/B,SAAAjB,CAAA,CAAA,EAGRC,CAAA,CAAA,CAAA,CAGb,CAAC,EAEDJ,EAAa,YAAc"}

package/dist/components/overlay/command/components/command-group/CommandGroup.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { CommandGroupProps } from './types/CommandGroup.props.ts';
+/**
+ * A labeled group of `Command.Item` elements inside `Command.List`.
+ *
+ * Renders as `role="group"` with an optional visible label. When `label` is
+ * provided it is connected to the group via `aria-labelledby`.
+ *
+ * The group is hidden (via the HTML `hidden` attribute) whenever every
+ * descendant `Command.Item` has been filtered out by the current search query.
+ * It becomes visible again as soon as at least one item matches.
+ */
+declare const CommandGroup: FC<CommandGroupProps>;
+export default CommandGroup;

package/dist/components/overlay/command/components/command-group/CommandGroup.js

@@ -0,0 +1,46 @@
+import { jsxs as c, jsx as f } from "react/jsx-runtime";
+import { memo as p, useId as h, useRef as C, useState as v, useLayoutEffect as x } from "react";
+import { COMMAND_GROUP_STYLES as s } from "./styles/CommandGroup.css.js";
+import { useCommandContext as y } from "../../context/Command.context.js";
+import { cn as G } from "../../../../../utils/cn.js";
+const N = p(({
+  className: n,
+  label: o,
+  children: d,
+  ...i
+}) => {
+  const e = h(), { search: m } = y(), r = C(null), [a, l] = v(!1);
+  return x(() => {
+    const t = r.current;
+    if (!t)
+      return;
+    const u = t.querySelectorAll('[role="option"]:not([hidden])').length > 0;
+    l(!u);
+  }, [m]), /* @__PURE__ */ c(
+    "div",
+    {
+      ref: r,
+      role: "group",
+      "aria-labelledby": o ? e : void 0,
+      hidden: a || void 0,
+      className: G(s.root, n),
+      ...i,
+      children: [
+        o && /* @__PURE__ */ f(
+          "div",
+          {
+            id: e,
+            className: s.label,
+            children: o
+          }
+        ),
+        d
+      ]
+    }
+  );
+});
+N.displayName = "Command.Group";
+export {
+  N as default
+};
+//# sourceMappingURL=CommandGroup.js.map

package/dist/components/overlay/command/components/command-group/CommandGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandGroup.js","sources":["../../../../../../src/components/overlay/command/components/command-group/CommandGroup.tsx"],"sourcesContent":["import { memo, useId, useLayoutEffect, useRef, useState, type FC } from 'react'\r\n\r\nimport { COMMAND_GROUP_STYLES } from '@components/overlay/command/components/command-group/styles/CommandGroup.css.ts'\r\nimport type { CommandGroupProps } from '@components/overlay/command/components/command-group/types/CommandGroup.props.ts'\r\nimport { useCommandContext } from '@components/overlay/command/context/Command.context.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A labeled group of `Command.Item` elements inside `Command.List`.\r\n *\r\n * Renders as `role=\"group\"` with an optional visible label. When `label` is\r\n * provided it is connected to the group via `aria-labelledby`.\r\n *\r\n * The group is hidden (via the HTML `hidden` attribute) whenever every\r\n * descendant `Command.Item` has been filtered out by the current search query.\r\n * It becomes visible again as soon as at least one item matches.\r\n */\r\nconst CommandGroup: FC<CommandGroupProps> = memo(({\r\n    className,\r\n    label,\r\n    children,\r\n    ...props\r\n}) => {\r\n    const labelId = useId()\r\n    const { search } = useCommandContext()\r\n    const rootRef = useRef<HTMLDivElement>(null)\r\n    const [groupHidden, setGroupHidden] = useState(false)\r\n\r\n    // After every commit triggered by a search change, query the actual DOM to\r\n    // determine whether any visible (non-hidden, non-disabled) option remains\r\n    // inside this group. Using the DOM as the source of truth avoids duplicating\r\n    // the filter logic already owned by each CommandItem.\r\n    useLayoutEffect(() => {\r\n        const root = rootRef.current\r\n        if (!root) {return}\r\n        const hasVisible =\r\n            root.querySelectorAll<HTMLElement>('[role=\"option\"]:not([hidden])').length > 0\r\n        setGroupHidden(!hasVisible)\r\n    }, [search])\r\n\r\n    return (\r\n        <div\r\n            ref={rootRef}\r\n            role={'group'}\r\n            aria-labelledby={label ? labelId : undefined}\r\n            hidden={groupHidden || undefined}\r\n            className={cn(COMMAND_GROUP_STYLES.root, className)}\r\n            {...props}\r\n        >\r\n            {label && (\r\n                <div\r\n                    id={labelId}\r\n                    className={COMMAND_GROUP_STYLES.label}\r\n                >\r\n                    {label}\r\n                </div>\r\n            )}\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n\r\nCommandGroup.displayName = 'Command.Group'\r\n\r\nexport default CommandGroup\r\n"],"names":["CommandGroup","memo","className","label","children","props","labelId","useId","search","useCommandContext","rootRef","useRef","groupHidden","setGroupHidden","useState","useLayoutEffect","root","hasVisible","jsxs","cn","COMMAND_GROUP_STYLES","jsx"],"mappings":";;;;;AAiBA,MAAMA,IAAsCC,EAAK,CAAC;AAAA,EAC9C,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAUC,EAAA,GACV,EAAE,QAAAC,EAAA,IAAWC,EAAA,GACbC,IAAUC,EAAuB,IAAI,GACrC,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK;AAMpD,SAAAC,EAAgB,MAAM;AAClB,UAAMC,IAAON,EAAQ;AACrB,QAAI,CAACM;AAAO;AACZ,UAAMC,IACFD,EAAK,iBAA8B,+BAA+B,EAAE,SAAS;AACjF,IAAAH,EAAe,CAACI,CAAU;AAAA,EAC9B,GAAG,CAACT,CAAM,CAAC,GAGP,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKR;AAAA,MACL,MAAM;AAAA,MACN,mBAAiBP,IAAQG,IAAU;AAAA,MACnC,QAAQM,KAAe;AAAA,MACvB,WAAWO,EAAGC,EAAqB,MAAMlB,CAAS;AAAA,MACjD,GAAGG;AAAA,MAEH,UAAA;AAAA,QAAAF,KACG,gBAAAkB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAIf;AAAA,YACJ,WAAWc,EAAqB;AAAA,YAE/B,UAAAjB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGRC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAEDJ,EAAa,cAAc;"}

package/dist/components/overlay/command/components/command-group/styles/CommandGroup.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit155.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                  */var e={root:"_1adbp1f0",label:"_1adbp1f1"};exports.COMMAND_GROUP_STYLES=e;
+//# sourceMappingURL=CommandGroup.css.cjs.map

package/dist/components/overlay/command/components/command-group/styles/CommandGroup.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandGroup.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/overlay/command/components/command-group/styles/CommandGroup.css.d.ts

@@ -0,0 +1,5 @@
+/** Styles for `Command.Group` sections. */
+export declare const COMMAND_GROUP_STYLES: {
+    root: string;
+    label: string;
+};

package/dist/components/overlay/command/components/command-group/styles/CommandGroup.css.js

@@ -0,0 +1,7 @@
+import '../../../../../../ui-kit155.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+/* empty css                                */
+var r = { root: "_1adbp1f0", label: "_1adbp1f1" };
+export {
+  r as COMMAND_GROUP_STYLES
+};
+//# sourceMappingURL=CommandGroup.css.js.map

package/dist/components/overlay/command/components/command-group/styles/CommandGroup.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/overlay/command/components/command-group/types/CommandGroup.props.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Props for `Command.Group`.
+ */
+export type CommandGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> & {
+    /**
+     * Visible section label rendered above the group items.
+     * When provided, it is also used as the group's accessible name via
+     * `aria-labelledby`.
+     */
+    label?: string;
+};

package/dist/components/overlay/command/components/command-input/CommandInput.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),S=require("react"),_=require("../../../../actions/icon-button/IconButton.cjs");require("../../../../actions/icon-button/styles/IconButton.css.cjs");const b=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const s=require("../../../../../constants/icons.cjs"),f=require("../../context/Command.context.cjs"),a=require("./styles/CommandInput.css.cjs"),g=require("../../../../../utils/cn.cjs"),o=S.memo(({className:c,placeholder:i="Search...","aria-label":l,defaultAriaLabel:u="Search",defaultClearAriaLabel:m="Clear search",onClear:d,onChange:C,...p})=>{const{search:t,setSearch:r,activeId:h,listId:x}=f.useCommandContext(),I=l??u,q=n=>{r(n.target.value),C?.(n)},N=()=>{r(""),d?.()};return e.jsxs("div",{className:a.COMMAND_INPUT_STYLES.wrapper,children:[e.jsx("span",{className:a.COMMAND_INPUT_STYLES.icon,"aria-hidden":!0,children:e.jsx(b,{icon:s.IconRegistry.search,size:"sm"})}),e.jsx("input",{type:"text",role:"combobox","aria-expanded":!0,"aria-controls":x,"aria-activedescendant":h,"aria-label":I,autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",spellCheck:!1,className:g.cn(a.COMMAND_INPUT_STYLES.input,c),placeholder:i,value:t,onChange:q,...p}),t&&e.jsx(_,{type:"button",icon:s.IconRegistry.close,"aria-label":m,variant:"ghost",size:"xs",onClick:N})]})});o.displayName="Command.Input";module.exports=o;
+//# sourceMappingURL=CommandInput.cjs.map

package/dist/components/overlay/command/components/command-input/CommandInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandInput.cjs","sources":["../../../../../../src/components/overlay/command/components/command-input/CommandInput.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { IconButton } from '@components/actions/icon-button'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { useCommandContext } from '@components/overlay/command/context/Command.context.ts'\r\nimport { COMMAND_INPUT_STYLES } from '@components/overlay/command/components/command-input/styles/CommandInput.css.ts'\r\nimport type { CommandInputProps } from '@components/overlay/command/components/command-input/types/CommandInput.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * The search input inside a `Command.Content` panel.\r\n *\r\n * Implements the WAI-ARIA combobox pattern:\r\n * - `role=\"combobox\"` with `aria-expanded=\"true\"` (always shown alongside the listbox)\r\n * - `aria-controls` pointing to the `Command.List` element\r\n * - `aria-activedescendant` reflecting the currently highlighted item\r\n *\r\n * Arrow-key and Enter-key handling is delegated to the `Command.Content`\r\n * wrapper via event bubbling so that the input retains full text-editing\r\n * keyboard shortcuts.\r\n *\r\n * A clear `IconButton` appears when the input has a value. Clicking it resets\r\n * the search and fires `onClear`. Override `defaultClearAriaLabel` for i18n.\r\n */\r\nconst CommandInput: FC<CommandInputProps> = memo(({\r\n    className,\r\n    placeholder = 'Search...',\r\n    'aria-label': ariaLabel,\r\n    defaultAriaLabel = 'Search',\r\n    defaultClearAriaLabel = 'Clear search',\r\n    onClear,\r\n    onChange,\r\n    ...props\r\n}) => {\r\n    const { search, setSearch, activeId, listId } = useCommandContext()\r\n\r\n    const inputAriaLabel = ariaLabel ?? defaultAriaLabel\r\n\r\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\r\n        setSearch(event.target.value)\r\n        onChange?.(event)\r\n    }\r\n\r\n    const handleClear = (): void => {\r\n        setSearch('')\r\n        onClear?.()\r\n    }\r\n\r\n    return (\r\n        <div className={COMMAND_INPUT_STYLES.wrapper}>\r\n            <span\r\n                className={COMMAND_INPUT_STYLES.icon}\r\n                aria-hidden\r\n            >\r\n                <Icon\r\n                    icon={IconRegistry.search}\r\n                    size={'sm'}\r\n                />\r\n            </span>\r\n            <input\r\n                type={'text'}\r\n                role={'combobox'}\r\n                aria-expanded={true}\r\n                aria-controls={listId}\r\n                aria-activedescendant={activeId}\r\n                aria-label={inputAriaLabel}\r\n                autoComplete={'off'}\r\n                autoCorrect={'off'}\r\n                autoCapitalize={'off'}\r\n                spellCheck={false}\r\n                className={cn(COMMAND_INPUT_STYLES.input, className)}\r\n                placeholder={placeholder}\r\n                value={search}\r\n                onChange={handleChange}\r\n                {...props}\r\n            />\r\n            {search && (\r\n                <IconButton\r\n                    type={'button'}\r\n                    icon={IconRegistry.close}\r\n                    aria-label={defaultClearAriaLabel}\r\n                    variant={'ghost'}\r\n                    size={'xs'}\r\n                    onClick={handleClear}\r\n                />\r\n            )}\r\n        </div>\r\n    )\r\n})\r\n\r\nCommandInput.displayName = 'Command.Input'\r\n\r\nexport default CommandInput\r\n"],"names":["CommandInput","memo","className","placeholder","ariaLabel","defaultAriaLabel","defaultClearAriaLabel","onClear","onChange","props","search","setSearch","activeId","listId","useCommandContext","inputAriaLabel","handleChange","event","handleClear","jsxs","COMMAND_INPUT_STYLES","jsx","Icon","IconRegistry","cn","IconButton"],"mappings":"kfAyBMA,EAAsCC,EAAAA,KAAK,CAAC,CAC9C,UAAAC,EACA,YAAAC,EAAc,YACd,aAAcC,EACd,iBAAAC,EAAmB,SACnB,sBAAAC,EAAwB,eACxB,QAAAC,EACA,SAAAC,EACA,GAAGC,CACP,IAAM,CACF,KAAM,CAAE,OAAAC,EAAQ,UAAAC,EAAW,SAAAC,EAAU,OAAAC,CAAA,EAAWC,EAAAA,kBAAA,EAE1CC,EAAiBX,GAAaC,EAE9BW,EAAgBC,GAAqD,CACvEN,EAAUM,EAAM,OAAO,KAAK,EAC5BT,IAAWS,CAAK,CACpB,EAEMC,EAAc,IAAY,CAC5BP,EAAU,EAAE,EACZJ,IAAA,CACJ,EAEA,OACIY,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,qBAAqB,QACjC,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACG,UAAWD,EAAAA,qBAAqB,KAChC,cAAW,GAEX,SAAAC,EAAAA,IAACC,EAAA,CACG,KAAMC,EAAAA,aAAa,OACnB,KAAM,IAAA,CAAA,CACV,CAAA,EAEJF,EAAAA,IAAC,QAAA,CACG,KAAM,OACN,KAAM,WACN,gBAAe,GACf,gBAAeR,EACf,wBAAuBD,EACvB,aAAYG,EACZ,aAAc,MACd,YAAa,MACb,eAAgB,MAChB,WAAY,GACZ,UAAWS,EAAAA,GAAGJ,uBAAqB,MAAOlB,CAAS,EACnD,YAAAC,EACA,MAAOO,EACP,SAAUM,EACT,GAAGP,CAAA,CAAA,EAEPC,GACGW,EAAAA,IAACI,EAAA,CACG,KAAM,SACN,KAAMF,EAAAA,aAAa,MACnB,aAAYjB,EACZ,QAAS,QACT,KAAM,KACN,QAASY,CAAA,CAAA,CACb,EAER,CAER,CAAC,EAEDlB,EAAa,YAAc"}

package/dist/components/overlay/command/components/command-input/CommandInput.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { CommandInputProps } from './types/CommandInput.props.ts';
+/**
+ * The search input inside a `Command.Content` panel.
+ *
+ * Implements the WAI-ARIA combobox pattern:
+ * - `role="combobox"` with `aria-expanded="true"` (always shown alongside the listbox)
+ * - `aria-controls` pointing to the `Command.List` element
+ * - `aria-activedescendant` reflecting the currently highlighted item
+ *
+ * Arrow-key and Enter-key handling is delegated to the `Command.Content`
+ * wrapper via event bubbling so that the input retains full text-editing
+ * keyboard shortcuts.
+ *
+ * A clear `IconButton` appears when the input has a value. Clicking it resets
+ * the search and fires `onClear`. Override `defaultClearAriaLabel` for i18n.
+ */
+declare const CommandInput: FC<CommandInputProps>;
+export default CommandInput;