@ratio-ui/core 0.1.1 → 0.3.0

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,116 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+// src/components/dropdown-menu/DropdownMenu.tsx
+/** The root of a menu of actions that opens from a trigger. Compose it with DropdownMenuTrigger and DropdownMenuContent. */
+function DropdownMenu(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+}
+/** The control that opens the menu. It is a button, and carries aria-expanded and aria-haspopup. */
+function DropdownMenuTrigger(props) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, { ...props });
+}
+const POPUP = "rt:z-50 rt:max-h-80 rt:min-w-40 rt:overflow-y-auto rt:rounded-lg rt:bg-popover rt:py-1.5 rt:text-popover-foreground rt:shadow-ring-strong rt:forced-outline rt:outline-none";
+/** The menu panel: a white popup with a hairline ring, 8px corners and no shadow. It opens in a portal. */
+function DropdownMenuContent({ side = "bottom", align = "start", sideOffset = 4, alignOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "rt:isolate rt:z-50 rt:outline-none",
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			className: POPUP,
+			...props
+		})
+	}) });
+}
+/** Groups items under one DropdownMenuLabel, so assistive technology announces the label with the group. */
+function DropdownMenuGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.Group, { ...props });
+}
+/** The caption of a group, in the design system's label style: 12px, uppercase, subdued. Place it inside DropdownMenuGroup. */
+function DropdownMenuLabel(props) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		className: "rt:px-3 rt:py-1 rt:text-label rt:uppercase rt:text-foreground-subdued",
+		...props
+	});
+}
+const ROW = "rt:relative rt:flex rt:h-7 rt:cursor-default rt:items-center rt:gap-2 rt:px-3 rt:text-b3 rt:text-foreground rt:outline-none rt:select-none rt:transition-colors rt:data-highlighted:bg-accent rt:data-highlighted:text-accent-foreground rt:data-disabled:pointer-events-none rt:data-disabled:opacity-50";
+/** One action in the menu. It runs onClick and closes the menu; disabled is drawn at half opacity and cannot be chosen. */
+function DropdownMenuItem({ variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-variant": variant,
+		className: cn(ROW, variant === "destructive" && "rt:text-destructive-foreground rt:data-highlighted:bg-destructive-hover rt:data-highlighted:text-destructive-foreground"),
+		...props
+	});
+}
+/** A key hint pushed to the end of an item. It is a hint only: the host binds the key. */
+function DropdownMenuShortcut({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "rt:ml-auto rt:text-c1 rt:text-foreground-subdued",
+		children
+	});
+}
+/** A hairline between groups of items. */
+function DropdownMenuSeparator(props) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		className: "rt:my-1.5 rt:h-px rt:bg-divider",
+		...props
+	});
+}
+/** The root of a nested menu. Hold a DropdownMenuSubTrigger and a DropdownMenuSubContent. */
+function DropdownMenuSub(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+}
+/** The item that opens a submenu, on hover, click or ArrowRight. A chevron at its end marks it. */
+function DropdownMenuSubTrigger({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		className: cn(ROW, "rt:data-popup-open:bg-accent"),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "rt:ml-auto rt:flex",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "chevron-right",
+				size: 8
+			})
+		})]
+	});
+}
+/** The panel of a submenu. It opens to the side of its trigger. */
+function DropdownMenuSubContent({ side = "right", alignOffset = -6, sideOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		side,
+		alignOffset,
+		sideOffset,
+		...props
+	});
+}
+/** An item that toggles an option. A check shows at its start while it is on and keeps the menu open, so several options can be changed in one visit. */
+function DropdownMenuCheckboxItem({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		className: cn(ROW, "rt:pl-8"),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "rt:absolute rt:left-3 rt:flex",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(Icon, { name: "check" }) })
+		}), children]
+	});
+}
+/** Holds radio items and the one chosen value. */
+function DropdownMenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, { ...props });
+}
+/** One choice of a DropdownMenuRadioGroup. A dot shows at its start while it is the chosen value. */
+function DropdownMenuRadioItem({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		className: cn(ROW, "rt:pl-8"),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "rt:absolute rt:left-3 rt:flex",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "rt:block rt:size-1.5 rt:rounded-3xl rt:bg-current" }) })
+		}), children]
+	});
+}
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/dropdown-menu/index.d.ts

@@ -0,0 +1,2 @@
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuShortcut, DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTrigger, DropdownMenuSubTriggerProps, DropdownMenuTrigger, DropdownMenuTriggerProps } from "./DropdownMenu.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps };

package/dist/components/dropdown-menu/index.js

@@ -0,0 +1 @@
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./DropdownMenu.js";

package/dist/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, JSX, ReactNode } from "react";
+/** The props of EmptyState: the HTML attributes of its div, except className, style, children and title. */
+export type EmptyStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'title'> & {
+  /** One clause that says why nothing is shown, in sentence case with no period. */
+  title: ReactNode;
+  /** An optional second clause that says what to do next. */
+  description?: ReactNode;
+  /** An optional action, usually one Button. */
+  action?: ReactNode;
+};
+/**
+ * What a list, table or panel shows when it has nothing to show: one clause and an optional action, centred in a
+ * hairline container.
+ */
+export declare function EmptyState({ title, description, action, ...rest }: EmptyStateProps): JSX.Element;

package/dist/components/empty-state/EmptyState.js

@@ -0,0 +1,30 @@
+import { Text } from "../text/Text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/empty-state/EmptyState.tsx
+/**
+* What a list, table or panel shows when it has nothing to show: one clause and an optional action, centred in a
+* hairline container.
+*/
+function EmptyState({ title, description, action, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "empty-state",
+		...rest,
+		className: "rt:flex rt:w-full rt:min-w-0 rt:flex-col rt:items-center rt:justify-center rt:gap-6 rt:rounded-lg rt:border rt:border-border rt:bg-background rt:p-6 rt:text-center",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "rt:flex rt:flex-col rt:items-center rt:gap-1",
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "p",
+				variant: "b4",
+				children: title
+			}), description ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				tone: "subdued",
+				children: description
+			}) : null]
+		}), action ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "empty-state-action",
+			children: action
+		}) : null]
+	});
+}
+export { EmptyState };

package/dist/components/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+import { EmptyState, EmptyStateProps } from "./EmptyState.js";
+export { EmptyState, type EmptyStateProps };

package/dist/components/empty-state/index.js

@@ -0,0 +1 @@
+export { EmptyState } from "./EmptyState.js";

package/dist/components/field/Field.d.ts

@@ -0,0 +1,35 @@
+import { JSX, ReactElement, ReactNode } from "react";
+/** The props of Field. */
+export type FieldProps = {
+  /** The label text. */
+  label: ReactNode;
+  /** Help text under the control. An error replaces it. */
+  hint?: ReactNode;
+  /** The error message. It shows under the control beside the alert glyph and marks the control invalid. */
+  error?: ReactNode;
+  /** An explanation of the field, opened from a small info icon beside the label by keyboard, touch or hover. */
+  info?: ReactNode;
+  /** Shows a star after the label and marks the control aria-required. */
+  required?: boolean;
+  /** Dims the label and disables the control. */
+  disabled?: boolean;
+  /**
+   * The control: one element, such as Input, which gets an id, aria-describedby, aria-invalid, aria-required and disabled.
+   * When the control sits inside a wrapper such as InputGroup, pass a function instead and spread the props it receives
+   * onto the input itself.
+   */
+  children: ReactElement<Record<string, unknown>> | ((props: FieldControlProps) => ReactNode);
+};
+/** The props Field hands to a function child, to spread onto the control. */
+export type FieldControlProps = {
+  id: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: true;
+  'aria-required'?: true;
+  disabled?: true;
+};
+/**
+ * A form row: label, control, hint and error. It wires the label to the control by id, links the hint and error with
+ * aria-describedby, and sets aria-invalid when there is an error. The control keeps an id it already has.
+ */
+export declare function Field({ label, hint, error, info, required, disabled, children }: FieldProps): JSX.Element;

package/dist/components/field/Field.js

@@ -0,0 +1,67 @@
+import { Icon } from "../icon/Icon.js";
+import { Definition } from "../definition/Definition.js";
+import { Label } from "./Label.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, useId } from "react";
+// src/components/field/Field.tsx
+/**
+* A form row: label, control, hint and error. It wires the label to the control by id, links the hint and error with
+* aria-describedby, and sets aria-invalid when there is an error. The control keeps an id it already has.
+*/
+function Field({ label, hint, error, info, required, disabled, children }) {
+	const generatedId = useId();
+	const own = typeof children === "function" ? void 0 : children.props.id;
+	const id = typeof own === "string" && own !== "" ? own : generatedId;
+	const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+	const hasHint = !hasError && hint !== void 0 && hint !== null && hint !== false && hint !== "";
+	const messageId = `${id}-message`;
+	const described = [typeof children === "function" ? void 0 : children.props["aria-describedby"], hasError || hasHint ? messageId : void 0].filter((part) => typeof part === "string" && part !== "").join(" ");
+	const wiring = {
+		id,
+		...described === "" ? {} : { "aria-describedby": described },
+		...hasError ? { "aria-invalid": true } : {},
+		...required === true ? { "aria-required": true } : {},
+		...disabled === true ? { disabled: true } : {}
+	};
+	const control = typeof children === "function" ? children(wiring) : cloneElement(children, { ...wiring });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field",
+		className: "rt:flex rt:w-full rt:flex-col rt:gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: `rt:flex rt:items-center rt:gap-1.5${disabled === true ? " rt:opacity-50" : ""}`,
+				children: [/* @__PURE__ */ jsxs(Label, {
+					htmlFor: id,
+					children: [label, required === true ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "rt:text-foreground-subdued",
+						children: "*"
+					}) : null]
+				}), info === void 0 || info === null || info === false || info === "" ? null : /* @__PURE__ */ jsx(Definition, {
+					definition: info,
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "info-circle",
+						tone: "subdued",
+						label: "More information"
+					})
+				})]
+			}),
+			control,
+			hasError ? /* @__PURE__ */ jsxs("p", {
+				id: messageId,
+				role: "alert",
+				className: "rt:flex rt:items-start rt:gap-1.5 rt:text-b1 rt:text-error",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "rt:mt-1 rt:text-error-icon",
+					children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle" })
+				}), /* @__PURE__ */ jsx("span", { children: error })]
+			}) : null,
+			hasHint ? /* @__PURE__ */ jsx("p", {
+				id: messageId,
+				className: "rt:text-b1 rt:text-foreground-subdued",
+				children: hint
+			}) : null
+		]
+	});
+}
+export { Field };

package/dist/components/field/Label.d.ts

@@ -0,0 +1,8 @@
+import { JSX, LabelHTMLAttributes, Ref } from "react";
+/** The props of Label: the HTML attributes of a label, except className and style. */
+export type LabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> & {
+  /** Receives the label element. */
+  ref?: Ref<HTMLLabelElement>;
+};
+/** The text that names a control, in the 12px medium label type. Point htmlFor at the control's id; Field does this for you. */
+export declare function Label({ htmlFor, ref, ...rest }: LabelProps): JSX.Element;

package/dist/components/field/Label.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+// src/components/field/Label.tsx
+/** The text that names a control, in the 12px medium label type. Point htmlFor at the control's id; Field does this for you. */
+function Label({ htmlFor, ref, ...rest }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		htmlFor,
+		ref,
+		className: "rt:flex rt:w-fit rt:items-center rt:gap-1 rt:text-b2 rt:text-foreground rt:select-none",
+		...rest
+	});
+}
+export { Label };

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

@@ -0,0 +1,3 @@
+import { Field, FieldControlProps, FieldProps } from "./Field.js";
+import { Label, LabelProps } from "./Label.js";
+export { Field, type FieldControlProps, type FieldProps, Label, type LabelProps };

package/dist/components/field/index.js

@@ -0,0 +1,3 @@
+import { Label } from "./Label.js";
+import { Field } from "./Field.js";
+export { Field, Label };

package/dist/components/filter-tabs/FilterTabs.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps, JSX } from "react";
+/** One choice of FilterTabs. */
+export type FilterTabsItem = {
+  /** The value reported when the item is chosen. Unique in the list. */
+  value: string;
+  /** The text of the chip, one or two words in sentence case. */
+  label: string;
+  /** Stops the item being chosen and dims it to 50%. Defaults to false. */
+  disabled?: boolean;
+};
+/** The props of FilterTabs. */
+export type FilterTabsProps = Omit<ComponentProps<'div'>, 'className' | 'style' | 'children' | 'defaultValue' | 'onChange'> & {
+  /** The choices, in order. */
+  items: FilterTabsItem[];
+  /** The chosen value when controlled. */
+  value?: string;
+  /** The chosen value at the start when uncontrolled. Defaults to the first item. */
+  defaultValue?: string;
+  /** Called with the new value when another item is chosen. Choosing the chosen item again does nothing. */
+  onValueChange?: (value: string) => void;
+  /** Disables every item. Defaults to false. */
+  disabled?: boolean;
+};
+/**
+ * A single choice that filters a list, such as All, Active and Inactive above a table: the design system's Tab chips in a
+ * row with an 8px gap. One item is always chosen. For sections of a page use Tabs instead.
+ */
+export declare function FilterTabs({ items, value, defaultValue, onValueChange, disabled, ...rest }: FilterTabsProps): JSX.Element;

package/dist/components/filter-tabs/FilterTabs.js

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+// src/components/filter-tabs/FilterTabs.tsx
+/**
+* A single choice that filters a list, such as All, Active and Inactive above a table: the design system's Tab chips in a
+* row with an 8px gap. One item is always chosen. For sections of a page use Tabs instead.
+*/
+function FilterTabs({ items, value, defaultValue, onValueChange, disabled, ...rest }) {
+	const [inner, setInner] = useState(defaultValue ?? items[0]?.value);
+	const wanted = value ?? inner;
+	const chosen = items.some((item) => item.value === wanted) ? wanted : items[0]?.value;
+	const handle = (next) => {
+		const picked = next[0];
+		if (picked === void 0) return;
+		setInner(picked);
+		onValueChange?.(picked);
+	};
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		"data-slot": "filter-tabs",
+		className: cn("rt:flex rt:flex-wrap rt:items-center rt:gap-2"),
+		disabled,
+		value: chosen === void 0 ? [] : [chosen],
+		onValueChange: handle,
+		...rest,
+		children: items.map((item) => /* @__PURE__ */ jsx(Toggle, {
+			value: item.value,
+			disabled: item.disabled,
+			"data-slot": "filter-tabs-item",
+			className: cn("rt:inline-flex rt:h-9 rt:cursor-pointer rt:items-center rt:justify-center rt:rounded-lg rt:whitespace-nowrap", "rt:bg-background rt:text-b3 rt:transition-colors rt:forced-outline", "rt:border rt:border-border rt:px-3 rt:text-tab-inactive rt:hover:bg-primary-tint", "rt:data-pressed:border-0 rt:data-pressed:px-2.75 rt:data-pressed:font-semibold rt:data-pressed:text-primary", "rt:data-pressed:shadow-ring-accent-hairline", "rt:focus-visible:focus-ring rt:data-disabled:cursor-default rt:data-disabled:opacity-50"),
+			children: item.label
+		}, item.value))
+	});
+}
+export { FilterTabs };

package/dist/components/filter-tabs/index.d.ts

@@ -0,0 +1,2 @@
+import { FilterTabs, FilterTabsItem, FilterTabsProps } from "./FilterTabs.js";
+export { FilterTabs, type FilterTabsItem, type FilterTabsProps };

package/dist/components/filter-tabs/index.js

@@ -0,0 +1 @@
+export { FilterTabs } from "./FilterTabs.js";

package/dist/components/global-search/GlobalSearch.d.ts

@@ -0,0 +1,51 @@
+import { IconName } from "../icon/registry.js";
+import "../icon/index.js";
+import { JSX } from "react";
+/** One result row: what it is called, a line of detail and an optional icon. */
+export interface GlobalSearchResult {
+  /** A stable id, unique across all groups. */
+  id: string;
+  /** The name shown on the row. */
+  label: string;
+  /** A second line of detail, such as a SKU or an order status. */
+  description?: string;
+  /** An icon drawn before the label. */
+  icon?: IconName;
+}
+/** A group of results, such as Products or Orders. The app fills it. */
+export interface GlobalSearchGroup {
+  /** A stable id for the group. */
+  id: string;
+  /** The heading of the group. */
+  label: string;
+  /** The results to show, already limited by the app. */
+  items: GlobalSearchResult[];
+  /** How many results exist in all. When it is above items.length, a "+N more" row follows the items. */
+  total?: number;
+}
+/** The props of GlobalSearch. */
+export interface GlobalSearchProps {
+  /** The accessible name of the field, such as "Search the dashboard". */
+  label: string;
+  /** The text typed in the field. */
+  value: string;
+  /** Called on every change of the text. Debounce and fetch in the app. */
+  onValueChange: (value: string) => void;
+  /** The results for the current text, grouped. The app supplies them; nothing is filtered here. */
+  groups: GlobalSearchGroup[];
+  /** Recent items, shown under "Recent" while the field is empty. */
+  recent?: GlobalSearchResult[];
+  /** Called when a result is chosen by click or Enter. */
+  onSelect?: (result: GlobalSearchResult) => void;
+  /** Called when a "+N more" row is chosen, with its group. */
+  onShowMore?: (group: GlobalSearchGroup) => void;
+  /** The placeholder of the field. Defaults to "Search". */
+  placeholder?: string;
+  /** The copy when the text matches nothing. Defaults to "No results". */
+  emptyText?: string;
+}
+/**
+ * The search in the top bar. Typing opens a panel of grouped results that the app supplies, an empty field shows recent
+ * items, and the arrow keys, Enter and Escape work the list. Cmd+K or Ctrl+K focuses the field from anywhere.
+ */
+export declare function GlobalSearch({ label, value, onValueChange, groups, recent, onSelect, onShowMore, placeholder, emptyText }: GlobalSearchProps): JSX.Element;

package/dist/components/global-search/GlobalSearch.js

@@ -0,0 +1,144 @@
+import { Icon } from "../icon/Icon.js";
+import { formatCount } from "../../lib/format.js";
+import { InputGroup, InputGroupAddon, InputGroupShortcut } from "../input-group/InputGroup.js";
+import { Kbd, KbdGroup } from "../kbd/Kbd.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+// src/components/global-search/GlobalSearch.tsx
+/**
+* The search in the top bar. Typing opens a panel of grouped results that the app supplies, an empty field shows recent
+* items, and the arrow keys, Enter and Escape work the list. Cmd+K or Ctrl+K focuses the field from anywhere.
+*/
+function GlobalSearch({ label, value, onValueChange, groups, recent = [], onSelect, onShowMore, placeholder = "Search", emptyText = "No results" }) {
+	const [open, setOpen] = useState(false);
+	const inputRef = useRef(null);
+	useEffect(() => {
+		const onKey = (event) => {
+			if (!event.defaultPrevented && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+				event.preventDefault();
+				inputRef.current?.focus();
+				setOpen(true);
+			}
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, []);
+	const typed = value !== "";
+	const rows = typed ? groups.filter((group) => group.items.length > 0).map((group) => ({
+		id: group.id,
+		label: group.label,
+		items: group.total !== void 0 && group.total > group.items.length ? [...group.items, {
+			id: `${group.id}:more`,
+			label: `+${group.total - group.items.length} more`,
+			more: group
+		}] : group.items
+	})) : recent.length > 0 ? [{
+		id: "recent",
+		label: "Recent",
+		items: recent
+	}] : [];
+	const showEmpty = typed && rows.length === 0;
+	const found = typed ? groups.reduce((sum, group) => sum + (group.items.length > 0 ? Math.max(group.total ?? 0, group.items.length) : 0), 0) : 0;
+	const status = found > 0 ? `${formatCount(found)} ${found === 1 ? "result" : "results"}` : "";
+	const showPanel = open && (rows.length > 0 || showEmpty);
+	const choose = (row) => {
+		setOpen(false);
+		if (row.more !== void 0) onShowMore?.(row.more);
+		else onSelect?.(row);
+	};
+	return /* @__PURE__ */ jsxs(Autocomplete.Root, {
+		items: rows,
+		filter: null,
+		value,
+		onValueChange,
+		open: showPanel,
+		onOpenChange: setOpen,
+		itemToStringValue: (item) => item.more === void 0 ? item.label : value,
+		children: [/* @__PURE__ */ jsxs(InputGroup, { children: [
+			/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Icon, {
+				name: "search",
+				tone: "icon"
+			}) }),
+			/* @__PURE__ */ jsx(Autocomplete.Input, {
+				ref: inputRef,
+				"aria-label": label,
+				placeholder,
+				autoComplete: "off",
+				onFocus: () => setOpen(true),
+				className: "rt:h-full rt:min-w-0 rt:flex-1 rt:bg-transparent rt:text-b3 rt:text-foreground rt:placeholder:text-muted-foreground rt:outline-none"
+			}),
+			/* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "end",
+				children: /* @__PURE__ */ jsx(InputGroupShortcut, {
+					"aria-hidden": "true",
+					children: "⌘K"
+				})
+			})
+		] }), /* @__PURE__ */ jsx(Autocomplete.Portal, { children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
+			align: "start",
+			sideOffset: 4,
+			className: "rt:isolate rt:z-50",
+			children: /* @__PURE__ */ jsxs(Autocomplete.Popup, {
+				"data-slot": "global-search-panel",
+				className: "rt:flex rt:w-120 rt:max-w-full rt:flex-col rt:rounded-lg rt:border rt:border-border rt:bg-popover rt:text-b3 rt:text-popover-foreground rt:outline-hidden",
+				children: [
+					/* @__PURE__ */ jsx(Autocomplete.Empty, {
+						className: "rt:text-muted-foreground rt:not-empty:p-3",
+						children: showEmpty ? emptyText : null
+					}),
+					/* @__PURE__ */ jsx(Autocomplete.Status, {
+						className: "rt:sr-only",
+						children: status
+					}),
+					/* @__PURE__ */ jsx(Autocomplete.List, {
+						className: "rt:max-h-80 rt:overflow-y-auto rt:p-1 rt:outline-none",
+						children: (group) => /* @__PURE__ */ jsxs(Autocomplete.Group, {
+							items: group.items,
+							className: "rt:flex rt:flex-col",
+							children: [/* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
+								className: "rt:px-2 rt:py-1.5 rt:text-c1 rt:text-muted-foreground",
+								children: group.label
+							}), /* @__PURE__ */ jsx(Autocomplete.Collection, { children: (row) => /* @__PURE__ */ jsxs(Autocomplete.Item, {
+								value: row,
+								onClick: () => choose(row),
+								className: "rt:flex rt:cursor-default rt:items-center rt:gap-2 rt:rounded-md rt:px-2 rt:py-1.5 rt:outline-none rt:select-none rt:data-highlighted:bg-muted",
+								children: [row.icon !== void 0 ? /* @__PURE__ */ jsx(Icon, {
+									name: row.icon,
+									tone: "icon"
+								}) : null, row.more !== void 0 ? /* @__PURE__ */ jsx("span", {
+									className: "rt:text-primary",
+									children: row.label
+								}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									className: "rt:truncate",
+									children: row.label
+								}), row.description !== void 0 ? /* @__PURE__ */ jsx("span", {
+									className: "rt:ml-auto rt:truncate rt:text-muted-foreground",
+									children: row.description
+								}) : null] })]
+							}, row.id) })]
+						}, group.id)
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "rt:flex rt:items-center rt:gap-3 rt:border-t rt:border-border rt:px-3 rt:py-2 rt:text-c1 rt:text-muted-foreground",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "rt:inline-flex rt:items-center rt:gap-1",
+								children: [/* @__PURE__ */ jsxs(KbdGroup, { children: [/* @__PURE__ */ jsx(Kbd, { children: "↑" }), /* @__PURE__ */ jsx(Kbd, { children: "↓" })] }), "to move"]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "rt:inline-flex rt:items-center rt:gap-1",
+								children: [/* @__PURE__ */ jsx(Kbd, { children: "↵" }), "to select"]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "rt:inline-flex rt:items-center rt:gap-1",
+								children: [/* @__PURE__ */ jsx(Kbd, { children: "esc" }), "to close"]
+							})
+						]
+					})
+				]
+			})
+		}) })]
+	});
+}
+export { GlobalSearch };

package/dist/components/global-search/index.d.ts

@@ -0,0 +1,2 @@
+import { GlobalSearch, GlobalSearchGroup, GlobalSearchProps, GlobalSearchResult } from "./GlobalSearch.js";
+export { GlobalSearch, type GlobalSearchGroup, type GlobalSearchProps, type GlobalSearchResult };

package/dist/components/global-search/index.js

@@ -0,0 +1 @@
+export { GlobalSearch } from "./GlobalSearch.js";

package/dist/components/icon/registry.d.ts

@@ -1,6 +1,7 @@
 import "@tabler/icons-react";
 /**
  * The name of an icon. The design system's own glyphs come first (plus, search, export, the two pagination chevrons and
- * the five navigation glyphs); check, x, alert-triangle and info-circle are Tabler icons drawn with a 1.5px line.
+ * the five navigation glyphs); the rest are Tabler icons drawn with a 1.5px line: check, x, alert-triangle, info-circle,
+ * the dashboard's navigation glyphs (nav-orders to nav-settings), import, more and menu (the phone menu button) and calendar (the date pickers' open button).
  */
-export type IconName = 'plus' | 'search' | 'export' | 'chevron-left' | 'chevron-right' | 'nav-home' | 'nav-shortcut' | 'nav-product' | 'nav-product-2' | 'nav-chevron' | 'nav-caret-down' | 'check' | 'x' | 'alert-triangle' | 'info-circle';
+export type IconName = 'plus' | 'search' | 'export' | 'chevron-left' | 'chevron-right' | 'nav-home' | 'nav-shortcut' | 'nav-product' | 'nav-product-2' | 'nav-chevron' | 'nav-caret-down' | 'check' | 'x' | 'alert-triangle' | 'info-circle' | 'nav-orders' | 'nav-customers' | 'nav-growth' | 'nav-discounts' | 'nav-content' | 'nav-markets' | 'nav-analytics' | 'nav-sales-channels' | 'nav-apps' | 'nav-settings' | 'import' | 'more' | 'menu' | 'calendar';