@dynostack/react-grid 0.3.0 → 0.3.1

package/README.md

@@ -77,7 +77,28 @@ yarn add @dynostack/react-grid
 
 ## Tailwind setup
 
-The component ships Tailwind class names verbatim. Tell your Tailwind config to scan the package files:
+The component ships Tailwind class names verbatim, so your Tailwind build needs to know two things:
+
+1. **Where to scan** for the class strings inside the bundle.
+2. **Which semantic color tokens** (`bg-popover`, `bg-card`, `text-foreground`, …) exist.
+
+The package's `styles.css` registers the tokens for you via Tailwind v4's `@theme inline`. You only need to wire scanning.
+
+### Tailwind v4 — zero config
+
+```css
+/* your global stylesheet (e.g. src/index.css) */
+@import "tailwindcss";
+@source "../node_modules/@dynostack/react-grid/dist";
+@import "@dynostack/react-grid/styles.css";
+@import "@dynostack/react-grid/page.css";   /* optional: extend tokens to <body> */
+```
+
+That's the whole setup. No `tailwind.config.js`, no `@theme` block to copy-paste, no shadcn install required. Overlay surfaces (popovers, dropdowns, sheets, the row-actions menu) all render correctly out of the box.
+
+### Tailwind v3
+
+v3 doesn't read CSS `@theme` directives, so the semantic-color mapping has to live in your `tailwind.config.js`. The shadcn install guide for v3 covers the exact `theme.extend.colors` block you need — copy that, plus add the package's `dist` to your `content` array:
 
 ```js
 // tailwind.config.{js,ts}
@@ -86,10 +107,28 @@ export default {
     "./src/**/*.{ts,tsx}",
     "./node_modules/@dynostack/react-grid/dist/**/*.{js,mjs,cjs}",
   ],
+  theme: {
+    extend: {
+      colors: {
+        // copy the shadcn v3 color mapping here
+        // (background, foreground, card, popover, primary, secondary,
+        //  muted, accent, destructive, border, input, ring)
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        // … etc
+      },
+    },
+  },
 }
 ```
 
-> Tailwind v4? Add the same path to your `@source` directive instead.
+Then import `styles.css` as usual:
+
+```ts
+import "@dynostack/react-grid/styles.css"
+```
+
+> Starting a new project? **Use Tailwind v4.** The v4 path above is meaningfully simpler — the package handles token registration for you.
 
 ## Theme tokens
 
@@ -104,15 +143,22 @@ The grid is built on **shadcn/ui CSS variables**. It auto-adjusts to whatever th
 | Custom theme with non-shadcn names | Pass [`theme` prop](#theming) | Per-instance override mapped to shadcn vars. |
 | Want one grid to ignore the app theme | Pass `isolate` | Grid uses bundled defaults regardless of `:root`. |
 
-**Why this just works.** The bundled `styles.css` declares its defaults inside the `dynostack-grid-defaults` cascade layer. Any unlayered consumer rule (which is where shadcn and most app CSS lives) automatically wins — import order doesn't matter, and you can't accidentally overwrite your app's theme by importing the grid's stylesheet.
+**Why this just works.** The bundled `styles.css`:
 
-### Minimal install
+1. **Registers Tailwind v4 utility tokens** via a top-level `@theme inline` block — so `bg-popover`, `text-foreground`, `border-border`, etc. resolve to your tokens without any consumer-side `@theme` block.
+2. **Declares variable values inside the `dynostack-grid-defaults` cascade layer** — any unlayered consumer rule (which is where shadcn and most app CSS lives) automatically wins, regardless of import order. You can't accidentally overwrite your app's theme by importing the grid's stylesheet.
 
-```ts
-// main.tsx — once per app
-import "@dynostack/react-grid/styles.css"
+### Minimal install (Tailwind v4)
+
+```css
+/* your global stylesheet */
+@import "tailwindcss";
+@source "../node_modules/@dynostack/react-grid/dist";
+@import "@dynostack/react-grid/styles.css";
 ```
 
+See the [Tailwind setup](#tailwind-setup) section for v3.
+
 ### Optional: extend the theme to the page
 
 By default the grid only styles itself, not the surrounding page. If you want `<body>` to use the same background/foreground as the grid:

package/dist/styles.css

@@ -15,10 +15,12 @@
  *   • shadcn-compatible: token names match shadcn/ui's CSS variables exactly,
  *     so if you already have shadcn (or any compatible theme) defined on
  *     :root, *that* takes precedence and the grid blends in automatically.
+ *   • Tailwind v4 utility classes (`bg-popover`, `text-foreground`, etc.)
+ *     resolve automatically — see the @theme block below.
  *
  * Cascade design
  * --------------
- * All declarations below live inside the `dynostack-grid-defaults` cascade
+ * All variable values live inside the `dynostack-grid-defaults` cascade
  * layer. Any *unlayered* declaration in the consumer app (which is where
  * shadcn and most app CSS lives) automatically wins, regardless of import
  * order. This makes import order non-fragile — you cannot accidentally
@@ -31,6 +33,54 @@
  *   <lowest priority>
  */
 
+/* ─── Tailwind v4 token registration ──────────────────────────────────
+ * Tells Tailwind v4 to generate `bg-popover`, `text-foreground`,
+ * `border-border`, `rounded-lg`, etc. utility classes that resolve to our
+ * CSS variables. Without this, the bundled `className` strings inside the
+ * grid have no corresponding CSS rules in zero-config v4 projects, and
+ * overlays render with transparent backgrounds.
+ *
+ * Must be declared at the top level — Tailwind v4 processes `@theme`
+ * before cascade layers apply, and `@theme` inside `@layer` is not valid.
+ *
+ * Safe across stacks:
+ *   • Tailwind v4   → consumed normally, utilities generated.
+ *   • Tailwind v3   → unknown at-rule, silently ignored. (v3 users still
+ *                     need to map semantic colors in tailwind.config.js;
+ *                     see README → Tailwind setup.)
+ *   • Non-Tailwind  → unknown at-rule, ignored.
+ *   • shadcn consumer with their own @theme block → declarations merge.
+ *     Since we use the same shadcn token names, the values are identical
+ *     and there is no conflict.
+ * ─────────────────────────────────────────────────────────────────────── */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+}
+
 @layer dynostack-grid-defaults {
   :root {
     color-scheme: light;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynostack/react-grid",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Enterprise-grade React DataGrid on TanStack + Radix + Tailwind, with operator-driven filters, inline editing, column pinning/resizing/reordering, CSV/Excel export, and full theme + i18n customization.",
   "license": "Apache-2.0",
   "author": "wanted-coder-vijay <drop.at.vijay@gmail.com>",
@@ -17,7 +17,7 @@
   },
   "type": "module",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css"  
   ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",