gridsmith-ui 0.3.5 → 0.6.0

package/README.md

@@ -1,6 +1,6 @@
 # gridsmith-ui
 
-82 React components with a CSS custom property theming engine.
+98 React components with a CSS custom property theming engine, 14 chart components, and 5 icon packs.
 
 ## Installation
 
@@ -8,6 +8,30 @@
 npm install gridsmith-ui
 ```
 
+### Charts (optional)
+
+```bash
+npm install recharts
+```
+
+### Heavy components (optional)
+
+Five components depend on large third-party libraries. They live in their own entry points so the main bundle stays small — install the library only if you use the component:
+
+```bash
+npm install @tiptap/react @tiptap/pm @tiptap/starter-kit lowlight \
+  @tiptap/extension-code-block-lowlight @tiptap/extension-color @tiptap/extension-font-family \
+  @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-link \
+  @tiptap/extension-placeholder @tiptap/extension-subscript @tiptap/extension-superscript \
+  @tiptap/extension-table @tiptap/extension-table-cell @tiptap/extension-table-header \
+  @tiptap/extension-table-row @tiptap/extension-task-item @tiptap/extension-task-list \
+  @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-underline   # gridsmith-ui/editor
+npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities   # gridsmith-ui/kanban
+npm install @tanstack/react-table                                # gridsmith-ui/data-grid
+npm install @tanstack/react-virtual                              # gridsmith-ui/virtualized
+npm install react-resizable-panels                               # gridsmith-ui/resizable
+```
+
 ### Icon packs (optional)
 
 The `Icon` component uses `lucide-react` by default. Other packs are loaded on demand — install only what you need:
@@ -38,10 +62,40 @@ Import the design tokens and Tailwind bindings in your CSS entry point:
 - **tokens.css** — default Precision Minimal preset values (optional: use `generate-tokens.ts` to customise)
 - **tailwind.css** — maps `--ds-*` tokens to Tailwind utilities (`p-ds-4`, `text-2xs`, `opacity-disabled`)
 
+For the fastest icon rendering on cold loads, call `preloadPack` in your entry point before `createRoot`:
+
+```tsx
+import { preloadPack } from "gridsmith-ui/icons";
+preloadPack("lucide");
+```
+
+## Entry Points
+
+| Import path | What it provides |
+|---|---|
+| `gridsmith-ui` | 97 components (actions, forms, data display, navigation, overlays, feedback, layout) |
+| `gridsmith-ui/charts` | 14 chart components (Bar, Line, Area, Pie, Composite, Scatter, Radar, RadialBar, Funnel, Treemap, Sankey, Sparkline, ChartContainer) + `useChartColors` hook |
+| `gridsmith-ui/editor` | `RichTextEditor` (requires the tiptap packages + `lowlight`) |
+| `gridsmith-ui/kanban` | `KanbanBoard` (requires `@dnd-kit/*`) |
+| `gridsmith-ui/data-grid` | `DataGrid` (requires `@tanstack/react-table`) |
+| `gridsmith-ui/virtualized` | `VirtualizedList` (requires `@tanstack/react-virtual`) |
+| `gridsmith-ui/resizable` | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` (requires `react-resizable-panels`) |
+| `gridsmith-ui/icons` | `Icon`, `IconProvider`, `preloadPack` — 5 icon packs with two-phase loading |
+| `gridsmith-ui/utils` | `cn()` — className merge utility (clsx + tailwind-merge) |
+| `gridsmith-ui/roots.css` | CSS custom property engine |
+| `gridsmith-ui/tokens.css` | Default preset token values |
+| `gridsmith-ui/tailwind.css` | Tailwind v4 `@theme` bindings for `--ds-*` tokens |
+
 ## Usage
 
 ```tsx
-import { Button, Card, Input } from "gridsmith-ui";
+import { Button, Card, Input, Table } from "gridsmith-ui";
+import { BarChart, LineChart } from "gridsmith-ui/charts";
+import { RichTextEditor } from "gridsmith-ui/editor";
+import { KanbanBoard } from "gridsmith-ui/kanban";
+import { DataGrid } from "gridsmith-ui/data-grid";
+import { VirtualizedList } from "gridsmith-ui/virtualized";
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "gridsmith-ui/resizable";
 import { Icon, IconProvider } from "gridsmith-ui/icons";
 import { cn } from "gridsmith-ui/utils";
 ```
@@ -68,12 +122,18 @@ Wrap your app in `<IconProvider>` to select a pack:
 </IconProvider>
 ```
 
-## Peer dependencies
+## Peer Dependencies
 
 | Package | Required |
 |---------|----------|
 | `react` / `react-dom` | Yes (^18 or ^19) |
 | `lucide-react` | Optional (default icon pack) |
+| `recharts` | Optional (required for `gridsmith-ui/charts`) |
+| `@tiptap/*`, `lowlight` | Optional (required for `gridsmith-ui/editor`) |
+| `@dnd-kit/*` | Optional (required for `gridsmith-ui/kanban`) |
+| `@tanstack/react-table` | Optional (required for `gridsmith-ui/data-grid`) |
+| `@tanstack/react-virtual` | Optional (required for `gridsmith-ui/virtualized`) |
+| `react-resizable-panels` | Optional (required for `gridsmith-ui/resizable`) |
 | `@phosphor-icons/react` | Optional |
 | `@heroicons/react` | Optional |
 | `@tabler/icons-react` | Optional |

package/dist/charts.d.ts

@@ -0,0 +1,246 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BarDef {
+    dataKey: string;
+    label?: string;
+    soft?: boolean;
+}
+interface BarChartProps {
+    data: Record<string, unknown>[];
+    bars: BarDef[];
+    xAxisKey: string;
+    height?: "sm" | "md" | "lg" | number;
+    stacked?: boolean;
+    horizontal?: boolean;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const BarChart: react.ForwardRefExoticComponent<BarChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface LineDef {
+    dataKey: string;
+    label?: string;
+    dashed?: boolean;
+}
+interface LineChartProps {
+    data: Record<string, unknown>[];
+    lines: LineDef[];
+    xAxisKey: string;
+    height?: "sm" | "md" | "lg" | number;
+    curved?: boolean;
+    showDots?: boolean;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const LineChart: react.ForwardRefExoticComponent<LineChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface AreaDef {
+    dataKey: string;
+    label?: string;
+}
+interface AreaChartProps {
+    data: Record<string, unknown>[];
+    areas: AreaDef[];
+    xAxisKey: string;
+    height?: "sm" | "md" | "lg" | number;
+    stacked?: boolean;
+    curved?: boolean;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    gradient?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const AreaChart: react.ForwardRefExoticComponent<AreaChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface PieChartProps {
+    data: {
+        name: string;
+        value: number;
+        [key: string]: unknown;
+    }[];
+    height?: "sm" | "md" | "lg" | number;
+    donut?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    showLabels?: boolean;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const PieChart: react.ForwardRefExoticComponent<PieChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CompositeChartProps {
+    data: Record<string, unknown>[];
+    bars: BarDef[];
+    lines: LineDef[];
+    xAxisKey: string;
+    height?: "sm" | "md" | "lg" | number;
+    dualAxis?: boolean;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const CompositeChart: react.ForwardRefExoticComponent<CompositeChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ScatterSeries {
+    name: string;
+    points: {
+        x: number;
+        y: number;
+        z?: number;
+    }[];
+}
+interface ScatterChartProps {
+    data: ScatterSeries[];
+    xLabel?: string;
+    yLabel?: string;
+    height?: "sm" | "md" | "lg" | number;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const ScatterChart: react.ForwardRefExoticComponent<ScatterChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface RadarDataKey {
+    key: string;
+    label?: string;
+}
+interface RadarChartProps {
+    data: Record<string, unknown>[];
+    dataKeys: RadarDataKey[];
+    axisKey: string;
+    height?: "sm" | "md" | "lg" | number;
+    filled?: boolean;
+    showDots?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const RadarChart: react.ForwardRefExoticComponent<RadarChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface RadialBarChartProps {
+    data: {
+        name: string;
+        value: number;
+        max?: number;
+        [key: string]: unknown;
+    }[];
+    height?: "sm" | "md" | "lg" | number;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    showLabels?: boolean;
+    startAngle?: number;
+    endAngle?: number;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const RadialBarChart: react.ForwardRefExoticComponent<RadialBarChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FunnelChartProps {
+    data: {
+        name: string;
+        value: number;
+        [key: string]: unknown;
+    }[];
+    height?: "sm" | "md" | "lg" | number;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    showLabels?: boolean;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const FunnelChart: react.ForwardRefExoticComponent<FunnelChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TreemapNode {
+    name: string;
+    value?: number;
+    children?: TreemapNode[];
+    [key: string]: unknown;
+}
+interface TreemapChartProps {
+    data: TreemapNode[];
+    height?: "sm" | "md" | "lg" | number;
+    showTooltip?: boolean;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const TreemapChart: react.ForwardRefExoticComponent<TreemapChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SankeyChartProps {
+    data: {
+        nodes: {
+            name: string;
+        }[];
+        links: {
+            source: number;
+            target: number;
+            value: number;
+        }[];
+    };
+    height?: "sm" | "md" | "lg" | number;
+    showTooltip?: boolean;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const SankeyChart: react.ForwardRefExoticComponent<SankeyChartProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SparklineProps {
+    data: number[];
+    variant?: "line" | "area" | "bar";
+    color?: 1 | 2 | 3 | 4 | 5 | 6;
+    height?: number;
+    width?: number | "100%";
+    showTooltip?: boolean;
+    curved?: boolean;
+    animated?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+declare const Sparkline: react.ForwardRefExoticComponent<SparklineProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ChartContainerProps {
+    height?: "sm" | "md" | "lg";
+    title?: string;
+    loading?: boolean;
+    emptyState?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare function ChartContainer({ height, title, loading, emptyState, children, className, }: ChartContainerProps): react_jsx_runtime.JSX.Element;
+
+declare function useChartColors(count: number, soft?: boolean): string[];
+
+export { AreaChart, type AreaChartProps, type AreaDef, BarChart, type BarChartProps, type BarDef, ChartContainer, CompositeChart, type CompositeChartProps, FunnelChart, type FunnelChartProps, LineChart, type LineChartProps, type LineDef, PieChart, type PieChartProps, RadarChart, type RadarChartProps, type RadarDataKey, RadialBarChart, type RadialBarChartProps, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, type ScatterSeries, Sparkline, type SparklineProps, TreemapChart, type TreemapChartProps, type TreemapNode, useChartColors };