@keboola/design 4.3.2 → 5.0.0

package/AGENTS.md

@@ -19,16 +19,18 @@ Working **on** the package (commands, layer boundary, token surface, the FA→Lu
 
 The root barrel (`@keboola/design`) is **not** the whole package. These live only at their subpath — an agent scanning the barrel (or `dist/index.d.ts`) misses them and wrongly concludes the capability is absent. The "always import from the package root" rule above holds for everything in the barrel; the rows below are the **deliberate exceptions** — import them from the subpath, not the root.
 
-| Subpath                           | Exports                                           | Reach for it when                                                |
-| --------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------- |
-| `@keboola/design`                 | Components, blocks, hooks, `ThemeProvider`, forms | Default — everything below the listed exceptions                 |
-| `@keboola/design/icons`           | Lucide re-export + Keboola-custom SVG icons       | Any icon (`import { ChevronDown } from '@keboola/design/icons'`) |
-| `@keboola/design/editors`         | `CodeEditor`, `SqlEditor`, `MergeEditor`          | Real code editing — pulls the ~1.3 MB CodeMirror bundle          |
-| `@keboola/design/mermaid`         | `MermaidDiagram` (`{ code }`)                     | Render a Mermaid diagram — **not** in the root barrel            |
-| `@keboola/design/markdown-editor` | `MarkdownEditor`                                  | Markdown editing — **not** in the root barrel                    |
-| `@keboola/design/testing`         | `renderWithTheme`                                 | Unit tests that need a component wrapped in `ThemeProvider`      |
-| `@keboola/design/styles`          | Tailwind-extending stylesheet                     | App entry, Tailwind consumers (**default**)                      |
-| `@keboola/design/styles/compiled` | Pre-compiled CSS (~176 KB)                        | App entry, when you cannot run Tailwind                          |
+| Subpath                           | Exports                                                            | Reach for it when                                                |
+| --------------------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- |
+| `@keboola/design`                 | Components, blocks, hooks, `ThemeProvider`, forms                  | Default — everything below the listed exceptions                 |
+| `@keboola/design/icons`           | Lucide re-export + Keboola-custom SVG icons                        | Any icon (`import { ChevronDown } from '@keboola/design/icons'`) |
+| `@keboola/design/editors`         | `CodeEditor`, `SqlEditor`, `MergeEditor`                           | Real code editing — pulls the ~1.3 MB CodeMirror bundle          |
+| `@keboola/design/charts`          | `LineChart`, `BarChart`, `AreaChart`, `PieChart`, `ChartContainer` | Data-viz — themed recharts wrappers; **not** in the root barrel  |
+| `@keboola/design/mermaid`         | `MermaidDiagram` (`{ code }`)                                      | Render a Mermaid diagram — **not** in the root barrel            |
+| `@keboola/design/markdown-editor` | `MarkdownEditor`                                                   | Markdown editing — **not** in the root barrel                    |
+| `@keboola/design/rjsf`            | `RjsfSchemaEditor`, `useRootFormData`                              | JSON-Schema-driven config forms (RJSF) — pulls `@rjsf/*` + ajv   |
+| `@keboola/design/testing`         | `renderWithTheme`                                                  | Unit tests that need a component wrapped in `ThemeProvider`      |
+| `@keboola/design/styles`          | Tailwind-extending stylesheet                                      | App entry, Tailwind consumers (**default**)                      |
+| `@keboola/design/styles/compiled` | Pre-compiled CSS (~176 KB)                                         | App entry, when you cannot run Tailwind                          |
 
 ### design ≠ shadcn — API deltas
 
@@ -62,16 +64,17 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 
 ### Overlays
 
-| Use            | When                                                                     |
-| -------------- | ------------------------------------------------------------------------ |
-| `Modal`        | Blocking dialog (confirmation, form, detail view)                        |
-| `Sheet`        | Slide-in panel for contextual editing without leaving the page           |
-| `Popconfirm`   | Lightweight inline confirmation anchored to the trigger (delete actions) |
-| `Popover`      | Non-modal floating panel for arbitrary rich content                      |
-| `HoverCard`    | Read-only preview panel on hover; no interactive controls                |
-| `DropdownMenu` | Contextual list of actions or navigation items on click                  |
+| Use            | When                                                                                                                                                                              |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Modal`        | Blocking dialog for a form or detail view (use `AlertModal` for confirmations)                                                                                                    |
+| `AlertModal`   | Confirmation / destructive-action dialog — owns the confirm + cancel buttons and is async-aware (stays open, disables the action, and shows a spinner until `onConfirm` resolves) |
+| `Sheet`        | Slide-in panel for contextual editing without leaving the page                                                                                                                    |
+| `Popconfirm`   | Lightweight inline confirmation anchored to the trigger (delete actions)                                                                                                          |
+| `Popover`      | Non-modal floating panel for arbitrary rich content                                                                                                                               |
+| `HoverCard`    | Read-only preview panel on hover; no interactive controls                                                                                                                         |
+| `DropdownMenu` | Contextual list of actions or navigation items on click                                                                                                                           |
 
-**Never** use `Popover` for destructive confirmations (use `Popconfirm`) or hover-only previews (use `HoverCard`).
+**Never** use `Popover` for destructive confirmations (use `Popconfirm`) or hover-only previews (use `HoverCard`). **Never** hand-roll a confirmation from `Modal` + buttons — use `AlertModal`, which owns the confirm/cancel actions and the async loading state.
 
 ### Inputs
 
@@ -126,6 +129,20 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 
 **Never** reach for raw `<ul>/<li>` for entities — use `Table` for columnar data.
 
+### Data visualization
+
+Charts ship from the **`@keboola/design/charts`** subpath (recharts under the hood — kept out of the root barrel). Series colors come from the semantic `--color-chart-1..5` palette automatically, so charts follow both the active color scheme (light/dark) and the active brand — **never** pass a hex/rgb color. A brand reskins charts by defining `colors.chart` / `colorsDark.chart` (emitted by `ThemeProvider`); brands that leave it unset use the shared palette.
+
+| Use              | When                                                                     |
+| ---------------- | ------------------------------------------------------------------------ |
+| `LineChart`      | Trend of one or more series over an ordered category (time)              |
+| `BarChart`       | Compare discrete categories; `stacked` for part-to-whole over time       |
+| `AreaChart`      | Trend with volume emphasis; `stacked` for cumulative composition         |
+| `PieChart`       | Share of a whole across a few categories; `innerRadius` makes a donut    |
+| `ChartContainer` | Wrap a raw recharts chart to inherit the themed axis/grid/tooltip chrome |
+
+`data: {…}[]` rows; `xKey` + `series: [{ dataKey, name?, color? }]` (cartesian) or `nameKey` + `dataKey` (pie). Each chart is self-contained (mounts its own responsive container) — give it a `height` (default 300). Pin a series to a palette slot with `color: 1..5`; otherwise it follows series order.
+
 ### Layout
 
 **No** `Stack` / `Flex` / `Box` component exists, by design — shadcn doesn't ship them, and adding wrappers creates a third way to do layout. Use Tailwind utility classes directly.
@@ -196,7 +213,7 @@ The `label` prop implies `orientation="horizontal"` — labels are not rendered
 
 ## Composition recipes
 
-The platform ships **no** `EntityList` / `ModalForm` / `ConfirmDialog` wrapper — these are compositions, not components. Copy the recipe; see [`COMPONENT-API.md`](./COMPONENT-API.md) for the exact props.
+The platform ships **no** `EntityList` / `ModalForm` wrapper — these are compositions, not components. Copy the recipe; see [`COMPONENT-API.md`](./COMPONENT-API.md) for the exact props. (Confirmations are the exception — they _are_ a shipped component: use `AlertModal`, don't hand-roll one.)
 
 **Modal form** — `Modal` + `useAppForm`. The submit button lives in the footer and targets the form by `id`:
 
@@ -238,29 +255,23 @@ const form = useAppForm({
 </Modal>;
 ```
 
-**Confirm dialog** — `Modal size="small"` + `Modal.Icon` + a danger action with `isLoading` while the async confirm runs:
+**Confirm dialog** — use `AlertModal`, **not** a hand-rolled `Modal`. It owns the confirm/cancel buttons and is async-aware: return a promise from `onConfirm` and it stays open, disables the action, locks Escape, and shows a spinner until it resolves, then closes. `variant` sets the status colour + icon (`info` / `warning` / `danger` / `success`); the children are the description.
 
 ```tsx
-<Modal open={open} onOpenChange={setOpen}>
-  <Modal.Content size="small">
-    <Modal.Icon color="red" icon={<AlertTriangle />} />
-    <Modal.Header title="Delete bucket?" description="This action cannot be undone." />
-    <Modal.Footer>
-      <ButtonGroup variant="block">
-        <Modal.Close asChild>
-          <Button type="button" variant="secondary" disabled={isDeleting}>
-            Cancel
-          </Button>
-        </Modal.Close>
-        <Button type="button" variant="danger" isLoading={isDeleting} onClick={handleConfirm}>
-          Delete bucket
-        </Button>
-      </ButtonGroup>
-    </Modal.Footer>
-  </Modal.Content>
-</Modal>
+<AlertModal onConfirm={() => deleteBucket(bucketId)}>
+  <AlertModal.Trigger asChild>
+    <Button variant="danger">
+      <Trash2 className="tw-size-4" /> Delete bucket
+    </Button>
+  </AlertModal.Trigger>
+  <AlertModal.Content variant="danger" title="Delete bucket?" confirmLabel="Delete bucket">
+    This action cannot be undone.
+  </AlertModal.Content>
+</AlertModal>
 ```
 
+Controlled (opened from elsewhere, no `Trigger`): pass `open` + `onOpenChange` to `AlertModal` (it honors `defaultOpen` too).
+
 **Card with empty state** — branch on the collection length inside `Card.Content`:
 
 ```tsx
@@ -326,7 +337,7 @@ const form = useAppForm({
 </Card>
 ```
 
-**Alert with action** — pass the action node to `Alert`'s `actions` prop; the variant stays categorical (see brand-neutrality contract):
+**Alert with action** — pass the action node to `Alert`'s `actions` prop; the variant reads the themeable status tokens (see brand-neutrality contract):
 
 ```tsx
 <Alert
@@ -434,13 +445,15 @@ import { ChevronDown, Keboola, Loader2 } from '@keboola/design/icons';
 
 ## Brand-neutrality contract (Layer 0)
 
-Layer-0 components split into two categories. The contract applies to chrome only.
+Layer-0 colour usage splits into three buckets.
 
 **Chrome — follows the brand.** Surface, structure, navigation: Card body, Modal frame, Input border, Button outline, focus rings, Sidebar, generic text. Re-skins when a customer brand is applied. **Rule:** use semantic tokens (`tw-bg-background`, `tw-text-foreground`, `tw-border-border`, `tw-bg-muted`, `tw-text-muted-foreground`, `tw-bg-accent`, `tw-bg-destructive`, …). Customers override these via `@keboola/brand-registry`.
 
-**Categorical — stays fixed across brands.** Badge `color`, Alert `variant`, ModalIcon status, decorative tag palette. Colors encode meaning; the prop API (`color="green"`, `variant="error"`) is a semantic contract with the consumer. **Rule:** keep using primitive scales (`primary-500`, `error-500`, etc.). A customer's "error" alert stays red regardless of brand — that is correct.
+**Status — themeable under argo, with AA-legible defaults.** The four semantic states — `success`, `warning`, `info`, and `destructive` (used for "error") — are brand-overridable tokens, not fixed scales. Alert `variant`, `HelpBlock` / field-error state, `ErrorState`, and `Stepper` status read them, so a brand recolours every status surface at once. **Rule:** consume the token as **tint + text/icon** — `tw-bg-<role>/10` for the surface, `tw-text-<role>` / `tw-border-<role>/25` for the mark. The default token values ship dark enough to be AA (≥4.5:1) as text/icon on their own tint, in light **and** dark mode — a brand overriding them should preserve that. Avoid solid fills with a white foreground (`tw-bg-<role>` + white): the token flips light in dark mode, so white-on-token fails there. A brand _can_ recolour "error" away from red — that is now allowed; the accessible-on-tint contract is what must hold, not the hue. **Legacy exception:** the themeable treatment is gated to argo (`data-[argo=true]:` / `group-data-[argo=true]/…:`). Under legacy chrome (`useArgoDesign()` → `false`) Alert and `ErrorState` keep their original fixed status scales (`blue-*`/`green-*`/`warning-*`/`error-*`), and the legacy brand retains its original status token hues — so legacy status colour is unchanged.
 
-**Heuristic.** If a component exposes a `variant` / `color` / `status` prop encoding meaning, it is categorical. Otherwise it is chrome.
+**Decorative — stays fixed across brands.** The non-semantic palette that encodes category rather than state: `Badge` decorative colours (`purple`, `cyan`, `teal`, `blue`, …), chart colours, decorative tag palette. **Rule:** keep using primitive scales (`purple-500`, `cyan-500`, …). These are an identity/category contract with the consumer and do not re-skin.
+
+**Heuristic.** A `variant` / `status` prop encoding one of the four states → **status token**. A `color` prop picking an arbitrary hue for categorisation → **decorative, fixed scale**. Everything else → **chrome, semantic token**.
 
 Layer-1 blocks (`src/blocks/`) are allowed to be Keboola-opinionated — the contract only applies to Layer-0 primitives.
 
@@ -487,6 +500,18 @@ export default defineConfig({
 
 You do **not** need `test.css: true` or `server.deps.inline: [/@keboola\/design/, /react-day-picker/]`. The design system's structural CSS ships in the stylesheet (`@keboola/design/styles`), not as JS-side `.css` side-effect imports, so the barrel carries no raw `.css` import for Node to choke on. Wrap components in the brand context with `renderWithTheme` from `@keboola/design/testing`.
 
+## Verify the rendered result
+
+Picking the right component and passing type-check proves the code is well-formed — not that the page renders, is accessible, or re-skins under a customer brand. After you build a page with these components, run the platform verify loop and iterate to green **before** a PR — don't hand-roll a bespoke axe/screenshot harness:
+
+```bash
+pnpm add -D @keboola/ui-gen-bench @keboola/validate-ui
+pnpm exec playwright install chromium   # once
+pnpm exec ui-gen-bench eval --serve dist --route /tokens --brief "Tokens list with empty state"
+```
+
+`ui-gen-bench eval` boots the route in a headless browser, scores it 0–100 across runtime-health / a11y / visual-brand / brief-conformance, and exits 0 when green. For raw per-axis findings instead of one score, run `validate-ui` directly. See [`@keboola/ui-gen-bench`](https://www.npmjs.com/package/@keboola/ui-gen-bench) and [`@keboola/validate-ui`](https://www.npmjs.com/package/@keboola/validate-ui).
+
 ## Common Tailwind patterns
 
 ```

package/COMPONENT-API.md

@@ -364,13 +364,28 @@ _No own props — see note above for passthrough attributes._
 
 Source: `src/components/ThemeProvider/ThemeProvider.tsx`
 
-> Wrap the app root. `brand` defaults to the canonical `keboola` brand. Pair with `useTheme()` to read/flip the brand at runtime. Mounts a `TooltipProvider` around its subtree, so a `Tooltip` works without a separately-mounted provider.
+> Wrap the app root once. Resolves the active brand from `brands` by `brandId` (or `defaultBrandId` when uncontrolled); with neither set it falls back to the design-system defaults (no brand tokens injected). `scheme` sets light/dark/system (default `light`). Pair with `useTheme()` to read/flip the brand or scheme at runtime. Mounts a `TooltipProvider` around its subtree, so a `Tooltip` works without a separately-mounted provider.
 
-| Prop          | Type                                                                                                                                                                                                                                                                                                       | Required | Default | Description                                                                                                                                                                                                                                                                     |
-| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `brand`       | `{ id: string; name: string; colors: { foreground: string; background: string; muted: string; mutedForeground: string; border: string; primary: string; primaryForeground: string; destructive: string; destructiveForeground: string; accent?: string; accentForeground?: string; }; ... 6 more ...; ...` | no       | —       | Brand whose tokens drive the chrome (`@keboola/design`'s semantic CSS variables) inside this provider's subtree. Defaults to the canonical `keboola` brand so existing apps that mount `<ThemeProvider>` without a `brand` prop continue to render as today.                    |
-| `colorScheme` | `ColorScheme`                                                                                                                                                                                                                                                                                              | no       | `light` | Light/dark mode. `'system'` follows `prefers-color-scheme` and updates reactively. Defaults to `'light'` so existing mounts don't drift. Only the ROOT provider applies this (sets `data-theme`, owns the media listener); a nested provider inherits the root's resolved mode. |
-| `setBrand`    | `((brand: { id: string; name: string; colors: { foreground: string; background: string; muted: string; mutedForeground: string; border: string; primary: string; primaryForeground: string; destructive: string; destructiveForeground: string; accent?: string; accentForeground?: string; }; ... 6 m...` | no       | —       | Optional setter exposed through `useTheme()` so consumers can flip brands at runtime (Storybook toolbar, a customer-impersonation switch).                                                                                                                                      |
+| Prop              | Type                                                                                                                                                                                                                                                                                                            | Required | Default | Description                                                                                                                                                                                                      |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `brandId`         | `string`                                                                                                                                                                                                                                                                                                        | no       | —       | Controlled active brand id. When set, the parent owns the value and `setBrand` only notifies via `onBrandIdChange` (it does not mutate internal state).                                                          |
+| `brands`          | `readonly { id: string; name: string; theme: { colors?: { foreground?: string; background?: string; muted?: string \| undefined; mutedForeground?: string \| undefined; border?: string \| undefined; ... 22 more ...; sidebar?: { ...; } \| undefined; } \| undefined; ... 6 more ...; gradient?: { ...; }...` | no       | `[]`    | Brands this provider knows about; the active brand id resolves against these.                                                                                                                                    |
+| `defaultBrandId`  | `string`                                                                                                                                                                                                                                                                                                        | no       | —       | Initial active brand id for uncontrolled use. Defaults to the design-system sentinel (`DEFAULT_BRAND_ID`) — no brand tokens injected, so the stylesheet defaults apply.                                          |
+| `defaultScheme`   | `ColorScheme`                                                                                                                                                                                                                                                                                                   | no       | —       | Initial colour scheme for uncontrolled use. Defaults to `light` (`DEFAULT_COLOR_SCHEME`).                                                                                                                        |
+| `onBrandIdChange` | `((brandId: string) => void)`                                                                                                                                                                                                                                                                                   | no       | —       | Called with the next id whenever `setBrand` runs — required to persist the choice in controlled mode.                                                                                                            |
+| `onSchemeChange`  | `((theme: ColorScheme) => void)`                                                                                                                                                                                                                                                                                | no       | —       | Called with the next scheme whenever `setScheme` runs — required to persist the choice in controlled mode.                                                                                                       |
+| `scheme`          | `ColorScheme`                                                                                                                                                                                                                                                                                                   | no       | —       | Controlled colour scheme (`light` / `dark` / `system`). When set, the parent owns the value and `setScheme` only notifies via `onSchemeChange`. `system` follows `prefers-color-scheme` and resolves reactively. |
+
+### `BrandLogo`
+
+Source: `src/components/BrandLogo/BrandLogo.tsx`
+
+> Renders the active brand's logo from the nearest `<ThemeProvider>`. `variant` is `wordmark` (default) | `mark`; each falls back to the other and light↔dark. Inline SVG (a `currentColor` mark inherits text colour) or `<img>` per source. Size via `className` height. `Sidebar.Header` / `Navbar.Header` render it by default when given no children.
+
+| Prop        | Type                   | Required | Default    | Description                                                                            |
+| ----------- | ---------------------- | -------- | ---------- | -------------------------------------------------------------------------------------- |
+| `className` | `string`               | no       | —          | Sets the logo height; aspect ratio is preserved (e.g. `tw-h-7`).                       |
+| `variant`   | `"mark" \| "wordmark"` | no       | `wordmark` | `wordmark` (default, full logo) or `mark` (square icon); each falls back to the other. |
 
 ## Layout & shell
 
@@ -499,6 +514,20 @@ Source: `src/components/Progress/Progress.tsx`
 | `size`    | `"sm" \| "lg" \| null`           | no       | —       |             |
 | `variant` | `"success" \| "default" \| null` | no       | —       |             |
 
+### `SpotlightBackdrop`
+
+Source: `src/components/SpotlightBackdrop/SpotlightBackdrop.tsx`
+
+> Dimmed full-viewport layer with an SVG-mask cut-out around a target rect (spotlight). Presentational — pass a `rect` from the `useTargetRect(target, enabled)` hook and compose with `Popover` for an anchored callout. Tour / coachmark orchestration (steps, next/prev, "seen") is app-owned; see the "Guided tour (recipe)" story.
+
+| Prop        | Type                                | Required | Default | Description                                                                      |
+| ----------- | ----------------------------------- | -------- | ------- | -------------------------------------------------------------------------------- |
+| `rect`      | `TargetRect \| null`                | yes      | —       | Target box to cut out of the dim layer, or `null` for a full dim (no highlight). |
+| `className` | `string`                            | no       | —       |                                                                                  |
+| `onClick`   | `MouseEventHandler<HTMLDivElement>` | no       | —       | Fired when the dim layer is clicked (e.g. to dismiss). Receives the click event. |
+| `padding`   | `number`                            | no       | `8`     | Padding around the target inside the cut-out, in px.                             |
+| `radius`    | `number`                            | no       | `8`     | Corner radius of the cut-out, in px.                                             |
+
 ## Data display — layout
 
 ### `Table`

package/README.md

@@ -114,7 +114,7 @@ Rules of the road:
 
 Worked examples: `src/components/Button/Button.stories.tsx` (click + disabled), `src/components/Combobox/Combobox.stories.tsx` (open → filter → select), `src/components/Modal/Modal.stories.tsx` (open → focus → close).
 
-**Coverage so far:** the interactive surface is covered — Button, ButtonInline, Combobox, MultiCombobox, CreatableMultiCombobox, Select, Modal, Sheet, Popover, Popconfirm, DropdownMenu, SplitButton, Tooltip, HoverCard, InfoTooltip, Switch, Checkbox, RadioGroup, Slider, Tabs, PageHeaderTabs, Collapsible, PanelWithDetails, Toast, TextInput, NumberInput, SearchInput, SearchInputWithNavigation, PasswordInput, Textarea, AutoSaveTextarea, AlertWithAction, ListDetail, FilterToolbar, ConfirmDialog. Add a `play()` to new interactive stories by default.
+**Coverage so far:** the interactive surface is covered — Button, ButtonInline, Combobox, MultiCombobox, CreatableMultiCombobox, Select, Modal, Sheet, Popover, Popconfirm, DropdownMenu, SplitButton, Tooltip, HoverCard, InfoTooltip, Switch, Checkbox, RadioGroup, Slider, Tabs, PageHeaderTabs, Collapsible, PanelWithDetails, Toast, TextInput, NumberInput, SearchInput, SearchInputWithNavigation, PasswordInput, Textarea, AutoSaveTextarea, AlertWithAction, ListDetail, FilterToolbar. Add a `play()` to new interactive stories by default.
 
 **Known gaps (not yet driven headlessly):** `Command` (cmdk input value isn't reflected on the DOM node under the test runner), `CollapsiblePanel` (collapses via CSS height, so `toBeVisible()` can't see the state change), `Calendar`/`DateInput`/`TimeInput` (day/segment targeting is brittle), `ColorInput`, `Clipboard`/`ClipboardButton` (clipboard API), and `MultiActionButton`/`Tagger` (stories use `alert()` / `onClick` side effects that block a headless run). `ModalForm` currently throws `formContext only works within a formComponent` when its modal opens (`FormBody` is outside `form.AppForm`) — a story-wiring fix, tracked separately. `Search` is deprecated and intentionally untested.
 

package/dist/charts.cjs

@@ -0,0 +1,268 @@
+'use strict';
+
+var recharts = require('recharts');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/blocks/Charts/ChartContainer.tsx
+var twMerge = tailwindMerge.extendTailwindMerge({
+  prefix: "tw-"
+});
+var cn = (...classes) => twMerge(clsx.clsx(...classes));
+var ChartContainer = ({
+  height = 300,
+  width = "100%",
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn(
+      "tw-text-xs",
+      // Axis ticks and labels follow the muted foreground token.
+      "[&_.recharts-cartesian-axis-tick_text]:tw-fill-muted-foreground",
+      "[&_.recharts-polar-angle-axis-tick_text]:tw-fill-muted-foreground",
+      "[&_.recharts-label]:tw-fill-muted-foreground",
+      "[&_.recharts-legend-item-text]:!tw-text-muted-foreground",
+      // Grid lines, axis lines and the hover cursor follow the border token.
+      "[&_.recharts-cartesian-grid_line]:tw-stroke-border/60",
+      "[&_.recharts-cartesian-axis-line]:tw-stroke-border",
+      "[&_.recharts-cartesian-axis-tick-line]:tw-stroke-border",
+      "[&_.recharts-curve.recharts-tooltip-cursor]:tw-stroke-border",
+      "[&_.recharts-rectangle.recharts-tooltip-cursor]:tw-fill-muted/60",
+      "[&_.recharts-surface]:tw-outline-none",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width, height, children })
+  }
+);
+var ChartTooltipContent = ({
+  active,
+  label,
+  payload,
+  valueFormatter,
+  className
+}) => {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "tw-min-w-32 tw-rounded-md tw-border tw-border-border tw-bg-popover tw-px-2.5 tw-py-1.5 tw-text-xs tw-text-popover-foreground tw-shadow-md",
+        className
+      ),
+      children: [
+        label != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-mb-1 tw-font-medium", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-1", children: payload.map((entry) => {
+          const name = String(entry.name ?? entry.dataKey ?? "");
+          const value = entry.value;
+          const hasNumber = value != null && value !== "" && Number.isFinite(Number(value));
+          const display = hasNumber ? valueFormatter ? valueFormatter(Number(value), name) : String(Number(value)) : value ?? "";
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "tw-flex tw-items-center tw-justify-between tw-gap-3",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "tw-size-2 tw-shrink-0 tw-rounded-[2px]",
+                      style: { backgroundColor: entry.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-text-muted-foreground", children: name })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-font-medium tw-tabular-nums", children: display })
+              ]
+            },
+            String(entry.dataKey ?? name)
+          );
+        }) })
+      ]
+    }
+  );
+};
+var ChartTooltip = ({ valueFormatter, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  recharts.Tooltip,
+  {
+    cursor: { strokeWidth: 1 },
+    content: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltipContent, { valueFormatter }),
+    ...props
+  }
+);
+
+// src/blocks/Charts/format.ts
+var formatValue = (value, valueFormatter) => {
+  if (value == null || value === "") return "";
+  const num = Number(value);
+  if (!Number.isFinite(num)) return "";
+  return valueFormatter ? valueFormatter(num) : String(num);
+};
+var AXIS_PROPS = {
+  tickLine: false,
+  axisLine: false,
+  tick: { fontSize: 11 }
+};
+var cartesianChrome = ({
+  xKey,
+  showGrid = true,
+  showYAxis = true,
+  showLegend = false,
+  showTooltip = true,
+  valueFormatter
+}) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  showGrid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+  /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS_PROPS }),
+  showYAxis && /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.YAxis,
+    {
+      width: 48,
+      ...AXIS_PROPS,
+      tickFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
+    }
+  ),
+  showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+    ChartTooltip,
+    {
+      valueFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
+    }
+  ),
+  showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { wrapperStyle: { fontSize: 11 } })
+] });
+
+// src/blocks/Charts/theme.ts
+var CHART_TOKEN_COUNT = 5;
+var chartTokenColor = (index) => {
+  const slot = (index % CHART_TOKEN_COUNT + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT + 1;
+  return `rgb(var(--color-chart-${slot}))`;
+};
+var resolveSeriesColor = (index, token) => chartTokenColor(token ? token - 1 : index);
+var LineChart = ({
+  data,
+  xKey,
+  series,
+  height,
+  width,
+  className,
+  ...chrome
+}) => /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
+  cartesianChrome({ xKey, ...chrome }),
+  series.map((s, index) => {
+    const color = resolveSeriesColor(index, s.color);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Line,
+      {
+        type: "monotone",
+        dataKey: s.dataKey,
+        name: s.name ?? s.dataKey,
+        stroke: color,
+        strokeWidth: 2,
+        dot: { r: 3, fill: color, stroke: color },
+        activeDot: { r: 4 },
+        isAnimationActive: false
+      },
+      s.dataKey
+    );
+  })
+] }) });
+var BarChart = ({
+  data,
+  xKey,
+  series,
+  height,
+  width,
+  className,
+  stacked = false,
+  ...chrome
+}) => /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
+  cartesianChrome({ xKey, ...chrome }),
+  series.map((s, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.Bar,
+    {
+      dataKey: s.dataKey,
+      name: s.name ?? s.dataKey,
+      fill: resolveSeriesColor(index, s.color),
+      radius: stacked ? 0 : [4, 4, 0, 0],
+      stackId: stacked ? "stack" : void 0,
+      isAnimationActive: false
+    },
+    s.dataKey
+  ))
+] }) });
+var AreaChart = ({
+  data,
+  xKey,
+  series,
+  height,
+  width,
+  className,
+  stacked = false,
+  ...chrome
+}) => /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
+  cartesianChrome({ xKey, ...chrome }),
+  series.map((s, index) => {
+    const color = resolveSeriesColor(index, s.color);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Area,
+      {
+        type: "monotone",
+        dataKey: s.dataKey,
+        name: s.name ?? s.dataKey,
+        stroke: color,
+        fill: color,
+        fillOpacity: 0.15,
+        strokeWidth: 2,
+        stackId: stacked ? "stack" : void 0,
+        isAnimationActive: false
+      },
+      s.dataKey
+    );
+  })
+] }) });
+var PieChart = ({
+  data,
+  nameKey,
+  dataKey,
+  innerRadius = 0,
+  height,
+  width,
+  className,
+  showLegend = true,
+  showTooltip = true,
+  valueFormatter
+}) => /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
+  showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+    ChartTooltip,
+    {
+      valueFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
+    }
+  ),
+  showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { wrapperStyle: { fontSize: 11 } }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.Pie,
+    {
+      data,
+      nameKey,
+      dataKey,
+      innerRadius,
+      stroke: "rgb(var(--color-background))",
+      isAnimationActive: false,
+      children: data.map((datum, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: chartTokenColor(index) }, String(datum[nameKey] ?? index)))
+    }
+  )
+] }) });
+
+exports.AreaChart = AreaChart;
+exports.BarChart = BarChart;
+exports.ChartContainer = ChartContainer;
+exports.ChartTooltip = ChartTooltip;
+exports.ChartTooltipContent = ChartTooltipContent;
+exports.LineChart = LineChart;
+exports.PieChart = PieChart;
+exports.chartTokenColor = chartTokenColor;
+//# sourceMappingURL=charts.cjs.map
+//# sourceMappingURL=charts.cjs.map

package/dist/charts.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/classNames.ts","../src/blocks/Charts/ChartContainer.tsx","../src/blocks/Charts/ChartTooltip.tsx","../src/blocks/Charts/format.ts","../src/blocks/Charts/cartesian.tsx","../src/blocks/Charts/theme.ts","../src/blocks/Charts/LineChart.tsx","../src/blocks/Charts/BarChart.tsx","../src/blocks/Charts/AreaChart.tsx","../src/blocks/Charts/PieChart.tsx"],"names":["extendTailwindMerge","clsx","jsx","ResponsiveContainer","jsxs","RechartsTooltip","Fragment","CartesianGrid","XAxis","YAxis","Legend","RechartsLineChart","Line","RechartsBarChart","Bar","RechartsAreaChart","Area","RechartsPieChart","Pie","Cell"],"mappings":"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","file":"charts.cjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  prefix: 'tw-',\n});\n\nexport const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));\n","import { type ComponentProps, type ReactElement } from 'react';\nimport { ResponsiveContainer } from 'recharts';\n\nimport { cn } from '../../utils';\n\n/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `\"NN%\"`. */\nexport type ChartDimension = number | `${number}%`;\n\nexport type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {\n  /**\n   * Height as a px number or percentage string. Charts have no intrinsic\n   * height, so a container needs one either here or from a sized ancestor.\n   * Defaults to 300.\n   */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"` (fills parent). */\n  width?: ChartDimension;\n  /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */\n  children: ReactElement;\n};\n\n/**\n * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'\n * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,\n * grid, cursor) through CSS so every chart inside inherits it. Sizing is\n * intrinsic: give it a `height` (default 300) and it fills the parent width.\n */\nexport const ChartContainer = ({\n  height = 300,\n  width = '100%',\n  className,\n  children,\n  ...props\n}: ChartContainerProps) => (\n  <div\n    className={cn(\n      'tw-text-xs',\n      // Axis ticks and labels follow the muted foreground token.\n      '[&_.recharts-cartesian-axis-tick_text]:tw-fill-muted-foreground',\n      '[&_.recharts-polar-angle-axis-tick_text]:tw-fill-muted-foreground',\n      '[&_.recharts-label]:tw-fill-muted-foreground',\n      '[&_.recharts-legend-item-text]:!tw-text-muted-foreground',\n      // Grid lines, axis lines and the hover cursor follow the border token.\n      '[&_.recharts-cartesian-grid_line]:tw-stroke-border/60',\n      '[&_.recharts-cartesian-axis-line]:tw-stroke-border',\n      '[&_.recharts-cartesian-axis-tick-line]:tw-stroke-border',\n      '[&_.recharts-curve.recharts-tooltip-cursor]:tw-stroke-border',\n      '[&_.recharts-rectangle.recharts-tooltip-cursor]:tw-fill-muted/60',\n      '[&_.recharts-surface]:tw-outline-none',\n      className,\n    )}\n    {...props}\n  >\n    <ResponsiveContainer width={width} height={height}>\n      {children}\n    </ResponsiveContainer>\n  </div>\n);\n","import { type ComponentProps } from 'react';\nimport { Tooltip as RechartsTooltip } from 'recharts';\n\nimport { cn } from '../../utils';\n\ntype TooltipPayloadEntry = {\n  name?: string | number;\n  value?: string | number;\n  color?: string;\n  dataKey?: string | number;\n};\n\ntype ChartTooltipContentProps = {\n  active?: boolean;\n  label?: string | number;\n  payload?: TooltipPayloadEntry[];\n  /** Format a value for display (e.g. currency, percentage). */\n  valueFormatter?: (value: string | number, name: string) => string;\n  className?: string;\n};\n\n/**\n * Brand-themed tooltip body. Surfaces (background, border, text) resolve from\n * semantic tokens, and each series swatch reuses the recharts-provided series\n * `color` (already a `--color-chart-*` token from this package's charts).\n */\nexport const ChartTooltipContent = ({\n  active,\n  label,\n  payload,\n  valueFormatter,\n  className,\n}: ChartTooltipContentProps) => {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div\n      className={cn(\n        'tw-min-w-32 tw-rounded-md tw-border tw-border-border tw-bg-popover tw-px-2.5 tw-py-1.5 tw-text-xs tw-text-popover-foreground tw-shadow-md',\n        className,\n      )}\n    >\n      {label != null && <div className=\"tw-mb-1 tw-font-medium\">{label}</div>}\n      <div className=\"tw-flex tw-flex-col tw-gap-1\">\n        {payload.map((entry) => {\n          const name = String(entry.name ?? entry.dataKey ?? '');\n          const value = entry.value;\n          // Missing / non-numeric values render blank rather than \"NaN\"/\"0\";\n          // only well-formed numbers reach the formatter.\n          const hasNumber = value != null && value !== '' && Number.isFinite(Number(value));\n          const display = hasNumber\n            ? valueFormatter\n              ? valueFormatter(Number(value), name)\n              : String(Number(value))\n            : (value ?? '');\n          return (\n            <div\n              key={String(entry.dataKey ?? name)}\n              className=\"tw-flex tw-items-center tw-justify-between tw-gap-3\"\n            >\n              <span className=\"tw-flex tw-items-center tw-gap-1.5\">\n                <span\n                  className=\"tw-size-2 tw-shrink-0 tw-rounded-[2px]\"\n                  style={{ backgroundColor: entry.color }}\n                />\n                <span className=\"tw-text-muted-foreground\">{name}</span>\n              </span>\n              <span className=\"tw-font-medium tw-tabular-nums\">{display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport type ChartTooltipProps = ComponentProps<typeof RechartsTooltip> & {\n  valueFormatter?: (value: string | number, name: string) => string;\n};\n\n/**\n * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.\n * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.\n */\nexport const ChartTooltip = ({ valueFormatter, ...props }: ChartTooltipProps) => (\n  <RechartsTooltip\n    cursor={{ strokeWidth: 1 }}\n    content={<ChartTooltipContent valueFormatter={valueFormatter} />}\n    {...props}\n  />\n);\n","/**\n * Apply a numeric `valueFormatter` safely. recharts hands axis ticks and\n * tooltip payload values as `string | number | null | undefined`, and partial\n * or streaming data can carry gaps. Coercing those straight through\n * `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),\n * so a missing / non-finite value is rendered as an empty string instead of\n * being fed to the formatter.\n */\nexport const formatValue = (\n  value: string | number | null | undefined,\n  valueFormatter?: (value: number) => string,\n): string => {\n  if (value == null || value === '') return '';\n  const num = Number(value);\n  if (!Number.isFinite(num)) return '';\n  return valueFormatter ? valueFormatter(num) : String(num);\n};\n","import { CartesianGrid, Legend, XAxis, YAxis } from 'recharts';\n\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { type CartesianChartProps } from './types';\n\nconst AXIS_PROPS = {\n  tickLine: false,\n  axisLine: false,\n  tick: { fontSize: 11 },\n} as const;\n\n/**\n * The grid + axes + tooltip + legend shared by the line, bar, and area charts.\n * Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so\n * these stay brand-safe.\n */\nexport const cartesianChrome = ({\n  xKey,\n  showGrid = true,\n  showYAxis = true,\n  showLegend = false,\n  showTooltip = true,\n  valueFormatter,\n}: Pick<\n  CartesianChartProps,\n  'xKey' | 'showGrid' | 'showYAxis' | 'showLegend' | 'showTooltip' | 'valueFormatter'\n>) => (\n  <>\n    {showGrid && <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />}\n    <XAxis dataKey={xKey} {...AXIS_PROPS} />\n    {showYAxis && (\n      <YAxis\n        width={48}\n        {...AXIS_PROPS}\n        tickFormatter={\n          valueFormatter\n            ? (value: string | number) => formatValue(value, valueFormatter)\n            : undefined\n        }\n      />\n    )}\n    {showTooltip && (\n      <ChartTooltip\n        valueFormatter={valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined}\n      />\n    )}\n    {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n  </>\n);\n","/**\n * The design system ships a five-slot categorical chart palette as CSS\n * variables (`--color-chart-1` … `--color-chart-5`). Charts resolve their\n * series colors from these tokens only — never from inline hex or a primitive\n * scale — so they follow both the active color scheme (light/dark, via\n * `data-theme` in `styles.css`) and the active brand: a brand reskins charts\n * by defining `colors.chart` (and `colorsDark.chart`) in its\n * `@keboola/brand-registry` definition, which `ThemeProvider` emits as the\n * `--color-chart-*` variables.\n *\n * The CSS variables hold raw `R G B` channels (for Tailwind's `<alpha-value>`\n * opacity modifiers), so they are wrapped in `rgb(...)` before handing them to\n * recharts as ordinary SVG `stroke` / `fill` strings.\n */\nconst CHART_TOKEN_COUNT = 5;\n\n/** Number of the semantic chart token (`1`–`5`) a series maps to. */\nexport type ChartColorToken = 1 | 2 | 3 | 4 | 5;\n\n/**\n * The CSS color for a chart token. `index` is 0-based (series position); it\n * wraps around the five-slot palette so any number of series stays on-brand.\n */\nexport const chartTokenColor = (index: number): string => {\n  // Euclidean modulo so negative indices still land in 1..CHART_TOKEN_COUNT\n  // (plain `%` would yield e.g. `--color-chart-0` for index -1).\n  const slot = (((index % CHART_TOKEN_COUNT) + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT) + 1;\n  return `rgb(var(--color-chart-${slot}))`;\n};\n\n/** Resolve an explicit token (1–5) or fall back to the series position. */\nexport const resolveSeriesColor = (index: number, token?: ChartColorToken): string =>\n  chartTokenColor(token ? token - 1 : index);\n","import { Line, LineChart as RechartsLineChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\n/**\n * A themed multi-series line chart. Each series' color comes from the semantic\n * `--color-chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Wrap-free — mounts its own {@link ChartContainer}.\n *\n * @example\n * <LineChart\n *   data={data}\n *   xKey=\"month\"\n *   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}\n * />\n */\nexport const LineChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  ...chrome\n}: CartesianChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsLineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Line\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            strokeWidth={2}\n            dot={{ r: 3, fill: color, stroke: color }}\n            activeDot={{ r: 4 }}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsLineChart>\n  </ChartContainer>\n);\n","import { Bar, BarChart as RechartsBarChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type BarChartProps = CartesianChartProps & {\n  /** Stack the series into a single bar per category. Defaults to grouped. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series bar chart. Series colors come from the semantic\n * `--color-chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Pass `stacked` to stack the series instead of grouping them.\n *\n * @example\n * <BarChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const BarChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: BarChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => (\n        <Bar\n          key={s.dataKey}\n          dataKey={s.dataKey}\n          name={s.name ?? s.dataKey}\n          fill={resolveSeriesColor(index, s.color)}\n          radius={stacked ? 0 : [4, 4, 0, 0]}\n          stackId={stacked ? 'stack' : undefined}\n          isAnimationActive={false}\n        />\n      ))}\n    </RechartsBarChart>\n  </ChartContainer>\n);\n","import { Area, AreaChart as RechartsAreaChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type AreaChartProps = CartesianChartProps & {\n  /** Stack the series into a cumulative area. Defaults to overlaid. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series area chart. Each series is stroked and softly filled\n * from the semantic `--color-chart-*` palette (by order, or pinned via\n * `series[].color`), which follows the active color scheme and the active\n * brand's `colors.chart` when it defines one. Pass `stacked` to stack the\n * series cumulatively.\n *\n * @example\n * <AreaChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const AreaChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: AreaChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsAreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Area\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            fill={color}\n            fillOpacity={0.15}\n            strokeWidth={2}\n            stackId={stacked ? 'stack' : undefined}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsAreaChart>\n  </ChartContainer>\n);\n","import { Cell, Legend, Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { ChartContainer, type ChartDimension } from './ChartContainer';\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { chartTokenColor } from './theme';\nimport { type ChartDatum } from './types';\n\nexport type PieChartProps = {\n  /** The rows to plot — one sector per row. */\n  data: ChartDatum[];\n  /** Key into each datum for the sector label. */\n  nameKey: string;\n  /** Key into each datum for the sector value. */\n  dataKey: string;\n  /** Render as a donut with a hole of this inner radius (px or %). */\n  innerRadius?: ChartDimension;\n  /** Height as a px number or percentage. Defaults to 300. */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** Show a legend below the chart. Defaults to `true`. */\n  showLegend?: boolean;\n  /** Show the hover tooltip. Defaults to `true`. */\n  showTooltip?: boolean;\n  /** Format a sector value for the tooltip. */\n  valueFormatter?: (value: number) => string;\n  className?: string;\n};\n\n/**\n * A themed pie / donut chart. Each sector cycles through the semantic\n * `--color-chart-*` palette, which follows the active color scheme and the\n * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make\n * a donut.\n *\n * @example\n * <PieChart data={data} nameKey=\"engine\" dataKey=\"rows\" innerRadius=\"60%\" />\n */\nexport const PieChart = ({\n  data,\n  nameKey,\n  dataKey,\n  innerRadius = 0,\n  height,\n  width,\n  className,\n  showLegend = true,\n  showTooltip = true,\n  valueFormatter,\n}: PieChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsPieChart>\n      {showTooltip && (\n        <ChartTooltip\n          valueFormatter={\n            valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined\n          }\n        />\n      )}\n      {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n      <Pie\n        data={data}\n        nameKey={nameKey}\n        dataKey={dataKey}\n        innerRadius={innerRadius}\n        // Separate sectors with the brand surface color rather than recharts'\n        // hardcoded white default.\n        stroke=\"rgb(var(--color-background))\"\n        isAnimationActive={false}\n      >\n        {data.map((datum, index) => (\n          <Cell key={String(datum[nameKey] ?? index)} fill={chartTokenColor(index)} />\n        ))}\n      </Pie>\n    </RechartsPieChart>\n  </ChartContainer>\n);\n"]}