@persona/design-system 0.10.11 → 0.10.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.10.11",
+  "version": "0.10.13",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -41,7 +41,6 @@
     "./components/ButtonGroup": "./dist/components/ButtonGroup/index.mjs",
     "./components/Card": "./dist/components/Card/index.mjs",
     "./components/CardV2": "./dist/components/CardV2/index.mjs",
-    "./components/Chart": "./dist/components/Chart/index.mjs",
     "./components/Checkbox": "./dist/components/Checkbox/index.mjs",
     "./components/CodeHighlight": "./dist/components/CodeHighlight/index.mjs",
     "./components/CodeHighlight/PrismWithLanguages": "./dist/components/CodeHighlight/PrismWithLanguages.mjs",
@@ -85,8 +84,10 @@
     "./components/SmartTextInput": "./dist/components/SmartTextInput/index.mjs",
     "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
     "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
+    "./components/SmartTextInput/parser/safe-parse": "./dist/components/SmartTextInput/parser/safe-parse.mjs",
     "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
     "./components/SmartTextInput/parser/smart-text/types": "./dist/components/SmartTextInput/parser/smart-text/types.mjs",
+    "./components/SmartTextInput/parser/tree": "./dist/components/SmartTextInput/parser/tree.mjs",
     "./components/SmartTextInput/PillType": "./dist/components/SmartTextInput/PillType.mjs",
     "./components/Spacer": "./dist/components/Spacer/index.mjs",
     "./components/Spinner": "./dist/components/Spinner/index.mjs",
@@ -143,6 +144,7 @@
     "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
     "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
     "./lib/useChain": "./dist/lib/useChain.mjs",
+    "./lib/useCloseFocus": "./dist/lib/useCloseFocus.mjs",
     "./lib/useControlled": "./dist/lib/useControlled.mjs",
     "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
     "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
@@ -184,7 +186,6 @@
     "build": "tsdown && node scripts/assert-no-node-imports.mjs && node scripts/assert-styled-components-interop.mjs && node scripts/assert-parser-declarations.mjs",
     "release": "scripts/release.sh --dry-run",
     "skills:validate": "intent validate skills",
-    "typecheck:charts": "node scripts/typecheck-charts.mjs",
     "tokens:generate": "node scripts/generate-semantic-tokens.mjs && node scripts/generate-charting-tokens.mjs",
     "tokens:check": "node scripts/generate-semantic-tokens.mjs --check && node scripts/generate-charting-tokens.mjs --check",
     "skills:stale": "intent stale"
@@ -225,7 +226,7 @@
     "color": "^5.0.3",
     "csstype": "^3.1.2",
     "dompurify": "^3.4.17",
-    "downshift": "^9.0.9",
+    "downshift": "^9.4.0",
     "framer-motion": "^6.5.1",
     "fuse.js": "^7.1.0",
     "lodash-es": "^4.18.1",
@@ -245,8 +246,8 @@
     "@faker-js/faker": "^10.5.0",
     "@figma/code-connect": "^1.4.4",
     "@oxlint/plugins": "1.72.0",
-    "@persona/design-tokens": "0.4.25",
-    "@persona/icons": "0.1.14",
+    "@persona/design-tokens": "0.4.27",
+    "@persona/icons": "0.1.16",
     "@storybook/react": "^10.6.2",
     "@storybook/react-vite": "^10.6.2",
     "@tanstack/intent": "^0.3.6",
@@ -279,7 +280,6 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.30.5",
     "recharts": "^2.13.3",
-    "recharts-v3": "npm:recharts@^3.2.1",
     "storybook": "^10.6.2",
     "styled-components": "^5.3.5",
     "tsdown": "^0.21.0",
@@ -297,7 +297,6 @@
     "react": ">=17",
     "react-dom": ">=17",
     "react-router-dom": "^6.30.1 || ^7.18.2",
-    "recharts": "^2.13.3 || ^3",
     "styled-components": "^5.3.5"
   },
   "peerDependenciesMeta": {
@@ -309,9 +308,6 @@
     },
     "oxlint": {
       "optional": true
-    },
-    "recharts": {
-      "optional": true
     }
   },
   "publishConfig": {
@@ -327,7 +323,6 @@
       "./components/ButtonGroup": "./dist/components/ButtonGroup/index.mjs",
       "./components/Card": "./dist/components/Card/index.mjs",
       "./components/CardV2": "./dist/components/CardV2/index.mjs",
-      "./components/Chart": "./dist/components/Chart/index.mjs",
       "./components/Checkbox": "./dist/components/Checkbox/index.mjs",
       "./components/CodeHighlight": "./dist/components/CodeHighlight/index.mjs",
       "./components/CodeHighlight/PrismWithLanguages": "./dist/components/CodeHighlight/PrismWithLanguages.mjs",
@@ -371,8 +366,10 @@
       "./components/SmartTextInput": "./dist/components/SmartTextInput/index.mjs",
       "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
       "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
+      "./components/SmartTextInput/parser/safe-parse": "./dist/components/SmartTextInput/parser/safe-parse.mjs",
       "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
       "./components/SmartTextInput/parser/smart-text/types": "./dist/components/SmartTextInput/parser/smart-text/types.mjs",
+      "./components/SmartTextInput/parser/tree": "./dist/components/SmartTextInput/parser/tree.mjs",
       "./components/SmartTextInput/PillType": "./dist/components/SmartTextInput/PillType.mjs",
       "./components/Spacer": "./dist/components/Spacer/index.mjs",
       "./components/Spinner": "./dist/components/Spinner/index.mjs",
@@ -429,6 +426,7 @@
       "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
       "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
       "./lib/useChain": "./dist/lib/useChain.mjs",
+      "./lib/useCloseFocus": "./dist/lib/useCloseFocus.mjs",
       "./lib/useControlled": "./dist/lib/useControlled.mjs",
       "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
       "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",

package/skills/ui-authoring/COMPONENTS.md

@@ -17,7 +17,6 @@ exists. If there is no `.mdx`, use the published type declarations
 | `Button` | Triggering an action. Use `IconButton` when there is no label | `@persona/design-system/components/Button` |
 | `ButtonGroup` | Choosing among related modes in a compact connected button set (often icons, e.g. alignment). Use `Toggle` for a single on/off setting; `RadioGroup` for a visible list of labeled choices | `@persona/design-system/components/ButtonGroup` |
 | `Card` + `Card.Section` | Grouping related content and actions so they're easier to scan. Collapsible sections on long settings pages | `@persona/design-system/components/CardV2` |
-| `ChartFrame`, `ChartLegend`, `ChartPopover` | Experimental (beta). Charts built on `recharts` (optional peer, 2.x or 3.x): `ChartFrame` lays out legend and plot, `ChartLegend` keys and toggles series, `ChartPopover` is the `<Tooltip>` content. Colour series with `useChartColors` / `resolveSeriesColors`; style hand-built Recharts parts with `useChartStyles`. See Storybook Charts → Design | `@persona/design-system/components/Chart` |
 | `Checkbox` | Selecting one or more options from a visible list | `@persona/design-system/components/Checkbox` |
 | `Combobox` | Picking from a long list that needs search (single or multi). Use `RadioGroup` when every choice should stay visible (one); `Checkbox` when every choice should stay visible (several); `Select` for a short closed list with no search | `@persona/design-system/components/Combobox` |
 | `ConfigFormGroup` | Form fields — spacing a group of config fields and setting `configField` via context. Pair with `TextField` / `TextAreaField` | `@persona/design-system/components/ConfigFormGroup` |
@@ -26,7 +25,7 @@ exists. If there is no `.mdx`, use the published type declarations
 | `SplitColumnLayout` | An 8:4 main and aside page. Same optional regions as `SingleColumnLayout`. Stacks main then aside below 768px | `@persona/design-system/patterns/PageLayout` |
 | `DataTable` | Data table — browsing tabular data with filtering, bulk actions, search, pagination, and sorting | `@persona/design-system/components/DataTable` |
 | `IndexTableLayout` | Standard page shell for a DataTable index; hosts supply controls and own saved-view persistence | `@persona/design-system/patterns/IndexTableLayout` |
-| `FilterBar` | Structured filters with native Rules; opt-in field `condition`, `pickerGroup`, and `disabledReason` support individual host-defined predicates. Hosts own flags and serialization; see DataTable.mdx | `@persona/design-system/components/DataTable/TableControls` |
+| `FilterBar` | Structured filters with native Rules; opt-in field `condition`, `pickerGroup`, and `disabledReason` support individual host-defined predicates. Optional `getValueLabel(fieldId, value)` supplies display-only choice labels for pills/Rules before registry/raw fallbacks. Hosts re-render when names arrive and own fetching, editors, flags and serialization; see DataTable.mdx | `@persona/design-system/components/DataTable/TableControls` |
 | `DatePicker` | Picking a date or date range from a calendar | `@persona/design-system/components/DatePicker` |
 | `DropdownButton` | Opening a menu of related actions from a button | `@persona/design-system/components/DropdownButton` |
 | `DropdownMenu` | Showing a temporary action list on a custom trigger | `@persona/design-system/components/DropdownMenu` |

package/skills/ui-authoring/PATTERNS.md

@@ -11,7 +11,6 @@ Which pattern to use, and for what. Patterns with a dedicated doc link to
 | [Forms](../../patterns/Forms/Forms.mdx) | Labeled fields in a `Modal`, `RightPanel`, or page. Unlabeled controls (search, toolbars) stay as `Input` |
 | Stack / HStack | A heading above content, a cancel/save pair, a title next to an add button, or a wrapping row of tags |
 | EmptyStates | A list, table, or card has no items yet and you want to invite adding one |
-| Charting | Build charts with `recharts` and the experimental `@persona/design-system/components/Chart` pieces; colour series from the chart palettes, never hex |
 | Indicators | A record’s open, pending, completed, or failed state next to other content. An in-page notice the user shouldn’t miss (success, warning, error). Use `Toast` if it can auto-dismiss |
 | [SingleColumnLayout](../../patterns/PageLayout/SingleColumnLayout.mdx) | One page column under `PageHeader`, with optional tabs and a page notice. `width="wide"` uses the fluid grid |
 | [SplitColumnLayout](../../patterns/PageLayout/SplitColumnLayout.mdx) | An 8:4 main and aside page. Same optional regions. Stacks main then aside below 768px |
@@ -26,14 +25,18 @@ Which pattern to use, and for what. Patterns with a dedicated doc link to
 
 ## Page layouts
 
-Index pages backed by `DataTable` use `IndexTableLayout`, which owns its `Container`, `PageHeader`,
-`Section`, and `Card` shell. Import it from `@persona/design-system/patterns/IndexTableLayout`;
+Index pages backed by `DataTable` use `IndexTableLayout`, which composes `PageHeader`,
+`SingleColumnLayout` (wide by default), and `Card`; don't wrap it in `Container` or `Section`.
+Import it from `@persona/design-system/patterns/IndexTableLayout`;
 never copy it, persona-web's `DashboardDataTable` wrapper (PDS does not ship one), or
 `TableControls`/filter panels into an app. Pass app-specific filters through the `controls` prop
 (`controls={{ filters, filterResolver }}` or `controls={{ filterPanel }}`), and if the pattern lacks
 a slot you need, add it here instead of forking the layout. Other pages render `PageHeader`, then `SingleColumnLayout` or
 `SplitColumnLayout`. Do not wrap those templates in `Container` or `Section`.
 
+For bulk actions on an index page, always set `floatingBulkActions` with `bulkActions` or
+`getAvailableBulkActions`; inline bulk-action buttons in the table controls are legacy.
+
 ```tsx
 import Header from '@persona/design-system/components/PageHeader';
 import { SingleColumnLayout, SplitColumnLayout } from '@persona/design-system/patterns/PageLayout';
@@ -294,66 +297,3 @@ Message-only (no CTA):
 
 For `ListBox`, pass `emptyText="No items"` prop directly.
 For `Card.Section`, pass `empty={true}` to show the built-in empty state.
-
-
-
-## Charting
-
-Experimental (beta). Build charts with `recharts` (an optional peer, 2.x or 3.x) and the pieces in
-`@persona/design-system/components/Chart`. Full usage guidance comes later; until then see Storybook
-**Charts → Design** (Chart frame, Elements, Themes) and **Charts → Chart types** (Bar chart, Line
-chart).
-
-- `ChartFrame`: legend and plot layout, full width, 300px plot height by default.
-- `ChartLegend`: series key; with `onToggle` (and `useChartSeriesVisibility`) it shows and hides series.
-- `ChartPopover`: the content of a Recharts `<Tooltip>`.
-- `useChartStyles()`: PDS props for Recharts' grid, axes and tooltip cursor in a hand-built chart.
-- `useChartColors()` / `resolveSeriesColors()`: series colours from a chart palette.
-
-```tsx
-import {
-  ChartFrame,
-  ChartLegend,
-  ChartPopover,
-  CHART_PLOT_MARGIN,
-  useChartColors,
-  useChartStyles,
-} from '@persona/design-system/components/Chart';
-import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-
-const colors = useChartColors().resolve(series); // { [series.key]: Color }
-const styles = useChartStyles();
-const items = series.map((s) => ({ ...s, color: colors[s.key] }));
-
-<ChartFrame aria-label='Tickets by status' legend={<ChartLegend items={items} />}>
-  <ResponsiveContainer width='100%' height='100%'>
-    <BarChart data={data} margin={CHART_PLOT_MARGIN}>
-      <Tooltip cursor={styles.barCursor} content={<ChartPopover series={items} />} />
-      <CartesianGrid {...styles.grid} />
-      <XAxis dataKey='month' {...styles.xAxis} />
-      <YAxis {...styles.yAxis} />
-      {items.map((s) => <Bar key={s.key} dataKey={s.key} name={s.label} fill={s.color} />)}
-    </BarChart>
-  </ResponsiveContainer>
-</ChartFrame>
-```
-
-### Palettes
-
-| Data | Palette (`useChartColors(palette)`) | Colours |
-|------|-------------------------------------|---------|
-| Distinct, unordered series (default) | `'qualitative'` | 12 |
-| Ordered magnitude in one hue | `'sequentialMono'` | 8 |
-| Values diverging around a midpoint | `'sequentialDivergent'` | 10 |
-
-Take Qualitative colours in palette order: the order is tuned for readability. Override a series
-only with a Persona token, `chartColor(Color.X)` or a `{ light, dark }` pair of tokens; never hex.
-
-**Legacy:** `ChartingColors.Sequential` and `ChartingColors.Categorical` from
-`@persona/design-tokens` are deprecated for new charts. Existing charts may keep them until they
-move to the palettes above.
-
-**Anti-patterns:**
-- Hardcoding hex values for series colours
-- Picking Qualitative colours out of order
-- Using `'sequentialMono'` for unordered categories

package/skills/ui-authoring/STANDARD.md

@@ -79,7 +79,7 @@ nearest number.
 | Control state (checkbox, radio, toggle, tab, segmented control, focus ring) | `Fast`, `Move` | same | colour as in full; travel jumps |
 | Hover reveal (row actions, copy button, inserter) | `Fast`, `Enter` | `Faster`, `Exit` | fade |
 | Tooltip | `Fast`, `Enter`, after the 300 ms open delay | `Faster`, `Exit`, no delay | fade |
-| Popover, menu, select or combobox list: fade and scale from 0.96 at the trigger's edge | `Fast`, `Enter` | Closes at once: an exit would hold the content mounted and delay focus restoring to the trigger or field | fade in |
+| Popover, menu, select or combobox list: fade and scale from 0.96 at the trigger's edge | `Fast`, `Enter` | `Faster`, `Exit`, focus returning when the close starts; `modal` content, Select and Combobox close at once | fade |
 | Modal: overlay fade, card rises 8 px | `Fast`, `Enter` | `Faster`, `Exit`, fade only | fade |
 | Toast: fade, rise and scale from 0.96 | `Medium`, `Enter` | `MediumFast`, `Exit` | fade |
 | Side panel | `Medium`, `Enter` | `MediumFast`, `Exit` | size jumps; content fades |
@@ -96,8 +96,18 @@ translate, scale or size change. Colour isn't movement, so a colour change keeps
   a close or a hover-out; a delay only filters accidental triggers.
 - **Enter on `Enter`, leave on `Exit`, change on `Move`.** None of the curves overshoot.
 - **Nothing over `Medium` (400 ms) is a state change.** `OneSecond` is for loop periods.
+- **Prefer CSS for motion.** Use `transition` or styled-components `keyframes` whenever CSS can
+  express the motion, and always for loops (shimmers, pulses, spinners) and simple enter, exit or
+  state changes. Use framer-motion only for what CSS can't do: layout or shared-element animation,
+  drag and gesture, spring physics, or exit coordination where there is no `[data-exiting]` or
+  `[data-state='closed']` hook. A JavaScript animation runs on the main thread every frame, and an
+  infinite one can keep an unmounted screen's DOM alive.
 - **Exits are keyframe animations** on `[data-exiting]` (React Aria) or `[data-state='closed']`
   (Radix), because both unmount when the element's animations finish.
+- **Focus leaves when the close starts, not when the exit ends.** Radix returns focus only at
+  unmount, so PDS's Popover, DropdownMenu and AdvancedFilterRulesPopover use `useCloseFocus`
+  (`@persona/design-system/lib/useCloseFocus`): it runs `onCloseAutoFocus` and focuses the trigger
+  at close start, and makes the closing content inert. Raw Radix content with an exit uses it too.
 
 persona-motion owns the motion language these rules come from; PDS owns the values.
 

package/skills/ui-authoring/TOKENS.md

@@ -490,7 +490,8 @@ Apps embedded in the dashboard follow its mode with
 `<PDSProvider colorMode={readDocumentColorMode()}>` (`@persona/design-system/lib/colorMode`). That
 installs the semantic palette for PDS components and publishes it as `--pds-*` CSS variables
 (`FgPrimary` -> `var(--pds-fg-primary)`) for plain stylesheets. Wrap a subtree in
-`<ColorModeScope mode='dark'>` to render it in the other mode. Plain CSS inside a portaled overlay
+`<ColorModeScope mode='dark'>` to render it in the other mode, and read the mode in effect (for
+iframes, canvases or charts) with `useColorMode()`. Plain CSS inside a portaled overlay
 reads the `:root` variables, not the scope's. Don't copy these helpers into an app. See
 `tokens/README.md` ("Colour mode in apps").
 
@@ -702,35 +703,23 @@ const Menu = styled.div`
 
 ## Charts
 
-Experimental (beta). Colour chart series with the chart palettes from
-`@persona/design-system/components/Chart`: `useChartColors(palette)` (follows the PDS colour mode)
-or `resolveSeriesColors()`. See the Charting section of [PATTERNS.md](PATTERNS.md) and Storybook
-**Charts → Design → Themes**.
+Experimental (beta). Colour chart series with the chart palette tokens: `ChartingColors` from
+`@persona/design-tokens` (light), or `chartingLight` / `chartingDark` from
+`@persona/design-system/variables/charting`. `chartingColors(theme)` from
+`@persona/design-system/lib/semanticColor` returns the palettes for the theme's colour mode.
 
-| Need | Palette | Token palette | Colours |
-|------|---------|---------------|---------|
-| Distinct, unordered series (default) | `'qualitative'` | `ChartingColors.Qualitative` | 12 |
-| Ordered magnitude in one hue | `'sequentialMono'` | `ChartingColors.SequentialMono` | 8 |
-| Values diverging around a midpoint | `'sequentialDivergent'` | `ChartingColors.SequentialDivergent` | 10 |
+| Need | Token palette | Colours |
+|------|---------------|---------|
+| Distinct, unordered series (default) | `ChartingColors.Qualitative` | 12 |
+| Ordered magnitude in one hue | `ChartingColors.SequentialMono` | 8 |
+| Values diverging around a midpoint | `ChartingColors.SequentialDivergent` | 10 |
 
 - Take Qualitative colours in order; the order is tuned for readability.
-- Override a series only with a Persona token: `chartColor(Color.X)` or a `{ light, dark }` pair.
-  Never hex: `ChartColor` does not accept a hex string, and the `pds/semantic-color` lint rule
-  rejects it.
-
-```tsx
-import { useChartColors } from '@persona/design-system/components/Chart';
-
-const colors = useChartColors().resolve([
-  { key: 'approved', label: 'Approved' },
-  { key: 'declined', label: 'Declined' },
-]);
-<Bar dataKey='approved' fill={colors.approved} />;
-```
+- Override a series only with a Persona token, never hex; the `pds/semantic-color` lint rule
+  rejects hex.
 
 **Legacy (deprecated for new charts):** `ChartingColors.Sequential` (8) and
-`ChartingColors.Categorical` (14), also exposed under a colour mode through `chartingColors(theme)`
-from `@persona/design-system/lib/semanticColor`. Existing charts may keep them until they move to
+`ChartingColors.Categorical` (14), also exposed under a colour mode through `chartingColors(theme)`. Existing charts may keep them until they move to
 the palettes above.
 
 ## Token Verification

package/dist/ChartFrame.d.mts

@@ -1,61 +0,0 @@
-import { ChartLegendPosition } from "./chartFrameLayout.mjs";
-import { ChartLegendProps } from "./ChartLegend.mjs";
-import { ReactElement } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/components/Chart/ChartFrame.d.ts
-type ChartFrameLabel = {
-  'aria-label': string;
-  'aria-labelledby'?: never;
-} | {
-  'aria-labelledby': string;
-  'aria-label'?: never;
-};
-/** @experimental */
-type ChartFrameProps = ChartFrameLabel & {
-  /**
-   * The chart's legend. Pass `null` to omit it, e.g. for a single-series chart whose surrounding
-   * heading already names the series.
-   */
-  legend: ReactElement<ChartLegendProps> | null;
-  /**
-   * `'stack'` (default) puts the legend left-aligned above the plot; `'right'` puts it inline to
-   * the right of the plot, as wide as its longest label up to 200px (longer labels end in an
-   * ellipsis). The legend and plot are `Spacing[4]` apart when stacked and `Spacing[3]` apart inline.
-   */
-  legendPosition?: ChartLegendPosition;
-  /**
-   * Plot area height in px. Defaults to 300 (`CHART_DEFAULT_HEIGHT`). The plot always fills 100%
-   * of the frame's width, and the frame fills its container.
-   */
-  height?: number;
-  /**
-   * The plot: a Recharts chart, sized by the frame (e.g. wrapped in `ResponsiveContainer`). Give it
-   * `margin={CHART_PLOT_MARGIN}` so the frame's spacing is the only gap around the plot.
-   */
-  children: ReactElement; /** Applied to the root `<figure>`, e.g. to position or size the frame. */
-  className?: string;
-};
-/**
- * Lays out a chart: its legend and the plot area, `Spacing[4]` apart stacked (`Spacing[3]` inline), with the legend left-aligned
- * above the plot (`legendPosition='stack'`, the default) or inline on its right (`'right'`). The
- * frame has no header, border or surface of its own: titles, descriptions and controls belong to
- * the surrounding container (for example a `CardV2`), which also names the chart via
- * `aria-labelledby`.
- *
- * Size: the chart fills 100% of its container's width, and the plot is 300px tall
- * (`CHART_DEFAULT_HEIGHT`) unless `height` overrides it.
- *
- * @experimental Part of the in-progress PDS charting components; the API may change.
- */
-declare function ChartFrame({
-  legend,
-  legendPosition,
-  height,
-  children,
-  className,
-  ...label
-}: ChartFrameProps): _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { ChartFrame, ChartFrame as default, ChartFrameProps };
-//# sourceMappingURL=ChartFrame.d.mts.map

package/dist/ChartLegend.d.mts

@@ -1,60 +0,0 @@
-import { Color } from "@persona/design-tokens";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/components/Chart/ChartLegend.d.ts
-/** One series in a {@link ChartLegend}. @experimental */
-interface ChartLegendItem<K extends string = string> {
-  key: K;
-  label: string;
-  /** The series colour, from `useChartColors().resolve(...)` or `resolveSeriesColors(...)`. */
-  color: Color;
-}
-/** A titled set of legend items, e.g. the series sharing an axis. @experimental */
-interface ChartLegendGroup<K extends string = string> {
-  key: string;
-  /** Shown above the group's items in uppercase mono text. */
-  label: string;
-  items: readonly ChartLegendItem<K>[];
-}
-/** Either flat `items` or titled `groups`; groups are optional. @experimental */
-type ChartLegendContent<K extends string = string> = {
-  items: readonly ChartLegendItem<K>[];
-  groups?: never;
-} | {
-  groups: readonly ChartLegendGroup<K>[];
-  items?: never;
-};
-/** @experimental */
-type ChartLegendProps<K extends string = string> = ChartLegendContent<K> & {
-  /** Keys of the series currently hidden. Pair with {@link useChartSeriesVisibility}. */hidden?: readonly K[];
-  /**
-   * Called with a series key when its legend item is clicked. When set, every item is a toggle
-   * button (`aria-pressed` is true while the series is shown); when omitted, the legend is static.
-   * Every series may be hidden.
-   */
-  onToggle?: (key: K) => void; /** Names the legend for assistive tech. Defaults to "Chart legend". */
-  'aria-label'?: string; /** Applied to the legend's root element (the list, or the group wrapper with `groups`). */
-  className?: string;
-};
-/**
- * The series key for a chart: a square colour swatch and a `TextMedium` label per series, laid out
- * in a row that wraps (a column when it sits right of the plot in a `ChartFrame`). With `onToggle`,
- * each item toggles its series; a hidden series keeps a filled swatch at 65% opacity and gets a
- * muted label.
- *
- * Pass `groups` instead of `items` for a grouped legend: groups stack `Spacing[2]` apart, each with
- * an uppercase mono title `Spacing[1]` above its row of items.
- *
- * @experimental Part of the in-progress PDS charting components; the API may change.
- */
-declare function ChartLegend<K extends string>({
-  items,
-  groups,
-  hidden,
-  onToggle,
-  'aria-label': ariaLabel,
-  className
-}: ChartLegendProps<K>): _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { ChartLegend, ChartLegend as default, ChartLegendContent, ChartLegendGroup, ChartLegendItem, ChartLegendProps };
-//# sourceMappingURL=ChartLegend.d.mts.map

package/dist/ChartPopover.d.mts

@@ -1,155 +0,0 @@
-import { Color } from "@persona/design-tokens";
-import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/components/Chart/ChartPopover.d.ts
-/**
- * The popover density. `'default'` is the standalone chart popover (256px wide). `'condensed'` is
- * for small charts inside table cells (210px wide): the same text, tighter padding and row gaps,
- * and never a total row.
- *
- * @experimental Part of the in-progress PDS charting components; the API may change.
- */
-type ChartPopoverSize = 'default' | 'condensed';
-/**
- * One series the popover may list. `series` sets the row order, the label and the swatch colour; a
- * Recharts payload entry is matched to a series by its `dataKey`.
- *
- * @experimental
- */
-interface ChartPopoverSeries<K extends string = string> {
-  key: K;
-  label: ReactNode;
-  /** The series colour token, e.g. from `useChartColors().resolve(...)`. Falls back to the payload colour. */
-  color?: Color;
-}
-/**
- * One Recharts tooltip payload entry, typed structurally so the same component accepts the
- * payloads of Recharts 2 (`TooltipProps`) and Recharts 3 (`TooltipContentProps`).
- *
- * @experimental
- */
-interface ChartPopoverPayloadEntry {
-  dataKey?: unknown;
-  name?: unknown;
-  value?: unknown;
-  color?: string;
-  fill?: string;
-  stroke?: string;
-  /** Set by Recharts 3 for a series rendered with `hide`. */
-  hide?: boolean;
-  /** Set for legend-inactive series. */
-  inactive?: boolean;
-  /** `'none'` marks an entry Recharts itself keeps out of its tooltip. */
-  type?: string;
-  payload?: unknown;
-}
-/** One rendered row. @experimental */
-interface ChartPopoverRow {
-  key: string;
-  label: ReactNode;
-  /** The swatch colour: a Persona chart colour token. */
-  color?: string;
-  value: number | string | null | undefined;
-}
-interface ChartPopoverPanelOwnProps<K extends string = string> {
-  /** The header, e.g. the formatted x-axis category. Omitted when empty. */
-  label?: ReactNode;
-  /** The rows, top to bottom. */
-  rows: readonly ChartPopoverRow[];
-  /** Formats each row value and the total. Defaults to locale number formatting. */
-  valueFormatter?: (value: number | string, seriesKey: K | 'total') => ReactNode;
-  /** Appends a total row summing the numeric values of the visible rows. Ignored when `condensed`. */
-  showTotal?: boolean;
-  /** Overrides the computed total. */
-  total?: number;
-  /** Label of the total row. Defaults to `'Total'`. */
-  totalLabel?: ReactNode;
-  /** Defaults to `'default'`. */
-  size?: ChartPopoverSize;
-  /**
-   * Popover width in px. Defaults to 256 (`'default'`) or 210 (`'condensed'`); pass a larger number
-   * for long series names. The height always follows the rows. Series names that still do not fit
-   * are truncated with an ellipsis; values never truncate or wrap.
-   */
-  width?: number;
-  /**
-   * The series the pointer is on (`useChartActiveSeries().activeSeries`). Its row stays at full
-   * strength and the other series rows drop to 65% opacity; the total row is unaffected.
-   */
-  activeSeries?: K;
-  className?: string;
-}
-/** @experimental */
-type ChartPopoverPanelProps<K extends string = string> = ChartPopoverPanelOwnProps<K>;
-/** @experimental */
-interface ChartPopoverProps<K extends string = string> extends Omit<ChartPopoverPanelOwnProps<K>, 'rows' | 'label'> {
-  /** Injected by Recharts `<Tooltip>`. */
-  active?: boolean;
-  /** Injected by Recharts `<Tooltip>`. */
-  payload?: readonly ChartPopoverPayloadEntry[];
-  /** Injected by Recharts `<Tooltip>`: the hovered category. */
-  label?: unknown;
-  /**
-   * The chart's series, in display order. Rows follow this order and only series listed here are
-   * shown. Without it, rows follow the payload order and use the payload's names and colours.
-   */
-  series?: readonly ChartPopoverSeries<K>[];
-  /** Series keys hidden by the legend; they get no row. */
-  hiddenSeries?: Iterable<K>;
-  /** Formats the header from the hovered category. Defaults to the category as is. */
-  labelFormatter?: (label: unknown, payload: readonly ChartPopoverPayloadEntry[]) => ReactNode;
-}
-/** Default popover widths in px (Figma). @experimental */
-declare const CHART_POPOVER_WIDTH: Record<ChartPopoverSize, number>;
-/**
- * The chart popover body: an optional header, one row per series (swatch, name, right-aligned
- * value) and an optional total row. Use it directly for a popover drawn outside Recharts; inside a
- * Recharts chart use {@link ChartPopover}.
- *
- * @experimental Part of the in-progress PDS charting components; the API may change.
- */
-declare function ChartPopoverPanel<K extends string = string>({
-  label,
-  rows,
-  valueFormatter,
-  showTotal,
-  total,
-  totalLabel,
-  size,
-  width,
-  activeSeries,
-  className
-}: ChartPopoverPanelProps<K>): _$react_jsx_runtime0.JSX.Element;
-/**
- * Builds the popover rows from a Recharts tooltip payload: drops hidden and inactive series, then
- * orders, labels and colours the rest by `series` (or keeps the payload order without it).
- *
- * @experimental
- */
-declare function chartPopoverRows<K extends string>(payload: readonly ChartPopoverPayloadEntry[], series?: readonly ChartPopoverSeries<K>[], hiddenSeries?: Iterable<K>): ChartPopoverRow[];
-/**
- * Chart popover (tooltip) content for Recharts 2 and 3. Pass it to `<Tooltip content={...} />`;
- * Recharts injects `active`, `payload` and `label`.
- *
- * ```tsx
- * const series = [{ key: 'approved', label: 'Approved', color: colors.approved }, ...];
- * <Tooltip cursor={false} content={<ChartPopover series={series} hiddenSeries={hidden} />} />
- * ```
- *
- * Renders nothing while inactive or when every series is hidden.
- *
- * @experimental Part of the in-progress PDS charting components; the API may change.
- */
-declare function ChartPopover<K extends string = string>({
-  active,
-  payload,
-  label,
-  series,
-  hiddenSeries,
-  labelFormatter,
-  ...panelProps
-}: ChartPopoverProps<K>): _$react_jsx_runtime0.JSX.Element | null;
-//#endregion
-export { CHART_POPOVER_WIDTH, ChartPopover, ChartPopoverPanel, ChartPopoverPanelProps, ChartPopoverPayloadEntry, ChartPopoverProps, ChartPopoverRow, ChartPopoverSeries, ChartPopoverSize, chartPopoverRows };
-//# sourceMappingURL=ChartPopover.d.mts.map