@askrjs/themes 0.0.23 → 0.0.24

package/README.md

@@ -49,6 +49,10 @@ the batteries-included theme.
 See [Acknowledgements](./docs/acknowledgements.md) for the open-source projects
 that inspired parts of the design philosophy.
 
+For documentation search and command launchers, use the accessible
+`CommandPalette` composition from `@askrjs/themes/command`; it owns themed
+presentation while `@askrjs/ui` supplies dialog focus and dismissal behavior.
+
 Then set `data-theme` to `tabby`, `ginger`, `tuxedo`, `calico`, or `torty`.
 For picker/toggle composition, import `CAT_THEME_OPTIONS` and `CAT_THEME_NAMES`
 from `@askrjs/themes/theme`.

package/capabilities.json

@@ -16,7 +16,7 @@
       "intent": "component presets and layout helpers",
       "package": "@askrjs/themes",
       "import": "@askrjs/themes/components",
-      "exports": ["EmptyState", "Spinner", "Badge", "Stack", "Button"],
+      "exports": ["EmptyState", "Spinner", "Badge", "Stack", "Button", "CommandPalette"],
       "constraints": ["presets compose headless @askrjs/ui primitives"],
       "stability": "stable",
       "docs": "https://github.com/askrjs/askr-themes/blob/main/THEMING.md",

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

@@ -0,0 +1,11 @@
+import { CommandPaletteContentProps, CommandPaletteLinkProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerAsChildProps, CommandPaletteTriggerProps } from "./command-palette.types.js";
+import { JSX } from "@askrjs/askr/jsx-runtime";
+//#region src/components/command-palette/command-palette.d.ts
+declare function CommandPalette(props: CommandPaletteProps): JSX.Element;
+declare function CommandPaletteTrigger(props: CommandPaletteTriggerProps): JSX.Element;
+declare function CommandPaletteTrigger(props: CommandPaletteTriggerAsChildProps): JSX.Element;
+declare function CommandPaletteContent(props: CommandPaletteContentProps): JSX.Element;
+declare function CommandPaletteLink(props: CommandPaletteLinkProps): JSX.Element;
+declare function CommandPaletteList(props: CommandPaletteListProps): JSX.Element;
+//#endregion
+export { CommandPalette, CommandPaletteContent, CommandPaletteLink, CommandPaletteList, CommandPaletteTrigger };

package/dist/components/command-palette/command-palette.js

@@ -0,0 +1,153 @@
+import { classes } from "../_internal/classes.js";
+import { Command } from "../catalog.js";
+import { Dialog, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "@askrjs/ui";
+import { jsx, jsxs } from "@askrjs/askr/jsx-runtime";
+import { defineScope, readScope, state } from "@askrjs/askr";
+import { Link } from "@askrjs/askr/router";
+import { controllableState } from "@askrjs/askr/foundations/state";
+import { composeRefs } from "@askrjs/askr/foundations/utilities";
+//#region src/components/command-palette/command-palette.tsx
+const CommandPaletteContext = defineScope(null);
+function readCommandPaletteContext() {
+	const context = readScope(CommandPaletteContext);
+	if (!context) throw new Error("CommandPalette components must be used within <CommandPalette>");
+	return context;
+}
+function CommandPalette(props) {
+	const { children, defaultOpen = false, onOpenChange, open, ...rest } = props;
+	const openState = controllableState({
+		defaultValue: defaultOpen,
+		onChange: onOpenChange,
+		value: open
+	});
+	const focusState = state({
+		open: false,
+		returnFocus: null,
+		trigger: null
+	})();
+	const isOpen = openState();
+	if (isOpen && !focusState.open && typeof document !== "undefined") {
+		const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		focusState.returnFocus = active && active !== document.body ? active : focusState.trigger instanceof HTMLElement ? focusState.trigger : null;
+	}
+	focusState.open = isOpen;
+	const restoreFocusSoon = () => {
+		const returnFocus = focusState.returnFocus;
+		if (!returnFocus) return;
+		queueMicrotask(() => {
+			queueMicrotask(() => {
+				if (returnFocus.isConnected) returnFocus.focus();
+			});
+		});
+	};
+	return /* @__PURE__ */ jsx(CommandPaletteContext, {
+		value: {
+			close: () => openState.set(false),
+			restoreFocusSoon,
+			setTrigger: (node) => {
+				focusState.trigger = node;
+			}
+		},
+		children: /* @__PURE__ */ jsx(Dialog, {
+			...rest,
+			open: isOpen,
+			onOpenChange: openState.set,
+			children
+		})
+	});
+}
+function CommandPaletteTrigger(props) {
+	const palette = readCommandPaletteContext();
+	const ref = props.ref ? composeRefs(props.ref, palette.setTrigger) : palette.setTrigger;
+	if (props.asChild) return /* @__PURE__ */ jsx(DialogTrigger, {
+		...props,
+		ref
+	});
+	return /* @__PURE__ */ jsx(DialogTrigger, {
+		...props,
+		ref
+	});
+}
+function preventDismiss(event, shouldDismiss) {
+	if (!shouldDismiss) event.preventDefault();
+}
+function CommandPaletteContent(props) {
+	const palette = readCommandPaletteContext();
+	const { children, class: className, closeOnBackdrop = true, closeOnEscape = true, description, initialFocus = "[data-slot=\"command-input\"]", onEscapeKeyDown, onInteractOutside, onPointerDownOutside, overlayProps, ref, title, ...rest } = props;
+	const focusInitialTarget = (node) => {
+		if (!node) {
+			palette.restoreFocusSoon();
+			return;
+		}
+		if (initialFocus === false) return;
+		queueMicrotask(() => {
+			if (!node.isConnected) return;
+			(typeof initialFocus === "function" ? initialFocus() : node.querySelector(initialFocus))?.focus();
+		});
+	};
+	const contentRef = ref ? composeRefs(ref, focusInitialTarget) : focusInitialTarget;
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {
+		...overlayProps,
+		"data-command-palette-overlay": ""
+	}), /* @__PURE__ */ jsxs(DialogContent, {
+		...rest,
+		class: className,
+		"data-command-palette-content": "",
+		ref: contentRef,
+		onEscapeKeyDown: (event) => {
+			onEscapeKeyDown?.(event);
+			preventDismiss(event, closeOnEscape);
+		},
+		onInteractOutside: (event) => {
+			onInteractOutside?.(event);
+			preventDismiss(event, closeOnBackdrop);
+		},
+		onPointerDownOutside: (event) => {
+			onPointerDownOutside?.(event);
+			preventDismiss(event, closeOnBackdrop);
+		},
+		children: [
+			/* @__PURE__ */ jsx(DialogTitle, {
+				class: "sr-only",
+				children: title
+			}),
+			description ? /* @__PURE__ */ jsx(DialogDescription, {
+				class: "sr-only",
+				children: description
+			}) : null,
+			/* @__PURE__ */ jsx(Command, { children })
+		]
+	})] });
+}
+function composeBeforeNavigate(close, closeOnSelect, beforeNavigate, onPress) {
+	return (event) => {
+		beforeNavigate?.();
+		if (!event.defaultPrevented) onPress?.(event);
+		if (closeOnSelect && !event.defaultPrevented) close();
+	};
+}
+function CommandPaletteLink(props) {
+	const { children, class: className, closeOnSelect = true, onBeforeNavigate, onPress, ...rest } = props;
+	const palette = readCommandPaletteContext();
+	return /* @__PURE__ */ jsx("li", {
+		"data-command-palette-result": "",
+		children: /* @__PURE__ */ jsx(Link, {
+			...rest,
+			class: className,
+			"data-slot": "command-item",
+			onPress: composeBeforeNavigate(palette.close, closeOnSelect, onBeforeNavigate, onPress),
+			children
+		})
+	});
+}
+function CommandPaletteList(props) {
+	const { children, class: className, ...rest } = props;
+	return /* @__PURE__ */ jsx("ul", {
+		...rest,
+		class: classes(className),
+		"data-slot": "command-list",
+		children
+	});
+}
+//#endregion
+export { CommandPalette, CommandPaletteContent, CommandPaletteLink, CommandPaletteList, CommandPaletteTrigger };

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

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.js","names":[],"sources":["../../../src/components/command-palette/command-palette.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { Link } from \"@askrjs/askr/router\";\nimport { defineScope, readScope, state } from \"@askrjs/askr\";\nimport { controllableState } from \"@askrjs/askr/foundations/state\";\nimport { composeRefs, type Ref } from \"@askrjs/askr/foundations/utilities\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n} from \"@askrjs/ui\";\nimport { Command } from \"../catalog\";\nimport { classes } from \"../_internal/classes\";\nimport type {\n  CommandPaletteContentProps,\n  CommandPaletteLinkProps,\n  CommandPaletteListProps,\n  CommandPaletteProps,\n  CommandPaletteTriggerAsChildProps,\n  CommandPaletteTriggerProps,\n} from \"./command-palette.types\";\n\ntype CommandPaletteContextValue = {\n  close: () => void;\n  restoreFocusSoon: () => void;\n  setTrigger: (node: Element | null) => void;\n};\n\nconst CommandPaletteContext = defineScope<CommandPaletteContextValue | null>(null);\n\nfunction readCommandPaletteContext(): CommandPaletteContextValue {\n  const context = readScope(CommandPaletteContext);\n  if (!context) {\n    throw new Error(\"CommandPalette components must be used within <CommandPalette>\");\n  }\n  return context;\n}\n\nexport function CommandPalette(props: CommandPaletteProps): JSX.Element {\n  const { children, defaultOpen = false, onOpenChange, open, ...rest } = props;\n  const openState = controllableState({\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n    value: open,\n  });\n  const focusState = state({\n    open: false,\n    returnFocus: null as HTMLElement | null,\n    trigger: null as Element | null,\n  })();\n  const isOpen = openState();\n\n  if (isOpen && !focusState.open && typeof document !== \"undefined\") {\n    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    focusState.returnFocus =\n      active && active !== document.body\n        ? active\n        : focusState.trigger instanceof HTMLElement\n          ? focusState.trigger\n          : null;\n  }\n  focusState.open = isOpen;\n\n  const restoreFocusSoon = () => {\n    const returnFocus = focusState.returnFocus;\n    if (!returnFocus) {\n      return;\n    }\n\n    queueMicrotask(() => {\n      queueMicrotask(() => {\n        if (returnFocus.isConnected) {\n          returnFocus.focus();\n        }\n      });\n    });\n  };\n\n  return (\n    <CommandPaletteContext\n      value={{\n        close: () => openState.set(false),\n        restoreFocusSoon,\n        setTrigger: (node) => {\n          focusState.trigger = node;\n        },\n      }}\n    >\n      <Dialog {...rest} open={isOpen} onOpenChange={openState.set}>\n        {children}\n      </Dialog>\n    </CommandPaletteContext>\n  );\n}\n\nexport function CommandPaletteTrigger(props: CommandPaletteTriggerProps): JSX.Element;\nexport function CommandPaletteTrigger(props: CommandPaletteTriggerAsChildProps): JSX.Element;\nexport function CommandPaletteTrigger(\n  props: CommandPaletteTriggerProps | CommandPaletteTriggerAsChildProps,\n): JSX.Element {\n  const palette = readCommandPaletteContext();\n  const ref = props.ref\n    ? composeRefs(props.ref as Ref<Element>, palette.setTrigger)\n    : palette.setTrigger;\n\n  if (props.asChild) {\n    return <DialogTrigger {...props} ref={ref} />;\n  }\n\n  return <DialogTrigger {...props} ref={ref as Ref<HTMLButtonElement>} />;\n}\n\nfunction preventDismiss(event: Event, shouldDismiss: boolean): void {\n  if (!shouldDismiss) {\n    event.preventDefault();\n  }\n}\n\nexport function CommandPaletteContent(props: CommandPaletteContentProps): JSX.Element {\n  const palette = readCommandPaletteContext();\n  const {\n    children,\n    class: className,\n    closeOnBackdrop = true,\n    closeOnEscape = true,\n    description,\n    initialFocus = '[data-slot=\"command-input\"]',\n    onEscapeKeyDown,\n    onInteractOutside,\n    onPointerDownOutside,\n    overlayProps,\n    ref,\n    title,\n    ...rest\n  } = props;\n  const focusInitialTarget = (node: HTMLDivElement | null) => {\n    if (!node) {\n      palette.restoreFocusSoon();\n      return;\n    }\n\n    if (initialFocus === false) {\n      return;\n    }\n\n    queueMicrotask(() => {\n      if (!node.isConnected) {\n        return;\n      }\n\n      const target =\n        typeof initialFocus === \"function\"\n          ? initialFocus()\n          : node.querySelector<HTMLElement>(initialFocus);\n      target?.focus();\n    });\n  };\n  const contentRef = ref\n    ? composeRefs(ref as Ref<HTMLDivElement>, focusInitialTarget)\n    : focusInitialTarget;\n\n  return (\n    <DialogPortal>\n      <DialogOverlay {...overlayProps} data-command-palette-overlay=\"\" />\n      <DialogContent\n        {...rest}\n        class={className}\n        data-command-palette-content=\"\"\n        ref={contentRef}\n        onEscapeKeyDown={(event) => {\n          onEscapeKeyDown?.(event);\n          preventDismiss(event, closeOnEscape);\n        }}\n        onInteractOutside={(event) => {\n          onInteractOutside?.(event);\n          preventDismiss(event, closeOnBackdrop);\n        }}\n        onPointerDownOutside={(event) => {\n          onPointerDownOutside?.(event);\n          preventDismiss(event, closeOnBackdrop);\n        }}\n      >\n        <DialogTitle class=\"sr-only\">{title}</DialogTitle>\n        {description ? <DialogDescription class=\"sr-only\">{description}</DialogDescription> : null}\n        <Command>{children}</Command>\n      </DialogContent>\n    </DialogPortal>\n  );\n}\n\nfunction composeBeforeNavigate(\n  close: () => void,\n  closeOnSelect: boolean,\n  beforeNavigate: CommandPaletteLinkProps[\"onBeforeNavigate\"],\n  onPress: CommandPaletteLinkProps[\"onPress\"],\n): (event: Event) => void {\n  return (event) => {\n    beforeNavigate?.();\n    if (!event.defaultPrevented) {\n      onPress?.(event);\n    }\n    if (closeOnSelect && !event.defaultPrevented) {\n      close();\n    }\n  };\n}\n\nexport function CommandPaletteLink(props: CommandPaletteLinkProps): JSX.Element {\n  const {\n    children,\n    class: className,\n    closeOnSelect = true,\n    onBeforeNavigate,\n    onPress,\n    ...rest\n  } = props;\n  const palette = readCommandPaletteContext();\n  return (\n    <li data-command-palette-result=\"\">\n      <Link\n        {...rest}\n        class={className}\n        data-slot=\"command-item\"\n        onPress={composeBeforeNavigate(palette.close, closeOnSelect, onBeforeNavigate, onPress)}\n      >\n        {children}\n      </Link>\n    </li>\n  );\n}\n\nexport function CommandPaletteList(props: CommandPaletteListProps): JSX.Element {\n  const { children, class: className, ...rest } = props;\n  return (\n    <ul {...rest} class={classes(className)} data-slot=\"command-list\">\n      {children}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;AA+BA,MAAM,wBAAwB,YAA+C,IAAI;AAEjF,SAAS,4BAAwD;CAC/D,MAAM,UAAU,UAAU,qBAAqB;CAC/C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,gEAAgE;CAElF,OAAO;AACT;AAEA,SAAgB,eAAe,OAAyC;CACtE,MAAM,EAAE,UAAU,cAAc,OAAO,cAAc,MAAM,GAAG,SAAS;CACvE,MAAM,YAAY,kBAAkB;EAClC,cAAc;EACd,UAAU;EACV,OAAO;CACT,CAAC;CACD,MAAM,aAAa,MAAM;EACvB,MAAM;EACN,aAAa;EACb,SAAS;CACX,CAAC,CAAC,CAAC;CACH,MAAM,SAAS,UAAU;CAEzB,IAAI,UAAU,CAAC,WAAW,QAAQ,OAAO,aAAa,aAAa;EACjE,MAAM,SAAS,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;EACxF,WAAW,cACT,UAAU,WAAW,SAAS,OAC1B,SACA,WAAW,mBAAmB,cAC5B,WAAW,UACX;CACV;CACA,WAAW,OAAO;CAElB,MAAM,yBAAyB;EAC7B,MAAM,cAAc,WAAW;EAC/B,IAAI,CAAC,aACH;EAGF,qBAAqB;GACnB,qBAAqB;IACnB,IAAI,YAAY,aACd,YAAY,MAAM;GAEtB,CAAC;EACH,CAAC;CACH;CAEA,OACE,oBAAC,uBAAD;EACE,OAAO;GACL,aAAa,UAAU,IAAI,KAAK;GAChC;GACA,aAAa,SAAS;IACpB,WAAW,UAAU;GACvB;EACF;EAEA,UAAA,oBAAC,QAAD;GAAQ,GAAI;GAAM,MAAM;GAAQ,cAAc,UAAU;GACrD;EACK,CAAA;CACa,CAAA;AAE3B;AAIA,SAAgB,sBACd,OACa;CACb,MAAM,UAAU,0BAA0B;CAC1C,MAAM,MAAM,MAAM,MACd,YAAY,MAAM,KAAqB,QAAQ,UAAU,IACzD,QAAQ;CAEZ,IAAI,MAAM,SACR,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAY;CAAM,CAAA;CAG9C,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAY;CAAgC,CAAA;AACxE;AAEA,SAAS,eAAe,OAAc,eAA8B;CAClE,IAAI,CAAC,eACH,MAAM,eAAe;AAEzB;AAEA,SAAgB,sBAAsB,OAAgD;CACpF,MAAM,UAAU,0BAA0B;CAC1C,MAAM,EACJ,UACA,OAAO,WACP,kBAAkB,MAClB,gBAAgB,MAChB,aACA,eAAe,iCACf,iBACA,mBACA,sBACA,cACA,KACA,OACA,GAAG,SACD;CACJ,MAAM,sBAAsB,SAAgC;EAC1D,IAAI,CAAC,MAAM;GACT,QAAQ,iBAAiB;GACzB;EACF;EAEA,IAAI,iBAAiB,OACnB;EAGF,qBAAqB;GACnB,IAAI,CAAC,KAAK,aACR;GAOF,CAHE,OAAO,iBAAiB,aACpB,aAAa,IACb,KAAK,cAA2B,YAAY,EAAA,EAC1C,MAAM;EAChB,CAAC;CACH;CACA,MAAM,aAAa,MACf,YAAY,KAA4B,kBAAkB,IAC1D;CAEJ,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD;EAAe,GAAI;EAAc,gCAA6B;CAAI,CAAA,GAClE,qBAAC,eAAD;EACE,GAAI;EACJ,OAAO;EACP,gCAA6B;EAC7B,KAAK;EACL,kBAAkB,UAAU;GAC1B,kBAAkB,KAAK;GACvB,eAAe,OAAO,aAAa;EACrC;EACA,oBAAoB,UAAU;GAC5B,oBAAoB,KAAK;GACzB,eAAe,OAAO,eAAe;EACvC;EACA,uBAAuB,UAAU;GAC/B,uBAAuB,KAAK;GAC5B,eAAe,OAAO,eAAe;EACvC;EAhBF,UAAA;GAkBE,oBAAC,aAAD;IAAa,OAAM;IAAW,UAAA;GAAmB,CAAA;GAChD,cAAc,oBAAC,mBAAD;IAAmB,OAAM;IAAW,UAAA;GAA+B,CAAA,IAAI;GACtF,oBAAC,SAAD,EAAU,SAAkB,CAAA;EACf;CACH,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,SAAS,sBACP,OACA,eACA,gBACA,SACwB;CACxB,QAAQ,UAAU;EAChB,iBAAiB;EACjB,IAAI,CAAC,MAAM,kBACT,UAAU,KAAK;EAEjB,IAAI,iBAAiB,CAAC,MAAM,kBAC1B,MAAM;CAEV;AACF;AAEA,SAAgB,mBAAmB,OAA6C;CAC9E,MAAM,EACJ,UACA,OAAO,WACP,gBAAgB,MAChB,kBACA,SACA,GAAG,SACD;CACJ,MAAM,UAAU,0BAA0B;CAC1C,OACE,oBAAC,MAAD;EAAI,+BAA4B;EAC9B,UAAA,oBAAC,MAAD;GACE,GAAI;GACJ,OAAO;GACP,aAAU;GACV,SAAS,sBAAsB,QAAQ,OAAO,eAAe,kBAAkB,OAAO;GAErF;EACG,CAAA;CACJ,CAAA;AAER;AAEA,SAAgB,mBAAmB,OAA6C;CAC9E,MAAM,EAAE,UAAU,OAAO,WAAW,GAAG,SAAS;CAChD,OACE,oBAAC,MAAD;EAAI,GAAI;EAAM,OAAO,QAAQ,SAAS;EAAG,aAAU;EAChD;CACC,CAAA;AAER"}

package/dist/components/command-palette/command-palette.types.d.ts

@@ -0,0 +1,30 @@
+import { DialogContentProps, DialogOverlayProps, DialogProps, DialogTriggerAsChildProps, DialogTriggerProps } from "@askrjs/ui";
+import { JSX } from "@askrjs/askr/jsx-runtime";
+import { LinkProps } from "@askrjs/askr/router";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+//#region src/components/command-palette/command-palette.types.d.ts
+type CommandPaletteProps = DialogProps;
+type CommandPaletteTriggerProps = DialogTriggerProps;
+type CommandPaletteTriggerAsChildProps = DialogTriggerAsChildProps;
+type CommandPaletteContentProps = Omit<DialogContentProps, "children" | "title" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside"> & {
+  children?: unknown;
+  title: string;
+  description?: string;
+  initialFocus?: string | (() => HTMLElement | null) | false;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  overlayProps?: DialogOverlayProps;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  onInteractOutside?: (event: Event) => void;
+  onPointerDownOutside?: (event: PointerEvent) => void;
+};
+type CommandPaletteLinkProps = LinkProps & {
+  closeOnSelect?: boolean;
+  onBeforeNavigate?: () => void;
+};
+type CommandPaletteListProps = Omit<JSX.IntrinsicElements["ul"], "children" | "ref"> & {
+  children?: unknown;
+  ref?: Ref<HTMLUListElement>;
+};
+//#endregion
+export { CommandPaletteContentProps, CommandPaletteLinkProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerAsChildProps, CommandPaletteTriggerProps };

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

@@ -0,0 +1,3 @@
+import { CommandPaletteContentProps, CommandPaletteLinkProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerAsChildProps, CommandPaletteTriggerProps } from "./command-palette.types.js";
+import { CommandPalette, CommandPaletteContent, CommandPaletteLink, CommandPaletteList, CommandPaletteTrigger } from "./command-palette.js";
+export { CommandPalette, CommandPaletteContent, type CommandPaletteContentProps, CommandPaletteLink, type CommandPaletteLinkProps, CommandPaletteList, type CommandPaletteListProps, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerAsChildProps, type CommandPaletteTriggerProps };

package/dist/components/nav/nav.types.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from "@askrjs/askr/jsx-runtime";
 import { JSXElement } from "@askrjs/askr/foundations";
-import { Ref } from "@askrjs/askr/foundations/utilities";
 import { LinkProps } from "@askrjs/askr/router";
+import { Ref } from "@askrjs/askr/foundations/utilities";
 //#region src/components/nav/nav.types.d.ts
 type NavLinkMatch = "prefix" | "exact";
 type TabsOwnProps = {

package/dist/components.d.ts

@@ -23,6 +23,9 @@ import "./components/card/index.js";
 import { CloseNativeProps, CloseOwnProps } from "./components/close/close.types.js";
 import { Close } from "./components/close/close.js";
 import "./components/close/index.js";
+import { CommandPaletteContentProps, CommandPaletteLinkProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerAsChildProps, CommandPaletteTriggerProps } from "./components/command-palette/command-palette.types.js";
+import { CommandPalette, CommandPaletteContent, CommandPaletteLink, CommandPaletteList, CommandPaletteTrigger } from "./components/command-palette/command-palette.js";
+import "./components/command-palette/index.js";
 import { ContainerProps } from "./components/container/container.types.js";
 import { Container } from "./components/container/container.js";
 import "./components/container/index.js";
@@ -90,4 +93,4 @@ import { CAT_THEME_NAMES, CAT_THEME_OPTIONS, CatThemeName, DEFAULT_THEME_OPTIONS
 import "./components/theme/index.js";
 import { AlertDescription, AlertTitle, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CatalogComponentProps, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DatePickerInput, Direction, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Inline, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ResizableHandle, ResizablePanel, ResizablePanelGroup, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Shell, ShellMain, ShellNav, Sonner, Stack, TabsContent, TabsList, TabsTrigger, Toaster, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP } from "./components/catalog.js";
 import { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Button, ButtonAsChildElement, ButtonAsChildProps, ButtonNativeProps, ButtonProps, ButtonSize, ButtonVariant, ButtonWidth, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, DebouncedInput, Dialog, Dialog as Drawer, Dialog as Sheet, DialogClose, DialogClose as DrawerClose, DialogClose as SheetClose, DialogContent, DialogContent as DrawerContent, DialogDescription, DialogDescription as DrawerDescription, DialogOverlay, DialogOverlay as DrawerOverlay, DialogOverlay as SheetOverlay, DialogPortal, DialogPortal as DrawerPortal, DialogPortal as SheetPortal, DialogProps, DialogTitle, DialogTitle as DrawerTitle, DialogTrigger, DialogTrigger as DrawerTrigger, DialogTrigger as SheetTrigger, Dropdown, Dropdown as ContextMenu, Dropdown as DropdownMenu, DropdownGroup, DropdownGroup as ContextMenuGroup, DropdownGroup as DropdownMenuGroup, DropdownItem, DropdownItem as ContextMenuItem, DropdownItem as DropdownMenuItem, DropdownItemVariant, DropdownLabel, DropdownLabel as ContextMenuLabel, DropdownLabel as DropdownMenuLabel, DropdownPortal, DropdownPortal as ContextMenuPortal, DropdownPortal as DropdownMenuPortal, DropdownSeparator, DropdownSeparator as ContextMenuSeparator, DropdownSeparator as DropdownMenuSeparator, DropdownTrigger, DropdownTrigger as ContextMenuTrigger, DropdownTrigger as DropdownMenuTrigger, DropdownTriggerSize, DropdownTriggerVariant, Form, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, Input, Label, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Popover, PopoverClose, PopoverContent, PopoverContentWidth, PopoverPortal, PopoverTrigger, Progress, ProgressCircle, ProgressCircleIndicator, ProgressIndicator, RadioGroup, RadioGroupItem, ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Select, SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, SelectTriggerSize, SelectValue, Slider, SliderRange, SliderThumb, SliderTrack, Switch, Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger, VirtualList, VirtualListApi, VirtualListAsChildProps, VirtualListProps, VirtualListRowComponent, VirtualListRowComponentProps, VirtualListRowElement, VirtualListState, VirtualListViewport, VirtualTable, VirtualTableApi, VirtualTableAsChildProps, VirtualTableCellComponent, VirtualTableCellComponentProps, VirtualTableCellElement, VirtualTableColumn, VirtualTableProps, VirtualTableState, VirtualTableViewport, VirtualTableWidth, VisuallyHidden } from "@askrjs/ui";
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertHeadingTag, type AlertProps, AlertTitle, type AlertVariant, Aside, type AsideProps, AspectRatio, type AspectRatioAsChildProps, type AspectRatioProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeAsChildProps, type BadgeOwnProps, type BadgeProps, Block, type BlockAlign, type BlockAsChildProps, type BlockBackground, type BlockDirection, type BlockDivProps, type BlockElement, type BlockElementProps, type BlockJustify, type BlockMargin, type BlockNativeProps, type BlockOwnProps, type BlockProps, type BlockRadius, type ResponsiveValue as BlockResponsiveValue, type BlockRowFrom, type BlockShadow, type BlockSize, type BlockSpace, type BlockSpanProps, type BlockZIndex, Box, Brand, BrandLabel, BrandMark, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonAsChildElement, type ButtonAsChildProps, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonNativeProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonWidth, CAT_THEME_NAMES, CAT_THEME_OPTIONS, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleHeadingTag, type CardTitleProps, type CardVariant, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CatThemeName, CatalogComponentProps, Checkbox, Close, type CloseNativeProps, type CloseOwnProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, DropdownContent as ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DEFAULT_THEME_OPTIONS, DataTable, DatePicker, DatePickerInput, DebouncedInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, Direction, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, type DropdownItemVariant, DropdownLabel, DropdownMenu, DropdownContent as DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, DropdownPortal, DropdownSeparator, DropdownTrigger, type DropdownTriggerSize, type DropdownTriggerVariant, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateHeadingTag, type EmptyStateProps, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, type FieldErrorProps, FieldGroup, FieldHint, type FieldHintProps, FieldLabel, FieldLegend, type FieldProps, FieldSeparator, FieldSet, FieldTitle, Footer, FooterContent, type FooterContentProps, FooterDescription, type FooterDescriptionProps, FooterLink, type FooterLinkProps, FooterLinks, type FooterLinksProps, type FooterProps, FooterSection, type FooterSectionProps, FooterTitle, type FooterTitleProps, Form, Grid, type GridAlign, type GridColumns, type GridElement, type GridProps, Header, type HeaderProps, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, Inline, Input, InputGroup, type InputGroupOrientation, type InputGroupProps, InputGroupText, type InputGroupTextAsChildProps, type InputGroupTextProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, Label, Main, type MainProps, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, Navbar as Nav, NavBrand, type NavBrandProps, NavDropdown, type NavDropdownProps, NavGroup, type NavGroupProps, NavItem, type NavItemAsChildProps, type NavItemProps, NavLink, type NavLinkProps, Navbar, type NavbarCollapseBreakpoint, type NavbarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Page, PageHeader, type PageHeaderProps, type PageProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Pill, type PillProps, Pills, type PillsAsChildProps, type PillsProps, Popover, PopoverClose, PopoverContent, type PopoverContentWidth, PopoverPortal, PopoverTrigger, Progress, ProgressCircle, ProgressCircleIndicator, ProgressIndicator, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Section, type SectionProps, Select, SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, type SelectTriggerSize, SelectValue, Separator, type SeparatorAsChildProps, type SeparatorNativeProps, type SeparatorOwnProps, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShellMain, ShellNav, Sidebar, type SidebarButtonProps, type SidebarCollapsible, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, type SidebarPartProps, type SidebarProps, SidebarRail, type SidebarRailProps, SidebarScope, type SidebarSide, type SidebarTooltipSide, SidebarTrigger, type SidebarVariant, Skeleton, type SkeletonAsChildProps, type SkeletonOwnProps, type SkeletonProps, Slider, SliderRange, SliderThumb, SliderTrack, Sonner, Spinner, type SpinnerOwnProps, type SpinnerProps, type SpinnerSize, Stack, Stat, StatDescription, StatLabel, StatValue, Switch, Tab, type TabProps, Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, type TabsAsChildProps, TabsContent, TabsList, type TabsProps, TabsTrigger, Text, type TextElement, type TextFont, type TextNumeric, type TextProps, type TextSize, type TextTone, type TextWeight, type TextWrap, Textarea, type ThemeName, type ThemeOption, ThemePicker, type ThemePickerProps, ThemeScope, type ThemeScopeProps, type ThemeScopeValue, ThemeToggle, type ThemeToggleProps, type ThemeToggleRenderContext, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP, VirtualList, type VirtualListApi, type VirtualListAsChildProps, type VirtualListProps, type VirtualListRowComponent, type VirtualListRowComponentProps, type VirtualListRowElement, type VirtualListState, type VirtualListViewport, VirtualTable, type VirtualTableApi, type VirtualTableAsChildProps, type VirtualTableCellComponent, type VirtualTableCellComponentProps, type VirtualTableCellElement, type VirtualTableColumn, type VirtualTableProps, type VirtualTableState, type VirtualTableViewport, type VirtualTableWidth, VisuallyHidden, theme };
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertHeadingTag, type AlertProps, AlertTitle, type AlertVariant, Aside, type AsideProps, AspectRatio, type AspectRatioAsChildProps, type AspectRatioProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeAsChildProps, type BadgeOwnProps, type BadgeProps, Block, type BlockAlign, type BlockAsChildProps, type BlockBackground, type BlockDirection, type BlockDivProps, type BlockElement, type BlockElementProps, type BlockJustify, type BlockMargin, type BlockNativeProps, type BlockOwnProps, type BlockProps, type BlockRadius, type ResponsiveValue as BlockResponsiveValue, type BlockRowFrom, type BlockShadow, type BlockSize, type BlockSpace, type BlockSpanProps, type BlockZIndex, Box, Brand, BrandLabel, BrandMark, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonAsChildElement, type ButtonAsChildProps, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonNativeProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonWidth, CAT_THEME_NAMES, CAT_THEME_OPTIONS, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleHeadingTag, type CardTitleProps, type CardVariant, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CatThemeName, CatalogComponentProps, Checkbox, Close, type CloseNativeProps, type CloseOwnProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteContent, type CommandPaletteContentProps, CommandPaletteLink, type CommandPaletteLinkProps, CommandPaletteList, type CommandPaletteListProps, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerAsChildProps, type CommandPaletteTriggerProps, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, DropdownContent as ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DEFAULT_THEME_OPTIONS, DataTable, DatePicker, DatePickerInput, DebouncedInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, DialogTrigger, Direction, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, type DropdownItemVariant, DropdownLabel, DropdownMenu, DropdownContent as DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, DropdownPortal, DropdownSeparator, DropdownTrigger, type DropdownTriggerSize, type DropdownTriggerVariant, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateHeadingTag, type EmptyStateProps, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, type FieldErrorProps, FieldGroup, FieldHint, type FieldHintProps, FieldLabel, FieldLegend, type FieldProps, FieldSeparator, FieldSet, FieldTitle, Footer, FooterContent, type FooterContentProps, FooterDescription, type FooterDescriptionProps, FooterLink, type FooterLinkProps, FooterLinks, type FooterLinksProps, type FooterProps, FooterSection, type FooterSectionProps, FooterTitle, type FooterTitleProps, Form, Grid, type GridAlign, type GridColumns, type GridElement, type GridProps, Header, type HeaderProps, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, Inline, Input, InputGroup, type InputGroupOrientation, type InputGroupProps, InputGroupText, type InputGroupTextAsChildProps, type InputGroupTextProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, Label, Main, type MainProps, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, Navbar as Nav, NavBrand, type NavBrandProps, NavDropdown, type NavDropdownProps, NavGroup, type NavGroupProps, NavItem, type NavItemAsChildProps, type NavItemProps, NavLink, type NavLinkProps, Navbar, type NavbarCollapseBreakpoint, type NavbarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Page, PageHeader, type PageHeaderProps, type PageProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Pill, type PillProps, Pills, type PillsAsChildProps, type PillsProps, Popover, PopoverClose, PopoverContent, type PopoverContentWidth, PopoverPortal, PopoverTrigger, Progress, ProgressCircle, ProgressCircleIndicator, ProgressIndicator, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Section, type SectionProps, Select, SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, type SelectTriggerSize, SelectValue, Separator, type SeparatorAsChildProps, type SeparatorNativeProps, type SeparatorOwnProps, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShellMain, ShellNav, Sidebar, type SidebarButtonProps, type SidebarCollapsible, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, type SidebarPartProps, type SidebarProps, SidebarRail, type SidebarRailProps, SidebarScope, type SidebarSide, type SidebarTooltipSide, SidebarTrigger, type SidebarVariant, Skeleton, type SkeletonAsChildProps, type SkeletonOwnProps, type SkeletonProps, Slider, SliderRange, SliderThumb, SliderTrack, Sonner, Spinner, type SpinnerOwnProps, type SpinnerProps, type SpinnerSize, Stack, Stat, StatDescription, StatLabel, StatValue, Switch, Tab, type TabProps, Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, type TabsAsChildProps, TabsContent, TabsList, type TabsProps, TabsTrigger, Text, type TextElement, type TextFont, type TextNumeric, type TextProps, type TextSize, type TextTone, type TextWeight, type TextWrap, Textarea, type ThemeName, type ThemeOption, ThemePicker, type ThemePickerProps, ThemeScope, type ThemeScopeProps, type ThemeScopeValue, ThemeToggle, type ThemeToggleProps, type ThemeToggleRenderContext, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP, VirtualList, type VirtualListApi, type VirtualListAsChildProps, type VirtualListProps, type VirtualListRowComponent, type VirtualListRowComponentProps, type VirtualListRowElement, type VirtualListState, type VirtualListViewport, VirtualTable, type VirtualTableApi, type VirtualTableAsChildProps, type VirtualTableCellComponent, type VirtualTableCellComponentProps, type VirtualTableCellElement, type VirtualTableColumn, type VirtualTableProps, type VirtualTableState, type VirtualTableViewport, type VirtualTableWidth, VisuallyHidden, theme };

package/dist/components.js

@@ -7,6 +7,8 @@ import { Block } from "./components/block/block.js";
 import { Brand, BrandLabel, BrandMark } from "./components/brand/brand.js";
 import { ButtonGroup } from "./components/button-group/button-group.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/card/card.js";
+import { AlertDescription, AlertTitle, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DatePickerInput, Direction, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Inline, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ResizableHandle, ResizablePanel, ResizablePanelGroup, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Shell, ShellMain, ShellNav, Sonner, Stack, TabsContent, TabsList, TabsTrigger, Toaster, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP } from "./components/catalog.js";
+import { CommandPalette, CommandPaletteContent, CommandPaletteLink, CommandPaletteList, CommandPaletteTrigger } from "./components/command-palette/command-palette.js";
 import { Container } from "./components/container/container.js";
 import { EmptyState } from "./components/empty-state/empty-state.js";
 import { Field, FieldError, FieldHint } from "./components/field/field.js";
@@ -30,6 +32,5 @@ import { Stat, StatDescription, StatLabel, StatValue } from "./components/stat/s
 import { Text } from "./components/text/text.js";
 import { Toolbar } from "./components/toolbar/toolbar.js";
 import { CAT_THEME_NAMES, CAT_THEME_OPTIONS, DEFAULT_THEME_OPTIONS, ThemePicker, ThemeScope, ThemeToggle, theme } from "./components/theme/theme.js";
-import { AlertDescription, AlertTitle, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DatePickerInput, Direction, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Inline, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ResizableHandle, ResizablePanel, ResizablePanelGroup, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Shell, ShellMain, ShellNav, Sonner, Stack, TabsContent, TabsList, TabsTrigger, Toaster, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP } from "./components/catalog.js";
 import { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Button, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, DebouncedInput, Dialog, Dialog as Drawer, Dialog as Sheet, DialogClose, DialogClose as DrawerClose, DialogClose as SheetClose, DialogContent, DialogContent as DrawerContent, DialogDescription, DialogDescription as DrawerDescription, DialogOverlay, DialogOverlay as DrawerOverlay, DialogOverlay as SheetOverlay, DialogPortal, DialogPortal as DrawerPortal, DialogPortal as SheetPortal, DialogTitle, DialogTitle as DrawerTitle, DialogTrigger, DialogTrigger as DrawerTrigger, DialogTrigger as SheetTrigger, Dropdown, Dropdown as ContextMenu, Dropdown as DropdownMenu, DropdownGroup, DropdownGroup as ContextMenuGroup, DropdownGroup as DropdownMenuGroup, DropdownItem, DropdownItem as ContextMenuItem, DropdownItem as DropdownMenuItem, DropdownLabel, DropdownLabel as ContextMenuLabel, DropdownLabel as DropdownMenuLabel, DropdownPortal, DropdownPortal as ContextMenuPortal, DropdownPortal as DropdownMenuPortal, DropdownSeparator, DropdownSeparator as ContextMenuSeparator, DropdownSeparator as DropdownMenuSeparator, DropdownTrigger, DropdownTrigger as ContextMenuTrigger, DropdownTrigger as DropdownMenuTrigger, Form, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, Input, Label, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Popover, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Progress, ProgressCircle, ProgressCircleIndicator, ProgressIndicator, RadioGroup, RadioGroupItem, ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Select, SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Slider, SliderRange, SliderThumb, SliderTrack, Switch, Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger, VirtualList, VirtualTable, VisuallyHidden } from "@askrjs/ui";
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Aside, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Block, Box, Brand, BrandLabel, BrandMark, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, CAT_THEME_NAMES, CAT_THEME_OPTIONS, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Close, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Container, ContextMenu, DropdownContent as ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DEFAULT_THEME_OPTIONS, DataTable, DatePicker, DatePickerInput, DebouncedInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Direction, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownMenu, DropdownContent as DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, DropdownPortal, DropdownSeparator, DropdownTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldHint, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Footer, FooterContent, FooterDescription, FooterLink, FooterLinks, FooterSection, FooterTitle, Form, Grid, Header, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, Inline, Input, InputGroup, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, Label, Main, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, Navbar as Nav, NavBrand, NavDropdown, NavGroup, NavItem, NavLink, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Page, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Pill, Pills, Popover, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Progress, ProgressCircle, ProgressCircleIndicator, ProgressIndicator, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Section, Select, SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShellMain, ShellNav, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarRail, SidebarScope, SidebarTrigger, Skeleton, Slider, SliderRange, SliderThumb, SliderTrack, Sonner, Spinner, Stack, Stat, StatDescription, StatLabel, StatValue, Switch, Tab, Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, ThemePicker, ThemeScope, ThemeToggle, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP, VirtualList, VirtualTable, VisuallyHidden, theme };
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Aside, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Block, Box, Brand, BrandLabel, BrandMark, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, CAT_THEME_NAMES, CAT_THEME_OPTIONS, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Close, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteContent, CommandPaletteLink, CommandPaletteList, CommandPaletteTrigger, CommandSeparator, CommandShortcut, Container, ContextMenu, DropdownContent as ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DEFAULT_THEME_OPTIONS, DataTable, DatePicker, DatePickerInput, DebouncedInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Direction, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownMenu, DropdownContent as DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, DropdownPortal, DropdownSeparator, DropdownTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldHint, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Footer, FooterContent, FooterDescription, FooterLink, FooterLinks, FooterSection, FooterTitle, Form, Grid, Header, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, Inline, Input, InputGroup, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, Label, Main, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, Navbar as Nav, NavBrand, NavDropdown, NavGroup, NavItem, NavLink, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Page, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Pill, Pills, Popover, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Progress, ProgressCircle, ProgressCircleIndicator, ProgressIndicator, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Section, Select, SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShellMain, ShellNav, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarRail, SidebarScope, SidebarTrigger, Skeleton, Slider, SliderRange, SliderThumb, SliderTrack, Sonner, Spinner, Stack, Stat, StatDescription, StatLabel, StatValue, Switch, Tab, Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, ThemePicker, ThemeScope, ThemeToggle, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP, VirtualList, VirtualTable, VisuallyHidden, theme };

package/dist/entries/command.d.ts

@@ -1,2 +1,5 @@
+import { CommandPaletteContentProps, CommandPaletteLinkProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerAsChildProps, CommandPaletteTriggerProps } from "../components/command-palette/command-palette.types.js";
+import { CommandPalette, CommandPaletteContent, CommandPaletteLink, CommandPaletteList, CommandPaletteTrigger } from "../components/command-palette/command-palette.js";
+import "../components/command-palette/index.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "../components/catalog.js";
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteContent, type CommandPaletteContentProps, CommandPaletteLink, type CommandPaletteLinkProps, CommandPaletteList, type CommandPaletteListProps, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerAsChildProps, type CommandPaletteTriggerProps, CommandSeparator, CommandShortcut };

package/dist/entries/command.js

@@ -1,2 +1,3 @@
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "../components/catalog.js";
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+import { CommandPalette, CommandPaletteContent, CommandPaletteLink, CommandPaletteList, CommandPaletteTrigger } from "../components/command-palette/command-palette.js";
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteContent, CommandPaletteLink, CommandPaletteList, CommandPaletteTrigger, CommandSeparator, CommandShortcut };

package/dist/entries/tabs.js

@@ -1,3 +1,3 @@
-import { Pill, Pills, Tab, Tabs } from "../components/nav/nav.js";
 import { TabsContent, TabsList, TabsTrigger } from "../components/catalog.js";
+import { Pill, Pills, Tab, Tabs } from "../components/nav/nav.js";
 export { Pill, Pills, Tab, Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/themes/default/index.css

@@ -3745,6 +3745,44 @@
   overflow: hidden;
 }
 
+:where([data-command-palette-content]) {
+  max-block-size: min(36rem, 100dvh - 1rem);
+  inline-size: min(42rem, 100vw - 1rem);
+  padding: 0;
+  overflow: hidden;
+}
+
+:where([data-command-palette-content] [data-slot="command"]) {
+  min-block-size: 0;
+}
+
+:where([data-command-palette-result] > [data-slot="command-item"]) {
+  min-block-size: var(--ak-density-control-height-md);
+  padding: var(--ak-space-sm) var(--ak-space-md);
+  border-radius: var(--ak-radius-md);
+  color: inherit;
+  cursor: pointer;
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+:where([data-command-palette-content] [data-slot="command-list"]) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where([data-command-palette-result] > [data-slot="command-item"]:hover) {
+  background: var(--ak-color-accent);
+  color: var(--ak-color-accent-ink);
+}
+
+:where([data-command-palette-result] > [data-slot="command-item"]:focus-visible) {
+  box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+  outline: none;
+}
+
 :where([data-slot="command-header"]) {
   border-block-end: 1px solid var(--ak-color-border);
   padding-inline: var(--ak-space-3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/themes",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "Default theme tokens, styles, and component presets for Askr apps.",
   "keywords": [
     "askr",
@@ -119,11 +119,11 @@
     "test:checks": "vp test run -c vitest.test.checks.config.ts"
   },
   "devDependencies": {
-    "@askrjs/askr": ">=0.0.87 <0.1.0",
-    "@askrjs/ui": ">=0.0.25 <0.1.0",
+    "@askrjs/askr": ">=0.0.88 <0.1.0",
+    "@askrjs/ui": ">=0.0.26 <0.1.0",
     "@askrjs/vite": ">=0.0.12 <0.1.0",
     "@tsdown/css": "0.22.14",
-    "@types/node": "^26.1.2",
+    "@types/node": "^26.2.0",
     "@typescript/native": "npm:typescript@^7.0.2",
     "@vitest/browser-playwright": "4.1.10",
     "cross-env": "^10.1.0",
@@ -135,8 +135,8 @@
     "vite-plus": "^0.2.8"
   },
   "peerDependencies": {
-    "@askrjs/askr": ">=0.0.87 <0.1.0",
-    "@askrjs/ui": ">=0.0.25 <0.1.0"
+    "@askrjs/askr": ">=0.0.88 <0.1.0",
+    "@askrjs/ui": ">=0.0.26 <0.1.0"
   },
   "engines": {
     "node": ">=24.0.0"

package/src/components/command-palette/command-palette.tsx

@@ -0,0 +1,242 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
+import { Link } from "@askrjs/askr/router";
+import { defineScope, readScope, state } from "@askrjs/askr";
+import { controllableState } from "@askrjs/askr/foundations/state";
+import { composeRefs, type Ref } from "@askrjs/askr/foundations/utilities";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "@askrjs/ui";
+import { Command } from "../catalog";
+import { classes } from "../_internal/classes";
+import type {
+  CommandPaletteContentProps,
+  CommandPaletteLinkProps,
+  CommandPaletteListProps,
+  CommandPaletteProps,
+  CommandPaletteTriggerAsChildProps,
+  CommandPaletteTriggerProps,
+} from "./command-palette.types";
+
+type CommandPaletteContextValue = {
+  close: () => void;
+  restoreFocusSoon: () => void;
+  setTrigger: (node: Element | null) => void;
+};
+
+const CommandPaletteContext = defineScope<CommandPaletteContextValue | null>(null);
+
+function readCommandPaletteContext(): CommandPaletteContextValue {
+  const context = readScope(CommandPaletteContext);
+  if (!context) {
+    throw new Error("CommandPalette components must be used within <CommandPalette>");
+  }
+  return context;
+}
+
+export function CommandPalette(props: CommandPaletteProps): JSX.Element {
+  const { children, defaultOpen = false, onOpenChange, open, ...rest } = props;
+  const openState = controllableState({
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+    value: open,
+  });
+  const focusState = state({
+    open: false,
+    returnFocus: null as HTMLElement | null,
+    trigger: null as Element | null,
+  })();
+  const isOpen = openState();
+
+  if (isOpen && !focusState.open && typeof document !== "undefined") {
+    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    focusState.returnFocus =
+      active && active !== document.body
+        ? active
+        : focusState.trigger instanceof HTMLElement
+          ? focusState.trigger
+          : null;
+  }
+  focusState.open = isOpen;
+
+  const restoreFocusSoon = () => {
+    const returnFocus = focusState.returnFocus;
+    if (!returnFocus) {
+      return;
+    }
+
+    queueMicrotask(() => {
+      queueMicrotask(() => {
+        if (returnFocus.isConnected) {
+          returnFocus.focus();
+        }
+      });
+    });
+  };
+
+  return (
+    <CommandPaletteContext
+      value={{
+        close: () => openState.set(false),
+        restoreFocusSoon,
+        setTrigger: (node) => {
+          focusState.trigger = node;
+        },
+      }}
+    >
+      <Dialog {...rest} open={isOpen} onOpenChange={openState.set}>
+        {children}
+      </Dialog>
+    </CommandPaletteContext>
+  );
+}
+
+export function CommandPaletteTrigger(props: CommandPaletteTriggerProps): JSX.Element;
+export function CommandPaletteTrigger(props: CommandPaletteTriggerAsChildProps): JSX.Element;
+export function CommandPaletteTrigger(
+  props: CommandPaletteTriggerProps | CommandPaletteTriggerAsChildProps,
+): JSX.Element {
+  const palette = readCommandPaletteContext();
+  const ref = props.ref
+    ? composeRefs(props.ref as Ref<Element>, palette.setTrigger)
+    : palette.setTrigger;
+
+  if (props.asChild) {
+    return <DialogTrigger {...props} ref={ref} />;
+  }
+
+  return <DialogTrigger {...props} ref={ref as Ref<HTMLButtonElement>} />;
+}
+
+function preventDismiss(event: Event, shouldDismiss: boolean): void {
+  if (!shouldDismiss) {
+    event.preventDefault();
+  }
+}
+
+export function CommandPaletteContent(props: CommandPaletteContentProps): JSX.Element {
+  const palette = readCommandPaletteContext();
+  const {
+    children,
+    class: className,
+    closeOnBackdrop = true,
+    closeOnEscape = true,
+    description,
+    initialFocus = '[data-slot="command-input"]',
+    onEscapeKeyDown,
+    onInteractOutside,
+    onPointerDownOutside,
+    overlayProps,
+    ref,
+    title,
+    ...rest
+  } = props;
+  const focusInitialTarget = (node: HTMLDivElement | null) => {
+    if (!node) {
+      palette.restoreFocusSoon();
+      return;
+    }
+
+    if (initialFocus === false) {
+      return;
+    }
+
+    queueMicrotask(() => {
+      if (!node.isConnected) {
+        return;
+      }
+
+      const target =
+        typeof initialFocus === "function"
+          ? initialFocus()
+          : node.querySelector<HTMLElement>(initialFocus);
+      target?.focus();
+    });
+  };
+  const contentRef = ref
+    ? composeRefs(ref as Ref<HTMLDivElement>, focusInitialTarget)
+    : focusInitialTarget;
+
+  return (
+    <DialogPortal>
+      <DialogOverlay {...overlayProps} data-command-palette-overlay="" />
+      <DialogContent
+        {...rest}
+        class={className}
+        data-command-palette-content=""
+        ref={contentRef}
+        onEscapeKeyDown={(event) => {
+          onEscapeKeyDown?.(event);
+          preventDismiss(event, closeOnEscape);
+        }}
+        onInteractOutside={(event) => {
+          onInteractOutside?.(event);
+          preventDismiss(event, closeOnBackdrop);
+        }}
+        onPointerDownOutside={(event) => {
+          onPointerDownOutside?.(event);
+          preventDismiss(event, closeOnBackdrop);
+        }}
+      >
+        <DialogTitle class="sr-only">{title}</DialogTitle>
+        {description ? <DialogDescription class="sr-only">{description}</DialogDescription> : null}
+        <Command>{children}</Command>
+      </DialogContent>
+    </DialogPortal>
+  );
+}
+
+function composeBeforeNavigate(
+  close: () => void,
+  closeOnSelect: boolean,
+  beforeNavigate: CommandPaletteLinkProps["onBeforeNavigate"],
+  onPress: CommandPaletteLinkProps["onPress"],
+): (event: Event) => void {
+  return (event) => {
+    beforeNavigate?.();
+    if (!event.defaultPrevented) {
+      onPress?.(event);
+    }
+    if (closeOnSelect && !event.defaultPrevented) {
+      close();
+    }
+  };
+}
+
+export function CommandPaletteLink(props: CommandPaletteLinkProps): JSX.Element {
+  const {
+    children,
+    class: className,
+    closeOnSelect = true,
+    onBeforeNavigate,
+    onPress,
+    ...rest
+  } = props;
+  const palette = readCommandPaletteContext();
+  return (
+    <li data-command-palette-result="">
+      <Link
+        {...rest}
+        class={className}
+        data-slot="command-item"
+        onPress={composeBeforeNavigate(palette.close, closeOnSelect, onBeforeNavigate, onPress)}
+      >
+        {children}
+      </Link>
+    </li>
+  );
+}
+
+export function CommandPaletteList(props: CommandPaletteListProps): JSX.Element {
+  const { children, class: className, ...rest } = props;
+  return (
+    <ul {...rest} class={classes(className)} data-slot="command-list">
+      {children}
+    </ul>
+  );
+}

package/src/components/command-palette/command-palette.types.ts

@@ -0,0 +1,40 @@
+import type { LinkProps } from "@askrjs/askr/router";
+import type { JSX } from "@askrjs/askr/jsx-runtime";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+import type {
+  DialogContentProps,
+  DialogOverlayProps,
+  DialogProps,
+  DialogTriggerAsChildProps,
+  DialogTriggerProps,
+} from "@askrjs/ui";
+
+export type CommandPaletteProps = DialogProps;
+export type CommandPaletteTriggerProps = DialogTriggerProps;
+export type CommandPaletteTriggerAsChildProps = DialogTriggerAsChildProps;
+
+export type CommandPaletteContentProps = Omit<
+  DialogContentProps,
+  "children" | "title" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside"
+> & {
+  children?: unknown;
+  title: string;
+  description?: string;
+  initialFocus?: string | (() => HTMLElement | null) | false;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  overlayProps?: DialogOverlayProps;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  onInteractOutside?: (event: Event) => void;
+  onPointerDownOutside?: (event: PointerEvent) => void;
+};
+
+export type CommandPaletteLinkProps = LinkProps & {
+  closeOnSelect?: boolean;
+  onBeforeNavigate?: () => void;
+};
+
+export type CommandPaletteListProps = Omit<JSX.IntrinsicElements["ul"], "children" | "ref"> & {
+  children?: unknown;
+  ref?: Ref<HTMLUListElement>;
+};

package/src/components/command-palette/index.ts

@@ -0,0 +1,15 @@
+export {
+  CommandPalette,
+  CommandPaletteContent,
+  CommandPaletteLink,
+  CommandPaletteList,
+  CommandPaletteTrigger,
+} from "./command-palette";
+export type {
+  CommandPaletteContentProps,
+  CommandPaletteLinkProps,
+  CommandPaletteListProps,
+  CommandPaletteProps,
+  CommandPaletteTriggerAsChildProps,
+  CommandPaletteTriggerProps,
+} from "./command-palette.types";

package/src/components.ts

@@ -197,6 +197,13 @@ export {
   CardTitle,
 } from "./components/card";
 export { Close } from "./components/close";
+export {
+  CommandPalette,
+  CommandPaletteContent,
+  CommandPaletteLink,
+  CommandPaletteList,
+  CommandPaletteTrigger,
+} from "./components/command-palette";
 export { Container } from "./components/container";
 export { EmptyState } from "./components/empty-state";
 export { Field, FieldError, FieldHint } from "./components/field";
@@ -274,6 +281,7 @@ export type * from "./components/block";
 export type * from "./components/button-group";
 export type * from "./components/card";
 export type * from "./components/close";
+export type * from "./components/command-palette";
 export type * from "./components/container";
 export type * from "./components/empty-state";
 export type * from "./components/field";

package/src/entries/command.ts

@@ -11,3 +11,18 @@ export {
   CommandSeparator,
   CommandShortcut,
 } from "../components/catalog";
+export {
+  CommandPalette,
+  CommandPaletteContent,
+  CommandPaletteLink,
+  CommandPaletteList,
+  CommandPaletteTrigger,
+} from "../components/command-palette";
+export type {
+  CommandPaletteContentProps,
+  CommandPaletteLinkProps,
+  CommandPaletteListProps,
+  CommandPaletteProps,
+  CommandPaletteTriggerAsChildProps,
+  CommandPaletteTriggerProps,
+} from "../components/command-palette";

package/src/parity.ts

@@ -15,6 +15,7 @@ export const THEME_COMPONENTS = [
   "Collapsible",
   "Combobox",
   "Command",
+  "CommandPalette",
   "ContextMenu",
   "DataTable",
   "DatePicker",

package/src/themes/default/styles/display/catalog.css

@@ -652,6 +652,44 @@
   box-shadow: var(--ak-shadow-lg);
 }
 
+:where([data-command-palette-content]) {
+  inline-size: min(42rem, calc(100vw - 1rem));
+  max-block-size: min(36rem, calc(100dvh - 1rem));
+  overflow: hidden;
+  padding: 0;
+}
+
+:where([data-command-palette-content] [data-slot="command"]) {
+  min-block-size: 0;
+}
+
+:where([data-command-palette-result] > [data-slot="command-item"]) {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--ak-density-control-height-md);
+  padding: var(--ak-space-sm) var(--ak-space-md);
+  border-radius: var(--ak-radius-md);
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+:where([data-command-palette-content] [data-slot="command-list"]) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where([data-command-palette-result] > [data-slot="command-item"]:hover) {
+  background: var(--ak-color-accent);
+  color: var(--ak-color-accent-ink);
+}
+
+:where([data-command-palette-result] > [data-slot="command-item"]:focus-visible) {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}
+
 :where([data-slot="command-header"]) {
   display: flex;
   align-items: center;