@acronis-platform/ui-react 2.0.0 → 4.0.0

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/components/ui/accordion-container/accordion-container.d.ts

@@ -0,0 +1,44 @@
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+import * as React from 'react';
+interface AccordionContainerState {
+    open: boolean;
+}
+type AccordionContainerChildren = React.ReactNode | ((state: AccordionContainerState) => React.ReactNode);
+type AccordionContainerBaseProps = Omit<React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>, 'children'>;
+interface AccordionContainerProps extends AccordionContainerBaseProps {
+    /**
+     * Whether the disclosure exists at all. When `false`, `children` render
+     * directly with no trigger and no panel wrapper — the Figma
+     * `isCollapsable=false` state has no disclosure UI.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Accepts a plain node, or a render-prop function receiving the current
+     * `{ open }` state — for content outside `AccordionContainer.Content` (e.g.
+     * a header) that still needs to know whether the panel is expanded, even
+     * when this component owns the open state itself (uncontrolled).
+     */
+    children?: AccordionContainerChildren;
+}
+interface AccordionContainerContextValue {
+    collapsible: boolean;
+    open: boolean;
+}
+/**
+ * Reads whether the nearest `AccordionContainer` ancestor is `collapsible`
+ * and, if so, its current `open` state — for content outside
+ * `AccordionContainer.Content` (e.g. a header) that needs to react to the
+ * panel's state without a dedicated prop, such as `CardHeader` dropping its
+ * bottom divider while collapsed.
+ */
+declare const useAccordionContainerContext: () => AccordionContainerContextValue;
+type AccordionContainerTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
+declare const AccordionContainerTrigger: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type AccordionContainerContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Panel>;
+declare const AccordionContainerContent: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionContainerRoot: React.ForwardRefExoticComponent<AccordionContainerProps & React.RefAttributes<HTMLDivElement>> & {
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { AccordionContainerRoot as AccordionContainer, AccordionContainerTrigger, AccordionContainerContent, useAccordionContainerContext, type AccordionContainerProps, type AccordionContainerTriggerProps, type AccordionContainerContentProps, type AccordionContainerState, type AccordionContainerContextValue, };

package/dist/src/components/ui/accordion-container/index.d.ts

@@ -0,0 +1 @@
+export { AccordionContainer, AccordionContainerTrigger, AccordionContainerContent, useAccordionContainerContext, type AccordionContainerProps, type AccordionContainerTriggerProps, type AccordionContainerContentProps, type AccordionContainerState, type AccordionContainerContextValue, } from './accordion-container';

package/dist/src/components/ui/area-chart/area-chart.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartConfig, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
+import { ChartConfig, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const areaChartVariants: (props?: ({
     layout?: "single" | "stacked" | null | undefined;
@@ -34,12 +34,17 @@ export interface AreaChartAreaSettings {
     labelPosition?: CartesianLabelPosition;
 }
 export interface AreaChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof areaChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+    /**
+     * The dataviz palette this chart's series are painted from. Series that
+     * state no `color` of their own take a stop of it. See `ChartPalette`.
+     */
+    palette?: ChartPalette;
     /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */
     data: ReadonlyArray<Record<string, string | number | null>>;
     /**
-     * Per-series map of `label` / `color` (imported from the shared `Chart`
-     * primitives). Series colors are caller-supplied — reference an existing
-     * semantic `--ui-*` token; there is no chart palette tier yet.
+     * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`
+     * primitives). Series take their colour from the container's `palette`; each
+     * entry maps a key to a `label` and an optional `tone`.
      */
     config: ChartConfig;
     /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */

package/dist/src/components/ui/avatar/avatar.d.ts

@@ -2,21 +2,40 @@ import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const avatarVariants: (props?: ({
-    color?: "blue" | "gray" | "green" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
+    color?: "blue" | "green" | "gray" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
-}
-/**
- * A user/entity avatar: a colored circle showing an image or initials. Compose
- * `AvatarImage` and/or `AvatarFallback` inside; stack several in `AvatarGroup`.
- */
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
 /** The avatar image; hidden by Base UI until it loads, revealing the fallback. */
 declare const AvatarImage: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
 export type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;
 /** Shown when there's no image (or it fails) — typically the user's initials. */
 declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+    /**
+     * Selects the auto-rendered fallback content when no `children` are
+     * composed: initials (`label`) or an `icon`. Ignored once `children` (e.g.
+     * `AvatarImage`/`AvatarFallback`) are composed directly — including an
+     * explicit `null`, which renders an empty circle.
+     */
+    variant?: 'text' | 'icon';
+    /**
+     * Initials shown for the `text` variant when no `children` are composed
+     * (i.e. `children` is `undefined`).
+     */
+    label?: string;
+    /**
+     * Icon shown for the `icon` variant when no `children` are composed
+     * (i.e. `children` is `undefined`).
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * A user/entity avatar: a colored circle showing an image, initials, or an
+ * icon. Compose `AvatarImage`/`AvatarFallback` for the photo-with-fallback
+ * case, or use `variant`/`label`/`icon` for a quick text or icon badge; stack
+ * several in `AvatarGroup`.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;
 /**
  * Overlapping stack of avatars. Each avatar after the first is pulled left by

package/dist/src/components/ui/bar-chart/bar-chart.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { BarShapeProps } from 'recharts/types/cartesian/Bar';
-import { ChartLegend, ChartTooltip, ChartConfig, ChartReferenceLine, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
+import { ChartLegend, ChartTooltip, ChartConfig, ChartPalette, ChartReferenceLine, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const barChartVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
@@ -118,12 +118,17 @@ export declare function createTrackShape({ inRange, trackFill, paint, }: {
     paint?: BarPaintOverride;
 }): ({ background: track, index: row, ...bar }: BarShapeProps) => import("react/jsx-runtime").JSX.Element;
 export interface BarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof barChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+    /**
+     * The dataviz palette this chart's series are painted from. Series that
+     * state no `color` of their own take a stop of it. See `ChartPalette`.
+     */
+    palette?: ChartPalette;
     /** Row-per-category data. Each object holds the category key + one numeric field per series. */
     data: ReadonlyArray<Record<string, string | number>>;
     /**
-     * Per-series map of `label` / `color` (imported from the shared `Chart`
-     * primitives). Series colors are caller-supplied — reference an existing
-     * semantic `--ui-*` token; there is no chart palette tier yet.
+     * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`
+     * primitives). Series take their colour from the container's `palette`; each
+     * entry maps a key to a `label` and an optional `tone`.
      */
     config: ChartConfig;
     /** Series to plot — one `<Bar>` per key. Each must exist in `config` and in every data row. */

package/dist/src/components/ui/button/button.d.ts

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "ghost" | "secondary" | "default" | "destructive" | "ai" | null | undefined;
+    variant?: "default" | "ghost" | "secondary" | "destructive" | "ai" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /**

package/dist/src/components/ui/card/card.d.ts

@@ -1,17 +1,78 @@
 import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-interface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {
+declare const cardVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     /**
      * Replace the rendered `<div>` with another element or component (Base UI
-     * composition) — e.g. render `CardTitle` as a heading. The component's props
-     * and class names are merged onto it.
+     * composition) — e.g. render `Card` as an `<article>`.
+     */
+    render?: useRender.RenderProp;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The card's title. Renders nothing when omitted. */
+    title?: string;
+    /** Helper text shown under the title; only rendered when `hasDescription`. */
+    description?: string;
+    /** Shows `description` below the title. */
+    hasDescription?: boolean;
+    /** Shows a drag handle at the start of the header, for reorderable lists. */
+    isDraggable?: boolean;
+    /** Accessible label for the drag handle. */
+    dragHandleLabel?: string;
+    /** Shows a toggle switch at the start of the header. */
+    isSwitchable?: boolean;
+    /** Controlled checked state of the header switch. */
+    switchChecked?: boolean;
+    /** Uncontrolled initial checked state of the header switch. */
+    defaultSwitchChecked?: boolean;
+    /** Fires when the header switch is toggled. */
+    onSwitchCheckedChange?: (checked: boolean) => void;
+    /** Disables the header switch. */
+    switchDisabled?: boolean;
+    /** Accessible label for the header switch. */
+    switchLabel?: string;
+    /** Shows an avatar before the title. */
+    hasAvatar?: boolean;
+    /** Initials shown in the default avatar; ignored if `avatar` is provided. */
+    avatarLabel?: string;
+    /** Replaces the default initials avatar with custom content. */
+    avatar?: React.ReactNode;
+    /** Shows a rename button next to the title. */
+    hasRename?: boolean;
+    /** Fires when the rename button is activated. */
+    onRename?: () => void;
+    /** Accessible label for the rename button. */
+    renameLabel?: string;
+    /** Extra content rendered inline next to the title (e.g. a tag or badge). */
+    extras?: React.ReactNode;
+    /** Actions rendered at the end of the header (e.g. a menu button). */
+    actions?: React.ReactNode;
+    /**
+     * Shows a disclosure trigger at the end of the header. Only has an effect
+     * when this header renders inside a collapsible `AccordionContainer` —
+     * see the collapsible composition example.
+     */
+    isCollapsible?: boolean;
+    /** Accessible label for the collapse trigger. */
+    collapseLabel?: string;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition).
+     */
+    render?: useRender.RenderProp;
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition).
      */
     render?: useRender.RenderProp;
 }
-declare const Card: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-declare const CardHeader: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-declare const CardTitle: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-declare const CardDescription: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardContent: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, type CardPartProps, };
+export { Card, CardHeader, CardContent, CardFooter, cardVariants };

package/dist/src/components/ui/card/index.d.ts

@@ -1 +1 @@
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, type CardPartProps, } from './card';
+export { Card, CardHeader, CardContent, CardFooter, cardVariants, type CardProps, type CardHeaderProps, type CardPartProps, } from './card';

package/dist/src/components/ui/card-section/card-section.d.ts

@@ -0,0 +1,50 @@
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const cardSectionVariants: (props?: ({
+    variant?: "slot" | "list" | "tag" | "table-actions" | "card-primary" | "card-secondary" | null | undefined;
+    hasBottomBorder?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardSectionBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'>, VariantProps<typeof cardSectionVariants> {
+    /** Extra content rendered inline next to the section title (e.g. a tag). */
+    extras?: React.ReactNode;
+    /** Actions rendered at the end of the section header row (e.g. a menu button). */
+    actions?: React.ReactNode;
+    /** Body of the `slot` variant — arbitrary passthrough content. */
+    content?: React.ReactNode;
+    /**
+     * Body of the `tag` variant — a wrapping row of tags. Has no built-in
+     * default: like `contentList`, the consumer supplies the tags.
+     */
+    contentTag?: React.ReactNode;
+    /**
+     * Body of the `list` variant — title/description key-value rows. Has no
+     * built-in default: the `ListItem` tokens the design references
+     * (`--ui-card-body-section-item-*`) do not exist in tokens-pd yet.
+     */
+    contentList?: React.ReactNode;
+    /** Body of the `table-actions` variant — a table with row actions. */
+    contentTable?: React.ReactNode;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition) — e.g. render the section as a `<section>`.
+     */
+    render?: useRender.RenderProp;
+}
+/**
+ * A band of content stacked inside a `Card`'s body.
+ *
+ * `hasHeader` and `title` form a discriminated union: turning the section's own
+ * mini-header on requires a title, because the header row always renders one.
+ */
+export type CardSectionProps = CardSectionBaseProps & ({
+    /** Shows the section's own mini-header row (14px, distinct from `CardHeader`). */
+    hasHeader: true;
+    /** The section header's title. Required whenever `hasHeader` is set. */
+    title: string;
+} | {
+    hasHeader?: false;
+    title?: never;
+});
+declare const CardSection: React.ForwardRefExoticComponent<CardSectionProps & React.RefAttributes<HTMLDivElement>>;
+export { CardSection, cardSectionVariants };

package/dist/src/components/ui/card-section/index.d.ts

@@ -0,0 +1 @@
+export { CardSection, cardSectionVariants, type CardSectionProps, type CardSectionBaseProps, } from './card-section';

package/dist/src/components/ui/category-bar/category-bar.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartConfig } from '../chart';
+import { ChartConfig, ChartPalette } from '../chart';
 import * as React from 'react';
 declare const categoryBarVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -18,16 +18,22 @@ export interface CategoryBarTooltipContext extends CategoryBarSegment {
     percent: number;
     /**
      * CSS color reference for the segment — the `var(--color-<key>)` bridge, which
-     * resolves the config entry's `color` or its per-theme `theme` value. Usable
-     * anywhere a CSS color is (e.g. a `style` background); not a literal value.
+     * resolves the palette stop assigned to this segment. Usable anywhere a CSS
+     * color is (e.g. a `style` background); not a literal value.
      */
     color: string;
 }
 export interface CategoryBarProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof categoryBarVariants> {
     /** Ordered segments (left → right). Widths are proportional to `value`. */
     data: ReadonlyArray<CategoryBarSegment>;
-    /** Maps each segment `key` to a `label` and `color` (an existing `--ui-*` token). */
+    /** Maps each segment `key` to a `label` and, optionally, a palette `tone`. */
     config: ChartConfig;
+    /**
+     * The dataviz palette the segments are painted from. Segments take a stop of
+     * it in the palette's defined order, or the one their `tone` names. Defaults
+     * to `categorical`.
+     */
+    palette?: ChartPalette;
     /** Show the legend below the bar (color dot + label + value + %). */
     showLegend?: boolean;
     /** Show a hover tooltip per segment (dot + label + value + %). */

package/dist/src/components/ui/chart/__stories__/palette-control.d.ts

@@ -0,0 +1,48 @@
+export declare const paletteArgTypes: {
+    palette: {
+        name: string;
+        description: string;
+        control: {
+            type: "select";
+        };
+        options: string[];
+        mapping: {
+            categorical: {
+                type: "categorical";
+            };
+            'sequential-blue': {
+                type: "sequential";
+                ramp: "blue";
+            };
+            'sequential-teal': {
+                type: "sequential";
+                ramp: "teal";
+            };
+            'sequential-orange': {
+                type: "sequential";
+                ramp: "orange";
+            };
+            'sequential-violet': {
+                type: "sequential";
+                ramp: "violet";
+            };
+            'diverging-blue-orange': {
+                type: "diverging";
+                pair: "blue-orange";
+            };
+            'diverging-teal-violet': {
+                type: "diverging";
+                pair: "teal-violet";
+            };
+            status: {
+                type: "status";
+            };
+        };
+        table: {
+            category: string;
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
+};

package/dist/src/components/ui/chart/__tests__/chart-palette.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/ui/chart/chart-palette.d.ts

@@ -0,0 +1,128 @@
+/** A sequential ramp: one hue, eight stops from lightest to darkest. */
+export type ChartSequentialRamp = 'blue' | 'teal' | 'orange' | 'violet';
+/** A diverging pair: two hues meeting at a pale midpoint. */
+export type ChartDivergingPair = 'blue-orange' | 'teal-violet';
+/**
+ * A semantic status tone. Ordered by severity in the product's picker:
+ * danger (red) · critical (orange) · warning (yellow) · success (green) ·
+ * info (blue) · neutral (gray). Note that `critical` is orange and ranks
+ * *below* `danger` — that is what the tokens say, across the whole semantic
+ * tier, not a typo here.
+ */
+export type ChartStatusTone = 'danger' | 'critical' | 'warning' | 'success' | 'info' | 'neutral';
+/** Which palette a chart's series are painted from. */
+export type ChartPalette = {
+    type: 'categorical';
+} | {
+    type: 'sequential';
+    ramp: ChartSequentialRamp;
+} | {
+    type: 'diverging';
+    pair: ChartDivergingPair;
+} | {
+    type: 'status';
+};
+/**
+ * How one series picks its color out of the active palette.
+ *
+ * Only the two palettes whose colors are independent of each other accept an
+ * override:
+ *
+ * - `categorical` — `{ slot }` picks one of the 16 hues.
+ * - `status` — `{ status }` names a tone.
+ *
+ * `sequential` and `diverging` accept none. Their stops are a *ramp*: the
+ * colors mean something only in relation to each other, so letting one series
+ * jump to an arbitrary stop would break the reading order the ramp exists to
+ * convey. The product's widget editor agrees — it offers a ramp/pair picker
+ * and no per-series control. An override passed under those palettes is
+ * ignored, with a dev warning.
+ *
+ * Neither form can express a color from outside the palette — that is the point.
+ */
+export type ChartSeriesTone = {
+    slot: number;
+    status?: never;
+    sameAs?: never;
+} | {
+    slot?: never;
+    status: ChartStatusTone;
+    sameAs?: never;
+}
+/**
+ * Paint whatever the series under this key paints, under any palette. For a
+ * twin series that is the *same* metric drawn differently — a forecast tail
+ * continuing its actuals, a projection band behind its bars — where two hues
+ * would read as two metrics. Resolved by `resolveChartColors`, which is the
+ * only place the whole config is in view.
+ */
+ | {
+    slot?: never;
+    status?: never;
+    sameAs: string;
+};
+/** The 16 categorical hues, in the order the product's picker lists them. */
+export declare const CHART_CATEGORICAL_TOKENS: readonly string[];
+/** Each sequential ramp's eight stops, lightest (1) to darkest (8). */
+export declare const CHART_SEQUENTIAL_TOKENS: Readonly<Record<ChartSequentialRamp, readonly string[]>>;
+/** Each diverging pair's six stops, one hue's strongest through to the other's. */
+export declare const CHART_DIVERGING_TOKENS: Readonly<Record<ChartDivergingPair, readonly string[]>>;
+/** The six semantic status tones. */
+export declare const CHART_STATUS_TOKENS: Readonly<Record<ChartStatusTone, string>>;
+/** The default palette — what a chart paints with when none is chosen. */
+export declare const CHART_DEFAULT_PALETTE: ChartPalette;
+/**
+ * The stops a palette offers, in picker order. `status` has named tones rather
+ * than positional stops, so it returns an empty list — use
+ * `CHART_STATUS_TOKENS` for those.
+ */
+export declare function listPaletteStops(palette: ChartPalette): readonly string[];
+/**
+ * Every choice a per-series picker may offer for this palette — what the
+ * product's widget editor renders in its dropdown. Pure, so the form can build
+ * its UI without re-deriving the palette.
+ *
+ * Empty for `sequential` and `diverging`: those have no per-series control, so
+ * a form driven by this function renders no picker for them, which is exactly
+ * the design.
+ */
+export declare function listPaletteChoices(palette: ChartPalette): readonly ChartSeriesTone[];
+export interface ResolveSeriesColorOptions {
+    /** This series' position among the chart's series. */
+    index: number;
+    /** This series' explicit choice within the palette, if it may make one. */
+    tone?: ChartSeriesTone;
+}
+/**
+ * The color one series paints with.
+ *
+ * Series walk the palette **in its defined order** — series 1 takes stop 1,
+ * series 2 takes stop 2, and so on, wrapping once the stops run out. The order
+ * is the design's, not something derived here: no re-ordering, no spreading
+ * across a ramp, no skipping stops.
+ *
+ * On top of that, `categorical` and `status` honour a per-series override
+ * (see `ChartSeriesTone`); `sequential` and `diverging` do not.
+ *
+ * Always returns a token from the active palette. A `slot` out of range is
+ * clamped (with a dev warning) rather than passed through, so switching
+ * palettes can never leave a series painting off-palette.
+ */
+export declare function resolveSeriesColor(palette: ChartPalette, { index, tone }: ResolveSeriesColorOptions): string;
+/**
+ * Series that would paint the same color — what the widget editor's "duplicate
+ * color" warning is keyed to. Returns one group per collision, each holding the
+ * colliding series' keys in input order.
+ *
+ * Only series that named a `tone` can collide: automatic assignment is
+ * injective by construction (up to `categorical`'s 16-series wrap).
+ *
+ * Pass the chart's `config` to exclude intentional aliases: a series with
+ * `tone: { sameAs }` shares its target's colour on purpose, so it is not a
+ * collision. Without the config every alias reads as a duplicate.
+ */
+export declare function findDuplicateTones(colors: Readonly<Record<string, string>>, config?: Readonly<Record<string, {
+    tone?: {
+        sameAs?: string;
+    };
+}>>): string[][];

package/dist/src/components/ui/chart/chart.d.ts

@@ -2,24 +2,43 @@ import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
 import { NameType, Payload, ValueType } from 'recharts/types/component/DefaultTooltipContent';
 import { Props as LegendProps } from 'recharts/types/component/Legend';
 import { TooltipContentProps } from 'recharts/types/component/Tooltip';
+import { ChartPalette, ChartSeriesTone } from './chart-palette';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
-declare const THEMES: {
-    readonly light: "";
-    readonly dark: "[data-theme='dark']";
-};
 export type ChartConfig = {
     [k in string]: {
         label?: React.ReactNode;
         icon?: React.ComponentType;
-    } & ({
-        color?: string;
-        theme?: never;
-    } | {
-        color?: never;
-        theme: Record<keyof typeof THEMES, string>;
-    });
+        /**
+         * Which stop of the container's `palette` this series paints with. Left
+         * unset, it is assigned from the series' position. See `ChartSeriesTone`.
+         *
+         * There is deliberately no free-form `color` here: every series colour
+         * comes from the chart's palette, so a chart cannot paint a hue the design
+         * system does not define. Pick a different palette on `ChartContainer`, or
+         * a different stop of it with this.
+         */
+        tone?: ChartSeriesTone;
+    };
+};
+/**
+ * A `ChartConfig` with every series' palette colour filled in. This is what the
+ * container puts on the context, so the plot, the tooltip rows and the legend
+ * markers all read the same resolved colour.
+ */
+export type ResolvedChartConfig = {
+    [k in string]: ChartConfig[string] & {
+        color: string;
+    };
 };
+/**
+ * Resolve each series' colour out of `palette` — in the palette's defined
+ * order, honouring any `tone` a series named.
+ *
+ * Exported for tests and for the widget editor, which needs the same resolved
+ * map to detect duplicate colours (`findDuplicateTones`) without re-deriving it.
+ */
+export declare function resolveChartColors(config: ChartConfig, palette: ChartPalette): ResolvedChartConfig;
 export type ChartTooltipContentProps = Partial<TooltipContentProps<ValueType, NameType>> & {
     className?: string;
     hideLabel?: boolean;
@@ -44,20 +63,52 @@ export type ChartLegendContentProps = {
      * legend out inside its plot (see `Treemap`).
      */
     config?: ChartConfig;
+    /**
+     * `default` — the current horizontal wrap layout (one row of chips).
+     * `list` — a vertical list where each entry is `[dot] [label flex-1] [value]`,
+     * matching the Figma donut/radial widget legend. Use alongside a manually-built
+     * `payload` passed from outside the chart's recharts composition.
+     */
+    variant?: 'default' | 'list';
+    /**
+     * When `variant="list"`, the field on `payload[i].payload` to display as the
+     * right-hand value. Typically the chart's `dataKey` (the numeric series field).
+     */
+    valueKey?: string;
+    /**
+     * Format the value shown in each list entry. When omitted the raw value is
+     * stringified with `String()`.
+     */
+    valueFormatter?: (value: string | number) => string;
 };
 export interface ChartContainerProps extends React.ComponentProps<'div'> {
+    /**
+     * The series this chart draws, keyed by data field.
+     *
+     * Declare exactly what the chart plots. A stop is assigned by an entry's
+     * position here, not by which series end up rendered, so an entry for a
+     * series the chart doesn't draw still consumes a colour and shifts the ones
+     * that follow it. (That is deliberate: a series then keeps its colour when a
+     * sibling is toggled off, instead of the whole chart recolouring.)
+     */
     config: ChartConfig;
+    /**
+     * The dataviz palette this chart's series are painted from. Series take a
+     * stop of it in the palette's defined order, or the one their `tone` names.
+     * Defaults to `categorical` — there is no "no palette" state.
+     */
+    palette?: ChartPalette;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
 }
-declare function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
-declare const ChartStyle: ({ id, config }: {
+declare function ChartContainer({ id, className, children, config, palette, ...props }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
+declare const ChartStyle: ({ id, config, }: {
     id: string;
-    config: ChartConfig;
+    config: ResolvedChartConfig;
 }) => import("react/jsx-runtime").JSX.Element | null;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 /** The `content` a caller passes to override the default tooltip (recharts' `Tooltip['content']`). */
 export type ChartTooltipContentType = React.ComponentProps<typeof ChartTooltip>['content'];
 declare function ChartTooltipContent({ active, payload, label, className, hideLabel, hideIndicator, labelFormatter, formatter, labelClassName, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
 declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, variant, valueKey, valueFormatter, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };