@dynostack/react-grid 0.1.3 → 0.2.0

package/dist/index.d.cts

@@ -30,7 +30,7 @@ declare function DataTableRowActions<TData>({ row, actions, customActions, onAct
  * values are emitted as inline CSS variables on the table root, scoped
  * through CSS cascade to that instance only.
  */
-type DataTableTheme = {
+type DataTableTokens = {
     background?: string;
     foreground?: string;
     card?: string;
@@ -55,51 +55,90 @@ type DataTableTheme = {
     /** Font family for the table body. */
     fontFamily?: string;
 };
-/** Convert a DataTableTheme into a `style` object of CSS variables. */
+/**
+ * A theme passed to `<DataTable theme={…}>`.
+ *
+ * Two accepted shapes:
+ *
+ * 1. A flat token map (`DataTableTokens`) — applied as-is, no dark variant.
+ * 2. A moded map (`DataTableModedTheme`) — `light` is applied by default,
+ *    `dark` is swapped in automatically inside `@media (prefers-color-scheme: dark)`
+ *    *and* inside any `.dark` ancestor.
+ */
+type DataTableModedTheme = {
+    light?: DataTableTokens;
+    dark?: DataTableTokens;
+};
+type DataTableTheme = DataTableTokens | DataTableModedTheme;
+/** Convert a DataTableTokens map into a CSS `style` object. */
+declare function tokensToStyle(tokens?: DataTableTokens): CSSProperties;
+/**
+ * Back-compat: original API accepted a flat `DataTableTheme`. Still works,
+ * but if a moded theme is passed it returns the `light` variant only — use
+ * `splitTheme` if you need both variants.
+ */
 declare function themeToStyle(theme?: DataTableTheme): CSSProperties;
-/** A handful of ready-to-use theme presets. */
+/**
+ * Split a theme into its `light` (always applied) and optional `dark` (applied
+ * via `@media (prefers-color-scheme: dark)` and `.dark` ancestor) variants.
+ *
+ * For flat themes, returns `{ light: theme, dark: undefined }`.
+ */
+declare function splitTheme(theme?: DataTableTheme): {
+    light: DataTableTokens | undefined;
+    dark: DataTableTokens | undefined;
+};
+/**
+ * Build a full light+dark token set from a single OKLCH hue.
+ *
+ * @param hue    Hue angle 0–360 (e.g. 285 for violet, 162 for emerald).
+ * @param chroma Optional base chroma for tinted neutrals (default 0.03).
+ */
+declare function buildPreset(hue: number, chroma?: number): DataTableModedTheme;
+/**
+ * Convert a tokens map into a CSS declaration string (no selector, no braces),
+ * e.g. `--background:oklch(1 0 0);--foreground:oklch(0.145 0 0)`.
+ *
+ * Used internally to inject scoped <style> blocks for moded themes.
+ */
+declare function tokensToCssBlock(tokens?: DataTableTokens): string;
+/**
+ * Ready-to-use theme presets.
+ *
+ * Each preset is a full light + dark token set — passing one to
+ * `<DataTable theme={…}>` repaints the entire table and auto-flips on OS
+ * dark mode (or when a `.dark` ancestor is added).
+ *
+ * Custom hues:
+ *
+ * ```ts
+ * import { buildPreset } from "@dynostack/react-grid"
+ * const tealPreset = buildPreset(180)
+ * ```
+ */
 declare const themePresets: {
+    neutral: DataTableModedTheme;
     light: {
-        background: string;
-        foreground: string;
-        card: string;
-        cardForeground: string;
-        primary: string;
-        primaryForeground: string;
-        border: string;
+        light: DataTableTokens | undefined;
     };
     dark: {
-        background: string;
-        foreground: string;
-        card: string;
-        cardForeground: string;
-        primary: string;
-        primaryForeground: string;
-        border: string;
-    };
-    emerald: {
-        primary: string;
-        primaryForeground: string;
-        accent: string;
-        accentForeground: string;
-        ring: string;
-    };
-    violet: {
-        primary: string;
-        primaryForeground: string;
-        accent: string;
-        accentForeground: string;
-        ring: string;
-    };
-    amber: {
-        primary: string;
-        primaryForeground: string;
-        accent: string;
-        accentForeground: string;
-        ring: string;
+        light: DataTableTokens | undefined;
     };
+    violet: DataTableModedTheme;
+    emerald: DataTableModedTheme;
+    amber: DataTableModedTheme;
+    rose: DataTableModedTheme;
+    sky: DataTableModedTheme;
+    slate: DataTableModedTheme;
 };
 type DataTableThemeName = keyof typeof themePresets;
+/**
+ * Bundled fallback tokens used when `<DataTable isolate>` is set. These let
+ * the grid render correctly even when the consumer hasn't imported
+ * `styles.css` or provided any theme of their own.
+ */
+declare const ISOLATE_LIGHT_TOKENS: DataTableTokens;
+declare const ISOLATE_DARK_TOKENS: DataTableTokens;
 
 type CellEditorType = "text" | "number" | "currency" | "date" | "select" | "switch" | "checkbox";
 type FilterType = "text" | "number" | "select" | "multi-select" | "boolean" | "date";
@@ -253,12 +292,35 @@ type DataTableProps<TData extends {
     labels?: DataTableLabels;
     /** Row + cell padding density. Defaults to "default". */
     density?: DataTableDensity;
-    /** CSS-variable overrides (shadcn-compatible) scoped to this instance. */
+    /**
+     * CSS-variable overrides (shadcn-compatible) scoped to this instance.
+     *
+     * Two accepted shapes:
+     *
+     *   theme={{ primary: "...", accent: "..." }}              // flat tokens
+     *   theme={{ light: { ... }, dark: { ... } }}              // moded — auto-flips
+     *
+     * Moded themes apply `light` always and swap to `dark` inside
+     * `@media (prefers-color-scheme: dark)` *and* inside any `.dark` ancestor.
+     *
+     * Use `themePresets.violet` (or any preset) for a ready-made moded theme.
+     */
     theme?: DataTableTheme;
+    /**
+     * When `true`, the grid does NOT inherit CSS variables from the app's
+     * `:root` (shadcn, custom theme, etc.). Instead it renders with the
+     * package's bundled defaults (or whatever you pass via `theme`).
+     *
+     * Useful when embedding the grid inside a heavily-themed shell where you
+     * want the table to keep its own look regardless of surrounding context.
+     *
+     * Defaults to `false` (inherit app theme).
+     */
+    isolate?: boolean;
 };
 declare function DataTable<TData extends {
     id: string | number;
-}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 type Props$2<TData, TValue> = {
     column: Column<TData, TValue>;
@@ -350,4 +412,4 @@ declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TVal
 declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
 declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
 
-export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, DataTableToolbar, type DateOp, EditableCell, type FilterType, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };
+export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle };

package/dist/index.d.ts

@@ -30,7 +30,7 @@ declare function DataTableRowActions<TData>({ row, actions, customActions, onAct
  * values are emitted as inline CSS variables on the table root, scoped
  * through CSS cascade to that instance only.
  */
-type DataTableTheme = {
+type DataTableTokens = {
     background?: string;
     foreground?: string;
     card?: string;
@@ -55,51 +55,90 @@ type DataTableTheme = {
     /** Font family for the table body. */
     fontFamily?: string;
 };
-/** Convert a DataTableTheme into a `style` object of CSS variables. */
+/**
+ * A theme passed to `<DataTable theme={…}>`.
+ *
+ * Two accepted shapes:
+ *
+ * 1. A flat token map (`DataTableTokens`) — applied as-is, no dark variant.
+ * 2. A moded map (`DataTableModedTheme`) — `light` is applied by default,
+ *    `dark` is swapped in automatically inside `@media (prefers-color-scheme: dark)`
+ *    *and* inside any `.dark` ancestor.
+ */
+type DataTableModedTheme = {
+    light?: DataTableTokens;
+    dark?: DataTableTokens;
+};
+type DataTableTheme = DataTableTokens | DataTableModedTheme;
+/** Convert a DataTableTokens map into a CSS `style` object. */
+declare function tokensToStyle(tokens?: DataTableTokens): CSSProperties;
+/**
+ * Back-compat: original API accepted a flat `DataTableTheme`. Still works,
+ * but if a moded theme is passed it returns the `light` variant only — use
+ * `splitTheme` if you need both variants.
+ */
 declare function themeToStyle(theme?: DataTableTheme): CSSProperties;
-/** A handful of ready-to-use theme presets. */
+/**
+ * Split a theme into its `light` (always applied) and optional `dark` (applied
+ * via `@media (prefers-color-scheme: dark)` and `.dark` ancestor) variants.
+ *
+ * For flat themes, returns `{ light: theme, dark: undefined }`.
+ */
+declare function splitTheme(theme?: DataTableTheme): {
+    light: DataTableTokens | undefined;
+    dark: DataTableTokens | undefined;
+};
+/**
+ * Build a full light+dark token set from a single OKLCH hue.
+ *
+ * @param hue    Hue angle 0–360 (e.g. 285 for violet, 162 for emerald).
+ * @param chroma Optional base chroma for tinted neutrals (default 0.03).
+ */
+declare function buildPreset(hue: number, chroma?: number): DataTableModedTheme;
+/**
+ * Convert a tokens map into a CSS declaration string (no selector, no braces),
+ * e.g. `--background:oklch(1 0 0);--foreground:oklch(0.145 0 0)`.
+ *
+ * Used internally to inject scoped <style> blocks for moded themes.
+ */
+declare function tokensToCssBlock(tokens?: DataTableTokens): string;
+/**
+ * Ready-to-use theme presets.
+ *
+ * Each preset is a full light + dark token set — passing one to
+ * `<DataTable theme={…}>` repaints the entire table and auto-flips on OS
+ * dark mode (or when a `.dark` ancestor is added).
+ *
+ * Custom hues:
+ *
+ * ```ts
+ * import { buildPreset } from "@dynostack/react-grid"
+ * const tealPreset = buildPreset(180)
+ * ```
+ */
 declare const themePresets: {
+    neutral: DataTableModedTheme;
     light: {
-        background: string;
-        foreground: string;
-        card: string;
-        cardForeground: string;
-        primary: string;
-        primaryForeground: string;
-        border: string;
+        light: DataTableTokens | undefined;
     };
     dark: {
-        background: string;
-        foreground: string;
-        card: string;
-        cardForeground: string;
-        primary: string;
-        primaryForeground: string;
-        border: string;
-    };
-    emerald: {
-        primary: string;
-        primaryForeground: string;
-        accent: string;
-        accentForeground: string;
-        ring: string;
-    };
-    violet: {
-        primary: string;
-        primaryForeground: string;
-        accent: string;
-        accentForeground: string;
-        ring: string;
-    };
-    amber: {
-        primary: string;
-        primaryForeground: string;
-        accent: string;
-        accentForeground: string;
-        ring: string;
+        light: DataTableTokens | undefined;
     };
+    violet: DataTableModedTheme;
+    emerald: DataTableModedTheme;
+    amber: DataTableModedTheme;
+    rose: DataTableModedTheme;
+    sky: DataTableModedTheme;
+    slate: DataTableModedTheme;
 };
 type DataTableThemeName = keyof typeof themePresets;
+/**
+ * Bundled fallback tokens used when `<DataTable isolate>` is set. These let
+ * the grid render correctly even when the consumer hasn't imported
+ * `styles.css` or provided any theme of their own.
+ */
+declare const ISOLATE_LIGHT_TOKENS: DataTableTokens;
+declare const ISOLATE_DARK_TOKENS: DataTableTokens;
 
 type CellEditorType = "text" | "number" | "currency" | "date" | "select" | "switch" | "checkbox";
 type FilterType = "text" | "number" | "select" | "multi-select" | "boolean" | "date";
@@ -253,12 +292,35 @@ type DataTableProps<TData extends {
     labels?: DataTableLabels;
     /** Row + cell padding density. Defaults to "default". */
     density?: DataTableDensity;
-    /** CSS-variable overrides (shadcn-compatible) scoped to this instance. */
+    /**
+     * CSS-variable overrides (shadcn-compatible) scoped to this instance.
+     *
+     * Two accepted shapes:
+     *
+     *   theme={{ primary: "...", accent: "..." }}              // flat tokens
+     *   theme={{ light: { ... }, dark: { ... } }}              // moded — auto-flips
+     *
+     * Moded themes apply `light` always and swap to `dark` inside
+     * `@media (prefers-color-scheme: dark)` *and* inside any `.dark` ancestor.
+     *
+     * Use `themePresets.violet` (or any preset) for a ready-made moded theme.
+     */
     theme?: DataTableTheme;
+    /**
+     * When `true`, the grid does NOT inherit CSS variables from the app's
+     * `:root` (shadcn, custom theme, etc.). Instead it renders with the
+     * package's bundled defaults (or whatever you pass via `theme`).
+     *
+     * Useful when embedding the grid inside a heavily-themed shell where you
+     * want the table to keep its own look regardless of surrounding context.
+     *
+     * Defaults to `false` (inherit app theme).
+     */
+    isolate?: boolean;
 };
 declare function DataTable<TData extends {
     id: string | number;
-}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 type Props$2<TData, TValue> = {
     column: Column<TData, TValue>;
@@ -350,4 +412,4 @@ declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TVal
 declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
 declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
 
-export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, DataTableToolbar, type DateOp, EditableCell, type FilterType, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };
+export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useId, useContext } from 'react';
 import { useReactTable, getPaginationRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { Trash2Icon, XIcon, SearchIcon, RefreshCwIcon, ColumnsIcon, DownloadIcon, FileTextIcon, FileSpreadsheetIcon, PlusIcon, ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon, ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, PinOffIcon, PinIcon, EyeOffIcon, FilterIcon, CheckIcon, MoreHorizontalIcon, ChevronDownIcon, GripVerticalIcon, Loader2Icon, MinusIcon, CopyIcon, PencilIcon, EyeIcon, ChevronUpIcon } from 'lucide-react';
 import { clsx } from 'clsx';
@@ -2024,57 +2024,148 @@ var TOKEN_TO_VAR = {
   radius: "--radius",
   fontFamily: "--font-family"
 };
-function themeToStyle(theme) {
-  if (!theme) return {};
+function isModed(theme) {
+  if (!theme) return false;
+  return "light" in theme || "dark" in theme;
+}
+function tokensToStyle(tokens) {
+  if (!tokens) return {};
   const out = {};
-  for (const [k, v] of Object.entries(theme)) {
+  for (const [k, v] of Object.entries(tokens)) {
     if (v == null) continue;
     const cssVar = TOKEN_TO_VAR[k];
     if (cssVar) out[cssVar] = v;
   }
   return out;
 }
-var themePresets = {
+function themeToStyle(theme) {
+  if (!theme) return {};
+  if (isModed(theme)) return tokensToStyle(theme.light);
+  return tokensToStyle(theme);
+}
+function splitTheme(theme) {
+  if (!theme) return { light: void 0, dark: void 0 };
+  if (isModed(theme)) return { light: theme.light, dark: theme.dark };
+  return { light: theme, dark: void 0 };
+}
+function buildPreset(hue, chroma = 0.03) {
+  const c = chroma;
+  return {
+    light: {
+      background: `oklch(0.99 ${c * 0.2} ${hue})`,
+      foreground: `oklch(0.18 ${c * 1.2} ${hue})`,
+      card: `oklch(1 0 0)`,
+      cardForeground: `oklch(0.18 ${c * 1.2} ${hue})`,
+      popover: `oklch(1 0 0)`,
+      popoverForeground: `oklch(0.18 ${c * 1.2} ${hue})`,
+      primary: `oklch(0.55 0.2 ${hue})`,
+      primaryForeground: `oklch(0.99 0 0)`,
+      secondary: `oklch(0.96 ${c} ${hue})`,
+      secondaryForeground: `oklch(0.25 ${c * 2} ${hue})`,
+      muted: `oklch(0.96 ${c} ${hue})`,
+      mutedForeground: `oklch(0.5 ${c * 1.5} ${hue})`,
+      accent: `oklch(0.94 ${c * 1.2} ${hue})`,
+      accentForeground: `oklch(0.3 ${c * 3} ${hue})`,
+      destructive: `oklch(0.577 0.245 27.325)`,
+      destructiveForeground: `oklch(0.985 0 0)`,
+      border: `oklch(0.9 ${c * 0.8} ${hue})`,
+      input: `oklch(0.9 ${c * 0.8} ${hue})`,
+      ring: `oklch(0.55 0.2 ${hue} / 0.5)`,
+      radius: "0.625rem"
+    },
+    dark: {
+      background: `oklch(0.16 ${c * 0.6} ${hue})`,
+      foreground: `oklch(0.97 ${c * 0.2} ${hue})`,
+      card: `oklch(0.21 ${c * 0.8} ${hue})`,
+      cardForeground: `oklch(0.97 ${c * 0.2} ${hue})`,
+      popover: `oklch(0.21 ${c * 0.8} ${hue})`,
+      popoverForeground: `oklch(0.97 ${c * 0.2} ${hue})`,
+      primary: `oklch(0.7 0.18 ${hue})`,
+      primaryForeground: `oklch(0.16 ${c * 0.6} ${hue})`,
+      secondary: `oklch(0.27 ${c * 0.8} ${hue})`,
+      secondaryForeground: `oklch(0.97 ${c * 0.2} ${hue})`,
+      muted: `oklch(0.27 ${c * 0.8} ${hue})`,
+      mutedForeground: `oklch(0.7 ${c * 0.5} ${hue})`,
+      accent: `oklch(0.3 ${c * 1.5} ${hue})`,
+      accentForeground: `oklch(0.97 ${c * 0.2} ${hue})`,
+      destructive: `oklch(0.577 0.245 27.325 / 0.6)`,
+      destructiveForeground: `oklch(0.985 0 0)`,
+      border: `oklch(0.27 ${c * 0.8} ${hue})`,
+      input: `oklch(0.27 ${c * 0.8} ${hue})`,
+      ring: `oklch(0.7 0.18 ${hue} / 0.5)`,
+      radius: "0.625rem"
+    }
+  };
+}
+function tokensToCssBlock(tokens) {
+  if (!tokens) return "";
+  const parts = [];
+  for (const [k, v] of Object.entries(tokens)) {
+    if (v == null) continue;
+    const cssVar = TOKEN_TO_VAR[k];
+    if (cssVar) parts.push(`${cssVar}:${v}`);
+  }
+  return parts.join(";");
+}
+var neutral = {
   light: {
     background: "oklch(1 0 0)",
     foreground: "oklch(0.145 0 0)",
     card: "oklch(1 0 0)",
     cardForeground: "oklch(0.145 0 0)",
+    popover: "oklch(1 0 0)",
+    popoverForeground: "oklch(0.145 0 0)",
     primary: "oklch(0.205 0 0)",
     primaryForeground: "oklch(0.985 0 0)",
-    border: "oklch(0.922 0 0)"
+    secondary: "oklch(0.97 0 0)",
+    secondaryForeground: "oklch(0.205 0 0)",
+    muted: "oklch(0.97 0 0)",
+    mutedForeground: "oklch(0.556 0 0)",
+    accent: "oklch(0.97 0 0)",
+    accentForeground: "oklch(0.205 0 0)",
+    destructive: "oklch(0.577 0.245 27.325)",
+    destructiveForeground: "oklch(0.985 0 0)",
+    border: "oklch(0.922 0 0)",
+    input: "oklch(0.922 0 0)",
+    ring: "oklch(0.708 0 0)",
+    radius: "0.625rem"
   },
   dark: {
     background: "oklch(0.145 0 0)",
     foreground: "oklch(0.985 0 0)",
     card: "oklch(0.205 0 0)",
     cardForeground: "oklch(0.985 0 0)",
+    popover: "oklch(0.205 0 0)",
+    popoverForeground: "oklch(0.985 0 0)",
     primary: "oklch(0.985 0 0)",
     primaryForeground: "oklch(0.205 0 0)",
-    border: "oklch(0.269 0 0)"
-  },
-  emerald: {
-    primary: "oklch(0.66 0.15 162)",
-    primaryForeground: "oklch(1 0 0)",
-    accent: "oklch(0.94 0.04 162)",
-    accentForeground: "oklch(0.3 0.1 162)",
-    ring: "oklch(0.66 0.15 162 / 0.5)"
-  },
-  violet: {
-    primary: "oklch(0.55 0.22 285)",
-    primaryForeground: "oklch(1 0 0)",
-    accent: "oklch(0.94 0.04 285)",
-    accentForeground: "oklch(0.3 0.12 285)",
-    ring: "oklch(0.55 0.22 285 / 0.5)"
-  },
-  amber: {
-    primary: "oklch(0.7 0.18 65)",
-    primaryForeground: "oklch(0.2 0 0)",
-    accent: "oklch(0.94 0.05 65)",
-    accentForeground: "oklch(0.3 0.12 65)",
-    ring: "oklch(0.7 0.18 65 / 0.5)"
+    secondary: "oklch(0.269 0 0)",
+    secondaryForeground: "oklch(0.985 0 0)",
+    muted: "oklch(0.269 0 0)",
+    mutedForeground: "oklch(0.708 0 0)",
+    accent: "oklch(0.269 0 0)",
+    accentForeground: "oklch(0.985 0 0)",
+    destructive: "oklch(0.577 0.245 27.325 / 0.6)",
+    destructiveForeground: "oklch(0.985 0 0)",
+    border: "oklch(0.269 0 0)",
+    input: "oklch(0.269 0 0)",
+    ring: "oklch(0.439 0 0)",
+    radius: "0.625rem"
   }
 };
+var themePresets = {
+  neutral,
+  light: { light: neutral.light },
+  dark: { light: neutral.dark },
+  violet: buildPreset(285),
+  emerald: buildPreset(162),
+  amber: buildPreset(65),
+  rose: buildPreset(15),
+  sky: buildPreset(235),
+  slate: buildPreset(240, 0.015)
+};
+var ISOLATE_LIGHT_TOKENS = neutral.light;
+var ISOLATE_DARK_TOKENS = neutral.dark;
 function getPinningStyles(column) {
   const isPinned = column.getIsPinned();
   if (!isPinned) return {};
@@ -2239,7 +2330,8 @@ function DataTable({
   features,
   labels: labelsProp,
   density = "default",
-  theme
+  theme,
+  isolate = false
 }) {
   const labels = { ...DEFAULT_LABELS, ...labelsProp };
   const f = {
@@ -2255,7 +2347,20 @@ function DataTable({
     reordering: features?.reordering ?? true,
     pinning: features?.pinning ?? true
   };
-  const themeStyle = themeToStyle(theme);
+  const rawInstanceId = useId();
+  const instanceId = useMemo(
+    () => `dyno-grid-${rawInstanceId.replace(/[^a-zA-Z0-9]/g, "")}`,
+    [rawInstanceId]
+  );
+  const { lightStyle, darkCss } = useMemo(() => {
+    const { light, dark } = splitTheme(theme);
+    const lightTokens = isolate ? { ...ISOLATE_LIGHT_TOKENS, ...light ?? {} } : light;
+    const darkTokens = isolate ? { ...ISOLATE_DARK_TOKENS, ...dark ?? light ?? {} } : dark;
+    return {
+      lightStyle: tokensToStyle(lightTokens),
+      darkCss: darkTokens ? tokensToCssBlock(darkTokens) : null
+    };
+  }, [theme, isolate]);
   const [sorting, setSorting] = useState([]);
   const [columnFilters, setColumnFilters] = useState([]);
   const [internalGlobalFilter, setInternalGlobalFilter] = useState("");
@@ -2634,13 +2739,19 @@ function DataTable({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
+          "data-dyno-grid": instanceId,
           className: cn(
             "flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm",
             DENSITY_CLASS[density],
             className
           ),
-          style: themeStyle,
+          style: lightStyle,
           children: [
+            darkCss && /* @__PURE__ */ jsxs("style", { children: [
+              `@media (prefers-color-scheme: dark){[data-dyno-grid="${instanceId}"]{${darkCss}}}`,
+              `.dark [data-dyno-grid="${instanceId}"]{${darkCss}}`,
+              `[data-dyno-grid="${instanceId}"].dark{${darkCss}}`
+            ] }),
             /* @__PURE__ */ jsx(
               DataTableToolbar,
               {
@@ -2827,6 +2938,6 @@ function renderSkeleton(cols, rows) {
   return Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: Array.from({ length: cols }).map((__, c) => /* @__PURE__ */ jsx("td", { className: "px-2 py-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, c)) }, r));
 }
 
-export { ColumnFilterPanel, DataTable, DataTableColumnHeader, DataTablePagination, DataTableRowActions, DataTableToolbar, EditableCell, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };
+export { ColumnFilterPanel, DataTable, DataTableColumnHeader, DataTablePagination, DataTableRowActions, DataTableToolbar, EditableCell, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map