@dreamtree-org/twreact-ui 1.3.1 → 1.3.2

package/dist/types/charts.d.ts

@@ -0,0 +1,97 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { BaseComponentProps } from './index';
+/** A palette from the design tokens (`--dt-<palette>-<shade>`). */
+export type ChartPalette = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'gray';
+export type ChartShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+/**
+ * A series colour. Prefer a token — `'primary'` (shade 500) or `'primary-300'` —
+ * which resolves to the matching `--dt-*` CSS variable and follows the theme and
+ * dark mode. Any other string is used as a CSS colour (e.g. a colour stored with
+ * the data); it does not follow the theme.
+ */
+export type ChartColor = ChartPalette | `${ChartPalette}-${ChartShade}` | (string & {});
+export type ChartValueFormatter = (value: number) => string;
+export type ChartDatum = Record<string, unknown>;
+/** Props shared by every chart (the accessible shell + chrome toggles). */
+export interface ChartBaseProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title' | 'color'> {
+    /** Rows to plot. An empty array renders `emptyState`. */
+    data: ChartDatum[];
+    /** Accessible name of the chart (`aria-label` on the `role="img"` region and the hidden table's caption). */
+    title?: string;
+    /** Longer text alternative, linked with `aria-describedby` (e.g. the takeaway: "Revenue doubled since May"). */
+    description?: string;
+    /** Formats values in the tooltip, value axis and hidden data table. */
+    valueFormatter?: ChartValueFormatter;
+    /** Chart height in px, or any CSS length. */
+    height?: number | string;
+    /** Shown instead of the chart when `data` is empty. */
+    emptyState?: ReactNode;
+    /** Render the numbers as a visually-hidden table for screen-reader users. */
+    accessibleTable?: boolean;
+    /** Animate on mount and data change. Always off when the user prefers reduced motion. */
+    animate?: boolean;
+    showTooltip?: boolean;
+}
+export type ChartCurveType = 'linear' | 'monotone' | 'step' | 'natural';
+/** LineChart / BarChart / AreaChart. */
+export interface CartesianChartProps extends ChartBaseProps {
+    /** Key of the x-axis (category) value in each row, e.g. `"month"`. */
+    index: string;
+    /** Keys of the numeric series to plot, one line/bar/area per key. */
+    categories: string[];
+    /** Series colours, matched to `categories` by position (cycled). */
+    colors?: ChartColor[];
+    /** Formats x-axis (category) tick labels and the hidden table's row headers. */
+    xAxisFormatter?: (value: unknown) => string;
+    showLegend?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    /** Width reserved for value-axis labels, in px. */
+    yAxisWidth?: number;
+}
+export interface LineChartProps extends CartesianChartProps {
+    curveType?: ChartCurveType;
+    showDots?: boolean;
+    /** Draw across `null` gaps instead of breaking the line. */
+    connectNulls?: boolean;
+}
+export interface AreaChartProps extends CartesianChartProps {
+    curveType?: ChartCurveType;
+    /** Stack the series on top of each other. */
+    stacked?: boolean;
+    showDots?: boolean;
+    connectNulls?: boolean;
+}
+export interface BarChartProps extends CartesianChartProps {
+    /** Stack the series in one bar per category. */
+    stacked?: boolean;
+    /** Draw bars horizontally (categories on the y-axis). */
+    horizontal?: boolean;
+}
+export interface DonutChartProps extends ChartBaseProps {
+    /** Key of the slice name in each row. */
+    index?: string;
+    /** Key of the slice value in each row. */
+    category?: string;
+    /** Slice colours, matched to rows by position (cycled). */
+    colors?: ChartColor[];
+    /** `'pie'` fills the centre. */
+    variant?: 'donut' | 'pie';
+    /** Inner radius of the ring (px or percentage string). Ignored for `variant="pie"`. */
+    innerRadius?: number | string;
+    outerRadius?: number | string;
+    /** Content drawn in the middle of the donut, e.g. the total. Decorative (`aria-hidden`); put the figure in `description` too. */
+    centerLabel?: ReactNode;
+    showLegend?: boolean;
+}
+export interface SparklineProps extends ChartBaseProps {
+    /** Key of the plotted value in each row. */
+    category?: string;
+    /** Optional key of a label per row (tooltip label and table row header). */
+    index?: string;
+    /** Line colour token. */
+    color?: ChartColor;
+    type?: 'line' | 'area';
+}
+//# sourceMappingURL=charts.d.ts.map

package/dist/types/charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../../src/types/charts.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,mEAAmE;AACnE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AACvG,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAExF;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,GAAG,YAAY,IAAI,UAAU,EAAE,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAExF,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAE5D,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEjD,2EAA2E;AAC3E,MAAM,WAAW,cACf,SAAQ,kBAAkB,EACxB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;IACvE,yDAAyD;IACzD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,6GAA6G;IAC7G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gHAAgH;IAChH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,uDAAuD;IACvD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAExE,wCAAwC;AACxC,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,oEAAoE;IACpE,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,gFAAgF;IAChF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,aAAc,SAAQ,mBAAmB;IACxD,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,uFAAuF;IACvF,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,iIAAiI;IACjI,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB"}

package/dist/types/rich-text.d.ts

@@ -0,0 +1,50 @@
+import type { FocusEvent, HTMLAttributes, ReactNode } from 'react';
+import type { AnyExtension, Editor, JSONContent } from '@tiptap/react';
+import type { BaseComponentProps } from './index';
+export type RichTextToolbarItem = 'bold' | 'italic' | 'strike' | 'code' | 'heading1' | 'heading2' | 'heading3' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'link' | 'undo' | 'redo';
+export type RichTextContent = string | JSONContent;
+export interface RichTextEditorProps extends BaseComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'onChange' | 'onFocus' | 'onBlur' | 'defaultValue'> {
+    /** Controlled content: an HTML string (or Tiptap JSON). Sanitize it on the server before you store or render it. */
+    value?: RichTextContent;
+    /** Uncontrolled initial content (HTML string or Tiptap JSON). */
+    defaultValue?: RichTextContent;
+    /** Called on every edit with HTML (default) or Tiptap JSON when `outputFormat="json"`. */
+    onChange?: (value: RichTextContent, editor: Editor) => void;
+    outputFormat?: 'html' | 'json';
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    label?: ReactNode;
+    error?: ReactNode;
+    helperText?: ReactNode;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Read-only: content is shown formatted, not editable, and the toolbar is hidden. */
+    readOnly?: boolean;
+    /** Toolbar buttons in order, or `false` for none. */
+    toolbar?: RichTextToolbarItem[] | false;
+    /** Accessible name of the toolbar. */
+    toolbarLabel?: string;
+    /** Minimum height of the editable area (px or CSS length). */
+    minHeight?: number | string;
+    /** Maximum height before the editable area scrolls (px or CSS length). */
+    maxHeight?: number | string;
+    autoFocus?: boolean;
+    /** Extra classes for the editable (ProseMirror) element. */
+    editorClassName?: string;
+    /** Extra Tiptap extensions, appended after StarterKit (bold … link, history). */
+    extensions?: AnyExtension[];
+}
+/** What a `ref` on RichTextEditor receives. */
+export interface RichTextEditorHandle {
+    /** The Tiptap editor (null until it mounts on the client). */
+    editor: Editor | null;
+    /** The root wrapper element. */
+    element: HTMLDivElement | null;
+    focus: () => void;
+    clear: () => void;
+    getHTML: () => string;
+    getJSON: () => JSONContent | null;
+    setContent: (content: RichTextContent) => void;
+}
+//# sourceMappingURL=rich-text.d.ts.map

package/dist/types/rich-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../src/types/rich-text.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAC3B,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,UAAU,GACV,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,WAAW,GACX,MAAM,GACN,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,CAAC;AAEnD,MAAM,WAAW,mBACf,SAAQ,kBAAkB,EACxB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;IACxG,oHAAoH;IACpH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,iEAAiE;IACjE,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;IACxC,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iFAAiF;IACjF,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;CAC7B;AAED,+CAA+C;AAC/C,MAAM,WAAW,oBAAoB;IACnC,8DAA8D;IAC9D,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gCAAgC;IAChC,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAClC,UAAU,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD"}

package/doc/README.md

@@ -123,6 +123,19 @@ function App() {
 | [LoadingState](LoadingState.md) | Block | Skeleton shaped like the content | [LoadingState.md](LoadingState.md) |
 | [ConfirmDialog](ConfirmDialog.md) | Block | Confirmation dialog (replaces confirm()) | [ConfirmDialog.md](ConfirmDialog.md) |
 
+### Optional entry points (need an optional peer dependency)
+
+These are **not** exported from the root package. Import them from their subpath, after installing the peer. Apps that never import them install and bundle nothing extra.
+
+| Component | Import from | Peer to install | Description | Doc |
+|-----------|-------------|-----------------|-------------|-----|
+| [LineChart](LineChart.md) | `@dreamtree-org/twreact-ui/charts` | `recharts` | Themed line chart, data-first API | [LineChart.md](LineChart.md) |
+| [BarChart](BarChart.md) | `@dreamtree-org/twreact-ui/charts` | `recharts` | Grouped / stacked / horizontal bars | [BarChart.md](BarChart.md) |
+| [AreaChart](AreaChart.md) | `@dreamtree-org/twreact-ui/charts` | `recharts` | Area chart, optionally stacked | [AreaChart.md](AreaChart.md) |
+| [DonutChart](DonutChart.md) | `@dreamtree-org/twreact-ui/charts` | `recharts` | Donut or pie, legend + centre label | [DonutChart.md](DonutChart.md) |
+| [Sparkline](Sparkline.md) | `@dreamtree-org/twreact-ui/charts` | `recharts` | Word-sized trend line for cards and cells | [Sparkline.md](Sparkline.md) |
+| [RichTextEditor](RichTextEditor.md) | `@dreamtree-org/twreact-ui/rich-text` | `@tiptap/react @tiptap/pm @tiptap/starter-kit` | Tiptap WYSIWYG field with accessible toolbar | [RichTextEditor.md](RichTextEditor.md) |
+
 ---
 
 ## Hooks & utilities