@ratio-ui/core 0.1.1 → 0.2.0

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 { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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).
  */
-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';

package/dist/components/icon/registry.js

@@ -1,5 +1,5 @@
 import { CHEVRON_LEFT, CHEVRON_RIGHT, EXPORT, NAV_CHEVRON, NAV_HOME, NAV_PRODUCT, NAV_PRODUCT_2, NAV_SHORTCUT, PLUS, SEARCH } from "./glyphs.js";
-import { IconAlertTriangle, IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
+import { IconAlertTriangle, IconApps, IconBuildingStore, IconChartBar, IconCheck, IconDiscount2, IconDots, IconFileImport, IconFileText, IconInfoCircle, IconMenu2, IconReceipt, IconSettings, IconTrendingUp, IconUsers, IconWorld, IconX } from "@tabler/icons-react";
 // src/components/icon/registry.ts
 /**
 * Every icon by name. nav-chevron and nav-caret-down are one glyph under two names, as in the design system, whose
@@ -65,6 +65,58 @@ const ICONS = {
 	"info-circle": {
 		kind: "tabler",
 		component: IconInfoCircle
+	},
+	"nav-orders": {
+		kind: "tabler",
+		component: IconReceipt
+	},
+	"nav-customers": {
+		kind: "tabler",
+		component: IconUsers
+	},
+	"nav-growth": {
+		kind: "tabler",
+		component: IconTrendingUp
+	},
+	"nav-discounts": {
+		kind: "tabler",
+		component: IconDiscount2
+	},
+	"nav-content": {
+		kind: "tabler",
+		component: IconFileText
+	},
+	"nav-markets": {
+		kind: "tabler",
+		component: IconWorld
+	},
+	"nav-analytics": {
+		kind: "tabler",
+		component: IconChartBar
+	},
+	"nav-sales-channels": {
+		kind: "tabler",
+		component: IconBuildingStore
+	},
+	"nav-apps": {
+		kind: "tabler",
+		component: IconApps
+	},
+	"nav-settings": {
+		kind: "tabler",
+		component: IconSettings
+	},
+	import: {
+		kind: "tabler",
+		component: IconFileImport
+	},
+	more: {
+		kind: "tabler",
+		component: IconDots
+	},
+	menu: {
+		kind: "tabler",
+		component: IconMenu2
 	}
 };
 export { ICONS };

package/dist/components/input/Input.d.ts

@@ -0,0 +1,19 @@
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/** The height of the field in px: 36 is the design system's input, 32 the compact one inside tables. */
+export type InputSize = 36 | 32;
+/**
+ * The props of Input: the HTML attributes of an input, except className, style and size, with the height of the field.
+ * Mark an invalid field with aria-invalid, which draws the error ring in the danger colour, also while focused.
+ */
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size'> & {
+  /** The height in px: 36 for forms and search, 32 for fields inside a table. Defaults to 36. */
+  size?: InputSize;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A single-line text field in the design system's look: 8px radius, a 1px ring that turns blue on focus, 14px body type.
+ * It takes every attribute of an input (type, inputMode, value, onChange). For a prefix, suffix, icon or shortcut hint,
+ * put an InputGroupInput in an InputGroup.
+ */
+export declare function Input({ size, ref, ...rest }: InputProps): JSX.Element;

package/dist/components/input/Input.js

@@ -0,0 +1,26 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Input } from "@base-ui/react/input";
+// src/components/input/Input.tsx
+const inputVariants = cva("rt:w-full rt:min-w-0 rt:rounded-lg rt:bg-background rt:text-b3 rt:text-foreground rt:placeholder:text-muted-foreground rt:shadow-ring-subtle rt:outline-none rt:transition-colors rt:forced-outline rt:focus-visible:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
+	variants: { size: {
+		36: "rt:h-9 rt:px-3",
+		32: "rt:h-8 rt:px-2.75"
+	} },
+	defaultVariants: { size: 36 }
+});
+/**
+* A single-line text field in the design system's look: 8px radius, a 1px ring that turns blue on focus, 14px body type.
+* It takes every attribute of an input (type, inputMode, value, onChange). For a prefix, suffix, icon or shortcut hint,
+* put an InputGroupInput in an InputGroup.
+*/
+function Input$1({ size = 36, ref, ...rest }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input",
+		ref,
+		className: cn(inputVariants({ size })),
+		...rest
+	});
+}
+export { Input$1 as Input };

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

@@ -0,0 +1,2 @@
+import { Input, InputProps, InputSize } from "./Input.js";
+export { Input, type InputProps, type InputSize };

package/dist/components/input/index.js

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

package/dist/components/input-group/InputGroup.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes, InputHTMLAttributes, JSX, Ref } from "react";
+/** The height of the group in px: 36 is the design system's input, 32 the compact one inside tables. */
+export type InputGroupSize = 36 | 32;
+/** The props of InputGroup: the HTML attributes of a div, except className and style, with the height of the group. */
+export type InputGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> & {
+  /** The height in px: 36 for forms and search, 32 for fields inside a table. Defaults to 36. */
+  size?: InputGroupSize;
+  /** Receives the group element. */
+  ref?: Ref<HTMLDivElement>;
+};
+/**
+ * A field with a prefix, suffix, icon or shortcut hint beside the input, inside one ring. Put an InputGroupInput in it
+ * and an InputGroupAddon on either side, for example a rupee sign before a price or kg after a weight.
+ */
+export declare function InputGroup({ size, ref, ...rest }: InputGroupProps): JSX.Element;
+/** The side of the input an addon sits on: start is before it, end is after it. */
+export type InputGroupAddonAlign = 'start' | 'end';
+/** The props of InputGroupAddon: the HTML attributes of a div, except className and style, with its side. */
+export type InputGroupAddonProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> & {
+  /** The side of the input: start before it, end after it. Defaults to start. */
+  align?: InputGroupAddonAlign;
+};
+/**
+ * Holds an icon, a prefix, a suffix or a shortcut hint on one side of the input. Clicking it, off a button, moves focus
+ * to the input.
+ */
+export declare function InputGroupAddon({ align, ...rest }: InputGroupAddonProps): JSX.Element;
+/** The props of InputGroupText: the HTML attributes of a span, except className and style. */
+export type InputGroupTextProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'style'>;
+/** A text prefix or suffix inside an addon, such as a currency sign or a unit, in the muted colour. */
+export declare function InputGroupText(props: InputGroupTextProps): JSX.Element;
+/** The props of InputGroupShortcut: the HTML attributes of a kbd, except className and style. */
+export type InputGroupShortcutProps = Omit<HTMLAttributes<HTMLElement>, 'className' | 'style'>;
+/** A shortcut hint such as ⌘K inside an end addon, drawn as a small keycap. */
+export declare function InputGroupShortcut(props: InputGroupShortcutProps): JSX.Element;
+/** The props of InputGroupInput: the HTML attributes of an input, except className, style and size. */
+export type InputGroupInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size'> & {
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/** The input of an InputGroup. It draws no ring: the group does. Mark it invalid with aria-invalid. */
+export declare function InputGroupInput({ ref, ...rest }: InputGroupInputProps): JSX.Element;

package/dist/components/input-group/InputGroup.js

@@ -0,0 +1,83 @@
+import { cn } from "../../lib/cn.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Input } from "@base-ui/react/input";
+// src/components/input-group/InputGroup.tsx
+const groupVariants = cva("rt:flex rt:w-full rt:min-w-0 rt:items-center rt:gap-2 rt:rounded-lg rt:bg-background rt:shadow-ring-subtle rt:transition-colors rt:forced-outline rt:focus-within:shadow-ring-focus rt:has-aria-invalid:shadow-ring-invalid rt:has-aria-invalid:focus-within:shadow-ring-invalid rt:has-disabled:opacity-50", {
+	variants: { size: {
+		36: "rt:h-9 rt:px-3",
+		32: "rt:h-8 rt:px-2.75"
+	} },
+	defaultVariants: { size: 36 }
+});
+/**
+* A field with a prefix, suffix, icon or shortcut hint beside the input, inside one ring. Put an InputGroupInput in it
+* and an InputGroupAddon on either side, for example a rupee sign before a price or kg after a weight.
+*/
+function InputGroup({ size = 36, ref, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		ref,
+		className: cn(groupVariants({ size })),
+		...rest
+	});
+}
+const addonVariants = cva("rt:flex rt:shrink-0 rt:cursor-text rt:items-center rt:gap-2 rt:text-muted-foreground rt:select-none", {
+	variants: { align: {
+		start: "rt:order-first",
+		end: "rt:order-last"
+	} },
+	defaultVariants: { align: "start" }
+});
+/**
+* Holds an icon, a prefix, a suffix or a shortcut hint on one side of the input. Clicking it, off a button, moves focus
+* to the input.
+*/
+function InputGroupAddon({ align = "start", ...rest }) {
+	const addonRef = useRef(null);
+	useEffect(() => {
+		const element = addonRef.current;
+		if (element === null) return;
+		const focusInput = (event) => {
+			if (event.defaultPrevented || event.target.closest("button") !== null) return;
+			element.parentElement?.querySelector("input")?.focus();
+		};
+		element.addEventListener("click", focusInput);
+		return () => element.removeEventListener("click", focusInput);
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		ref: addonRef,
+		className: cn(addonVariants({ align })),
+		...rest
+	});
+}
+/** A text prefix or suffix inside an addon, such as a currency sign or a unit, in the muted colour. */
+function InputGroupText(props) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "input-group-text",
+		className: "rt:text-b3 rt:text-muted-foreground",
+		...props
+	});
+}
+/** A shortcut hint such as ⌘K inside an end addon, drawn as a small keycap. */
+function InputGroupShortcut(props) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "input-group-shortcut",
+		className: "rt:inline-flex rt:h-5 rt:items-center rt:rounded-sm rt:px-1 rt:text-c1 rt:text-muted-foreground rt:shadow-ring-hairline",
+		...props
+	});
+}
+/** The input of an InputGroup. It draws no ring: the group does. Mark it invalid with aria-invalid. */
+function InputGroupInput({ ref, ...rest }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		ref,
+		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 rt:disabled:cursor-not-allowed",
+		...rest
+	});
+}
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupShortcut, InputGroupText };

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,2 @@
+import { InputGroup, InputGroupAddon, InputGroupAddonAlign, InputGroupAddonProps, InputGroupInput, InputGroupInputProps, InputGroupProps, InputGroupShortcut, InputGroupShortcutProps, InputGroupSize, InputGroupText, InputGroupTextProps } from "./InputGroup.js";
+export { InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupShortcut, type InputGroupShortcutProps, type InputGroupSize, InputGroupText, type InputGroupTextProps };

package/dist/components/input-group/index.js

@@ -0,0 +1 @@
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupShortcut, InputGroupText } from "./InputGroup.js";

package/dist/components/kbd/Kbd.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, JSX, Ref } from "react";
+/** The props of Kbd: the HTML attributes of a kbd element, except className and style. */
+export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'className' | 'style'> & {
+  /** The key: a symbol such as ⌘ or ↵, a letter, or a short name such as esc. */
+  children: React.ReactNode;
+  /** Receives the rendered element. */
+  ref?: Ref<HTMLElement>;
+};
+/** A key hint, 20px high with a 4px radius, such as ⌘K or esc. */
+export declare function Kbd({ children, ref, ...rest }: KbdProps): JSX.Element;
+/** The props of KbdGroup: the HTML attributes of a span, except className and style. */
+export type KbdGroupProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'style'> & {
+  /** The keys of one shortcut, each a Kbd. */
+  children: React.ReactNode;
+};
+/** Puts the keys of one shortcut in a row with a 4px gap. */
+export declare function KbdGroup({ children, ...rest }: KbdGroupProps): JSX.Element;

package/dist/components/kbd/Kbd.js

@@ -0,0 +1,21 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/kbd/Kbd.tsx
+/** A key hint, 20px high with a 4px radius, such as ⌘K or esc. */
+function Kbd({ children, ref, ...rest }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		...rest,
+		ref,
+		className: cn("rt:inline-flex rt:h-5 rt:min-w-5 rt:w-fit rt:items-center rt:justify-center rt:rounded-sm rt:bg-muted rt:px-1 rt:font-sans rt:text-c2 rt:text-foreground-subdued rt:select-none"),
+		children
+	});
+}
+/** Puts the keys of one shortcut in a row with a 4px gap. */
+function KbdGroup({ children, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className: "rt:inline-flex rt:items-center rt:gap-1",
+		children
+	});
+}
+export { Kbd, KbdGroup };

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

@@ -0,0 +1,2 @@
+import { Kbd, KbdGroup, KbdGroupProps, KbdProps } from "./Kbd.js";
+export { Kbd, KbdGroup, type KbdGroupProps, type KbdProps };

package/dist/components/kbd/index.js

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

package/dist/components/link-provider/LinkProvider.d.ts

@@ -0,0 +1,29 @@
+import { AnchorHTMLAttributes, JSX, ReactElement, ReactNode, Ref } from "react";
+/**
+ * What the app's link element receives from Ratio: the address, Ratio's styling class, the content and the attributes
+ * the component sets, such as aria-current and onClick. Spread them all onto the element.
+ */
+export type LinkRenderProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
+  /** Where the link goes. A router link takes it as its own address prop, such as React Router's `to`. */
+  href: string;
+  /** Receives the rendered element. */
+  ref?: Ref<HTMLAnchorElement>;
+};
+/** The app's link element: a function that draws it from the link props. */
+export type LinkRender = (props: LinkRenderProps) => ReactElement;
+/** The props of LinkProvider. */
+export type LinkProviderProps = {
+  /**
+   * Draws every link Ratio renders. The function receives href, the styling class, the content and attributes such as
+   * aria-current and onClick, all to spread onto the element: `({ href, ...props }) => <RouterLink to={href} {...props} />`.
+   */
+  render: LinkRender;
+  /** The app, or the part of it that the router serves. */
+  children: ReactNode;
+};
+/**
+ * Draws every link of Ratio's components with the app's own router link, so a click navigates without a page reload:
+ * SideNav rows with an href, DataTable row links and the PageHeader back link. Wrap the app once, at its root. Without
+ * it those links are plain <a href> elements, which reload the page.
+ */
+export declare function LinkProvider({ render, children }: LinkProviderProps): JSX.Element;

package/dist/components/link-provider/LinkProvider.js

@@ -0,0 +1,15 @@
+import { LinkContext } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/link-provider/LinkProvider.tsx
+/**
+* Draws every link of Ratio's components with the app's own router link, so a click navigates without a page reload:
+* SideNav rows with an href, DataTable row links and the PageHeader back link. Wrap the app once, at its root. Without
+* it those links are plain <a href> elements, which reload the page.
+*/
+function LinkProvider({ render, children }) {
+	return /* @__PURE__ */ jsx(LinkContext, {
+		value: render,
+		children
+	});
+}
+export { LinkProvider };

package/dist/components/link-provider/RatioLink.js

@@ -0,0 +1,18 @@
+import { LinkContext } from "./context.js";
+import { use } from "react";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/link-provider/RatioLink.tsx
+/**
+* A link of one of Ratio's components, drawn by the app's LinkProvider, or a plain <a> without one. For the package's own
+* components only; the package does not export it.
+*/
+function RatioLink({ ref, ...props }) {
+	const render = use(LinkContext);
+	return useRender({
+		defaultTagName: "a",
+		render: render ? (merged) => render(merged) : void 0,
+		ref,
+		props
+	});
+}
+export { RatioLink };

package/dist/components/link-provider/context.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+// src/components/link-provider/context.ts
+const LinkContext = createContext(void 0);
+export { LinkContext };

package/dist/components/link-provider/index.d.ts

@@ -0,0 +1,2 @@
+import { LinkProvider, LinkProviderProps, LinkRender, LinkRenderProps } from "./LinkProvider.js";
+export { LinkProvider, type LinkProviderProps, type LinkRender, type LinkRenderProps };

package/dist/components/link-provider/index.js

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

package/dist/components/metric-strip/MetricStrip.d.ts

@@ -0,0 +1,23 @@
+import { JSX, ReactNode } from "react";
+/** One metric of the strip. */
+export type MetricSegment = {
+  /** A stable key. */
+  id: string;
+  /** The metric's name. */
+  title: string;
+  /** A sentence that explains the title; the title gets a dotted underline and opens it. */
+  definition?: ReactNode;
+  /** The value. A number is formatted by format; a string is shown as it is; null or undefined shows No data. */
+  value?: number | string | null;
+  /** How a number is written: money (rupees, Indian grouping) or count (123456). Defaults to count. */
+  format?: 'money' | 'count';
+};
+/** Props of MetricStrip. */
+export type MetricStripProps = {
+  /** The metrics, left to right. */
+  segments: MetricSegment[];
+  /** The accessible name of the strip. */
+  label?: string;
+};
+/** A row of metrics in one hairline container: each segment is a title, optionally with a definition, over its value. */
+export declare function MetricStrip({ segments, label }: MetricStripProps): JSX.Element;

package/dist/components/metric-strip/MetricStrip.js

@@ -0,0 +1,39 @@
+import { formatCount, formatMoney } from "../../lib/format.js";
+import { Definition } from "../definition/Definition.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/metric-strip/MetricStrip.tsx
+function show(segment) {
+	const { value, format = "count" } = segment;
+	if (value === null || value === void 0) return "No data";
+	if (typeof value === "string") return value;
+	return format === "money" ? formatMoney(value) : formatCount(value);
+}
+/** A row of metrics in one hairline container: each segment is a title, optionally with a definition, over its value. */
+function MetricStrip({ segments, label }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": label,
+		className: "rt:overflow-hidden rt:rounded-md rt:border rt:border-border rt:bg-background",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "rt:-mr-px rt:-mb-px rt:flex rt:flex-wrap",
+			children: segments.map((segment) => {
+				const empty = segment.value === null || segment.value === void 0;
+				return /* @__PURE__ */ jsxs("div", {
+					"data-segment": "",
+					className: "rt:flex rt:min-w-0 rt:flex-auto rt:flex-col rt:gap-1 rt:border-r rt:border-b rt:border-divider rt:p-6",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "rt:text-b1 rt:text-muted-foreground",
+						children: segment.definition !== void 0 ? /* @__PURE__ */ jsx(Definition, {
+							definition: segment.definition,
+							children: segment.title
+						}) : segment.title
+					}), /* @__PURE__ */ jsx("span", {
+						className: empty ? "rt:text-b2 rt:text-muted-foreground" : "rt:text-s1 rt:text-foreground-strong",
+						children: show(segment)
+					})]
+				}, segment.id);
+			})
+		})
+	});
+}
+export { MetricStrip };

package/dist/components/metric-strip/index.d.ts

@@ -0,0 +1,2 @@
+import { MetricSegment, MetricStrip, MetricStripProps } from "./MetricStrip.js";
+export { type MetricSegment, MetricStrip, type MetricStripProps };

package/dist/components/metric-strip/index.js

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