gridsmith-ui 0.24.0 → 0.25.0

package/README.md

@@ -1,6 +1,6 @@
 # gridsmith-ui
 
-103 React components with a CSS custom property theming engine, 13 chart components, and 5 icon packs.
+React components and charts with a CSS custom property theming engine, and 5 icon packs.
 
 ## Installation
 
@@ -18,16 +18,17 @@ npm install recharts
 
 ### Heavy components (optional)
 
-Seven components depend on large third-party libraries. They live in six entry points of their own so the main bundle stays small — install the library only if you use the component:
+Some components depend on large third-party libraries. They live in entry points of their own 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-highlight @tiptap/extension-image \
   @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
+  @tiptap/extension-text-align @tiptap/extension-text-style                           # gridsmith-ui/editor
+npm install @tiptap/extension-mention@<v> @tiptap/suggestion@<v>  # gridsmith-ui/editor-mentions: <v> is your @tiptap/core version (npm ls @tiptap/core)
 npm install react-markdown remark-gfm                            # gridsmith-ui/chat
 npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities   # gridsmith-ui/kanban
 npm install @tanstack/react-table                                # gridsmith-ui/data-grid
@@ -78,9 +79,10 @@ preloadPack("lucide");
 
 | Import path | What it provides |
 |---|---|
-| `gridsmith-ui` | 96 components (actions, forms, data display, navigation, overlays, feedback, layout) |
+| `gridsmith-ui` | Every component outside the entry points below (actions, forms, data display, navigation, overlays, feedback, layout) |
 | `gridsmith-ui/charts` | 13 chart components (Bar, Line, Area, Pie, Composite, Scatter, Radar, RadialBar, Funnel, Treemap, Sankey, Sparkline, ChartContainer) + `useChartColors` hook + `categoryKind()` |
 | `gridsmith-ui/editor` | `RichTextEditor` (requires the tiptap packages + `lowlight`) |
+| `gridsmith-ui/editor-mentions` | `useMentions`, @mentions for `RichTextEditor` (requires `@tiptap/extension-mention` and `@tiptap/suggestion` at your other tiptap packages' version) |
 | `gridsmith-ui/chat` | `MarkdownContent` for chat replies; pass it to `ChatMessageList`'s `renderContent` (requires `react-markdown` + `remark-gfm`) |
 | `gridsmith-ui/kanban` | `KanbanBoard` (requires `@dnd-kit/*`) |
 | `gridsmith-ui/data-grid` | `DataGrid` (requires `@tanstack/react-table`) |
@@ -142,7 +144,7 @@ Wrap your app in `<IconProvider>` to select a pack:
 | `react` / `react-dom` | Yes (^19) |
 | `lucide-react` | Yes (the default icon pack and every pack's fallback) |
 | `recharts` | Optional (required for `gridsmith-ui/charts`) |
-| `@tiptap/*`, `lowlight` | Optional (required for `gridsmith-ui/editor`) |
+| `@tiptap/*`, `lowlight` | Optional (required for `gridsmith-ui/editor`). The mention packages for `gridsmith-ui/editor-mentions` aren't declared: install them at your `@tiptap/core` version, as tiptap's packages must all be one version |
 | `react-markdown`, `remark-gfm` | Optional (required for `gridsmith-ui/chat`) |
 | `@dnd-kit/*` | Optional (required for `gridsmith-ui/kanban`) |
 | `@tanstack/react-table` | Optional (required for `gridsmith-ui/data-grid`) |

package/dist/MentionList-CoNBRFGR.d.ts

@@ -0,0 +1,8 @@
+interface MentionSuggestion {
+    id: string;
+    label: string;
+    avatar?: string;
+    description?: string;
+}
+
+export type { MentionSuggestion as M };

package/dist/charts.d.ts

@@ -22,6 +22,15 @@ declare function categoryKind(labels: ReadonlyArray<unknown>): CategoryKind;
 
 type XAxisInterval = number | "preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart";
 
+/**
+ * How a chart's values read (Sprint 25.17 A27, R28-50, P21). "number" (the default): plain numbers, compact on the axis
+ * from five digits up (1M, 750K; 1,234 as it is). "percent": values are percentages out of 100 (45 reads 45%; multiply a fraction by
+ * 100 first). "milliseconds": durations in ms (120 ms, 1.5 s, 2 min). "bytes": sizes in bytes, in the units of 1,000 the
+ * browser's own formats name (1.5 MB). A function formats both the axis and the tooltip itself. Everything is in the
+ * page's language (its `lang`, in the visitor's formats where they speak it: formatLocale).
+ */
+type ValueFormat = "number" | "percent" | "milliseconds" | "bytes" | ((value: number) => string);
+
 interface BarDef {
     dataKey: string;
     label?: string;
@@ -68,6 +77,11 @@ interface BarChartProps {
     xAxisLabel?: string;
     /** The value axis's title, drawn horizontally above the axis. */
     yAxisLabel?: string;
+    /**
+     * How the values read: "number" (the default) is compact on the axis from five digits up, in the page's language (1M, 750K), and in full in
+     * the tooltip; "percent", "milliseconds" or "bytes" add their unit; a function formats both itself (Sprint 25.17 A27).
+     */
+    valueFormat?: ValueFormat;
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
@@ -100,6 +114,11 @@ interface LineChartProps {
     xAxisLabel?: string;
     /** The value axis's title, drawn horizontally above the axis. */
     yAxisLabel?: string;
+    /**
+     * How the values read: "number" (the default) is compact on the axis from five digits up, in the page's language (1M, 750K), and in full in
+     * the tooltip; "percent", "milliseconds" or "bytes" add their unit; a function formats both itself (Sprint 25.17 A27).
+     */
+    valueFormat?: ValueFormat;
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
@@ -132,6 +151,11 @@ interface AreaChartProps {
     xAxisLabel?: string;
     /** The value axis's title, drawn horizontally above the axis. */
     yAxisLabel?: string;
+    /**
+     * How the values read: "number" (the default) is compact on the axis from five digits up, in the page's language (1M, 750K), and in full in
+     * the tooltip; "percent", "milliseconds" or "bytes" add their unit; a function formats both itself (Sprint 25.17 A27).
+     */
+    valueFormat?: ValueFormat;
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
@@ -198,6 +222,14 @@ interface CompositeChartProps {
     xAxisLabel?: string;
     /** The value axis's title, drawn horizontally above the axis. */
     yAxisLabel?: string;
+    /**
+     * How the bars' values read (and the lines', on one axis): "number" (the default) is compact on the axis, in the
+     * page's language (1M, 750K), and in full in the tooltip; "percent", "milliseconds" or "bytes" add their unit; a function
+     * formats both itself (Sprint 25.17 A27).
+     */
+    valueFormat?: ValueFormat;
+    /** How the lines' values read on their own axis (dualAxis), when their unit differs from the bars'. Default: valueFormat. */
+    lineValueFormat?: ValueFormat;
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
@@ -222,6 +254,13 @@ interface ScatterChartProps {
     showGrid?: boolean;
     showTooltip?: boolean;
     showLegend?: boolean;
+    /**
+     * How the y values read: "number" (the default) is compact on the axis from five digits up, in the page's language (1M, 750K), and in full in
+     * the tooltip; "percent", "milliseconds" or "bytes" add their unit; a function formats both itself (Sprint 25.17 A27).
+     */
+    valueFormat?: ValueFormat;
+    /** How the x values read, as valueFormat. Default "number". */
+    xValueFormat?: ValueFormat;
     animated?: boolean;
     "aria-label"?: string;
     className?: string;
@@ -243,6 +282,8 @@ interface RadarChartProps {
     showTooltip?: boolean;
     showLegend?: boolean;
     animated?: boolean;
+    /** How the values read on the rings and in the tooltip; see ValueFormat (compact numbers by default). */
+    valueFormat?: ValueFormat;
     "aria-label"?: string;
     className?: string;
 }
@@ -358,4 +399,4 @@ declare function ChartContainer({ height, title, loading, emptyState, variant, c
 
 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, categoryKind, useChartColors };
+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, type ValueFormat, categoryKind, useChartColors };