@vvedantb/ui 0.2.0 → 0.2.2

package/tokens/examples/compat-shadcn-rgb/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true
+  },
+  "include": ["*.ts", "*.tsx"]
+}

package/tokens/examples/compat-shadcn-rgb/vite.config.ts

@@ -0,0 +1,11 @@
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+// React, react-dom and the @vvedantb/ui peers resolve from packages/ui/node_modules
+// (this folder sits inside that package), so the fixture installs only the build tools.
+export default defineConfig({
+  plugins: [tailwindcss()],
+  esbuild: { jsx: "automatic" },
+  resolve: { dedupe: ["react", "react-dom"] },
+  server: { fs: { allow: ["../../.."] } },
+});

package/tokens/examples/toaster/Fixture.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "../../../src/ui/button";
+import { SonnerToaster } from "../../../src/ui/sonner";
+
+function initialDark(): boolean {
+  return new URLSearchParams(window.location.search).get("theme") === "dark";
+}
+
+function fire() {
+  toast.success("Changes saved", {
+    description: "Your settings were updated and will apply to new sessions.",
+    duration: Infinity,
+  });
+}
+
+export function Fixture() {
+  const [dark, setDark] = useState(initialDark);
+
+  // Sonner portals toasts onto `document.body`, so `.dark` must live on `<html>`
+  // (not an inner wrapper) for token / Tailwind dark styles to reach them.
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", dark);
+    return () => {
+      document.documentElement.classList.remove("dark");
+    };
+  }, [dark]);
+
+  // Fire one sample toast on load so a screenshot captures it.
+  useEffect(() => {
+    const id = window.setTimeout(fire, 150);
+    return () => window.clearTimeout(id);
+  }, []);
+
+  return (
+    <>
+      <main className="min-h-screen bg-background p-8 text-foreground">
+        <div className="flex gap-3">
+          <Button onClick={() => setDark((d) => !d)}>Toggle theme</Button>
+          <Button onClick={fire}>Show toast</Button>
+        </div>
+      </main>
+      <SonnerToaster
+        theme={dark ? "dark" : "light"}
+        toastRadius="surface"
+        toastIcons="filled24"
+        closeButtonStyle="hoverChip"
+        sonnerVars
+        descriptionMuted
+      />
+    </>
+  );
+}

package/tokens/examples/toaster/README.md

@@ -0,0 +1,18 @@
+# toaster fixture
+
+Renders `SonnerToaster` with every opt-in prop on (`toastRadius="surface"`, `toastIcons="filled24"`, `closeButtonStyle="hoverChip"`, `sonnerVars`, `descriptionMuted`). It fires one sample toast with a title and a description on load. The toast stays open. Use "Show toast" to fire another.
+
+| Page | Stylesheet |
+| --- | --- |
+| `/tokens.html` | `tokens.css` plus `utilities.css` (`styles-tokens.css`) |
+| `/compat.html` | `compat-shadcn-rgb.css` plus `utilities.css`, with sample `R G B` variables (`styles-compat.css`) |
+
+Each stylesheet declares `glass-panel-strong` (tokens page only) and `smooth-shadow-ring-md`. The app owns those toast classes. The compat page also defines `--success` and `--warning` and maps them to `--color-success` and `--color-warning`.
+
+Run it from this folder (it is not a workspace member, and React resolves from the parent `packages/ui` install):
+
+```sh
+pnpm install --ignore-workspace && pnpm dev
+```
+
+Open the printed URL plus `/tokens.html` or `/compat.html`. Add `?theme=dark` for dark mode, or use "Toggle theme". Hover the toast to see the close chip. `Fixture.tsx` is not part of the package typecheck.

package/tokens/examples/toaster/compat.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>toaster: compat-shadcn-rgb.css</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main-compat.tsx"></script>
+  </body>
+</html>

package/tokens/examples/toaster/main-compat.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import { Fixture } from "./Fixture";
+import "./styles-compat.css";
+
+createRoot(document.getElementById("root")!).render(<Fixture />);

package/tokens/examples/toaster/main-tokens.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import { Fixture } from "./Fixture";
+import "./styles-tokens.css";
+
+createRoot(document.getElementById("root")!).render(<Fixture />);

package/tokens/examples/toaster/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "toaster-fixture",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "4.3.3",
+    "tailwindcss": "4.3.3",
+    "vite": "^7.0.0"
+  }
+}

package/tokens/examples/toaster/styles-compat.css

@@ -0,0 +1,82 @@
+@import "tailwindcss";
+@import "../../src/css/compat-shadcn-rgb.css";
+@import "../../src/css/utilities.css";
+@source "../../../src/**/*.{ts,tsx}";
+@source "./*.tsx";
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Sample shadcn-style RGB channel variables owned by the app. */
+:root {
+  --background: 244 245 246;
+  --foreground: 24 24 27;
+  --card: 255 255 255;
+  --card-foreground: 24 24 27;
+  --popover: 255 255 255;
+  --popover-foreground: 24 24 27;
+  --primary: 37 99 235;
+  --primary-foreground: 255 255 255;
+  --secondary: 235 236 238;
+  --secondary-foreground: 24 24 27;
+  --muted: 235 236 238;
+  --muted-foreground: 100 100 110;
+  --accent: 235 236 238;
+  --accent-foreground: 24 24 27;
+  --destructive: 220 38 38;
+  --destructive-foreground: 255 255 255;
+  --border: 224 225 228;
+  --input: 224 225 228;
+  --ring: 37 99 235;
+  --success: 22 163 74;
+  --warning: 217 119 6;
+  --radius: 0.75rem;
+}
+
+.dark {
+  --background: 15 15 17;
+  --foreground: 244 244 245;
+  --card: 28 28 31;
+  --card-foreground: 244 244 245;
+  --popover: 28 28 31;
+  --popover-foreground: 244 244 245;
+  --primary: 96 165 250;
+  --primary-foreground: 15 15 17;
+  --secondary: 39 39 43;
+  --secondary-foreground: 244 244 245;
+  --muted: 39 39 43;
+  --muted-foreground: 161 161 170;
+  --accent: 39 39 43;
+  --accent-foreground: 244 244 245;
+  --destructive: 248 113 113;
+  --destructive-foreground: 15 15 17;
+  --border: 46 46 51;
+  --input: 46 46 51;
+  --ring: 96 165 250;
+  --success: 74 222 128;
+  --warning: 251 191 36;
+}
+
+@theme inline {
+  --color-background: rgb(var(--background));
+  --color-foreground: rgb(var(--foreground));
+  --color-border: rgb(var(--border));
+  --color-primary: rgb(var(--primary));
+  --color-primary-foreground: rgb(var(--primary-foreground));
+  --color-muted-foreground: rgb(var(--muted-foreground));
+  --color-destructive: rgb(var(--destructive));
+  --color-ring: rgb(var(--ring));
+  --color-success: rgb(var(--success));
+  --color-warning: rgb(var(--warning));
+}
+
+/* Toast class the app owns (not part of the compat file). */
+@utility smooth-shadow-ring-md {
+  box-shadow:
+    0 0 0 1px rgb(var(--border) / 0.6),
+    0 4px 12px rgb(0 0 0 / 0.08);
+}
+
+body {
+  background: rgb(var(--background));
+  color: rgb(var(--foreground));
+  font-family: system-ui, sans-serif;
+}

package/tokens/examples/toaster/styles-tokens.css

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+@import "../../src/tokens.css";
+@import "../../src/css/utilities.css";
+@source "../../../src/**/*.{ts,tsx}";
+@source "./*.tsx";
+
+/* Toast classes the app owns (not part of tokens.css). */
+@utility glass-panel-strong {
+  background-color: color-mix(in oklch, var(--color-card) 95%, transparent);
+  backdrop-filter: blur(12px);
+}
+@utility smooth-shadow-ring-md {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--color-border) 60%, transparent),
+    0 4px 12px rgb(0 0 0 / 0.08);
+}

package/tokens/examples/toaster/tokens.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>toaster: tokens.css</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main-tokens.tsx"></script>
+  </body>
+</html>

package/tokens/examples/toaster/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true
+  },
+  "include": ["*.ts", "*.tsx"]
+}

package/tokens/examples/toaster/vite.config.ts

@@ -0,0 +1,12 @@
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+// React, react-dom and the @vvedantb/ui peers resolve from packages/ui/node_modules
+// (this folder sits inside that package), so the fixture installs only the build tools.
+export default defineConfig({
+  plugins: [tailwindcss()],
+  esbuild: { jsx: "automatic" },
+  resolve: { dedupe: ["react", "react-dom"] },
+  build: { rollupOptions: { input: ["tokens.html", "compat.html"] } },
+  server: { fs: { allow: ["../../.."] } },
+});

package/tokens/src/css/compat-shadcn-rgb.css

@@ -0,0 +1,82 @@
+/*
+ * @vvedantb/ui/tokens/css/compat-shadcn-rgb.css
+ *
+ * For apps that already define shadcn-style variables as space-separated RGB
+ * channels (for example `--background: 244 245 246`) and read them with
+ * `rgb(var(--x) / alpha)`.
+ *
+ * Import this file INSTEAD OF tokens.css. Never import both: they define the
+ * same `--color-*` names in different forms.
+ *
+ *   @import "tailwindcss";
+ *   @import "@vvedantb/ui/tokens/css/compat-shadcn-rgb.css";
+ *
+ * It defines only the names that @vvedantb/ui components use and that a
+ * shadcn theme lacks. Every value is a reference to an app variable; no
+ * colour is copied. It never defines --background, --foreground, --muted,
+ * --accent, --primary, --card, --popover, --border or --radius. The app owns
+ * those and may change them at runtime.
+ *
+ * The app must define: --background, --foreground, --card, --card-foreground,
+ * --popover, --popover-foreground, --primary, --primary-foreground,
+ * --secondary, --secondary-foreground, --muted, --muted-foreground,
+ * --accent, --accent-foreground, --destructive, --destructive-foreground,
+ * --border, --input, --ring and --radius (all colours as "R G B").
+ *
+ * `--color-card` and `--color-muted` are references to `--card` and `--muted`.
+ * `SonnerToaster sonnerVars` reads them, along with `--color-border` and
+ * `--color-foreground`. An app that already maps those names keeps its own
+ * mapping if it declares them after this import.
+ *
+ * Alpha values follow common shadcn-RGB classes (ring/35, ring/50,
+ * destructive/20, placeholder /90, scrollbar /35).
+ */
+
+@theme inline {
+  --color-card: rgb(var(--card));
+  --color-muted: rgb(var(--muted));
+  --color-default: rgb(var(--secondary));
+  --color-default-foreground: rgb(var(--secondary-foreground));
+  --color-surface: rgb(var(--card));
+  --color-surface-foreground: rgb(var(--card-foreground));
+  --color-surface-card: rgb(var(--card));
+  --color-surface-secondary: rgb(var(--muted));
+  --color-surface-secondary-foreground: rgb(var(--foreground));
+  --color-surface-tertiary: rgb(var(--secondary));
+  --color-surface-tertiary-foreground: rgb(var(--secondary-foreground));
+  --color-overlay: rgb(var(--popover));
+  --color-overlay-foreground: rgb(var(--popover-foreground));
+  --color-field-background: rgb(var(--card));
+  --color-field-foreground: rgb(var(--foreground));
+  --color-field-border: rgb(var(--input));
+  --color-field-placeholder: rgb(var(--muted-foreground) / 0.9);
+  --color-focus: rgb(var(--ring));
+  --color-focus-ring: rgb(var(--ring) / 0.35);
+  --color-focus-border: rgb(var(--ring) / 0.5);
+  --color-danger: rgb(var(--destructive));
+  --color-danger-foreground: rgb(var(--destructive-foreground));
+  --color-danger-ring: rgb(var(--destructive) / 0.2);
+  --color-danger-border: rgb(var(--destructive) / 0.55);
+  --color-separator: rgb(var(--border));
+  --color-segment: rgb(var(--card));
+  --color-segment-foreground: rgb(var(--foreground));
+  --color-backdrop: rgb(0 0 0 / 0.5);
+  --color-scrollbar: rgb(var(--muted-foreground) / 0.35);
+  --radius-field: min(calc(var(--radius) + 0.25rem), 1.25rem);
+}
+
+:root {
+  --scrollbar: rgb(var(--muted-foreground) / 0.35);
+  --field-radius: min(calc(var(--radius) + 0.25rem), 1.25rem);
+}
+
+/*
+ * Fallback fill for toasts, dialogs and hover cards (`glass-panel-strong`).
+ * Equivalent to `bg-card/95 backdrop-blur-md`. An app may override it by
+ * declaring its own `@utility glass-panel-strong` after this import.
+ */
+@utility glass-panel-strong {
+  background-color: rgb(var(--card) / 0.95);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}

package/tokens/src/css/utilities.css

@@ -32,3 +32,8 @@
     }
   }
 }
+
+/* Surface radius: follows the theme `--radius`, kept between 0.75rem and 1rem. */
+@utility rounded-surface {
+  border-radius: clamp(0.75rem, var(--radius), 1rem);
+}

package/tokens/src/tailwind-preset.mjs

@@ -88,6 +88,12 @@ export function tokensPreset({ color = cssVar } = {}) {
             DEFAULT: v("default"),
             foreground: v("default-foreground"),
           },
+          muted: { DEFAULT: v("muted"), foreground: v("muted") },
+          accent: {
+            DEFAULT: v("accent"),
+            foreground: v("accent-foreground"),
+          },
+          ring: v("focus"),
           input: v("border"),
           popover: {
             DEFAULT: v("overlay"),

package/tokens/src/tokens.css

@@ -59,6 +59,21 @@
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
 
+  /* shadcn-style aliases onto the same tokens. */
+  --color-primary: var(--accent);
+  --color-primary-foreground: var(--accent-foreground);
+  --color-muted-foreground: var(--muted);
+  --color-secondary: var(--default);
+  --color-secondary-foreground: var(--default-foreground);
+  --color-destructive: var(--danger);
+  --color-destructive-foreground: var(--danger-foreground);
+  --color-card: var(--surface-card);
+  --color-card-foreground: var(--surface-foreground);
+  --color-popover: var(--overlay);
+  --color-popover-foreground: var(--overlay-foreground);
+  --color-input: var(--border);
+  --color-ring: var(--focus);
+
   --radius-lg: var(--radius);
   --radius-field: var(--field-radius);
   --radius-md: calc(var(--radius) - 2px);