@dowel-ui/react 0.1.0

package/dist/components/combobox/combobox.js

@@ -0,0 +1,346 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Popover } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+//#region src/components/combobox/combobox.tsx
+/**
+* A searchable single-select.
+*
+* Implements the ARIA combobox pattern directly on a popover rather than
+* depending on a command-menu package: the input owns `role="combobox"`, the
+* list owns `role="listbox"`, and the active option is tracked with
+* `aria-activedescendant` so focus never leaves the input while typing.
+*
+* Navigation reads the rendered options from the DOM rather than a registry,
+* which keeps the active option correct as filtering adds and removes items —
+* a registry has to be kept in sync with what is actually on screen, and drifts.
+*
+* This version is single-select and flat. Multi-select and grouping can be
+* added without changing this API.
+*/
+/** Default match: case-insensitive substring over the value and any keywords. */
+function defaultComboboxFilter(search, haystack) {
+	const needle = search.trim().toLowerCase();
+	if (!needle) return true;
+	return haystack.some((entry) => entry.toLowerCase().includes(needle));
+}
+const ComboboxContext = createContext(null);
+function useCombobox(component) {
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error(`${component} must be rendered inside <Combobox>.`);
+	return context;
+}
+function Combobox({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen = false, onOpenChange, filter = defaultComboboxFilter, children }) {
+	const uid = useId();
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const value = valueProp === void 0 ? uncontrolledValue : valueProp;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const open = openProp === void 0 ? uncontrolledOpen : openProp;
+	const [search, setSearch] = useState("");
+	const [activeValue, setActiveValue] = useState(void 0);
+	const listRef = useRef(null);
+	const visibleValues = useRef(/* @__PURE__ */ new Set());
+	const [visibleCount, setVisibleCount] = useState(0);
+	const registerVisible = useCallback((optionValue, visible) => {
+		const set = visibleValues.current;
+		const had = set.has(optionValue);
+		if (visible && !had) set.add(optionValue);
+		else if (!visible && had) set.delete(optionValue);
+		else return;
+		setVisibleCount(set.size);
+	}, []);
+	const setOpen = useCallback((next) => {
+		if (openProp === void 0) setUncontrolledOpen(next);
+		onOpenChange?.(next);
+		if (!next) {
+			setSearch("");
+			setActiveValue(void 0);
+		}
+	}, [openProp, onOpenChange]);
+	const select = useCallback((next) => {
+		if (valueProp === void 0) setUncontrolledValue(next);
+		onValueChange?.(next);
+		setOpen(false);
+	}, [
+		valueProp,
+		onValueChange,
+		setOpen
+	]);
+	const context = useMemo(() => ({
+		open,
+		setOpen,
+		search,
+		setSearch,
+		value,
+		select,
+		activeValue,
+		setActiveValue,
+		filter,
+		listId: `${uid}-list`,
+		inputId: `${uid}-input`,
+		optionId: (optionValue) => `${uid}-option-${optionValue.replace(/\s+/g, "-").toLowerCase()}`,
+		listRef,
+		registerVisible,
+		visibleCount
+	}), [
+		open,
+		setOpen,
+		search,
+		value,
+		select,
+		activeValue,
+		filter,
+		uid,
+		registerVisible,
+		visibleCount
+	]);
+	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			open,
+			onOpenChange: setOpen,
+			children
+		})
+	});
+}
+function ComboboxTrigger({ className, placeholder = "Select…", children, ...props }) {
+	const { value, open } = useCombobox("ComboboxTrigger");
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-slot": "combobox-trigger",
+			"aria-expanded": open,
+			className: cn("flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background", "px-3 text-sm shadow-xs transition-[border-color,box-shadow] duration-[var(--duration-fast)]", "focus-visible:border-ring", "disabled:cursor-not-allowed disabled:opacity-55", "aria-invalid:border-destructive", focusRing, className),
+			...props,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("truncate", !value && "text-muted-foreground"),
+				children: children ?? value ?? placeholder
+			}), /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true",
+				className: "size-4 shrink-0 opacity-60",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "m7 10 5 5 5-5",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})]
+		})
+	});
+}
+function ComboboxContent({ className, align = "start", sideOffset = 6, label = "Search options", children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+		"data-slot": "combobox-content",
+		align,
+		sideOffset,
+		"aria-label": label,
+		onOpenAutoFocus: (event) => {
+			event.preventDefault();
+		},
+		className: cn("z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] min-w-48 overflow-hidden", "rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg", "origin-[var(--radix-popover-content-transform-origin)]", "data-[state=closed]:animate-float-out data-[state=open]:animate-float-in", className),
+		...props,
+		children
+	}) });
+}
+/** Options currently rendered, in DOM order and excluding disabled ones. */
+function visibleOptions(list) {
+	if (!list) return [];
+	return Array.from(list.querySelectorAll("[role=\"option\"]:not([data-disabled])"));
+}
+function ComboboxInput({ className, ...props }) {
+	const { search, setSearch, activeValue, setActiveValue, select, setOpen, listId, inputId, optionId, listRef } = useCombobox("ComboboxInput");
+	const inputRef = useRef(null);
+	useEffect(() => {
+		inputRef.current?.focus();
+	}, []);
+	const move = useCallback((delta) => {
+		const options = visibleOptions(listRef.current);
+		if (options.length === 0) return;
+		const currentIndex = options.findIndex((option) => option.dataset.value === activeValue);
+		let nextIndex;
+		if (delta === "first") nextIndex = 0;
+		else if (delta === "last") nextIndex = options.length - 1;
+		else if (currentIndex === -1) nextIndex = delta > 0 ? 0 : options.length - 1;
+		else nextIndex = (currentIndex + delta + options.length) % options.length;
+		const next = options[nextIndex];
+		if (!next) return;
+		setActiveValue(next.dataset.value);
+		next.scrollIntoView({ block: "nearest" });
+	}, [
+		activeValue,
+		listRef,
+		setActiveValue
+	]);
+	function handleKeyDown(event) {
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				move(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				move(-1);
+				break;
+			case "Home":
+				event.preventDefault();
+				move("first");
+				break;
+			case "End":
+				event.preventDefault();
+				move("last");
+				break;
+			case "Enter":
+				if (activeValue === void 0) return;
+				event.preventDefault();
+				select(activeValue);
+				break;
+			case "Escape":
+				event.preventDefault();
+				setOpen(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 border-b border-border px-3",
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "size-4 shrink-0 opacity-55",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "11",
+				cy: "11",
+				r: "7",
+				stroke: "currentColor",
+				strokeWidth: "2"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "m20 20-3.5-3.5",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round"
+			})]
+		}), /* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			id: inputId,
+			"data-slot": "combobox-input",
+			type: "text",
+			role: "combobox",
+			autoComplete: "off",
+			"aria-expanded": "true",
+			"aria-controls": listId,
+			"aria-autocomplete": "list",
+			"aria-activedescendant": activeValue ? optionId(activeValue) : void 0,
+			value: search,
+			onChange: (event) => {
+				setSearch(event.target.value);
+				setActiveValue(void 0);
+			},
+			onKeyDown: handleKeyDown,
+			className: cn("h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground", className),
+			...props
+		})]
+	});
+}
+function ComboboxList({ className, ...props }) {
+	const { listId, listRef } = useCombobox("ComboboxList");
+	return /* @__PURE__ */ jsx("div", {
+		ref: listRef,
+		id: listId,
+		role: "listbox",
+		"data-slot": "combobox-list",
+		className: cn("max-h-64 overflow-y-auto overscroll-contain p-1", className),
+		...props
+	});
+}
+function ComboboxItem({ className, value, keywords, disabled, children, ...props }) {
+	const { search, filter, value: selectedValue, activeValue, setActiveValue, select, optionId, registerVisible } = useCombobox("ComboboxItem");
+	const visible = filter(search, useMemo(() => [
+		value,
+		...keywords ?? [],
+		typeof children === "string" ? children : ""
+	], [
+		value,
+		keywords,
+		children
+	]));
+	const selected = selectedValue === value;
+	const active = activeValue === value;
+	useEffect(() => {
+		registerVisible(value, visible && !disabled);
+		return () => {
+			registerVisible(value, false);
+		};
+	}, [
+		registerVisible,
+		value,
+		visible,
+		disabled
+	]);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		id: optionId(value),
+		role: "option",
+		"data-slot": "combobox-item",
+		"data-value": value,
+		"data-active": active || void 0,
+		"data-disabled": disabled || void 0,
+		"aria-selected": selected,
+		"aria-disabled": disabled || void 0,
+		tabIndex: -1,
+		onPointerMove: () => {
+			if (!disabled) setActiveValue(value);
+		},
+		onMouseDown: (event) => {
+			event.preventDefault();
+		},
+		onClick: () => {
+			if (!disabled) select(value);
+		},
+		onKeyDown: (event) => {
+			if (disabled) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				select(value);
+			}
+		},
+		className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none", "transition-colors duration-[var(--duration-instant)]", "data-[active]:bg-accent data-[active]:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-55", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children ?? value, selected ? /* @__PURE__ */ jsx("span", {
+			className: "absolute right-2 grid size-4 place-items-center",
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true",
+				className: "size-3.5",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "m5 13 4 4L19 7",
+					stroke: "currentColor",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		}) : null]
+	});
+}
+/** Shown only when the filter leaves nothing. */
+function ComboboxEmpty({ className, children, ...props }) {
+	const { visibleCount } = useCombobox("ComboboxEmpty");
+	if (visibleCount > 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "combobox-empty",
+		role: "presentation",
+		className: cn("px-3 py-6 text-center text-sm text-muted-foreground", className),
+		...props,
+		children: children ?? "No results found."
+	});
+}
+//#endregion
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, defaultComboboxFilter };
+
+//# sourceMappingURL=combobox.js.map

package/dist/components/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":["PopoverPrimitive"],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A searchable single-select.\n *\n * Implements the ARIA combobox pattern directly on a popover rather than\n * depending on a command-menu package: the input owns `role=\"combobox\"`, the\n * list owns `role=\"listbox\"`, and the active option is tracked with\n * `aria-activedescendant` so focus never leaves the input while typing.\n *\n * Navigation reads the rendered options from the DOM rather than a registry,\n * which keeps the active option correct as filtering adds and removes items —\n * a registry has to be kept in sync with what is actually on screen, and drifts.\n *\n * This version is single-select and flat. Multi-select and grouping can be\n * added without changing this API.\n */\n\n/** Default match: case-insensitive substring over the value and any keywords. */\nexport function defaultComboboxFilter(search: string, haystack: string[]): boolean {\n  const needle = search.trim().toLowerCase();\n  if (!needle) return true;\n  return haystack.some((entry) => entry.toLowerCase().includes(needle));\n}\n\ninterface ComboboxContextValue {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  search: string;\n  setSearch: (search: string) => void;\n  value: string | undefined;\n  select: (value: string) => void;\n  activeValue: string | undefined;\n  setActiveValue: (value: string | undefined) => void;\n  filter: (search: string, haystack: string[]) => boolean;\n  listId: string;\n  inputId: string;\n  optionId: (value: string) => string;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  registerVisible: (value: string, visible: boolean) => void;\n  visibleCount: number;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | null>(null);\n\nfunction useCombobox(component: string): ComboboxContextValue {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Combobox>.`);\n  }\n  return context;\n}\n\nexport interface ComboboxProps {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Overrides how a search string is matched against an option. */\n  filter?: (search: string, haystack: string[]) => boolean;\n  children?: ReactNode;\n}\n\nexport function Combobox({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  filter = defaultComboboxFilter,\n  children,\n}: ComboboxProps) {\n  const uid = useId();\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = valueProp === undefined ? uncontrolledValue : valueProp;\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const open = openProp === undefined ? uncontrolledOpen : openProp;\n\n  const [search, setSearch] = useState(\"\");\n  const [activeValue, setActiveValue] = useState<string | undefined>(undefined);\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  // Counted rather than listed: the empty state only needs to know whether\n  // anything survived the filter.\n  const visibleValues = useRef(new Set<string>());\n  const [visibleCount, setVisibleCount] = useState(0);\n\n  const registerVisible = useCallback((optionValue: string, visible: boolean) => {\n    const set = visibleValues.current;\n    const had = set.has(optionValue);\n    if (visible && !had) set.add(optionValue);\n    else if (!visible && had) set.delete(optionValue);\n    else return;\n    setVisibleCount(set.size);\n  }, []);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n      // Reopening should start from a clean search rather than resuming a\n      // half-typed query the user has forgotten about.\n      if (!next) {\n        setSearch(\"\");\n        setActiveValue(undefined);\n      }\n    },\n    [openProp, onOpenChange],\n  );\n\n  const select = useCallback(\n    (next: string) => {\n      if (valueProp === undefined) setUncontrolledValue(next);\n      onValueChange?.(next);\n      setOpen(false);\n    },\n    [valueProp, onValueChange, setOpen],\n  );\n\n  const context = useMemo<ComboboxContextValue>(\n    () => ({\n      open,\n      setOpen,\n      search,\n      setSearch,\n      value,\n      select,\n      activeValue,\n      setActiveValue,\n      filter,\n      listId: `${uid}-list`,\n      inputId: `${uid}-input`,\n      optionId: (optionValue: string) =>\n        `${uid}-option-${optionValue.replace(/\\s+/g, \"-\").toLowerCase()}`,\n      listRef,\n      registerVisible,\n      visibleCount,\n    }),\n    [\n      open,\n      setOpen,\n      search,\n      value,\n      select,\n      activeValue,\n      filter,\n      uid,\n      registerVisible,\n      visibleCount,\n    ],\n  );\n\n  return (\n    <ComboboxContext.Provider value={context}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        {children}\n      </PopoverPrimitive.Root>\n    </ComboboxContext.Provider>\n  );\n}\n\nexport interface ComboboxTriggerProps extends ComponentPropsWithRef<\"button\"> {\n  /** Shown when nothing is selected. */\n  placeholder?: string;\n}\n\nexport function ComboboxTrigger({\n  className,\n  placeholder = \"Select…\",\n  children,\n  ...props\n}: ComboboxTriggerProps) {\n  const { value, open } = useCombobox(\"ComboboxTrigger\");\n\n  return (\n    <PopoverPrimitive.Trigger asChild>\n      <button\n        type=\"button\"\n        data-slot=\"combobox-trigger\"\n        aria-expanded={open}\n        className={cn(\n          \"flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background\",\n          \"px-3 text-sm shadow-xs transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n          \"focus-visible:border-ring\",\n          \"disabled:cursor-not-allowed disabled:opacity-55\",\n          \"aria-invalid:border-destructive\",\n          focusRing,\n          className,\n        )}\n        {...props}\n      >\n        <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n          {children ?? value ?? placeholder}\n        </span>\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0 opacity-60\"\n        >\n          <path\n            d=\"m7 10 5 5 5-5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </PopoverPrimitive.Trigger>\n  );\n}\n\nexport interface ComboboxContentProps extends ComponentPropsWithRef<\n  typeof PopoverPrimitive.Content\n> {\n  /** Names the popover, which carries role=\"dialog\". */\n  label?: string;\n}\n\nexport function ComboboxContent({\n  className,\n  align = \"start\",\n  sideOffset = 6,\n  label = \"Search options\",\n  children,\n  ...props\n}: ComboboxContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"combobox-content\"\n        align={align}\n        sideOffset={sideOffset}\n        aria-label={label}\n        // Focus belongs in the search input, which the input claims on mount.\n        onOpenAutoFocus={(event) => {\n          event.preventDefault();\n        }}\n        className={cn(\n          \"z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] min-w-48 overflow-hidden\",\n          \"rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg\",\n          \"origin-[var(--radix-popover-content-transform-origin)]\",\n          \"data-[state=closed]:animate-float-out data-[state=open]:animate-float-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  );\n}\n\n/** Options currently rendered, in DOM order and excluding disabled ones. */\nfunction visibleOptions(list: HTMLElement | null): HTMLElement[] {\n  if (!list) return [];\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"option\"]:not([data-disabled])'));\n}\n\nexport type ComboboxInputProps = Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"onChange\">;\n\nexport function ComboboxInput({ className, ...props }: ComboboxInputProps) {\n  const {\n    search,\n    setSearch,\n    activeValue,\n    setActiveValue,\n    select,\n    setOpen,\n    listId,\n    inputId,\n    optionId,\n    listRef,\n  } = useCombobox(\"ComboboxInput\");\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  const move = useCallback(\n    (delta: number | \"first\" | \"last\") => {\n      const options = visibleOptions(listRef.current);\n      if (options.length === 0) return;\n\n      const currentIndex = options.findIndex((option) => option.dataset.value === activeValue);\n\n      let nextIndex: number;\n      if (delta === \"first\") nextIndex = 0;\n      else if (delta === \"last\") nextIndex = options.length - 1;\n      else if (currentIndex === -1) nextIndex = delta > 0 ? 0 : options.length - 1;\n      // Wraps, so holding an arrow key never dead-ends at the edge of the list.\n      else nextIndex = (currentIndex + delta + options.length) % options.length;\n\n      const next = options[nextIndex];\n      if (!next) return;\n      setActiveValue(next.dataset.value);\n      next.scrollIntoView({ block: \"nearest\" });\n    },\n    [activeValue, listRef, setActiveValue],\n  );\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        move(1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        move(-1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        move(\"first\");\n        break;\n      case \"End\":\n        event.preventDefault();\n        move(\"last\");\n        break;\n      case \"Enter\": {\n        if (activeValue === undefined) return;\n        event.preventDefault();\n        select(activeValue);\n        break;\n      }\n      case \"Escape\":\n        event.preventDefault();\n        setOpen(false);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div className=\"flex items-center gap-2 border-b border-border px-3\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 opacity-55\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n      <input\n        ref={inputRef}\n        id={inputId}\n        data-slot=\"combobox-input\"\n        type=\"text\"\n        role=\"combobox\"\n        autoComplete=\"off\"\n        aria-expanded=\"true\"\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeValue ? optionId(activeValue) : undefined}\n        value={search}\n        onChange={(event) => {\n          setSearch(event.target.value);\n          // The previous active option may have just been filtered out.\n          setActiveValue(undefined);\n        }}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function ComboboxList({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { listId, listRef } = useCombobox(\"ComboboxList\");\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      data-slot=\"combobox-list\"\n      className={cn(\"max-h-64 overflow-y-auto overscroll-contain p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ComboboxItemProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onSelect\" | \"children\"\n> {\n  /** The value reported by onValueChange, and the primary search term. */\n  value: string;\n  /** Extra search terms that are not shown, such as synonyms or an id. */\n  keywords?: string[];\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function ComboboxItem({\n  className,\n  value,\n  keywords,\n  disabled,\n  children,\n  ...props\n}: ComboboxItemProps) {\n  const {\n    search,\n    filter,\n    value: selectedValue,\n    activeValue,\n    setActiveValue,\n    select,\n    optionId,\n    registerVisible,\n  } = useCombobox(\"ComboboxItem\");\n\n  // A string child is the visible label, so it is searchable for free. Richer\n  // children cannot be read purely, so those pass `keywords` instead.\n  const haystack = useMemo(\n    () => [value, ...(keywords ?? []), typeof children === \"string\" ? children : \"\"],\n    [value, keywords, children],\n  );\n\n  const visible = filter(search, haystack);\n  const selected = selectedValue === value;\n  const active = activeValue === value;\n\n  useEffect(() => {\n    registerVisible(value, visible && !disabled);\n    return () => {\n      registerVisible(value, false);\n    };\n  }, [registerVisible, value, visible, disabled]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      id={optionId(value)}\n      role=\"option\"\n      data-slot=\"combobox-item\"\n      data-value={value}\n      data-active={active || undefined}\n      data-disabled={disabled || undefined}\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      // Programmatically focusable but out of the tab order: in an\n      // aria-activedescendant listbox the input keeps real focus and options are\n      // only virtually focused, so they must never become tab stops.\n      tabIndex={-1}\n      onPointerMove={() => {\n        if (!disabled) setActiveValue(value);\n      }}\n      onMouseDown={(event) => {\n        // Without this, pressing on an option blurs the search input, which\n        // breaks aria-activedescendant and can dismiss the popover before the\n        // click ever lands.\n        event.preventDefault();\n      }}\n      onClick={() => {\n        if (!disabled) select(value);\n      }}\n      onKeyDown={(event) => {\n        // Reachable only if a consumer focuses an option directly; the normal\n        // path is Enter on the input, handled by ComboboxInput.\n        if (disabled) return;\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          select(value);\n        }\n      }}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none\",\n        \"transition-colors duration-[var(--duration-instant)]\",\n        \"data-[active]:bg-accent data-[active]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? value}\n      {selected ? (\n        <span className=\"absolute right-2 grid size-4 place-items-center\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\n/** Shown only when the filter leaves nothing. */\nexport function ComboboxEmpty({ className, children, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { visibleCount } = useCombobox(\"ComboboxEmpty\");\n  if (visibleCount > 0) return null;\n\n  return (\n    <div\n      data-slot=\"combobox-empty\"\n      role=\"presentation\"\n      className={cn(\"px-3 py-6 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"No results found.\"}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxProps, ComboboxTrigger, ComboboxTriggerProps, defaultComboboxFilter } from "./combobox.js";
+export { Combobox, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxList, type ComboboxProps, ComboboxTrigger, type ComboboxTriggerProps, defaultComboboxFilter };

package/dist/components/combobox/index.js

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, defaultComboboxFilter } from "./combobox.js";
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, defaultComboboxFilter };

package/dist/components/combobox/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/combobox/meta.ts
+const meta = defineMeta({
+	name: "combobox",
+	title: "Combobox",
+	description: "A searchable single-select built on the ARIA combobox pattern.",
+	category: "form",
+	status: "stable",
+	dependencies: ["radix-ui"],
+	registryDependencies: [],
+	files: ["combobox.tsx"],
+	a11y: "The input owns role=\"combobox\" with aria-expanded, aria-controls and aria-autocomplete; the list owns role=\"listbox\" and each option role=\"option\" with aria-selected. Focus stays in the input while arrow keys move aria-activedescendant, so typing is never interrupted. Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/combobox/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/combobox/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"combobox\",\n  title: \"Combobox\",\n  description: \"A searchable single-select built on the ARIA combobox pattern.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"combobox.tsx\"],\n  a11y:\n    'The input owns role=\"combobox\" with aria-expanded, aria-controls and aria-autocomplete; ' +\n    'the list owns role=\"listbox\" and each option role=\"option\" with aria-selected. Focus stays ' +\n    \"in the input while arrow keys move aria-activedescendant, so typing is never interrupted. \" +\n    \"Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAIJ,CAAC"}

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

@@ -0,0 +1,65 @@
+import { Dialog } from "../dialog/dialog.js";
+import "../dialog/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/command/command.d.ts
+/**
+ * A searchable list of commands.
+ *
+ * Shares its navigation model with Combobox — the input owns `role="combobox"`,
+ * the list owns `role="listbox"`, and the active item is tracked with
+ * `aria-activedescendant` so focus never leaves the input. Ordering is read
+ * from the DOM rather than a registry, which stays correct as filtering adds
+ * and removes items.
+ *
+ * Unlike Combobox this has no selected value: items run actions. It also
+ * supports groups, and a group whose items have all been filtered out hides its
+ * own heading rather than leaving a label over nothing.
+ */
+/** Default match: case-insensitive substring over the value and any keywords. */
+declare function defaultCommandFilter(search: string, haystack: string[]): boolean;
+interface CommandProps extends Omit<ComponentPropsWithRef<"div">, "onSelect"> {
+  /** Overrides how a search string is matched against an item. */
+  filter?: (search: string, haystack: string[]) => boolean;
+  /** Controls the search text. */
+  value?: string;
+  onValueChange?: (search: string) => void;
+}
+declare function Command({ className, filter, value, onValueChange, ...props }: CommandProps): import("react").JSX.Element;
+type CommandInputProps = Omit<ComponentPropsWithRef<"input">, "value" | "onChange">;
+declare function CommandInput({ className, ...props }: CommandInputProps): import("react").JSX.Element;
+declare function CommandList({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+declare function CommandEmpty({ className, children, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element | null;
+interface CommandGroupProps extends ComponentPropsWithRef<"div"> {
+  heading?: ReactNode;
+}
+declare function CommandGroup({ className, heading, children, ...props }: CommandGroupProps): import("react").JSX.Element;
+interface CommandItemProps extends Omit<ComponentPropsWithRef<"div">, "onSelect" | "children"> {
+  /** Identifies the item, and is the primary search term. */
+  value: string;
+  /** Extra search terms that are not shown. */
+  keywords?: string[];
+  disabled?: boolean;
+  onSelect?: (value: string) => void;
+  children?: ReactNode;
+}
+declare function CommandItem({ className, value, keywords, disabled, onSelect, children, ...props }: CommandItemProps): import("react").JSX.Element | null;
+declare function CommandSeparator({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+/** Keyboard hint. Decorative — bind the shortcut for real at the app level. */
+declare function CommandShortcut({ className, ...props }: ComponentPropsWithRef<"span">): import("react").JSX.Element;
+interface CommandDialogProps extends ComponentPropsWithRef<typeof Dialog> {
+  /** Names the dialog for assistive technology. Visually hidden by default. */
+  title?: string;
+  description?: string;
+  className?: string;
+}
+/**
+ * The palette in a modal, for the ⌘K pattern.
+ *
+ * The title and description are rendered but visually hidden: a dialog needs an
+ * accessible name whether or not the design shows one, and leaving it out is
+ * the most common defect in hand-rolled command menus.
+ */
+declare function CommandDialog({ title, description, children, className, ...props }: CommandDialogProps): import("react").JSX.Element;
+//#endregion
+export { Command, CommandDialog, CommandDialogProps, CommandEmpty, CommandGroup, CommandGroupProps, CommandInput, CommandInputProps, CommandItem, CommandItemProps, CommandList, CommandProps, CommandSeparator, CommandShortcut, defaultCommandFilter };
+//# sourceMappingURL=command.d.ts.map

package/dist/components/command/command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","names":[],"sources":["../../../src/components/command/command.tsx"],"mappings":";;;;;;;;;;;;;;;;;;iBAwCgB,qBAAqB,gBAAgB;UAoDpC,qBAAqB,KAAK;;EAEzC,UAAU,gBAAgB;;EAE1B;EACA,iBAAiB;;iBAGH,UACd,WACA,QACA,OACA,kBACG,SACF,+BAAY,IAAA;KAsDH,oBAAoB,KAAK;iBAErB,eAAe,cAAc,SAAS,oCAAiB,IAAA;iBAwGvD,cAAc,cAAc,SAAS,+CAA4B,IAAA;iBAejE,eAAe,WAAW,aAAa,SAAS,+CAA4B,IAAA;UAgB3E,0BAA0B;EACzC,UAAU;;iBAGI,eAAe,WAAW,SAAS,aAAa,SAAS,oCAAiB,IAAA;UA8BzE,yBAAyB,KACxC;;EAIA;;EAEA;EACA;EACA,YAAY;EACZ,WAAW;;iBAGG,cACd,WACA,OACA,UACA,UACA,UACA,aACG,SACF,mCAAgB,IAAA;iBAuEH,mBAAmB,cAAc,SAAS,+CAA4B,IAAA;;iBAYtE,kBAAkB,cAAc,SAAS,gDAA6B,IAAA;UAWrE,2BAA2B,6BAA6B;;EAEvE;EACA;EACA;;;;;;;;;iBAUc,gBACd,OACA,aACA,UACA,cACG,SACF,qCAAkB,IAAA"}