@dreamtree-org/twreact-ui 1.3.1 → 1.3.2

package/DESIGN.md

@@ -41,7 +41,7 @@ rounded:
 spacing:
   grid: 4px
   steps: [4, 8, 12, 16, 20, 24, 32]
-brands: [default, practicepro]
+brands: [default, practicepro, studio]
 ---
 
 <!-- Generated by twreact-ui scripts/build-tokens.mjs from tokens/tokens.json. Edit the tokens or this generator, not this file. -->
@@ -76,7 +76,7 @@ Every Dreamtree product screen, and every prototype generated by Dreamtree Studi
 
 - **One accent per screen.** `primary` marks the primary action, the active nav item, the current step and progress. Red (`error`) is only for errors, overdue items and destructive actions.
 - Badge and status fills use the 100 step with 800 text, which keeps contrast at or above 4.5:1.
-- Products change their look with a **brand file** (`tokens/brands/<product>.json`), which overrides `--dt-*` variables. Brands available: `default`, `practicepro`.
+- Products change their look with a **brand file** (`tokens/brands/<product>.json`), which overrides `--dt-*` variables. Brands available: `default`, `practicepro`, `studio`.
 
 ## 3. Type, space and shape
 

package/README.md

@@ -79,7 +79,8 @@ bundle. `import { Button } from '@dreamtree-org/twreact-ui'` costs about 8 KB gz
 100 KB. `require()`, Jest and plain Node keep getting the CommonJS build (`dist/index.js`).
 
 There are no per-component subpaths such as `@dreamtree-org/twreact-ui/button`. The root import
-already tree-shakes. Existing file paths (`dist/index.css`, `dist/tokens/*`, `tokens/*`,
+already tree-shakes. The only subpaths are the two **optional entry points** below, which exist
+because they need an extra dependency. Existing file paths (`dist/index.css`, `dist/tokens/*`, `tokens/*`,
 `dist/index.esm.js`, `package.json`, …) still resolve through the `exports` map.
 
 ### Next.js App Router
@@ -103,6 +104,27 @@ Server Component to these Client Components. You also cannot dot into a client e
 In Vite, Rollup can log `Module level directives cause errors when bundled, "use client" … was ignored`.
 This message is harmless. To hide it, filter `MODULE_LEVEL_DIRECTIVE` in `build.rollupOptions.onwarn`.
 
+### Optional entry points: charts and rich text
+
+Charts and the rich-text editor wrap third-party libraries, so they live on their own entry points
+and use **optional peer dependencies**. If you never import them you install nothing extra, and
+nothing changes in your bundle — the root `@dreamtree-org/twreact-ui` import never touches them.
+
+| 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/rich-text` | `RichTextEditor` | `npm install @tiptap/react @tiptap/pm @tiptap/starter-kit` (Tiptap 3) |
+
+```jsx
+import { LineChart, DonutChart } from '@dreamtree-org/twreact-ui/charts';
+import { RichTextEditor } from '@dreamtree-org/twreact-ui/rich-text';
+```
+
+Both ship ESM (with `'use client'`), CommonJS and TypeScript declarations, and resolve under every
+TypeScript `moduleResolution` (`bundler`, `node16`/`nodenext` and legacy `node`). Their styles are
+already in `dist/index.css`. Rich-text output is HTML from the user — **sanitize it on the server**
+before you store or render it (see [doc/RichTextEditor.md](doc/RichTextEditor.md#security-sanitize-the-html-on-the-server)).
+
 ## Quick Start
 
 ```jsx
@@ -709,6 +731,61 @@ import { Drawer, Popover, Textarea, Slider, Sortable, Tour, Button } from '@drea
 <Tour open={tourOpen} steps={[{ title: 'Welcome' }, { target: '[data-tour="new-task"]', title: 'Capture work' }]} onClose={() => setTourOpen(false)} />
 ```
 
+### Charts (optional entry point)
+
+Import from `@dreamtree-org/twreact-ui/charts` after `npm install recharts`. A data-first API over
+recharts: pass rows as `data`, the x-axis key as `index` and the series keys as `categories`.
+Colours are design tokens (`'primary'`, `'success-600'`, …) resolved from the `--dt-*` variables,
+so charts follow your theme and dark mode. Every chart is responsive, `forwardRef` + `className` +
+`...rest`, a named `role="img"` (`title` / `description`) with a visually-hidden data table for
+screen readers (`accessibleTable`), shows `emptyState` for empty data, and disables animation under
+`prefers-reduced-motion`.
+
+| Component | Use for |
+|---|---|
+| [`LineChart`](doc/LineChart.md) | Trends over time (`curveType`, `showDots`, `connectNulls`) |
+| [`BarChart`](doc/BarChart.md) | Comparisons — grouped, `stacked` or `horizontal` |
+| [`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 |
+
+Shared props: `valueFormatter`, `height`, `showLegend`, `showTooltip`, `showXAxis`, `showYAxis`,
+`showGrid`, `colors`, `animate`.
+
+```jsx
+import { LineChart, DonutChart, Sparkline } from '@dreamtree-org/twreact-ui/charts';
+
+<LineChart
+  data={[{ month: 'Jan', revenue: 4200 }, { month: 'Feb', revenue: 5100 }]}
+  index="month"
+  categories={['revenue']}
+  valueFormatter={(v) => `$${v.toLocaleString()}`}
+  title="Revenue, Jan–Feb"
+/>
+<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" />
+```
+
+### Rich text (optional entry point)
+
+[`RichTextEditor`](doc/RichTextEditor.md) — import from `@dreamtree-org/twreact-ui/rich-text` after
+`npm install @tiptap/react @tiptap/pm @tiptap/starter-kit`. A Tiptap (StarterKit) field with the
+same `label` / `error` / `helperText` / `required` wiring as `Input`; controlled (`value` +
+`onChange(html)`) or uncontrolled (`defaultValue`), `outputFormat="json"` for Tiptap JSON,
+`disabled` / `readOnly`, `minHeight` / `maxHeight`, and a `toolbar` (bold, italic, strike, code,
+headings, lists, quote, link, undo/redo) that is a `role="toolbar"` of real buttons with
+`aria-pressed` and arrow-key roving focus. The `ref` is an imperative handle (`editor`, `focus()`,
+`getHTML()`, `getJSON()`, `setContent()`, `clear()`). SSR-safe: the editor mounts on the client.
+
+```jsx
+import { RichTextEditor } from '@dreamtree-org/twreact-ui/rich-text';
+
+<RichTextEditor label="Description" placeholder="Describe the task…" value={html} onChange={setHtml} maxHeight={320} />
+```
+
+> The HTML comes from the user. Sanitize it on the server (e.g. DOMPurify / `sanitize-html`) before
+> storing or rendering it; this library ships no sanitizer.
+
 ### Page blocks
 
 Page-level patterns extracted from the Dreamtree products. Build pages from these before composing layouts by hand.
@@ -766,6 +843,8 @@ Every colour in the compiled CSS is a CSS variable (`--dt-primary-600`, `--dt-su
 @import "@dreamtree-org/twreact-ui/dist/tokens/brands/practicepro.css"; /* or your own --dt-* overrides */
 ```
 
+Shipped brands: `default`, `practicepro`, `studio` (Dreamtree Studio's own pages).
+
 **Use the same tokens in your own classes:**
 
 ```js

package/ai-skills/dreamtree-ui.md

@@ -29,6 +29,17 @@ npm install react react-dom
 `react` / `react-dom` are **peer dependencies** at `^18.3.1`. React 19
 is not yet supported.
 
+**Optional entry points** — install the peer only when the user needs it:
+
+```bash
+# charts: @dreamtree-org/twreact-ui/charts
+npm install recharts            # React 18 apps also: npm install react-is@18
+# rich text: @dreamtree-org/twreact-ui/rich-text
+npm install @tiptap/react @tiptap/pm @tiptap/starter-kit
+```
+
+Apps that don't import these subpaths install and bundle nothing extra.
+
 ## Wiring (do not invent alternatives)
 
 ```jsx
@@ -112,6 +123,8 @@ The library exports four kinds of things from `@dreamtree-org/twreact-ui`:
 | **Feedback**    | `Dialog`, `Toast` (+ `ToastProvider`, `ToastContainer`, `useToast`), `Alert`, `Drawer` (side sheet; `isOpen`/`onClose` like Dialog), `Tour` (onboarding spotlight) |
 | **Utility**     | `Badge`, `Avatar`, `Card`, `Pagination`, `Stepper`, `FileUpload`, `Condition`, `Carousel`, `Sortable` (drag + keyboard reorder) |
 | **Blocks**      | `AppShell`, `PageHeader`, `StatCard`, `StatusPill`, `EmptyState`, `ErrorState`, `LoadingState`, `ConfirmDialog` — 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 |
+| **Rich text** (`@dreamtree-org/twreact-ui/rich-text`, peers `@tiptap/react @tiptap/pm @tiptap/starter-kit`) | `RichTextEditor` — NOT exported from the root |
 
 ### Hooks
 
@@ -185,6 +198,8 @@ 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.
 - `Sortable` — `items` + `onReorder(newItems)` + `renderItem`; keyboard reordering and announcements are built in. Pass `handle` and spread `handleProps` on a grip for touch screens.
+- 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.
+- `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.
 
 **Tokens:** colours are CSS variables (`--dt-primary-600`, `--dt-surface`, …) generated from
@@ -326,6 +341,25 @@ fetchApiWith('updateUser', [7, { name: 'A' }]); // apiMap.updateUser(7, {...})
 Treat `useApi` as a thin axios wrapper, not a caching/dedup layer. For
 cache, the consumer brings their own (React Query, SWR, etc.).
 
+### Charts and rich text (optional entry points)
+
+```jsx
+import { LineChart, DonutChart, Sparkline } from '@dreamtree-org/twreact-ui/charts';
+import { RichTextEditor } from '@dreamtree-org/twreact-ui/rich-text';
+
+<LineChart
+  data={[{ month: 'Jan', revenue: 4200 }, { month: 'Feb', revenue: 5100 }]}
+  index="month"
+  categories={['revenue']}
+  valueFormatter={(v) => `$${v.toLocaleString()}`}
+  title="Revenue, Jan–Feb"
+/>
+<DonutChart data={byStatus} index="status" category="tasks" colors={['info', 'error', 'success']} centerLabel="63 tasks" title="Tasks by status" />
+<Sparkline data={weekly} category="signups" color="success" title="Signups, last 4 weeks" />
+
+<RichTextEditor label="Description" placeholder="Describe the task…" value={html} onChange={setHtml} maxHeight={320} />
+```
+
 ### cn
 
 ```jsx
@@ -341,7 +375,7 @@ import { cn } from '@dreamtree-org/twreact-ui';
 1. **Use library components.** When the user asks for a button, input,
    table, modal, toast, navbar, sidebar, breadcrumb, badge, card,
    stepper, file uploader, date picker, color picker, location picker,
-   pagination, or carousel — reach into this library FIRST. Don't
+   pagination, carousel, chart or rich-text editor — reach into this library FIRST. Don't
    propose a hand-rolled `<div>` + Tailwind unless the library has no
    matching primitive.
 2. **Use the shared vocabulary.** `variant="primary"`, `size="md"`,
@@ -356,8 +390,11 @@ import { cn } from '@dreamtree-org/twreact-ui';
    "components render unstyled," check first whether their
    `tailwind.config.js` `content[]` includes
    `./node_modules/@dreamtree-org/twreact-ui/dist/**/*.{js,mjs}`.
-6. **Don't deep-import.** Only `@dreamtree-org/twreact-ui` is public.
-   Don't suggest `@dreamtree-org/twreact-ui/src/components/core/Button`.
+6. **Don't deep-import.** The public modules are `@dreamtree-org/twreact-ui`
+   plus the two optional entry points `@dreamtree-org/twreact-ui/charts` and
+   `@dreamtree-org/twreact-ui/rich-text` (each needs its peer installed).
+   Don't suggest `@dreamtree-org/twreact-ui/src/components/core/Button`, and
+   never import charts or `RichTextEditor` from the root.
 7. **React 18 only.** If the user is on React 19, warn them: this
    library has not yet been verified on React 19.
 8. **Accessibility-first.** Icon-only buttons need `aria-label`.

package/charts/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/charts/index.js",
+  "module": "../dist/esm/charts/index.js",
+  "types": "../dist/charts/index.d.ts"
+}

package/dist/_shared/cn-DPPQUJu1.js

@@ -0,0 +1,138 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function cn() {
+  for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
+    inputs[_key] = arguments[_key];
+  }
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+exports._objectSpread2 = _objectSpread2;
+exports._objectWithoutProperties = _objectWithoutProperties;
+exports._slicedToArray = _slicedToArray;
+exports._toConsumableArray = _toConsumableArray;
+exports.cn = cn;