unplugin-docubook 1.1.2 → 1.1.3

package/README.md

@@ -1,4 +1,4 @@
-# 📚 DocuBook
+# <img src="./docu.svg" width="32" height="32" valign="middle" /> @DocuBook/content
 
 The Universal Documentation Engine for any JavaScript Framework.
 
@@ -33,62 +33,166 @@ npm install lucide-vue-next
 npm install lucide-svelte
 ```
 
-### 3. Setup Tailwind CSS
-DocuBook components are styled with Tailwind. Ensure Tailwind is installed in your project, then import the DocuBook theme in your entry file (`main.ts`, `App.tsx`, etc.):
+## 🎨 Theming & Customization
+
+DocuBook uses CSS variables for theming. You can override these variables to customize the appearance of components.
+
+### Quick Start
+
+> Import the DocuBook theme in your entry file (`main.ts`, `App.tsx`, etc.)
 
 ```typescript
 import 'unplugin-docubook/theme.css';
 ```
 
----
+### Override CSS Variables
 
-## ⚙️ Configuration
+<details>
+<summary><b>Base Colors</b></summary>
 
-Docubook supports all major bundlers via `unplugin`.
+```css
+:root {
+  /* Background & Foreground */
+  --background: 210 40% 98%;
+  --foreground: 220 30% 15%;
+  
+  /* Card */
+  --card: 0 0% 100%;
+  --card-foreground: 220 30% 15%;
+  
+  /* Popover */
+  --popover: 0 0% 100%;
+  --popover-foreground: 220 30% 15%;
+}
+```
+</details>
 
-### Vite (React/Vue/Svelte/Astro)
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import DocuBook from 'unplugin-docubook/vite';
+<details>
+<summary><b>Primary & Accent Colors</b></summary>
 
-export default defineConfig({
-  plugins: [
-    DocuBook({
-      framework: 'react', // or 'vue' | 'svelte'
-    }),
-  ],
-});
+```css
+:root {
+  /* Primary - main brand color */
+  --primary: 210 81% 56%;
+  --primary-foreground: 0 0% 100%;
+  
+  /* Secondary */
+  --secondary: 210 30% 90%;
+  --secondary-foreground: 220 30% 15%;
+  
+  /* Accent */
+  --accent: 200 100% 40%;
+  --accent-foreground: 0 0% 100%;
+}
 ```
+</details>
 
-### Next.js
-```javascript
-// next.config.mjs
-import DocuBook from 'unplugin-docubook/webpack';
+<details>
+<summary><b>Muted & UI Colors</b></summary>
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  webpack(config) {
-    config.plugins.push(DocuBook({ framework: 'react' }));
-    return config;
-  },
-};
+```css
+:root {
+  /* Muted */
+  --muted: 210 20% 92%;
+  --muted-foreground: 220 15% 50%;
+  
+  /* Status */
+  --destructive: 0 85% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --success: 142 70% 50%;
+  --success-foreground: 0 0% 100%;
+  
+  /* Border & Input */
+  --border: 210 20% 85%;
+  --input: 210 20% 85%;
+  --ring: 210 81% 56%;
+  
+  /* Radius */
+  --radius: 0.5rem;
+}
+```
+</details>
+
+<details>
+<summary><b>Note / Alert Variants</b></summary>
 
-export default nextConfig;
+```css
+:root {
+  /* Note (info) */
+  --note-bg: 214 100% 97%;
+  --note-border: 214 100% 90%;
+  --note-accent: 210 81% 56%;
+  --note-text: 220 50% 30%;
+  
+  /* Danger */
+  --danger-bg: 0 100% 97%;
+  --danger-border: 0 100% 90%;
+  --danger-accent: 0 85% 60%;
+  --danger-text: 0 50% 30%;
+  
+  /* Warning */
+  --warning-bg: 38 100% 97%;
+  --warning-border: 38 100% 90%;
+  --warning-accent: 38 100% 50%;
+  --warning-text: 38 50% 30%;
+  
+  /* Success */
+  --success-bg: 142 100% 97%;
+  --success-border: 142 100% 90%;
+  --success-accent: 142 70% 50%;
+  --success-text: 142 50% 25%;
+}
 ```
+</details>
 
-### Nuxt (Vue)
-```typescript
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: [
-    ['unplugin-docubook/nuxt', { framework: 'vue' }]
-  ]
-})
+<details>
+<summary><b>Dark Mode</b></summary>
+
+Override colors for dark mode by adding `.dark` class:
+
+```css
+.dark {
+  --background: 220 25% 10%;
+  --foreground: 210 30% 96%;
+  --card: 220 25% 15%;
+  --card-foreground: 210 30% 96%;
+  --primary: 210 100% 65%;
+  --primary-foreground: 220 25% 10%;
+  --accent: 200 100% 60%;
+  --muted: 215 20% 25%;
+  --muted-foreground: 215 20% 65%;
+  --border: 215 20% 25%;
+  --destructive: 0 85% 70%;
+  --success: 142 70% 55%;
+  
+  /* Note variants - dark */
+  --note-bg: 217 50% 20%;
+  --note-border: 217 50% 30%;
+  --note-text: 210 30% 90%;
+  /* ... etc */
+}
 ```
 
-### Webpack/Rollup
-Import from `unplugin-docubook/webpack` or `unplugin-docubook/rollup` and add to your plugins array.
+> [!TIP]
+> DocuBook automatically detects dark mode via the `.dark` class on parent element (compatible with Tailwind CSS).
+</details>
+
+<details>
+<summary><b>Shadows & Animations</b></summary>
+
+```css
+:root {
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+```
+</details>
 
 ---
 
@@ -124,6 +228,214 @@ DocuBook({
 })
 ```
 
+## 🔌 Integration
+
+DocuBook is not a replacement for your MDX compiler; it is a **transformer** that works alongside your favorite compiler. DocuBook handles automatic component imports (auto-import) before the MDX is compiled.
+
+### Requirement
+You still need an MDX compiler/bundler based on your framework:
+
+```bash
+# For Vite (React)
+npm install @mdx-js/rollup @mdx-js/react
+
+# For Vite (Vue)
+npm install @mdx-js/rollup @mdx-js/vue
+
+# For Next.js
+npm install @next/mdx @mdx-js/loader @mdx-js/react
+
+# For Svelte
+npm install mdsvex
+
+# For Astro
+npm install @astrojs/mdx
+
+# For Nuxt
+npm install @nuxtjs/mdc
+```
+
+> [!NOTE]
+> **What's the difference with `next-mdx-remote`?**
+> `next-mdx-remote` compiles MDX at runtime. DocuBook (via Webpack/Vite) processes your MDX files at build-time. If you are using local MDX files, DocuBook eliminates the need to write manual imports in every file or repeatedly register components in a provider.
+
+---
+
+## ⚙️ Configuration
+
+> [!TIP]
+> DocuBook supports all major bundlers via `unplugin`. Select your bundler below to see the configuration.
+
+<details>
+<summary><b>Vite (React)</b></summary>
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import mdx from '@mdx-js/rollup';
+import DocuBook from 'unplugin-docubook/vite';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    mdx(),
+    DocuBook({
+      framework: 'react',
+    }),
+  ],
+});
+```
+</details>
+
+<details>
+<summary><b>Vite (Vue)</b></summary>
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import mdx from '@mdx-js/rollup';
+import DocuBook from 'unplugin-docubook/vite';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    mdx({ providerImportSource: '@mdx-js/vue' }),
+    DocuBook({
+      framework: 'vue',
+    }),
+  ],
+});
+```
+</details>
+
+<details>
+<summary><b>Next.js (App Router / Pages Router)</b></summary>
+
+First, install the `@next/mdx` compiler:
+```bash
+npm install @next/mdx @mdx-js/loader @mdx-js/react
+```
+
+Then configure `next.config.mjs`:
+```javascript
+// next.config.mjs
+import DocuBook from 'unplugin-docubook/webpack';
+import createMDX from '@next/mdx';
+
+const withMDX = createMDX({});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  webpack(config) {
+    config.plugins.push(DocuBook({ framework: 'react' }));
+    return config;
+  },
+};
+
+export default withMDX(nextConfig);
+```
+</details>
+
+<details>
+<summary><b>Svelte (Vite)</b></summary>
+
+First, install `mdsvex`:
+```bash
+npm install mdsvex
+```
+
+Then configure `vite.config.ts`:
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import mdsvex from 'mdsvex';
+import DocuBook from 'unplugin-docubook/vite';
+
+export default defineConfig({
+  plugins: [
+    svelte({
+      extensions: ['.md', '.mdx'],
+    }),
+    mdsvex({
+      extensions: ['.md', '.mdx'],
+    }),
+    DocuBook({
+      framework: 'svelte',
+    }),
+  ],
+});
+```
+</details>
+
+<details>
+<summary><b>Astro</b></summary>
+
+First, install `@astrojs/mdx`:
+```bash
+npm install @astrojs/mdx
+```
+
+Then configure `astro.config.mjs`:
+```javascript
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import DocuBook from 'unplugin-docubook/vite';
+
+export default defineConfig({
+  integrations: [mdx()],
+  vite: {
+    plugins: [
+      DocuBook({
+        framework: 'svelte', // or 'react' if using React in Astro
+      }),
+    ],
+  },
+});
+```
+</details>
+
+<details>
+<summary><b>Nuxt (Vue)</b></summary>
+
+First, install `@nuxtjs/mdc`:
+```bash
+npm install @nuxtjs/mdc
+```
+
+Then configure `nuxt.config.ts`:
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/mdc'],
+  docubook: {
+    framework: 'vue'
+  }
+})
+```
+
+Or use the DocuBook Nuxt module directly:
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['unplugin-docubook/nuxt'],
+  docubook: {
+    framework: 'vue'
+  }
+})
+```
+</details>
+
+<details>
+<summary><b>Webpack / Rollup / Others</b></summary>
+
+Import from `unplugin-docubook/webpack` or `unplugin-docubook/rollup` and add to your plugins array.
+</details>
+
 ---
 
 ## License

package/dist/components/index.cjs

@@ -1,4 +1,6 @@
+'use client'
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -262,37 +264,38 @@ var themeTokens = {
 var componentStyles = {
   // Button variations
   button: {
-    base: "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    base: "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2 focus-visible:ring-offset-[hsl(var(--background))] disabled:pointer-events-none disabled:opacity-50",
     sizes: {
       sm: "h-8 px-3 text-xs",
       md: "h-9 px-4 py-2 text-sm",
       lg: "h-10 px-6 text-base"
     },
     variations: {
-      primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-      accent: "bg-accent text-accent-foreground hover:bg-accent/90",
-      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-      ghost: "hover:bg-accent hover:text-accent-foreground",
-      link: "text-primary underline-offset-4 hover:underline"
+      primary: "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:bg-[hsl(var(--primary))]/90",
+      accent: "bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))] hover:bg-[hsl(var(--accent))]/90",
+      outline: "border border-[hsl(var(--input))] bg-[hsl(var(--background))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
+      ghost: "hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
+      link: "text-[hsl(var(--primary))] underline-offset-4 hover:underline"
     }
   },
   // Card variations
   card: {
-    base: "rounded-lg border bg-card text-card-foreground shadow-sm",
+    base: "rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] shadow-sm",
     header: "flex flex-col space-y-1.5 p-6",
     content: "p-6 pt-0",
     footer: "flex items-center p-6 pt-0",
     title: "text-2xl font-semibold leading-none tracking-tight",
-    description: "text-sm text-muted-foreground"
+    description: "text-sm text-[hsl(var(--muted-foreground))]"
   },
   // Note/Alert variations
+  // Using HSL variables with proper semantic color classes
   note: {
-    base: "relative w-full rounded-lg border p-4",
+    base: "relative w-full rounded-lg border p-4 border-l-4",
     variants: {
-      note: "bg-[var(--color-note-bg)] border-[var(--color-note-border)] border-l-4 border-l-[var(--color-note-accent)] text-[var(--color-note-text)] dark:bg-[var(--color-dark-note-bg)] dark:border-[var(--color-dark-note-border)] dark:text-[var(--color-dark-note-text)]",
-      danger: "bg-[var(--color-danger-bg)] border-[var(--color-danger-border)] border-l-4 border-l-[var(--color-danger-accent)] text-[var(--color-danger-text)] dark:bg-[var(--color-dark-danger-bg)] dark:border-[var(--color-dark-danger-border)] dark:text-[var(--color-dark-danger-text)]",
-      warning: "bg-[var(--color-warning-bg)] border-[var(--color-warning-border)] border-l-4 border-l-[var(--color-warning-accent)] text-[var(--color-warning-text)] dark:bg-[var(--color-dark-warning-bg)] dark:border-[var(--color-dark-warning-border)] dark:text-[var(--color-dark-warning-text)]",
-      success: "bg-[var(--color-success-bg)] border-[var(--color-success-border)] border-l-4 border-l-[var(--color-success-accent)] text-[var(--color-success-text)] dark:bg-[var(--color-dark-success-bg)] dark:border-[var(--color-dark-success-border)] dark:text-[var(--color-dark-success-text)]"
+      note: "bg-[hsl(var(--note-bg))] border-[hsl(var(--note-border))] border-l-[hsl(var(--note-accent))] text-[hsl(var(--note-text))]",
+      danger: "bg-[hsl(var(--danger-bg))] border-[hsl(var(--danger-border))] border-l-[hsl(var(--danger-accent))] text-[hsl(var(--danger-text))]",
+      warning: "bg-[hsl(var(--warning-bg))] border-[hsl(var(--warning-border))] border-l-[hsl(var(--warning-accent))] text-[hsl(var(--warning-text))]",
+      success: "bg-[hsl(var(--success-bg))] border-[hsl(var(--success-border))] border-l-[hsl(var(--success-accent))] text-[hsl(var(--success-text))]"
     },
     icon: "absolute left-4 top-4 h-5 w-5",
     content: "pl-8",
@@ -301,133 +304,133 @@ var componentStyles = {
   },
   // Accordion
   accordion: {
-    base: "rounded-lg border bg-card",
-    item: "border-b last:border-b-0",
-    trigger: "flex w-full items-center justify-between p-4 font-medium transition-all hover:bg-muted [&[data-state=open]>svg]:rotate-180",
+    base: "rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))]",
+    item: "border-b border-[hsl(var(--border))] last:border-b-0",
+    trigger: "flex w-full items-center justify-between p-4 font-medium transition-all hover:bg-[hsl(var(--muted))] [&[data-state=open]>svg]:rotate-180",
     content: "overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
     contentInner: "p-4 pt-0"
   },
   // Tooltip
   tooltip: {
-    content: "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+    content: "z-50 overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-md px-3 py-1.5 text-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
   },
   // Kbd
   kbd: {
-    base: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+    base: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 font-mono text-[10px] font-medium text-[hsl(var(--muted-foreground))] opacity-100"
   },
   // Stepper
   stepper: {
     base: "flex w-full items-start gap-2",
     item: "flex-1",
     trigger: "flex items-center gap-2",
-    indicator: "flex h-8 w-8 items-center justify-center rounded-full border text-sm font-medium",
+    indicator: "flex h-8 w-8 items-center justify-center rounded-full border border-[hsl(var(--border))] text-sm font-medium",
     title: "text-sm font-medium",
-    description: "text-xs text-muted-foreground",
-    separator: "flex-1 h-[1px] bg-border mt-4"
+    description: "text-xs text-[hsl(var(--muted-foreground))]",
+    separator: "flex-1 h-[1px] bg-[hsl(var(--border))] mt-4"
   },
   // File Tree
   fileTree: {
-    base: "rounded-lg border bg-card p-4",
+    base: "rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4",
     folder: "font-medium",
-    file: "text-muted-foreground",
-    indent: "ml-4 pl-4 border-l"
+    file: "text-[hsl(var(--muted-foreground))]",
+    indent: "ml-4 pl-4 border-l border-[hsl(var(--border))]"
   },
   // Copy button
   copy: {
-    base: "absolute right-4 top-4 inline-flex h-6 w-6 items-center justify-center rounded-md border bg-background text-foreground opacity-0 transition-opacity hover:bg-muted focus:outline-none group-hover:opacity-100",
+    base: "absolute right-4 top-4 inline-flex h-6 w-6 items-center justify-center rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-[hsl(var(--foreground))] opacity-0 transition-opacity hover:bg-[hsl(var(--muted))] focus:outline-none group-hover:opacity-100",
     icon: "h-3 w-3"
   },
   // Pre (code block)
   pre: {
-    base: "relative mb-4 mt-6 overflow-x-auto rounded-lg border bg-muted p-4 font-mono text-sm",
+    base: "relative mb-4 mt-6 overflow-x-auto rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--muted))] p-4 font-mono text-sm",
     withCopy: "pr-12"
   },
   // Release
   release: {
     base: "space-y-4",
     version: "text-2xl font-bold",
-    date: "text-sm text-muted-foreground",
+    date: "text-sm text-[hsl(var(--muted-foreground))]",
     changes: "space-y-2",
     changeItem: "flex items-start gap-2",
-    badge: "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold transition-colors",
+    badge: "inline-flex items-center rounded-full border border-[hsl(var(--border))] px-2 py-0.5 text-xs font-semibold transition-colors",
     badgeVariants: {
-      major: "bg-red-100 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-200 dark:border-red-800",
-      minor: "bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-200 dark:border-blue-800",
-      patch: "bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-200 dark:border-green-800"
+      major: "bg-[hsl(var(--destructive))]/10 text-[hsl(var(--destructive))] border-[hsl(var(--destructive))]/20",
+      minor: "bg-[hsl(var(--primary))]/10 text-[hsl(var(--primary))] border-[hsl(var(--primary))]/20",
+      patch: "bg-[hsl(var(--success))]/10 text-[hsl(var(--success))] border-[hsl(var(--success))]/20"
     }
   },
   // YouTube
   youtube: {
-    container: "relative aspect-video w-full overflow-hidden rounded-lg border",
+    container: "relative aspect-video w-full overflow-hidden rounded-lg border border-[hsl(var(--border))]",
     iframe: "absolute inset-0 h-full w-full"
   },
   // Image
   image: {
-    base: "rounded-lg border",
-    caption: "mt-2 text-center text-sm text-muted-foreground"
+    base: "rounded-lg border border-[hsl(var(--border))]",
+    caption: "mt-2 text-center text-sm text-[hsl(var(--muted-foreground))]"
   },
   // Link
   link: {
-    base: "font-medium text-primary underline underline-offset-4 hover:text-primary/80"
+    base: "font-medium text-[hsl(var(--primary))] underline underline-offset-4 hover:text-[hsl(var(--primary))]/80"
   },
   // Tabs (Radix UI)
   tabs: {
     root: "w-full",
-    list: "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-    trigger: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-    content: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+    list: "inline-flex h-9 items-center justify-center rounded-lg bg-[hsl(var(--muted))] p-1 text-[hsl(var(--muted-foreground))]",
+    trigger: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-[hsl(var(--background))] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[hsl(var(--background))] data-[state=active]:text-[hsl(var(--foreground))] data-[state=active]:shadow-sm",
+    content: "mt-2 ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2"
   },
   // Collapsible
   collapsible: {
     base: "",
-    trigger: "flex w-full items-center justify-between p-4 font-medium transition-all hover:bg-muted [&[data-state=open]>svg]:rotate-180",
+    trigger: "flex w-full items-center justify-between p-4 font-medium transition-all hover:bg-[hsl(var(--muted))] [&[data-state=open]>svg]:rotate-180",
     content: "overflow-hidden transition-all data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down"
   },
   // Dialog
   dialog: {
     overlay: "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-    content: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+    content: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[hsl(var(--border))] bg-[hsl(var(--background))] p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
     header: "flex flex-col space-y-1.5 text-center sm:text-left",
     footer: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
     title: "text-lg font-semibold leading-none tracking-tight",
-    description: "text-sm text-muted-foreground",
-    close: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+    description: "text-sm text-[hsl(var(--muted-foreground))]",
+    close: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-[hsl(var(--background))] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--ring))] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-[hsl(var(--accent))] data-[state=open]:text-[hsl(var(--muted-foreground))]"
   },
   // Dropdown Menu
   dropdownMenu: {
-    content: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-    item: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-    separator: "-mx-1 my-1 h-px bg-muted",
+    content: "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    item: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[hsl(var(--accent))] focus:text-[hsl(var(--accent-foreground))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    separator: "-mx-1 my-1 h-px bg-[hsl(var(--border))]",
     label: "px-2 py-1.5 text-sm font-semibold"
   },
   // Select
   select: {
-    trigger: "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-    content: "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    trigger: "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-[hsl(var(--input))] bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-[hsl(var(--background))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+    content: "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
     viewport: "p-1",
-    item: "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    item: "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-[hsl(var(--accent))] focus:text-[hsl(var(--accent-foreground))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
     itemIndicator: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center",
     groupLabel: "px-2 py-1.5 text-sm font-semibold"
   },
   // Checkbox
   checkbox: {
-    base: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+    base: "peer h-4 w-4 shrink-0 rounded-sm border border-[hsl(var(--primary))] ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[hsl(var(--primary))] data-[state=checked]:text-[hsl(var(--primary-foreground))]",
     indicator: "flex items-center justify-center text-current"
   },
   // Switch
   switch: {
-    base: "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-    thumb: "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+    base: "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2 focus-visible:ring-offset-[hsl(var(--background))] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[hsl(var(--primary))] data-[state=unchecked]:bg-[hsl(var(--input))]",
+    thumb: "pointer-events-none block h-4 w-4 rounded-full bg-[hsl(var(--background))] shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
   },
   // Radio Group
   radioGroup: {
     root: "grid gap-2",
-    item: "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    item: "aspect-square h-4 w-4 rounded-full border border-[hsl(var(--primary))] text-[hsl(var(--primary))] ring-offset-[hsl(var(--background))] focus:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
     indicator: "flex items-center justify-center"
   },
   // Separator
   separator: {
-    base: "bg-border shrink-0",
+    base: "bg-[hsl(var(--border))] shrink-0",
     horizontal: "h-[1px] w-full",
     vertical: "h-full w-[1px]"
   }