@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/radio-card.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Radio as BaseRadio } from "@base-ui/react/radio";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
 import { css, cx } from "#primitives/css";
-import { checkMark, radioDot } from "./form-controls.js";
+import { checkMark, checkMarkEdge, radioDot } from "./form-controls.js";
 /*
  * A choice drawn as a card: the radio, a title with its detail, and where the option comes from
  * at the far edge. The whole card is the radio, so it takes the hover wash, the focus ring, and,
- * once chosen, the accent wash under the accent's edge.
+ * once chosen, the selected tint under an edge in the text color.
  */
 const cards = css({ display: "grid", gap: "layout.controlGap" });
 const card = css({
@@ -28,10 +28,10 @@ const card = css({
     cursor: "pointer",
     transitionProperty: "background, border-color",
     transitionDuration: "fast",
-    _hover: { background: "bg.glassHover" },
+    _hover: { background: "token(gradients.raisedHover)" },
     "&[data-checked]": {
-        background: "bg.selected",
-        borderColor: "border.selected",
+        background: "token(gradients.selected)",
+        borderColor: "fg.primary",
     },
     _focusVisible: { focusRing: "outer" },
     "&[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
@@ -42,10 +42,11 @@ const mark = css({
     // the mark down.
     marginTop: "calc((1em - token(sizes.control.radio)) / 2)",
     "[data-checked] > &": {
-        background: "bg.primary",
-        borderColor: "transparent",
+        background: "token(gradients.primary)",
+        _light: { background: "token(gradients.primary)" },
+        _before: { background: "token(gradients.border.primary)" },
     },
-    "[data-checked]:hover > &": { background: "bg.primaryHover" },
+    "[data-checked]:hover > &": { opacity: "checkedHover", _light: { opacity: "1" } },
 });
 const copy = css({ flex: "1", minWidth: "0", display: "grid", gap: "layout.tightGap" });
 const detailText = css({ color: "fg.muted", fontSize: "code" });
@@ -62,5 +63,5 @@ export function RadioCardGroup({ name, label, defaultValue, value, onValueChange
 }
 /** One option of a `RadioCardGroup`. */
 export function RadioCard({ title, detail, source: sourceContent, className, ...props }) {
-    return (_jsxs(BaseRadio.Root, { ...props, className: cx(card, className), "data-ciridae-ui": "", children: [_jsx("span", { className: cx(checkMark({ shape: "round", focus: "row" }), mark), children: _jsx(BaseRadio.Indicator, { className: radioDot }) }), _jsxs("span", { className: copy, children: [_jsx("span", { children: title }), detail !== undefined && _jsx("span", { className: detailText, children: detail })] }), sourceContent !== undefined && _jsx("span", { className: source, children: sourceContent })] }));
+    return (_jsxs(BaseRadio.Root, { ...props, className: cx(card, className), "data-ciridae-ui": "", children: [_jsx("span", { ...checkMarkEdge, className: cx(checkMark({ shape: "round", focus: "row" }), mark), children: _jsx(BaseRadio.Indicator, { className: radioDot }) }), _jsxs("span", { className: copy, children: [_jsx("span", { children: title }), detail !== undefined && _jsx("span", { className: detailText, children: detail })] }), sourceContent !== undefined && _jsx("span", { className: source, children: sourceContent })] }));
 }

package/dist/components/record.d.ts

@@ -20,7 +20,7 @@ export type DetailLayoutProps = Omit<ComponentProps<"div">, "children"> & {
         aside: ReactNode;
     };
 };
-export declare function DetailLayout({ header, main, aside, stackBelow, stickyAside, stacking, tabLabels, className, ...props }: DetailLayoutProps): import("@types/react").JSX.Element;
+export declare function DetailLayout({ header, main, aside, stackBelow, stickyAside, stacking, tabLabels, className, ...props }: DetailLayoutProps): import("react").JSX.Element;
 /** The record's title row is the page's: `PageHeading`, with `leading`, `badge` and menu `actions`. */
 export { PageHeading, type PageHeadingProps } from "./page-frame.js";
 export type RelatedTab = {
@@ -39,7 +39,7 @@ export type RelatedTabsProps = Omit<ComponentProps<typeof TabsRoot>, "children"
     defaultValue?: string;
     onValueChange?: (value: string) => void;
 };
-export declare function RelatedTabs({ tabs, value, defaultValue, onValueChange, className, ...props }: RelatedTabsProps): import("@types/react").JSX.Element | null;
+export declare function RelatedTabs({ tabs, value, defaultValue, onValueChange, className, ...props }: RelatedTabsProps): import("react").JSX.Element | null;
 export type ItemCardField = {
     label: ReactNode;
     value: ReactNode;
@@ -48,7 +48,7 @@ export type ItemCardField = {
 };
 export type ItemCardProps = Omit<useRender.ComponentProps<"button">, "children" | "onSelect"> & {
     title: ReactNode;
-    /** One segment per stage, in its status's color. */
+    /** One dot per stage, in its status. */
     progress?: readonly StepStatus[];
     fields: readonly ItemCardField[];
     /** The footer's start: the stage the item is at. */
@@ -63,7 +63,31 @@ export type ItemCardProps = Omit<useRender.ComponentProps<"button">, "children"
     onSelect?: () => void;
     href?: string;
 };
-export declare function ItemCard({ title, progress, fields, status, footer, selected, onSelect, href, render, className, style, ...props }: ItemCardProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export declare function ItemCard({ title, progress, fields, status, footer, selected, onSelect, href, render, className, style, ...props }: ItemCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PartRowProps = Omit<ComponentProps<"div">, "children" | "onSelect"> & {
+    /** `wide` is one line, as in a table; `compact` stacks for a narrow column. */
+    layout?: "wide" | "compact";
+    name: ReactNode;
+    /** Under the name, such as the part's phase and amount. */
+    detail?: ReactNode;
+    /** One dot per step, in its status; the kit draws at most four. */
+    progress: readonly StepStatus[];
+    /** The stage the part is at. */
+    stage: ReactNode;
+    /** Whose move it is: `yourMove` sets the next step in the ink, the others in grey. */
+    state: "yourMove" | "waiting" | "done" | "notStarted";
+    /** Before the next step, such as a "Your move" badge. */
+    badge?: ReactNode;
+    next: ReactNode;
+    /** The part's one button, for the reader's move or a nudge while waiting. */
+    action?: {
+        label: ReactNode;
+        onClick: () => void;
+    };
+    selected?: boolean;
+    onSelect?: () => void;
+};
+export declare function PartRow({ layout, name, detail, progress, stage, state, badge, next, action, selected, onSelect, className, ...props }: PartRowProps): import("react").JSX.Element;
 export type RelatedListItem = {
     id: string;
     title: ReactNode;
@@ -92,4 +116,4 @@ export type RelatedListProps = Omit<ComponentProps<"div">, "children"> & {
     /** After the groups, such as a button that links another record. */
     footer?: ReactNode;
 };
-export declare function RelatedList({ groups, footer, className, ...props }: RelatedListProps): import("@types/react").JSX.Element;
+export declare function RelatedList({ groups, footer, className, ...props }: RelatedListProps): import("react").JSX.Element;

package/dist/components/record.js

@@ -2,13 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /*
  * The pieces a record's page is laid out with. `DetailLayout` splits it into the work and a side
  * column; `PageHeading` (also exported here) is the record's title row; `RelatedTabs` is the tabbed card of what the
- * record holds; `ItemCard` is one of a record's parts, such as a shipment or a draw; `RelatedList`
+ * record holds; `ItemCard` is one of a record's parts, such as a shipment or a draw, as a card and `PartRow` as
+ * a row; `RelatedList`
  * lists the records and documents it points at.
  */
 import { useRender } from "@base-ui/react/use-render";
 import { CaretRightIcon } from "@phosphor-icons/react";
-import { useLayoutEffect, useRef, useState, } from "react";
+import { Fragment, useLayoutEffect, useRef, useState, } from "react";
 import { css, cx } from "#primitives/css";
+import { Button } from "./button.js";
 import { useControllableState } from "./controllable-state.js";
 import { directional, icon } from "./icon.js";
 import { MutedText } from "./layout.js";
@@ -110,7 +112,10 @@ export function RelatedTabs({ tabs, value, defaultValue, onValueChange, classNam
         return null;
     return (_jsxs(TabsRoot, { value: open.value, onValueChange: (next) => setChosen(String(next)), ...props, className: cx(relatedCard, className), "data-ciridae-ui": "", children: [_jsxs("div", { className: relatedHeader, children: [_jsx(TabsList, { variant: "contained", children: tabs.map((tab) => (_jsx(TabsTab, { value: tab.value, count: tab.count, children: tab.label }, tab.value))) }), open.meta !== undefined && _jsx(MutedText, { className: relatedMeta, children: open.meta })] }), tabs.map((tab) => (_jsx(TabsPanel, { value: tab.value, children: tab.content }, tab.value)))] }));
 }
-/* Item card: one of a record's parts, with its progress as a thin segmented bar. */
+/*
+ * Item card: one of a record's parts, the kit's Part card, with its progress as a mini strip of
+ * step dots. The chosen one lifts onto the solid card inside a green edge.
+ */
 const itemCard = css(cardSurface, {
     display: "grid",
     gap: "layout.clusterGap",
@@ -121,7 +126,11 @@ const itemCard = css(cardSurface, {
     letterSpacing: "compact",
     textDecoration: "none",
     "&:is(button, a)": { cursor: "pointer", _hover: { borderColor: "border.glass" } },
-    "&[data-selected]": { borderColor: "accent.green", _hover: { borderColor: "accent.green" } },
+    "&[data-selected]": {
+        borderColor: "accent.green",
+        boxShadow: "soft",
+        _hover: { borderColor: "accent.green" },
+    },
     _focusVisible: { focusRing: "outer" },
 });
 const itemHeader = css({
@@ -131,20 +140,27 @@ const itemHeader = css({
     gap: "layout.controlGap",
     fontSize: "body",
     fontWeight: "medium",
+    lineHeight: "tight",
     whiteSpace: "nowrap",
 });
-const progressBar = css({ display: "inline-flex", alignItems: "center", gap: "2px" });
-const progressSegment = css({
-    width: "14px",
-    height: "4px",
-    borderRadius: "1px",
-    background: "bg.fill",
-    "&[data-status=done]": { background: "accent.green" },
-    "&[data-status=current]": { background: "accent.yellow" },
-    "&[data-status=agent]": { background: "accent.blue" },
-    "&[data-status=blocked]": { background: "accent.red" },
-    "&[data-status=waiting]": { background: "fg.muted" },
+const progressStrip = css({
+    display: "inline-flex",
+    flexShrink: "0",
+    alignItems: "center",
+    gap: "layout.tightGap",
+});
+// 16px between dots, green out of a finished step as the stage strip's connectors are.
+const progressConnector = css({
+    width: "token(spacing.layout.clusterGap)",
+    height: "border.hairline",
+    borderRadius: "round",
+    background: "border.divider",
+    "&[data-after=done]": { background: "accent.green" },
 });
+/** A part's progress: one 12px dot a step, joined by 16px connectors. */
+function MiniStrip({ progress }) {
+    return (_jsx("span", { className: progressStrip, "aria-hidden": "true", children: progress.map((step, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { className: progressConnector, "data-after": progress[index - 1] === "done" ? "done" : undefined })), _jsx(StepDot, { status: step, size: "chip" })] }, index))) }));
+}
 const itemFields = css({
     display: "grid",
     gap: "layout.controlGap",
@@ -155,7 +171,7 @@ const itemFields = css({
 const itemFieldLabel = css({
     display: "block",
     marginBottom: "layout.controlGap",
-    color: "fg.muted",
+    color: "fg.subtle",
     fontWeight: "regular",
     letterSpacing: "normal",
 });
@@ -188,10 +204,117 @@ export function ItemCard({ title, progress, fields, status, footer, selected = f
             "data-ciridae-ui": "",
             "data-selected": selected || undefined,
             "aria-pressed": onSelect !== undefined && href === undefined ? selected : undefined,
-            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: itemHeader, children: [title, progress && (_jsx("span", { className: progressBar, "aria-hidden": "true", children: progress.map((segment, index) => (_jsx("span", { className: progressSegment, "data-status": segment }, index))) }))] }), _jsxs("span", { className: css({ display: "grid" }), children: [_jsx("span", { className: itemFields, style: columns, children: fields.map((field, index) => (_jsxs("span", { children: [_jsx("span", { className: itemFieldLabel, children: field.label }), field.value] }, index))) }), _jsxs("span", { className: itemFooter, children: [_jsxs("span", { className: itemStatus, children: [_jsx(StepDot, { status: status.status, size: "small" }), status.label] }), footer] })] })] })),
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: itemHeader, children: [title, progress && _jsx(MiniStrip, { progress: progress })] }), _jsxs("span", { className: css({ display: "grid" }), children: [_jsx("span", { className: itemFields, style: columns, children: fields.map((field, index) => (_jsxs("span", { children: [_jsx("span", { className: itemFieldLabel, children: field.label }), field.value] }, index))) }), _jsxs("span", { className: itemFooter, children: [_jsxs("span", { className: itemStatus, children: [_jsx(StepDot, { status: status.status, size: "small" }), status.label] }), footer] })] })] })),
         },
     });
 }
+/*
+ * Part row: one of a record's parts as a table-like row, the kit's Part in its Wide and Compact
+ * layouts: name over detail, the mini strip, the stage, a badge for the reader's move, the next
+ * step and at most one action. Wide keeps it on one 56px line, wrapping the detail and next step
+ * only when the row is narrow; compact stacks the name and strip over the rest. The whole row chooses the part through its name; the action stays its own button.
+ */
+const partRow = css({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.clusterGap",
+    minHeight: "calc(token(sizes.control.compact) + token(spacing.panel.default) * 2)",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    borderBottom: "1px solid token(colors.border.divider)",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    "&:has([data-part-name]:hover)": { background: "bg.rowHover" },
+    "&[data-selected]": { background: "token(gradients.selected)" },
+    // Wide is a grid, so the strips and stages of a list of parts line up. The name and the next
+    // step share what the strip, stage and action leave, two parts to three, close to the kit's
+    // 240 and 488 in its 1092 row, so a narrow row narrows both rather than starving one.
+    "&[data-layout=wide]": {
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 2fr) max-content 90px minmax(0, 3fr) max-content",
+    },
+    "&[data-layout=compact]": {
+        flexDirection: "column",
+        alignItems: "stretch",
+        gap: "layout.tightGap",
+    },
+});
+const partLine = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    minWidth: "0",
+    "[data-layout=wide] > &": { display: "contents" },
+});
+const partName = css({
+    display: "grid",
+    gap: "control.trackInset",
+    flex: "1 1 0",
+    minWidth: "0",
+    textAlign: "start",
+    "& > *": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+});
+// The name is the row's button: its box stretches over the whole row.
+const partNameButton = css({
+    padding: "none",
+    border: "none",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    fontSize: "body",
+    textAlign: "start",
+    cursor: "pointer",
+    _after: { content: '""', position: "absolute", inset: "0" },
+    _focusVisible: { outline: "none", _after: { focusRing: "inset" } },
+});
+// A narrow wide row wraps the detail rather than cut off its amount.
+const partDetail = css({
+    color: "fg.subtle",
+    fontSize: "code",
+    "[data-layout=wide] &": { whiteSpace: "normal", lineHeight: "compact" },
+});
+const partStage = css({
+    flexShrink: "0",
+    color: "fg.subtle",
+    fontSize: "code",
+    whiteSpace: "nowrap",
+    "[data-layout=wide] &": { overflow: "hidden", textOverflow: "ellipsis" },
+});
+const partStatus = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    flexShrink: "0",
+    "[data-layout=wide] > * > &": { display: "contents" },
+});
+// Wide sets the badge after the stage, in the next step's cell; compact leads the status with it.
+const partNextCell = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.clusterGap",
+    minWidth: "0",
+    "[data-layout=compact] &": { display: "contents" },
+});
+const partBadge = css({
+    display: "inline-flex",
+    flexShrink: "0",
+    "[data-layout=compact] &": { order: "-1" },
+});
+// The step the reader acts on wraps in a narrow row, never cut short.
+const partNext = css({
+    minWidth: "0",
+    color: "fg.secondary",
+    fontSize: "caption",
+    lineHeight: "compact",
+    "[data-state=yourMove] &": { color: "fg.primary" },
+});
+// The action sits over the stretched name, so it stays its own button.
+const partAction = css({ position: "relative", flexShrink: "0" });
+export function PartRow({ layout = "wide", name, detail, progress, stage, state, badge, next, action, selected = false, onSelect, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cx(partRow, className), "data-ciridae-ui": "", "data-layout": layout, "data-state": state, "data-selected": selected || undefined, children: [_jsxs("span", { className: partLine, children: [_jsxs("span", { className: partName, children: [onSelect ? (_jsx("button", { type: "button", className: partNameButton, "data-part-name": "", "aria-pressed": selected, onClick: onSelect, children: name })) : (_jsx("span", { className: css({ fontSize: "body" }), children: name })), layout === "wide" && detail !== undefined && (_jsx("span", { className: partDetail, children: detail }))] }), _jsx(MiniStrip, { progress: progress })] }), _jsxs("span", { className: partLine, children: [layout === "compact" && _jsx("span", { className: cx(partName, partDetail), children: detail }), _jsxs("span", { className: partStatus, children: [_jsx("span", { className: partStage, children: stage }), _jsxs("span", { className: partNextCell, children: [badge !== undefined && _jsx("span", { className: partBadge, children: badge }), _jsx("span", { className: partNext, children: next })] }), action && (_jsx(Button, { variant: "secondary", className: partAction, onClick: action.onClick, children: action.label }))] })] })] }));
+}
 /* Related list: the records and documents a record points at, grouped by relation. */
 const groupHeader = css({
     display: "flex",
@@ -221,7 +344,11 @@ const relatedRow = css({
     font: "inherit",
     textAlign: "start",
     textDecoration: "none",
-    "&:is(button, a)": { cursor: "pointer", _hover: { background: "bg.rowHover" } },
+    // The kit's Linked record hovers to the selected glass in dark and the row wash in light.
+    "&:is(button, a)": {
+        cursor: "pointer",
+        _hover: { background: "token(gradients.selected)", _light: { background: "bg.rowHover" } },
+    },
     _focusVisible: { focusRing: "outer" },
 });
 const tile = css({
@@ -234,6 +361,7 @@ const tile = css({
     borderRadius: "action",
     background: "bg.panel",
     color: "fg.secondary",
+    _light: { background: "bg.field" },
     "& svg": { fontSize: "icon.small" },
 });
 const rowTitle = css({
@@ -251,6 +379,7 @@ const rowMeta = css({
     color: "fg.secondary",
     fontSize: "code",
     fontWeight: "medium",
+    lineHeight: "tight",
     "& [data-separator]": { color: "fg.muted" },
     "& [data-tone=info]": { color: "accent.blue" },
     "& [data-tone=success]": { color: "accent.green" },

package/dist/components/resolved-file-url.d.ts

@@ -0,0 +1,19 @@
+/** A file whose bytes load from `url`, or from what the resolver hands back when it has none. */
+export type ResolvableFile = {
+    id: string;
+    url?: string | null;
+};
+/**
+ * Hands back a browser-loadable link for a file without one, such as one served behind a bearer
+ * token, which the app downloads and serves from an object URL. Keep the function stable: its
+ * links are cached per function and file id, so a redraw does not load the file again.
+ */
+export type ResolveFileUrl<File extends ResolvableFile = ResolvableFile> = (file: File) => Promise<string>;
+/**
+ * The file's link: its own `url`, else the resolver's once it settles. `state` is `failed` when the
+ * resolver rejected, and `pending` while it runs or while `enabled` is false.
+ */
+export declare function useResolvedFileUrl<File extends ResolvableFile>(file: File | undefined, resolve: ResolveFileUrl<File> | undefined, enabled?: boolean): {
+    url: string | null;
+    state: "ready" | "pending" | "failed" | "none";
+};

package/dist/components/resolved-file-url.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from "react";
+const resolvedUrls = new WeakMap();
+function resolveOnce(resolve, file) {
+    let cache = resolvedUrls.get(resolve);
+    if (!cache) {
+        cache = new Map();
+        resolvedUrls.set(resolve, cache);
+    }
+    const cached = cache.get(file.id);
+    if (cached)
+        return cached;
+    const pending = resolve(file);
+    cache.set(file.id, pending);
+    // A failed load is not kept, so the next look at the file tries again.
+    pending.catch(() => cache.delete(file.id));
+    return pending;
+}
+/**
+ * The file's link: its own `url`, else the resolver's once it settles. `state` is `failed` when the
+ * resolver rejected, and `pending` while it runs or while `enabled` is false.
+ */
+export function useResolvedFileUrl(file, resolve, enabled = true) {
+    const direct = file?.url ?? null;
+    const [resolved, setResolved] = useState(null);
+    const fileId = file?.id;
+    // The file's id names it: a new object for the same file is not a new file to load.
+    const fileRef = useRef(file);
+    useEffect(() => {
+        fileRef.current = file;
+    });
+    useEffect(() => {
+        const file = fileRef.current;
+        if (!file || direct || !resolve || !enabled)
+            return;
+        let current = true;
+        resolveOnce(resolve, file).then((url) => current && setResolved({ id: file.id, url, failed: false }), () => current && setResolved({ id: file.id, url: null, failed: true }));
+        return () => {
+            current = false;
+        };
+    }, [fileId, direct, resolve, enabled]);
+    if (direct)
+        return { url: direct, state: "ready" };
+    if (!file || !resolve)
+        return { url: null, state: "none" };
+    const settled = resolved?.id === file.id ? resolved : null;
+    if (settled?.url)
+        return { url: settled.url, state: "ready" };
+    return { url: null, state: settled?.failed ? "failed" : "pending" };
+}

package/dist/components/scroll-area.d.ts

@@ -13,4 +13,4 @@ export declare function ScrollArea({ className, viewportClassName, scrollDirecti
     scrollDirections?: "vertical" | "vertical-and-horizontal";
     children: ReactNode;
     "aria-label"?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/secret-dialog.d.ts

@@ -7,4 +7,4 @@ export type IssuedSecret = {
 export declare function OneTimeSecretDialog({ issued, onClose, }: {
     issued: IssuedSecret | null;
     onClose: () => void;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/segmented-bar.d.ts

@@ -1,11 +1,13 @@
 import { type ComponentProps, type ReactNode } from "react";
 import type { Tone } from "./badge.js";
+/** A segment's hue: a tone by meaning, or `indigo`, the chart's category no status hue covers. */
+export type SegmentedBarHue = Tone | "indigo";
 export type SegmentedBarSegment = {
     id: string;
     label: string;
     value: number;
     /** The segment's color by meaning; `neutral` by default. */
-    tone?: Tone;
+    tone?: SegmentedBarHue;
     /** A color of its own, such as a CSS variable the app themes, over `tone`. */
     color?: string;
 };
@@ -20,4 +22,4 @@ export type SegmentedBarProps = Omit<ComponentProps<"div">, "children"> & {
     /** How a value reads in the legend and a segment's name; the locale's number by default. */
     formatValue?: (value: number) => string;
 };
-export declare function SegmentedBar({ segments, legend, renderDetail, onSegmentSelect, formatValue, className, ...props }: SegmentedBarProps): import("@types/react").JSX.Element;
+export declare function SegmentedBar({ segments, legend, renderDetail, onSegmentSelect, formatValue, className, ...props }: SegmentedBarProps): import("react").JSX.Element;

package/dist/components/segmented-bar.js

@@ -11,14 +11,16 @@ import { useCiridaeLocale } from "./locale.js";
 import { Popover } from "./overlays.js";
 const root = css({ display: "flex", flexDirection: "column", gap: "layout.sectionGap" });
 const bar = css({ display: "flex", gap: "layout.tightGap", height: "8px" });
+// The chart's data marks, so a segment and its swatch match the series in a chart.
 const toneColor = cva({
     variants: {
         tone: {
-            neutral: { background: "fg.subtle" },
-            info: { background: "accent.blue" },
-            success: { background: "accent.green" },
-            warning: { background: "accent.yellow" },
-            danger: { background: "accent.red" },
+            neutral: { background: "chart.neutral" },
+            info: { background: "chart.trend" },
+            success: { background: "chart.category2" },
+            warning: { background: "chart.category1" },
+            indigo: { background: "chart.category3" },
+            danger: { background: "chart.category4" },
         },
     },
 });
@@ -42,7 +44,15 @@ const legendRow = css({
     paddingTop: "panel.comfortable",
     borderTop: "1px solid token(colors.border.panel)",
 });
-const legendItem = css({ display: "inline-flex", alignItems: "center", gap: "layout.contentGap" });
+const legendItem = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    color: "fg.primary",
+    fontSize: "body",
+    fontWeight: "medium",
+    lineHeight: "tight",
+});
 const legendKey = css({
     display: "inline-flex",
     alignItems: "center",

package/dist/components/select.d.ts

@@ -18,20 +18,23 @@ export type SelectProps = {
     label?: string;
     /** `medium` is the Round 2 field height; `small` is the pill beside other filters. */
     size?: ControlSize;
-    /** Defaults to the flat `field` at medium and the glass `raised` face when small. */
-    variant?: "field" | "raised";
+    /**
+     * Defaults to the flat `field` at medium and the glass `raised` face when small. `underline` is
+     * a 34px row control at the body size, such as a table footer's rows per page, whatever `size`.
+     */
+    variant?: "field" | "raised" | "underline";
     /** Submits the value with an enclosing form under this name. */
     name?: string;
     /** Blocks the enclosing form's submission until a value is chosen. */
     required?: boolean;
     disabled?: boolean;
 };
-export declare function Select({ options, value, onValueChange, placeholder, label, size: controlSize, variant, name, required, disabled, }: SelectProps): import("@types/react").JSX.Element;
+export declare function Select({ options, value, onValueChange, placeholder, label, size: controlSize, variant, name, required, disabled, }: SelectProps): import("react").JSX.Element;
 export type SlicerProps = Omit<SelectProps, "size" | "variant" | "placeholder"> & {
     /** What the slicer filters by, shown muted before the chosen value. */
     label: string;
 };
-export declare function Slicer({ options, value, onValueChange, label, name, required, disabled, }: SlicerProps): import("@types/react").JSX.Element;
+export declare function Slicer({ options, value, onValueChange, label, name, required, disabled, }: SlicerProps): import("react").JSX.Element;
 export type ComboboxProps<Option extends SelectOption> = {
     options: readonly Option[];
     value?: string;
@@ -69,7 +72,7 @@ export type ComboboxProps<Option extends SelectOption> = {
  * itself. With `onSearch`, the caller owns the options: typing reports the query once it pauses,
  * and the list shows whatever `options` the caller passes back, with `loading` while it fetches.
  */
-export declare function Combobox<Option extends SelectOption>({ options, value, onValueChange, placeholder: ownPlaceholder, label: ownLabel, size: controlSize, renderOption, emptyMessage, name, required, disabled, onSearch, loading, defaultOpen, onOpenChange, autoFocus, }: ComboboxProps<Option>): import("@types/react").JSX.Element;
+export declare function Combobox<Option extends SelectOption>({ options, value, onValueChange, placeholder: ownPlaceholder, label: ownLabel, size: controlSize, renderOption, emptyMessage, name, required, disabled, onSearch, loading, defaultOpen, onOpenChange, autoFocus, }: ComboboxProps<Option>): import("react").JSX.Element;
 export declare function FilterPopover({ label, count, open, onOpenChange, onClear, children, }: {
     /** The locale's "Filters" by default. */
     label?: ReactNode;
@@ -81,4 +84,4 @@ export declare function FilterPopover({ label, count, open, onOpenChange, onClea
     onClear?: () => void;
     /** The filters, such as compact `Combobox` and `Slicer` pills. */
     children: ReactNode;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;