@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/stat-card.d.ts

@@ -7,7 +7,7 @@ export type TrendProps = {
     arrow?: boolean;
     children: ReactNode;
 };
-export declare function Trend({ direction, tone, arrow, children }: TrendProps): import("@types/react").JSX.Element;
+export declare function Trend({ direction, tone, arrow, children }: TrendProps): import("react").JSX.Element;
 export type SparklineProps = Omit<ComponentProps<"div">, "children"> & {
     values: readonly number[];
     /** The value at the box's foot; by default far enough under the lowest that the line floats. */
@@ -17,8 +17,11 @@ export type SparklineProps = Omit<ComponentProps<"div">, "children"> & {
     strokeWidth?: number;
     endPointSize?: number;
 };
-/** A run of values as a line filling its box; decorative, as the figure beside it says what it shows. */
-export declare function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth, endPointSize, className, ...props }: SparklineProps): import("@types/react").JSX.Element;
+/**
+ * A run of values as a line filling its box; decorative, as the figure beside it says what it
+ * shows. Under two values there is no line, and a dashed rule stands in for it.
+ */
+export declare function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth, endPointSize, className, ...props }: SparklineProps): import("react").JSX.Element;
 export type MetricCardProps = Omit<useRender.ComponentProps<"div">, "children" | "onSelect"> & {
     label: ReactNode;
     value: ReactNode;
@@ -30,5 +33,10 @@ export type MetricCardProps = Omit<useRender.ComponentProps<"div">, "children" |
     onSelect?: () => void;
     /** Makes the card a link; a router's link as `render` routes it. */
     href?: string;
+    /**
+     * `card` (the default) frames it on its own; in a row of tiles, `left` rules its leading edge
+     * and `none` leaves it bare.
+     */
+    divider?: "card" | "left" | "none";
 };
-export declare function MetricCard({ label, value, change, sparkline, onSelect, href, render, className, ...props }: MetricCardProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export declare function MetricCard({ label, value, change, sparkline, onSelect, href, divider, render, className, ...props }: MetricCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/stat-card.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /*
  * Figures for a dashboard. `MetricCard` is one figure: its label, its value, how it changed
  * (`Trend`) and its recent run (`Sparkline`); it can open what it counts. `Sparkline` is a blue
- * line over a flat tinted area that stretches to its box: the stroke keeps its width and the end
- * point is HTML, so neither distorts.
+ * line over an area that fades to its foot, stretched to its box: the stroke keeps its width, and
+ * the area and end point are HTML, so none of them distorts.
  */
 import { useRender } from "@base-ui/react/use-render";
 import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon } from "@phosphor-icons/react";
-import { css, cx } from "#primitives/css";
+import { css, cva, cx } from "#primitives/css";
 import { icon } from "./icon.js";
 import { cardSurface } from "./panel.js";
 /* A change beside a figure: which way it moved, and separately whether that is good. */
@@ -20,17 +20,28 @@ const trend = css({
     fontWeight: "medium",
     "&[data-tone=good]": { color: "accent.green" },
     "&[data-tone=bad]": { color: "accent.red" },
-    "&[data-tone=neutral]": { color: "fg.muted" },
+    "&[data-tone=neutral]": { color: "fg.label" },
     "& > svg": { flexShrink: "0" },
 });
 const trendText = css({ minWidth: "0", overflow: "hidden", textOverflow: "ellipsis" });
 const TREND_ARROWS = { up: ArrowUpIcon, down: ArrowDownIcon, flat: ArrowRightIcon };
 export function Trend({ direction, tone = "neutral", arrow = true, children }) {
     const Arrow = TREND_ARROWS[direction];
-    return (_jsxs("span", { className: trend, "data-tone": tone, "data-ciridae-ui": "", children: [arrow && _jsx(Arrow, { className: icon({ size: "compact" }), weight: "bold", "aria-hidden": "true" }), _jsx("span", { className: trendText, children: children })] }));
+    return (_jsxs("span", { className: trend, "data-tone": tone, "data-ciridae-ui": "", children: [arrow && _jsx(Arrow, { className: icon({ size: "compact" }), weight: "bold", "aria-hidden": "true" }), _jsx("span", { className: trendText, "data-trend-text": "", children: children })] }));
 }
-/* Sparkline: drawn into a 100x100 box that stretches to its container. */
-const plot = css({ position: "relative", color: "accent.blue" });
+/*
+ * Sparkline: drawn into a 100x100 box that stretches to its plot. The plot fills the box unless
+ * `--sparkline-plot-width` and `--sparkline-plot-height` size it, at the box's foot and start, so
+ * the end point's ring has room above and after the line.
+ */
+const plot = css({ position: "relative", color: "chart.trend" });
+const plotArea = css({
+    position: "absolute",
+    insetInlineStart: "0",
+    bottom: "0",
+    width: "var(--sparkline-plot-width, 100%)",
+    height: "var(--sparkline-plot-height, 100%)",
+});
 const svg = css({
     position: "absolute",
     inset: "0",
@@ -38,16 +49,31 @@ const svg = css({
     height: "100%",
     overflow: "visible",
 });
+// The area under the line, clipped to it, so its gradient runs top to foot whatever the box.
+const area = css({ position: "absolute", inset: "0", background: "token(gradients.chart.area)" });
+// The ring is the tile's face, so the point reads as cut out of the line.
 const endPoint = css({
     position: "absolute",
     borderRadius: "round",
-    background: "accent.blue",
+    background: "chart.trend",
     borderStyle: "solid",
-    borderColor: "bg.card",
+    borderColor: "bg.surface",
     translate: "-50% -50%",
 });
-/** A run of values as a line filling its box; decorative, as the figure beside it says what it shows. */
+// No run to draw: a dashed rule across the middle holds the line's place.
+const noRun = css({
+    position: "absolute",
+    insetInline: "0",
+    top: "50%",
+    borderTop: "2px dashed token(colors.border.divider)",
+});
+/**
+ * A run of values as a line filling its box; decorative, as the figure beside it says what it
+ * shows. Under two values there is no line, and a dashed rule stands in for it.
+ */
 export function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth = 1.5, endPointSize = 6, className, ...props }) {
+    if (values.length < 2)
+        return (_jsx("div", { "aria-hidden": "true", ...props, className: cx(plot, className), "data-ciridae-ui": "", children: _jsx("span", { className: noRun }) }));
     const lowest = Math.min(...values);
     const high = ownHigh ?? Math.max(...values);
     const low = ownLow ?? lowest - (high - lowest) * 0.4;
@@ -56,31 +82,60 @@ export function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth = 1.
     const step = 100 / Math.max(values.length - 1, 1);
     const points = tops.map((top, index) => `${index * step},${top}`).join(" ");
     const lastTop = tops[tops.length - 1] ?? 100;
-    return (_jsxs("div", { "aria-hidden": "true", ...props, className: cx(plot, className), "data-ciridae-ui": "", children: [_jsxs("svg", { className: svg, viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [_jsx("polygon", { points: `0,100 ${points} 100,100`, fill: "currentColor", fillOpacity: 0.08 }), _jsx("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] }), _jsx("span", { className: endPoint, style: {
-                    insetInlineStart: "100%",
-                    top: `${lastTop}%`,
-                    width: endPointSize,
-                    height: endPointSize,
-                    borderWidth: strokeWidth,
-                } })] }));
+    const areaOutline = tops.map((top, index) => `${index * step}% ${top}%`).join(", ");
+    return (_jsx("div", { "aria-hidden": "true", ...props, className: cx(plot, className), "data-ciridae-ui": "", children: _jsxs("span", { className: plotArea, children: [_jsx("span", { className: area, style: { clipPath: `polygon(0% 100%, ${areaOutline}, 100% 100%)` } }), _jsx("svg", { className: svg, viewBox: "0 0 100 100", preserveAspectRatio: "none", children: _jsx("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) }), _jsx("span", { className: endPoint, style: {
+                        insetInlineStart: "100%",
+                        top: `${lastTop}%`,
+                        width: endPointSize,
+                        height: endPointSize,
+                        borderWidth: strokeWidth,
+                    } })] }) }));
 }
-/* Metric card: a figure with its change, and its run beside it. */
-const metricCard = css(cardSurface, {
-    display: "flex",
-    gap: "layout.contentGap",
-    padding: "panel.comfortable",
-    color: "fg.primary",
-    font: "inherit",
-    textAlign: "start",
-    textDecoration: "none",
-    lineHeight: "tight",
-    "&:is(button, a)": { cursor: "pointer", _hover: { borderColor: "border.glass" } },
-    _focusVisible: { focusRing: "outer" },
-    "& > [data-sparkline]": {
-        width: "84px",
-        height: "25px",
-        flexShrink: "0",
-        alignSelf: "flex-end",
+/*
+ * Metric card: a figure with its change, and its run beside it. A tile in a row of them drops the
+ * card for a rule on its leading edge, or for nothing, and its label steps back to the label grey.
+ * The change's words are the label grey too, the kit's Stat tile: its arrow carries the tone.
+ * The run sits in the kit's 88x32 chart slot, its line in the slot's lower 84x25.
+ */
+const metricCard = cva({
+    base: {
+        display: "flex",
+        gap: "layout.contentGap",
+        padding: "panel.comfortable",
+        color: "fg.primary",
+        font: "inherit",
+        textAlign: "start",
+        textDecoration: "none",
+        lineHeight: "tight",
+        "&:is(button, a)": { cursor: "pointer" },
+        _focusVisible: { focusRing: "outer" },
+        "& [data-trend-text]": { color: "fg.label" },
+        "& > [data-sparkline]": {
+            "--sparkline-plot-width": "token(sizes.sparkline.plotWidth)",
+            "--sparkline-plot-height": "token(sizes.sparkline.plotHeight)",
+            width: "sparkline.width",
+            height: "sparkline.height",
+            flexShrink: "0",
+            alignSelf: "flex-end",
+        },
+    },
+    variants: {
+        divider: {
+            card: { ...cardSurface, "&:is(button, a)": { _hover: { borderColor: "border.glass" } } },
+            left: {
+                minWidth: "0",
+                border: "0",
+                borderInlineStart: "1px solid token(colors.border.panel)",
+                background: "transparent",
+                "& [data-metric-label]": { color: "fg.label" },
+            },
+            none: {
+                minWidth: "0",
+                border: "0",
+                background: "transparent",
+                "& [data-metric-label]": { color: "fg.label" },
+            },
+        },
     },
 });
 const metricCopy = css({
@@ -97,7 +152,7 @@ const metricValue = css({
     lineHeight: "tight",
     fontVariantNumeric: "tabular-nums",
 });
-export function MetricCard({ label, value, change, sparkline, onSelect, href, render, className, ...props }) {
+export function MetricCard({ label, value, change, sparkline, onSelect, href, divider = "card", render, className, ...props }) {
     return useRender({
         defaultTagName: href !== undefined ? "a" : onSelect !== undefined ? "button" : "div",
         render,
@@ -109,9 +164,9 @@ export function MetricCard({ label, value, change, sparkline, onSelect, href, re
                     : {}),
             ...props,
             onClick: onSelect,
-            className: cx(metricCard, className),
+            className: cx(metricCard({ divider }), className),
             "data-ciridae-ui": "",
-            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: metricCopy, children: [_jsx("span", { className: metricLabel, children: label }), _jsx("span", { className: metricValue, children: value }), change && _jsx(Trend, { ...change })] }), sparkline && _jsx(Sparkline, { values: sparkline, "data-sparkline": "" })] })),
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: metricCopy, children: [_jsx("span", { className: metricLabel, "data-metric-label": "", children: label }), _jsx("span", { className: metricValue, children: value }), change && _jsx(Trend, { ...change })] }), sparkline && _jsx(Sparkline, { values: sparkline, "data-sparkline": "" })] })),
         },
     });
 }

package/dist/components/status-banner.d.ts

@@ -14,4 +14,4 @@ export type StatusBannerProps = Omit<ComponentProps<"div">, "title"> & {
     /** The locale's "Dismiss" by default. */
     dismissLabel?: string;
 };
-export declare function StatusBanner({ title, description, tone, emphasis, action, onDismiss, dismissLabel, className, ...props }: StatusBannerProps): import("@types/react").JSX.Element;
+export declare function StatusBanner({ title, description, tone, emphasis, action, onDismiss, dismissLabel, className, ...props }: StatusBannerProps): import("react").JSX.Element;

package/dist/components/status-banner.js

@@ -70,7 +70,7 @@ const bannerIcon = cva({
             neutral: { color: "fg.muted" },
             info: { color: "accent.blue" },
             success: { color: "accent.green" },
-            warning: { color: "accent.yellow" },
+            warning: { color: "accent.yellowIcon" },
             danger: { color: "accent.red" },
         },
     },

package/dist/components/status.d.ts

@@ -21,12 +21,12 @@ export type StatusProps = ComponentProps<"span"> & {
     /** Shows only the icon, with the children as its tooltip and accessible name. */
     iconOnly?: boolean;
 };
-export declare function Status({ variant, iconOnly, className, style, ...props }: StatusProps): import("@types/react").JSX.Element;
+export declare function Status({ variant, iconOnly, className, style, ...props }: StatusProps): import("react").JSX.Element;
 export type PendingTextProps = Omit<ComponentProps<"span">, "children"> & {
     children: ReactNode;
     /** `centered` holds the place of a page or panel that is still loading. */
     placement?: "inline" | "centered";
 };
 /** Work in progress, named: the spinner and a label such as "Signing in…", announced as a status. */
-export declare function PendingText({ children, placement, className, ...props }: PendingTextProps): import("@types/react").JSX.Element;
+export declare function PendingText({ children, placement, className, ...props }: PendingTextProps): import("react").JSX.Element;
 export {};

package/dist/components/steps.d.ts

@@ -14,4 +14,4 @@ export type StepContent = {
 export declare function Steps({ steps, notes, }: {
     steps: readonly StepContent[];
     notes?: readonly string[];
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/switch.d.ts

@@ -3,4 +3,4 @@ import type { ComponentProps } from "react";
 export type SwitchProps = Omit<ComponentProps<typeof BaseSwitch.Root>, "className"> & {
     className?: string;
 };
-export declare function Switch({ className, ...props }: SwitchProps): import("@types/react").JSX.Element;
+export declare function Switch({ className, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/components/tabs.d.ts

@@ -2,11 +2,11 @@ import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import type { ComponentProps, ReactNode } from "react";
 export declare function TabsRoot({ className, ...props }: Omit<ComponentProps<typeof BaseTabs.Root>, "className"> & {
     className?: string;
-}): import("@types/react").JSX.Element;
-export declare const TabsPanel: import("@types/react").ForwardRefExoticComponent<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("@types/react").RefAttributes<HTMLDivElement>>;
+}): import("react").JSX.Element;
+export declare const TabsPanel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare function TabsGroup({ border, className, ...props }: ComponentProps<"span"> & {
     border?: "control" | "glass";
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 export declare function TabsList({ className, variant, overflow: ownOverflow, children, ...props }: Omit<ComponentProps<typeof BaseTabs.List>, "className"> & {
     className?: string;
     /**
@@ -19,7 +19,7 @@ export declare function TabsList({ className, variant, overflow: ownOverflow, ch
      * scrolls the row. `menu` in a `TabsBar`, `scroll` elsewhere.
      */
     overflow?: "menu" | "scroll";
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 export type TabsTabProps = Omit<ComponentProps<typeof BaseTabs.Tab>, "className"> & {
     className?: string;
     /** Tint the tab icon bronze while inactive, as the Projects hub type tabs do. */
@@ -32,17 +32,17 @@ export type TabsTabProps = Omit<ComponentProps<typeof BaseTabs.Tab>, "className"
     /** Muted after the label, such as how many rows the tab holds. */
     count?: ReactNode;
 };
-export declare function TabsTab({ className, iconTone, href, render, count: tabCount, children, ...props }: TabsTabProps): import("@types/react").JSX.Element;
+export declare function TabsTab({ className, iconTone, href, render, count: tabCount, children, ...props }: TabsTabProps): import("react").JSX.Element;
 /**
  * Wraps a page's `TabsBar` and the section below it, so the section can place its controls on the
  * tab row with `TabsBarActions` while keeping its own state.
  */
 export declare function TabsBarProvider({ children }: {
     children: ReactNode;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /** Section tabs (a `TabsRoot`) with a slot at the end of the row for the open section's controls. */
-export declare function TabsBar({ className, children, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+export declare function TabsBar({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 /** Renders the open section's controls at the end of the nearest `TabsBar` row. */
 export declare function TabsBarActions({ children }: {
     children: ReactNode;
-}): import("@types/react").ReactPortal | null;
+}): import("react").ReactPortal | null;

package/dist/components/tabs.js

@@ -22,14 +22,15 @@ const list = css({
     overflowX: "auto",
     scrollbarWidth: "none",
 });
-/** Finalization "Menu Tabs": tabs sit inside a bordered pill with a hairline inset. */
+/** Finalization "View tabs": tabs sit inside a grey pill well with a hairline inset. */
 const containedList = css({
     width: "max-content",
     padding: "control.trackInset",
     border: "1px solid token(colors.border.control)",
     borderRadius: "pill",
-    background: "bg.control",
-    gap: "control.trackInset",
+    background: "bg.field",
+    // Raised over the base list's own gap, as the text list's is.
+    "&[data-variant=contained]": { gap: "control.trackInset" },
 });
 /* Text tabs: words only, the open one in the primary text, for a tray's or a sheet's filters. */
 const textList = css({ "&[data-variant=text]": { gap: "layout.contentGap" } });
@@ -48,8 +49,9 @@ const tab = css({
     alignItems: "center",
     justifyContent: "center",
     gap: "control.iconGap",
-    height: "control.small",
+    height: "control.restingTab",
     paddingInline: "control.tabInline",
+    // The open tab's edge's own 1px, kept at rest too so a tab keeps its width as it opens.
     border: "1px solid transparent",
     borderRadius: "pill",
     background: "transparent",
@@ -62,19 +64,26 @@ const tab = css({
     cursor: "pointer",
     flexShrink: "0",
     "&[data-icon-tone=bronze] svg": { color: "accent.bronze" },
-    _before: { display: "none" },
+    // The open tab is raised on the secondary button's face, with its gradient edge and soft shadow.
+    _before: { display: "none", background: "token(gradients.border.raised)" },
     _hover: {
-        background: "bg.hover",
+        background: "bg.controlHover",
         color: "fg.primary",
         "& svg": { color: "inherit" },
-        _before: { display: "block" },
     },
     "&[data-active]": {
-        background: "bg.selected",
+        background: "token(gradients.raised)",
+        boxShadow: "soft",
         color: "fg.primary",
         "& svg": { color: "inherit" },
         _before: { display: "block" },
     },
+    // On a face, the words read in the primary ink in light, where only the open tab is raised, and
+    // the open tab stands 2px taller than the rest.
+    "[data-variant=plain] > &, [data-variant=contained] > &": {
+        _light: { color: "fg.primary" },
+        "&[data-active]": { height: "control.small", _phone: { height: "control.compact" } },
+    },
     // Words only: no face, no inset, and focus underlines the word rather than boxing it.
     "[data-variant=text] > &": {
         height: "auto",
@@ -83,8 +92,8 @@ const tab = css({
         border: "0",
         background: "transparent",
         _hover: { background: "transparent" },
-        "&[data-active]": { background: "transparent" },
-        // No glass edge either: the open word is the only mark.
+        "&[data-active]": { background: "transparent", boxShadow: "none" },
+        // No edge either: the open word is the only mark.
         "&::before, &:hover::before, &[data-active]::before": { display: "none" },
         _focusVisible: {
             boxShadow: "none",
@@ -103,7 +112,11 @@ const tab = css({
         marginBottom: "-1px",
         background: "transparent",
         _hover: { background: "transparent" },
-        "&[data-active]": { background: "transparent", borderBottomColor: "fg.primary" },
+        "&[data-active]": {
+            background: "transparent",
+            boxShadow: "none",
+            borderBottomColor: "fg.primary",
+        },
         "&::before, &:hover::before, &[data-active]::before": { display: "none" },
         _phone: { height: "control.search", paddingInline: "none" },
     },
@@ -190,7 +203,7 @@ export function TabsList({ className, variant = "plain", overflow: ownOverflow,
     const overflow = ownOverflow ?? (inBar ? "menu" : "scroll");
     const { labels } = useCiridaeLocale();
     const { listRef, moreRef, overflowed, activeHidden, activate } = useOverflowedTabs(overflow === "menu", children);
-    return (_jsxs(BaseTabs.List, { ...props, ref: listRef, className: cx(list, variant === "contained" && containedList, variant === "text" && textList, variant === "underline" && underlineList, className), "data-ciridae-ui": "", "data-variant": variant, children: [children, overflow === "menu" && overflowed.length > 0 && (_jsx(Menu, { align: "end", trigger: _jsx("button", { type: "button", ref: moreRef, className: tab, "aria-label": labels.common.moreTabs, "data-ciridae-ui": "", "data-edge": "glass", "data-active": activeHidden || undefined, children: _jsx(DotsThreeIcon, { className: icon({ size: "small" }), weight: "bold" }) }), items: overflowed.map((item) => ({
+    return (_jsxs(BaseTabs.List, { ...props, ref: listRef, className: cx(list, variant === "contained" && containedList, variant === "text" && textList, variant === "underline" && underlineList, className), "data-ciridae-ui": "", "data-variant": variant, children: [children, overflow === "menu" && overflowed.length > 0 && (_jsx(Menu, { align: "end", trigger: _jsx("button", { type: "button", ref: moreRef, className: tab, "aria-label": labels.common.moreTabs, "data-ciridae-ui": "", "data-edge": "gradient", "data-active": activeHidden || undefined, children: _jsx(DotsThreeIcon, { className: icon({ size: "small" }), weight: "bold" }) }), items: overflowed.map((item) => ({
                     label: item.label,
                     meta: item.count,
                     onSelect: () => activate(item.index),
@@ -198,7 +211,7 @@ export function TabsList({ className, variant = "plain", overflow: ownOverflow,
 }
 export function TabsTab({ className, iconTone, href, render, count: tabCount, children, ...props }) {
     const link = href !== undefined || render !== undefined;
-    return (_jsxs(BaseTabs.Tab, { ...props, render: render ?? (href !== undefined ? _jsx("a", { href: href }) : undefined), nativeButton: link ? false : props.nativeButton, className: cx(tab, className), "data-ciridae-ui": "", "data-edge": "glass", "data-icon-tone": iconTone, children: [children, tabCount !== undefined && tabCount !== null && (_jsx("span", { className: count, "data-tab-count": "", children: tabCount }))] }));
+    return (_jsxs(BaseTabs.Tab, { ...props, render: render ?? (href !== undefined ? _jsx("a", { href: href }) : undefined), nativeButton: link ? false : props.nativeButton, className: cx(tab, className), "data-ciridae-ui": "", "data-edge": "gradient", "data-icon-tone": iconTone, children: [children, tabCount !== undefined && tabCount !== null && (_jsx("span", { className: count, "data-tab-count": "", children: tabCount }))] }));
 }
 /*
  * A page's tabs share one row with the open section's controls: tabs that do not fit go into the

package/dist/components/theme-customizer.d.ts

@@ -40,7 +40,7 @@ export type UseThemeCustomizationOptions<Value extends ThemeCustomization> = {
  */
 export declare function useThemeCustomization<Value extends ThemeCustomization>({ defaultValue, fonts, persistKey, parse, }: UseThemeCustomizationOptions<Value>): {
     value: Value;
-    setValue: import("@types/react").Dispatch<import("@types/react").SetStateAction<Value>>;
+    setValue: import("react").Dispatch<import("react").SetStateAction<Value>>;
     reset: () => void;
     theme: Pick<CiridaeTheme, "fonts" | "palette">;
 };
@@ -50,4 +50,4 @@ export type ThemeCustomizerProps<Value extends ThemeCustomization> = Omit<Compon
     fonts: ThemeFontOptions;
     labels?: Partial<CiridaeLabels["themeCustomizer"]>;
 };
-export declare function ThemeCustomizer<Value extends ThemeCustomization>({ value, onValueChange, fonts, labels: ownLabels, className, ...props }: ThemeCustomizerProps<Value>): import("@types/react").JSX.Element;
+export declare function ThemeCustomizer<Value extends ThemeCustomization>({ value, onValueChange, fonts, labels: ownLabels, className, ...props }: ThemeCustomizerProps<Value>): import("react").JSX.Element;

package/dist/components/theme-toggle.d.ts

@@ -0,0 +1,4 @@
+/** Sets the color theme the `ThemeProvider` keeps: light, dark, or the operating system's. */
+export declare function ThemeToggle({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/theme-toggle.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleHalfIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
+import { css, cx } from "#primitives/css";
+import { useColorTheme } from "./color-theme.js";
+import { faceEdge } from "./gradient-edge.js";
+import { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+/*
+ * Light, dark or the system's theme, as three icon segments in a pale track: the chosen one is
+ * raised on the secondary button's face, its icon in the primary ink, the others a step quieter.
+ */
+const track = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.trackInset",
+    padding: "control.trackInset",
+    // The design lays the track's edge over its inset, and rounds it to its options' corners.
+    border: "0",
+    borderRadius: "calc(token(radii.inset) + token(spacing.control.trackInset))",
+    background: "token(gradients.panel)",
+});
+const option = css({
+    display: "inline-grid",
+    placeItems: "center",
+    width: "control.small",
+    height: "calc(token(sizes.control.small) - 2 * token(spacing.control.trackInset))",
+    padding: "none",
+    border: "0",
+    borderRadius: "inset",
+    background: "transparent",
+    color: "fg.secondary",
+    cursor: "pointer",
+    transitionProperty: "background, color",
+    transitionDuration: "fast",
+    _hover: { color: "fg.primary" },
+    _focusVisible: { focusRing: "outer" },
+    _before: { display: "none", background: "token(gradients.border.raised)" },
+    "&[aria-pressed=true]": {
+        background: "token(gradients.raised)",
+        color: "fg.primary",
+        _before: { display: "block" },
+    },
+});
+/** Sets the color theme the `ThemeProvider` keeps: light, dark, or the operating system's. */
+export function ThemeToggle({ className }) {
+    const { preference, setPreference } = useColorTheme();
+    const { labels } = useCiridaeLocale();
+    const trackEdge = faceEdge("raised");
+    const choices = [
+        {
+            value: "light",
+            label: labels.themeCustomizer.light,
+            glyph: _jsx(SunIcon, { className: icon({ size: "small" }) }),
+        },
+        {
+            value: "dark",
+            label: labels.themeCustomizer.dark,
+            glyph: _jsx(MoonIcon, { className: icon({ size: "small" }) }),
+        },
+        {
+            value: "system",
+            label: labels.themeCustomizer.system,
+            glyph: _jsx(CircleHalfIcon, { className: icon({ size: "small" }) }),
+        },
+    ];
+    return (_jsx("div", { role: "group", "aria-label": labels.themeCustomizer.colorTheme, className: cx(track, trackEdge.className, className), "data-ciridae-ui": "", "data-edge": trackEdge["data-edge"], children: choices.map((choice) => (_jsx("button", { type: "button", "aria-label": choice.label, "aria-pressed": preference === choice.value, className: option, "data-ciridae-ui": "", "data-edge": "gradient", onClick: () => setPreference(choice.value), children: choice.glyph }, choice.value))) }));
+}

package/dist/components/toast.d.ts

@@ -2,7 +2,7 @@ import { toast, type ToasterProps } from "sonner";
 import type { ComponentProps, ReactNode } from "react";
 export { toast };
 /** The toast stack, in the kit's look: mount one at the app's root. */
-export declare function Toaster(props: ToasterProps): import("@types/react").JSX.Element;
+export declare function Toaster(props: ToasterProps): import("react").JSX.Element;
 export type ToastVariant = "success" | "progress" | "info" | "warning" | "error";
 export type ToastOptions = {
     title: ReactNode;
@@ -11,11 +11,18 @@ export type ToastOptions = {
     variant?: ToastVariant;
     /** Milliseconds it stays; `0` keeps it until dismissed. An error stays by default. */
     timeout?: number;
-    /** One text button, such as Undo; its children are the label. */
+    /**
+     * One small secondary button, such as Undo; its children are the label. It closes the toast, and
+     * takes the close button's place.
+     */
     actionProps?: Pick<ComponentProps<"button">, "children" | "onClick">;
+    /** Replaces the toast already shown with this id, such as a progress toast moving along. */
+    id?: string | number;
+    /** How far a `progress` toast is, 0 to 100, shown as a track and a percentage after its message. */
+    percent?: number;
 };
 /** Raises a toast with the kit's options, returning its id. */
-declare function addToast({ title: message, description: detail, variant, timeout, actionProps, }: ToastOptions): string | number;
+declare function addToast({ title: ownMessage, description: detail, variant, timeout, actionProps, id, percent, }: ToastOptions): string | number;
 /** The kit's toast calls: `add` raises one and returns its id, `close` dismisses it. */
 export declare function useToast(): {
     add: typeof addToast;