@danxbot/ui 15.27.0 → 15.28.0

package/dist/theme.css

@@ -45,186 +45,197 @@
 @source "./index.js";
 
 /* from src/styles/authored.css */
-@theme inline {
-  /* --- Surfaces + structure --- */
-  --color-canvas: var(--canvas);
-  --color-canvas-subtle: var(--canvas-subtle);
-  --color-surface: var(--surface);
-  --color-surface-sunken: var(--surface-sunken);
-  --color-surface-raised: var(--surface-raised);
-  --color-surface-overlay: var(--surface-overlay);
-  --color-surface-inset: var(--surface-inset);
-  --color-surface-hover: var(--surface-hover);
-  --color-surface-active: var(--surface-active);
-  --color-surface-selected: var(--surface-selected);
-
-  --color-border-subtle: var(--border-subtle);
-  --color-border: var(--border);
-  --color-border-strong: var(--border-strong);
-  --color-border-interactive: var(--border-interactive);
-
-  /* --- Content --- */
-  --color-primary: var(--text-primary);
-  --color-secondary: var(--text-secondary);
-  --color-tertiary: var(--text-tertiary);
-  --color-disabled: var(--text-disabled);
-  --color-inverse: var(--text-inverse);
-
-  /* --- Accent (celadon) --- */
-  --color-accent: var(--accent);
-  --color-accent-hover: var(--accent-hover);
-  --color-accent-active: var(--accent-active);
-  --color-accent-subtle: var(--accent-subtle);
-  --color-accent-subtle-hover: var(--accent-subtle-hover);
-  --color-accent-border: var(--accent-border);
-  --color-accent-text: var(--accent-text);
-  --color-accent-contrast: var(--accent-contrast);
-
-  /* --- Brand (ember) --- */
-  --color-brand: var(--brand);
-  --color-brand-hover: var(--brand-hover);
-  --color-brand-subtle: var(--brand-subtle);
-  --color-brand-text: var(--brand-text);
-  --color-brand-contrast: var(--brand-contrast);
-
-  /* --- Status --- */
-  --color-success: var(--success);
-  --color-success-subtle: var(--success-subtle);
-  --color-success-text: var(--success-text);
-  --color-success-border: var(--success-border);
-
-  --color-warning: var(--warning);
-  --color-warning-subtle: var(--warning-subtle);
-  --color-warning-subtle-hover: var(--warning-subtle-hover);
-  --color-warning-text: var(--warning-text);
-  --color-warning-border: var(--warning-border);
-
-  --color-danger: var(--danger);
-  --color-danger-hover: var(--danger-hover);
-  --color-danger-subtle: var(--danger-subtle);
-  --color-danger-text: var(--danger-text);
-  --color-danger-border: var(--danger-border);
-  --color-danger-contrast: var(--danger-contrast);
-
-  /* --- Confidence (a 1-5 self-rating, one colour per level) --- */
-  --color-confidence-1: var(--confidence-1);
-  --color-confidence-2: var(--confidence-2);
-  --color-confidence-3: var(--confidence-3);
-  --color-confidence-4: var(--confidence-4);
-  --color-confidence-5: var(--confidence-5);
-  --color-confidence-none: var(--confidence-none);
-
-  --color-info: var(--info);
-  --color-info-subtle: var(--info-subtle);
-  --color-info-text: var(--info-text);
-  --color-info-border: var(--info-border);
-
-  /* DX-3662 — the 8th tone: a quieter grey for a CLOSED/inert fact (a
-     terminated card, a retired record) — distinct from `--neutral`
-     (`text-tertiary`/`bg-tertiary`, the "not yet decided" grey every OTHER
-     pending/undetermined state already draws from). Both are on the same
-     near-zero-chroma axis on purpose (an inert fact and an undecided one are
-     both "no signal", just at different points in a lifecycle) but pinned to
-     different `L`s so they stay tellable apart side by side — see
-     `muted-quieter-than-neutral.test.ts` for the measured contrast-ranking
-     floor this promises (DX-3696 — the file this comment used to cite,
-     `token-distance.test.ts`, does not exist in this repo). */
-  --color-muted: var(--muted);
-  --color-muted-subtle: var(--muted-subtle);
-  --color-muted-text: var(--muted-text);
-  --color-muted-border: var(--muted-border);
-
-  /* --- Fields --- */
-  --color-field: var(--field-bg);
-  --color-field-hover: var(--field-bg-hover);
-  --color-field-border: var(--field-border);
-  --color-field-border-hover: var(--field-border-hover);
-  --color-field-placeholder: var(--field-placeholder);
-
-  --color-scrim: var(--scrim);
-  --color-veil: var(--veil);
-  --color-focus-halo: var(--focus-halo);
-  --color-control-knob: var(--control-knob);
-  --color-control-knob-on: var(--control-knob-on);
-  --color-switch-track-off: var(--switch-track-off);
-  --color-focus-ring: var(--focus-ring);
-
-  /* --- Type --- */
-  --font-display: var(--font-display);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-
-  --text-2xs: var(--text-2xs);
-  --text-xs: var(--text-xs);
-  --text-sm: var(--text-sm);
-  --text-base: var(--text-base);
-  --text-md: var(--text-md);
-  --text-lg: var(--text-lg);
-  --text-xl: var(--text-xl);
-  --text-2xl: var(--text-2xl);
-  --text-3xl: var(--text-3xl);
-  --text-4xl: var(--text-4xl);
-  --text-5xl: var(--text-5xl);
-
-  /* Remap Tailwind's weight utilities onto the non-integer ramp, so
-     `font-medium` / `font-bold` pick up 510 / 680 rather than 500 / 700. */
-  --font-weight-normal: var(--weight-normal);
-  --font-weight-medium: var(--weight-medium);
-  --font-weight-semibold: var(--weight-semibold);
-  --font-weight-bold: var(--weight-bold);
-
-  --leading-tight: var(--leading-tight);
-  --leading-snug: var(--leading-snug);
-  --leading-normal: var(--leading-normal);
-  --leading-relaxed: var(--leading-relaxed);
-
-  --tracking-tighter: var(--tracking-tighter);
-  --tracking-tight: var(--tracking-tight);
-  --tracking-normal: var(--tracking-normal);
-  --tracking-wide: var(--tracking-wide);
-  --tracking-widest: var(--tracking-widest);
-
-  /* --- Shape --- */
-  --radius-xs: var(--radius-xs);
-  --radius-sm: var(--radius-sm);
-  --radius-md: var(--radius-md);
-  --radius-lg: var(--radius-lg);
-  --radius-xl: var(--radius-xl);
-  --radius-2xl: var(--radius-2xl);
-  --radius-3xl: var(--radius-3xl);
-
-  /* --- Control heights, exposed as sizing utilities (h-control-md etc.) --- */
-  /* Tailwind's spacing BASE, retargeted through the size multiplier.
-     This one line is what makes every `p-4`, `gap-3`, `size-5` in every
-     component respond to the size control — without it the utilities keep
-     Tailwind's fixed 0.25rem and only the hand-written control heights move,
-     which is why the first version of the control read as "changes padding
-     slightly" and nothing else. */
-  --spacing: calc(0.25rem * var(--ui-scale));
-
-  --spacing-control-xs: var(--control-xs);
-  --spacing-control-sm: var(--control-sm);
-  --spacing-control-md: var(--control-md);
-  --spacing-control-lg: var(--control-lg);
-  --spacing-control-xl: var(--control-xl);
-
-  /* --- Elevation --- */
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-knob: var(--shadow-knob);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-tooltip: var(--shadow-tooltip);
-  --shadow-glow-accent: var(--shadow-glow-accent);
-
-  /* --- Motion ---
-     The curves, durations and `animate-*` utilities are owned by motion.css,
-     which declares them directly in Tailwind's own namespaces. All that is
-     left here is retargeting the framework's bare `transition` default off
-     its Material-1-era `cubic-bezier(0.4, 0, 0.2, 1)` @ 150ms.              */
-  --default-transition-duration: var(--dur-base);
-  --default-transition-timing-function: var(--ease-standard);
+@theme inline {
+  /* --- Surfaces + structure --- */
+  --color-canvas: var(--canvas);
+  --color-canvas-subtle: var(--canvas-subtle);
+  --color-surface: var(--surface);
+  --color-surface-sunken: var(--surface-sunken);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-inset: var(--surface-inset);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-active: var(--surface-active);
+  --color-surface-selected: var(--surface-selected);
+
+  --color-border-subtle: var(--border-subtle);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-border-interactive: var(--border-interactive);
+
+  /* --- Content --- */
+  --color-primary: var(--text-primary);
+  --color-secondary: var(--text-secondary);
+  --color-tertiary: var(--text-tertiary);
+  --color-disabled: var(--text-disabled);
+  --color-inverse: var(--text-inverse);
+
+  /* --- Accent (celadon) --- */
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-active: var(--accent-active);
+  --color-accent-subtle: var(--accent-subtle);
+  --color-accent-subtle-hover: var(--accent-subtle-hover);
+  --color-accent-border: var(--accent-border);
+  --color-accent-text: var(--accent-text);
+  --color-accent-contrast: var(--accent-contrast);
+
+  /* --- Brand (ember) --- */
+  --color-brand: var(--brand);
+  --color-brand-hover: var(--brand-hover);
+  --color-brand-subtle: var(--brand-subtle);
+  --color-brand-text: var(--brand-text);
+  --color-brand-contrast: var(--brand-contrast);
+
+  /* --- Status --- */
+  --color-success: var(--success);
+  --color-success-subtle: var(--success-subtle);
+  --color-success-text: var(--success-text);
+  --color-success-border: var(--success-border);
+
+  --color-warning: var(--warning);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-warning-subtle-hover: var(--warning-subtle-hover);
+  --color-warning-text: var(--warning-text);
+  --color-warning-border: var(--warning-border);
+
+  --color-danger: var(--danger);
+  --color-danger-hover: var(--danger-hover);
+  --color-danger-subtle: var(--danger-subtle);
+  --color-danger-text: var(--danger-text);
+  --color-danger-border: var(--danger-border);
+  --color-danger-contrast: var(--danger-contrast);
+
+  /* --- Chart palette (DX-3963): eight ordered categorical hues + one sequential --- */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+  --color-chart-seq: var(--chart-seq);
+
+  /* --- Confidence (a 1-5 self-rating, one colour per level) --- */
+  --color-confidence-1: var(--confidence-1);
+  --color-confidence-2: var(--confidence-2);
+  --color-confidence-3: var(--confidence-3);
+  --color-confidence-4: var(--confidence-4);
+  --color-confidence-5: var(--confidence-5);
+  --color-confidence-none: var(--confidence-none);
+
+  --color-info: var(--info);
+  --color-info-subtle: var(--info-subtle);
+  --color-info-text: var(--info-text);
+  --color-info-border: var(--info-border);
+
+  /* DX-3662 — the 8th tone: a quieter grey for a CLOSED/inert fact (a
+     terminated card, a retired record) — distinct from `--neutral`
+     (`text-tertiary`/`bg-tertiary`, the "not yet decided" grey every OTHER
+     pending/undetermined state already draws from). Both are on the same
+     near-zero-chroma axis on purpose (an inert fact and an undecided one are
+     both "no signal", just at different points in a lifecycle) but pinned to
+     different `L`s so they stay tellable apart side by side — see
+     `muted-quieter-than-neutral.test.ts` for the measured contrast-ranking
+     floor this promises (DX-3696 — the file this comment used to cite,
+     `token-distance.test.ts`, does not exist in this repo). */
+  --color-muted: var(--muted);
+  --color-muted-subtle: var(--muted-subtle);
+  --color-muted-text: var(--muted-text);
+  --color-muted-border: var(--muted-border);
+
+  /* --- Fields --- */
+  --color-field: var(--field-bg);
+  --color-field-hover: var(--field-bg-hover);
+  --color-field-border: var(--field-border);
+  --color-field-border-hover: var(--field-border-hover);
+  --color-field-placeholder: var(--field-placeholder);
+
+  --color-scrim: var(--scrim);
+  --color-veil: var(--veil);
+  --color-focus-halo: var(--focus-halo);
+  --color-control-knob: var(--control-knob);
+  --color-control-knob-on: var(--control-knob-on);
+  --color-switch-track-off: var(--switch-track-off);
+  --color-focus-ring: var(--focus-ring);
+
+  /* --- Type --- */
+  --font-display: var(--font-display);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+
+  --text-2xs: var(--text-2xs);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-md: var(--text-md);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --text-3xl: var(--text-3xl);
+  --text-4xl: var(--text-4xl);
+  --text-5xl: var(--text-5xl);
+
+  /* Remap Tailwind's weight utilities onto the non-integer ramp, so
+     `font-medium` / `font-bold` pick up 510 / 680 rather than 500 / 700. */
+  --font-weight-normal: var(--weight-normal);
+  --font-weight-medium: var(--weight-medium);
+  --font-weight-semibold: var(--weight-semibold);
+  --font-weight-bold: var(--weight-bold);
+
+  --leading-tight: var(--leading-tight);
+  --leading-snug: var(--leading-snug);
+  --leading-normal: var(--leading-normal);
+  --leading-relaxed: var(--leading-relaxed);
+
+  --tracking-tighter: var(--tracking-tighter);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-widest: var(--tracking-widest);
+
+  /* --- Shape --- */
+  --radius-xs: var(--radius-xs);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+
+  /* --- Control heights, exposed as sizing utilities (h-control-md etc.) --- */
+  /* Tailwind's spacing BASE, retargeted through the size multiplier.
+     This one line is what makes every `p-4`, `gap-3`, `size-5` in every
+     component respond to the size control — without it the utilities keep
+     Tailwind's fixed 0.25rem and only the hand-written control heights move,
+     which is why the first version of the control read as "changes padding
+     slightly" and nothing else. */
+  --spacing: calc(0.25rem * var(--ui-scale));
+
+  --spacing-control-xs: var(--control-xs);
+  --spacing-control-sm: var(--control-sm);
+  --spacing-control-md: var(--control-md);
+  --spacing-control-lg: var(--control-lg);
+  --spacing-control-xl: var(--control-xl);
+
+  /* --- Elevation --- */
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-knob: var(--shadow-knob);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-tooltip: var(--shadow-tooltip);
+  --shadow-glow-accent: var(--shadow-glow-accent);
+
+  /* --- Motion ---
+     The curves, durations and `animate-*` utilities are owned by motion.css,
+     which declares them directly in Tailwind's own namespaces. All that is
+     left here is retargeting the framework's bare `transition` default off
+     its Material-1-era `cubic-bezier(0.4, 0, 0.2, 1)` @ 150ms.              */
+  --default-transition-duration: var(--dur-base);
+  --default-transition-timing-function: var(--ease-standard);
 }
 
 /* from src/styles/tokens.css */

package/dist/types/components/chart/BarList.d.ts

@@ -0,0 +1,27 @@
+import type { Ref } from "react";
+export interface BarListItem {
+    /** Unique within the list. */
+    id: string;
+    label: string;
+    /** Finite and >= 0 — anything else throws. */
+    value: number;
+    /** A quieter line under the label — a count, a unit, a note. */
+    secondary?: string;
+    /** Renders the row as a real link. Wins over `onSelect`. */
+    href?: string;
+    /** Renders the row as a button. */
+    onSelect?: () => void;
+}
+export interface BarListProps {
+    /** In the order to show; never re-sorted. */
+    items: readonly BarListItem[];
+    /** What the list measures, e.g. "What is contributing". Names the list and captions the table. */
+    label: string;
+    /** Keep this many rows and fold the rest into one `Other` row. @default every row */
+    maxItems?: number;
+    /** How a raw value reads in the row, the tooltip and the table. @default locale-formatted number */
+    formatValue?: (value: number) => string;
+    className?: string;
+    ref?: Ref<HTMLUListElement>;
+}
+export declare function BarList({ items, label, maxItems, formatValue, className, ref }: BarListProps): import("react").JSX.Element;

package/dist/types/components/chart/ShareBar.d.ts

@@ -0,0 +1,20 @@
+import type { Ref } from "react";
+export interface ShareBarSegment {
+    /** Unique within the bar. */
+    id: string;
+    label: string;
+    /** Finite and >= 0 — anything else throws. */
+    value: number;
+    /** Any CSS colour. Wins over the palette hue the segment's position would get. */
+    color?: string;
+}
+export interface ShareBarProps {
+    segments: readonly ShareBarSegment[];
+    /** What the bar measures, e.g. "Model share". Names the group and captions the table. */
+    label: string;
+    /** How a raw value reads in the tooltip and the table. @default locale-formatted number */
+    formatValue?: (value: number) => string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ShareBar({ segments, label, formatValue, className, ref }: ShareBarProps): import("react").JSX.Element;

package/dist/types/components/chart/shared.d.ts

@@ -0,0 +1,49 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface ChartDatum {
+    id: string;
+    value: number;
+}
+/**
+ * Refuse an input a chart cannot draw truthfully, at the point it arrives.
+ * A negative magnitude has no length, a NaN has no share, and a duplicate id
+ * would collapse two rows into one React key — each is a caller bug that a
+ * clamped or skipped row would hide.
+ */
+export declare function assertChartData(component: string, data: readonly ChartDatum[]): void;
+/**
+ * A share as a person reads it: a whole number from 10% up, one decimal below
+ * (`4.5%`), and `<1%` for a real but tiny share so a nonzero segment is never
+ * printed as `0%`. A zero total reads `0%`, never `NaN%`.
+ */
+export declare function formatShare(fraction: number): string;
+/** The default way a raw value reads. Callers pass `formatValue` for units. */
+export declare function defaultFormatValue(value: number): string;
+/**
+ * A tooltip a keyboard and a finger can reach. Base UI opens its tooltip on
+ * hover and on KEYBOARD focus only — a tap or a programmatic focus never
+ * mounts it (DX-3014) — so the open state is held here and a plain `focus`
+ * opens it too. Escape and blur close it; hover is still Base UI's own.
+ */
+export declare function ChartTip({ content, children }: {
+    content: ReactNode;
+    children: ReactElement<Record<string, unknown>>;
+}): import("react").JSX.Element;
+/** What a tooltip says about one mark — ink tokens only, never the series colour. */
+export declare function TipBody({ label, lines }: {
+    label: ReactNode;
+    lines: readonly ReactNode[];
+}): import("react").JSX.Element;
+/**
+ * The visually hidden table every chart carries — the text-equivalent of its
+ * marks, in reading order, so colour and length are never the only way in.
+ * `sr-only` keeps it in the accessibility tree and out of the layout.
+ */
+export declare function ChartTable({ caption, columns, rows, }: {
+    caption: string;
+    columns: readonly string[];
+    rows: readonly {
+        key: string;
+        header: ReactNode;
+        cells: readonly ReactNode[];
+    }[];
+}): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -69,6 +69,9 @@ export { PanelGroup, Panel, PanelResizer, type PanelGroupProps, type PanelProps,
 export { Avatar, AvatarGroup, type AvatarProps, type AvatarGroupProps, type AvatarStatus, } from "./components/Avatar";
 export { Progress, Meter, ProgressRing, type ProgressProps, type MeterProps, type ProgressRingProps, type ProgressRingValueProps, type ProgressRingSegmentsProps, type ProgressRingSegment, type ProgressTone, } from "./components/Progress";
 export { Stat, StatRow, Sparkline, type StatProps, type StatRowProps, type SparklineProps, type StatSize, type StatTrend, type StatSentiment, } from "./components/Stat";
+export { ShareBar, type ShareBarProps, type ShareBarSegment, } from "./components/chart/ShareBar";
+export { BarList, type BarListProps, type BarListItem, } from "./components/chart/BarList";
+export { CHART_SERIES_COUNT, CHART_SERIES_TOKENS, CHART_SEQUENTIAL_TOKEN, CHART_SEQUENTIAL_COLOR, chartSeriesColor, } from "./lib/chart-palette";
 export { DataTable, TableEmptyState, CellStack, type DataTableProps, type TableDensity, } from "./components/Table";
 export { CodeEditor, CodeEditorToolbar, CodeEditorCaption, CodeEditorCopyButton, CodeEditorWrapToggle, CodeEditorViewSwitch, type CodeEditorProps, type CodeEditorToolbarProps, type CodeEditorView, } from "./components/CodeEditor";
 export { Markdown, CodeBlock, type MarkdownProps, type CodeBlockProps } from "./components/Markdown";

package/dist/types/lib/chart-palette.d.ts

@@ -0,0 +1,14 @@
+/** How many categorical hues exist. A 9th series is never a 9th hue: it folds into "Other". */
+export declare const CHART_SERIES_COUNT = 8;
+/** The eight categorical tokens, in the fixed order series are assigned. */
+export declare const CHART_SERIES_TOKENS: readonly ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5", "--chart-6", "--chart-7", "--chart-8"];
+/** The one sequential hue: a single series of magnitudes (a ranked bar list). */
+export declare const CHART_SEQUENTIAL_TOKEN: "--chart-seq";
+/**
+ * The CSS colour for the series at zero-based `index` — `var(--chart-1)` for
+ * index 0. Throws past the eighth: a ninth series is folded into "Other" by
+ * the caller, never given a generated hue.
+ */
+export declare function chartSeriesColor(index: number): string;
+/** The CSS colour of the sequential hue. */
+export declare const CHART_SEQUENTIAL_COLOR: string;

package/dist/types/pure.d.ts

@@ -41,3 +41,4 @@
 export { formatBytes, formatTokens, formatCompactNumber } from "./lib/format";
 export { formatDate, parseDate, formatDateTime, parseDateTime, type FormatDateTimeOptions, type ParseDateTimeOptions, formatCurrency, parseCurrency, formatNumber, parseNumber, type FormatNumberOptions, formatBoolean, parseBoolean, type FormatBooleanOptions, } from "./lib/values";
 export { confidenceLevel, CONFIDENCE_LEVEL_LABELS, type ConfidenceLevel } from "./lib/confidence";
+export { CHART_SERIES_COUNT, CHART_SERIES_TOKENS, CHART_SEQUENTIAL_TOKEN, CHART_SEQUENTIAL_COLOR, chartSeriesColor, } from "./lib/chart-palette";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "15.27.0",
+  "version": "15.28.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",