@askrjs/themes 0.0.23 → 0.0.25

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":"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"}

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.js

@@ -5,7 +5,7 @@ import { Block } from "../block/block.js";
 import { assertSafeNavigationHref, resolvePathname } from "../_internal/pathname.js";
 import { jsx } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
-import { Link, currentRoute, navigate } from "@askrjs/askr/router";
+import { Link, currentRoute } from "@askrjs/askr/router";
 //#region src/components/nav/nav.tsx
 const LayoutBlock = Block;
 function normalizePathname(pathname) {
@@ -27,10 +27,6 @@ function isActiveNavLink(currentPathname, targetPathname, match = "prefix") {
 	if (match === "exact") return currentPathname === targetPathname;
 	return currentPathname === targetPathname || currentPathname.startsWith(`${targetPathname}/`);
 }
-function shouldHandleClientNavigation(event, target, targetPathname) {
-	if (targetPathname === null || target) return false;
-	return !event.defaultPrevented && (event.button ?? 0) === 0 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
-}
 function renderNavSet(props, slot) {
 	const className = "class" in props ? props.class : void 0;
 	const { asChild, children, ref, ...rest } = props;
@@ -63,24 +59,24 @@ function renderRoutedLink(props, slot, options = {}) {
 		"aria-current": "page",
 		"data-active": "true"
 	} : { "data-active": void 0 };
-	const rendersRouterLink = targetPathname !== null && !target && !hasDownload && typeof onClick !== "function" && typeof onPress !== "function";
+	const rendersRouterLink = targetPathname !== null && !target && !hasDownload;
 	const childProps = to ? {
 		...childRest,
 		to,
-		target
+		target,
+		onPress,
+		onClick
 	} : {
 		...childRest,
 		href,
-		target
+		target,
+		onPress,
+		onClick
 	};
 	const handleClick = (event) => {
 		onPress?.(event);
 		if (event.defaultPrevented) return;
 		onClick?.(event);
-		if (hasDownload) return;
-		if (!shouldHandleClientNavigation(event, target, targetPathname)) return;
-		event.preventDefault();
-		navigate(href);
 	};
 	return /* @__PURE__ */ jsx(LayoutBlock, {
 		asChild: true,

package/dist/components/nav/nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav.js","names":[],"sources":["../../../src/components/nav/nav.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { Slot } from \"@askrjs/askr/foundations\";\nimport { currentRoute, Link, navigate } from \"@askrjs/askr/router\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport { assertSafeNavigationHref, resolvePathname } from \"../_internal/pathname\";\nimport type {\n  NavItemAsChildProps,\n  NavItemProps,\n  NavLinkProps,\n  PillProps,\n  PillsAsChildProps,\n  PillsProps,\n  TabProps,\n  TabsAsChildProps,\n  TabsProps,\n} from \"./nav.types\";\n\nconst LayoutBlock = Block as (props: Record<string, unknown>) => JSX.Element;\n\nfunction normalizePathname(pathname: string): string {\n  return pathname.endsWith(\"/\") && pathname !== \"/\" ? pathname.slice(0, -1) : pathname;\n}\n\nfunction getCurrentPathname(): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  return normalizePathname(window.location.pathname || \"/\");\n}\n\nfunction getReactiveCurrentPathname(): string | null {\n  try {\n    return normalizePathname(currentRoute().path || \"/\");\n  } catch {\n    return getCurrentPathname();\n  }\n}\n\nfunction isActiveNavLink(\n  currentPathname: string,\n  targetPathname: string,\n  match: NavLinkProps[\"match\"] = \"prefix\",\n): boolean {\n  if (targetPathname === \"/\") {\n    return currentPathname === \"/\";\n  }\n\n  if (match === \"exact\") {\n    return currentPathname === targetPathname;\n  }\n\n  return currentPathname === targetPathname || currentPathname.startsWith(`${targetPathname}/`);\n}\n\nfunction shouldHandleClientNavigation(\n  event: MouseEvent,\n  target: string | undefined,\n  targetPathname: string | null,\n): boolean {\n  if (targetPathname === null || target) {\n    return false;\n  }\n\n  return (\n    !event.defaultPrevented &&\n    (event.button ?? 0) === 0 &&\n    !event.altKey &&\n    !event.ctrlKey &&\n    !event.metaKey &&\n    !event.shiftKey\n  );\n}\n\nfunction renderNavSet(\n  props: TabsProps | TabsAsChildProps | PillsProps | PillsAsChildProps,\n  slot: \"tabs\" | \"pills\",\n): JSX.Element {\n  const className = \"class\" in props ? props.class : undefined;\n  const { asChild, children, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(slot, className),\n    \"data-slot\": slot,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n  }\n\n  return intrinsicElement(\"nav\", finalProps, children);\n}\n\nfunction renderRoutedLink(\n  props: NavLinkProps | TabProps | PillProps,\n  slot: \"nav-item\" | \"tab\" | \"pill\",\n  options: { activeBackground?: boolean; className?: string; inheritSlot?: boolean } = {},\n): JSX.Element {\n  const {\n    active,\n    children,\n    href: suppliedHref,\n    to,\n    onPress,\n    onClick,\n    ref,\n    class: className,\n    match = \"prefix\",\n    target,\n    ...rest\n  } = props as NavLinkProps & {\n    onPress?: (event: Event) => void;\n    onClick?: (event: MouseEvent) => void;\n  };\n  const href = to?.href ?? suppliedHref;\n  if (!href) {\n    throw new Error(\"Nav link requires href or to.\");\n  }\n  assertSafeNavigationHref(href);\n  const inheritedSlot =\n    options.inheritSlot && typeof (rest as Record<string, unknown>)[\"data-slot\"] === \"string\"\n      ? String((rest as Record<string, unknown>)[\"data-slot\"])\n      : undefined;\n  const resolvedSlot = (inheritedSlot ?? slot) as \"nav-item\" | \"tab\" | \"pill\";\n  const inheritedNavClass =\n    slot === \"nav-item\" && resolvedSlot !== \"nav-item\" ? \"nav-item\" : undefined;\n  const { \"data-slot\": _dataSlot, ...childRest } = rest as Record<string, unknown>;\n  void _dataSlot;\n  const hasDownload = (rest as Record<string, unknown>).download !== undefined;\n  const currentPathname = getReactiveCurrentPathname();\n  const targetPathname = resolvePathname(href);\n  const routeActive =\n    currentPathname !== null &&\n    targetPathname !== null &&\n    isActiveNavLink(currentPathname, targetPathname, match);\n  const isActive = active ?? routeActive;\n  const activeProps = isActive\n    ? {\n        \"aria-current\": \"page\" as const,\n        \"data-active\": \"true\" as const,\n      }\n    : {\n        \"data-active\": undefined,\n      };\n  const rendersRouterLink =\n    targetPathname !== null &&\n    !target &&\n    !hasDownload &&\n    typeof onClick !== \"function\" &&\n    typeof onPress !== \"function\";\n  const childProps: NavLinkProps = to\n    ? ({ ...childRest, to, target } as NavLinkProps)\n    : ({ ...childRest, href, target } as NavLinkProps);\n  const handleClick = (event: MouseEvent) => {\n    onPress?.(event);\n    if (event.defaultPrevented) return;\n    onClick?.(event);\n    if (hasDownload) return;\n\n    if (!shouldHandleClientNavigation(event, target, targetPathname)) {\n      return;\n    }\n\n    event.preventDefault();\n    navigate(href);\n  };\n\n  return (\n    <LayoutBlock\n      asChild\n      paddingX=\"sm\"\n      paddingY=\"xs\"\n      radius={resolvedSlot === \"pill\" ? \"round\" : \"md\"}\n      background={isActive && options.activeBackground ? \"selected\" : undefined}\n      ref={ref}\n      className={classes(options.className, inheritedNavClass, className)}\n      data-slot={resolvedSlot}\n      {...activeProps}\n    >\n      {rendersRouterLink ? (\n        <Link {...childProps}>{children}</Link>\n      ) : (\n        <a {...childRest} href={href} target={target} onClick={handleClick}>\n          {children}\n        </a>\n      )}\n    </LayoutBlock>\n  );\n}\n\nexport function Tabs(props: TabsProps): JSX.Element;\nexport function Tabs(props: TabsAsChildProps): JSX.Element;\nexport function Tabs(props: TabsProps | TabsAsChildProps): JSX.Element {\n  return renderNavSet(props, \"tabs\");\n}\n\nexport function Pills(props: PillsProps): JSX.Element;\nexport function Pills(props: PillsAsChildProps): JSX.Element;\nexport function Pills(props: PillsProps | PillsAsChildProps): JSX.Element {\n  return renderNavSet(props, \"pills\");\n}\n\nexport function Tab(props: TabProps): JSX.Element {\n  return renderRoutedLink(props, \"tab\", { className: \"tab\" });\n}\n\nexport function Pill(props: PillProps): JSX.Element {\n  return renderRoutedLink(props, \"pill\", { activeBackground: true, className: \"pill\" });\n}\n\nexport function NavItem(props: NavItemProps): JSX.Element;\nexport function NavItem(props: NavItemAsChildProps): JSX.Element;\nexport function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element {\n  const {\n    asChild,\n    active = false,\n    children,\n    ref,\n    class: className,\n    match: _match,\n    ...rest\n  } = props as (NavItemProps | NavItemAsChildProps) & { match?: unknown };\n  void _match;\n\n  if (asChild) {\n    return (\n      <LayoutBlock\n        asChild\n        paddingX=\"sm\"\n        paddingY=\"xs\"\n        radius=\"md\"\n        background={active ? \"selected\" : undefined}\n        {...rest}\n        ref={ref}\n        className={className}\n        data-active={active ? \"true\" : undefined}\n        data-slot=\"nav-item\"\n      >\n        {children}\n      </LayoutBlock>\n    );\n  }\n\n  return (\n    <LayoutBlock\n      as=\"a\"\n      paddingX=\"sm\"\n      paddingY=\"xs\"\n      radius=\"md\"\n      background={active ? \"selected\" : undefined}\n      {...rest}\n      ref={ref}\n      className={className}\n      data-active={active ? \"true\" : undefined}\n      data-slot=\"nav-item\"\n    >\n      {children}\n    </LayoutBlock>\n  );\n}\n\nexport function NavLink(props: NavLinkProps): JSX.Element {\n  return renderRoutedLink(props, \"nav-item\", { activeBackground: true, inheritSlot: true });\n}\n"],"mappings":"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"}
+{"version":3,"file":"nav.js","names":[],"sources":["../../../src/components/nav/nav.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { Slot } from \"@askrjs/askr/foundations\";\nimport { currentRoute, Link } from \"@askrjs/askr/router\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { intrinsicElement } from \"../_internal/jsx\";\nimport { assertSafeNavigationHref, resolvePathname } from \"../_internal/pathname\";\nimport type {\n  NavItemAsChildProps,\n  NavItemProps,\n  NavLinkProps,\n  PillProps,\n  PillsAsChildProps,\n  PillsProps,\n  TabProps,\n  TabsAsChildProps,\n  TabsProps,\n} from \"./nav.types\";\n\nconst LayoutBlock = Block as (props: Record<string, unknown>) => JSX.Element;\n\nfunction normalizePathname(pathname: string): string {\n  return pathname.endsWith(\"/\") && pathname !== \"/\" ? pathname.slice(0, -1) : pathname;\n}\n\nfunction getCurrentPathname(): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  return normalizePathname(window.location.pathname || \"/\");\n}\n\nfunction getReactiveCurrentPathname(): string | null {\n  try {\n    return normalizePathname(currentRoute().path || \"/\");\n  } catch {\n    return getCurrentPathname();\n  }\n}\n\nfunction isActiveNavLink(\n  currentPathname: string,\n  targetPathname: string,\n  match: NavLinkProps[\"match\"] = \"prefix\",\n): boolean {\n  if (targetPathname === \"/\") {\n    return currentPathname === \"/\";\n  }\n\n  if (match === \"exact\") {\n    return currentPathname === targetPathname;\n  }\n\n  return currentPathname === targetPathname || currentPathname.startsWith(`${targetPathname}/`);\n}\n\nfunction renderNavSet(\n  props: TabsProps | TabsAsChildProps | PillsProps | PillsAsChildProps,\n  slot: \"tabs\" | \"pills\",\n): JSX.Element {\n  const className = \"class\" in props ? props.class : undefined;\n  const { asChild, children, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(slot, className),\n    \"data-slot\": slot,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n  }\n\n  return intrinsicElement(\"nav\", finalProps, children);\n}\n\nfunction renderRoutedLink(\n  props: NavLinkProps | TabProps | PillProps,\n  slot: \"nav-item\" | \"tab\" | \"pill\",\n  options: { activeBackground?: boolean; className?: string; inheritSlot?: boolean } = {},\n): JSX.Element {\n  const {\n    active,\n    children,\n    href: suppliedHref,\n    to,\n    onPress,\n    onClick,\n    ref,\n    class: className,\n    match = \"prefix\",\n    target,\n    ...rest\n  } = props as NavLinkProps & {\n    onPress?: (event: Event) => void;\n    onClick?: (event: MouseEvent) => void;\n  };\n  const href = to?.href ?? suppliedHref;\n  if (!href) {\n    throw new Error(\"Nav link requires href or to.\");\n  }\n  assertSafeNavigationHref(href);\n  const inheritedSlot =\n    options.inheritSlot && typeof (rest as Record<string, unknown>)[\"data-slot\"] === \"string\"\n      ? String((rest as Record<string, unknown>)[\"data-slot\"])\n      : undefined;\n  const resolvedSlot = (inheritedSlot ?? slot) as \"nav-item\" | \"tab\" | \"pill\";\n  const inheritedNavClass =\n    slot === \"nav-item\" && resolvedSlot !== \"nav-item\" ? \"nav-item\" : undefined;\n  const { \"data-slot\": _dataSlot, ...childRest } = rest as Record<string, unknown>;\n  void _dataSlot;\n  const hasDownload = (rest as Record<string, unknown>).download !== undefined;\n  const currentPathname = getReactiveCurrentPathname();\n  const targetPathname = resolvePathname(href);\n  const routeActive =\n    currentPathname !== null &&\n    targetPathname !== null &&\n    isActiveNavLink(currentPathname, targetPathname, match);\n  const isActive = active ?? routeActive;\n  const activeProps = isActive\n    ? {\n        \"aria-current\": \"page\" as const,\n        \"data-active\": \"true\" as const,\n      }\n    : {\n        \"data-active\": undefined,\n      };\n  const rendersRouterLink = targetPathname !== null && !target && !hasDownload;\n  const childProps: NavLinkProps = to\n    ? ({ ...childRest, to, target, onPress, onClick } as NavLinkProps)\n    : ({ ...childRest, href, target, onPress, onClick } as NavLinkProps);\n  const handleClick = (event: MouseEvent) => {\n    onPress?.(event);\n    if (event.defaultPrevented) return;\n    onClick?.(event);\n  };\n\n  return (\n    <LayoutBlock\n      asChild\n      paddingX=\"sm\"\n      paddingY=\"xs\"\n      radius={resolvedSlot === \"pill\" ? \"round\" : \"md\"}\n      background={isActive && options.activeBackground ? \"selected\" : undefined}\n      ref={ref}\n      className={classes(options.className, inheritedNavClass, className)}\n      data-slot={resolvedSlot}\n      {...activeProps}\n    >\n      {rendersRouterLink ? (\n        <Link {...childProps}>{children}</Link>\n      ) : (\n        <a {...childRest} href={href} target={target} onClick={handleClick}>\n          {children}\n        </a>\n      )}\n    </LayoutBlock>\n  );\n}\n\nexport function Tabs(props: TabsProps): JSX.Element;\nexport function Tabs(props: TabsAsChildProps): JSX.Element;\nexport function Tabs(props: TabsProps | TabsAsChildProps): JSX.Element {\n  return renderNavSet(props, \"tabs\");\n}\n\nexport function Pills(props: PillsProps): JSX.Element;\nexport function Pills(props: PillsAsChildProps): JSX.Element;\nexport function Pills(props: PillsProps | PillsAsChildProps): JSX.Element {\n  return renderNavSet(props, \"pills\");\n}\n\nexport function Tab(props: TabProps): JSX.Element {\n  return renderRoutedLink(props, \"tab\", { className: \"tab\" });\n}\n\nexport function Pill(props: PillProps): JSX.Element {\n  return renderRoutedLink(props, \"pill\", { activeBackground: true, className: \"pill\" });\n}\n\nexport function NavItem(props: NavItemProps): JSX.Element;\nexport function NavItem(props: NavItemAsChildProps): JSX.Element;\nexport function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element {\n  const {\n    asChild,\n    active = false,\n    children,\n    ref,\n    class: className,\n    match: _match,\n    ...rest\n  } = props as (NavItemProps | NavItemAsChildProps) & { match?: unknown };\n  void _match;\n\n  if (asChild) {\n    return (\n      <LayoutBlock\n        asChild\n        paddingX=\"sm\"\n        paddingY=\"xs\"\n        radius=\"md\"\n        background={active ? \"selected\" : undefined}\n        {...rest}\n        ref={ref}\n        className={className}\n        data-active={active ? \"true\" : undefined}\n        data-slot=\"nav-item\"\n      >\n        {children}\n      </LayoutBlock>\n    );\n  }\n\n  return (\n    <LayoutBlock\n      as=\"a\"\n      paddingX=\"sm\"\n      paddingY=\"xs\"\n      radius=\"md\"\n      background={active ? \"selected\" : undefined}\n      {...rest}\n      ref={ref}\n      className={className}\n      data-active={active ? \"true\" : undefined}\n      data-slot=\"nav-item\"\n    >\n      {children}\n    </LayoutBlock>\n  );\n}\n\nexport function NavLink(props: NavLinkProps): JSX.Element {\n  return renderRoutedLink(props, \"nav-item\", { activeBackground: true, inheritSlot: true });\n}\n"],"mappings":"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"}

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.25",
   "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/nav/nav.tsx

@@ -1,6 +1,6 @@
 import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
-import { currentRoute, Link, navigate } from "@askrjs/askr/router";
+import { currentRoute, Link } from "@askrjs/askr/router";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
@@ -56,25 +56,6 @@ function isActiveNavLink(
   return currentPathname === targetPathname || currentPathname.startsWith(`${targetPathname}/`);
 }
 
-function shouldHandleClientNavigation(
-  event: MouseEvent,
-  target: string | undefined,
-  targetPathname: string | null,
-): boolean {
-  if (targetPathname === null || target) {
-    return false;
-  }
-
-  return (
-    !event.defaultPrevented &&
-    (event.button ?? 0) === 0 &&
-    !event.altKey &&
-    !event.ctrlKey &&
-    !event.metaKey &&
-    !event.shiftKey
-  );
-}
-
 function renderNavSet(
   props: TabsProps | TabsAsChildProps | PillsProps | PillsAsChildProps,
   slot: "tabs" | "pills",
@@ -145,27 +126,14 @@ function renderRoutedLink(
     : {
         "data-active": undefined,
       };
-  const rendersRouterLink =
-    targetPathname !== null &&
-    !target &&
-    !hasDownload &&
-    typeof onClick !== "function" &&
-    typeof onPress !== "function";
+  const rendersRouterLink = targetPathname !== null && !target && !hasDownload;
   const childProps: NavLinkProps = to
-    ? ({ ...childRest, to, target } as NavLinkProps)
-    : ({ ...childRest, href, target } as NavLinkProps);
+    ? ({ ...childRest, to, target, onPress, onClick } as NavLinkProps)
+    : ({ ...childRest, href, target, onPress, onClick } as NavLinkProps);
   const handleClick = (event: MouseEvent) => {
     onPress?.(event);
     if (event.defaultPrevented) return;
     onClick?.(event);
-    if (hasDownload) return;
-
-    if (!shouldHandleClientNavigation(event, target, targetPathname)) {
-      return;
-    }
-
-    event.preventDefault();
-    navigate(href);
   };
 
   return (

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;