@nuka-ui/core 1.1.1 → 1.1.2

package/dist/components/CommandMenu/CommandMenu.js

@@ -1,230 +1,65 @@
 "use client";
 import { cn as e } from "../../utils/cn.js";
-import { useControllableState as t } from "../../hooks/use-controllable-state.js";
-import { Icon as n } from "../Icon/Icon.js";
-import { Text as r } from "../Text/Text.js";
-import { Portal as i } from "../../utils/portal.js";
-import { useScrollLock as a } from "../../hooks/use-scroll-lock.js";
-import { useEscapeKey as o } from "../../hooks/use-escape-key.js";
-import { CommandMenuContext as s, useCommandMenuContext as c } from "./CommandMenu.context.js";
-import * as l from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { getActiveElement as t } from "../../utils/get-active-element.js";
+import { useControllableState as n } from "../../hooks/use-controllable-state.js";
+import { Portal as r } from "../../utils/portal.js";
+import { useScrollLock as i } from "../../hooks/use-scroll-lock.js";
+import { useEscapeKey as a } from "../../hooks/use-escape-key.js";
+import { CommandMenuContext as o } from "./CommandMenu.context.js";
+import { getVisibleItems as s } from "./CommandMenu.utils.js";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/CommandMenu/CommandMenu.tsx
-function f(e) {
-	return e.current == null ? [] : Array.from(e.current.querySelectorAll("[role=\"option\"]:not([hidden])"));
-}
-function p({ children: n, open: r, defaultOpen: c = !1, onOpenChange: p }) {
-	let [m, h] = t(r, c, p), [g, _] = l.useState(""), [v, y] = l.useState(null), [b, x] = l.useState(0), S = l.useId(), C = `${S}-listbox`, w = `${S}-input`, T = l.useRef(null), E = l.useRef(null);
-	a(m), o(l.useCallback(() => h(!1), [h]), m), l.useEffect(() => {
-		if (!m) return;
-		let e = f(T).length;
-		x(e);
-	}, [m, g]), l.useEffect(() => {
-		m ? E.current = document.activeElement : E.current != null && (E.current.focus(), E.current = null);
-	}, [m]), l.useEffect(() => {
-		m || (_(""), y(null));
-	}, [m]);
-	let D = l.useMemo(() => ({
-		open: m,
-		onOpenChange: h,
-		filter: g,
-		setFilter: _,
-		activeItemId: v,
-		setActiveItemId: y,
-		visibleCount: b,
-		baseId: S,
-		listboxId: C,
-		inputId: w,
-		listRef: T
+function d({ children: d, open: f, defaultOpen: p = !1, onOpenChange: m }) {
+	let [h, g] = n(f, p, m), [_, v] = c.useState(""), [y, b] = c.useState(null), [x, S] = c.useState(0), C = c.useId(), w = `${C}-listbox`, T = `${C}-input`, E = c.useRef(null), D = c.useRef(null);
+	i(h), a(c.useCallback(() => g(!1), [g]), h), c.useEffect(() => {
+		if (!h) return;
+		let e = s(E).length;
+		S(e);
+	}, [h, _]), c.useEffect(() => {
+		h ? D.current = t() : D.current != null && (D.current.focus(), D.current = null);
+	}, [h]), c.useEffect(() => {
+		h || (v(""), b(null));
+	}, [h]);
+	let O = c.useMemo(() => ({
+		open: h,
+		onOpenChange: g,
+		filter: _,
+		setFilter: v,
+		activeItemId: y,
+		setActiveItemId: b,
+		visibleCount: x,
+		baseId: C,
+		listboxId: w,
+		inputId: T,
+		listRef: E
 	}), [
-		m,
 		h,
 		g,
-		v,
-		b,
-		S,
+		_,
+		y,
+		x,
 		C,
-		w
+		w,
+		T
 	]);
-	return m ? /* @__PURE__ */ u(s, {
-		value: D,
-		children: /* @__PURE__ */ d(i, { children: [/* @__PURE__ */ u("div", {
+	return h ? /* @__PURE__ */ l(o, {
+		value: O,
+		children: /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l("div", {
 			className: e("fixed inset-0 z-(--nuka-z-modal)", "bg-(--nuka-bg-overlay)"),
-			onClick: () => h(!1),
+			onClick: () => g(!1),
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ u("div", {
+		}), /* @__PURE__ */ l("div", {
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": "Command menu",
 			className: e("fixed z-(--nuka-z-modal)", "left-1/2 top-[20%] -translate-x-1/2", "w-full max-w-lg", "rounded-(--radius-xl) border border-(--nuka-border-base)", "bg-(--nuka-bg-base) shadow-(--nuka-shadow-modal)", "overflow-hidden"),
-			children: n
+			children: d
 		})] })
 	}) : null;
 }
-p.displayName = "CommandMenu";
-var m = () => /* @__PURE__ */ d("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 2,
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	children: [/* @__PURE__ */ u("circle", {
-		cx: "11",
-		cy: "11",
-		r: "8"
-	}), /* @__PURE__ */ u("path", { d: "m21 21-4.3-4.3" })]
-}), h = l.forwardRef(({ className: t, ...r }, i) => {
-	let a = c(), o = l.useRef(null), s = l.useCallback((e) => {
-		o.current = e, typeof i == "function" ? i(e) : i != null && (i.current = e);
-	}, [i]);
-	l.useEffect(() => {
-		a.open && requestAnimationFrame(() => {
-			o.current?.focus();
-		});
-	}, [a.open]);
-	let p = (e) => {
-		let t = f(a.listRef);
-		switch (e.key) {
-			case "ArrowDown": {
-				if (e.preventDefault(), t.length === 0) return;
-				let n = t.findIndex((e) => e.id === a.activeItemId), r = t[n === -1 ? 0 : (n + 1) % t.length];
-				r != null && a.setActiveItemId(r.id);
-				break;
-			}
-			case "ArrowUp": {
-				if (e.preventDefault(), t.length === 0) return;
-				let n = t.findIndex((e) => e.id === a.activeItemId), r = t[n === -1 ? t.length - 1 : (n - 1 + t.length) % t.length];
-				r != null && a.setActiveItemId(r.id);
-				break;
-			}
-			case "Home": {
-				e.preventDefault();
-				let n = t[0];
-				n != null && a.setActiveItemId(n.id);
-				break;
-			}
-			case "End": {
-				e.preventDefault();
-				let n = t[t.length - 1];
-				n != null && a.setActiveItemId(n.id);
-				break;
-			}
-			case "Enter":
-				if (e.preventDefault(), a.activeItemId != null) {
-					let e = document.getElementById(a.activeItemId);
-					e != null && e.getAttribute("aria-disabled") !== "true" && e.click();
-				}
-				break;
-			case "Tab":
-				a.onOpenChange(!1);
-				break;
-			default: break;
-		}
-	}, h = (e) => {
-		a.setFilter(e.target.value), a.setActiveItemId(null);
-	}, g = a.activeItemId ?? void 0;
-	return /* @__PURE__ */ d("div", {
-		className: e("flex items-center gap-(--space-2) px-(--space-3)", "border-b border-(--nuka-border-base)"),
-		children: [/* @__PURE__ */ u(n, {
-			size: "sm",
-			color: "muted",
-			children: /* @__PURE__ */ u(m, {})
-		}), /* @__PURE__ */ u("input", {
-			ref: s,
-			id: a.inputId,
-			role: "combobox",
-			"aria-autocomplete": "list",
-			"aria-expanded": !0,
-			"aria-controls": a.listboxId,
-			"aria-activedescendant": g,
-			value: a.filter,
-			onChange: h,
-			onKeyDown: p,
-			className: e("flex-1 bg-transparent py-(--space-3)", "text-sm text-(--nuka-text-base)", "placeholder:text-(--nuka-text-muted)", "outline-none", t),
-			...r
-		})]
-	});
-});
-h.displayName = "CommandMenuInput";
-var g = l.forwardRef(({ className: t, ...n }, r) => {
-	let i = c();
-	return /* @__PURE__ */ u("div", {
-		ref: l.useCallback((e) => {
-			i.listRef.current = e, typeof r == "function" ? r(e) : r != null && (r.current = e);
-		}, [r, i.listRef]),
-		id: i.listboxId,
-		role: "listbox",
-		"aria-label": "Suggestions",
-		className: e("overflow-y-auto max-h-80 p-(--space-1)", t),
-		...n
-	});
-});
-g.displayName = "CommandMenuList";
-var _ = l.forwardRef(({ className: t, children: n, ...i }, a) => c().visibleCount > 0 ? null : /* @__PURE__ */ u("div", {
-	ref: a,
-	role: "presentation",
-	className: e("py-(--space-8) text-center", t),
-	...i,
-	children: /* @__PURE__ */ u(r, {
-		size: "sm",
-		color: "muted",
-		children: n
-	})
-}));
-_.displayName = "CommandMenuEmpty";
-var v = l.forwardRef(({ heading: t, className: n, children: r, ...i }, a) => {
-	let o = l.useId(), s = l.useRef(null), [f, p] = l.useState(!0), m = c(), h = l.useCallback((e) => {
-		s.current = e, typeof a == "function" ? a(e) : a != null && (a.current = e);
-	}, [a]);
-	return l.useEffect(() => {
-		s.current != null && p(s.current.querySelector("[role=\"option\"]:not([hidden])") !== null);
-	}, [m.filter]), /* @__PURE__ */ d("div", {
-		ref: h,
-		role: "group",
-		"aria-labelledby": t == null ? void 0 : o,
-		hidden: !f || void 0,
-		className: e(n),
-		...i,
-		children: [t != null && /* @__PURE__ */ u("div", {
-			id: o,
-			role: "presentation",
-			className: e("text-xs font-medium text-(--nuka-text-muted)", "px-(--space-3) py-(--space-2)"),
-			children: t
-		}), r]
-	});
-});
-v.displayName = "CommandMenuGroup";
-var y = l.forwardRef(({ value: t, disabled: n = !1, onSelect: r, className: i, children: a, ...o }, s) => {
-	let d = c(), f = l.useId(), p = l.useRef(null), m = l.useCallback((e) => {
-		p.current = e, typeof s == "function" ? s(e) : s != null && (s.current = e);
-	}, [s]), h = t != null && d.filter !== "" && !t.toLowerCase().includes(d.filter.toLowerCase()), g = d.activeItemId === f;
-	return l.useEffect(() => {
-		g && p.current != null && p.current.scrollIntoView({ block: "nearest" });
-	}, [g]), /* @__PURE__ */ u("div", {
-		ref: m,
-		id: f,
-		role: "option",
-		"aria-selected": g,
-		"aria-disabled": n || void 0,
-		hidden: h || void 0,
-		onClick: () => {
-			n || (r?.(), d.onOpenChange(!1));
-		},
-		className: e("flex items-center gap-(--space-2)", "px-(--space-3) py-(--space-2)", "rounded-(--radius-md) text-sm cursor-default", "select-none", g && "bg-(--nuka-bg-muted)", n ? "text-(--nuka-text-disabled)" : "text-(--nuka-text-base)", i),
-		...o,
-		children: a
-	});
-});
-y.displayName = "CommandMenuItem";
-var b = l.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ u("span", {
-	ref: r,
-	"aria-hidden": "true",
-	className: e("ml-auto text-xs text-(--nuka-text-muted)", t),
-	...n
-}));
-b.displayName = "CommandMenuShortcut";
+d.displayName = "CommandMenu";
 //#endregion
-export { p as CommandMenu, _ as CommandMenuEmpty, v as CommandMenuGroup, h as CommandMenuInput, y as CommandMenuItem, g as CommandMenuList, b as CommandMenuShortcut };
+export { d as CommandMenu };
 
 //# sourceMappingURL=CommandMenu.js.map

package/dist/components/CommandMenu/CommandMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandMenu.js","names":[],"sources":["../../../src/components/CommandMenu/CommandMenu.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@nuka/utils/cn\";\nimport { Portal } from \"@nuka/utils/portal\";\nimport { useScrollLock } from \"@nuka/hooks/use-scroll-lock\";\nimport { useEscapeKey } from \"@nuka/hooks/use-escape-key\";\nimport { useControllableState } from \"@nuka/hooks/use-controllable-state\";\nimport { Icon } from \"@nuka/components/Icon\";\nimport { Text } from \"@nuka/components/Text\";\nimport {\n  CommandMenuContext,\n  useCommandMenuContext,\n} from \"@nuka/components/CommandMenu/CommandMenu.context\";\n\nexport interface CommandMenuProps {\n  children: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nfunction getVisibleItems(\n  listRef: React.RefObject<HTMLDivElement | null>,\n): HTMLElement[] {\n  if (listRef.current == null) return [];\n  return Array.from(\n    listRef.current.querySelectorAll<HTMLElement>(\n      '[role=\"option\"]:not([hidden])',\n    ),\n  );\n}\n\nfunction CommandMenu({\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n}: CommandMenuProps) {\n  const [open, setOpen] = useControllableState(\n    controlledOpen,\n    defaultOpen,\n    onOpenChange,\n  );\n\n  const [filter, setFilter] = React.useState(\"\");\n  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);\n  const [visibleCount, setVisibleCount] = React.useState(0);\n\n  const baseId = React.useId();\n  const listboxId = `${baseId}-listbox`;\n  const inputId = `${baseId}-input`;\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const restoreRef = React.useRef<HTMLElement | null>(null);\n\n  useScrollLock(open);\n  useEscapeKey(\n    React.useCallback(() => setOpen(false), [setOpen]),\n    open,\n  );\n\n  // Update visibleCount after each filter change\n  React.useEffect(() => {\n    if (!open) return;\n    const count = getVisibleItems(listRef).length;\n    setVisibleCount(count);\n  }, [open, filter]);\n\n  // Save focus on open, restore on close\n  React.useEffect(() => {\n    if (open) {\n      restoreRef.current = document.activeElement as HTMLElement | null;\n    } else if (restoreRef.current != null) {\n      restoreRef.current.focus();\n      restoreRef.current = null;\n    }\n  }, [open]);\n\n  // Reset filter and active item when closing\n  React.useEffect(() => {\n    if (!open) {\n      setFilter(\"\");\n      setActiveItemId(null);\n    }\n  }, [open]);\n\n  const contextValue = React.useMemo(\n    () => ({\n      open,\n      onOpenChange: setOpen,\n      filter,\n      setFilter,\n      activeItemId,\n      setActiveItemId,\n      visibleCount,\n      baseId,\n      listboxId,\n      inputId,\n      listRef,\n    }),\n    [\n      open,\n      setOpen,\n      filter,\n      activeItemId,\n      visibleCount,\n      baseId,\n      listboxId,\n      inputId,\n    ],\n  );\n\n  if (!open) return null;\n\n  return (\n    <CommandMenuContext value={contextValue}>\n      <Portal>\n        <div\n          className={cn(\n            \"fixed inset-0 z-(--nuka-z-modal)\",\n            \"bg-(--nuka-bg-overlay)\",\n          )}\n          onClick={() => setOpen(false)}\n          aria-hidden=\"true\"\n        />\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Command menu\"\n          className={cn(\n            \"fixed z-(--nuka-z-modal)\",\n            \"left-1/2 top-[20%] -translate-x-1/2\",\n            \"w-full max-w-lg\",\n            \"rounded-(--radius-xl) border border-(--nuka-border-base)\",\n            \"bg-(--nuka-bg-base) shadow-(--nuka-shadow-modal)\",\n            \"overflow-hidden\",\n          )}\n        >\n          {children}\n        </div>\n      </Portal>\n    </CommandMenuContext>\n  );\n}\n\nCommandMenu.displayName = \"CommandMenu\";\n\nconst SearchIcon = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <path d=\"m21 21-4.3-4.3\" />\n  </svg>\n);\n\nexport interface CommandMenuInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"value\" | \"onChange\"\n> {}\n\nconst CommandMenuInput = React.forwardRef<\n  HTMLInputElement,\n  CommandMenuInputProps\n>(({ className, ...props }, ref) => {\n  const ctx = useCommandMenuContext();\n  const internalRef = React.useRef<HTMLInputElement>(null);\n  const composedRef = React.useCallback(\n    (node: HTMLInputElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref != null) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  // Focus input when the menu opens\n  React.useEffect(() => {\n    if (ctx.open) {\n      requestAnimationFrame(() => {\n        internalRef.current?.focus();\n      });\n    }\n  }, [ctx.open]);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const items = getVisibleItems(ctx.listRef);\n\n    switch (e.key) {\n      case \"ArrowDown\": {\n        e.preventDefault();\n        if (items.length === 0) return;\n        const currentIdx = items.findIndex((el) => el.id === ctx.activeItemId);\n        const nextIdx = currentIdx === -1 ? 0 : (currentIdx + 1) % items.length;\n        const next = items[nextIdx];\n        if (next != null) {\n          ctx.setActiveItemId(next.id);\n        }\n        break;\n      }\n      case \"ArrowUp\": {\n        e.preventDefault();\n        if (items.length === 0) return;\n        const currentIdx = items.findIndex((el) => el.id === ctx.activeItemId);\n        const prevIdx =\n          currentIdx === -1\n            ? items.length - 1\n            : (currentIdx - 1 + items.length) % items.length;\n        const prev = items[prevIdx];\n        if (prev != null) {\n          ctx.setActiveItemId(prev.id);\n        }\n        break;\n      }\n      case \"Home\": {\n        e.preventDefault();\n        const first = items[0];\n        if (first != null) {\n          ctx.setActiveItemId(first.id);\n        }\n        break;\n      }\n      case \"End\": {\n        e.preventDefault();\n        const last = items[items.length - 1];\n        if (last != null) {\n          ctx.setActiveItemId(last.id);\n        }\n        break;\n      }\n      case \"Enter\": {\n        e.preventDefault();\n        if (ctx.activeItemId != null) {\n          const activeEl = document.getElementById(ctx.activeItemId);\n          if (\n            activeEl != null &&\n            activeEl.getAttribute(\"aria-disabled\") !== \"true\"\n          ) {\n            activeEl.click();\n          }\n        }\n        break;\n      }\n      case \"Tab\": {\n        ctx.onOpenChange(false);\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    ctx.setFilter(e.target.value);\n    ctx.setActiveItemId(null);\n  };\n\n  const activedescendant = ctx.activeItemId ?? undefined;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-(--space-2) px-(--space-3)\",\n        \"border-b border-(--nuka-border-base)\",\n      )}\n    >\n      <Icon size=\"sm\" color=\"muted\">\n        <SearchIcon />\n      </Icon>\n      <input\n        ref={composedRef}\n        id={ctx.inputId}\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded={true}\n        aria-controls={ctx.listboxId}\n        aria-activedescendant={activedescendant}\n        value={ctx.filter}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"flex-1 bg-transparent py-(--space-3)\",\n          \"text-sm text-(--nuka-text-base)\",\n          \"placeholder:text-(--nuka-text-muted)\",\n          \"outline-none\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\n\nCommandMenuInput.displayName = \"CommandMenuInput\";\n\nexport interface CommandMenuListProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CommandMenuList = React.forwardRef<HTMLDivElement, CommandMenuListProps>(\n  ({ className, ...props }, ref) => {\n    const ctx = useCommandMenuContext();\n    const composedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        ctx.listRef.current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref != null) {\n          ref.current = node;\n        }\n      },\n      [ref, ctx.listRef],\n    );\n\n    return (\n      <div\n        ref={composedRef}\n        id={ctx.listboxId}\n        role=\"listbox\"\n        aria-label=\"Suggestions\"\n        className={cn(\"overflow-y-auto max-h-80 p-(--space-1)\", className)}\n        {...props}\n      />\n    );\n  },\n);\n\nCommandMenuList.displayName = \"CommandMenuList\";\n\nexport interface CommandMenuEmptyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CommandMenuEmpty = React.forwardRef<\n  HTMLDivElement,\n  CommandMenuEmptyProps\n>(({ className, children, ...props }, ref) => {\n  const ctx = useCommandMenuContext();\n\n  if (ctx.visibleCount > 0) return null;\n\n  return (\n    <div\n      ref={ref}\n      role=\"presentation\"\n      className={cn(\"py-(--space-8) text-center\", className)}\n      {...props}\n    >\n      <Text size=\"sm\" color=\"muted\">\n        {children}\n      </Text>\n    </div>\n  );\n});\n\nCommandMenuEmpty.displayName = \"CommandMenuEmpty\";\n\nexport interface CommandMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  heading?: string;\n}\n\nconst CommandMenuGroup = React.forwardRef<\n  HTMLDivElement,\n  CommandMenuGroupProps\n>(({ heading, className, children, ...props }, ref) => {\n  const headingId = React.useId();\n  const groupRef = React.useRef<HTMLDivElement>(null);\n  const [hasVisibleItems, setHasVisibleItems] = React.useState(true);\n  const ctx = useCommandMenuContext();\n\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      groupRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref != null) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  React.useEffect(() => {\n    if (groupRef.current == null) return;\n    const visible =\n      groupRef.current.querySelector('[role=\"option\"]:not([hidden])') !== null;\n    setHasVisibleItems(visible);\n  }, [ctx.filter]);\n\n  return (\n    <div\n      ref={composedRef}\n      role=\"group\"\n      aria-labelledby={heading != null ? headingId : undefined}\n      hidden={!hasVisibleItems || undefined}\n      className={cn(className)}\n      {...props}\n    >\n      {heading != null && (\n        <div\n          id={headingId}\n          role=\"presentation\"\n          className={cn(\n            \"text-xs font-medium text-(--nuka-text-muted)\",\n            \"px-(--space-3) py-(--space-2)\",\n          )}\n        >\n          {heading}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n});\n\nCommandMenuGroup.displayName = \"CommandMenuGroup\";\n\nexport interface CommandMenuItemProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"onSelect\"\n> {\n  value?: string;\n  disabled?: boolean;\n  onSelect?: () => void;\n}\n\nconst CommandMenuItem = React.forwardRef<HTMLDivElement, CommandMenuItemProps>(\n  (\n    { value, disabled = false, onSelect, className, children, ...props },\n    ref,\n  ) => {\n    const ctx = useCommandMenuContext();\n    const itemId = React.useId();\n    const internalRef = React.useRef<HTMLDivElement>(null);\n\n    const composedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        internalRef.current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref != null) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const isFiltered =\n      value != null &&\n      ctx.filter !== \"\" &&\n      !value.toLowerCase().includes(ctx.filter.toLowerCase());\n\n    const isActive = ctx.activeItemId === itemId;\n\n    // Auto-scroll active item into view\n    React.useEffect(() => {\n      if (isActive && internalRef.current != null) {\n        internalRef.current.scrollIntoView({ block: \"nearest\" });\n      }\n    }, [isActive]);\n\n    const handleClick = () => {\n      if (disabled) return;\n      onSelect?.();\n      ctx.onOpenChange(false);\n    };\n\n    return (\n      <div\n        ref={composedRef}\n        id={itemId}\n        role=\"option\"\n        aria-selected={isActive}\n        aria-disabled={disabled || undefined}\n        hidden={isFiltered || undefined}\n        onClick={handleClick}\n        className={cn(\n          \"flex items-center gap-(--space-2)\",\n          \"px-(--space-3) py-(--space-2)\",\n          \"rounded-(--radius-md) text-sm cursor-default\",\n          \"select-none\",\n          isActive && \"bg-(--nuka-bg-muted)\",\n          disabled ? \"text-(--nuka-text-disabled)\" : \"text-(--nuka-text-base)\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nCommandMenuItem.displayName = \"CommandMenuItem\";\n\nexport interface CommandMenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nconst CommandMenuShortcut = React.forwardRef<\n  HTMLSpanElement,\n  CommandMenuShortcutProps\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    aria-hidden=\"true\"\n    className={cn(\"ml-auto text-xs text-(--nuka-text-muted)\", className)}\n    {...props}\n  />\n));\n\nCommandMenuShortcut.displayName = \"CommandMenuShortcut\";\n\nexport {\n  CommandMenu,\n  CommandMenuInput,\n  CommandMenuList,\n  CommandMenuEmpty,\n  CommandMenuGroup,\n  CommandMenuItem,\n  CommandMenuShortcut,\n};\n"],"mappings":"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"}
+{"version":3,"file":"CommandMenu.js","names":[],"sources":["../../../src/components/CommandMenu/CommandMenu.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@nuka/utils/cn\";\nimport { Portal } from \"@nuka/utils/portal\";\nimport { useScrollLock } from \"@nuka/hooks/use-scroll-lock\";\nimport { useEscapeKey } from \"@nuka/hooks/use-escape-key\";\nimport { useControllableState } from \"@nuka/hooks/use-controllable-state\";\nimport { getActiveElement } from \"@nuka/utils/get-active-element\";\nimport { CommandMenuContext } from \"@nuka/components/CommandMenu/CommandMenu.context\";\nimport { getVisibleItems } from \"@nuka/components/CommandMenu/CommandMenu.utils\";\n\nexport interface CommandMenuProps {\n  children: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nfunction CommandMenu({\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n}: CommandMenuProps) {\n  const [open, setOpen] = useControllableState(\n    controlledOpen,\n    defaultOpen,\n    onOpenChange,\n  );\n\n  const [filter, setFilter] = React.useState(\"\");\n  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);\n  const [visibleCount, setVisibleCount] = React.useState(0);\n\n  const baseId = React.useId();\n  const listboxId = `${baseId}-listbox`;\n  const inputId = `${baseId}-input`;\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const restoreRef = React.useRef<HTMLElement | null>(null);\n\n  useScrollLock(open);\n  useEscapeKey(\n    React.useCallback(() => setOpen(false), [setOpen]),\n    open,\n  );\n\n  React.useEffect(() => {\n    if (!open) return;\n    const count = getVisibleItems(listRef).length;\n    setVisibleCount(count);\n  }, [open, filter]);\n\n  React.useEffect(() => {\n    if (open) {\n      restoreRef.current = getActiveElement() as HTMLElement | null;\n    } else if (restoreRef.current != null) {\n      restoreRef.current.focus();\n      restoreRef.current = null;\n    }\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) {\n      setFilter(\"\");\n      setActiveItemId(null);\n    }\n  }, [open]);\n\n  const contextValue = React.useMemo(\n    () => ({\n      open,\n      onOpenChange: setOpen,\n      filter,\n      setFilter,\n      activeItemId,\n      setActiveItemId,\n      visibleCount,\n      baseId,\n      listboxId,\n      inputId,\n      listRef,\n    }),\n    [\n      open,\n      setOpen,\n      filter,\n      activeItemId,\n      visibleCount,\n      baseId,\n      listboxId,\n      inputId,\n    ],\n  );\n\n  if (!open) return null;\n\n  return (\n    <CommandMenuContext value={contextValue}>\n      <Portal>\n        <div\n          className={cn(\n            \"fixed inset-0 z-(--nuka-z-modal)\",\n            \"bg-(--nuka-bg-overlay)\",\n          )}\n          onClick={() => setOpen(false)}\n          aria-hidden=\"true\"\n        />\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Command menu\"\n          className={cn(\n            \"fixed z-(--nuka-z-modal)\",\n            \"left-1/2 top-[20%] -translate-x-1/2\",\n            \"w-full max-w-lg\",\n            \"rounded-(--radius-xl) border border-(--nuka-border-base)\",\n            \"bg-(--nuka-bg-base) shadow-(--nuka-shadow-modal)\",\n            \"overflow-hidden\",\n          )}\n        >\n          {children}\n        </div>\n      </Portal>\n    </CommandMenuContext>\n  );\n}\n\nCommandMenu.displayName = \"CommandMenu\";\n\nexport { CommandMenu };\n"],"mappings":";;;;;;;;;;;;AAkBA,SAAS,EAAY,EACnB,aACA,MAAM,GACN,iBAAc,IACd,mBACmB;CACnB,IAAM,CAAC,GAAM,KAAW,EACtB,GACA,GACA,EACD,EAEK,CAAC,GAAQ,KAAa,EAAM,SAAS,GAAG,EACxC,CAAC,GAAc,KAAmB,EAAM,SAAwB,KAAK,EACrE,CAAC,GAAc,KAAmB,EAAM,SAAS,EAAE,EAEnD,IAAS,EAAM,OAAO,EACtB,IAAY,GAAG,EAAO,WACtB,IAAU,GAAG,EAAO,SACpB,IAAU,EAAM,OAAuB,KAAK,EAC5C,IAAa,EAAM,OAA2B,KAAK;AAuBzD,CArBA,EAAc,EAAK,EACnB,EACE,EAAM,kBAAkB,EAAQ,GAAM,EAAE,CAAC,EAAQ,CAAC,EAClD,EACD,EAED,EAAM,gBAAgB;AACpB,MAAI,CAAC,EAAM;EACX,IAAM,IAAQ,EAAgB,EAAQ,CAAC;AACvC,IAAgB,EAAM;IACrB,CAAC,GAAM,EAAO,CAAC,EAElB,EAAM,gBAAgB;AACpB,EAAI,IACF,EAAW,UAAU,GAAkB,GAC9B,EAAW,WAAW,SAC/B,EAAW,QAAQ,OAAO,EAC1B,EAAW,UAAU;IAEtB,CAAC,EAAK,CAAC,EAEV,EAAM,gBAAgB;AACpB,EAAK,MACH,EAAU,GAAG,EACb,EAAgB,KAAK;IAEtB,CAAC,EAAK,CAAC;CAEV,IAAM,IAAe,EAAM,eAClB;EACL;EACA,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAID,QAFK,IAGH,kBAAC,GAAD;EAAoB,OAAO;YACzB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;GACE,WAAW,EACT,oCACA,yBACD;GACD,eAAe,EAAQ,GAAM;GAC7B,eAAY;GACZ,CAAA,EACF,kBAAC,OAAD;GACE,MAAK;GACL,cAAW;GACX,cAAW;GACX,WAAW,EACT,4BACA,uCACA,mBACA,4DACA,oDACA,kBACD;GAEA;GACG,CAAA,CACC,EAAA,CAAA;EACU,CAAA,GA7BL;;AAiCpB,EAAY,cAAc"}

package/dist/components/CommandMenu/CommandMenu.utils.cjs

@@ -0,0 +1,2 @@
+require(`../../_virtual/_rolldown/runtime.cjs`);let e=require(`react/jsx-runtime`);function t(e){return e.current==null?[]:Array.from(e.current.querySelectorAll(`[role="option"]:not([hidden])`))}var n=()=>(0,e.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,e.jsx)(`circle`,{cx:`11`,cy:`11`,r:`8`}),(0,e.jsx)(`path`,{d:`m21 21-4.3-4.3`})]});exports.SearchIcon=n,exports.getVisibleItems=t;
+//# sourceMappingURL=CommandMenu.utils.cjs.map

package/dist/components/CommandMenu/CommandMenu.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenu.utils.cjs","names":[],"sources":["../../../src/components/CommandMenu/CommandMenu.utils.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nfunction getVisibleItems(\n  listRef: React.RefObject<HTMLDivElement | null>,\n): HTMLElement[] {\n  if (listRef.current == null) return [];\n  return Array.from(\n    listRef.current.querySelectorAll<HTMLElement>(\n      '[role=\"option\"]:not([hidden])',\n    ),\n  );\n}\n\nconst SearchIcon = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <path d=\"m21 21-4.3-4.3\" />\n  </svg>\n);\n\nexport { getVisibleItems, SearchIcon };\n"],"mappings":"mFAEA,SAAS,EACP,EACe,CAEf,OADI,EAAQ,SAAW,KAAa,EAAE,CAC/B,MAAM,KACX,EAAQ,QAAQ,iBACd,gCACD,CACF,CAGH,IAAM,OACJ,EAAA,EAAA,MAAC,MAAD,CACE,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAa,EACb,cAAc,QACd,eAAe,iBANjB,EAQE,EAAA,EAAA,KAAC,SAAD,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,IAAM,CAAA,EAChC,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,iBAAmB,CAAA,CACvB"}

package/dist/components/CommandMenu/CommandMenu.utils.d.ts

@@ -0,0 +1,5 @@
+import type * as React from "react";
+declare function getVisibleItems(listRef: React.RefObject<HTMLDivElement | null>): HTMLElement[];
+declare const SearchIcon: () => import("react/jsx-runtime").JSX.Element;
+export { getVisibleItems, SearchIcon };
+//# sourceMappingURL=CommandMenu.utils.d.ts.map

package/dist/components/CommandMenu/CommandMenu.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenu.utils.d.ts","sourceRoot":"","sources":["../../../src/components/CommandMenu/CommandMenu.utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,iBAAS,eAAe,CACtB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,GAC9C,WAAW,EAAE,CAOf;AAED,QAAA,MAAM,UAAU,+CAYf,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/CommandMenu/CommandMenu.utils.js

@@ -0,0 +1,22 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/CommandMenu/CommandMenu.utils.tsx
+function n(e) {
+	return e.current == null ? [] : Array.from(e.current.querySelectorAll("[role=\"option\"]:not([hidden])"));
+}
+var r = () => /* @__PURE__ */ t("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [/* @__PURE__ */ e("circle", {
+		cx: "11",
+		cy: "11",
+		r: "8"
+	}), /* @__PURE__ */ e("path", { d: "m21 21-4.3-4.3" })]
+});
+//#endregion
+export { r as SearchIcon, n as getVisibleItems };
+
+//# sourceMappingURL=CommandMenu.utils.js.map

package/dist/components/CommandMenu/CommandMenu.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenu.utils.js","names":[],"sources":["../../../src/components/CommandMenu/CommandMenu.utils.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nfunction getVisibleItems(\n  listRef: React.RefObject<HTMLDivElement | null>,\n): HTMLElement[] {\n  if (listRef.current == null) return [];\n  return Array.from(\n    listRef.current.querySelectorAll<HTMLElement>(\n      '[role=\"option\"]:not([hidden])',\n    ),\n  );\n}\n\nconst SearchIcon = () => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <circle cx=\"11\" cy=\"11\" r=\"8\" />\n    <path d=\"m21 21-4.3-4.3\" />\n  </svg>\n);\n\nexport { getVisibleItems, SearchIcon };\n"],"mappings":";;AAEA,SAAS,EACP,GACe;AAEf,QADI,EAAQ,WAAW,OAAa,EAAE,GAC/B,MAAM,KACX,EAAQ,QAAQ,iBACd,kCACD,CACF;;AAGH,IAAM,UACJ,kBAAC,OAAD;CACE,SAAQ;CACR,MAAK;CACL,QAAO;CACP,aAAa;CACb,eAAc;CACd,gBAAe;WANjB,CAQE,kBAAC,UAAD;EAAQ,IAAG;EAAK,IAAG;EAAK,GAAE;EAAM,CAAA,EAChC,kBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA,CACvB"}

package/dist/components/CommandMenu/CommandMenuEmpty.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../utils/cn.cjs`),n=require(`../Text/Text.cjs`),r=require(`./CommandMenu.context.cjs`);let i=require(`react`);i=e.__toESM(i,1);let a=require(`react/jsx-runtime`);function o({ref:e,className:i,children:o,...s}){return r.useCommandMenuContext().visibleCount>0?null:(0,a.jsx)(`div`,{ref:e,role:`presentation`,className:t.cn(`py-(--space-8) text-center`,i),...s,children:(0,a.jsx)(n.Text,{size:`sm`,color:`muted`,children:o})})}o.displayName=`CommandMenuEmpty`,exports.CommandMenuEmpty=o;
+//# sourceMappingURL=CommandMenuEmpty.cjs.map

package/dist/components/CommandMenu/CommandMenuEmpty.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenuEmpty.cjs","names":[],"sources":["../../../src/components/CommandMenu/CommandMenuEmpty.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@nuka/utils/cn\";\nimport { Text } from \"@nuka/components/Text\";\nimport { useCommandMenuContext } from \"@nuka/components/CommandMenu/CommandMenu.context\";\n\nexport interface CommandMenuEmptyProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement> | undefined;\n}\n\nfunction CommandMenuEmpty({\n  ref,\n  className,\n  children,\n  ...props\n}: CommandMenuEmptyProps) {\n  const ctx = useCommandMenuContext();\n\n  if (ctx.visibleCount > 0) return null;\n\n  return (\n    <div\n      ref={ref}\n      role=\"presentation\"\n      className={cn(\"py-(--space-8) text-center\", className)}\n      {...props}\n    >\n      <Text size=\"sm\" color=\"muted\">\n        {children}\n      </Text>\n    </div>\n  );\n}\n\nCommandMenuEmpty.displayName = \"CommandMenuEmpty\";\n\nexport { CommandMenuEmpty };\n"],"mappings":"qPAUA,SAAS,EAAiB,CACxB,MACA,YACA,WACA,GAAG,GACqB,CAKxB,OAJY,EAAA,uBAAuB,CAE3B,aAAe,EAAU,MAG/B,EAAA,EAAA,KAAC,MAAD,CACO,MACL,KAAK,eACL,UAAW,EAAA,GAAG,6BAA8B,EAAU,CACtD,GAAI,YAEJ,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAK,KAAK,MAAM,QACnB,WACI,CAAA,CACH,CAAA,CAIV,EAAiB,YAAc"}

package/dist/components/CommandMenu/CommandMenuEmpty.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface CommandMenuEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}
+declare function CommandMenuEmpty({ ref, className, children, ...props }: CommandMenuEmptyProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace CommandMenuEmpty {
+    var displayName: string;
+}
+export { CommandMenuEmpty };
+//# sourceMappingURL=CommandMenuEmpty.d.ts.map

package/dist/components/CommandMenu/CommandMenuEmpty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenuEmpty.d.ts","sourceRoot":"","sources":["../../../src/components/CommandMenu/CommandMenuEmpty.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC;CAC7C;AAED,iBAAS,gBAAgB,CAAC,EACxB,GAAG,EACH,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,kDAiBvB;kBAtBQ,gBAAgB;;;AA0BzB,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/CommandMenu/CommandMenuEmpty.js

@@ -0,0 +1,25 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { Text as t } from "../Text/Text.js";
+import { useCommandMenuContext as n } from "./CommandMenu.context.js";
+import "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/CommandMenu/CommandMenuEmpty.tsx
+function i({ ref: i, className: a, children: o, ...s }) {
+	return n().visibleCount > 0 ? null : /* @__PURE__ */ r("div", {
+		ref: i,
+		role: "presentation",
+		className: e("py-(--space-8) text-center", a),
+		...s,
+		children: /* @__PURE__ */ r(t, {
+			size: "sm",
+			color: "muted",
+			children: o
+		})
+	});
+}
+i.displayName = "CommandMenuEmpty";
+//#endregion
+export { i as CommandMenuEmpty };
+
+//# sourceMappingURL=CommandMenuEmpty.js.map

package/dist/components/CommandMenu/CommandMenuEmpty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenuEmpty.js","names":[],"sources":["../../../src/components/CommandMenu/CommandMenuEmpty.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@nuka/utils/cn\";\nimport { Text } from \"@nuka/components/Text\";\nimport { useCommandMenuContext } from \"@nuka/components/CommandMenu/CommandMenu.context\";\n\nexport interface CommandMenuEmptyProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement> | undefined;\n}\n\nfunction CommandMenuEmpty({\n  ref,\n  className,\n  children,\n  ...props\n}: CommandMenuEmptyProps) {\n  const ctx = useCommandMenuContext();\n\n  if (ctx.visibleCount > 0) return null;\n\n  return (\n    <div\n      ref={ref}\n      role=\"presentation\"\n      className={cn(\"py-(--space-8) text-center\", className)}\n      {...props}\n    >\n      <Text size=\"sm\" color=\"muted\">\n        {children}\n      </Text>\n    </div>\n  );\n}\n\nCommandMenuEmpty.displayName = \"CommandMenuEmpty\";\n\nexport { CommandMenuEmpty };\n"],"mappings":";;;;;;;AAUA,SAAS,EAAiB,EACxB,QACA,cACA,aACA,GAAG,KACqB;AAKxB,QAJY,GAAuB,CAE3B,eAAe,IAAU,OAG/B,kBAAC,OAAD;EACO;EACL,MAAK;EACL,WAAW,EAAG,8BAA8B,EAAU;EACtD,GAAI;YAEJ,kBAAC,GAAD;GAAM,MAAK;GAAK,OAAM;GACnB;GACI,CAAA;EACH,CAAA;;AAIV,EAAiB,cAAc"}

package/dist/components/CommandMenu/CommandMenuGroup.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../utils/cn.cjs`),n=require(`./CommandMenu.context.cjs`);let r=require(`react`);r=e.__toESM(r,1);let i=require(`react/jsx-runtime`);function a({ref:e,heading:a,className:o,children:s,...c}){let l=r.useId(),u=r.useRef(null),[d,f]=r.useState(!0),p=n.useCommandMenuContext(),m=r.useCallback(t=>{u.current=t,typeof e==`function`?e(t):e!=null&&(e.current=t)},[e]);return r.useEffect(()=>{u.current!=null&&f(u.current.querySelector(`[role="option"]:not([hidden])`)!==null)},[p.filter]),(0,i.jsxs)(`div`,{ref:m,role:`group`,"aria-labelledby":a==null?void 0:l,hidden:!d||void 0,className:t.cn(o),...c,children:[a!=null&&(0,i.jsx)(`div`,{id:l,role:`presentation`,className:t.cn(`text-xs font-medium text-(--nuka-text-muted)`,`px-(--space-3) py-(--space-2)`),children:a}),s]})}a.displayName=`CommandMenuGroup`,exports.CommandMenuGroup=a;
+//# sourceMappingURL=CommandMenuGroup.cjs.map

package/dist/components/CommandMenu/CommandMenuGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenuGroup.cjs","names":[],"sources":["../../../src/components/CommandMenu/CommandMenuGroup.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@nuka/utils/cn\";\nimport { useCommandMenuContext } from \"@nuka/components/CommandMenu/CommandMenu.context\";\n\nexport interface CommandMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement> | undefined;\n  heading?: string;\n}\n\nfunction CommandMenuGroup({\n  ref,\n  heading,\n  className,\n  children,\n  ...props\n}: CommandMenuGroupProps) {\n  const headingId = React.useId();\n  const groupRef = React.useRef<HTMLDivElement>(null);\n  const [hasVisibleItems, setHasVisibleItems] = React.useState(true);\n  const ctx = useCommandMenuContext();\n\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      groupRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref != null) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  React.useEffect(() => {\n    if (groupRef.current == null) return;\n    const visible =\n      groupRef.current.querySelector('[role=\"option\"]:not([hidden])') !== null;\n    setHasVisibleItems(visible);\n  }, [ctx.filter]);\n\n  return (\n    <div\n      ref={composedRef}\n      role=\"group\"\n      aria-labelledby={heading != null ? headingId : undefined}\n      hidden={!hasVisibleItems || undefined}\n      className={cn(className)}\n      {...props}\n    >\n      {heading != null && (\n        <div\n          id={headingId}\n          role=\"presentation\"\n          className={cn(\n            \"text-xs font-medium text-(--nuka-text-muted)\",\n            \"px-(--space-3) py-(--space-2)\",\n          )}\n        >\n          {heading}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nCommandMenuGroup.displayName = \"CommandMenuGroup\";\n\nexport { CommandMenuGroup };\n"],"mappings":"uNAUA,SAAS,EAAiB,CACxB,MACA,UACA,YACA,WACA,GAAG,GACqB,CACxB,IAAM,EAAY,EAAM,OAAO,CACzB,EAAW,EAAM,OAAuB,KAAK,CAC7C,CAAC,EAAiB,GAAsB,EAAM,SAAS,GAAK,CAC5D,EAAM,EAAA,uBAAuB,CAE7B,EAAc,EAAM,YACvB,GAAgC,CAC/B,EAAS,QAAU,EACf,OAAO,GAAQ,WACjB,EAAI,EAAK,CACA,GAAO,OAChB,EAAI,QAAU,IAGlB,CAAC,EAAI,CACN,CASD,OAPA,EAAM,cAAgB,CAChB,EAAS,SAAW,MAGxB,EADE,EAAS,QAAQ,cAAc,gCAAgC,GAAK,KAC3C,EAC1B,CAAC,EAAI,OAAO,CAAC,EAGd,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,QACL,kBAAiB,GAAW,KAAmB,IAAA,GAAZ,EACnC,OAAQ,CAAC,GAAmB,IAAA,GAC5B,UAAW,EAAA,GAAG,EAAU,CACxB,GAAI,WANN,CAQG,GAAW,OACV,EAAA,EAAA,KAAC,MAAD,CACE,GAAI,EACJ,KAAK,eACL,UAAW,EAAA,GACT,+CACA,gCACD,UAEA,EACG,CAAA,CAEP,EACG,GAIV,EAAiB,YAAc"}

package/dist/components/CommandMenu/CommandMenuGroup.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface CommandMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+    heading?: string;
+}
+declare function CommandMenuGroup({ ref, heading, className, children, ...props }: CommandMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuGroup {
+    var displayName: string;
+}
+export { CommandMenuGroup };
+//# sourceMappingURL=CommandMenuGroup.d.ts.map

package/dist/components/CommandMenu/CommandMenuGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenuGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CommandMenu/CommandMenuGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,iBAAS,gBAAgB,CAAC,EACxB,GAAG,EACH,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAiDvB;kBAvDQ,gBAAgB;;;AA2DzB,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/CommandMenu/CommandMenuGroup.js

@@ -0,0 +1,32 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useCommandMenuContext as t } from "./CommandMenu.context.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/CommandMenu/CommandMenuGroup.tsx
+function a({ ref: a, heading: o, className: s, children: c, ...l }) {
+	let u = n.useId(), d = n.useRef(null), [f, p] = n.useState(!0), m = t(), h = n.useCallback((e) => {
+		d.current = e, typeof a == "function" ? a(e) : a != null && (a.current = e);
+	}, [a]);
+	return n.useEffect(() => {
+		d.current != null && p(d.current.querySelector("[role=\"option\"]:not([hidden])") !== null);
+	}, [m.filter]), /* @__PURE__ */ i("div", {
+		ref: h,
+		role: "group",
+		"aria-labelledby": o == null ? void 0 : u,
+		hidden: !f || void 0,
+		className: e(s),
+		...l,
+		children: [o != null && /* @__PURE__ */ r("div", {
+			id: u,
+			role: "presentation",
+			className: e("text-xs font-medium text-(--nuka-text-muted)", "px-(--space-3) py-(--space-2)"),
+			children: o
+		}), c]
+	});
+}
+a.displayName = "CommandMenuGroup";
+//#endregion
+export { a as CommandMenuGroup };
+
+//# sourceMappingURL=CommandMenuGroup.js.map

package/dist/components/CommandMenu/CommandMenuGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenuGroup.js","names":[],"sources":["../../../src/components/CommandMenu/CommandMenuGroup.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@nuka/utils/cn\";\nimport { useCommandMenuContext } from \"@nuka/components/CommandMenu/CommandMenu.context\";\n\nexport interface CommandMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement> | undefined;\n  heading?: string;\n}\n\nfunction CommandMenuGroup({\n  ref,\n  heading,\n  className,\n  children,\n  ...props\n}: CommandMenuGroupProps) {\n  const headingId = React.useId();\n  const groupRef = React.useRef<HTMLDivElement>(null);\n  const [hasVisibleItems, setHasVisibleItems] = React.useState(true);\n  const ctx = useCommandMenuContext();\n\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      groupRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref != null) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  React.useEffect(() => {\n    if (groupRef.current == null) return;\n    const visible =\n      groupRef.current.querySelector('[role=\"option\"]:not([hidden])') !== null;\n    setHasVisibleItems(visible);\n  }, [ctx.filter]);\n\n  return (\n    <div\n      ref={composedRef}\n      role=\"group\"\n      aria-labelledby={heading != null ? headingId : undefined}\n      hidden={!hasVisibleItems || undefined}\n      className={cn(className)}\n      {...props}\n    >\n      {heading != null && (\n        <div\n          id={headingId}\n          role=\"presentation\"\n          className={cn(\n            \"text-xs font-medium text-(--nuka-text-muted)\",\n            \"px-(--space-3) py-(--space-2)\",\n          )}\n        >\n          {heading}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nCommandMenuGroup.displayName = \"CommandMenuGroup\";\n\nexport { CommandMenuGroup };\n"],"mappings":";;;;;;AAUA,SAAS,EAAiB,EACxB,QACA,YACA,cACA,aACA,GAAG,KACqB;CACxB,IAAM,IAAY,EAAM,OAAO,EACzB,IAAW,EAAM,OAAuB,KAAK,EAC7C,CAAC,GAAiB,KAAsB,EAAM,SAAS,GAAK,EAC5D,IAAM,GAAuB,EAE7B,IAAc,EAAM,aACvB,MAAgC;AAE/B,EADA,EAAS,UAAU,GACf,OAAO,KAAQ,aACjB,EAAI,EAAK,GACA,KAAO,SAChB,EAAI,UAAU;IAGlB,CAAC,EAAI,CACN;AASD,QAPA,EAAM,gBAAgB;AAChB,IAAS,WAAW,QAGxB,EADE,EAAS,QAAQ,cAAc,kCAAgC,KAAK,KAC3C;IAC1B,CAAC,EAAI,OAAO,CAAC,EAGd,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,mBAAiB,KAAW,OAAmB,KAAA,IAAZ;EACnC,QAAQ,CAAC,KAAmB,KAAA;EAC5B,WAAW,EAAG,EAAU;EACxB,GAAI;YANN,CAQG,KAAW,QACV,kBAAC,OAAD;GACE,IAAI;GACJ,MAAK;GACL,WAAW,EACT,gDACA,gCACD;aAEA;GACG,CAAA,EAEP,EACG;;;AAIV,EAAiB,cAAc"}

package/dist/components/CommandMenu/CommandMenuInput.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../utils/cn.cjs`),n=require(`../../utils/roving-index.cjs`),r=require(`../Icon/Icon.cjs`),i=require(`./CommandMenu.context.cjs`),a=require(`./CommandMenu.utils.cjs`);let o=require(`react`);o=e.__toESM(o,1);let s=require(`react/jsx-runtime`);function c({ref:e,className:c,...l}){let u=i.useCommandMenuContext(),d=o.useRef(null),f=o.useCallback(t=>{d.current=t,typeof e==`function`?e(t):e!=null&&(e.current=t)},[e]);o.useEffect(()=>{u.open&&requestAnimationFrame(()=>{d.current?.focus()})},[u.open]);let p=e=>{let t=a.getVisibleItems(u.listRef),r=t.findIndex(e=>e.id===u.activeItemId),i=n.getRovingIndex(e.key,r,t.length,`vertical`);if(i!==void 0){e.preventDefault();let n=t[i];n!=null&&u.setActiveItemId(n.id);return}switch(e.key){case`Enter`:if(e.preventDefault(),u.activeItemId!=null){let e=document.getElementById(u.activeItemId);e!=null&&e.getAttribute(`aria-disabled`)!==`true`&&e.click()}break;case`Tab`:u.onOpenChange(!1);break;default:break}},m=e=>{u.setFilter(e.target.value),u.setActiveItemId(null)},h=u.activeItemId??void 0;return(0,s.jsxs)(`div`,{className:t.cn(`flex items-center gap-(--space-2) px-(--space-3)`,`border-b border-(--nuka-border-base)`),children:[(0,s.jsx)(r.Icon,{size:`sm`,color:`muted`,children:(0,s.jsx)(a.SearchIcon,{})}),(0,s.jsx)(`input`,{ref:f,id:u.inputId,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":!0,"aria-controls":u.listboxId,"aria-activedescendant":h,value:u.filter,onChange:m,onKeyDown:p,className:t.cn(`flex-1 bg-transparent py-(--space-3)`,`text-sm text-(--nuka-text-base)`,`placeholder:text-(--nuka-text-muted)`,`outline-none`,c),...l})]})}c.displayName=`CommandMenuInput`,exports.CommandMenuInput=c;
+//# sourceMappingURL=CommandMenuInput.cjs.map

package/dist/components/CommandMenu/CommandMenuInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenuInput.cjs","names":[],"sources":["../../../src/components/CommandMenu/CommandMenuInput.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@nuka/utils/cn\";\nimport { Icon } from \"@nuka/components/Icon\";\nimport { getRovingIndex } from \"@nuka/utils/roving-index\";\nimport { useCommandMenuContext } from \"@nuka/components/CommandMenu/CommandMenu.context\";\nimport {\n  getVisibleItems,\n  SearchIcon,\n} from \"@nuka/components/CommandMenu/CommandMenu.utils\";\n\nexport interface CommandMenuInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"value\" | \"onChange\"\n> {\n  ref?: React.Ref<HTMLInputElement> | undefined;\n}\n\nfunction CommandMenuInput({ ref, className, ...props }: CommandMenuInputProps) {\n  const ctx = useCommandMenuContext();\n  const internalRef = React.useRef<HTMLInputElement>(null);\n  const composedRef = React.useCallback(\n    (node: HTMLInputElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref != null) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  React.useEffect(() => {\n    if (ctx.open) {\n      requestAnimationFrame(() => {\n        internalRef.current?.focus();\n      });\n    }\n  }, [ctx.open]);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const items = getVisibleItems(ctx.listRef);\n    const currentIdx = items.findIndex((el) => el.id === ctx.activeItemId);\n    const nextIdx = getRovingIndex(e.key, currentIdx, items.length, \"vertical\");\n\n    if (nextIdx !== undefined) {\n      e.preventDefault();\n      const next = items[nextIdx];\n      if (next != null) {\n        ctx.setActiveItemId(next.id);\n      }\n      return;\n    }\n\n    switch (e.key) {\n      case \"Enter\": {\n        e.preventDefault();\n        if (ctx.activeItemId != null) {\n          const activeEl = document.getElementById(ctx.activeItemId);\n          if (\n            activeEl != null &&\n            activeEl.getAttribute(\"aria-disabled\") !== \"true\"\n          ) {\n            activeEl.click();\n          }\n        }\n        break;\n      }\n      case \"Tab\": {\n        ctx.onOpenChange(false);\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    ctx.setFilter(e.target.value);\n    ctx.setActiveItemId(null);\n  };\n\n  const activedescendant = ctx.activeItemId ?? undefined;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-(--space-2) px-(--space-3)\",\n        \"border-b border-(--nuka-border-base)\",\n      )}\n    >\n      <Icon size=\"sm\" color=\"muted\">\n        <SearchIcon />\n      </Icon>\n      <input\n        ref={composedRef}\n        id={ctx.inputId}\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded={true}\n        aria-controls={ctx.listboxId}\n        aria-activedescendant={activedescendant}\n        value={ctx.filter}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"flex-1 bg-transparent py-(--space-3)\",\n          \"text-sm text-(--nuka-text-base)\",\n          \"placeholder:text-(--nuka-text-muted)\",\n          \"outline-none\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nCommandMenuInput.displayName = \"CommandMenuInput\";\n\nexport { CommandMenuInput };\n"],"mappings":"oUAkBA,SAAS,EAAiB,CAAE,MAAK,YAAW,GAAG,GAAgC,CAC7E,IAAM,EAAM,EAAA,uBAAuB,CAC7B,EAAc,EAAM,OAAyB,KAAK,CAClD,EAAc,EAAM,YACvB,GAAkC,CACjC,EAAY,QAAU,EAClB,OAAO,GAAQ,WACjB,EAAI,EAAK,CACA,GAAO,OAChB,EAAI,QAAU,IAGlB,CAAC,EAAI,CACN,CAED,EAAM,cAAgB,CAChB,EAAI,MACN,0BAA4B,CAC1B,EAAY,SAAS,OAAO,EAC5B,EAEH,CAAC,EAAI,KAAK,CAAC,CAEd,IAAM,EAAiB,GAA6C,CAClE,IAAM,EAAQ,EAAA,gBAAgB,EAAI,QAAQ,CACpC,EAAa,EAAM,UAAW,GAAO,EAAG,KAAO,EAAI,aAAa,CAChE,EAAU,EAAA,eAAe,EAAE,IAAK,EAAY,EAAM,OAAQ,WAAW,CAE3E,GAAI,IAAY,IAAA,GAAW,CACzB,EAAE,gBAAgB,CAClB,IAAM,EAAO,EAAM,GACf,GAAQ,MACV,EAAI,gBAAgB,EAAK,GAAG,CAE9B,OAGF,OAAQ,EAAE,IAAV,CACE,IAAK,QAEH,GADA,EAAE,gBAAgB,CACd,EAAI,cAAgB,KAAM,CAC5B,IAAM,EAAW,SAAS,eAAe,EAAI,aAAa,CAExD,GAAY,MACZ,EAAS,aAAa,gBAAgB,GAAK,QAE3C,EAAS,OAAO,CAGpB,MAEF,IAAK,MACH,EAAI,aAAa,GAAM,CACvB,MAEF,QACE,QAIA,EAAgB,GAA2C,CAC/D,EAAI,UAAU,EAAE,OAAO,MAAM,CAC7B,EAAI,gBAAgB,KAAK,EAGrB,EAAmB,EAAI,cAAgB,IAAA,GAE7C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,mDACA,uCACD,UAJH,EAME,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAK,KAAK,MAAM,kBACpB,EAAA,EAAA,KAAC,EAAA,WAAD,EAAc,CAAA,CACT,CAAA,EACP,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,GAAI,EAAI,QACR,KAAK,WACL,oBAAkB,OAClB,gBAAe,GACf,gBAAe,EAAI,UACnB,wBAAuB,EACvB,MAAO,EAAI,OACX,SAAU,EACV,UAAW,EACX,UAAW,EAAA,GACT,uCACA,kCACA,uCACA,eACA,EACD,CACD,GAAI,EACJ,CAAA,CACE,GAIV,EAAiB,YAAc"}

package/dist/components/CommandMenu/CommandMenuInput.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface CommandMenuInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+    ref?: React.Ref<HTMLInputElement> | undefined;
+}
+declare function CommandMenuInput({ ref, className, ...props }: CommandMenuInputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CommandMenuInput {
+    var displayName: string;
+}
+export { CommandMenuInput };
+//# sourceMappingURL=CommandMenuInput.d.ts.map

package/dist/components/CommandMenu/CommandMenuInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandMenuInput.d.ts","sourceRoot":"","sources":["../../../src/components/CommandMenu/CommandMenuInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,OAAO,GAAG,UAAU,CACrB;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CAC/C;AAED,iBAAS,gBAAgB,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAmG5E;kBAnGQ,gBAAgB;;;AAuGzB,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/CommandMenu/CommandMenuInput.js

@@ -0,0 +1,68 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { getRovingIndex as t } from "../../utils/roving-index.js";
+import { Icon as n } from "../Icon/Icon.js";
+import { useCommandMenuContext as r } from "./CommandMenu.context.js";
+import { SearchIcon as i, getVisibleItems as a } from "./CommandMenu.utils.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/CommandMenu/CommandMenuInput.tsx
+function l({ ref: l, className: u, ...d }) {
+	let f = r(), p = o.useRef(null), m = o.useCallback((e) => {
+		p.current = e, typeof l == "function" ? l(e) : l != null && (l.current = e);
+	}, [l]);
+	o.useEffect(() => {
+		f.open && requestAnimationFrame(() => {
+			p.current?.focus();
+		});
+	}, [f.open]);
+	let h = (e) => {
+		let n = a(f.listRef), r = n.findIndex((e) => e.id === f.activeItemId), i = t(e.key, r, n.length, "vertical");
+		if (i !== void 0) {
+			e.preventDefault();
+			let t = n[i];
+			t != null && f.setActiveItemId(t.id);
+			return;
+		}
+		switch (e.key) {
+			case "Enter":
+				if (e.preventDefault(), f.activeItemId != null) {
+					let e = document.getElementById(f.activeItemId);
+					e != null && e.getAttribute("aria-disabled") !== "true" && e.click();
+				}
+				break;
+			case "Tab":
+				f.onOpenChange(!1);
+				break;
+			default: break;
+		}
+	}, g = (e) => {
+		f.setFilter(e.target.value), f.setActiveItemId(null);
+	}, _ = f.activeItemId ?? void 0;
+	return /* @__PURE__ */ c("div", {
+		className: e("flex items-center gap-(--space-2) px-(--space-3)", "border-b border-(--nuka-border-base)"),
+		children: [/* @__PURE__ */ s(n, {
+			size: "sm",
+			color: "muted",
+			children: /* @__PURE__ */ s(i, {})
+		}), /* @__PURE__ */ s("input", {
+			ref: m,
+			id: f.inputId,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": !0,
+			"aria-controls": f.listboxId,
+			"aria-activedescendant": _,
+			value: f.filter,
+			onChange: g,
+			onKeyDown: h,
+			className: e("flex-1 bg-transparent py-(--space-3)", "text-sm text-(--nuka-text-base)", "placeholder:text-(--nuka-text-muted)", "outline-none", u),
+			...d
+		})]
+	});
+}
+l.displayName = "CommandMenuInput";
+//#endregion
+export { l as CommandMenuInput };
+
+//# sourceMappingURL=CommandMenuInput.js.map