@smallwebco/tinypivot-react 1.0.79 → 1.0.80

package/README.md

@@ -45,6 +45,96 @@ export default function App() {
 }
 ```
 
+## Theming
+
+TinyPivot ships 22 themes — 2 neutral (`light`, `dark`) plus 10 brand themes each with a light and dark variant. Themes are applied via the `theme` prop on `DataGrid`.
+
+### Quick start
+
+```tsx
+<DataGrid data={data} theme="slate-dark" />
+```
+
+`theme="auto"` resolves to `'light'` or `'dark'` based on the user's system preference (`prefers-color-scheme`).
+
+### Available themes
+
+| Theme | Accent | Vibe |
+|---|---|---|
+| `light` / `dark` / `auto` | indigo / violet | TinyPivot defaults — neutral cool grays |
+| `slate` / `slate-dark` | `#4f46e5` indigo | Linear / Stripe — cool neutral |
+| `zinc` / `zinc-dark` | near-mono | Vercel / Anthropic — minimalist |
+| `indigo` / `indigo-dark` | `#6366f1` vivid indigo | Premium SaaS |
+| `violet` / `violet-dark` | `#8b5cf6` purple | Data viz / AI tools |
+| `emerald` / `emerald-dark` | `#10b981` green | Fintech / finance |
+| `sky` / `sky-dark` | `#0ea5e9` light blue | Productivity / airy |
+| `rose` / `rose-dark` | `#f43f5e` warm pink | Friendly / creator |
+| `amber` / `amber-dark` | `#f59e0b` warm orange | Energy / wellness |
+| `solar` / `solar-dark` | `#b58900` mustard | Solarized-inspired warm cream + dark teal |
+| `mono` / `mono-dark` | `#000` / `#fff` | Editorial — pure grayscale, high contrast |
+
+### Custom themes
+
+Brand themes redefine ~25 CSS custom property tokens at the grid root. You can override these in your own CSS to create a custom theme:
+
+```tsx
+import './my-brand.css'
+
+<DataGrid data={data} theme="light" className="my-brand" />
+```
+
+```css
+/* my-brand.css */
+.vpg-data-grid.my-brand {
+  --vpg-accent: #ff6b35;
+  --vpg-accent-hover: #e55426;
+  --vpg-surface-bg: #fafaf7;
+  --vpg-surface-panel: #f0eee7;
+  /* …override any of the tokens below */
+}
+```
+
+**Token reference** — these are the variables you can override:
+
+- **Surfaces**: `--vpg-surface-bg`, `--vpg-surface-panel`, `--vpg-surface-elevated`, `--vpg-surface-hover`, `--vpg-surface-selected`, `--vpg-surface-striped`
+- **Text**: `--vpg-text-primary`, `--vpg-text-secondary`, `--vpg-text-muted`, `--vpg-text-inverse`
+- **Borders**: `--vpg-border-default`, `--vpg-border-strong`, `--vpg-border-subtle`
+- **Accent**: `--vpg-accent`, `--vpg-accent-hover`, `--vpg-accent-soft-bg`, `--vpg-accent-soft-text`, `--vpg-focus-ring`
+- **States**: `--vpg-state-error`, `--vpg-state-warning`, `--vpg-state-success`, `--vpg-state-info`
+- **Scrollbar**: `--vpg-scrollbar-thumb`, `--vpg-scrollbar-track`
+
+Custom theme classes layer on top of any preset, so you can start from `theme="dark"` and tweak just the accent, for example.
+
+### Adding a theme switcher
+
+Let users pick their own theme — bind a state value to a `<select>`:
+
+```tsx
+import { DataGrid } from '@smallwebco/tinypivot-react'
+import '@smallwebco/tinypivot-react/style.css'
+import { useState } from 'react'
+
+type Theme = 'light' | 'dark' | 'slate' | 'slate-dark' | 'emerald' | 'emerald-dark'
+
+export function MyGrid({ data }) {
+  const [theme, setTheme] = useState<Theme>('dark')
+
+  return (
+    <>
+      <select value={theme} onChange={e => setTheme(e.target.value as Theme)}>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+        <option value="slate-dark">Slate (dark)</option>
+        <option value="emerald-dark">Emerald (dark)</option>
+        {/* …add more themes */}
+      </select>
+
+      <DataGrid data={data} theme={theme} />
+    </>
+  )
+}
+```
+
 ## Features
 
 | Feature | Free | Pro |
@@ -79,7 +169,7 @@ export default function App() {
 | `pageSize` | `number` | `50` | Rows per page |
 | `enableColumnResize` | `boolean` | `true` | Drag to resize columns |
 | `enableClipboard` | `boolean` | `true` | Ctrl+C to copy cells |
-| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Color theme |
+| `theme` | `string` | `'light'` | Color theme — see [Theming](#theming) for the full list (22 presets) |
 | `numberFormat` | `'us' \| 'eu' \| 'plain'` | `'us'` | Number display format: US (1,234.56), EU (1.234,56), plain (1234.56) |
 | `dateFormat` | `'us' \| 'eu' \| 'iso'` | `'iso'` | Date display format: US (MM/DD/YYYY), EU (DD/MM/YYYY), ISO (YYYY-MM-DD) |
 | `fieldRoleOverrides` | `Record<string, FieldRole>` | `undefined` | Override auto-detected chart field roles per column (`'dimension'` \| `'measure'` \| `'temporal'`) |

package/dist/index.cjs

@@ -832,6 +832,7 @@ var AIAnalyst = (0, import_react2.forwardRef)(({
     onQueryExecuted,
     onError
   });
+  const isDarkTheme = theme === "dark" || typeof theme === "string" && theme.endsWith("-dark");
   (0, import_react2.useImperativeHandle)(ref, () => ({
     loadFullData,
     selectedDataSource
@@ -993,7 +994,7 @@ var AIAnalyst = (0, import_react2.forwardRef)(({
     return !!message.metadata?.data && message.metadata.data.length > 0;
   };
   if (!selectedDataSource) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `vpg-ai-analyst ${theme === "dark" ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vpg-ai-picker-fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-picker-content", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `vpg-ai-analyst ${isDarkTheme ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vpg-ai-picker-fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-picker-content", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-picker-header", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vpg-ai-icon-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }),
@@ -1065,7 +1066,7 @@ var AIAnalyst = (0, import_react2.forwardRef)(({
       ] })
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `vpg-ai-analyst ${theme === "dark" ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-split-layout", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `vpg-ai-analyst ${isDarkTheme ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-split-layout", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-chat-panel", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-chat-header", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1795,7 +1796,7 @@ function ChartBuilder({
     return val.toFixed(dec);
   }, []);
   const chartOptions = (0, import_react4.useMemo)(() => {
-    const isDark = theme === "dark";
+    const isDark = theme === "dark" || typeof theme === "string" && theme.endsWith("-dark");
     const config = chartConfig;
     const options = config.options || {};
     const baseOptions = {
@@ -3884,7 +3885,8 @@ function PivotConfig({
   onAddColumnField,
   onAddCalculatedField,
   onRemoveCalculatedField,
-  onUpdateCalculatedField
+  onUpdateCalculatedField,
+  theme
 }) {
   const [fieldSearch, setFieldSearch] = (0, import_react12.useState)("");
   const [showCalcModal, setShowCalcModal] = (0, import_react12.useState)(false);
@@ -4010,7 +4012,7 @@ function PivotConfig({
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-pivot-config", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `vpg-pivot-config ${theme ? `vpg-theme-${theme}` : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-config-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("h3", { className: "vpg-config-title", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -4278,7 +4280,8 @@ function PivotSkeleton({
   onAddValueField,
   onRemoveValueField,
   onReorderRowFields,
-  onReorderColumnFields
+  onReorderColumnFields,
+  theme
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
   const getValueFieldDisplayName = (0, import_react13.useCallback)((field) => {
@@ -4644,7 +4647,7 @@ function PivotSkeleton({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
-      className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${draggingField ? "vpg-is-dragging" : ""}`,
+      className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${theme ? `vpg-theme-${theme}` : ""} ${draggingField ? "vpg-is-dragging" : ""}`,
       children: [
         showCopyToast && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "vpg-toast", children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
@@ -6195,7 +6198,8 @@ function DataGrid({
               onRemoveValueField: removeValueField,
               onAddCalculatedField: addCalculatedField,
               onRemoveCalculatedField: removeCalculatedField,
-              onUpdateCalculatedField: addCalculatedField
+              onUpdateCalculatedField: addCalculatedField,
+              theme: currentTheme
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -6220,7 +6224,8 @@ function DataGrid({
               onRemoveValueField: removeValueField,
               onUpdateAggregation: updateValueFieldAggregation,
               onReorderRowFields: setRowFields,
-              onReorderColumnFields: setColumnFields
+              onReorderColumnFields: setColumnFields,
+              theme: currentTheme
             }
           ) })
         ] }),