@ratio-ui/core 0.1.0 → 0.2.0

package/dist/components/page-header/PageHeader.d.ts

@@ -0,0 +1,37 @@
+import { StatusPillTone } from "../status-pill/StatusPill.js";
+import "../status-pill/index.js";
+import { JSX, ReactNode } from "react";
+/** One entry of the overflow menu. */
+export type PageHeaderMenuItem = {
+  /** The text of the item. */
+  label: string;
+  /** Runs when the item is chosen. */
+  onSelect: () => void;
+  /** Draws the item in the danger colour, for an action that deletes. */
+  destructive?: boolean;
+};
+/** Props of PageHeader. */
+export type PageHeaderProps = {
+  /** The page title, shown as the level 1 heading. */
+  title: string;
+  /** An icon or logo shown before the title. */
+  icon?: ReactNode;
+  /** The state of the record, one word, beside the title. */
+  status?: {
+    label: string;
+    tone?: StatusPillTone;
+  };
+  /** Where the back link goes. The link shows only with this. On a router, LinkProvider draws it with the app's own link. */
+  backHref?: string;
+  /** The text of the back link, such as the parent page's name. Defaults to Back. */
+  backLabel?: string;
+  /** Buttons on the right, such as Export and Add product. */
+  actions?: ReactNode;
+  /** Entries of the overflow menu. The More actions button shows only when there is at least one. */
+  menuItems?: PageHeaderMenuItem[];
+};
+/**
+ * The top of a page: an optional back link, then an icon, the title and a status pill on the left, and the actions with
+ * an overflow menu on the right. It wraps on a phone.
+ */
+export declare function PageHeader({ title, icon, status, backHref, backLabel, actions, menuItems }: PageHeaderProps): JSX.Element;

package/dist/components/page-header/PageHeader.js

@@ -0,0 +1,62 @@
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { RatioLink } from "../link-provider/RatioLink.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu/DropdownMenu.js";
+import { StatusPill } from "../status-pill/StatusPill.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/page-header/PageHeader.tsx
+/**
+* The top of a page: an optional back link, then an icon, the title and a status pill on the left, and the actions with
+* an overflow menu on the right. It wraps on a phone.
+*/
+function PageHeader({ title, icon, status, backHref, backLabel = "Back", actions, menuItems }) {
+	const hasMenu = menuItems !== void 0 && menuItems.length > 0;
+	return /* @__PURE__ */ jsxs("header", {
+		className: "rt:flex rt:flex-col rt:gap-2",
+		children: [backHref !== void 0 && /* @__PURE__ */ jsxs(RatioLink, {
+			href: backHref,
+			className: "rt:inline-flex rt:w-fit rt:items-center rt:gap-1 rt:rounded-sm rt:text-b1 rt:text-muted-foreground rt:transition-colors rt:hover:text-foreground rt:focus-visible:focus-ring",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: "chevron-left",
+				size: 8
+			}), backLabel]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "rt:flex rt:flex-wrap rt:items-center rt:justify-between rt:gap-x-3 rt:gap-y-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:min-w-0 rt:items-center rt:gap-3",
+				children: [
+					icon !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "rt:flex rt:shrink-0 rt:items-center",
+						children: icon
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "rt:m-0 rt:min-w-0 rt:truncate rt:text-h5 rt:text-foreground-strong",
+						children: title
+					}),
+					status !== void 0 && /* @__PURE__ */ jsx(StatusPill, {
+						tone: status.tone,
+						children: status.label
+					})
+				]
+			}), (actions !== void 0 || hasMenu) && /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:flex-wrap rt:items-center rt:gap-2",
+				children: [actions, hasMenu && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+					render: /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
+					children: ["More actions", /* @__PURE__ */ jsx(Icon, {
+						name: "nav-caret-down",
+						size: 8
+					})]
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					side: "bottom",
+					align: "end",
+					children: menuItems.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+						variant: item.destructive ? "destructive" : void 0,
+						onClick: item.onSelect,
+						children: item.label
+					}, item.label))
+				})] })]
+			})]
+		})]
+	});
+}
+export { PageHeader };

package/dist/components/page-header/index.d.ts

@@ -0,0 +1,2 @@
+import { PageHeader, PageHeaderMenuItem, PageHeaderProps } from "./PageHeader.js";
+export { PageHeader, type PageHeaderMenuItem, type PageHeaderProps };

package/dist/components/page-header/index.js

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

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, JSX } from "react";
+/** The props of Pagination: the attributes of a nav element, except className, style and children, and the page being shown. */
+export type PaginationProps = Omit<ComponentProps<'nav'>, 'className' | 'style' | 'children'> & {
+  /** The page being shown, counting from 1. */
+  page: number;
+  /** How many results one page holds. */
+  pageSize: number;
+  /** How many results there are in all, across every page. */
+  total: number;
+  /** Called with the page to show when Previous or Next is pressed. */
+  onPageChange: (page: number) => void;
+};
+/**
+ * The footer under a table: Previous and Next arrows and the range on show, written "1 – 20 of 84 results". An arrow is
+ * dimmed to 50% and disabled (aria-disabled, still focusable) when there is no page that way. The parent owns the page: it passes `page` and updates it in
+ * `onPageChange`.
+ */
+export declare function Pagination({ page, pageSize, total, onPageChange, 'aria-label': label, ...rest }: PaginationProps): JSX.Element;

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,59 @@
+import { Icon } from "../icon/Icon.js";
+import { formatCount } from "../../lib/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/pagination/Pagination.tsx
+const ARROW = "rt:inline-flex rt:size-7 rt:items-center rt:justify-center rt:rounded-md rt:bg-background rt:text-foreground-subdued rt:transition-colors rt:not-aria-disabled:cursor-pointer rt:not-aria-disabled:hover:bg-muted rt:focus-visible:focus-ring rt:aria-disabled:opacity-50";
+/**
+* One arrow. At the end of the list it stays focusable and is marked aria-disabled, so pressing Next onto the last page
+* leaves focus on it rather than dropping it to the page; a press on it then does nothing.
+*/
+function Arrow({ label, icon, disabled, onPress }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		"aria-disabled": disabled ? true : void 0,
+		className: ARROW,
+		onClick: disabled ? void 0 : onPress,
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			size: 8
+		})
+	});
+}
+/**
+* The footer under a table: Previous and Next arrows and the range on show, written "1 – 20 of 84 results". An arrow is
+* dimmed to 50% and disabled (aria-disabled, still focusable) when there is no page that way. The parent owns the page: it passes `page` and updates it in
+* `onPageChange`.
+*/
+function Pagination({ page, pageSize, total, onPageChange, "aria-label": label = "Pagination", ...rest }) {
+	const size = Math.max(1, pageSize);
+	const lastPage = Math.max(1, Math.ceil(total / size));
+	const current = Math.min(Math.max(1, page), lastPage);
+	const from = (current - 1) * size + 1;
+	const to = Math.min(current * size, total);
+	const summary = total === 0 ? "0 results" : `${formatCount(from)} – ${formatCount(to)} of ${formatCount(total)} results`;
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": label,
+		className: "rt:flex rt:h-13 rt:items-center rt:gap-2 rt:bg-background rt:py-3",
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "rt:flex rt:w-14 rt:shrink-0",
+			children: [/* @__PURE__ */ jsx(Arrow, {
+				label: "Previous page",
+				icon: "chevron-left",
+				disabled: current <= 1,
+				onPress: () => onPageChange(current - 1)
+			}), /* @__PURE__ */ jsx(Arrow, {
+				label: "Next page",
+				icon: "chevron-right",
+				disabled: current >= lastPage,
+				onPress: () => onPageChange(current + 1)
+			})]
+		}), /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "rt:min-w-26 rt:px-2 rt:text-c1 rt:whitespace-nowrap rt:text-foreground-subdued",
+			children: summary
+		})]
+	});
+}
+export { Pagination };

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

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

package/dist/components/pagination/index.js

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

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps } from "react";
+import { Popover } from "@base-ui/react/popover";
+/** The props of Popover: Base UI's root props, such as open, defaultOpen and onOpenChange. */
+export type PopoverProps = Popover.Root.Props;
+/** A panel that opens from a trigger and holds more than text, such as a list of notifications. Put a PopoverTrigger and a PopoverContent inside it. */
+declare function Popover$1(props: PopoverProps): import("react").JSX.Element;
+/** The props of PopoverTrigger: Base UI's trigger props, except className and style. Use render to put the trigger on your own element. */
+export type PopoverTriggerProps = Omit<Popover.Trigger.Props, 'className' | 'style'>;
+/** The element that opens the popover on click or Enter. It renders a button unless render says otherwise. */
+export declare function PopoverTrigger(props: PopoverTriggerProps): import("react").JSX.Element;
+/** The props of PopoverContent: the popup props plus where the popover sits. */
+export type PopoverContentProps = Omit<Popover.Popup.Props, 'className' | 'style'> & Pick<Popover.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
+/** The popover panel: a white panel with a 1px outline and no shadow, 288px wide. It opens below the trigger by default. */
+export declare function PopoverContent({ align, alignOffset, side, sideOffset, ...props }: PopoverContentProps): import("react").JSX.Element;
+/** The props of PopoverHeader: the attributes of a div, except className and style. */
+export type PopoverHeaderProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** Groups a title and a description at the top of the panel. */
+export declare function PopoverHeader(props: PopoverHeaderProps): import("react").JSX.Element;
+/** The props of PopoverTitle: Base UI's title props. */
+export type PopoverTitleProps = Omit<Popover.Title.Props, 'className' | 'style'>;
+/** The title of the panel; it names the dialog for screen readers. */
+export declare function PopoverTitle(props: PopoverTitleProps): import("react").JSX.Element;
+/** The props of PopoverDescription: Base UI's description props. */
+export type PopoverDescriptionProps = Omit<Popover.Description.Props, 'className' | 'style'>;
+/** The supporting text under the title, in the muted colour. */
+export declare function PopoverDescription(props: PopoverDescriptionProps): import("react").JSX.Element;
+export { Popover$1 as Popover };

package/dist/components/popover/Popover.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+// src/components/popover/Popover.tsx
+/** A panel that opens from a trigger and holds more than text, such as a list of notifications. Put a PopoverTrigger and a PopoverContent inside it. */
+function Popover$1(props) {
+	return /* @__PURE__ */ jsx(Popover.Root, { ...props });
+}
+/** The element that opens the popover on click or Enter. It renders a button unless render says otherwise. */
+function PopoverTrigger(props) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, { ...props });
+}
+/** The popover panel: a white panel with a 1px outline and no shadow, 288px wide. It opens below the trigger by default. */
+function PopoverContent({ align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "rt:isolate rt:z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			className: "rt:flex rt:w-72 rt:flex-col rt:gap-2 rt:rounded-lg rt:border rt:border-border rt:bg-popover rt:p-3 rt:text-b3 rt:text-popover-foreground rt:outline-hidden",
+			...props
+		})
+	}) });
+}
+/** Groups a title and a description at the top of the panel. */
+function PopoverHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "rt:flex rt:flex-col rt:gap-0.5",
+		...props
+	});
+}
+/** The title of the panel; it names the dialog for screen readers. */
+function PopoverTitle(props) {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		className: "rt:text-b4",
+		...props
+	});
+}
+/** The supporting text under the title, in the muted colour. */
+function PopoverDescription(props) {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		className: "rt:text-muted-foreground",
+		...props
+	});
+}
+export { Popover$1 as Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

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

@@ -0,0 +1,2 @@
+import { Popover, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./Popover.js";
+export { Popover, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverHeader, type PopoverHeaderProps, type PopoverProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps };

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./Popover.js";

package/dist/components/search-field/SearchField.d.ts

@@ -0,0 +1,23 @@
+import { InputGroupSize } from "../input-group/InputGroup.js";
+import "../input-group/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/** The props of SearchField: the HTML attributes of an input, except className, style, size, type and onChange. */
+export type SearchFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size' | 'type' | 'onChange' | 'value' | 'defaultValue'> & {
+  /** The accessible name of the field, such as "Search products". Required because the field has no visible label. */
+  label: string;
+  /** The text in the field. Pass it with onValueChange to control the field. */
+  value?: string;
+  /** The starting text of an uncontrolled field. */
+  defaultValue?: string;
+  /** Called with the new text on every change and when the field is cleared. It is not debounced: debounce in the app. */
+  onValueChange?: (value: string) => void;
+  /** The height in px: 36 above a listing, 32 inside a table. Defaults to 36. */
+  size?: InputGroupSize;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * The search field above a listing: a search icon, the input and a clear button that appears once there is text.
+ * Escape clears it too. The field reports every change; the debounce stays in the app.
+ */
+export declare function SearchField({ label, value, defaultValue, onValueChange, size, ref, onKeyDown, disabled, readOnly, ...rest }: SearchFieldProps): JSX.Element;

package/dist/components/search-field/SearchField.js

@@ -0,0 +1,66 @@
+import { Icon } from "../icon/Icon.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/InputGroup.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/search-field/SearchField.tsx
+/**
+* The search field above a listing: a search icon, the input and a clear button that appears once there is text.
+* Escape clears it too. The field reports every change; the debounce stays in the app.
+*/
+function SearchField({ label, value, defaultValue = "", onValueChange, size = 36, ref, onKeyDown, disabled, readOnly, ...rest }) {
+	const [inner, setInner] = useState(defaultValue);
+	const current = value ?? inner;
+	const inputRef = useRef(null);
+	const change = (next) => {
+		if (value === void 0) setInner(next);
+		onValueChange?.(next);
+	};
+	const clear = () => {
+		change("");
+		inputRef.current?.focus();
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === "Escape" && current !== "" && readOnly !== true && !event.defaultPrevented) {
+			event.preventDefault();
+			change("");
+		}
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		size,
+		children: [
+			/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Icon, {
+				name: "search",
+				tone: "icon"
+			}) }),
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				...rest,
+				ref: (node) => {
+					inputRef.current = node;
+					if (typeof ref === "function") ref(node);
+					else if (ref) ref.current = node;
+				},
+				disabled,
+				readOnly,
+				role: "searchbox",
+				inputMode: "search",
+				autoComplete: "off",
+				"aria-label": label,
+				value: current,
+				onChange: (event) => change(event.target.value),
+				onKeyDown: handleKeyDown
+			}),
+			current !== "" && disabled !== true && readOnly !== true ? /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "end",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Clear search",
+					onClick: clear,
+					className: "rt:inline-flex rt:size-5 rt:items-center rt:justify-center rt:rounded-sm rt:text-icon rt:outline-none rt:transition-colors rt:hover:bg-muted rt:focus-visible:shadow-ring-focus",
+					children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+				})
+			}) : null
+		]
+	});
+}
+export { SearchField };

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

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

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

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

package/dist/components/side-nav/SideNav.d.ts

@@ -0,0 +1,64 @@
+import { IconName } from "../icon/registry.js";
+import "../icon/index.js";
+import { JSX, ReactNode } from "react";
+/** One row of the navigation. With `children` it is a group that opens and closes. */
+export type SideNavItem = {
+  /** The value passed to onSelect and compared with `active`. */
+  id: string;
+  /** The text of the row. */
+  label: string;
+  /** A glyph before the label. */
+  icon?: IconName;
+  /** A count shown at the end of the row, such as 12 or 10,001+. */
+  count?: string | number;
+  /** Makes the row a link to this address instead of a button. On a router, LinkProvider draws it with the app's own link. */
+  href?: string;
+  /** Nested rows. The row then opens and closes them. */
+  children?: SideNavItem[];
+};
+/** A block of rows, with an optional label that can collapse the block. */
+export type SideNavSection = {
+  /** Identifies the section. */
+  id: string;
+  /** The small label above the rows. Without one the rows sit unlabelled. */
+  label?: string;
+  /** Whether the label collapses the section. Needs a label. */
+  collapsible?: boolean;
+  /** Whether a collapsible section starts closed. Defaults to false. */
+  defaultCollapsed?: boolean;
+  /** The rows. */
+  items: SideNavItem[];
+};
+/** The account switcher at the top. */
+export type SideNavAccount = {
+  /** The store or person name. */
+  name: string;
+  /** The line under the name. */
+  role?: string;
+  /** Called when the switcher is pressed. */
+  onClick?: () => void;
+};
+/** The props of SideNav. */
+export type SideNavProps = {
+  /** The accessible name of the navigation landmark. */
+  label: string;
+  /** The blocks of rows, top to bottom. */
+  sections: SideNavSection[];
+  /** The id of the current row. It is marked and its group opens. */
+  active?: string;
+  /** Called with the id of the row pressed. */
+  onSelect?: (id: string) => void;
+  /** The account switcher shown above the rows. */
+  account?: SideNavAccount;
+  /** Content pinned at the bottom, such as Settings. */
+  footer?: ReactNode;
+  /** On a phone, whether the drawer is open. */
+  open?: boolean;
+  /** On a phone, called when the drawer asks to open or close. */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * The 240px side navigation of the admin: an account switcher, blocks of rows with nested groups, counts and collapsible
+ * labels, and a footer pinned at the bottom. On a phone it becomes a drawer: inside AppShell the menu button in TopBar opens it and choosing a row closes it; used alone, the caller opens it with `open` and closes it in `onOpenChange`.
+ */
+export declare function SideNav(props: SideNavProps): JSX.Element | null;

package/dist/components/side-nav/SideNav.js

@@ -0,0 +1,194 @@
+import { ShellNavContext } from "../app-shell/context.js";
+import { cn } from "../../lib/cn.js";
+import { Avatar } from "../avatar/Avatar.js";
+import { Icon } from "../icon/Icon.js";
+import { RatioLink } from "../link-provider/RatioLink.js";
+import { use, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+// src/components/side-nav/SideNav.tsx
+const PHONE_QUERY = "(max-width: 767px)";
+function subscribe(notify) {
+	const mq = window.matchMedia(PHONE_QUERY);
+	mq.addEventListener("change", notify);
+	return () => mq.removeEventListener("change", notify);
+}
+function useIsPhone() {
+	return useSyncExternalStore(subscribe, () => window.matchMedia(PHONE_QUERY).matches, () => false);
+}
+const ROW = "rt:flex rt:h-sidenav-row rt:w-full rt:items-center rt:gap-2 rt:rounded-md rt:text-left rt:text-b3 rt:text-foreground rt:transition-colors rt:hover:bg-muted rt:focus-visible:focus-ring";
+function containsActive(item, active) {
+	return item.children?.some((c) => c.id === active || containsActive(c, active)) ?? false;
+}
+function Row({ item, active, depth, onSelect }) {
+	const isActive = item.id === active;
+	const [toggled, setToggled] = useState(null);
+	const children = item.children ?? [];
+	const hasChildren = children.length > 0;
+	const open = toggled && toggled.forActive === active ? toggled.open : containsActive(item, active);
+	const cls = cn(ROW, depth > 0 && "rt:pl-8", isActive && "rt:bg-muted rt:text-primary rt:font-medium");
+	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+		item.icon && /* @__PURE__ */ jsx(Icon, {
+			name: item.icon,
+			size: 16,
+			tone: isActive ? "primary" : "icon"
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "rt:min-w-0 rt:flex-1 rt:truncate",
+			children: item.label
+		}),
+		item.count !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "rt:text-c1 rt:text-foreground-subdued",
+			children: item.count
+		}),
+		hasChildren && /* @__PURE__ */ jsx(Icon, {
+			name: "nav-chevron",
+			size: 8,
+			tone: "icon"
+		})
+	] });
+	return /* @__PURE__ */ jsxs("li", { children: [hasChildren ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cls,
+		"aria-expanded": open,
+		onClick: () => setToggled({
+			open: !open,
+			forActive: active
+		}),
+		children: inner
+	}) : item.href ? /* @__PURE__ */ jsx(RatioLink, {
+		href: item.href,
+		className: cls,
+		"aria-current": isActive ? "page" : void 0,
+		onClick: () => onSelect?.(item.id),
+		children: inner
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cls,
+		"aria-current": isActive ? "page" : void 0,
+		onClick: () => onSelect?.(item.id),
+		children: inner
+	}), hasChildren && open && /* @__PURE__ */ jsx("ul", {
+		className: "rt:flex rt:flex-col",
+		children: children.map((c) => /* @__PURE__ */ jsx(Row, {
+			item: c,
+			active,
+			depth: depth + 1,
+			onSelect
+		}, c.id))
+	})] });
+}
+function Section({ section, active, onSelect }) {
+	const [collapsed, setCollapsed] = useState(!!section.defaultCollapsed);
+	const collapsible = !!section.collapsible && !!section.label;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rt:flex rt:flex-col",
+		children: [section.label && (collapsible ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": !collapsed,
+			onClick: () => setCollapsed((c) => !c),
+			className: "rt:flex rt:h-sidenav-label rt:items-center rt:justify-between rt:text-c1 rt:text-foreground-subdued rt:focus-visible:focus-ring",
+			children: [section.label, /* @__PURE__ */ jsx(Icon, {
+				name: "nav-chevron",
+				size: 8,
+				tone: "icon"
+			})]
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "rt:flex rt:h-sidenav-label rt:items-center rt:text-c1 rt:text-foreground-subdued",
+			children: section.label
+		})), !(collapsible && collapsed) && /* @__PURE__ */ jsx("ul", {
+			className: "rt:flex rt:flex-col",
+			children: section.items.map((item) => /* @__PURE__ */ jsx(Row, {
+				item,
+				active,
+				depth: 0,
+				onSelect
+			}, item.id))
+		})]
+	});
+}
+function Panel({ label, sections, active, onSelect, account, footer }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "side-nav",
+		className: "rt:flex rt:h-full rt:w-60 rt:shrink-0 rt:flex-col rt:bg-sidebar rt:text-sidebar-foreground",
+		children: [
+			account && /* @__PURE__ */ jsx("div", {
+				className: "rt:flex rt:shrink-0 rt:items-start rt:px-3.5 rt:pt-2",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: account.onClick,
+					className: "rt:flex rt:h-11 rt:w-full rt:items-center rt:gap-2 rt:rounded-lg rt:px-1.5 rt:text-left rt:hover:bg-muted rt:focus-visible:focus-ring",
+					children: [
+						/* @__PURE__ */ jsx(Avatar, {
+							name: account.name,
+							shape: "square",
+							size: "sm"
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "rt:flex rt:min-w-0 rt:flex-1 rt:flex-col rt:text-c1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "rt:truncate rt:text-c2",
+								children: account.name
+							}), account.role && /* @__PURE__ */ jsx("span", {
+								className: "rt:truncate",
+								children: account.role
+							})]
+						}),
+						/* @__PURE__ */ jsx(Icon, {
+							name: "nav-caret-down",
+							size: 8,
+							tone: "icon"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("nav", {
+				"aria-label": label,
+				className: "rt:flex rt:min-h-0 rt:flex-1 rt:flex-col rt:sidenav-gap rt:overflow-y-auto rt:sidenav-pad-x rt:sidenav-pad-top rt:sidenav-pad-bottom",
+				children: sections.map((s) => /* @__PURE__ */ jsx(Section, {
+					section: s,
+					active,
+					onSelect
+				}, s.id))
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				"data-slot": "side-nav-footer",
+				className: "rt:flex rt:shrink-0 rt:items-center rt:gap-2 rt:border-t rt:border-divider rt:px-6 rt:py-3 rt:text-b3",
+				children: footer
+			})
+		]
+	});
+}
+/**
+* The 240px side navigation of the admin: an account switcher, blocks of rows with nested groups, counts and collapsible
+* labels, and a footer pinned at the bottom. On a phone it becomes a drawer: inside AppShell the menu button in TopBar opens it and choosing a row closes it; used alone, the caller opens it with `open` and closes it in `onOpenChange`.
+*/
+function SideNav(props) {
+	const phone = useIsPhone();
+	const shell = use(ShellNavContext);
+	if (!phone) return /* @__PURE__ */ jsx(Panel, { ...props });
+	const open = props.open ?? shell?.open ?? false;
+	const onOpenChange = (next) => {
+		props.onOpenChange?.(next);
+		shell?.setOpen(next);
+	};
+	const onSelect = (id) => {
+		props.onSelect?.(id);
+		shell?.setOpen(false);
+	};
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsx(Dialog.Popup, {
+			id: shell?.id,
+			"aria-label": props.label,
+			"data-slot": "side-nav-drawer",
+			className: "rt:fixed rt:inset-y-0 rt:left-0 rt:z-50 rt:h-full rt:shadow-ring-strong rt:focus-visible:focus-ring",
+			children: /* @__PURE__ */ jsx(Panel, {
+				...props,
+				onSelect
+			})
+		}) })
+	});
+}
+export { SideNav };

package/dist/components/side-nav/index.d.ts

@@ -0,0 +1,2 @@
+import { SideNav, SideNavAccount, SideNavItem, SideNavProps, SideNavSection } from "./SideNav.js";
+export { SideNav, type SideNavAccount, type SideNavItem, type SideNavProps, type SideNavSection };

package/dist/components/side-nav/index.js

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

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, JSX } from "react";
+/** The shape of a placeholder: a line of text, a block such as a tile or an image, or a round avatar. */
+export type SkeletonShape = 'line' | 'block' | 'circle';
+/** The props of Skeleton: the HTML attributes of its div, except className, style and children, with the shape. */
+export type SkeletonProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'> & {
+  /** The shape of the placeholder. Defaults to line. A line and a block fill the width of their parent. */
+  shape?: SkeletonShape;
+};
+/**
+ * A static placeholder for content that is still loading on a first load. It is hidden from assistive technology: the
+ * container that holds it says it is busy. Its fill and animation come from the loading tokens, so it does not move.
+ */
+export declare function Skeleton({ shape, ...rest }: SkeletonProps): JSX.Element;