@dreamtree-org/twreact-ui 2.0.4 → 2.0.5

package/README.md

@@ -132,7 +132,7 @@ nothing changes in your bundle — the root `@dreamtree-org/twreact-ui` import n
 
 | Entry point | Exports | Install first |
 |---|---|---|
-| `@dreamtree-org/twreact-ui/charts` | `LineChart`, `BarChart`, `AreaChart`, `DonutChart`, `Sparkline` | `npm install recharts` (recharts 2.15+ or 3.x; React 18 apps also `npm install react-is@18`) |
+| `@dreamtree-org/twreact-ui/charts` | `LineChart`, `BarChart`, `AreaChart`, `DonutChart`, `Sparkline`, `ScatterChart` | `npm install recharts` (recharts 2.15+ or 3.x; React 18 apps also `npm install react-is@18`) |
 | `@dreamtree-org/twreact-ui/rich-text` | `RichTextEditor` | `npm install @tiptap/react @tiptap/pm @tiptap/starter-kit` (Tiptap 3) |
 
 ```jsx
@@ -761,6 +761,7 @@ Interaction primitives that products used to compose by hand. All are `forwardRe
 | [`Textarea`](doc/Textarea.md) | Core | Multi-line input mirroring `Input`: `label`, `error`, `helperText`, `required`, `showCount`/`maxLength`, `autoResize`/`maxRows` |
 | [`Slider`](doc/Slider.md) | Core | Single value or `[low, high]` range; `min`/`max`/`step`, arrows/PageUp/PageDown/Home/End, `role="slider"` with full `aria-value*` |
 | [`Sortable`](doc/Sortable.md) | Utility | Drag-to-reorder list (pointer events, no extra dependency) + keyboard reordering (Space, arrows, Space/Escape) with live announcements; `items`, `onReorder`, `renderItem`, `getKey` |
+| [`SortableGroup`](doc/SortableGroup.md) | Utility | Moves items between `Sortable` lists (each with an `id`): pointer drag or cross-axis arrow keys, `onMove({ item, from, to })`, and `canDrop(item, target, from)` which marks and announces a refused list before the drop |
 | [`Tour`](doc/Tour.md) | Feedback | Step-based onboarding: spotlight on each `target` (selector or ref), Back/Next/Skip/Finish, `open`/`onClose`/`onFinish`, scrolls targets into view |
 | [`ActionSheet`](doc/ActionSheet.md) | Feedback | iOS action sheet on `Sheet`: `actions=[{ key?, label, icon?, tone?: 'default' | 'destructive', disabled?, onSelect }]`, optional `title`/`message`, a separate Cancel button, `onClose(reason)` |
 | [`SegmentedControl`](doc/SegmentedControl.md) | Core | Radiogroup view toggle (list/board, day/week): `options`, `value`/`defaultValue` + `onChange`, `size`, `fullWidth`, `name` for forms; arrow keys move the selection. Use `Tabs variant="segmented"` when the choice switches panels |
@@ -770,7 +771,7 @@ Interaction primitives that products used to compose by hand. All are `forwardRe
 | [`BottomActionBar`](doc/BottomActionBar.md) | Block | Sticky bottom bar for a form's primary action: `pb-safe`, rides above the on-screen keyboard (`keyboardAware`), `stackOnMobile`; add `<BottomActionBar.Spacer />` at the end of the page |
 
 ```jsx
-import { Drawer, Sheet, Popover, Textarea, Slider, Sortable, Tour, Button } from '@dreamtree-org/twreact-ui';
+import { Drawer, Sheet, Popover, Textarea, Slider, Sortable, SortableGroup, Tour, Button } from '@dreamtree-org/twreact-ui';
 
 <Drawer isOpen={open} onClose={() => setOpen(false)} title="Edit task" footer={<Button onClick={save}>Save</Button>}>
   <Textarea label="Description" autoResize showCount maxLength={500} />
@@ -787,6 +788,11 @@ import { Drawer, Sheet, Popover, Textarea, Slider, Sortable, Tour, Button } from
 
 <Sortable aria-label="Backlog" items={tasks} onReorder={setTasks} renderItem={(t) => t.title} />
 
+<SortableGroup onMove={({ item, from, to }) => moveTask(item, from, to)} canDrop={(task, target) => canEnter(task, target.listId)}>
+  <Sortable id="backlog" aria-label="Backlog" items={backlog} onReorder={setBacklog} />
+  <Sortable id="sprint" aria-label="Sprint" items={sprint} onReorder={setSprint} />
+</SortableGroup>
+
 <Tour open={tourOpen} steps={[{ title: 'Welcome' }, { target: '[data-tour="new-task"]', title: 'Capture work' }]} onClose={() => setTourOpen(false)} />
 ```
 
@@ -807,12 +813,13 @@ screen readers (`accessibleTable`), shows `emptyState` for empty data, and disab
 | [`AreaChart`](doc/AreaChart.md) | Volume over time, optionally `stacked` |
 | [`DonutChart`](doc/DonutChart.md) | Part-to-whole (`variant="donut"` or `"pie"`, `centerLabel`) |
 | [`Sparkline`](doc/Sparkline.md) | Word-sized trend for stat cards and table cells |
+| [`ScatterChart`](doc/ScatterChart.md) | Two numeric axes, one point per entity: `x` + `y` keys, optional `index` (entity name) and `category` (series), `xAxisLabel` / `yAxisLabel`; single points sit on padded axes |
 
 Shared props: `valueFormatter`, `height`, `showLegend`, `showTooltip`, `showXAxis`, `showYAxis`,
 `showGrid`, `colors`, `animate`.
 
 ```jsx
-import { LineChart, DonutChart, Sparkline } from '@dreamtree-org/twreact-ui/charts';
+import { LineChart, DonutChart, Sparkline, ScatterChart } from '@dreamtree-org/twreact-ui/charts';
 
 <LineChart
   data={[{ month: 'Jan', revenue: 4200 }, { month: 'Feb', revenue: 5100 }]}
@@ -823,6 +830,7 @@ import { LineChart, DonutChart, Sparkline } from '@dreamtree-org/twreact-ui/char
 />
 <DonutChart data={byStatus} index="status" category="tasks" centerLabel="63 tasks" title="Tasks by status" />
 <Sparkline data={weekly} category="signups" color="success" title="Signups, last 4 weeks" />
+<ScatterChart data={projects} x="health" y="variance" index="project" category="department" title="Health vs budget variance" />
 ```
 
 ### Rich text (optional entry point)

package/ai-skills/dreamtree-ui.md

@@ -131,9 +131,9 @@ The library exports four kinds of things from `@dreamtree-org/twreact-ui`:
 | **Core**        | `Input`, `Button`, `Select`, `Table`, `Form`, `Accordion`, `Checkbox`, `ColorPicker`, `DatePicker`, `DateRangePicker`, `Loader`, `LocationPicker`, `PriceRangePicker`, `ProgressBar`, `Radio`, `Rate`, `RoundedTag`, `Skeleton`, `Switch`, `Tabs`, `ThreeDotPopover`, `Tooltip`, `SpeechToText`, `TextToSpeech`, `Textarea`, `Slider`, `Popover`, `SegmentedControl`, `SwipeableListItem` (swipe-to-reveal row actions), `SearchField` |
 | **Navigation**  | `Sidebar`, `Navbar`, `FootNav`, `Breadcrumbs`                                                                                                                                                                              |
 | **Feedback**    | `Dialog`, `Toast` (+ `ToastProvider`, `ToastContainer`, `useToast`), `Alert`, `Drawer` (side sheet; `isOpen`/`onClose` like Dialog), `Sheet` (+ `Sheet.Header/Body/Footer`; phone sheet with snap points), `ActionSheet` (iOS action sheet: `actions` + separate Cancel), `Tour` (onboarding spotlight) |
-| **Utility**     | `Badge`, `Avatar`, `AvatarGroup` (overlapping stack + `max` "+N"), `Card`, `Pagination`, `Stepper`, `FileUpload`, `Condition`, `Carousel`, `Sortable` (drag + keyboard reorder), `PullToRefresh` (touch pull-to-refresh around a scroller) |
+| **Utility**     | `Badge`, `Avatar`, `AvatarGroup` (overlapping stack + `max` "+N"), `Card`, `Pagination`, `Stepper`, `FileUpload`, `Condition`, `Carousel`, `Sortable` (drag + keyboard reorder), `SortableGroup` (move items between `Sortable` lists, `canDrop`), `PullToRefresh` (touch pull-to-refresh around a scroller) |
 | **Blocks**      | `AppShell`, `PageHeader`, `StatCard`, `StatusPill`, `EmptyState`, `ErrorState`, `LoadingState`, `ConfirmDialog`, `BottomActionBar` (+ `BottomActionBar.Spacer`) — page-level patterns; build pages from these before composing layouts by hand |
-| **Charts** (`@dreamtree-org/twreact-ui/charts`, peer `recharts`) | `LineChart`, `BarChart`, `AreaChart`, `DonutChart`, `Sparkline` — NOT exported from the root |
+| **Charts** (`@dreamtree-org/twreact-ui/charts`, peer `recharts`) | `LineChart`, `BarChart`, `AreaChart`, `DonutChart`, `Sparkline`, `ScatterChart` — NOT exported from the root |
 | **Rich text** (`@dreamtree-org/twreact-ui/rich-text`, peers `@tiptap/react @tiptap/pm @tiptap/starter-kit`) | `RichTextEditor` — NOT exported from the root |
 
 ### Hooks
@@ -232,9 +232,10 @@ When suggesting a component or new variant value, use this exact vocabulary.
 - `Textarea` — same API as `Input` plus `autoResize`/`maxRows`; never a raw `<textarea>`.
 - `Slider` — `defaultValue={40}` for one thumb, `[low, high]` for a range; `onChangeEnd` to save after a drag. A value bubble shows while dragging (`showBubble={false}` to hide).
 - `Sortable` — `items` + `onReorder(newItems)` + `renderItem`; keyboard reordering and announcements are built in. Pass `handle` and spread `handleProps` on a grip for touch screens.
+- `SortableGroup` — for boards / backlog → sprint: wrap the lists, give each `Sortable` an `id` (+ `aria-label`, used in announcements) and handle `onMove({ item, from: { listId, index }, to: { listId, index } })`; pass `canDrop(item, target, from)` (e.g. from a server transition list) so refused columns are marked and announced before the drop instead of reverting after it. Within-list reorders still call each list's `onReorder`. Give lists a `min-h-*` so empty ones can be dropped on.
 - `PullToRefresh` — wrap a list: `<PullToRefresh onRefresh={() => refetch()} className="h-96">…</PullToRefresh>` (renders the scroller) or pass `scrollRef` to your own. `onRefresh` returns a promise; the spinner spins until it settles. `threshold` (64), `disabled`, `refreshingLabel`. Touch only — keep a refresh button for mouse/keyboard users.
 - Haptics are opt-in: `haptics` on `Switch` / `Checkbox` (selection tick), `Sheet` (tick on a new snap point) and `ConfirmDialog` (warning on destructive open, success on confirm). Default `false`; never the only signal. For custom cues use `useHaptics().trigger('success')`.
-- Charts (`/charts`) — `<LineChart data={rows} index="month" categories={['revenue', 'costs']} />`; same shape for `BarChart` (`stacked`, `horizontal`) and `AreaChart` (`stacked`); `DonutChart` takes `index` (name key) + `category` (value key) + `centerLabel`; `Sparkline` takes `category` + `color`. Colours are tokens (`colors={['primary', 'success-600']}`), never hex. Always pass `title` (accessible name) and, for key charts, a `description` with the takeaway. `valueFormatter` formats tooltip/axis/table values.
+- Charts (`/charts`) — `<LineChart data={rows} index="month" categories={['revenue', 'costs']} />`; same shape for `BarChart` (`stacked`, `horizontal`) and `AreaChart` (`stacked`); `DonutChart` takes `index` (name key) + `category` (value key) + `centerLabel`; `Sparkline` takes `category` + `color`; `ScatterChart` takes `x` + `y` (numeric keys) plus optional `index` (entity name) and `category` (series), e.g. `<ScatterChart data={projects} x="health" y="variance" index="project" category="department" />`. Colours are tokens (`colors={['primary', 'success-600']}`), never hex. Always pass `title` (accessible name) and, for key charts, a `description` with the takeaway. `valueFormatter` formats tooltip/axis/table values.
 - `RichTextEditor` (`/rich-text`) — `label`/`error`/`helperText` like `Input`; `value` + `onChange(html)` (or `outputFormat="json"`); `toolbar={['bold', 'italic', 'link']}` to trim. Tell the user to **sanitize the HTML server-side**; never render it with `dangerouslySetInnerHTML` unsanitized.
 - `Tour` — onboarding coach marks: `steps=[{ target: '[data-tour="x"]', title, content, placement }]`, `open`, `onClose(reason)`; a missing target falls back to a centred card.
 

package/dist/ai-schema.json

@@ -2444,6 +2444,118 @@
       }
     }
   },
+  "ScatterChart": {
+    "group": "charts",
+    "import": "@dreamtree-org/twreact-ui/charts",
+    "forwardRef": true,
+    "props": {
+      "data": {
+        "type": "ChartDatum[]",
+        "required": true
+      },
+      "title": {
+        "type": "string",
+        "required": false
+      },
+      "description": {
+        "type": "string",
+        "required": false
+      },
+      "valueFormatter": {
+        "type": "ChartValueFormatter",
+        "required": false,
+        "default": "toLocaleString"
+      },
+      "height": {
+        "type": "number | string",
+        "required": false,
+        "default": "300"
+      },
+      "emptyState": {
+        "type": "ReactNode",
+        "required": false,
+        "default": "\"No data to display\""
+      },
+      "accessibleTable": {
+        "type": "boolean",
+        "required": false,
+        "default": "true"
+      },
+      "animate": {
+        "type": "boolean",
+        "required": false,
+        "default": "true"
+      },
+      "showTooltip": {
+        "type": "boolean",
+        "required": false,
+        "default": "true"
+      },
+      "x": {
+        "type": "string",
+        "required": true
+      },
+      "y": {
+        "type": "string",
+        "required": true
+      },
+      "index": {
+        "type": "string",
+        "required": false
+      },
+      "category": {
+        "type": "string",
+        "required": false
+      },
+      "colors": {
+        "type": "ChartColor[]",
+        "required": false,
+        "default": "primary, success, warning, error, info, secondary, gray"
+      },
+      "xAxisFormatter": {
+        "type": "(value: number) => string",
+        "required": false,
+        "default": "toLocaleString"
+      },
+      "xAxisLabel": {
+        "type": "string",
+        "required": false
+      },
+      "yAxisLabel": {
+        "type": "string",
+        "required": false
+      },
+      "showLegend": {
+        "type": "boolean",
+        "required": false,
+        "default": "true"
+      },
+      "showXAxis": {
+        "type": "boolean",
+        "required": false,
+        "default": "true"
+      },
+      "showYAxis": {
+        "type": "boolean",
+        "required": false,
+        "default": "true"
+      },
+      "showGrid": {
+        "type": "boolean",
+        "required": false,
+        "default": "true"
+      },
+      "yAxisWidth": {
+        "type": "number",
+        "required": false,
+        "default": "48 (36 when the chart is narrower than 400 px)"
+      },
+      "aspectRatio": {
+        "type": "number",
+        "required": false
+      }
+    }
+  },
   "SearchField": {
     "group": "core",
     "import": "@dreamtree-org/twreact-ui",
@@ -3103,6 +3215,29 @@
       "messages": {
         "type": "SortableMessages",
         "required": false
+      },
+      "id": {
+        "type": "string",
+        "required": false
+      }
+    }
+  },
+  "SortableGroup": {
+    "group": "utility",
+    "import": "@dreamtree-org/twreact-ui",
+    "forwardRef": true,
+    "props": {
+      "onMove": {
+        "type": "(move: SortableMove<T>) => void",
+        "required": false
+      },
+      "canDrop": {
+        "type": "(item: T, target: SortableLocation, from: SortableLocation) => boolean",
+        "required": false
+      },
+      "children": {
+        "type": "ReactNode",
+        "required": false
       }
     }
   },

package/dist/charts/index.d.ts

@@ -1,9 +1,10 @@
 import type * as React from "react";
-import type { AreaChartProps, BarChartProps, DonutChartProps, LineChartProps, SparklineProps } from "../types/charts";
+import type { AreaChartProps, BarChartProps, DonutChartProps, LineChartProps, ScatterChartProps, SparklineProps } from "../types/charts";
 export declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
 export declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
 export declare const AreaChart: React.ForwardRefExoticComponent<AreaChartProps & React.RefAttributes<HTMLDivElement>>;
 export declare const DonutChart: React.ForwardRefExoticComponent<DonutChartProps & React.RefAttributes<HTMLDivElement>>;
 export declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<HTMLDivElement>>;
 export * from "../types/charts";
 //# sourceMappingURL=index.d.ts.map

package/dist/charts/index.js

@@ -11,7 +11,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var _excluded$3 = ["className", "title", "description", "defaultTitle", "data", "height", "aspectRatio", "emptyState", "legend", "accessibleTable", "tableColumns", "children", "aria-label"];
+var _excluded$4 = ["className", "title", "description", "defaultTitle", "data", "height", "aspectRatio", "emptyState", "legend", "accessibleTable", "tableColumns", "children", "aria-label"];
 // The swatch colour arrives as a custom property so a token (`rgb(var(--dt-*))`)
 // and a resolved rgb() string both work.
 var swatch = function swatch(size) {
@@ -97,11 +97,11 @@ function ChartDataTable(_ref3) {
       children: caption
     }), jsxRuntime.jsx("thead", {
       children: jsxRuntime.jsx("tr", {
-        children: columns.map(function (c) {
+        children: columns.map(function (c, i) {
           return jsxRuntime.jsx("th", {
             scope: "col",
             children: c.label
-          }, c.key);
+          }, "".concat(c.key, "-").concat(i));
         })
       })
     }), jsxRuntime.jsx("tbody", {
@@ -111,9 +111,9 @@ function ChartDataTable(_ref3) {
             return i === 0 ? jsxRuntime.jsx("th", {
               scope: "row",
               children: c.format(row[c.key])
-            }, c.key) : jsxRuntime.jsx("td", {
+            }, "".concat(c.key, "-").concat(i)) : jsxRuntime.jsx("td", {
               children: c.format(row[c.key])
-            }, c.key);
+            }, "".concat(c.key, "-").concat(i));
           })
         }, r);
       })
@@ -141,7 +141,7 @@ var ChartFrame = /*#__PURE__*/React__default.default.forwardRef(function ChartFr
     tableColumns = _ref4.tableColumns,
     children = _ref4.children,
     ariaLabel = _ref4["aria-label"],
-    rest = cn._objectWithoutProperties(_ref4, _excluded$3);
+    rest = cn._objectWithoutProperties(_ref4, _excluded$4);
   var descriptionId = React.useId();
   var name = title || ariaLabel || defaultTitle;
   if (!Array.isArray(data) || data.length === 0) {
@@ -452,7 +452,7 @@ function usePinnedTooltip() {
   };
 }
 
-var _excluded$2 = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "aspectRatio", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"],
+var _excluded$3 = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "aspectRatio", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"],
   _excluded2 = ["ref"];
 var ROOTS = {
   line: recharts.LineChart,
@@ -577,7 +577,7 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
     _ref2$accessibleTable = _ref2.accessibleTable,
     accessibleTable = _ref2$accessibleTable === void 0 ? true : _ref2$accessibleTable,
     className = _ref2.className,
-    rest = cn._objectWithoutProperties(_ref2, _excluded$2);
+    rest = cn._objectWithoutProperties(_ref2, _excluded$3);
   var _useChartTheme = useChartTheme(categories, colors),
     chrome = _useChartTheme.chrome,
     series = _useChartTheme.series;
@@ -747,7 +747,7 @@ var AreaChart = /*#__PURE__*/React__default.default.forwardRef(function (props,
 });
 AreaChart.displayName = "AreaChart";
 
-var _excluded$1 = ["data", "index", "category", "colors", "valueFormatter", "variant", "innerRadius", "outerRadius", "centerLabel", "height", "showLegend", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
+var _excluded$2 = ["data", "index", "category", "colors", "valueFormatter", "variant", "innerRadius", "outerRadius", "centerLabel", "height", "showLegend", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 var DonutChart = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
   var data = _ref.data,
     _ref$index = _ref.index,
@@ -778,7 +778,7 @@ var DonutChart = /*#__PURE__*/React__default.default.forwardRef(function (_ref,
     _ref$accessibleTable = _ref.accessibleTable,
     accessibleTable = _ref$accessibleTable === void 0 ? true : _ref$accessibleTable,
     className = _ref.className,
-    rest = cn._objectWithoutProperties(_ref, _excluded$1);
+    rest = cn._objectWithoutProperties(_ref, _excluded$2);
   var rows = Array.isArray(data) ? data : [];
   var names = rows.map(function (row) {
     return String(row[index]);
@@ -860,7 +860,7 @@ var DonutChart = /*#__PURE__*/React__default.default.forwardRef(function (_ref,
 });
 DonutChart.displayName = "DonutChart";
 
-var _excluded = ["data", "category", "index", "color", "type", "valueFormatter", "height", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
+var _excluded$1 = ["data", "category", "index", "color", "type", "valueFormatter", "height", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 /** A word-sized trend line: no axes, grid or legend — just the shape of the data. */
 var Sparkline = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
   var data = _ref.data,
@@ -886,7 +886,7 @@ var Sparkline = /*#__PURE__*/React__default.default.forwardRef(function (_ref, r
     _ref$accessibleTable = _ref.accessibleTable,
     accessibleTable = _ref$accessibleTable === void 0 ? true : _ref$accessibleTable,
     className = _ref.className,
-    rest = cn._objectWithoutProperties(_ref, _excluded);
+    rest = cn._objectWithoutProperties(_ref, _excluded$1);
   var _useChartTheme = useChartTheme([category], [color]),
     series = _useChartTheme.series;
   var reducedMotion = useReducedMotion();
@@ -964,8 +964,293 @@ var Sparkline = /*#__PURE__*/React__default.default.forwardRef(function (_ref, r
 });
 Sparkline.displayName = "Sparkline";
 
+// Internal to the charts entry point: data shaping for ScatterChart.
+var isFiniteNumber = function isFiniteNumber(v) {
+  return typeof v === "number" && Number.isFinite(v);
+};
+var textOf = function textOf(v) {
+  return v == null ? "" : String(v);
+};
+/**
+ * Axis domain. recharts draws a zero-width scale for a single distinct value, so
+ * pad around it; otherwise let recharts pick nice bounds.
+ */
+function scatterDomain(values) {
+  if (!values.length) return ["auto", "auto"];
+  var min = Math.min.apply(Math, cn._toConsumableArray(values));
+  var max = Math.max.apply(Math, cn._toConsumableArray(values));
+  if (min !== max) return ["auto", "auto"];
+  var pad = Math.abs(min) / 2 || 1;
+  return [min - pad, max + pad];
+}
+/** Rows with a numeric x and y, split into series by the `category` key (first-seen order). */
+function groupScatter(data, _ref) {
+  var x = _ref.x,
+    y = _ref.y,
+    category = _ref.category;
+  var rows = (Array.isArray(data) ? data : []).filter(function (row) {
+    return isFiniteNumber(row === null || row === void 0 ? void 0 : row[x]) && isFiniteNumber(row === null || row === void 0 ? void 0 : row[y]);
+  });
+  var groups = new Map();
+  rows.forEach(function (row) {
+    var name = category ? textOf(row[category]) : y;
+    if (!groups.has(name)) groups.set(name, []);
+    groups.get(name).push(row);
+  });
+  return {
+    rows: rows,
+    names: cn._toConsumableArray(groups.keys()),
+    groups: groups
+  };
+}
+
+/**
+ * Tooltip for one ScatterChart point: the entity (`index`) or series name as the
+ * heading, then the series (when both are set) and the formatted x and y values.
+ */
+function ScatterTooltipContent(_ref) {
+  var active = _ref.active,
+    payload = _ref.payload,
+    index = _ref.index,
+    category = _ref.category,
+    _ref$colorFor = _ref.colorFor,
+    colorFor = _ref$colorFor === void 0 ? {} : _ref$colorFor,
+    x = _ref.x,
+    y = _ref.y;
+  var row = active && payload && payload.length ? payload[0].payload : null;
+  if (!row) return null;
+  var seriesName = category ? textOf(row[category]) : null;
+  var heading = index ? textOf(row[index]) : seriesName;
+  var lines = [].concat(cn._toConsumableArray(index && seriesName ? [[category, seriesName]] : []), [[x.label, x.format(row[x.key])], [y.label, y.format(row[y.key])]]);
+  return jsxRuntime.jsxs("div", {
+    className: "rounded-md border border-line bg-surface px-3 py-2 text-xs text-foreground shadow-md",
+    "data-chart-tooltip": "",
+    children: [heading && jsxRuntime.jsxs("p", {
+      className: "mb-1 flex items-center gap-2 font-medium",
+      children: [seriesName && jsxRuntime.jsx("span", {
+        className: swatch("h-2 w-2"),
+        style: {
+          "--dt-chart-color": colorFor[seriesName]
+        },
+        "aria-hidden": "true"
+      }), jsxRuntime.jsx("span", {
+        children: heading
+      })]
+    }), jsxRuntime.jsx("ul", {
+      className: "space-y-0.5",
+      children: lines.map(function (_ref2) {
+        var _ref3 = cn._slicedToArray(_ref2, 2),
+          name = _ref3[0],
+          value = _ref3[1];
+        return jsxRuntime.jsxs("li", {
+          className: "flex items-center gap-2",
+          children: [jsxRuntime.jsx("span", {
+            className: "text-muted",
+            children: name
+          }), jsxRuntime.jsx("span", {
+            className: "ml-auto pl-3 font-medium tabular-nums",
+            children: value
+          })]
+        }, name);
+      })
+    })]
+  });
+}
+
+var _excluded = ["data", "x", "y", "index", "category", "colors", "valueFormatter", "xAxisFormatter", "xAxisLabel", "yAxisLabel", "height", "aspectRatio", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
+var ScatterChart = /*#__PURE__*/React__default.default.forwardRef(function ScatterChart(_ref, ref) {
+  var data = _ref.data,
+    x = _ref.x,
+    y = _ref.y,
+    index = _ref.index,
+    category = _ref.category,
+    colors = _ref.colors,
+    _ref$valueFormatter = _ref.valueFormatter,
+    valueFormatter = _ref$valueFormatter === void 0 ? defaultValueFormatter : _ref$valueFormatter,
+    _ref$xAxisFormatter = _ref.xAxisFormatter,
+    xAxisFormatter = _ref$xAxisFormatter === void 0 ? defaultValueFormatter : _ref$xAxisFormatter,
+    xAxisLabel = _ref.xAxisLabel,
+    yAxisLabel = _ref.yAxisLabel,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 300 : _ref$height,
+    aspectRatio = _ref.aspectRatio,
+    _ref$showLegend = _ref.showLegend,
+    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
+    _ref$showTooltip = _ref.showTooltip,
+    showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
+    _ref$showXAxis = _ref.showXAxis,
+    showXAxis = _ref$showXAxis === void 0 ? true : _ref$showXAxis,
+    _ref$showYAxis = _ref.showYAxis,
+    showYAxis = _ref$showYAxis === void 0 ? true : _ref$showYAxis,
+    _ref$showGrid = _ref.showGrid,
+    showGrid = _ref$showGrid === void 0 ? true : _ref$showGrid,
+    yAxisWidth = _ref.yAxisWidth,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? true : _ref$animate,
+    title = _ref.title,
+    description = _ref.description,
+    emptyState = _ref.emptyState,
+    _ref$accessibleTable = _ref.accessibleTable,
+    accessibleTable = _ref$accessibleTable === void 0 ? true : _ref$accessibleTable,
+    className = _ref.className,
+    rest = cn._objectWithoutProperties(_ref, _excluded);
+  var _groupScatter = groupScatter(data, {
+      x: x,
+      y: y,
+      category: category
+    }),
+    rows = _groupScatter.rows,
+    names = _groupScatter.names,
+    groups = _groupScatter.groups;
+  var _useChartTheme = useChartTheme(names, colors),
+    chrome = _useChartTheme.chrome,
+    series = _useChartTheme.series;
+  var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
+  var _useElementWidth = useElementWidth(),
+    _useElementWidth2 = cn._slicedToArray(_useElementWidth, 2),
+    measureRef = _useElementWidth2[0],
+    width = _useElementWidth2[1];
+  var tick = {
+    fill: chrome.axis,
+    fontSize: 12
+  };
+  var axisTitle = function axisTitle(value, angle) {
+    return value ? {
+      value: value,
+      angle: angle,
+      position: angle ? "insideLeft" : "insideBottom",
+      offset: angle ? 10 : -4,
+      fill: chrome.axis,
+      fontSize: 12
+    } : undefined;
+  };
+  var xLabel = xAxisLabel || x;
+  var yLabel = yAxisLabel || y;
+  return jsxRuntime.jsx(ChartFrame, cn._objectSpread2(cn._objectSpread2({
+    ref: ref,
+    className: className,
+    title: title,
+    description: description,
+    defaultTitle: "Scatter chart",
+    data: rows,
+    height: height,
+    aspectRatio: aspectRatio,
+    emptyState: emptyState,
+    accessibleTable: accessibleTable,
+    legend: showLegend && category ? names.map(function (name, i) {
+      return {
+        name: name,
+        color: series[i]
+      };
+    }) : null,
+    tableColumns: [].concat(cn._toConsumableArray(index ? [{
+      key: index,
+      label: index,
+      format: textOf
+    }] : []), cn._toConsumableArray(category && category !== index ? [{
+      key: category,
+      label: category,
+      format: textOf
+    }] : []), [{
+      key: x,
+      label: xLabel,
+      format: xAxisFormatter
+    }, {
+      key: y,
+      label: yLabel,
+      format: valueFormatter
+    }])
+  }, rest), {}, {
+    children: jsxRuntime.jsx("div", {
+      className: "h-full w-full",
+      ref: measureRef,
+      children: jsxRuntime.jsx(recharts.ResponsiveContainer, {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        children: jsxRuntime.jsxs(recharts.ScatterChart, {
+          id: chartId,
+          margin: {
+            top: 8,
+            right: 8,
+            bottom: xAxisLabel ? 16 : 0,
+            left: 0
+          },
+          accessibilityLayer: false,
+          children: [showGrid && jsxRuntime.jsx(recharts.CartesianGrid, {
+            stroke: chrome.grid,
+            strokeDasharray: "3 3"
+          }), jsxRuntime.jsx(recharts.XAxis, {
+            type: "number",
+            dataKey: x,
+            name: xLabel,
+            domain: scatterDomain(rows.map(function (row) {
+              return row[x];
+            })),
+            tick: tick,
+            tickLine: false,
+            axisLine: false,
+            tickFormatter: xAxisFormatter,
+            minTickGap: tickGapFor(width),
+            hide: !showXAxis,
+            label: axisTitle(xAxisLabel, 0)
+          }), jsxRuntime.jsx(recharts.YAxis, {
+            type: "number",
+            dataKey: y,
+            name: yLabel,
+            domain: scatterDomain(rows.map(function (row) {
+              return row[y];
+            })),
+            tick: tick,
+            tickLine: false,
+            axisLine: false,
+            tickFormatter: valueFormatter,
+            width: yAxisWidth !== null && yAxisWidth !== void 0 ? yAxisWidth : yAxisWidthFor(width),
+            hide: !showYAxis,
+            label: axisTitle(yAxisLabel, -90)
+          }), showTooltip && jsxRuntime.jsx(recharts.Tooltip, {
+            cursor: {
+              stroke: chrome.grid,
+              strokeDasharray: "3 3"
+            },
+            isAnimationActive: false,
+            content: jsxRuntime.jsx(ScatterTooltipContent, {
+              index: index,
+              category: category,
+              colorFor: Object.fromEntries(names.map(function (name, i) {
+                return [name, series[i]];
+              })),
+              x: {
+                key: x,
+                label: xLabel,
+                format: xAxisFormatter
+              },
+              y: {
+                key: y,
+                label: yLabel,
+                format: valueFormatter
+              }
+            })
+          }), names.map(function (name, i) {
+            return jsxRuntime.jsx(recharts.Scatter, {
+              id: "".concat(chartId, "-").concat(i),
+              name: name,
+              data: groups.get(name),
+              fill: series[i],
+              isAnimationActive: animate && !reducedMotion
+            }, name);
+          })]
+        })
+      })
+    })
+  }));
+});
+ScatterChart.displayName = "ScatterChart";
+
 exports.AreaChart = AreaChart;
 exports.BarChart = BarChart;
 exports.DonutChart = DonutChart;
 exports.LineChart = LineChart;
+exports.ScatterChart = ScatterChart;
 exports.Sparkline = Sparkline;

package/dist/components/charts/ChartFrame.d.ts

@@ -8,6 +8,7 @@ export function ChartTooltipContent({ active, payload, label, valueFormatter, hi
     valueFormatter: any;
     hideLabel?: boolean | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;
+export function swatch(size: any): string;
 /**
  * The accessible shell every chart renders: the SVG lives in a `role="img"`
  * region named by `title` and described by `description`; the numbers are

package/dist/components/charts/ChartFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartFrame.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ChartFrame.jsx"],"names":[],"mappings":"AAcA;;4CAWC;AAED;;;;;;mDAgBC;AA8BD;;;;GAIG;AACH,mFA6DG;kBA3I0B,OAAO"}
+{"version":3,"file":"ChartFrame.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ChartFrame.jsx"],"names":[],"mappings":"AAcA;;4CAWC;AAED;;;;;;mDAgBC;AAtCM,0CAAwG;AAoE/G;;;;GAIG;AACH,mFA6DG;kBA3I0B,OAAO"}

package/dist/components/charts/ScatterChart.d.ts

@@ -0,0 +1,4 @@
+export default ScatterChart;
+declare const ScatterChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=ScatterChart.d.ts.map

package/dist/components/charts/ScatterChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterChart.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ScatterChart.jsx"],"names":[],"mappings":";AASA,sFAyHG;kBAlIe,OAAO"}