@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/button.d.ts

@@ -13,7 +13,12 @@ export type ButtonProps = Omit<BaseButtonProps, "className"> & {
     /** The hotkey that does what the button does, shown after its label; the host binds it. */
     shortcut?: Hotkey;
 };
-export declare function Button({ className, variant, size, fullWidth, loading, icon, shortcut, children, disabled, ...props }: ButtonProps): import("@types/react").JSX.Element;
+/**
+ * The size a `Button` takes where it does not set its own, so the container decides: a dialog's
+ * footer holds the default 38px buttons, where everywhere else the small one is the everyday.
+ */
+export declare const ButtonSizeContext: import("react").Context<NonNullable<"medium" | "large" | "small" | undefined>>;
+export declare function Button({ className, variant, size: ownSize, fullWidth, loading, icon, shortcut, children, disabled, ...props }: ButtonProps): import("react").JSX.Element;
 export type DataButtonState = "idle" | "pending" | "error" | "success";
 export type DataButtonProps = Omit<ButtonProps, "children" | "icon" | "loading"> & {
     state: DataButtonState;
@@ -24,19 +29,21 @@ export type DataButtonProps = Omit<ButtonProps, "children" | "icon" | "loading">
     icon?: ReactNode;
 };
 /** Async action button with consistent pending, retry, and completion feedback. */
-export declare function DataButton({ state, idleLabel, pendingLabel, errorLabel, successLabel, variant, icon, disabled, ...props }: DataButtonProps): import("@types/react").JSX.Element;
-type IconButtonSize = "compact" | "small" | "medium" | "large";
+export declare function DataButton({ state, idleLabel, pendingLabel, errorLabel, successLabel, variant, icon, disabled, ...props }: DataButtonProps): import("react").JSX.Element;
+type IconButtonSize = "compact" | "send" | "small" | "medium" | "large";
 /**
  * The size an `IconButton` takes where it does not set its own, so the container decides: the
  * sidebar rail's icons are large, and the same icon shown in the phone header matches the header's
  * small buttons.
  */
-export declare const IconButtonSizeContext: import("@types/react").Context<IconButtonSize>;
+export declare const IconButtonSizeContext: import("react").Context<IconButtonSize>;
 export type IconButtonProps = Omit<BaseButtonProps, "className" | "aria-label"> & {
     className?: string;
     "aria-label": string;
     size?: IconButtonSize;
     variant?: "raised" | "ghost" | "primary";
+    /** `square` is the 8-round square that leads a page title; buttons are otherwise round. */
+    shape?: "round" | "square";
     /**
      * `true` marks the button with a dot; a number shows that count, nothing at zero, and joins the
      * button's name so assistive tech hears it too.
@@ -48,5 +55,5 @@ export type IconButtonProps = Omit<BaseButtonProps, "className" | "aria-label">
      */
     shortcut?: Hotkey;
 };
-export declare function IconButton({ className, size, variant, badge, shortcut, children, "aria-label": label, ...props }: IconButtonProps): import("@types/react").JSX.Element;
+export declare function IconButton({ className, size, variant, shape, badge, shortcut, children, "aria-label": label, ...props }: IconButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/button.js

@@ -3,10 +3,14 @@ import { Button as BaseButton } from "@base-ui/react/button";
 import { CheckCircleIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { createContext, useContext } from "react";
 import { css, cva, cx } from "#primitives/css";
+import { faceEdge } from "./gradient-edge.js";
 import { formatForDisplay } from "./hotkeys.js";
 import { icon as iconStyle, Spinner } from "./icon.js";
 import { ShortcutHint } from "./keycap.js";
 import { useCiridaeLocale } from "./locale.js";
+/* The hover wash laid over a gradient face, as the design's state layer sits over it. */
+const raisedHoverLight = "linear-gradient(token(colors.bg.hover), token(colors.bg.hover)), token(gradients.raised)";
+const tintedHover = "linear-gradient(token(colors.bg.hover), token(colors.bg.hover)), token(gradients.tinted)";
 const action = cva({
     base: {
         display: "inline-flex",
@@ -14,8 +18,10 @@ const action = cva({
         alignItems: "center",
         justifyContent: "center",
         gap: "control.iconGap",
-        border: "1px solid",
-        borderRadius: "action",
+        // The design lays a button's edge over its padding rather than inside it, so no border.
+        border: "0",
+        // Buttons are pills at both heights.
+        borderRadius: "pill",
         height: "control.default",
         paddingInline: "control.inline",
         fontFamily: "sans",
@@ -36,67 +42,67 @@ const action = cva({
     },
     variants: {
         variant: {
-            // Round 2 buttons cast no shadow: each face is told apart by its fill and its edge alone.
+            /*
+             * Buttons cast no shadow: each face is told apart by its gradient fill and its gradient
+             * edge alone. Light has no hover on the primary face; dark lets a little of the surface
+             * through. A raised face takes the hover wash over its gradient in light, and thins in dark.
+             */
             primary: {
-                background: "bg.primary",
+                background: "token(gradients.primary)",
                 color: "bg.canvas",
                 _light: { color: "fg.onAccent" },
-                borderColor: "transparent",
-                _hover: { background: "bg.primaryHover" },
+                _hover: {
+                    background: "bg.primaryHover",
+                    _light: { background: "token(gradients.primary)" },
+                },
                 _active: { translate: "0 1px" },
             },
             secondary: {
-                background: "bg.raised",
+                background: "token(gradients.raised)",
                 color: "fg.primary",
-                borderColor: "transparent",
-                _hover: { background: "bg.raisedHover" },
+                _hover: { background: "bg.raisedHover", _light: { background: raisedHoverLight } },
                 _active: { translate: "0 1px" },
             },
             subtle: {
                 background: "bg.fill",
                 color: "fg.muted",
-                borderColor: "transparent",
                 _hover: { color: "fg.primary" },
                 _active: { translate: "0 1px" },
             },
-            // White in dark, muted in light: the one face whose text follows the theme differently.
+            // White in dark, the secondary grey in light: the one face whose text follows the theme
+            // differently.
             ghost: {
                 background: "transparent",
                 color: "fg.primary",
-                _light: { color: "fg.muted" },
-                borderColor: "transparent",
+                _light: { color: "fg.secondary" },
                 _hover: { color: "fg.primary", background: "bg.hover" },
             },
             // Warm glass with an amber edge and the warm accent for its text.
             tinted: {
-                background: "bg.tinted",
+                background: "token(gradients.tinted)",
                 color: "accent.yellow",
                 _light: { color: "accent.bronze" },
-                borderColor: "transparent",
-                _hover: { background: "bg.raisedHover" },
+                _hover: { background: tintedHover },
                 _active: { translate: "0 1px" },
             },
             // The secondary face with red text, for a destructive action that asks for confirmation:
             // it names the risk without being the loudest thing on the page. The confirmation's own
             // button is `danger`.
             secondaryDanger: {
-                background: "bg.raised",
+                background: "token(gradients.raised)",
                 color: "accent.red",
-                borderColor: "transparent",
-                _hover: { background: "bg.raisedHover" },
+                _hover: { background: "bg.raisedHover", _light: { background: raisedHoverLight } },
                 _active: { translate: "0 1px" },
             },
             danger: {
-                background: "bg.danger",
+                background: "token(gradients.danger)",
                 color: "fg.onAccent",
-                borderColor: "transparent",
                 _hover: { filter: "brightness(1.05)" },
                 _active: { translate: "0 1px" },
             },
             success: {
                 background: "accent.green",
                 color: "bg.canvas",
-                borderColor: "transparent",
                 _hover: { filter: "brightness(1.05)" },
                 _active: { translate: "0 1px" },
             },
@@ -104,8 +110,6 @@ const action = cva({
             link: {
                 background: "transparent",
                 color: "fg.primary",
-                borderColor: "transparent",
-                borderWidth: "0",
                 fontFamily: "inherit",
                 fontWeight: "inherit",
                 letterSpacing: "inherit",
@@ -134,22 +138,30 @@ const action = cva({
     // Small is the everyday button; medium and large are for a page's one main action.
     defaultVariants: { variant: "primary", size: "small" },
 });
-// The glass faces draw a hairline, which is their outline; a filled face draws none.
+// Each gradient face draws its own gradient edge; the flat faces draw a hairline or none.
 const buttonEdges = {
-    primary: undefined,
-    secondary: "glass",
+    primary: "primary",
+    secondary: "raised",
     subtle: "glass",
     ghost: undefined,
-    tinted: undefined,
-    secondaryDanger: "glass",
-    danger: undefined,
+    tinted: "tinted",
+    secondaryDanger: "raised",
+    danger: "danger",
     success: undefined,
     link: undefined,
 };
 // In the button's own color, quieter than its label.
 const buttonHint = css({ color: "inherit", opacity: "0.6" });
-export function Button({ className, variant = "primary", size = "small", fullWidth, loading, icon, shortcut, children, disabled, ...props }) {
-    return (_jsxs(BaseButton, { ...props, disabled: disabled || loading, "aria-busy": loading || undefined, className: cx(action({ variant, size, fullWidth }), className), "data-ciridae-ui": "", "data-edge": buttonEdges[variant], children: [loading ? _jsx(Spinner, { "aria-hidden": "true" }) : icon, children, shortcut && _jsx(ShortcutHint, { hotkey: shortcut, className: buttonHint })] }));
+/**
+ * The size a `Button` takes where it does not set its own, so the container decides: a dialog's
+ * footer holds the default 38px buttons, where everywhere else the small one is the everyday.
+ */
+export const ButtonSizeContext = createContext("small");
+export function Button({ className, variant = "primary", size: ownSize, fullWidth, loading, icon, shortcut, children, disabled, ...props }) {
+    const containerSize = useContext(ButtonSizeContext);
+    const size = ownSize ?? containerSize;
+    const edge = faceEdge(buttonEdges[variant]);
+    return (_jsxs(BaseButton, { ...props, disabled: disabled || loading, "aria-busy": loading || undefined, className: cx(action({ variant, size, fullWidth }), edge.className, className), "data-ciridae-ui": "", "data-edge": edge["data-edge"], children: [loading ? _jsx(Spinner, { "aria-hidden": "true" }) : icon, children, shortcut && _jsx(ShortcutHint, { hotkey: shortcut, className: buttonHint })] }));
 }
 /** Async action button with consistent pending, retry, and completion feedback. */
 export function DataButton({ state, idleLabel, pendingLabel, errorLabel, successLabel, variant = "primary", icon, disabled, ...props }) {
@@ -183,19 +195,22 @@ const round = cva({
         alignItems: "center",
         justifyContent: "center",
         padding: "none",
+        // The edge's own 1px, as the design counts it; the bare button has neither.
         border: "1px solid transparent",
         borderRadius: "pill",
         color: "fg.muted",
-        background: "bg.raised",
+        background: "token(gradients.raised)",
         cursor: "pointer",
         flexShrink: "0",
         transitionProperty: "translate, background, color",
         transitionDuration: "fast",
-        _hover: { color: "fg.primary", background: "bg.raisedHover" },
+        // Hover keeps the face in light and thins it in dark; the icon takes the primary ink.
+        _hover: { color: "fg.primary", background: "token(gradients.raisedHover)" },
         _active: { translate: "0 1px" },
         _focusVisible: { focusRing: "outer" },
+        // A round face fades further than other controls when it cannot be pressed.
         "&:disabled, &[data-disabled]": {
-            opacity: "disabled",
+            opacity: "disabledRound",
             cursor: "not-allowed",
             translate: "none",
         },
@@ -203,27 +218,44 @@ const round = cva({
     variants: {
         variant: {
             raised: {},
+            // The bare icon button: no face until hovered, and disabled it fades as other controls do.
             ghost: {
+                border: "0",
                 background: "transparent",
-                _hover: { background: "bg.hover" },
+                _hover: { background: "bg.hover", _light: { background: "bg.hover" } },
                 _active: { translate: "none" },
+                "&:disabled, &[data-disabled]": { opacity: "disabled" },
             },
             // The primary face as a round button: a composer's send.
             primary: {
-                background: "bg.primary",
+                background: "token(gradients.primary)",
                 color: "bg.canvas",
                 _light: { color: "fg.onAccent" },
-                _hover: { color: "bg.canvas", background: "bg.primaryHover" },
+                _hover: {
+                    color: "bg.canvas",
+                    background: "bg.primaryHover",
+                    _light: { color: "fg.onAccent", background: "token(gradients.primary)" },
+                },
             },
         },
+        // 24 is the bare button's in a column or group header; 26 the composer's send on the
+        // primary face; the other round faces are 28, 34 and 38.
         size: {
             compact: { width: "control.shortcut", height: "control.shortcut" },
-            small: { width: "control.small", height: "control.small" },
-            medium: { width: "control.compact", height: "control.compact" },
+            send: { width: "control.send", height: "control.send" },
+            small: { width: "control.roundSmall", height: "control.roundSmall" },
+            medium: { width: "control.round", height: "control.round" },
             large: { width: "control.default", height: "control.default" },
         },
+        // A page's leading icon button is a rounded square rather than a circle.
+        shape: { round: {}, square: { borderRadius: "action" } },
     },
-    defaultVariants: { size: "medium", variant: "raised" },
+    compoundVariants: [
+        // Bare, the button is a rounded square too: 6 round at 24 and 8 round at 28.
+        { variant: "ghost", size: "compact", css: { borderRadius: "keycap" } },
+        { variant: "ghost", size: "small", css: { borderRadius: "action" } },
+    ],
+    defaultVariants: { size: "medium", variant: "raised", shape: "round" },
 });
 const badgeDot = css({
     position: "absolute",
@@ -263,10 +295,11 @@ const badgeCount = css({
  * small buttons.
  */
 export const IconButtonSizeContext = createContext("medium");
-const iconButtonEdges = { raised: "glass", ghost: undefined, primary: undefined };
-export function IconButton({ className, size, variant = "raised", badge, shortcut, children, "aria-label": label, ...props }) {
+const iconButtonEdges = { raised: "raised", ghost: undefined, primary: "primary" };
+export function IconButton({ className, size, variant = "raised", shape = "round", badge, shortcut, children, "aria-label": label, ...props }) {
     const containerSize = useContext(IconButtonSizeContext);
     const { labels } = useCiridaeLocale();
     const count = typeof badge === "number" && badge > 0 ? badge : 0;
-    return (_jsxs(BaseButton, { ...props, "aria-label": count > 0 ? labels.common.withCount(label, count) : label, "aria-keyshortcuts": shortcut && formatForDisplay(shortcut, { useSymbols: false }), className: cx(round({ size: size ?? containerSize, variant }), className), "data-ciridae-ui": "", "data-edge": iconButtonEdges[variant], children: [children, badge === true && _jsx("span", { className: badgeDot, "aria-hidden": "true" }), count > 0 && (_jsx("span", { className: badgeCount, "aria-hidden": "true", children: count > 99 ? "99+" : count }))] }));
+    const edge = faceEdge(iconButtonEdges[variant]);
+    return (_jsxs(BaseButton, { ...props, "aria-label": count > 0 ? labels.common.withCount(label, count) : label, "aria-keyshortcuts": shortcut && formatForDisplay(shortcut, { useSymbols: false }), className: cx(round({ size: size ?? containerSize, variant, shape }), edge.className, className), "data-ciridae-ui": "", "data-edge": edge["data-edge"], children: [children, badge === true && _jsx("span", { className: badgeDot, "aria-hidden": "true" }), count > 0 && (_jsx("span", { className: badgeCount, "aria-hidden": "true", children: count > 99 ? "99+" : count }))] }));
 }

package/dist/components/calendar.d.ts

@@ -10,5 +10,5 @@ export type CalendarProps = {
     weekStartsOn?: WeekStartsOn;
     labels?: Partial<CiridaeLabels["calendar"]>;
 };
-export declare function Calendar({ month, selected, onMonthChange, onSelect, locale: ownLocale, weekStartsOn, labels: ownLabels, }: CalendarProps): import("@types/react").JSX.Element;
+export declare function Calendar({ month, selected, onMonthChange, onSelect, locale: ownLocale, weekStartsOn, labels: ownLabels, }: CalendarProps): import("react").JSX.Element;
 export {};

package/dist/components/calendar.js

@@ -5,11 +5,39 @@ import { css, cx } from "#primitives/css";
 import { IconButton } from "./button.js";
 import { directional, icon } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
+/*
+ * The month alone, no face of its own: it sits on the popover or picker that opens it. Seven 32px
+ * day columns inside an 8px inset, which with the glass sheet's 4px makes the design's 12px.
+ */
+const calendar = css({
+    display: "grid",
+    gap: "layout.controlGap",
+    width: "calc(7 * token(sizes.control.compact) + 2 * token(spacing.panel.compact))",
+    padding: "panel.compact",
+});
+const header = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    fontSize: "caption",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
 const grid = css({
     display: "grid",
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
     justifyItems: "center",
-    gap: "layout.tightGap",
+    rowGap: "control.trackInset",
+});
+// The weekdays sit as far above the days as the month sits above them.
+const weekDay = css({
+    paddingBlock: "layout.tightGap",
+    marginBottom: "control.iconGap",
+    textAlign: "center",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
 });
 const row = css({
     display: "grid",
@@ -18,20 +46,29 @@ const row = css({
     width: "100%",
 });
 const previousMonthIcon = css({ transform: "rotate(180deg)" });
+// Today wears a hairline ring; the chosen day the primary button's face.
 const day = css({
     width: "control.compact",
     height: "control.compact",
-    border: "0",
+    border: "1px solid transparent",
     borderRadius: "round",
     background: "transparent",
     color: "fg.primary",
+    fontSize: "caption",
+    fontWeight: "medium",
     cursor: "pointer",
     transitionProperty: "background, color",
     transitionDuration: "fast",
+    "&[aria-current=date]": { borderColor: "border.control" },
     "&:hover:not(:disabled):not([aria-selected=true])": {
-        background: "bg.fill",
+        background: "bg.hover",
+    },
+    "&[aria-selected=true]": {
+        borderColor: "transparent",
+        background: "token(gradients.primary)",
+        color: "bg.canvas",
+        _light: { color: "fg.onAccent" },
     },
-    "&[aria-selected=true]": { background: "fg.primary", color: "bg.canvas" },
     _disabled: { color: "fg.muted", opacity: "disabled", cursor: "default" },
     _focusVisible: { focusRing: "outer" },
 });
@@ -135,20 +172,10 @@ export function Calendar({ month, selected, onMonthChange, onSelect, locale: own
     });
     const weekDayFormatter = new Intl.DateTimeFormat(locale, { weekday: "narrow" });
     const fullWeekDayFormatter = new Intl.DateTimeFormat(locale, { weekday: "long" });
-    return (_jsxs("section", { className: css({
-            width: "calendar.width",
-            padding: "panel.compact",
-            border: "1px solid token(colors.border.control)",
-            borderRadius: "inset",
-            background: "bg.card",
-        }), "data-ciridae-ui": "", children: [_jsxs("header", { className: css({
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    marginBottom: "panel.compact",
-                }), children: [_jsx(IconButton, { "aria-label": labels.previousMonth, size: "compact", type: "button", onClick: () => onMonthChange(new Date(month.getFullYear(), month.getMonth() - 1, 1)), children: _jsx(ArrowRightIcon, { className: cx(icon(), directional, previousMonthIcon) }) }), _jsx("strong", { id: monthLabelId, children: monthFormatter.format(month) }), _jsx(IconButton, { "aria-label": labels.nextMonth, size: "compact", type: "button", onClick: () => onMonthChange(new Date(month.getFullYear(), month.getMonth() + 1, 1)), children: _jsx(ArrowRightIcon, { className: cx(icon(), directional) }) })] }), _jsxs("div", { className: grid, role: "grid", "aria-labelledby": monthLabelId, children: [_jsx("div", { className: row, role: "row", children: weekDays.map((date) => (_jsx("span", { "aria-label": fullWeekDayFormatter.format(date), className: css({ textAlign: "center", color: "fg.muted", fontSize: "caption" }), role: "columnheader", children: weekDayFormatter.format(date) }, date.getDay()))) }), Array.from({ length: 6 }, (_, weekIndex) => (_jsx("div", { className: row, role: "row", children: days.slice(weekIndex * 7, weekIndex * 7 + 7).map((date) => {
+    const today = new Date();
+    return (_jsxs("section", { className: calendar, "data-ciridae-ui": "", children: [_jsxs("header", { className: header, children: [_jsx(IconButton, { "aria-label": labels.previousMonth, size: "compact", variant: "ghost", type: "button", onClick: () => onMonthChange(new Date(month.getFullYear(), month.getMonth() - 1, 1)), children: _jsx(ArrowRightIcon, { className: cx(icon({ size: "small" }), directional, previousMonthIcon) }) }), _jsx("span", { id: monthLabelId, children: monthFormatter.format(month) }), _jsx(IconButton, { "aria-label": labels.nextMonth, size: "compact", variant: "ghost", type: "button", onClick: () => onMonthChange(new Date(month.getFullYear(), month.getMonth() + 1, 1)), children: _jsx(ArrowRightIcon, { className: cx(icon({ size: "small" }), directional) }) })] }), _jsxs("div", { className: grid, role: "grid", "aria-labelledby": monthLabelId, children: [_jsx("div", { className: row, role: "row", children: weekDays.map((date) => (_jsx("span", { "aria-label": fullWeekDayFormatter.format(date), className: weekDay, role: "columnheader", children: weekDayFormatter.format(date) }, date.getDay()))) }), Array.from({ length: 6 }, (_, weekIndex) => (_jsx("div", { className: row, role: "row", children: days.slice(weekIndex * 7, weekIndex * 7 + 7).map((date) => {
                             const inCurrentMonth = isSameMonth(date, currentMonth);
-                            return (_jsx("button", { type: "button", "aria-label": dayFormatter.format(date), "aria-selected": inCurrentMonth && isSameDay(date, selected), className: day, disabled: !inCurrentMonth, onClick: () => onSelect(date), onFocus: () => setFocusedDate(date), onKeyDown: (event) => handleDayKeyDown(event, date), ref: (element) => {
+                            return (_jsx("button", { type: "button", "aria-label": dayFormatter.format(date), "aria-selected": inCurrentMonth && isSameDay(date, selected), "aria-current": isSameDay(date, today) ? "date" : undefined, className: day, disabled: !inCurrentMonth, onClick: () => onSelect(date), onFocus: () => setFocusedDate(date), onKeyDown: (event) => handleDayKeyDown(event, date), ref: (element) => {
                                     if (element)
                                         dayButtons.current.set(dateKey(date), element);
                                     else

package/dist/components/centered-page.d.ts

@@ -18,4 +18,4 @@ export type CenteredPageProps = {
  * content. `form` width narrows both for a short form; `wide` suits a card holding a list whose
  * rows carry a label, a detail, and a control.
  */
-export declare function CenteredPage({ brand, aside, title, description, header, width, children, }: CenteredPageProps): import("@types/react").JSX.Element;
+export declare function CenteredPage({ brand, aside, title, description, header, width, children, }: CenteredPageProps): import("react").JSX.Element;

package/dist/components/centered-page.js

@@ -10,7 +10,7 @@ const page = css({
     // A phone keeps a thin margin around the card rather than giving its width away.
     padding: "panel.compact",
     "@media(min-width: 640px)": { padding: "page.inline" },
-    background: "bg.canvas",
+    background: "token(gradients.canvas)",
     color: "fg.primary",
 });
 const column = css({
@@ -31,7 +31,7 @@ const headerRow = css({
     paddingInline: "panel.roomy",
 });
 const brandMark = css({ width: "brand.logo", height: "brand.logo", color: "fg.primary" });
-const content = css({ display: "flex", flexDirection: "column", gap: "layout.sectionGap" });
+const content = css({ display: "flex", flexDirection: "column", gap: "layout.centeredCardGap" });
 const titleGroup = css({ display: "grid", gap: "layout.tightGap" });
 const titleText = css({ margin: "none", fontSize: "heading.section", fontWeight: "medium" });
 const descriptionText = css({ margin: "none", color: "fg.muted", fontSize: "caption" });

package/dist/components/chart.d.ts

@@ -1,9 +1,15 @@
-import type { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 /** One line on the chart: a label and its `[unixSeconds, value]` samples. */
 export type TimeSeries = {
     label: string;
     points: readonly (readonly [number, number])[];
 };
+/** One bar or line point per category, such as a month or a team, for a series. */
+export type CategorySeries = {
+    label: string;
+    /** One value per category, in the categories' order; `null` leaves it out. */
+    values: readonly (number | null)[];
+};
 /**
  * Lines over a fixed time window. Samples from different series are joined on their timestamp, so
  * a series missing a sample leaves a gap rather than a line drawn through it.
@@ -19,4 +25,18 @@ export declare function TimeSeriesChart({ series, start, end, formatValue, forma
     height?: number;
     /** Disable fractional axis ticks for discrete counts such as users. */
     allowDecimals?: boolean;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+/**
+ * Values by category as bars, side by side per series, or as lines, such as counts per month.
+ * Each series takes the next chart colour; a legend names them once there is more than one.
+ */
+export declare function CategoryChart({ categories, series, variant, formatValue, height, allowDecimals, className, ...props }: ComponentProps<"div"> & {
+    categories: readonly string[];
+    series: readonly CategorySeries[];
+    /** `line` joins each series' values across the categories instead. */
+    variant?: "bar" | "line";
+    formatValue?: (value: number) => string;
+    height?: number;
+    /** Disable fractional axis ticks for discrete counts such as users. */
+    allowDecimals?: boolean;
+}): import("react").JSX.Element;