@ratio-ui/core 0.3.0 → 0.4.0

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,19 @@
+import { Accordion } from "@base-ui/react/accordion";
+import { JSX } from "react";
+/** The props of Accordion: Base UI's accordion props, except className, style and render. */
+export type AccordionProps = Omit<Accordion.Root.Props, 'className' | 'style' | 'render'>;
+/** The props of AccordionItem: Base UI's item props, except className, style and render. Give each a value. */
+export type AccordionItemProps = Omit<Accordion.Item.Props, 'className' | 'style' | 'render'>;
+/** The props of AccordionTrigger: Base UI's trigger props, except className, style and render. */
+export type AccordionTriggerProps = Omit<Accordion.Trigger.Props, 'className' | 'style' | 'render'>;
+/** The props of AccordionContent: Base UI's panel props, except className, style and render. */
+export type AccordionContentProps = Omit<Accordion.Panel.Props, 'className' | 'style' | 'render'>;
+/** A stack of sections that open and close. One section is open at a time unless multiple is set. */
+declare function Accordion$1({ ...props }: AccordionProps): JSX.Element;
+/** One section: a trigger and its content, separated from the next by a hairline. */
+export declare function AccordionItem({ ...props }: AccordionItemProps): JSX.Element;
+/** The heading row of a section, with a chevron that turns when it is open. */
+export declare function AccordionTrigger({ children, ...props }: AccordionTriggerProps): JSX.Element;
+/** The body of a section. It appears and disappears at once, with no height animation. */
+export declare function AccordionContent({ children, ...props }: AccordionContentProps): JSX.Element;
+export { Accordion$1 as Accordion };

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,52 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { Accordion } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/accordion/Accordion.tsx
+/** A stack of sections that open and close. One section is open at a time unless multiple is set. */
+function Accordion$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		"data-slot": "accordion",
+		className: "rt:flex rt:w-full rt:flex-col",
+		...props
+	});
+}
+/** One section: a trigger and its content, separated from the next by a hairline. */
+function AccordionItem({ ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		"data-slot": "accordion-item",
+		className: "rt:not-last:border-b rt:not-last:border-divider",
+		...props
+	});
+}
+/** The heading row of a section, with a chevron that turns when it is open. */
+function AccordionTrigger({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: "rt:flex",
+		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn("rt:group/accordion-trigger rt:flex rt:flex-1 rt:cursor-pointer rt:items-center rt:justify-between rt:gap-2 rt:rounded-lg rt:bg-transparent rt:py-2.75 rt:text-left rt:text-b4 rt:text-foreground rt:outline-none", "rt:focus-visible:focus-ring rt:forced-outline", "rt:disabled:cursor-not-allowed rt:disabled:opacity-50 rt:data-disabled:cursor-not-allowed rt:data-disabled:opacity-50"),
+			...props,
+			children: [children, /* @__PURE__ */ jsx("span", {
+				className: "rt:flex rt:shrink-0 rt:rotate-0 rt:text-muted-foreground rt:group-aria-expanded/accordion-trigger:rotate-180",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "nav-chevron",
+					size: 12
+				})
+			})]
+		})
+	});
+}
+/** The body of a section. It appears and disappears at once, with no height animation. */
+function AccordionContent({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		"data-slot": "accordion-content",
+		className: "rt:overflow-hidden rt:text-b3 rt:text-foreground",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "rt:pb-2.75",
+			children
+		})
+	});
+}
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,2 @@
+import { Accordion, AccordionContent, AccordionContentProps, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, AccordionTriggerProps } from "./Accordion.js";
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };

package/dist/components/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion.js";

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,19 @@
+import { JSX, Ref } from "react";
+/** One step of the trail. The last item, or any item without an href, is shown as plain text; the last is the current page. */
+export type BreadcrumbItem = {
+  /** The text of the step. */
+  label: string;
+  /** Where the step goes. Leave out for the current page. */
+  href?: string;
+};
+/** The props of Breadcrumb. */
+export type BreadcrumbProps = {
+  /** The trail, from the root to the current page. */
+  items: BreadcrumbItem[];
+  /** Past this many items the middle ones collapse behind an ellipsis, keeping the first and the last two. */
+  maxItems?: number;
+  /** Receives the rendered nav. */
+  ref?: Ref<HTMLElement>;
+};
+/** The trail to the current page: links, chevron separators, the current page as text and an overflow ellipsis. */
+export declare function Breadcrumb({ items, maxItems, ref }: BreadcrumbProps): JSX.Element;

package/dist/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,50 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { RatioLink } from "../link-provider/RatioLink.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/breadcrumb/Breadcrumb.tsx
+const STEP = "rt:text-b3 rt:rounded-sm rt:focus-visible:focus-ring";
+/** The trail to the current page: links, chevron separators, the current page as text and an overflow ellipsis. */
+function Breadcrumb({ items, maxItems, ref }) {
+	const [expanded, setExpanded] = useState(false);
+	const shown = !expanded && maxItems !== void 0 && items.length > maxItems && items.length > 3 ? [
+		items[0],
+		"ellipsis",
+		...items.slice(items.length - 2)
+	] : items;
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		"aria-label": "Breadcrumb",
+		"data-slot": "breadcrumb",
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "rt:flex rt:flex-wrap rt:items-center rt:gap-2 rt:text-foreground-subdued",
+			children: shown.map((item, i) => {
+				const isLast = i === shown.length - 1;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "rt:inline-flex rt:items-center rt:gap-2",
+					children: [item === "ellipsis" ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Show hidden pages",
+						onClick: () => setExpanded(true),
+						className: cn(STEP, "rt:px-1 rt:transition-colors rt:hover:text-foreground"),
+						children: "…"
+					}) : isLast || !item.href ? /* @__PURE__ */ jsx("span", {
+						...isLast ? { "aria-current": "page" } : {},
+						className: cn(STEP, isLast ? "rt:text-foreground" : ""),
+						children: item.label
+					}) : /* @__PURE__ */ jsx(RatioLink, {
+						href: item.href,
+						className: cn(STEP, "rt:transition-colors rt:hover:text-foreground"),
+						children: item.label
+					}), !isLast && /* @__PURE__ */ jsx(Icon, {
+						name: "chevron-right",
+						size: 8,
+						tone: "icon"
+					})]
+				}, item === "ellipsis" ? "ellipsis" : `${item.label}|${item.href ?? ""}`);
+			})
+		})
+	});
+}
+export { Breadcrumb };

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

@@ -0,0 +1,2 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./Breadcrumb.js";
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps };

package/dist/components/breadcrumb/index.js

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

package/dist/components/chart/Chart.d.ts

@@ -0,0 +1,137 @@
+import { IconName } from "../icon/registry.js";
+import "../icon/index.js";
+import { HTMLAttributes, JSX, ReactElement, ReactNode } from "react";
+import * as RechartsPrimitive from "recharts";
+import { DefaultLegendContentProps, DefaultTooltipContentProps, TooltipValueType } from "recharts";
+type TooltipNameType = number | string;
+type TooltipContent = DefaultTooltipContentProps<TooltipValueType, TooltipNameType>;
+/**
+ * A chart colour token, in series order: chart-1 the accent blue, chart-2 the body ink, chart-3 the placeholder grey,
+ * chart-4 the accent tint and chart-5 the line grey. chart-4 and chart-5 sit below 3:1 on white, so draw them only
+ * beside a darker series or with a stroke.
+ */
+export type ChartColor = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5';
+/** How one series or category of a chart is named and coloured. */
+export interface ChartSeriesConfig {
+  /** The name the tooltip, the legend and the data table show for it. */
+  label?: ReactNode;
+  /** An icon drawn in place of its colour swatch in the tooltip and the legend. */
+  icon?: IconName;
+  /** The chart token it is drawn in. Pass the same token to the series with chartColor. */
+  color?: ChartColor;
+}
+/** The series and categories of a chart, by data key. */
+export type ChartConfig = Record<string, ChartSeriesConfig>;
+/**
+ * The value a Recharts fill or stroke takes for a chart token, such as var(--rt-chart-1). Series are coloured only from
+ * these tokens.
+ */
+export declare function chartColor(color: ChartColor): string;
+/** The rows a chart offers assistive technology as a table, beside the drawing. */
+export interface ChartTable {
+  /** The rows of the chart, as passed to its data prop. */
+  data: ReadonlyArray<Record<string, unknown>>;
+  /** The key of each row's label, such as the day on the x axis: the table's first column. A Date is written as a date. */
+  labelKey: string;
+  /** Writes each number of the series, such as formatMoney for sales. Defaults to a count. */
+  formatValue?: (value: number) => string;
+}
+/** A chart needs a summary: a description, a data table, or both. */
+type ChartSummary = {
+  /** One sentence on what the chart shows, read after its name, such as "Sales peak on Tuesday". */
+  description: string;
+  /** The chart's rows as a visually hidden table, for assistive technology. */
+  table?: ChartTable;
+} | {
+  /** One sentence on what the chart shows, read after its name, such as "Sales peak on Tuesday". */
+  description?: string;
+  /** The chart's rows as a visually hidden table, for assistive technology. */
+  table: ChartTable;
+};
+/** How a chart takes its size: 16:9 or square at the full width, or the full size of its parent. */
+export type ChartAspect = 'video' | 'square' | 'fill';
+/**
+ * The props of Chart: the HTML attributes of its div, except className, style and children, with the config, the
+ * accessible name and summary, and one Recharts chart.
+ */
+export type ChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'> & ChartSummary & {
+  /** The series and categories, by data key: their labels, icons and chart tokens. */
+  config: ChartConfig;
+  /** The chart's accessible name, such as "Sales by day". */
+  label: string;
+  /** The size: video (16:9, the default) or square at the full width, or fill to take the parent's size. */
+  aspect?: ChartAspect;
+  /** The size the chart is drawn at before it measures its box. Defaults to 320 by 200. */
+  initialDimension?: {
+    width: number;
+    height: number;
+  };
+  /** One Recharts chart, such as a BarChart or a LineChart, whose series pass isAnimationActive false. */
+  children: ReactElement;
+};
+/**
+ * A chart on Recharts, drawn with the chart tokens. It holds the config the tooltip and legend read, styles Recharts'
+ * ticks, grid and cursor with the tokens, and is a figure named by its label and summarised by a description, a visually
+ * hidden data table, or both. Motion is colour fades only, so every series passes isAnimationActive false.
+ */
+export declare function Chart({ config, label, description, table, aspect, initialDimension, children, ...rest }: ChartProps): JSX.Element;
+/**
+ * The props of ChartTooltip: Recharts' Tooltip props, except its style and class name props. Its content defaults to
+ * ChartTooltipContent; it never animates.
+ */
+export type ChartTooltipProps = Omit<RechartsPrimitive.TooltipProps<TooltipValueType, TooltipNameType>, 'wrapperStyle' | 'contentStyle' | 'itemStyle' | 'labelStyle' | 'wrapperClassName' | 'labelClassName' | 'cursor'> & {
+  /** Shows the cursor line or band under the pointer. On or off: Recharts' SVG props would carry a class name and a style. */
+  cursor?: boolean;
+};
+/** The chart's tooltip: Recharts' Tooltip, still (no movement), drawing ChartTooltipContent unless given other content. */
+export declare function ChartTooltip({ content, ...props }: ChartTooltipProps): JSX.Element;
+/** The props of ChartTooltipContent. The tooltip sets active, payload and label; the rest choose what it shows. */
+export interface ChartTooltipContentProps {
+  /** Set by the tooltip: whether a point is active. */
+  active?: boolean;
+  /** Set by the tooltip: the values of the series at the active point. */
+  payload?: TooltipContent['payload'];
+  /** Set by the tooltip: the active point's label, such as its x-axis category. */
+  label?: TooltipContent['label'];
+  /** Writes the label from it and the payload. */
+  labelFormatter?: TooltipContent['labelFormatter'];
+  /** Draws a whole row, in place of the swatch, name and value, from the value, name, item, index and payload. */
+  formatter?: TooltipContent['formatter'];
+  /** The swatch: a dot (the default), a line or a dashed line. */
+  indicator?: 'dot' | 'line' | 'dashed';
+  /** Leaves out the label. */
+  hideLabel?: boolean;
+  /** Leaves out the swatches. */
+  hideIndicator?: boolean;
+  /** The key of the item, or its data row, whose value names the config entry of a row. */
+  nameKey?: string;
+  /** The key whose config entry labels the tooltip, in place of the active point's label. */
+  labelKey?: string;
+  /** One chart token for every swatch, in place of each series' own. */
+  color?: ChartColor;
+  /** Writes a number for its series, such as formatMoney for sales. Defaults to a count. */
+  formatValue?: (value: number) => string;
+}
+/**
+ * The box a chart tooltip draws: the active point's label, then a row per series with its swatch, its config label and
+ * its value, a count unless formatValue writes it. A 1px border on white, no shadow.
+ */
+export declare function ChartTooltipContent({ active, payload, label, labelFormatter, formatter, indicator, hideLabel, hideIndicator, nameKey, labelKey, color, formatValue }: ChartTooltipContentProps): JSX.Element | null;
+/** The props of ChartLegend: Recharts' Legend props, except its style props. Its content defaults to ChartLegendContent. */
+export type ChartLegendProps = Omit<RechartsPrimitive.LegendProps, 'wrapperStyle' | 'labelStyle'>;
+/** The chart's legend: Recharts' Legend, drawing ChartLegendContent unless given other content. */
+export declare function ChartLegend({ content, ...props }: ChartLegendProps): JSX.Element;
+/** The props of ChartLegendContent. The legend sets payload and verticalAlign; the rest choose what it shows. */
+export interface ChartLegendContentProps {
+  /** Set by the legend: its series. */
+  payload?: DefaultLegendContentProps['payload'];
+  /** Set by the legend: whether it sits above or below the chart, which sets the side of its gap. */
+  verticalAlign?: DefaultLegendContentProps['verticalAlign'];
+  /** Draws the swatch even where the config gives an icon. */
+  hideIcon?: boolean;
+  /** The key of the item whose value names the config entry of a series. */
+  nameKey?: string;
+}
+/** The row a chart legend draws: a swatch in each series' chart token, or its icon, and its config label. */
+export declare function ChartLegendContent({ payload, verticalAlign, hideIcon, nameKey }: ChartLegendContentProps): JSX.Element | null;
+export {};

package/dist/components/chart/Chart.js

@@ -0,0 +1,238 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { formatCount, formatDate } from "../../lib/format.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useId, useMemo } from "react";
+import * as RechartsPrimitive from "recharts";
+// src/components/chart/Chart.tsx
+/**
+* The value a Recharts fill or stroke takes for a chart token, such as var(--rt-chart-1). Series are coloured only from
+* these tokens.
+*/
+function chartColor(color) {
+	return `var(--rt-${color})`;
+}
+/** The swatch classes of each token: a fill for the dot and line indicators, a border for the dashed one. */
+const SWATCH = {
+	"chart-1": {
+		fill: "rt:bg-chart-1",
+		border: "rt:border-chart-1"
+	},
+	"chart-2": {
+		fill: "rt:bg-chart-2",
+		border: "rt:border-chart-2"
+	},
+	"chart-3": {
+		fill: "rt:bg-chart-3",
+		border: "rt:border-chart-3"
+	},
+	"chart-4": {
+		fill: "rt:bg-chart-4",
+		border: "rt:border-chart-4"
+	},
+	"chart-5": {
+		fill: "rt:bg-chart-5",
+		border: "rt:border-chart-5"
+	}
+};
+/** The swatch classes of a series whose token is not known: the muted ink. */
+const UNKNOWN_SWATCH = {
+	fill: "rt:bg-muted-foreground",
+	border: "rt:border-muted-foreground"
+};
+const TOKEN_VALUE = /var\(--rt-(chart-[1-5])\)/;
+/** The chart token a Recharts colour names, when it was written with chartColor. */
+function tokenOf(value) {
+	const match = typeof value === "string" ? TOKEN_VALUE.exec(value) : null;
+	return match ? match[1] : void 0;
+}
+const ChartContext = createContext(null);
+function useChart() {
+	const context = use(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <Chart />");
+	return context;
+}
+const INITIAL_DIMENSION = {
+	width: 320,
+	height: 200
+};
+const ASPECT = {
+	video: "rt:aspect-video rt:w-full",
+	square: "rt:aspect-square rt:w-full",
+	fill: "rt:size-full"
+};
+function cellText(value, formatValue = formatCount) {
+	if (typeof value === "number") return formatValue(value);
+	if (value instanceof Date) return formatDate(value);
+	return typeof value === "string" ? value : "";
+}
+function ChartDataTable({ label, config, table }) {
+	const { data, labelKey, formatValue } = table;
+	const keys = Object.keys(config).filter((key) => key !== labelKey && data.some((row) => key in row));
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-table",
+		className: "rt:sr-only",
+		children: /* @__PURE__ */ jsxs("table", { children: [
+			/* @__PURE__ */ jsx("caption", { children: label }),
+			/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+				scope: "col",
+				children: config[labelKey]?.label ?? labelKey
+			}), keys.map((key) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				children: config[key]?.label ?? key
+			}, key))] }) }),
+			/* @__PURE__ */ jsx("tbody", { children: data.map((row) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+				scope: "row",
+				children: cellText(row[labelKey])
+			}), keys.map((key) => /* @__PURE__ */ jsx("td", { children: cellText(row[key], formatValue) }, key))] }, cellText(row[labelKey]))) })
+		] })
+	});
+}
+/**
+* A chart on Recharts, drawn with the chart tokens. It holds the config the tooltip and legend read, styles Recharts'
+* ticks, grid and cursor with the tokens, and is a figure named by its label and summarised by a description, a visually
+* hidden data table, or both. Motion is colour fades only, so every series passes isAnimationActive false.
+*/
+function Chart({ config, label, description, table, aspect = "video", initialDimension = INITIAL_DIMENSION, children, ...rest }) {
+	const descriptionId = `${useId()}-description`;
+	const value = useMemo(() => ({ config }), [config]);
+	return /* @__PURE__ */ jsx(ChartContext, {
+		value,
+		children: /* @__PURE__ */ jsxs("div", {
+			...rest,
+			"data-slot": "chart",
+			role: "figure",
+			"aria-label": label,
+			"aria-describedby": description ? descriptionId : void 0,
+			className: cn("rt:recharts rt:relative rt:flex rt:justify-center rt:text-c1 rt:text-foreground", ASPECT[aspect]),
+			children: [
+				description ? /* @__PURE__ */ jsx("p", {
+					id: descriptionId,
+					hidden: true,
+					children: description
+				}) : null,
+				table ? /* @__PURE__ */ jsx(ChartDataTable, {
+					label,
+					config,
+					table
+				}) : null,
+				/* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
+					initialDimension,
+					children
+				})
+			]
+		})
+	});
+}
+/** The config entry of a tooltip or legend item: by the item's name key, else by the key itself. */
+function configOf(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const row = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configKey = key;
+	if (key in payload && typeof payload[key] === "string") configKey = payload[key];
+	else if (row && key in row && typeof row[key] === "string") configKey = row[key];
+	return configKey in config ? config[configKey] : config[key];
+}
+/** The chart's tooltip: Recharts' Tooltip, still (no movement), drawing ChartTooltipContent unless given other content. */
+function ChartTooltip({ content = /* @__PURE__ */ jsx(ChartTooltipContent, {}), ...props }) {
+	return /* @__PURE__ */ jsx(RechartsPrimitive.Tooltip, {
+		content,
+		...props,
+		isAnimationActive: false
+	});
+}
+/** The swatch of a tooltip or legend item, in its chart token. */
+function Swatch({ color, indicator, nested }) {
+	const tone = color ? SWATCH[color] : UNKNOWN_SWATCH;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-swatch",
+		className: cn("rt:shrink-0 rt:rounded-sm", indicator === "dot" && cn("rt:size-2.5", tone.fill), indicator === "line" && cn("rt:w-1", tone.fill), indicator === "dashed" && cn("rt:w-0 rt:border-2 rt:border-dashed rt:bg-transparent", tone.border), nested && indicator === "dashed" && "rt:my-0.5")
+	});
+}
+/**
+* The box a chart tooltip draws: the active point's label, then a row per series with its swatch, its config label and
+* its value, a count unless formatValue writes it. A 1px border on white, no shadow.
+*/
+function ChartTooltipContent({ active, payload, label, labelFormatter, formatter, indicator = "dot", hideLabel = false, hideIndicator = false, nameKey, labelKey, color, formatValue = formatCount }) {
+	const { config } = useChart();
+	if (!active || !payload?.length) return null;
+	const tooltipLabel = (() => {
+		if (hideLabel) return null;
+		const [item] = payload;
+		const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+		const itemConfig = configOf(config, item, key);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+		const text = labelFormatter ? labelFormatter(value, payload) : value;
+		return text ? /* @__PURE__ */ jsx("div", {
+			className: "rt:text-c2",
+			children: text
+		}) : null;
+	})();
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart-tooltip",
+		className: "rt:grid rt:min-w-32 rt:items-start rt:gap-1.5 rt:rounded-lg rt:border rt:border-border rt:bg-background rt:px-3 rt:py-1.5 rt:text-c1 rt:text-foreground",
+		children: [nestLabel ? null : tooltipLabel, /* @__PURE__ */ jsx("div", {
+			className: "rt:grid rt:gap-1.5",
+			children: payload.filter((item) => item.type !== "none").map((item, index) => {
+				const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+				const itemConfig = configOf(config, item, key);
+				const tone = color ?? itemConfig?.color ?? tokenOf(item.payload?.fill) ?? tokenOf(item.color);
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("rt:flex rt:w-full rt:flex-wrap rt:items-stretch rt:gap-2", indicator === "dot" && "rt:items-center"),
+					children: formatter && item.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(Icon, {
+						name: itemConfig.icon,
+						tone: "subdued"
+					}) : hideIndicator ? null : /* @__PURE__ */ jsx(Swatch, {
+						color: tone,
+						indicator,
+						nested: nestLabel
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("rt:flex rt:flex-1 rt:justify-between rt:gap-2", nestLabel ? "rt:items-end" : "rt:items-center"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "rt:grid rt:gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+								className: "rt:text-muted-foreground",
+								children: itemConfig?.label ?? item.name
+							})]
+						}), item.value != null ? /* @__PURE__ */ jsx("span", {
+							className: "rt:text-c2 rt:text-foreground rt:tabular-nums",
+							children: typeof item.value === "number" ? formatValue(item.value) : String(item.value)
+						}) : null]
+					})] })
+				}, key);
+			})
+		})]
+	});
+}
+/** The chart's legend: Recharts' Legend, drawing ChartLegendContent unless given other content. */
+function ChartLegend({ content = /* @__PURE__ */ jsx(ChartLegendContent, {}), ...props }) {
+	return /* @__PURE__ */ jsx(RechartsPrimitive.Legend, {
+		content,
+		...props
+	});
+}
+/** The row a chart legend draws: a swatch in each series' chart token, or its icon, and its config label. */
+function ChartLegendContent({ payload, verticalAlign = "bottom", hideIcon = false, nameKey }) {
+	const { config } = useChart();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-legend",
+		className: cn("rt:flex rt:items-center rt:justify-center rt:gap-3", verticalAlign === "top" ? "rt:pb-3" : "rt:pt-3"),
+		children: payload.filter((item) => item.type !== "none").map((item) => {
+			const key = `${nameKey ?? item.dataKey ?? "value"}`;
+			const itemConfig = configOf(config, item, key);
+			return /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:items-center rt:gap-1.5",
+				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(Icon, {
+					name: itemConfig.icon,
+					tone: "subdued"
+				}) : /* @__PURE__ */ jsx("div", {
+					"data-slot": "chart-swatch",
+					className: cn("rt:size-2 rt:shrink-0 rt:rounded-sm", (SWATCH[itemConfig?.color ?? tokenOf(item.color) ?? "none"] ?? UNKNOWN_SWATCH).fill)
+				}), itemConfig?.label ?? item.value]
+			}, key);
+		})
+	});
+}
+export { Chart, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, chartColor };

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

@@ -0,0 +1,2 @@
+import { Chart, ChartAspect, ChartColor, ChartConfig, ChartLegend, ChartLegendContent, ChartLegendContentProps, ChartLegendProps, ChartProps, ChartSeriesConfig, ChartTable, ChartTooltip, ChartTooltipContent, ChartTooltipContentProps, ChartTooltipProps, chartColor } from "./Chart.js";
+export { Chart, type ChartAspect, type ChartColor, type ChartConfig, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartLegendProps, type ChartProps, type ChartSeriesConfig, type ChartTable, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipProps, chartColor };

package/dist/components/chart/index.js

@@ -0,0 +1 @@
+export { Chart, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, chartColor } from "./Chart.js";

package/dist/components/combobox/Combobox.d.ts

@@ -0,0 +1,52 @@
+import { JSX, Ref } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+/** One option: the value that is stored and the text people see. A plain string stands for both. */
+export type ComboboxItem = string | {
+  value: string;
+  label: string;
+};
+/** The props of Combobox: one choice from a list, with a search field. */
+export type ComboboxProps = {
+  /** The options. Strings or { value, label } objects. */
+  items: readonly ComboboxItem[];
+  /** The chosen value for a controlled combobox, or null for none. */
+  value?: string | null;
+  /** The value to start with when the combobox keeps its own state. */
+  defaultValue?: string | null;
+  /** Called with the new value, or null when the choice is cleared. */
+  onValueChange?: (value: string | null, eventDetails: Combobox.Root.ChangeEventDetails) => void;
+  /** The text shown while nothing is chosen. */
+  placeholder?: string;
+  /** The text shown when the search matches no option. Defaults to "No results found". */
+  emptyText?: string;
+  /** Marks the field invalid and draws the error ring, as on every form control. Field sets it when it shows an error. */
+  'aria-invalid'?: boolean | 'true' | 'false';
+  /** The same as aria-invalid, kept as its alias. */
+  invalid?: boolean;
+  /** Shows a button that clears the choice while one is made. Defaults to true. */
+  clearable?: boolean;
+  /** Stops people from changing the choice. */
+  disabled?: boolean;
+  /** The name of the field in a form. */
+  name?: string;
+  /** The accessible name when no label is wired to the field. */
+  'aria-label'?: string;
+  /** The ids of the elements that name the field. Field sets it to its label. */
+  'aria-labelledby'?: string;
+  /** The ids of the elements that describe the field, such as its hint or error. Field sets it. */
+  'aria-describedby'?: string;
+  /** Tells assistive technology that the field must be filled. Field sets it for a required field. */
+  'aria-required'?: boolean | 'true' | 'false';
+  /** The id of the input, for a label's htmlFor. */
+  id?: string;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A field to choose one option from a list, with a search: type to narrow the list, pick with the mouse or Enter.
+ * The field looks like an Input and the list like a Popover panel. For several choices shown as chips, use TagInput.
+ * Mark it invalid with aria-invalid; give the list an empty text with emptyText. Inside a Field, the label, hint, error
+ * and required mark reach the input.
+ */
+declare function Combobox$1({ items, value, defaultValue, onValueChange, placeholder, emptyText, 'aria-invalid': ariaInvalid, invalid, clearable, disabled, name, id, ref, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-required': ariaRequired }: ComboboxProps): JSX.Element;
+export { Combobox$1 as Combobox };