@dowel-ui/react 0.1.0

package/dist/components/command/command.js

@@ -0,0 +1,330 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog/dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+//#region src/components/command/command.tsx
+/**
+* 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. */
+function defaultCommandFilter(search, haystack) {
+	const needle = search.trim().toLowerCase();
+	if (!needle) return true;
+	return haystack.some((entry) => entry.toLowerCase().includes(needle));
+}
+const CommandContext = createContext(null);
+function useCommand(component) {
+	const context = useContext(CommandContext);
+	if (!context) throw new Error(`${component} must be rendered inside <Command>.`);
+	return context;
+}
+/** Lets a group count how many of its own items survived the filter. */
+const CommandGroupContext = createContext(null);
+/** Counts visible entries by name, so re-registration cannot double-count. */
+function useVisibilityCounter() {
+	const visible = useRef(/* @__PURE__ */ new Set());
+	const [count, setCount] = useState(0);
+	return {
+		count,
+		register: useCallback((value, isVisible) => {
+			const set = visible.current;
+			const had = set.has(value);
+			if (isVisible && !had) set.add(value);
+			else if (!isVisible && had) set.delete(value);
+			else return;
+			setCount(set.size);
+		}, [])
+	};
+}
+function Command({ className, filter = defaultCommandFilter, value, onValueChange, ...props }) {
+	const uid = useId();
+	const [uncontrolledSearch, setUncontrolledSearch] = useState("");
+	const search = value ?? uncontrolledSearch;
+	const [activeValue, setActiveValue] = useState(void 0);
+	const listRef = useRef(null);
+	const { count, register } = useVisibilityCounter();
+	const setSearch = useCallback((next) => {
+		if (value === void 0) setUncontrolledSearch(next);
+		onValueChange?.(next);
+	}, [value, onValueChange]);
+	const context = useMemo(() => ({
+		search,
+		setSearch,
+		activeValue,
+		setActiveValue,
+		filter,
+		listId: `${uid}-list`,
+		inputId: `${uid}-input`,
+		optionId: (itemValue) => `${uid}-item-${itemValue.replace(/\s+/g, "-").toLowerCase()}`,
+		listRef,
+		registerVisible: register,
+		visibleCount: count
+	}), [
+		search,
+		setSearch,
+		activeValue,
+		filter,
+		uid,
+		register,
+		count
+	]);
+	return /* @__PURE__ */ jsx(CommandContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "command",
+			className: cn("flex size-full flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground", className),
+			...props
+		})
+	});
+}
+/** Items currently rendered, in DOM order and excluding disabled ones. */
+function visibleItems(list) {
+	if (!list) return [];
+	return Array.from(list.querySelectorAll("[role=\"option\"]:not([data-disabled])"));
+}
+function CommandInput({ className, ...props }) {
+	const { search, setSearch, activeValue, setActiveValue, listId, inputId, optionId, listRef } = useCommand("CommandInput");
+	const inputRef = useRef(null);
+	useEffect(() => {
+		inputRef.current?.focus();
+	}, []);
+	const move = useCallback((delta) => {
+		const items = visibleItems(listRef.current);
+		if (items.length === 0) return;
+		const currentIndex = items.findIndex((item) => item.dataset.value === activeValue);
+		let nextIndex;
+		if (delta === "first") nextIndex = 0;
+		else if (delta === "last") nextIndex = items.length - 1;
+		else if (currentIndex === -1) nextIndex = delta > 0 ? 0 : items.length - 1;
+		else nextIndex = (currentIndex + delta + items.length) % items.length;
+		const next = items[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();
+				visibleItems(listRef.current).find((candidate) => candidate.dataset.value === activeValue)?.click();
+		}
+	}
+	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": "command-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-11 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground", className),
+			...props
+		})]
+	});
+}
+function CommandList({ className, ...props }) {
+	const { listId, listRef } = useCommand("CommandList");
+	return /* @__PURE__ */ jsx("div", {
+		ref: listRef,
+		id: listId,
+		role: "listbox",
+		"data-slot": "command-list",
+		className: cn("max-h-80 overflow-y-auto overscroll-contain p-1", className),
+		...props
+	});
+}
+function CommandEmpty({ className, children, ...props }) {
+	const { visibleCount } = useCommand("CommandEmpty");
+	if (visibleCount > 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-empty",
+		role: "presentation",
+		className: cn("px-3 py-8 text-center text-sm text-muted-foreground", className),
+		...props,
+		children: children ?? "No results found."
+	});
+}
+function CommandGroup({ className, heading, children, ...props }) {
+	const uid = useId();
+	const { count, register } = useVisibilityCounter();
+	const empty = count === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-group",
+		role: "group",
+		"aria-labelledby": heading && !empty ? `${uid}-heading` : void 0,
+		hidden: empty || void 0,
+		className: cn("py-1 first:pt-0", className),
+		...props,
+		children: [heading && !empty ? /* @__PURE__ */ jsx("div", {
+			id: `${uid}-heading`,
+			className: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+			children: heading
+		}) : null, /* @__PURE__ */ jsx(CommandGroupContext.Provider, {
+			value: register,
+			children
+		})]
+	});
+}
+function CommandItem({ className, value, keywords, disabled, onSelect, children, ...props }) {
+	const { search, filter, activeValue, setActiveValue, optionId, registerVisible } = useCommand("CommandItem");
+	const registerInGroup = useContext(CommandGroupContext);
+	const visible = filter(search, useMemo(() => [
+		value,
+		...keywords ?? [],
+		typeof children === "string" ? children : ""
+	], [
+		value,
+		keywords,
+		children
+	]));
+	const active = activeValue === value;
+	const counts = visible && !disabled;
+	useEffect(() => {
+		registerVisible(value, counts);
+		registerInGroup?.(value, counts);
+		return () => {
+			registerVisible(value, false);
+			registerInGroup?.(value, false);
+		};
+	}, [
+		registerVisible,
+		registerInGroup,
+		value,
+		counts
+	]);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx("div", {
+		id: optionId(value),
+		role: "option",
+		"data-slot": "command-item",
+		"data-value": value,
+		"data-active": active || void 0,
+		"data-disabled": disabled || void 0,
+		"aria-selected": active,
+		"aria-disabled": disabled || void 0,
+		tabIndex: -1,
+		onPointerMove: () => {
+			if (!disabled) setActiveValue(value);
+		},
+		onMouseDown: (event) => {
+			event.preventDefault();
+		},
+		onClick: () => {
+			if (!disabled) onSelect?.(value);
+		},
+		onKeyDown: (event) => {
+			if (disabled) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				onSelect?.(value);
+			}
+		},
+		className: cn("relative flex cursor-default items-center gap-2 rounded-md px-2 py-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
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-separator",
+		"aria-hidden": "true",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+/** Keyboard hint. Decorative — bind the shortcut for real at the app level. */
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		"aria-hidden": "true",
+		className: cn("ml-auto text-2xs tracking-wide text-muted-foreground", className),
+		...props
+	});
+}
+/**
+* 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.
+*/
+function CommandDialog({ title = "Command palette", description = "Search for a command to run.", children, className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		...props,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			showCloseButton: false,
+			className: cn("max-w-lg overflow-hidden p-0", className),
+			children: [/* @__PURE__ */ jsxs(DialogHeader, {
+				className: "sr-only",
+				children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+			}), /* @__PURE__ */ jsx(Command, {
+				className: "rounded-none",
+				children
+			})]
+		})
+	});
+}
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, defaultCommandFilter };
+
+//# sourceMappingURL=command.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","names":[],"sources":["../../../src/components/command/command.tsx"],"sourcesContent":["\"use client\";\n\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 {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/dialog\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A searchable list of commands.\n *\n * Shares its navigation model with Combobox — the input owns `role=\"combobox\"`,\n * the list owns `role=\"listbox\"`, and the active item is tracked with\n * `aria-activedescendant` so focus never leaves the input. Ordering is read\n * from the DOM rather than a registry, which stays correct as filtering adds\n * and removes items.\n *\n * Unlike Combobox this has no selected value: items run actions. It also\n * supports groups, and a group whose items have all been filtered out hides its\n * own heading rather than leaving a label over nothing.\n */\n\n/** Default match: case-insensitive substring over the value and any keywords. */\nexport function defaultCommandFilter(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 CommandContextValue {\n  search: string;\n  setSearch: (search: 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 CommandContext = createContext<CommandContextValue | null>(null);\n\nfunction useCommand(component: string): CommandContextValue {\n  const context = useContext(CommandContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Command>.`);\n  }\n  return context;\n}\n\n/** Lets a group count how many of its own items survived the filter. */\nconst CommandGroupContext = createContext<((value: string, visible: boolean) => void) | null>(\n  null,\n);\n\n/** Counts visible entries by name, so re-registration cannot double-count. */\nfunction useVisibilityCounter() {\n  const visible = useRef(new Set<string>());\n  const [count, setCount] = useState(0);\n\n  const register = useCallback((value: string, isVisible: boolean) => {\n    const set = visible.current;\n    const had = set.has(value);\n    if (isVisible && !had) set.add(value);\n    else if (!isVisible && had) set.delete(value);\n    else return;\n    setCount(set.size);\n  }, []);\n\n  return { count, register };\n}\n\nexport interface CommandProps extends Omit<ComponentPropsWithRef<\"div\">, \"onSelect\"> {\n  /** Overrides how a search string is matched against an item. */\n  filter?: (search: string, haystack: string[]) => boolean;\n  /** Controls the search text. */\n  value?: string;\n  onValueChange?: (search: string) => void;\n}\n\nexport function Command({\n  className,\n  filter = defaultCommandFilter,\n  value,\n  onValueChange,\n  ...props\n}: CommandProps) {\n  const uid = useId();\n  const [uncontrolledSearch, setUncontrolledSearch] = useState(\"\");\n  const search = value ?? uncontrolledSearch;\n  const [activeValue, setActiveValue] = useState<string | undefined>(undefined);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const { count, register } = useVisibilityCounter();\n\n  const setSearch = useCallback(\n    (next: string) => {\n      if (value === undefined) setUncontrolledSearch(next);\n      onValueChange?.(next);\n    },\n    [value, onValueChange],\n  );\n\n  const context = useMemo<CommandContextValue>(\n    () => ({\n      search,\n      setSearch,\n      activeValue,\n      setActiveValue,\n      filter,\n      listId: `${uid}-list`,\n      inputId: `${uid}-input`,\n      optionId: (itemValue: string) =>\n        `${uid}-item-${itemValue.replace(/\\s+/g, \"-\").toLowerCase()}`,\n      listRef,\n      registerVisible: register,\n      visibleCount: count,\n    }),\n    [search, setSearch, activeValue, filter, uid, register, count],\n  );\n\n  return (\n    <CommandContext.Provider value={context}>\n      <div\n        data-slot=\"command\"\n        className={cn(\n          \"flex size-full flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground\",\n          className,\n        )}\n        {...props}\n      />\n    </CommandContext.Provider>\n  );\n}\n\n/** Items currently rendered, in DOM order and excluding disabled ones. */\nfunction visibleItems(list: HTMLElement | null): HTMLElement[] {\n  if (!list) return [];\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"option\"]:not([data-disabled])'));\n}\n\nexport type CommandInputProps = Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"onChange\">;\n\nexport function CommandInput({ className, ...props }: CommandInputProps) {\n  const { search, setSearch, activeValue, setActiveValue, listId, inputId, optionId, listRef } =\n    useCommand(\"CommandInput\");\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 items = visibleItems(listRef.current);\n      if (items.length === 0) return;\n\n      const currentIndex = items.findIndex((item) => item.dataset.value === activeValue);\n\n      let nextIndex: number;\n      if (delta === \"first\") nextIndex = 0;\n      else if (delta === \"last\") nextIndex = items.length - 1;\n      else if (currentIndex === -1) nextIndex = delta > 0 ? 0 : items.length - 1;\n      else nextIndex = (currentIndex + delta + items.length) % items.length;\n\n      const next = items[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        // Running the item by clicking it keeps one code path for pointer and\n        // keyboard, so the two can never drift apart.\n        const item = visibleItems(listRef.current).find(\n          (candidate) => candidate.dataset.value === activeValue,\n        );\n        item?.click();\n        break;\n      }\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=\"command-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 active item may have just been filtered away.\n          setActiveValue(undefined);\n        }}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"h-11 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 CommandList({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { listId, listRef } = useCommand(\"CommandList\");\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      data-slot=\"command-list\"\n      className={cn(\"max-h-80 overflow-y-auto overscroll-contain p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CommandEmpty({ className, children, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { visibleCount } = useCommand(\"CommandEmpty\");\n  if (visibleCount > 0) return null;\n\n  return (\n    <div\n      data-slot=\"command-empty\"\n      role=\"presentation\"\n      className={cn(\"px-3 py-8 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"No results found.\"}\n    </div>\n  );\n}\n\nexport interface CommandGroupProps extends ComponentPropsWithRef<\"div\"> {\n  heading?: ReactNode;\n}\n\nexport function CommandGroup({ className, heading, children, ...props }: CommandGroupProps) {\n  const uid = useId();\n  const { count, register } = useVisibilityCounter();\n  const empty = count === 0;\n\n  return (\n    <div\n      data-slot=\"command-group\"\n      role=\"group\"\n      aria-labelledby={heading && !empty ? `${uid}-heading` : undefined}\n      // Hidden rather than unmounted: the items inside are what report whether\n      // anything matched, and unmounting them would stop the reports and leave\n      // the group permanently empty.\n      hidden={empty || undefined}\n      className={cn(\"py-1 first:pt-0\", className)}\n      {...props}\n    >\n      {heading && !empty ? (\n        <div\n          id={`${uid}-heading`}\n          className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\"\n        >\n          {heading}\n        </div>\n      ) : null}\n      <CommandGroupContext.Provider value={register}>{children}</CommandGroupContext.Provider>\n    </div>\n  );\n}\n\nexport interface CommandItemProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onSelect\" | \"children\"\n> {\n  /** Identifies the item, and is the primary search term. */\n  value: string;\n  /** Extra search terms that are not shown. */\n  keywords?: string[];\n  disabled?: boolean;\n  onSelect?: (value: string) => void;\n  children?: ReactNode;\n}\n\nexport function CommandItem({\n  className,\n  value,\n  keywords,\n  disabled,\n  onSelect,\n  children,\n  ...props\n}: CommandItemProps) {\n  const { search, filter, activeValue, setActiveValue, optionId, registerVisible } =\n    useCommand(\"CommandItem\");\n  const registerInGroup = useContext(CommandGroupContext);\n\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 active = activeValue === value;\n  const counts = visible && !disabled;\n\n  useEffect(() => {\n    registerVisible(value, counts);\n    registerInGroup?.(value, counts);\n    return () => {\n      registerVisible(value, false);\n      registerInGroup?.(value, false);\n    };\n  }, [registerVisible, registerInGroup, value, counts]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      id={optionId(value)}\n      role=\"option\"\n      data-slot=\"command-item\"\n      data-value={value}\n      data-active={active || undefined}\n      data-disabled={disabled || undefined}\n      aria-selected={active}\n      aria-disabled={disabled || undefined}\n      // Programmatically focusable but never a tab stop: the input keeps focus\n      // and items are only virtually focused via aria-activedescendant.\n      tabIndex={-1}\n      onPointerMove={() => {\n        if (!disabled) setActiveValue(value);\n      }}\n      onMouseDown={(event) => {\n        // Keeps focus in the input, so aria-activedescendant stays valid and a\n        // hosting dialog does not close before the click lands.\n        event.preventDefault();\n      }}\n      onClick={() => {\n        if (!disabled) onSelect?.(value);\n      }}\n      onKeyDown={(event) => {\n        if (disabled) return;\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          onSelect?.(value);\n        }\n      }}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-md px-2 py-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    </div>\n  );\n}\n\nexport function CommandSeparator({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-separator\"\n      aria-hidden=\"true\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Keyboard hint. Decorative — bind the shortcut for real at the app level. */\nexport function CommandShortcut({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      aria-hidden=\"true\"\n      className={cn(\"ml-auto text-2xs tracking-wide text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface CommandDialogProps extends ComponentPropsWithRef<typeof Dialog> {\n  /** Names the dialog for assistive technology. Visually hidden by default. */\n  title?: string;\n  description?: string;\n  className?: string;\n}\n\n/**\n * The palette in a modal, for the ⌘K pattern.\n *\n * The title and description are rendered but visually hidden: a dialog needs an\n * accessible name whether or not the design shows one, and leaving it out is\n * the most common defect in hand-rolled command menus.\n */\nexport function CommandDialog({\n  title = \"Command palette\",\n  description = \"Search for a command to run.\",\n  children,\n  className,\n  ...props\n}: CommandDialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        showCloseButton={false}\n        className={cn(\"max-w-lg overflow-hidden p-0\", className)}\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <Command className=\"rounded-none\">{children}</Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Command, CommandDialog, CommandDialogProps, CommandEmpty, CommandGroup, CommandGroupProps, CommandInput, CommandInputProps, CommandItem, CommandItemProps, CommandList, CommandProps, CommandSeparator, CommandShortcut, defaultCommandFilter } from "./command.js";
+export { Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandProps, CommandSeparator, CommandShortcut, defaultCommandFilter };

package/dist/components/command/index.js

@@ -0,0 +1,2 @@
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, defaultCommandFilter } from "./command.js";
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, defaultCommandFilter };

package/dist/components/command/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/command/meta.ts
+const meta = defineMeta({
+	name: "command",
+	title: "Command",
+	description: "A searchable command palette, with groups and a ⌘K dialog variant.",
+	category: "navigation",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: ["dialog"],
+	files: ["command.tsx"],
+	a11y: "The input owns role=\"combobox\" and the list role=\"listbox\"; focus stays in the input while arrow keys move aria-activedescendant, so typing is never interrupted. Enter runs the active item through the same path as a click. A group whose items are all filtered out hides its heading rather than labelling nothing. CommandDialog always renders a title and description, visually hidden, so the dialog is never unnamed."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/command/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"command\",\n  title: \"Command\",\n  description: \"A searchable command palette, with groups and a ⌘K dialog variant.\",\n  category: \"navigation\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"dialog\"],\n  files: [\"command.tsx\"],\n  a11y:\n    'The input owns role=\"combobox\" and the list role=\"listbox\"; focus stays in the input while ' +\n    \"arrow keys move aria-activedescendant, so typing is never interrupted. Enter runs the \" +\n    \"active item through the same path as a click. A group whose items are all filtered out \" +\n    \"hides its heading rather than labelling nothing. CommandDialog always renders a title and \" +\n    \"description, visually hidden, so the dialog is never unnamed.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,aAAa;CACrB,MACE;AAKJ,CAAC"}

package/dist/components/data-table/data-table.d.ts

@@ -0,0 +1,91 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+import { RowData, Table, TableFeatures } from "@tanstack/react-table";
+//#region src/components/data-table/data-table.d.ts
+interface DataTableProps<TFeatures extends TableFeatures, TData extends RowData> extends Omit<ComponentPropsWithRef<"table">, "children"> {
+  table: Table<TFeatures, TData>;
+  /** Shown in place of rows when there are none. */
+  empty?: ReactNode;
+}
+declare function DataTable<TFeatures extends TableFeatures, TData extends RowData>({ table, empty, className, ...props }: DataTableProps<TFeatures, TData>): import("react").JSX.Element;
+/**
+ * The slice of a column a sortable header needs.
+ *
+ * A column from a table without the sorting feature does not have these
+ * methods, so passing one is a compile error rather than a runtime crash.
+ */
+interface SortableColumn {
+  getCanSort: () => boolean;
+  getIsSorted: () => "asc" | "desc" | false;
+  toggleSorting: (desc?: boolean) => void;
+}
+interface DataTableColumnHeaderProps extends ComponentPropsWithRef<"div"> {
+  column: SortableColumn;
+  title: string;
+}
+/**
+ * A sortable column header.
+ *
+ * Falls back to plain text when the column cannot be sorted, rather than
+ * rendering a button that does nothing — a control that looks interactive and
+ * is not is worse than no control.
+ */
+declare function DataTableColumnHeader({ column, title, className, ...props }: DataTableColumnHeaderProps): import("react").JSX.Element;
+/** The slice of a table the column toggle needs. */
+interface HideableTable {
+  getAllColumns: () => {
+    id: string;
+    getCanHide: () => boolean;
+    getIsVisible: () => boolean;
+    toggleVisibility: (visible?: boolean) => void;
+  }[];
+}
+interface DataTableViewOptionsProps {
+  table: HideableTable;
+  label?: string;
+}
+/** Toggles column visibility. */
+declare function DataTableViewOptions({ table, label }: DataTableViewOptionsProps): import("react").JSX.Element;
+/**
+ * The slice of a table the page controls need.
+ *
+ * `state` is a property, not a `getState()` call — the table library moved to a
+ * reactive state object, and reading it the old way fails at runtime rather
+ * than at compile time.
+ */
+interface PaginatedTable {
+  state: {
+    pagination: {
+      pageIndex: number;
+      pageSize: number;
+    };
+  };
+  getPageCount: () => number;
+  setPageSize: (size: number) => void;
+  previousPage: () => void;
+  nextPage: () => void;
+  getCanPreviousPage: () => boolean;
+  getCanNextPage: () => boolean;
+}
+interface DataTablePaginationProps {
+  table: PaginatedTable;
+  pageSizes?: number[];
+  /**
+   * Replaces the page position on the left.
+   *
+   * A slot rather than a `showSelectionCount` flag: a selection count needs the
+   * selection and filtering features, and demanding those here would break
+   * every table that only paginates.
+   */
+  status?: ReactNode;
+}
+/**
+ * Page controls for a table.
+ *
+ * The page position is a polite live region: paging replaces the rows in place,
+ * and without an announcement a screen reader user gets no confirmation that
+ * anything happened.
+ */
+declare function DataTablePagination({ table, pageSizes, status }: DataTablePaginationProps): import("react").JSX.Element;
+//#endregion
+export { DataTable, DataTableColumnHeader, DataTableColumnHeaderProps, DataTablePagination, DataTablePaginationProps, DataTableProps, DataTableViewOptions, DataTableViewOptionsProps, HideableTable, PaginatedTable, SortableColumn };
+//# sourceMappingURL=data-table.d.ts.map

package/dist/components/data-table/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","names":[],"sources":["../../../src/components/data-table/data-table.tsx"],"mappings":";;;UAqIiB,eACf,kBAAkB,eAClB,cAAc,iBACN,KAAK;EACb,OAAO,MAAc,WAAW;;EAEhC,QAAQ;;iBAGM,UAAU,kBAAkB,eAAe,cAAc,WACvE,OACA,OACA,cACG,SACF,eAAe,WAAW,yBAAM,IAAA;;;;;;;UAmElB;EACf;EACA;EACA,gBAAgB;;UAGD,mCAAmC;EAClD,QAAQ;EACR;;;;;;;;;iBAUc,wBACd,QACA,OACA,cACG,SACF,6CAA0B,IAAA;;UA6EZ;EACf;IACE;IACA;IACA;IACA,mBAAmB;;;UAIN;EACf,OAAO;EACP;;;iBAIc,uBAAuB,OAAO,SAAqB,4CAAyB,IAAA;;;;;;;;UAwC3E;EACf;IAAS;MAAc;MAAmB;;;EAC1C;EACA,cAAc;EACd;EACA;EACA;EACA;;UAGe;EACf,OAAO;EACP;;;;;;;;EAQA,SAAS;;;;;;;;;iBAUK,sBACd,OACA,WACA,UACC,2CAAwB,IAAA"}