@dynostack/react-grid 0.4.0 → 0.5.0

package/dist/styles.css

@@ -1,228 +1,274 @@
-/*
- * Default theme tokens for @dynostack/react-grid.
- *
- * Drop-in behavior:
- *
- *   import "@dynostack/react-grid/styles.css"
- *
- * What you get with this single import:
- *
- *   • Clean light tokens by default.
- *   • Automatic dark-mode follow: switches when the OS reports
- *     `prefers-color-scheme: dark`.
- *   • Manual override: add the `.dark` (or `.light`) class to <html> or any
- *     ancestor and the table flips immediately, ignoring OS preference.
- *   • 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 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
- * overwrite the consumer's theme by importing this file in the "wrong" spot.
- *
- *   <highest priority>
- *     inline style on the grid root        (per-instance `theme` prop)
- *     consumer's unlayered :root rules     (shadcn, custom app theme)
- *     this file (@layer dynostack-grid-defaults)
- *   <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);
-}
-
-/* Tailwind v4 borders default to currentColor. Keep the default scoped to
- * grid surfaces; utility and consumer border colors still take precedence. */
-@layer base {
-  [data-dyno-grid], [data-dyno-grid] * {
-    border-color: var(--border);
-  }
-}
-
-@layer dynostack-grid-defaults {
-  :root {
-    color-scheme: light;
-
-    --radius: 0.625rem;
-
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-
-    --destructive: oklch(0.577 0.245 27.325);
-    --destructive-foreground: oklch(0.985 0 0);
-
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-  }
-
-  /* Auto-follow OS dark mode. */
-  @media (prefers-color-scheme: dark) {
-    :root {
-      color-scheme: dark;
-
-      --background: oklch(0.145 0 0);
-      --foreground: oklch(0.985 0 0);
-
-      --card: oklch(0.205 0 0);
-      --card-foreground: oklch(0.985 0 0);
-
-      --popover: oklch(0.205 0 0);
-      --popover-foreground: oklch(0.985 0 0);
-
-      --primary: oklch(0.985 0 0);
-      --primary-foreground: oklch(0.205 0 0);
-
-      --secondary: oklch(0.269 0 0);
-      --secondary-foreground: oklch(0.985 0 0);
-
-      --muted: oklch(0.269 0 0);
-      --muted-foreground: oklch(0.708 0 0);
-
-      --accent: oklch(0.269 0 0);
-      --accent-foreground: oklch(0.985 0 0);
-
-      --destructive: oklch(0.577 0.245 27.325 / 0.6);
-      --destructive-foreground: oklch(0.985 0 0);
-
-      --border: oklch(0.269 0 0);
-      --input: oklch(0.269 0 0);
-      --ring: oklch(0.439 0 0);
-    }
-  }
-
-  /* Manual override — wins over the media query above. */
-  :root.light,
-  .light {
-    color-scheme: light;
-
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-
-    --destructive: oklch(0.577 0.245 27.325);
-    --destructive-foreground: oklch(0.985 0 0);
-
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-  }
-
-  :root.dark,
-  .dark {
-    color-scheme: dark;
-
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-
-    --primary: oklch(0.985 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-
-    --destructive: oklch(0.577 0.245 27.325 / 0.6);
-    --destructive-foreground: oklch(0.985 0 0);
-
-    --border: oklch(0.269 0 0);
-    --input: oklch(0.269 0 0);
-    --ring: oklch(0.439 0 0);
-  }
-}
+/*
+ * Default theme tokens for @dynostack/react-grid.
+ *
+ * Drop-in behavior:
+ *
+ *   import "@dynostack/react-grid/styles.css"
+ *
+ * What you get with this single import:
+ *
+ *   • Clean light tokens by default.
+ *   • Automatic dark-mode follow: switches when the OS reports
+ *     `prefers-color-scheme: dark`.
+ *   • Manual override: add the `.dark` (or `.light`) class to <html> or any
+ *     ancestor and the table flips immediately, ignoring OS preference.
+ *   • 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 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
+ * overwrite the consumer's theme by importing this file in the "wrong" spot.
+ *
+ *   <highest priority>
+ *     inline style on the grid root        (per-instance `theme` prop)
+ *     consumer's unlayered :root rules     (shadcn, custom app theme)
+ *     this file (@layer dynostack-grid-defaults)
+ *   <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);
+}
+
+@custom-variant dark (&:where(.dark, .dark *):not(:where([data-dyno-grid].light, [data-dyno-grid].light *)));
+
+/* Tailwind v4 borders default to currentColor. Keep the default scoped to
+ * grid surfaces; utility and consumer border colors still take precedence. */
+@layer base {
+  [data-dyno-grid],
+  [data-dyno-grid] * {
+    border-color: var(--border);
+  }
+}
+
+/* Polished surfaces, scoped to the grid so host applications keep their UI. */
+@layer components {
+  [data-dyno-grid] {
+    box-shadow: none;
+    font-family: var(--font-family, inherit);
+    font-variant-numeric: tabular-nums;
+  }
+  [data-dyno-grid] thead {
+    background: color-mix(in srgb, var(--muted) 45%, var(--card));
+  }
+  [data-dyno-grid] th {
+    font-weight: 500;
+    color: var(--muted-foreground);
+  }
+  [data-dyno-grid] tbody tr {
+    transition: background-color 150ms ease;
+  }
+  [data-dyno-grid] tbody tr[data-state="selected"] {
+    background: color-mix(in srgb, var(--primary) 9%, var(--card));
+  }
+  [data-dyno-grid] [data-slot="button"] {
+    box-shadow: none;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease;
+  }
+  [data-dyno-grid] [data-slot="badge"] {
+    border-radius: 4px;
+    font-weight: 450;
+  }
+  [data-dyno-grid] input {
+    box-shadow: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-dyno-grid] *,
+    [data-dyno-grid] *::before,
+    [data-dyno-grid] *::after {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+}
+
+@layer dynostack-grid-defaults {
+  :root {
+    color-scheme: light;
+
+    --radius: 0.375rem;
+
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
+
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+  }
+
+  /* Auto-follow OS dark mode. */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      color-scheme: dark;
+
+      --background: oklch(0.145 0 0);
+      --foreground: oklch(0.985 0 0);
+
+      --card: oklch(0.205 0 0);
+      --card-foreground: oklch(0.985 0 0);
+
+      --popover: oklch(0.205 0 0);
+      --popover-foreground: oklch(0.985 0 0);
+
+      --primary: oklch(0.985 0 0);
+      --primary-foreground: oklch(0.205 0 0);
+
+      --secondary: oklch(0.269 0 0);
+      --secondary-foreground: oklch(0.985 0 0);
+
+      --muted: oklch(0.269 0 0);
+      --muted-foreground: oklch(0.708 0 0);
+
+      --accent: oklch(0.269 0 0);
+      --accent-foreground: oklch(0.985 0 0);
+
+      --destructive: oklch(0.577 0.245 27.325 / 0.6);
+      --destructive-foreground: oklch(0.985 0 0);
+
+      --border: oklch(0.269 0 0);
+      --input: oklch(0.269 0 0);
+      --ring: oklch(0.439 0 0);
+    }
+  }
+
+  /* Manual override — wins over the media query above. */
+  :root.light,
+  .light {
+    color-scheme: light;
+
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
+
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+  }
+
+  :root.dark,
+  .dark {
+    color-scheme: dark;
+
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+
+    --primary: oklch(0.985 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+
+    --destructive: oklch(0.577 0.245 27.325 / 0.6);
+    --destructive-foreground: oklch(0.985 0 0);
+
+    --border: oklch(0.269 0 0);
+    --input: oklch(0.269 0 0);
+    --ring: oklch(0.439 0 0);
+  }
+}