@ratio-ui/core 0.1.0 → 0.2.0

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,21 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/skeleton/Skeleton.tsx
+const SHAPE_CLASSES = {
+	line: "rt:h-4 rt:w-full rt:rounded-sm",
+	block: "rt:h-24 rt:w-full rt:rounded-sm",
+	circle: "rt:size-8 rt:rounded-3xl"
+};
+/**
+* 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.
+*/
+function Skeleton({ shape = "line", ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		"aria-hidden": "true",
+		...rest,
+		className: cn("rt:skeleton", SHAPE_CLASSES[shape])
+	});
+}
+export { Skeleton };

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

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps, SkeletonShape } from "./Skeleton.js";
+export { Skeleton, type SkeletonProps, type SkeletonShape };

package/dist/components/skeleton/index.js

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

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, JSX } from "react";
+/** The props of Spinner: the HTML attributes of its span, except className, style and children, with the label. */
+export type SpinnerProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'style' | 'children'> & {
+  /** The accessible name, announced to assistive technology. Defaults to Loading. */
+  label?: string;
+};
+/**
+ * A small ring for a wait with no known shape. It is static until the designer answers question 5: its motion is the
+ * --rt-spinner-animation token, none for now, so the ring is drawn from the progress colours and the status role says what it means.
+ */
+export declare function Spinner({ label, ...rest }: SpinnerProps): JSX.Element;

package/dist/components/spinner/Spinner.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+// src/components/spinner/Spinner.tsx
+/**
+* A small ring for a wait with no known shape. It is static until the designer answers question 5: its motion is the
+* --rt-spinner-animation token, none for now, so the ring is drawn from the progress colours and the status role says what it means.
+*/
+function Spinner({ label = "Loading", ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "spinner",
+		role: "status",
+		"aria-label": label,
+		...rest,
+		className: "rt:inline-block rt:size-4 rt:rounded-3xl rt:border-2 rt:border-progress-track rt:border-t-progress rt:spinner-motion"
+	});
+}
+export { Spinner };

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

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

package/dist/components/spinner/index.js

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

package/dist/components/status-pill/StatusPill.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, JSX, Ref } from "react";
+/** The tone of a status pill: success is green, warning is amber, neutral is plain text until the designer answers question 3. */
+export type StatusPillTone = 'success' | 'warning' | 'neutral';
+/** The props of StatusPill: the HTML attributes of a span, except className and style, with the tone. */
+export type StatusPillProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'style'> & {
+  /** The colour of the pill. Defaults to neutral. */
+  tone?: StatusPillTone;
+  /** The status, one word: Draft, Active, Hidden, Low, Pending. */
+  children: React.ReactNode;
+  /** Receives the rendered span. */
+  ref?: Ref<HTMLSpanElement>;
+};
+/** A 20px pill with a 4px radius and a 1px border that names the state of a row, such as a product's status in a listing. */
+export declare function StatusPill({ tone, children, ref, ...rest }: StatusPillProps): JSX.Element;

package/dist/components/status-pill/StatusPill.js

@@ -0,0 +1,19 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/status-pill/StatusPill.tsx
+const TONE_CLASSES = {
+	success: "rt:bg-success-tint rt:text-success rt:border-success-border",
+	warning: "rt:bg-warning-tint rt:text-warning rt:border-warning-border",
+	neutral: "rt:bg-status-neutral-background rt:text-status-neutral-foreground rt:border-status-neutral-border"
+};
+/** A 20px pill with a 4px radius and a 1px border that names the state of a row, such as a product's status in a listing. */
+function StatusPill({ tone = "neutral", children, ref, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		ref,
+		"data-tone": tone,
+		className: cn("rt:inline-flex rt:h-5 rt:w-fit rt:shrink-0 rt:items-center rt:justify-center rt:rounded-sm rt:border rt:px-2 rt:text-c2 rt:whitespace-nowrap", TONE_CLASSES[tone]),
+		children
+	});
+}
+export { StatusPill };

package/dist/components/status-pill/index.d.ts

@@ -0,0 +1,2 @@
+import { StatusPill, StatusPillProps, StatusPillTone } from "./StatusPill.js";
+export { StatusPill, type StatusPillProps, type StatusPillTone };

package/dist/components/status-pill/index.js

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

package/dist/components/table/Table.d.ts

@@ -0,0 +1,46 @@
+import { ComponentProps, JSX, ReactNode } from "react";
+/** The props of Table: the attributes of a table element, except className and style. */
+export type TableProps = Omit<ComponentProps<'table'>, 'className' | 'style'>;
+/**
+ * A data table in the design system's Listing look: a 36px heading row over 48px rows split by 1px hairlines, 12px uppercase headings and a fill
+ * on the row under the pointer. It scrolls sideways inside its own box when the columns do not fit. Compose it from
+ * TableHeader, TableBody, TableRow, TableHead and TableCell.
+ */
+export declare function Table(props: TableProps): JSX.Element;
+/** The props of TableHeader: the attributes of a thead element, except className and style. */
+export type TableHeaderProps = Omit<ComponentProps<'thead'>, 'className' | 'style'>;
+/** The heading rows of a table. Its rows take no hover fill. */
+export declare function TableHeader(props: TableHeaderProps): JSX.Element;
+/** The props of TableBody: the attributes of a tbody element, except className and style. */
+export type TableBodyProps = Omit<ComponentProps<'tbody'>, 'className' | 'style'>;
+/** The data rows of a table. Its rows take the hover fill. */
+export declare function TableBody(props: TableBodyProps): JSX.Element;
+/** The props of TableFooter: the attributes of a tfoot element, except className and style. */
+export type TableFooterProps = Omit<ComponentProps<'tfoot'>, 'className' | 'style'>;
+/** The summary rows at the foot of a table, such as totals. Its rows take no hover fill. */
+export declare function TableFooter(props: TableFooterProps): JSX.Element;
+/** The props of TableRow: the attributes of a tr element, except className and style, and whether the row is selected. */
+export type TableRowProps = Omit<ComponentProps<'tr'>, 'className' | 'style'> & {
+  /** Keeps the hover fill on the row to show it is chosen, for example when its checkbox is ticked. Defaults to false. */
+  selected?: boolean;
+};
+/** One row, 48px high (36px in the heading), with a hairline under it. A body row is filled when the pointer is over it or it is selected. */
+export declare function TableRow({ selected, ...rest }: TableRowProps): JSX.Element;
+/** The props of TableHead: the attributes of a th element, except className and style, and the alignment of its column. */
+export type TableHeadProps = Omit<ComponentProps<'th'>, 'className' | 'style'> & {
+  /** Aligns the heading to the right, over a column of numbers. Defaults to false, which aligns it to the left. */
+  numeric?: boolean;
+};
+/** A column heading: 12px uppercase text in the subdued colour. It is a column header unless `scope` says otherwise. */
+export declare function TableHead({ numeric, scope, ...rest }: TableHeadProps): JSX.Element;
+/** The props of TableCell: the attributes of a td element, except className and style, and the alignment of its column. */
+export type TableCellProps = Omit<ComponentProps<'td'>, 'className' | 'style'> & {
+  /** Aligns the cell to the right with tabular figures, for a number. Defaults to false, which aligns it to the left. */
+  numeric?: boolean;
+};
+/** One cell. Text stays on one line; a numeric cell is right aligned with tabular figures so digits line up. */
+export declare function TableCell({ numeric, ...rest }: TableCellProps): JSX.Element;
+/** The props of TableCaption: the attributes of a caption element, except className and style. */
+export type TableCaptionProps = Omit<ComponentProps<'caption'>, 'className' | 'style'>;
+/** The table's title for assistive technology, shown under the table in the subdued colour. */
+export declare function TableCaption(props: TableCaptionProps): JSX.Element;

package/dist/components/table/Table.js

@@ -0,0 +1,87 @@
+import { cn } from "../../lib/cn.js";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/table/Table.tsx
+const SectionContext = createContext("body");
+const BoxContext = createContext(false);
+/** Draws the hairline box (1px border, 8px corners) round the Table inside it. For DataTable and TableLoader; not exported from the package. */
+function TableBox({ children }) {
+	return /* @__PURE__ */ jsx(BoxContext, {
+		value: true,
+		children
+	});
+}
+/**
+* A data table in the design system's Listing look: a 36px heading row over 48px rows split by 1px hairlines, 12px uppercase headings and a fill
+* on the row under the pointer. It scrolls sideways inside its own box when the columns do not fit. Compose it from
+* TableHeader, TableBody, TableRow, TableHead and TableCell.
+*/
+function Table(props) {
+	const boxed = use(BoxContext);
+	return /* @__PURE__ */ jsx("div", {
+		role: "region",
+		tabIndex: 0,
+		"aria-label": props["aria-label"],
+		"aria-labelledby": props["aria-labelledby"],
+		"data-boxed": boxed ? "true" : void 0,
+		className: cn("rt:relative rt:w-full rt:overflow-x-auto rt:focus-visible:focus-ring", boxed && "rt:rounded-lg rt:border rt:border-border"),
+		children: /* @__PURE__ */ jsx("table", {
+			className: "rt:w-full rt:border-collapse rt:caption-bottom rt:bg-background rt:text-b3 rt:text-foreground",
+			...props
+		})
+	});
+}
+/** The heading rows of a table. Its rows take no hover fill. */
+function TableHeader(props) {
+	return /* @__PURE__ */ jsx(SectionContext, {
+		value: "head",
+		children: /* @__PURE__ */ jsx("thead", { ...props })
+	});
+}
+/** The data rows of a table. Its rows take the hover fill. */
+function TableBody(props) {
+	return /* @__PURE__ */ jsx(SectionContext, {
+		value: "body",
+		children: /* @__PURE__ */ jsx("tbody", { ...props })
+	});
+}
+/** The summary rows at the foot of a table, such as totals. Its rows take no hover fill. */
+function TableFooter(props) {
+	return /* @__PURE__ */ jsx(SectionContext, {
+		value: "foot",
+		children: /* @__PURE__ */ jsx("tfoot", { ...props })
+	});
+}
+/** One row, 48px high (36px in the heading), with a hairline under it. A body row is filled when the pointer is over it or it is selected. */
+function TableRow({ selected = false, ...rest }) {
+	const section = use(SectionContext);
+	const boxed = use(BoxContext);
+	return /* @__PURE__ */ jsx("tr", {
+		"data-selected": selected ? "true" : void 0,
+		className: cn("rt:border-b rt:border-border rt:transition-colors", section === "head" ? "rt:h-9" : "rt:h-12", boxed && section === "body" && "rt:last:border-b-0", section === "body" && "rt:hover:bg-muted rt:data-selected:bg-muted"),
+		...rest
+	});
+}
+/** A column heading: 12px uppercase text in the subdued colour. It is a column header unless `scope` says otherwise. */
+function TableHead({ numeric = false, scope = "col", ...rest }) {
+	return /* @__PURE__ */ jsx("th", {
+		scope,
+		className: cn("rt:px-2 rt:align-middle rt:text-label rt:uppercase rt:whitespace-nowrap rt:text-foreground-subdued", numeric ? "rt:text-right" : "rt:text-left"),
+		...rest
+	});
+}
+/** One cell. Text stays on one line; a numeric cell is right aligned with tabular figures so digits line up. */
+function TableCell({ numeric = false, ...rest }) {
+	return /* @__PURE__ */ jsx("td", {
+		className: cn("rt:px-2 rt:align-middle rt:whitespace-nowrap", numeric ? "rt:text-right rt:tabular-nums" : "rt:text-left"),
+		...rest
+	});
+}
+/** The table's title for assistive technology, shown under the table in the subdued colour. */
+function TableCaption(props) {
+	return /* @__PURE__ */ jsx("caption", {
+		className: "rt:py-2 rt:text-left rt:text-c1 rt:text-foreground-subdued",
+		...props
+	});
+}
+export { Table, TableBody, TableBox, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

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

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./Table.js";
+export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps };

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./Table.js";

package/dist/components/table-loader/TableLoader.d.ts

@@ -0,0 +1,31 @@
+import { TableProps } from "../table/Table.js";
+import "../table/index.js";
+import { JSX } from "react";
+/** One column of the loading table: its real heading, and whether it holds numbers. */
+export type TableLoaderColumn = {
+  /** A stable key for the column. */
+  id: string;
+  /** The heading, shown for real so the layout does not jump when the data arrives. */
+  header: string;
+  /** Aligns the heading and the placeholder to the right. Defaults to false. */
+  numeric?: boolean;
+};
+/** The props of TableLoader: the attributes of Table, plus the columns, how many rows to fake and the count line. */
+export type TableLoaderProps = Omit<TableProps, 'children' | 'aria-busy'> & {
+  /** The columns, in order. */
+  columns: TableLoaderColumn[];
+  /** How many placeholder rows to draw. Defaults to 5. */
+  rows?: number;
+  /** How many results the first page will hold, for the count line. */
+  shown: number;
+  /** How many results there are in all. */
+  total: number;
+  /** What the results are called, in the plural: "products". */
+  noun: string;
+};
+/**
+ * What a table shows on its first load: the real headings over static skeleton rows, and a count line such as
+ * "72 of 1000 products". The table is marked busy and the fake rows are hidden from screen readers. Use it for the first
+ * load only; later loads keep the old rows.
+ */
+export declare function TableLoader({ columns, rows, shown, total, noun, ...rest }: TableLoaderProps): JSX.Element;

package/dist/components/table-loader/TableLoader.js

@@ -0,0 +1,35 @@
+import { formatCount } from "../../lib/format.js";
+import { Table, TableBody, TableBox, TableCell, TableHead, TableHeader, TableRow } from "../table/Table.js";
+import { Skeleton } from "../skeleton/Skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/table-loader/TableLoader.tsx
+/**
+* What a table shows on its first load: the real headings over static skeleton rows, and a count line such as
+* "72 of 1000 products". The table is marked busy and the fake rows are hidden from screen readers. Use it for the first
+* load only; later loads keep the old rows.
+*/
+function TableLoader({ columns, rows = 5, shown, total, noun, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "table-loader",
+		className: "rt:flex rt:w-full rt:flex-col",
+		children: [/* @__PURE__ */ jsx(TableBox, { children: /* @__PURE__ */ jsxs(Table, {
+			"aria-busy": "true",
+			...rest,
+			children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((c) => /* @__PURE__ */ jsx(TableHead, {
+				numeric: c.numeric,
+				children: c.header
+			}, c.id)) }) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(TableRow, {
+				"aria-hidden": "true",
+				children: columns.map((c) => /* @__PURE__ */ jsx(TableCell, {
+					numeric: c.numeric,
+					children: /* @__PURE__ */ jsx(Skeleton, {})
+				}, c.id))
+			}, i)) })]
+		}) }), /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "rt:py-3 rt:text-c1 rt:text-foreground-subdued",
+			children: `${formatCount(shown)} of ${formatCount(total)} ${noun}`
+		})]
+	});
+}
+export { TableLoader };

package/dist/components/table-loader/index.d.ts

@@ -0,0 +1,2 @@
+import { TableLoader, TableLoaderColumn, TableLoaderProps } from "./TableLoader.js";
+export { TableLoader, type TableLoaderColumn, type TableLoaderProps };

package/dist/components/table-loader/index.js

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

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, JSX } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+/** The props of Tabs: Base UI's tabs root without className and style. */
+export type TabsProps = Omit<ComponentProps<typeof Tabs.Root>, 'className' | 'style'>;
+/** The props of TabsList: Base UI's tab list without className and style. */
+export type TabsListProps = Omit<ComponentProps<typeof Tabs.List>, 'className' | 'style'>;
+/** The props of TabsTrigger: Base UI's tab without className and style. Its value ties it to the TabsContent with the same value. */
+export type TabsTriggerProps = Omit<ComponentProps<typeof Tabs.Tab>, 'className' | 'style'>;
+/** The props of TabsContent: Base UI's tab panel without className and style. Its value ties it to the TabsTrigger with the same value. */
+export type TabsContentProps = Omit<ComponentProps<typeof Tabs.Panel>, 'className' | 'style'>;
+/**
+ * Sections of one page, switched by an underlined row of tabs: ABC analysis, the sections of a settings page. Holds the
+ * selected value, uncontrolled with defaultValue or controlled with value and onValueChange. To filter a list use
+ * FilterTabs, which looks like the design system's chip tab.
+ */
+declare function Tabs$1(props: TabsProps): JSX.Element;
+/** The row of tabs, with a hairline under it. Give it an aria-label that names the sections. */
+export declare function TabsList(props: TabsListProps): JSX.Element;
+/** One tab: 36px tall, with a 2px blue underline and a blue semibold label when selected. A disabled tab is at 50%. */
+export declare function TabsTrigger(props: TabsTriggerProps): JSX.Element;
+/** The panel of the tab with the same value; only the selected one is shown. */
+export declare function TabsContent(props: TabsContentProps): JSX.Element;
+export { Tabs$1 as Tabs };

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,41 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+// src/components/tabs/Tabs.tsx
+/**
+* Sections of one page, switched by an underlined row of tabs: ABC analysis, the sections of a settings page. Holds the
+* selected value, uncontrolled with defaultValue or controlled with value and onValueChange. To filter a list use
+* FilterTabs, which looks like the design system's chip tab.
+*/
+function Tabs$1(props) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "tabs",
+		className: cn("rt:flex rt:flex-col rt:gap-3"),
+		...props
+	});
+}
+/** The row of tabs, with a hairline under it. Give it an aria-label that names the sections. */
+function TabsList(props) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		className: cn("rt:flex rt:items-center rt:gap-6 rt:border-b rt:border-border"),
+		...props
+	});
+}
+/** One tab: 36px tall, with a 2px blue underline and a blue semibold label when selected. A disabled tab is at 50%. */
+function TabsTrigger(props) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "tabs-trigger",
+		className: cn("rt:relative rt:inline-flex rt:h-9 rt:cursor-pointer rt:items-center rt:justify-center rt:gap-2 rt:whitespace-nowrap", "rt:text-b3 rt:text-tab-inactive rt:transition-colors rt:hover:text-foreground", "rt:data-active:font-semibold rt:data-active:text-primary", "rt:focus-visible:focus-ring rt:data-disabled:cursor-default rt:data-disabled:opacity-50", "rt:after:absolute rt:after:inset-x-0 rt:after:-bottom-px rt:after:h-0.5 rt:after:bg-primary rt:after:opacity-0", "rt:data-active:after:opacity-100 rt:svg:text-icon"),
+		...props
+	});
+}
+/** The panel of the tab with the same value; only the selected one is shown. */
+function TabsContent(props) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		"data-slot": "tabs-content",
+		className: cn("rt:flex-1 rt:text-b3 rt:focus-visible:focus-ring"),
+		...props
+	});
+}
+export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };

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

@@ -0,0 +1,2 @@
+import { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps } from "./Tabs.js";
+export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps };

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";

package/dist/components/toaster/Toaster.d.ts

@@ -0,0 +1,32 @@
+import { JSX, ReactNode } from "react";
+/** What a toast can carry besides its title. */
+export interface ToastOptions {
+  /** A second line under the title. */
+  description?: ReactNode;
+  /** How long it stays, in ms. Defaults to 5000; 0 keeps it until it is closed. */
+  timeout?: number;
+}
+/**
+ * Shows a message after an action. Call toast.success, toast.info or toast.error with the title, from anywhere; a Toaster
+ * must be mounted once in the app. Each is announced to screen readers through a polite live region.
+ */
+export declare const toast: {
+  /** Shows a success message and returns its id. */
+  success: (title: ReactNode, options?: ToastOptions) => string;
+  /** Shows an info message and returns its id. */
+  info: (title: ReactNode, options?: ToastOptions) => string;
+  /** Shows an error message and returns its id. */
+  error: (title: ReactNode, options?: ToastOptions) => string;
+  /** Closes one toast by id, or all when none is given. */
+  dismiss: (id?: string) => void;
+};
+/** Props of Toaster. */
+export interface ToasterProps {
+  /** The accessible name of each close button. Defaults to Close notification. */
+  closeLabel?: string;
+}
+/**
+ * Mounts the toast viewport, bottom right, once for the app. Messages from toast() appear in it as plain panels with the
+ * ring outline, stacked, with no entrance animation.
+ */
+export declare function Toaster({ closeLabel }: ToasterProps): JSX.Element;

package/dist/components/toaster/Toaster.js

@@ -0,0 +1,89 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+// src/components/toaster/Toaster.tsx
+const manager = Toast.createToastManager();
+function show(type, title, options = {}) {
+	return manager.add({
+		type,
+		title,
+		description: options.description,
+		timeout: options.timeout,
+		priority: "low"
+	});
+}
+/**
+* Shows a message after an action. Call toast.success, toast.info or toast.error with the title, from anywhere; a Toaster
+* must be mounted once in the app. Each is announced to screen readers through a polite live region.
+*/
+const toast = {
+	/** Shows a success message and returns its id. */
+	success: (title, options) => show("success", title, options),
+	/** Shows an info message and returns its id. */
+	info: (title, options) => show("info", title, options),
+	/** Shows an error message and returns its id. */
+	error: (title, options) => show("error", title, options),
+	/** Closes one toast by id, or all when none is given. */
+	dismiss: (id) => manager.close(id)
+};
+const ICONS = {
+	success: "check",
+	info: "info-circle",
+	error: "alert-triangle"
+};
+function ToastList({ closeLabel }) {
+	const { toasts } = Toast.useToastManager();
+	return /* @__PURE__ */ jsx(Fragment, { children: toasts.map((item) => {
+		const kind = item.type ?? "info";
+		return /* @__PURE__ */ jsxs(Toast.Root, {
+			toast: item,
+			"data-slot": "toast",
+			className: "rt:pointer-events-auto rt:flex rt:w-full rt:items-start rt:gap-3 rt:rounded-lg rt:bg-popover rt:p-3 rt:text-popover-foreground rt:shadow-ring-strong rt:forced-outline",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "toast-icon",
+					className: cn("rt:flex rt:h-5 rt:items-center", kind === "error" ? "rt:text-error-icon" : "rt:text-icon"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: ICONS[kind],
+						size: 16
+					})
+				}),
+				/* @__PURE__ */ jsxs(Toast.Content, {
+					className: "rt:flex rt:min-w-0 rt:flex-1 rt:flex-col rt:gap-1",
+					children: [/* @__PURE__ */ jsx(Toast.Title, {
+						"data-slot": "toast-title",
+						className: cn("rt:text-b4", kind === "error" ? "rt:text-error" : "rt:text-foreground-strong")
+					}), /* @__PURE__ */ jsx(Toast.Description, {
+						"data-slot": "toast-description",
+						className: "rt:text-b3 rt:text-foreground-subdued"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Toast.Close, {
+					"aria-label": closeLabel,
+					"data-slot": "toast-close",
+					className: "rt:flex rt:size-5 rt:shrink-0 rt:items-center rt:justify-center rt:rounded-md rt:text-icon rt:transition-colors rt:hover:bg-primary-tint rt:focus-visible:focus-ring",
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "x",
+						size: 12
+					})
+				})
+			]
+		}, item.id);
+	}) });
+}
+/**
+* Mounts the toast viewport, bottom right, once for the app. Messages from toast() appear in it as plain panels with the
+* ring outline, stacked, with no entrance animation.
+*/
+function Toaster({ closeLabel = "Close notification" }) {
+	return /* @__PURE__ */ jsx(Toast.Provider, {
+		toastManager: manager,
+		children: /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			"data-slot": "toast-viewport",
+			className: "rt:pointer-events-none rt:fixed rt:right-4 rt:bottom-4 rt:z-50 rt:flex rt:w-90 rt:max-w-full rt:flex-col rt:gap-2",
+			children: /* @__PURE__ */ jsx(ToastList, { closeLabel })
+		}) })
+	});
+}
+export { Toaster, toast };

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

@@ -0,0 +1,2 @@
+import { ToastOptions, Toaster, ToasterProps, toast } from "./Toaster.js";
+export { type ToastOptions, Toaster, type ToasterProps, toast };

package/dist/components/toaster/index.js

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

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import { Tooltip } from "@base-ui/react/tooltip";
+/** The props of TooltipProvider: Base UI's provider props. */
+export type TooltipProviderProps = Tooltip.Provider.Props;
+/** Shares the open delay between the tooltips inside it. Wrap the app, or a group of tooltips, once. The delay defaults to 0 ms. */
+export declare function TooltipProvider({ delay, ...props }: TooltipProviderProps): import("react").JSX.Element;
+/** The props of Tooltip: Base UI's root props, such as open, defaultOpen and onOpenChange. */
+export type TooltipProps = Tooltip.Root.Props;
+/** A short hint for a control or term, shown on hover and keyboard focus. Put a TooltipTrigger and a TooltipContent inside it. */
+declare function Tooltip$1(props: TooltipProps): import("react").JSX.Element;
+/** The props of TooltipTrigger: Base UI's trigger props, except className and style. Use render to put the trigger on your own element. */
+export type TooltipTriggerProps = Omit<Tooltip.Trigger.Props, 'className' | 'style'>;
+/** The element that opens the tooltip on hover and focus. It renders a button unless render says otherwise. */
+export declare function TooltipTrigger(props: TooltipTriggerProps): import("react").JSX.Element;
+/** The props of TooltipContent: the popup props plus where the tooltip sits. */
+export type TooltipContentProps = Omit<Tooltip.Popup.Props, 'className' | 'style'> & Pick<Tooltip.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
+/** The tooltip text: a dark panel with light text, no shadow and no animation. It sits above the trigger by default. */
+export declare function TooltipContent({ side, sideOffset, align, alignOffset, children, ...props }: TooltipContentProps): import("react").JSX.Element;
+export { Tooltip$1 as Tooltip };

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,35 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/components/tooltip/Tooltip.tsx
+/** Shares the open delay between the tooltips inside it. Wrap the app, or a group of tooltips, once. The delay defaults to 0 ms. */
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		delay,
+		...props
+	});
+}
+/** A short hint for a control or term, shown on hover and keyboard focus. Put a TooltipTrigger and a TooltipContent inside it. */
+function Tooltip$1(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
+}
+/** The element that opens the tooltip on hover and focus. It renders a button unless render says otherwise. */
+function TooltipTrigger(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, { ...props });
+}
+/** The tooltip text: a dark panel with light text, no shadow and no animation. It sits above the trigger by default. */
+function TooltipContent({ side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "rt:isolate rt:z-50",
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+			className: cn("rt:inline-flex rt:w-fit rt:max-w-72 rt:items-center rt:gap-1.5 rt:rounded-md rt:bg-foreground rt:px-3 rt:py-1.5 rt:text-b1 rt:text-background"),
+			...props,
+			children
+		})
+	}) });
+}
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

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

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps } from "./Tooltip.js";
+export { Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps };

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip.js";

package/dist/components/top-bar/StoreSwitcher.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from "react";
+/** One store the person can switch to. */
+export type StoreOption = {
+  /** The value passed to onStoreChange and compared with storeId. */
+  id: string;
+  /** The store name, shown in the bar and the menu. */
+  name: string;
+  /** The store's logo; without one the avatar shows its initials. */
+  src?: string;
+};
+/** The props of StoreSwitcher. */
+export type StoreSwitcherProps = {
+  /** The stores the person can switch between, as the app passes them. */
+  stores: StoreOption[];
+  /** The id of the current store. */
+  storeId: string;
+  /** Called with the id of the store chosen. */
+  onStoreChange?: (id: string) => void;
+  /** The caption of its menu. Defaults to Switch store. The button is named by the store name. */
+  label?: string;
+};
+/**
+ * The store switcher of TopBar: a square avatar, the store name and a chevron that open a menu of the stores the app
+ * passes. On a phone only the avatar shows. Pass it to TopBar's `storeSwitcher` slot.
+ */
+export declare function StoreSwitcher({ stores, storeId, onStoreChange, label }: StoreSwitcherProps): JSX.Element;