@vllnt/ui 0.2.1 → 0.3.0-canary.a42d8f4

package/dist/index.js

@@ -3,13 +3,33 @@ import {
   getOtherLanguage,
   LANGUAGE_NAMES
 } from "./lib/types";
+import {
+  DEFAULT_THEME_PRESET,
+  isThemePresetName,
+  THEME_PRESET_STORAGE_KEY,
+  THEME_PRESETS
+} from "./lib/theme-presets";
 import { useDebounce } from "./lib/use-debounce";
 import { useHorizontalScroll } from "./lib/use-horizontal-scroll";
+import { useMounted } from "./lib/use-mounted";
+import {
+  setCustomTheme,
+  setThemePreset,
+  useThemePreset
+} from "./lib/use-theme-preset";
 import { cn } from "./lib/utils";
 export {
+  DEFAULT_THEME_PRESET,
   LANGUAGE_NAMES,
+  THEME_PRESETS,
+  THEME_PRESET_STORAGE_KEY,
   cn,
   getOtherLanguage,
+  isThemePresetName,
+  setCustomTheme,
+  setThemePreset,
   useDebounce,
-  useHorizontalScroll
+  useHorizontalScroll,
+  useMounted,
+  useThemePreset
 };

package/dist/lib/theme-presets.js

@@ -0,0 +1,32 @@
+const THEME_PRESET_STORAGE_KEY = "vllnt-theme-preset";
+const CUSTOM_THEME_NAME = "custom";
+const THEME_CUSTOM_CSS_STORAGE_KEY = "vllnt-theme-custom-css";
+const THEME_CUSTOM_STYLE_ID = "vllnt-theme-custom-style";
+const THEME_PRESETS = [
+  { label: "Default", name: "default", swatch: "oklch(0.2044 0 0)" },
+  { label: "Matrix", name: "matrix", swatch: "oklch(0.8 0.24 150)" },
+  { label: "Dracula", name: "dracula", swatch: "oklch(0.72 0.16 300)" },
+  { label: "Synthwave", name: "synthwave", swatch: "oklch(0.68 0.26 350)" },
+  { label: "Tron", name: "tron", swatch: "oklch(0.78 0.15 215)" },
+  { label: "Cyberpunk", name: "cyberpunk", swatch: "oklch(0.86 0.19 100)" },
+  { label: "Nord", name: "nord", swatch: "oklch(0.72 0.08 230)" },
+  { label: "Claude", name: "claude", swatch: "oklch(0.66 0.11 45)" },
+  { label: "ChatGPT", name: "chatgpt", swatch: "oklch(0.68 0.12 168)" },
+  { label: "Gemini", name: "gemini", swatch: "oklch(0.62 0.17 280)" },
+  { label: "Future Dusk", name: "dusk", swatch: "oklch(0.62 0.13 290)" },
+  { label: "Cyber Lime", name: "cyberlime", swatch: "oklch(0.88 0.22 128)" },
+  { label: "Aura", name: "aura", swatch: "oklch(0.66 0.26 350)" }
+];
+const DEFAULT_THEME_PRESET = "default";
+function isThemePresetName(value) {
+  return THEME_PRESETS.some((preset) => preset.name === value);
+}
+export {
+  CUSTOM_THEME_NAME,
+  DEFAULT_THEME_PRESET,
+  THEME_CUSTOM_CSS_STORAGE_KEY,
+  THEME_CUSTOM_STYLE_ID,
+  THEME_PRESETS,
+  THEME_PRESET_STORAGE_KEY,
+  isThemePresetName
+};

package/dist/lib/use-theme-preset.js

@@ -0,0 +1,94 @@
+"use client";
+import { useSyncExternalStore } from "react";
+import {
+  CUSTOM_THEME_NAME,
+  DEFAULT_THEME_PRESET,
+  isThemePresetName,
+  THEME_CUSTOM_CSS_STORAGE_KEY,
+  THEME_CUSTOM_STYLE_ID,
+  THEME_PRESET_STORAGE_KEY,
+  THEME_PRESETS
+} from "./theme-presets";
+function safeIdent(value) {
+  return value.replaceAll(/[^\w-]/g, "");
+}
+function safeValue(value) {
+  return value.replaceAll(/[^\s\w%.-]/g, "");
+}
+function themeDeclarations(variables) {
+  return Object.entries(variables).map(([token, value]) => `--${safeIdent(token)}:${safeValue(value)}`).join(";");
+}
+function buildCustomCss(theme) {
+  const light = themeDeclarations(theme.light) + (theme.radius ? `;--radius:${safeValue(theme.radius)}` : "");
+  return `html[data-theme="${CUSTOM_THEME_NAME}"]{${light}}html[data-theme="${CUSTOM_THEME_NAME}"].dark{${themeDeclarations(theme.dark)}}`;
+}
+function clearCustomTheme() {
+  document.querySelector(`#${THEME_CUSTOM_STYLE_ID}`)?.remove();
+  try {
+    window.localStorage.removeItem(THEME_CUSTOM_CSS_STORAGE_KEY);
+  } catch {
+  }
+}
+const listeners = /* @__PURE__ */ new Set();
+function emit() {
+  listeners.forEach((listener) => {
+    listener();
+  });
+}
+function subscribe(onStoreChange) {
+  listeners.add(onStoreChange);
+  return () => {
+    listeners.delete(onStoreChange);
+  };
+}
+function getSnapshot() {
+  const value = document.documentElement.dataset.theme;
+  return value && isThemePresetName(value) ? value : DEFAULT_THEME_PRESET;
+}
+function getServerSnapshot() {
+  return DEFAULT_THEME_PRESET;
+}
+function setThemePreset(name) {
+  clearCustomTheme();
+  const root = document.documentElement;
+  if (name === DEFAULT_THEME_PRESET) {
+    delete root.dataset.theme;
+  } else {
+    root.dataset.theme = name;
+  }
+  try {
+    window.localStorage.setItem(THEME_PRESET_STORAGE_KEY, name);
+  } catch {
+  }
+  emit();
+}
+function setCustomTheme(theme) {
+  const css = buildCustomCss(theme);
+  const existing = document.querySelector(`#${THEME_CUSTOM_STYLE_ID}`);
+  const style = existing instanceof HTMLStyleElement ? existing : document.createElement("style");
+  style.id = THEME_CUSTOM_STYLE_ID;
+  style.textContent = css;
+  if (!existing) {
+    document.head.append(style);
+  }
+  document.documentElement.dataset.theme = CUSTOM_THEME_NAME;
+  try {
+    window.localStorage.setItem(THEME_PRESET_STORAGE_KEY, CUSTOM_THEME_NAME);
+    window.localStorage.setItem(THEME_CUSTOM_CSS_STORAGE_KEY, css);
+  } catch {
+  }
+  emit();
+}
+function useThemePreset() {
+  const preset = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
+  return { preset, presets: THEME_PRESETS, setPreset: setThemePreset };
+}
+export {
+  setCustomTheme,
+  setThemePreset,
+  useThemePreset
+};

package/dist/tailwind-preset.js

@@ -27,37 +27,37 @@ const preset = {
       },
       colors: {
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
+          DEFAULT: "oklch(var(--accent) / <alpha-value>)",
+          foreground: "oklch(var(--accent-foreground) / <alpha-value>)"
         },
-        background: "hsl(var(--background))",
-        border: "hsl(var(--border))",
+        background: "oklch(var(--background) / <alpha-value>)",
+        border: "oklch(var(--border) / <alpha-value>)",
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
+          DEFAULT: "oklch(var(--card) / <alpha-value>)",
+          foreground: "oklch(var(--card-foreground) / <alpha-value>)"
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
+          DEFAULT: "oklch(var(--destructive) / <alpha-value>)",
+          foreground: "oklch(var(--destructive-foreground) / <alpha-value>)"
         },
-        foreground: "hsl(var(--foreground))",
-        input: "hsl(var(--input))",
+        foreground: "oklch(var(--foreground) / <alpha-value>)",
+        input: "oklch(var(--input) / <alpha-value>)",
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
+          DEFAULT: "oklch(var(--muted) / <alpha-value>)",
+          foreground: "oklch(var(--muted-foreground) / <alpha-value>)"
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
+          DEFAULT: "oklch(var(--popover) / <alpha-value>)",
+          foreground: "oklch(var(--popover-foreground) / <alpha-value>)"
         },
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
+          DEFAULT: "oklch(var(--primary) / <alpha-value>)",
+          foreground: "oklch(var(--primary-foreground) / <alpha-value>)"
         },
-        ring: "hsl(var(--ring))",
+        ring: "oklch(var(--ring) / <alpha-value>)",
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
+          DEFAULT: "oklch(var(--secondary) / <alpha-value>)",
+          foreground: "oklch(var(--secondary-foreground) / <alpha-value>)"
         }
       },
       fontFamily: {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@vllnt/ui",
-  "version": "0.2.1",
-  "description": "React component library — 93 components built on Radix UI, Tailwind CSS, and CVA",
+  "version": "0.3.0-canary.a42d8f4",
+  "description": "React component library — 225 components built on Radix UI, Tailwind CSS, and CVA",
   "license": "MIT",
   "author": "vllnt",
-  "homepage": "https://github.com/vllnt/ui#readme",
+  "homepage": "https://ui.vllnt.ai",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vllnt/ui.git",
@@ -36,7 +36,8 @@
       "import": "./dist/tailwind-preset.js"
     },
     "./styles.css": "./styles.css",
-    "./themes/default.css": "./themes/default.css"
+    "./themes/default.css": "./themes/default.css",
+    "./themes/presets.css": "./themes/presets.css"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -68,6 +69,7 @@
     }
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@mdx-js/mdx": "^3.1.1",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -102,12 +104,15 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.468.0",
     "react-day-picker": "^9.13.0",
+    "react-hook-form": "^7.73.1",
     "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "react-resizable-panels": "^4.3.3",
     "react-syntax-highlighter": "^16.1.1",
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.5.5",
-    "vaul": "^1.1.2"
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
@@ -133,8 +138,7 @@
     "eslint": "^9.39.1",
     "jsdom": "^26.1.0",
     "playwright": "^1.57.0",
-    "postcss": "^8.5.6",
-    "remark-gfm": "^4.0.1",
+    "postcss": "^8.5.10",
     "storybook": "^10.2.17",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
@@ -163,6 +167,7 @@
     "storybook:generate-docs": "tsx scripts/generate-docs.ts",
     "storybook:verify": "tsx scripts/verify-stories.ts",
     "storybook:fix-stories": "tsx scripts/fix-stories.ts",
-    "check:stories": "tsx scripts/check-story-coverage.ts"
+    "check:stories": "tsx scripts/check-story-coverage.ts",
+    "check:use-client": "tsx scripts/check-use-client.ts"
   }
 }

package/styles.css

@@ -11,47 +11,47 @@
 /* Default theme variables */
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --background: 1 0 0;
+    --foreground: 0.1445 0 0;
+    --card: 1 0 0;
+    --card-foreground: 0.1445 0 0;
+    --popover: 1 0 0;
+    --popover-foreground: 0.1445 0 0;
+    --primary: 0.2044 0 0;
+    --primary-foreground: 0.9848 0 0;
+    --secondary: 0.9703 0 0;
+    --secondary-foreground: 0.2044 0 0;
+    --muted: 0.9703 0 0;
+    --muted-foreground: 0.5555 0 0;
+    --accent: 0.9703 0 0;
+    --accent-foreground: 0.2044 0 0;
+    --destructive: 0.6368 0.2078 25.326;
+    --destructive-foreground: 0.9848 0 0;
+    --border: 0.9219 0 0;
+    --input: 0.9219 0 0;
+    --ring: 0.1445 0 0;
     --radius: 0.5rem;
   }
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --background: 0 0 0;
+    --foreground: 0.9848 0 0;
+    --card: 0.1445 0 0;
+    --card-foreground: 0.9848 0 0;
+    --popover: 0.1445 0 0;
+    --popover-foreground: 0.9848 0 0;
+    --primary: 0.9848 0 0;
+    --primary-foreground: 0.2044 0 0;
+    --secondary: 0.2686 0 0;
+    --secondary-foreground: 0.9848 0 0;
+    --muted: 0.2686 0 0;
+    --muted-foreground: 0.7153 0 0;
+    --accent: 0.2686 0 0;
+    --accent-foreground: 0.9848 0 0;
+    --destructive: 0.3959 0.1331 25.721;
+    --destructive-foreground: 0.9848 0 0;
+    --border: 0.2686 0 0;
+    --input: 0.2686 0 0;
+    --ring: 0.8697 0 0;
   }
 }
 

package/themes/default.css

@@ -1,44 +1,44 @@
-/* Default theme variables */
+/* Default theme variables. Values are OKLCH channels ("L C H"), consumed as oklch(var(--x)). */
 :root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --ring: 0 0% 3.9%;
+  --background: 1 0 0;
+  --foreground: 0.1445 0 0;
+  --card: 1 0 0;
+  --card-foreground: 0.1445 0 0;
+  --popover: 1 0 0;
+  --popover-foreground: 0.1445 0 0;
+  --primary: 0.2044 0 0;
+  --primary-foreground: 0.9848 0 0;
+  --secondary: 0.9703 0 0;
+  --secondary-foreground: 0.2044 0 0;
+  --muted: 0.9703 0 0;
+  --muted-foreground: 0.5555 0 0;
+  --accent: 0.9703 0 0;
+  --accent-foreground: 0.2044 0 0;
+  --destructive: 0.6368 0.2078 25.326;
+  --destructive-foreground: 0.9848 0 0;
+  --border: 0.9219 0 0;
+  --input: 0.9219 0 0;
+  --ring: 0.1445 0 0;
   --radius: 0.5rem;
 }
 .dark {
-  --background: 0 0% 0%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 0 0% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
-  --ring: 0 0% 83.1%;
+  --background: 0 0 0;
+  --foreground: 0.9848 0 0;
+  --card: 0.1445 0 0;
+  --card-foreground: 0.9848 0 0;
+  --popover: 0.1445 0 0;
+  --popover-foreground: 0.9848 0 0;
+  --primary: 0.9848 0 0;
+  --primary-foreground: 0.2044 0 0;
+  --secondary: 0.2686 0 0;
+  --secondary-foreground: 0.9848 0 0;
+  --muted: 0.2686 0 0;
+  --muted-foreground: 0.7153 0 0;
+  --accent: 0.2686 0 0;
+  --accent-foreground: 0.9848 0 0;
+  --destructive: 0.3959 0.1331 25.721;
+  --destructive-foreground: 0.9848 0 0;
+  --border: 0.2686 0 0;
+  --input: 0.2686 0 0;
+  --ring: 0.8697 0 0;
 }