@choco-vanille/ui 1.2.0 → 1.3.0

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"});;/* 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 @@
+/* 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"});;/* 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 @@
+/* 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;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandInput.js","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":";;;;;;;;;;AAyBA,MAAMA,IAAsCC,EAAK,CAAC;AAAA,EAC9C,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAcC;AAAA,EACd,kBAAAC,IAAmB;AAAA,EACnB,uBAAAC,IAAwB;AAAA,EACxB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAM,EAAE,QAAAC,GAAQ,WAAAC,GAAW,UAAAC,GAAU,QAAAC,EAAA,IAAWC,EAAA,GAE1CC,IAAiBX,KAAaC,GAE9BW,IAAe,CAACC,MAAqD;AACvE,IAAAN,EAAUM,EAAM,OAAO,KAAK,GAC5BT,IAAWS,CAAK;AAAA,EACpB,GAEMC,IAAc,MAAY;AAC5B,IAAAP,EAAU,EAAE,GACZJ,IAAA;AAAA,EACJ;AAEA,SACI,gBAAAY,EAAC,OAAA,EAAI,WAAWC,EAAqB,SACjC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWD,EAAqB;AAAA,QAChC,eAAW;AAAA,QAEX,UAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAMC,EAAa;AAAA,YACnB,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACV;AAAA,IAAA;AAAA,IAEJ,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,MAAM;AAAA,QACN,iBAAe;AAAA,QACf,iBAAeR;AAAA,QACf,yBAAuBD;AAAA,QACvB,cAAYG;AAAA,QACZ,cAAc;AAAA,QACd,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,WAAWS,EAAGJ,EAAqB,OAAOlB,CAAS;AAAA,QACnD,aAAAC;AAAA,QACA,OAAOO;AAAA,QACP,UAAUM;AAAA,QACT,GAAGP;AAAA,MAAA;AAAA,IAAA;AAAA,IAEPC,KACG,gBAAAW;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,MAAMF,EAAa;AAAA,QACnB,cAAYjB;AAAA,QACZ,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAASY;AAAA,MAAA;AAAA,IAAA;AAAA,EACb,GAER;AAER,CAAC;AAEDlB,EAAa,cAAc;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                    */;/* empty css                                  */var e={wrapper:"_1p4tdqx0",icon:"_1p4tdqx1",input:"_1p4tdqx2"};exports.COMMAND_INPUT_STYLES=e;
+//# sourceMappingURL=CommandInput.css.cjs.map

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

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

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

@@ -0,0 +1,9 @@
+/** Styles for the `Command.Input` search bar area. */
+export declare const COMMAND_INPUT_STYLES: {
+    /** Wrapper row containing the search icon and the text input. */
+    wrapper: string;
+    /** Search icon slot — muted, non-interactive. */
+    icon: string;
+    /** The `<input>` element itself. */
+    input: string;
+};

package/dist/components/overlay/command/components/command-input/styles/CommandInput.css.js

@@ -0,0 +1,7 @@
+/* empty css                                                  */
+/* empty css                                */
+var r = { wrapper: "_1p4tdqx0", icon: "_1p4tdqx1", input: "_1p4tdqx2" };
+export {
+  r as COMMAND_INPUT_STYLES
+};
+//# sourceMappingURL=CommandInput.css.js.map

package/dist/components/overlay/command/components/command-input/styles/CommandInput.css.js.map

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

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

@@ -0,0 +1,30 @@
+/**
+ * Props for `Command.Input`.
+ *
+ * ARIA attributes managed internally (`role`, `aria-expanded`,
+ * `aria-controls`, `aria-activedescendant`) are omitted to prevent
+ * accidental override of the combobox contract.
+ */
+export type CommandInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'role' | 'aria-expanded' | 'aria-controls' | 'aria-activedescendant' | 'type'> & {
+    /**
+     * Placeholder text shown when the input is empty.
+     * @default 'Search...'
+     */
+    placeholder?: string;
+    /**
+     * Accessible label applied when `aria-label` is not provided explicitly.
+     * Override for i18n.
+     * @default 'Search'
+     */
+    defaultAriaLabel?: string;
+    /**
+     * Accessible label for the clear button that appears when the input has a
+     * value. Override for i18n.
+     * @default 'Clear search'
+     */
+    defaultClearAriaLabel?: string;
+    /**
+     * Called when the user activates the clear button to reset the search.
+     */
+    onClear?: () => void;
+};

package/dist/components/overlay/command/components/command-item/CommandItem.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),i=require("react"),v=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const D=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const L=require("../../../../foundation/typography/Typography.cjs");require("../../../../foundation/typography/styles/Typography.css.cjs");const w=require("../../context/Command.context.cjs"),a=require("./styles/CommandItem.css.cjs"),A=require("../../../../../utils/cn.cjs"),h=i.memo(({className:p,children:n,keywords:c,disabled:t=!1,icon:u,shortcut:d,onSelect:m,onClick:x,onMouseEnter:q,onKeyDown:I,...M})=>{const{search:r,activeId:f,setActiveId:y}=w.useCommandContext(),o=i.useId(),l=f===o,E=i.useMemo(()=>{if(!r)return!0;const C=[typeof n=="string"?n:"",...c??[]].filter(Boolean);if(!C.length)return!0;const T=r.toLowerCase();return C.some(g=>g.toLowerCase().includes(T))},[r,n,c]),_=e=>{t||(m?.(),x?.(e))},j=e=>{t||y(o),q?.(e)},N=e=>{!t&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),m?.()),I?.(e)};return s.jsxs("div",{id:o,role:"option","aria-selected":l,"aria-disabled":t||void 0,"data-disabled":t||void 0,"data-highlighted":l||void 0,hidden:!E||void 0,tabIndex:-1,className:A.cn(a.COMMAND_ITEM_STYLES.root,p),onClick:_,onMouseEnter:j,onKeyDown:N,...M,children:[u&&s.jsx(v,{as:"span",justifyContent:"center",className:a.COMMAND_ITEM_STYLES.icon,"aria-hidden":!0,children:s.jsx(D,{icon:u,size:"xs"})}),s.jsx(L,{as:"span",variant:"span",maxLines:1,width:"100%",children:n}),d&&s.jsx("span",{className:a.COMMAND_ITEM_STYLES.shortcut,"aria-hidden":!0,children:d})]})});h.displayName="Command.Item";module.exports=h;
+//# sourceMappingURL=CommandItem.cjs.map

package/dist/components/overlay/command/components/command-item/CommandItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandItem.cjs","sources":["../../../../../../src/components/overlay/command/components/command-item/CommandItem.tsx"],"sourcesContent":["import { memo, useId, useMemo, type FC } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { useCommandContext } from '@components/overlay/command/context/Command.context.ts'\r\nimport { COMMAND_ITEM_STYLES } from '@components/overlay/command/components/command-item/styles/CommandItem.css.ts'\r\nimport type { CommandItemProps } from '@components/overlay/command/components/command-item/types/CommandItem.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A single actionable command inside `Command.List` or `Command.Group`.\r\n *\r\n * - Filtered out of the results (via the HTML `hidden` attribute) when the\r\n *   search query does not match its `children` text or `keywords`.\r\n * - Highlighted on pointer hover and keyboard navigation; activates on click\r\n *   or Enter.\r\n * - When `disabled`, it is excluded from keyboard navigation and pointer\r\n *   interaction.\r\n */\r\nconst CommandItem: FC<CommandItemProps> = memo(({\r\n    className,\r\n    children,\r\n    keywords,\r\n    disabled = false,\r\n    icon,\r\n    shortcut,\r\n    onSelect,\r\n    onClick,\r\n    onMouseEnter,\r\n    onKeyDown,\r\n    ...props\r\n}) => {\r\n    const { search, activeId, setActiveId } = useCommandContext()\r\n    const itemId = useId()\r\n    const isActive = activeId === itemId\r\n\r\n    const isVisible = useMemo(() => {\r\n        if (!search) {return true}\r\n        const label = typeof children === 'string' ? children : ''\r\n        const allKeywords = [label, ...(keywords ?? [])].filter(Boolean)\r\n        if (!allKeywords.length) {return true}\r\n        const query = search.toLowerCase()\r\n        return allKeywords.some((k) => k.toLowerCase().includes(query))\r\n    }, [search, children, keywords])\r\n\r\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>): void => {\r\n        if (disabled) {return}\r\n        onSelect?.()\r\n        onClick?.(event)\r\n    }\r\n\r\n    const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>): void => {\r\n        if (!disabled) {\r\n            setActiveId(itemId)\r\n        }\r\n        onMouseEnter?.(event)\r\n    }\r\n\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\r\n        if (!disabled && (event.key === 'Enter' || event.key === ' ')) {\r\n            event.preventDefault()\r\n            event.stopPropagation()\r\n            onSelect?.()\r\n        }\r\n        onKeyDown?.(event)\r\n    }\r\n\r\n    return (\r\n        <div\r\n            id={itemId}\r\n            role={'option'}\r\n            aria-selected={isActive}\r\n            aria-disabled={disabled || undefined}\r\n            data-disabled={disabled || undefined}\r\n            data-highlighted={isActive || undefined}\r\n            hidden={!isVisible || undefined}\r\n            tabIndex={-1}\r\n            className={cn(COMMAND_ITEM_STYLES.root, className)}\r\n            onClick={handleClick}\r\n            onMouseEnter={handleMouseEnter}\r\n            onKeyDown={handleKeyDown}\r\n            {...props}\r\n        >\r\n            {icon && (\r\n                <Flex\r\n                    as={'span'}\r\n                    justifyContent={'center'}\r\n                    className={COMMAND_ITEM_STYLES.icon}\r\n                    aria-hidden\r\n                >\r\n                    <Icon\r\n                        icon={icon}\r\n                        size={'xs'}\r\n                    />\r\n                </Flex>\r\n            )}\r\n            <Typography\r\n                as={'span'}\r\n                variant={'span'}\r\n                maxLines={1}\r\n                width={'100%'}\r\n            >\r\n                {children}\r\n            </Typography>\r\n            {shortcut && (\r\n                <span\r\n                    className={COMMAND_ITEM_STYLES.shortcut}\r\n                    aria-hidden\r\n                >\r\n                    {shortcut}\r\n                </span>\r\n            )}\r\n        </div>\r\n    )\r\n})\r\n\r\nCommandItem.displayName = 'Command.Item'\r\n\r\nexport default CommandItem\r\n"],"names":["CommandItem","memo","className","children","keywords","disabled","icon","shortcut","onSelect","onClick","onMouseEnter","onKeyDown","props","search","activeId","setActiveId","useCommandContext","itemId","useId","isActive","isVisible","useMemo","allKeywords","query","k","handleClick","event","handleMouseEnter","handleKeyDown","jsxs","cn","COMMAND_ITEM_STYLES","jsx","Flex","Icon","Typography"],"mappings":"gjBAoBMA,EAAoCC,EAAAA,KAAK,CAAC,CAC5C,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,KAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,aAAAC,EACA,UAAAC,EACA,GAAGC,CACP,IAAM,CACF,KAAM,CAAE,OAAAC,EAAQ,SAAAC,EAAU,YAAAC,CAAA,EAAgBC,EAAAA,kBAAA,EACpCC,EAASC,EAAAA,MAAA,EACTC,EAAWL,IAAaG,EAExBG,EAAYC,EAAAA,QAAQ,IAAM,CAC5B,GAAI,CAACR,EAAS,MAAO,GAErB,MAAMS,EAAc,CADN,OAAOnB,GAAa,SAAWA,EAAW,GAC5B,GAAIC,GAAY,EAAG,EAAE,OAAO,OAAO,EAC/D,GAAI,CAACkB,EAAY,OAAS,MAAO,GACjC,MAAMC,EAAQV,EAAO,YAAA,EACrB,OAAOS,EAAY,KAAME,GAAMA,EAAE,YAAA,EAAc,SAASD,CAAK,CAAC,CAClE,EAAG,CAACV,EAAQV,EAAUC,CAAQ,CAAC,EAEzBqB,EAAeC,GAAkD,CAC/DrB,IACJG,IAAA,EACAC,IAAUiB,CAAK,EACnB,EAEMC,EAAoBD,GAAkD,CACnErB,GACDU,EAAYE,CAAM,EAEtBP,IAAegB,CAAK,CACxB,EAEME,EAAiBF,GAAqD,CACpE,CAACrB,IAAaqB,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACrDA,EAAM,eAAA,EACNA,EAAM,gBAAA,EACNlB,IAAA,GAEJG,IAAYe,CAAK,CACrB,EAEA,OACIG,EAAAA,KAAC,MAAA,CACG,GAAIZ,EACJ,KAAM,SACN,gBAAeE,EACf,gBAAed,GAAY,OAC3B,gBAAeA,GAAY,OAC3B,mBAAkBc,GAAY,OAC9B,OAAQ,CAACC,GAAa,OACtB,SAAU,GACV,UAAWU,EAAAA,GAAGC,sBAAoB,KAAM7B,CAAS,EACjD,QAASuB,EACT,aAAcE,EACd,UAAWC,EACV,GAAGhB,EAEH,SAAA,CAAAN,GACG0B,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,eAAgB,SAChB,UAAWF,EAAAA,oBAAoB,KAC/B,cAAW,GAEX,SAAAC,EAAAA,IAACE,EAAA,CACG,KAAA5B,EACA,KAAM,IAAA,CAAA,CACV,CAAA,EAGR0B,EAAAA,IAACG,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,EACV,MAAO,OAEN,SAAAhC,CAAA,CAAA,EAEJI,GACGyB,EAAAA,IAAC,OAAA,CACG,UAAWD,EAAAA,oBAAoB,SAC/B,cAAW,GAEV,SAAAxB,CAAA,CAAA,CACL,CAAA,CAAA,CAIhB,CAAC,EAEDP,EAAY,YAAc"}

package/dist/components/overlay/command/components/command-item/CommandItem.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { CommandItemProps } from './types/CommandItem.props.ts';
+/**
+ * A single actionable command inside `Command.List` or `Command.Group`.
+ *
+ * - Filtered out of the results (via the HTML `hidden` attribute) when the
+ *   search query does not match its `children` text or `keywords`.
+ * - Highlighted on pointer hover and keyboard navigation; activates on click
+ *   or Enter.
+ * - When `disabled`, it is excluded from keyboard navigation and pointer
+ *   interaction.
+ */
+declare const CommandItem: FC<CommandItemProps>;
+export default CommandItem;

package/dist/components/overlay/command/components/command-item/CommandItem.js

@@ -0,0 +1,99 @@
+import { jsxs as D, jsx as r } from "react/jsx-runtime";
+import { memo as L, useId as j, useMemo as k } from "react";
+import A from "../../../../layout/flex/Flex.js";
+import "../../../../layout/flex/styles/Flex.css.js";
+import K from "../../../../foundation/icon/Icon.js";
+import "../../../../foundation/icon/styles/Icon.css.js";
+import T from "../../../../foundation/typography/Typography.js";
+import "../../../../foundation/typography/styles/Typography.css.js";
+import { useCommandContext as b } from "../../context/Command.context.js";
+import { COMMAND_ITEM_STYLES as n } from "./styles/CommandItem.css.js";
+import { cn as _ } from "../../../../../utils/cn.js";
+const q = L(({
+  className: f,
+  children: e,
+  keywords: s,
+  disabled: t = !1,
+  icon: m,
+  shortcut: d,
+  onSelect: c,
+  onClick: u,
+  onMouseEnter: h,
+  onKeyDown: y,
+  ...C
+}) => {
+  const { search: i, activeId: I, setActiveId: x } = b(), a = j(), l = I === a, g = k(() => {
+    if (!i)
+      return !0;
+    const p = [typeof e == "string" ? e : "", ...s ?? []].filter(Boolean);
+    if (!p.length)
+      return !0;
+    const E = i.toLowerCase();
+    return p.some((N) => N.toLowerCase().includes(E));
+  }, [i, e, s]), v = (o) => {
+    t || (c?.(), u?.(o));
+  }, M = (o) => {
+    t || x(a), h?.(o);
+  }, w = (o) => {
+    !t && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), o.stopPropagation(), c?.()), y?.(o);
+  };
+  return /* @__PURE__ */ D(
+    "div",
+    {
+      id: a,
+      role: "option",
+      "aria-selected": l,
+      "aria-disabled": t || void 0,
+      "data-disabled": t || void 0,
+      "data-highlighted": l || void 0,
+      hidden: !g || void 0,
+      tabIndex: -1,
+      className: _(n.root, f),
+      onClick: v,
+      onMouseEnter: M,
+      onKeyDown: w,
+      ...C,
+      children: [
+        m && /* @__PURE__ */ r(
+          A,
+          {
+            as: "span",
+            justifyContent: "center",
+            className: n.icon,
+            "aria-hidden": !0,
+            children: /* @__PURE__ */ r(
+              K,
+              {
+                icon: m,
+                size: "xs"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ r(
+          T,
+          {
+            as: "span",
+            variant: "span",
+            maxLines: 1,
+            width: "100%",
+            children: e
+          }
+        ),
+        d && /* @__PURE__ */ r(
+          "span",
+          {
+            className: n.shortcut,
+            "aria-hidden": !0,
+            children: d
+          }
+        )
+      ]
+    }
+  );
+});
+q.displayName = "Command.Item";
+export {
+  q as default
+};
+//# sourceMappingURL=CommandItem.js.map

package/dist/components/overlay/command/components/command-item/CommandItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandItem.js","sources":["../../../../../../src/components/overlay/command/components/command-item/CommandItem.tsx"],"sourcesContent":["import { memo, useId, useMemo, type FC } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { useCommandContext } from '@components/overlay/command/context/Command.context.ts'\r\nimport { COMMAND_ITEM_STYLES } from '@components/overlay/command/components/command-item/styles/CommandItem.css.ts'\r\nimport type { CommandItemProps } from '@components/overlay/command/components/command-item/types/CommandItem.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A single actionable command inside `Command.List` or `Command.Group`.\r\n *\r\n * - Filtered out of the results (via the HTML `hidden` attribute) when the\r\n *   search query does not match its `children` text or `keywords`.\r\n * - Highlighted on pointer hover and keyboard navigation; activates on click\r\n *   or Enter.\r\n * - When `disabled`, it is excluded from keyboard navigation and pointer\r\n *   interaction.\r\n */\r\nconst CommandItem: FC<CommandItemProps> = memo(({\r\n    className,\r\n    children,\r\n    keywords,\r\n    disabled = false,\r\n    icon,\r\n    shortcut,\r\n    onSelect,\r\n    onClick,\r\n    onMouseEnter,\r\n    onKeyDown,\r\n    ...props\r\n}) => {\r\n    const { search, activeId, setActiveId } = useCommandContext()\r\n    const itemId = useId()\r\n    const isActive = activeId === itemId\r\n\r\n    const isVisible = useMemo(() => {\r\n        if (!search) {return true}\r\n        const label = typeof children === 'string' ? children : ''\r\n        const allKeywords = [label, ...(keywords ?? [])].filter(Boolean)\r\n        if (!allKeywords.length) {return true}\r\n        const query = search.toLowerCase()\r\n        return allKeywords.some((k) => k.toLowerCase().includes(query))\r\n    }, [search, children, keywords])\r\n\r\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>): void => {\r\n        if (disabled) {return}\r\n        onSelect?.()\r\n        onClick?.(event)\r\n    }\r\n\r\n    const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>): void => {\r\n        if (!disabled) {\r\n            setActiveId(itemId)\r\n        }\r\n        onMouseEnter?.(event)\r\n    }\r\n\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\r\n        if (!disabled && (event.key === 'Enter' || event.key === ' ')) {\r\n            event.preventDefault()\r\n            event.stopPropagation()\r\n            onSelect?.()\r\n        }\r\n        onKeyDown?.(event)\r\n    }\r\n\r\n    return (\r\n        <div\r\n            id={itemId}\r\n            role={'option'}\r\n            aria-selected={isActive}\r\n            aria-disabled={disabled || undefined}\r\n            data-disabled={disabled || undefined}\r\n            data-highlighted={isActive || undefined}\r\n            hidden={!isVisible || undefined}\r\n            tabIndex={-1}\r\n            className={cn(COMMAND_ITEM_STYLES.root, className)}\r\n            onClick={handleClick}\r\n            onMouseEnter={handleMouseEnter}\r\n            onKeyDown={handleKeyDown}\r\n            {...props}\r\n        >\r\n            {icon && (\r\n                <Flex\r\n                    as={'span'}\r\n                    justifyContent={'center'}\r\n                    className={COMMAND_ITEM_STYLES.icon}\r\n                    aria-hidden\r\n                >\r\n                    <Icon\r\n                        icon={icon}\r\n                        size={'xs'}\r\n                    />\r\n                </Flex>\r\n            )}\r\n            <Typography\r\n                as={'span'}\r\n                variant={'span'}\r\n                maxLines={1}\r\n                width={'100%'}\r\n            >\r\n                {children}\r\n            </Typography>\r\n            {shortcut && (\r\n                <span\r\n                    className={COMMAND_ITEM_STYLES.shortcut}\r\n                    aria-hidden\r\n                >\r\n                    {shortcut}\r\n                </span>\r\n            )}\r\n        </div>\r\n    )\r\n})\r\n\r\nCommandItem.displayName = 'Command.Item'\r\n\r\nexport default CommandItem\r\n"],"names":["CommandItem","memo","className","children","keywords","disabled","icon","shortcut","onSelect","onClick","onMouseEnter","onKeyDown","props","search","activeId","setActiveId","useCommandContext","itemId","useId","isActive","isVisible","useMemo","allKeywords","query","k","handleClick","event","handleMouseEnter","handleKeyDown","jsxs","cn","COMMAND_ITEM_STYLES","jsx","Flex","Icon","Typography"],"mappings":";;;;;;;;;;;AAoBA,MAAMA,IAAoCC,EAAK,CAAC;AAAA,EAC5C,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,aAAAC,EAAA,IAAgBC,EAAA,GACpCC,IAASC,EAAA,GACTC,IAAWL,MAAaG,GAExBG,IAAYC,EAAQ,MAAM;AAC5B,QAAI,CAACR;AAAS,aAAO;AAErB,UAAMS,IAAc,CADN,OAAOnB,KAAa,WAAWA,IAAW,IAC5B,GAAIC,KAAY,EAAG,EAAE,OAAO,OAAO;AAC/D,QAAI,CAACkB,EAAY;AAAS,aAAO;AACjC,UAAMC,IAAQV,EAAO,YAAA;AACrB,WAAOS,EAAY,KAAK,CAACE,MAAMA,EAAE,YAAA,EAAc,SAASD,CAAK,CAAC;AAAA,EAClE,GAAG,CAACV,GAAQV,GAAUC,CAAQ,CAAC,GAEzBqB,IAAc,CAACC,MAAkD;AACnE,IAAIrB,MACJG,IAAA,GACAC,IAAUiB,CAAK;AAAA,EACnB,GAEMC,IAAmB,CAACD,MAAkD;AACxE,IAAKrB,KACDU,EAAYE,CAAM,GAEtBP,IAAegB,CAAK;AAAA,EACxB,GAEME,IAAgB,CAACF,MAAqD;AACxE,IAAI,CAACrB,MAAaqB,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACrDA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNlB,IAAA,IAEJG,IAAYe,CAAK;AAAA,EACrB;AAEA,SACI,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAIZ;AAAA,MACJ,MAAM;AAAA,MACN,iBAAeE;AAAA,MACf,iBAAed,KAAY;AAAA,MAC3B,iBAAeA,KAAY;AAAA,MAC3B,oBAAkBc,KAAY;AAAA,MAC9B,QAAQ,CAACC,KAAa;AAAA,MACtB,UAAU;AAAA,MACV,WAAWU,EAAGC,EAAoB,MAAM7B,CAAS;AAAA,MACjD,SAASuB;AAAA,MACT,cAAcE;AAAA,MACd,WAAWC;AAAA,MACV,GAAGhB;AAAA,MAEH,UAAA;AAAA,QAAAN,KACG,gBAAA0B;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,gBAAgB;AAAA,YAChB,WAAWF,EAAoB;AAAA,YAC/B,eAAW;AAAA,YAEX,UAAA,gBAAAC;AAAA,cAACE;AAAA,cAAA;AAAA,gBACG,MAAA5B;AAAA,gBACA,MAAM;AAAA,cAAA;AAAA,YAAA;AAAA,UACV;AAAA,QAAA;AAAA,QAGR,gBAAA0B;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAO;AAAA,YAEN,UAAAhC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJI,KACG,gBAAAyB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWD,EAAoB;AAAA,YAC/B,eAAW;AAAA,YAEV,UAAAxB;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAEDP,EAAY,cAAc;"}

package/dist/components/overlay/command/components/command-item/styles/CommandItem.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                    */;/* empty css                                 */var e={root:"_1etemq20",icon:"_1etemq21",shortcut:"_1etemq22"};exports.COMMAND_ITEM_STYLES=e;
+//# sourceMappingURL=CommandItem.css.cjs.map

package/dist/components/overlay/command/components/command-item/styles/CommandItem.css.cjs.map

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

package/dist/components/overlay/command/components/command-item/styles/CommandItem.css.d.ts

@@ -0,0 +1,8 @@
+/** Styles for individual `Command.Item` elements. */
+export declare const COMMAND_ITEM_STYLES: {
+    root: string;
+    /** Leading/trailing icon wrapper — inherits item color automatically. */
+    icon: string;
+    /** Keyboard shortcut badge at the trailing edge. */
+    shortcut: string;
+};

package/dist/components/overlay/command/components/command-item/styles/CommandItem.css.js

@@ -0,0 +1,7 @@
+/* empty css                                                  */
+/* empty css                               */
+var o = { root: "_1etemq20", icon: "_1etemq21", shortcut: "_1etemq22" };
+export {
+  o as COMMAND_ITEM_STYLES
+};
+//# sourceMappingURL=CommandItem.css.js.map

package/dist/components/overlay/command/components/command-item/styles/CommandItem.css.js.map

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