@aortl/admin-react 0.13.2 → 0.14.0

package/dist/BarChart.d.ts

@@ -0,0 +1,59 @@
+import { ComponentProps } from 'react';
+import { ChartDatum, ChartSize } from './chart-internal';
+export type BarChartVariant = "primary" | "success" | "warning" | "danger" | "info";
+export type BarChartOrientation = "horizontal" | "vertical";
+export interface BarChartContainerProps extends ComponentProps<"div"> {
+    orientation?: BarChartOrientation;
+    size?: ChartSize;
+    /** Show per-bar value labels (`.chart-values`). */
+    showValues?: boolean;
+    /** Inline-flex, em-sized micro-viz for table cells. */
+    inline?: boolean;
+    /** Single-series fill colour. Per-bar `color` still overrides individual bars. */
+    variant?: BarChartVariant;
+}
+/**
+ * The bare bar-chart grid — no bars. Compose `<BarChart.Bar>` children by hand
+ * (e.g. to interleave a reference line). Sets `role="img"`; pass `aria-label`.
+ */
+declare function BarChartContainer({ orientation, size, showValues, inline, variant, className, ...rest }: BarChartContainerProps): import("react/jsx-runtime").JSX.Element;
+export interface BarProps extends Omit<ComponentProps<"div">, "color"> {
+    /** Auto-fills label / value / title / colour from a datum. */
+    datum?: ChartDatum;
+    /** Raw value when composing without a datum. */
+    value?: number;
+    /** Category label when composing without a datum. */
+    label?: string;
+    /** Explicit bar colour (`--bar-color`). Overrides the single-series fill. */
+    color?: string;
+}
+/**
+ * One bar. Renders a label (only when present), the fill (with a native
+ * `title`), and an always-present value cell (hidden by CSS unless the chart
+ * carries `.chart-values`). Stays `currentColor` unless an explicit colour is
+ * given — single-series bars never cycle the SERIES palette.
+ */
+declare function Bar({ datum, value, label, color, className, style, ...rest }: BarProps): import("react/jsx-runtime").JSX.Element;
+export interface BarChartProps extends ComponentProps<"div"> {
+    data: ChartDatum[];
+    /** Override the computed max (the 100% reference). Defaults to the largest value. */
+    max?: number;
+    orientation?: BarChartOrientation;
+    size?: ChartSize;
+    showValues?: boolean;
+    inline?: boolean;
+    variant?: BarChartVariant;
+}
+/**
+ * Single-series bar chart. Computes the max, sets `--chart-max` on the
+ * container (bars inherit it), and generates an overridable `aria-label`.
+ * Horizontal by default; pass `orientation="vertical"` for columns. For
+ * hand-composed layouts use `<BarChart.Container>` + `<BarChart.Bar>`.
+ */
+declare function BarChartRoot({ data, max, orientation, size, showValues, inline, variant, style, "aria-label": ariaLabel, ...rest }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+export declare const BarChart: typeof BarChartRoot & {
+    Container: typeof BarChartContainer;
+    Bar: typeof Bar;
+};
+export {};
+//# sourceMappingURL=BarChart.d.ts.map

package/dist/BarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../src/BarChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACL,KAAK,UAAU,EACf,KAAK,SAAS,EAKf,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AACpF,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,KAAK,CAAC;IACnE,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EACzB,WAA0B,EAC1B,IAAW,EACX,UAAU,EACV,MAAM,EACN,OAAmB,EACnB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,sBAAsB,2CAsBxB;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACpE,8DAA8D;IAC9D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,iBAAS,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,2CAgB/E;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,qFAAqF;IACrF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;;;;GAKG;AACH,iBAAS,YAAY,CAAC,EACpB,IAAI,EACJ,GAAG,EACH,WAA0B,EAC1B,IAAW,EACX,UAAU,EACV,MAAM,EACN,OAAmB,EACnB,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,aAAa,2CAkBf;AAED,eAAO,MAAM,QAAQ;;;CAGnB,CAAC"}

package/dist/ChartLegend.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+import { ChartDatum } from './chart-internal';
+export interface ChartLegendProps extends ComponentProps<"ul"> {
+    data: ChartDatum[];
+}
+/**
+ * Shared legend for `<Donut>` and `<StackedBar>` — one swatch + label per
+ * datum. Each row carries its own `title`, which is where the donut's
+ * per-slice read-out lives (a conic-gradient slice has no element to hang a
+ * `title` on). The swatch colour mirrors `seriesColor`, so legend and chart
+ * stay in sync.
+ */
+export declare function ChartLegend({ data, className, ...rest }: ChartLegendProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartLegend.d.ts.map

package/dist/ChartLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../src/ChartLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,KAAK,UAAU,EAAuC,MAAM,kBAAkB,CAAC;AAExF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC5D,IAAI,EAAE,UAAU,EAAE,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAezE"}

package/dist/Donut.d.ts

@@ -0,0 +1,48 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ChartLegend } from './ChartLegend';
+import { ChartDatum, ChartSize } from './chart-internal';
+export interface DonutFigureProps extends ComponentProps<"div"> {
+    size?: ChartSize;
+}
+/** Square positioning context that overlays the centre label on the ring. */
+declare function Figure({ size, className, ...rest }: DonutFigureProps): import("react/jsx-runtime").JSX.Element;
+export interface DonutRingProps extends Omit<ComponentProps<"div">, "color"> {
+    data: ChartDatum[];
+    /** Solid pie — no hole. */
+    pie?: boolean;
+    /** Ring width as a % of diameter (default "33%"). Ignored when `pie`. */
+    thickness?: string;
+}
+/** The masked conic-gradient ring. Builds `--donut-segments` from the data. */
+declare function Ring({ data, pie, thickness, className, style, ...rest }: DonutRingProps): import("react/jsx-runtime").JSX.Element;
+/** Centred overlay (a total, a label). Not a child of the ring — masks clip subtrees. */
+declare function Center({ className, ...rest }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export interface DonutProps extends Omit<ComponentProps<"div">, "color"> {
+    data: ChartDatum[];
+    size?: ChartSize;
+    /** Ring width as a % of diameter (default "33%"). Ignored when `pie`. */
+    thickness?: string;
+    /** Solid pie — no hole. */
+    pie?: boolean;
+    /** Centred overlay content (a total, a label). */
+    centerLabel?: ReactNode;
+    /** Render a legend from the data labels. */
+    legend?: boolean;
+    inline?: boolean;
+}
+/**
+ * Donut (or `pie`) breakdown. Builds the cumulative conic-gradient string from
+ * `data`, overlays an optional `centerLabel`, and generates an overridable
+ * `aria-label`. Per-slice read-outs live on the optional `legend` rows — a
+ * conic slice has no element to carry a `title`. Resize by overriding
+ * `--chart-size` (it inherits to the figure) or via `size`.
+ */
+declare function DonutRoot({ data, size, thickness, pie, centerLabel, legend, inline, className, "aria-label": ariaLabel, ...rest }: DonutProps): import("react/jsx-runtime").JSX.Element;
+export declare const Donut: typeof DonutRoot & {
+    Figure: typeof Figure;
+    Ring: typeof Ring;
+    Center: typeof Center;
+    Legend: typeof ChartLegend;
+};
+export {};
+//# sourceMappingURL=Donut.d.ts.map

package/dist/Donut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../src/Donut.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EACL,KAAK,UAAU,EACf,KAAK,SAAS,EAIf,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,6EAA6E;AAC7E,iBAAS,MAAM,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAOpE;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAC1E,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,+EAA+E;AAC/E,iBAAS,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAUhF;AAED,yFAAyF;AACzF,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAE5D;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtE,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,kDAAkD;IAClD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;GAMG;AACH,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,IAAW,EACX,SAAS,EACT,GAAG,EACH,WAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,UAAU,2CAkBZ;AAED,eAAO,MAAM,KAAK;;;;;CAKhB,CAAC"}

package/dist/StackedBar.d.ts

@@ -0,0 +1,40 @@
+import { ComponentProps } from 'react';
+import { ChartLegend } from './ChartLegend';
+import { ChartDatum } from './chart-internal';
+export type StackedBarTrackProps = ComponentProps<"div">;
+/** The bare proportion track — compose `<StackedBar.Segment>` children by hand. */
+declare function Track({ className, ...rest }: StackedBarTrackProps): import("react/jsx-runtime").JSX.Element;
+export interface SegmentProps extends Omit<ComponentProps<"div">, "color"> {
+    /** Auto-fills value / title / colour from a datum. */
+    datum?: ChartDatum;
+    /** Index into the SERIES palette (used when the datum has no `color`). */
+    index?: number;
+    /** Raw value when composing without a datum. */
+    value?: number;
+    /** Explicit segment colour (`--segment-color`). */
+    color?: string;
+}
+/**
+ * One proportion segment, sized by `flex: var(--value)`. Multi-series by
+ * default: takes its colour from `seriesColor` (SERIES cycle or `datum.color`).
+ */
+declare function Segment({ datum, index, value, color, className, style, ...rest }: SegmentProps): import("react/jsx-runtime").JSX.Element;
+export interface StackedBarProps extends Omit<ComponentProps<"div">, "color"> {
+    data: ChartDatum[];
+    /** Render a legend from the data labels. */
+    legend?: boolean;
+    inline?: boolean;
+}
+/**
+ * Single horizontal proportion bar — a "60% A / 30% B / 10% C" breakdown.
+ * Segments are sized by their flex ratios (no max needed) and coloured from the
+ * SERIES palette by default. Generates an overridable `aria-label`.
+ */
+declare function StackedBarRoot({ data, legend, inline, className, "aria-label": ariaLabel, ...rest }: StackedBarProps): import("react/jsx-runtime").JSX.Element;
+export declare const StackedBar: typeof StackedBarRoot & {
+    Track: typeof Track;
+    Segment: typeof Segment;
+    Legend: typeof ChartLegend;
+};
+export {};
+//# sourceMappingURL=StackedBar.d.ts.map

package/dist/StackedBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBar.d.ts","sourceRoot":"","sources":["../src/StackedBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EACL,KAAK,UAAU,EAKhB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEzD,mFAAmF;AACnF,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAE1D;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACxE,sDAAsD;IACtD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,iBAAS,OAAO,CAAC,EAAE,KAAK,EAAE,KAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,2CAc3F;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAC3E,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,MAAM,EACN,MAAM,EACN,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,eAAe,2CAmBjB;AAED,eAAO,MAAM,UAAU;;;;CAIrB,CAAC"}

package/dist/admin.scoped.css

@@ -103,28 +103,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -190,6 +168,28 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -249,11 +249,6 @@
       --tw-numeric-figure: initial;
       --tw-numeric-spacing: initial;
       --tw-numeric-fraction: initial;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-border-style: solid;
-      --tw-outline-style: solid;
-      --tw-duration: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -268,6 +263,11 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-border-style: solid;
+      --tw-outline-style: solid;
+      --tw-duration: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -4037,6 +4037,218 @@
     white-space: pre;
     word-wrap: normal;
   }
+:scope._ao-chart, :scope ._ao-chart {
+    --chart-max: 100;
+    --chart-height: 8rem;
+    --chart-size: 8rem;
+    --chart-gap: 0.25rem;
+    color: var(--color-primary);
+  }
+:scope._ao-chart-success, :scope ._ao-chart-success {
+    color: var(--color-success);
+  }
+:scope._ao-chart-warning, :scope ._ao-chart-warning {
+    color: var(--color-warning);
+  }
+:scope._ao-chart-danger, :scope ._ao-chart-danger {
+    color: var(--color-danger);
+  }
+:scope._ao-chart-info, :scope ._ao-chart-info {
+    color: var(--color-info);
+  }
+:scope._ao-chart-bars, :scope ._ao-chart-bars {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    row-gap: var(--chart-gap);
+    align-items: center;
+    inline-size: 100%;
+  }
+:scope._ao-chart-bar, :scope ._ao-chart-bar {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: center;
+  }
+:scope._ao-chart-bar-label, :scope ._ao-chart-bar-label {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-text-muted);
+    grid-column: 1;
+    text-align: end;
+    padding-inline-end: 0.5rem;
+    white-space: nowrap;
+  }
+:scope._ao-chart-bar-track, :scope ._ao-chart-bar-track {
+    grid-column: 2;
+    min-inline-size: 0;
+  }
+:scope._ao-chart-bar-fill, :scope ._ao-chart-bar-fill {
+    block-size: 0.75rem;
+    inline-size: calc(var(--value) / var(--chart-max) * 100%);
+    background: var(--bar-color, currentColor);
+    border-radius: 2px;
+    transition: inline-size 200ms ease, block-size 200ms ease;
+  }
+:scope._ao-chart-bar-value, :scope ._ao-chart-bar-value {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-text-muted);
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    grid-column: 3;
+    text-align: end;
+    padding-inline-start: 0.5rem;
+    white-space: nowrap;
+  }
+:scope._ao-chart:not(._ao-chart-values) ._ao-chart-bar-value, :scope ._ao-chart:not(._ao-chart-values) ._ao-chart-bar-value {
+    display: none;
+  }
+:scope._ao-chart-bars-vertical, :scope ._ao-chart-bars-vertical {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--chart-gap);
+    block-size: var(--chart-height);
+    inline-size: 100%;
+  }
+:scope._ao-chart-bars-vertical ._ao-chart-bar, :scope ._ao-chart-bars-vertical ._ao-chart-bar {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-inline-size: 0;
+    align-items: stretch;
+    gap: 0.25rem;
+  }
+:scope._ao-chart-bars-vertical ._ao-chart-bar-value, :scope ._ao-chart-bars-vertical ._ao-chart-bar-value {
+    order: 0;
+    grid-column: auto;
+    text-align: center;
+    padding: 0;
+  }
+:scope._ao-chart-bars-vertical ._ao-chart-bar-track, :scope ._ao-chart-bars-vertical ._ao-chart-bar-track {
+    order: 1;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+  }
+:scope._ao-chart-bars-vertical ._ao-chart-bar-fill, :scope ._ao-chart-bars-vertical ._ao-chart-bar-fill {
+    inline-size: 100%;
+    block-size: calc(var(--value) / var(--chart-max) * 100%);
+  }
+:scope._ao-chart-bars-vertical ._ao-chart-bar-label, :scope ._ao-chart-bars-vertical ._ao-chart-bar-label {
+    order: 2;
+    text-align: center;
+    padding: 0;
+  }
+:scope._ao-chart-stack, :scope ._ao-chart-stack {
+    display: flex;
+    flex-direction: row;
+    inline-size: 100%;
+    block-size: 0.75rem;
+    border-radius: 9999px;
+    overflow: hidden;
+    background: var(--color-surface-strong);
+  }
+:scope._ao-chart-segment, :scope ._ao-chart-segment {
+    flex: var(--value) 1 0;
+    min-inline-size: 0;
+    background: var(--segment-color, currentColor);
+    transition: flex-grow 200ms ease;
+  }
+:scope._ao-chart-segment + ._ao-chart-segment, :scope ._ao-chart-segment + ._ao-chart-segment {
+    box-shadow: -1px 0 0 0 var(--color-surface);
+  }
+:scope._ao-chart-donut-figure, :scope ._ao-chart-donut-figure {
+    position: relative;
+    inline-size: var(--chart-size);
+    aspect-ratio: 1;
+    display: inline-grid;
+    place-items: center;
+  }
+:scope._ao-chart-donut, :scope ._ao-chart-donut {
+    --donut-thickness: 33%;
+    inline-size: var(--chart-size);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: conic-gradient(var(--donut-segments, currentColor 0 100%));
+    -webkit-mask: radial-gradient( circle at center, transparent calc(50% - var(--donut-thickness)), #000 calc(50% - var(--donut-thickness)) );
+    mask: radial-gradient( circle at center, transparent calc(50% - var(--donut-thickness)), #000 calc(50% - var(--donut-thickness)) );
+  }
+:scope._ao-chart-donut-figure > ._ao-chart-donut, :scope ._ao-chart-donut-figure > ._ao-chart-donut {
+    grid-area: 1 / 1;
+    inline-size: 100%;
+  }
+:scope._ao-chart-donut-pie, :scope ._ao-chart-donut-pie {
+    --donut-thickness: 50%;
+  }
+:scope._ao-chart-donut-center, :scope ._ao-chart-donut-center {
+    text-align: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    grid-area: 1 / 1;
+    z-index: 1;
+    pointer-events: none;
+  }
+:scope._ao-chart-legend, :scope ._ao-chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: calc(var(--spacing) * 3);
+    row-gap: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-text-muted);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+:scope._ao-chart-legend-item, :scope ._ao-chart-legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+  }
+:scope._ao-chart-legend-item::before, :scope ._ao-chart-legend-item::before {
+    content: "";
+    inline-size: 0.625rem;
+    block-size: 0.625rem;
+    border-radius: 2px;
+    background: var(--legend-color, currentColor);
+    flex-shrink: 0;
+  }
+:scope._ao-chart-sm, :scope ._ao-chart-sm {
+    --chart-height: 4rem;
+    --chart-size: 4rem;
+  }
+:scope._ao-chart-lg, :scope ._ao-chart-lg {
+    --chart-height: 12rem;
+    --chart-size: 12rem;
+  }
+:scope._ao-chart-inline, :scope ._ao-chart-inline {
+    display: inline-flex;
+    vertical-align: middle;
+    --chart-height: 1em;
+    --chart-size: 1.25em;
+  }
+:scope._ao-chart-inline ._ao-chart-stack, :scope ._ao-chart-inline ._ao-chart-stack {
+    inline-size: 6em;
+    block-size: 0.5em;
+  }
+:scope._ao-chart-inline ._ao-chart-bars, :scope ._ao-chart-inline ._ao-chart-bars, :scope._ao-chart-inline._ao-chart-bars, :scope ._ao-chart-inline._ao-chart-bars {
+    inline-size: 6em;
+  }
+@media (prefers-reduced-motion: reduce) {
+    :scope._ao-chart-bar-fill, :scope ._ao-chart-bar-fill, :scope._ao-chart-segment, :scope ._ao-chart-segment {
+      transition: none;
+    }
+  }
 :scope._ao-collapse, :scope ._ao-collapse {
     visibility: collapse;
   }
@@ -4127,6 +4339,10 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+:scope._ao-ring, :scope ._ao-ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
 :scope._ao-select-all, :scope ._ao-select-all {
     -webkit-user-select: all;
     user-select: all;

package/dist/chart-internal.d.ts

@@ -0,0 +1,40 @@
+import { CSSProperties } from 'react';
+/** A single data point. Only `value` is required. */
+export interface ChartDatum {
+    /** Category name. When present, renders a label (and feeds the aria-label). */
+    label?: string;
+    /** The magnitude. Bars normalise it against the chart max; donut/stack sum it. */
+    value: number;
+    /** Per-segment colour override (any CSS colour). Defaults to the SERIES cycle. */
+    color?: string;
+}
+export type ChartSize = "sm" | "md" | "lg";
+export type ChartType = "bar" | "stack" | "donut" | "pie";
+/**
+ * Multi-series palette — references EXISTING Flexoki palette tokens, NOT a new
+ * token layer. Cycled by index (`SERIES[i % len]`); a datum's own `color`
+ * overrides. Vanilla authors copy the same sequence (it's documented), so both
+ * bundles render identical colours. Single-series charts ignore this entirely
+ * and follow `currentColor`.
+ */
+export declare const SERIES: readonly ["var(--color-blue-500)", "var(--color-orange-400)", "var(--color-green-500)", "var(--color-purple-400)", "var(--color-cyan-500)", "var(--color-magenta-400)", "var(--color-yellow-500)", "var(--color-red-400)"];
+/** Resolve a segment's colour: explicit `datum.color` wins, else cycle SERIES. */
+export declare function seriesColor(datum: ChartDatum, index: number): string;
+/** Largest value, floored at 1 so the bar calc never divides by zero. */
+export declare function computeMax(data: ChartDatum[], explicit?: number): number;
+/**
+ * Build the cumulative `conic-gradient` stop string for a donut/pie:
+ * `<color> <from>deg <to>deg, …`. Degrees accumulate across segments. A
+ * non-positive total yields a single neutral fill so the ring isn't blank.
+ */
+export declare function buildDonutSegments(data: ChartDatum[]): string;
+/**
+ * Auto-generated summary for the chart root's `aria-label`. Callers that pass
+ * their own `aria-label` skip this. Example: "Bar chart. Mon: 80, Tue: 52."
+ */
+export declare function buildAriaLabel(type: ChartType, data: ChartDatum[]): string;
+/** Native `title` text for a bar/segment/legend row. */
+export declare function datumTitle(datum: ChartDatum): string;
+/** Merge admin custom-property vars with an incoming `style` (incoming wins). */
+export declare function mergeStyle(vars: Record<string, string | number>, incoming?: CSSProperties): CSSProperties;
+//# sourceMappingURL=chart-internal.d.ts.map

package/dist/chart-internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-internal.d.ts","sourceRoot":"","sources":["../src/chart-internal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,qDAAqD;AACrD,MAAM,WAAW,UAAU;IACzB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAE1D;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,4NAST,CAAC;AAEX,kFAAkF;AAClF,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEpE;AAED,yEAAyE;AACzE,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAGxE;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,MAAM,CAa7D;AASD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,MAAM,CAG1E;AAED,wDAAwD;AACxD,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAEpD;AAED,iFAAiF;AACjF,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EACrC,QAAQ,CAAC,EAAE,aAAa,GACvB,aAAa,CAEf"}