tailwind-styled-v4 4.0.0 → 5.0.0

package/dist/theme.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../theme/src/index.ts"],"names":[],"mappings":"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","file":"theme.cjs","sourcesContent":["/**\n * tailwind-styled-v4 — Multi-Theme Engine\n *\n * Enterprise-grade theming. Support light/dark/brand themes dengan\n * CSS variables. Zero runtime overhead — themes di-resolve via CSS.\n *\n * Fitur:\n *  - Multiple named themes (light, dark, brand, high-contrast)\n *  - CSS variable output (Tailwind v4 compatible)\n *  - Theme contract (TypeScript-safe — missing tokens = TS error)\n *  - Per-component theme override\n *  - White-label ready\n *\n * @example\n *   // 1. Define contract\n *   const contract = defineThemeContract({\n *     colors: { bg: \"\", fg: \"\", primary: \"\", muted: \"\" },\n *     font:   { sans: \"\", mono: \"\" },\n *   })\n *\n *   // 2. Create themes\n *   const lightTheme = createTheme(contract, \"light\", {\n *     colors: { bg: \"#ffffff\", fg: \"#09090b\", primary: \"#3b82f6\", muted: \"#71717a\" },\n *     font:   { sans: \"InterVariable, sans-serif\", mono: \"JetBrains Mono, monospace\" },\n *   })\n *\n *   const darkTheme = createTheme(contract, \"dark\", {\n *     colors: { bg: \"#09090b\", fg: \"#fafafa\", primary: \"#60a5fa\", muted: \"#a1a1aa\" },\n *     font:   { sans: \"InterVariable, sans-serif\", mono: \"JetBrains Mono, monospace\" },\n *   })\n *\n *   // 3. Use tokens in components\n *   const Card = tw.div`bg-[var(--colors-bg)] text-[var(--colors-fg)] p-6`\n *\n *   // 4. Apply in layout\n *   // <html data-theme=\"dark\"> or inject CSS\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport type TokenMap = Record<string, Record<string, string>>\n\nexport interface ThemeContract<T extends TokenMap> {\n  _contract: T\n  _vars: ThemeVars<T>\n}\n\nexport type ThemeVars<T extends TokenMap> = {\n  [Group in keyof T]: {\n    [Token in keyof T[Group]]: string // \"var(--group-token)\"\n  }\n}\n\nexport interface Theme<T extends TokenMap> {\n  name: string\n  contract: ThemeContract<T>\n  values: T\n  /** CSS string to inject (`:root` or `[data-theme=\"name\"]`) */\n  css: string\n  /** CSS variables as a flat record */\n  vars: Record<string, string>\n  /** Apply this theme to an element via data attribute */\n  selector: string\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// defineThemeContract\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Define the shape of your theme. All themes must satisfy this contract.\n * Returns typed CSS variable references for use in tw components.\n *\n * @example\n * const contract = defineThemeContract({\n *   colors: { bg: \"\", fg: \"\", primary: \"\" },\n *   font: { sans: \"\" },\n * })\n *\n * // Use in components:\n * const Card = tw.div`bg-[${contract._vars.colors.bg}]`\n * // → tw.div`bg-[var(--colors-bg)]`\n */\nexport function defineThemeContract<T extends TokenMap>(shape: T): ThemeContract<T> {\n  const vars = {} as ThemeVars<T>\n\n  for (const group in shape) {\n    ;(vars as any)[group] = {}\n    for (const token in shape[group]) {\n      ;(vars as any)[group][token] = `var(--${group}-${token})`\n    }\n  }\n\n  return { _contract: shape, _vars: vars }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// createTheme\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Create a typed theme that satisfies a contract.\n *\n * @param contract - Theme contract from defineThemeContract()\n * @param name - Theme name (\"light\", \"dark\", \"brand\", etc.)\n * @param values - Token values (TypeScript enforces completeness)\n * @param asRoot - If true, use :root selector. Default: false (uses [data-theme])\n */\nexport function createTheme<T extends TokenMap>(\n  contract: ThemeContract<T>,\n  name: string,\n  values: T,\n  asRoot = false\n): Theme<T> {\n  const flatVars: Record<string, string> = {}\n  const cssLines: string[] = []\n\n  for (const group in values) {\n    for (const token in values[group]) {\n      const varName = `--${group}-${token}`\n      const value = values[group][token]\n      flatVars[varName] = value\n      cssLines.push(`  ${varName}: ${value};`)\n    }\n  }\n\n  const selector = asRoot ? \":root\" : `[data-theme=\"${name}\"]`\n  const css = `${selector} {\\n${cssLines.join(\"\\n\")}\\n}`\n\n  return {\n    name,\n    contract,\n    values,\n    css,\n    vars: flatVars,\n    selector,\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// ThemeRegistry — manage multiple themes\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport class ThemeRegistry {\n  private themes = new Map<string, Theme<any>>()\n  private defaultTheme: string | null = null\n\n  /** Register a theme */\n  register<T extends TokenMap>(theme: Theme<T>, isDefault = false): this {\n    this.themes.set(theme.name, theme)\n    if (isDefault || !this.defaultTheme) {\n      this.defaultTheme = theme.name\n    }\n    return this\n  }\n\n  /** Get a theme by name */\n  get(name: string): Theme<any> | undefined {\n    return this.themes.get(name)\n  }\n\n  /** Get all theme names */\n  names(): string[] {\n    return Array.from(this.themes.keys())\n  }\n\n  /**\n   * Generate combined CSS for all themes.\n   * Inject into <head> or a .css file.\n   *\n   * @example\n   * // In globals.css or layout.tsx\n   * const css = registry.generateCss()\n   */\n  generateCss(): string {\n    return Array.from(this.themes.values())\n      .map((t) => t.css)\n      .join(\"\\n\\n\")\n  }\n\n  /**\n   * Get the CSS for a specific theme only.\n   */\n  getThemeCss(name: string): string | null {\n    return this.themes.get(name)?.css ?? null\n  }\n\n  /**\n   * Inject all theme CSS into document <head> (browser only).\n   * Call once on app init.\n   */\n  inject(styleId = \"__tw_themes\"): void {\n    if (typeof document === \"undefined\") return\n\n    let style = document.getElementById(styleId) as HTMLStyleElement | null\n    if (!style) {\n      style = document.createElement(\"style\")\n      style.id = styleId\n      document.head.appendChild(style)\n    }\n    style.textContent = this.generateCss()\n  }\n\n  /**\n   * Switch active theme by setting data-theme on <html>.\n   */\n  apply(name: string, target: HTMLElement = document.documentElement): void {\n    if (typeof document === \"undefined\") return\n    if (!this.themes.has(name)) {\n      console.warn(`[tailwind-styled-v4] Theme \"${name}\" not registered.`)\n      return\n    }\n    target.dataset.theme = name\n  }\n\n  /**\n   * Get current active theme name from data-theme attribute.\n   */\n  current(target: HTMLElement = document.documentElement): string | null {\n    if (typeof document === \"undefined\") return this.defaultTheme\n    return target.dataset.theme ?? this.defaultTheme\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Convenience: createMultiTheme — shorthand for common light/dark setup\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface MultiThemeConfig<T extends TokenMap> {\n  contract: ThemeContract<T>\n  light: T\n  dark: T\n  /** Additional named themes (brand, high-contrast, etc.) */\n  extras?: Record<string, T>\n}\n\n/**\n * Create a ThemeRegistry with light/dark + optional extras in one call.\n *\n * @example\n * const { registry, vars } = createMultiTheme({\n *   contract: defineThemeContract({\n *     colors: { bg: \"\", fg: \"\", primary: \"\", border: \"\" }\n *   }),\n *   light: {\n *     colors: { bg: \"#fff\", fg: \"#09090b\", primary: \"#3b82f6\", border: \"#e5e7eb\" }\n *   },\n *   dark: {\n *     colors: { bg: \"#09090b\", fg: \"#fafafa\", primary: \"#60a5fa\", border: \"#27272a\" }\n *   },\n * })\n *\n * // Inject CSS:\n * registry.inject()\n *\n * // Use tokens in components:\n * const Card = tw.div`bg-[${vars.colors.bg}] text-[${vars.colors.fg}]`\n */\nexport function createMultiTheme<T extends TokenMap>(\n  config: MultiThemeConfig<T>\n): {\n  registry: ThemeRegistry\n  vars: ThemeVars<T>\n  light: Theme<T>\n  dark: Theme<T>\n} {\n  const registry = new ThemeRegistry()\n\n  const light = createTheme(config.contract, \"light\", config.light, true) // :root\n  const dark = createTheme(config.contract, \"dark\", config.dark, false)\n\n  registry.register(light, true)\n  registry.register(dark)\n\n  for (const [name, values] of Object.entries(config.extras ?? {})) {\n    registry.register(createTheme(config.contract, name, values as T))\n  }\n\n  return {\n    registry,\n    vars: config.contract._vars,\n    light,\n    dark,\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Design Token Compiler — generate CSS vars from token object\n// (Enterprise feature: sync with Figma variables)\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface DesignTokens {\n  [path: string]: string | DesignTokens\n}\n\n/**\n * Flatten nested design token object into CSS variables.\n * Supports Figma-style nested tokens.\n *\n * @example\n * compileDesignTokens({\n *   color: {\n *     brand: { primary: \"#3b82f6\", secondary: \"#6366f1\" },\n *     neutral: { 50: \"#fafafa\", 900: \"#09090b\" }\n *   },\n *   spacing: { base: \"4px\", lg: \"16px\" }\n * })\n * →\n * :root {\n *   --color-brand-primary: #3b82f6;\n *   --color-brand-secondary: #6366f1;\n *   --color-neutral-50: #fafafa;\n *   --color-neutral-900: #09090b;\n *   --spacing-base: 4px;\n *   --spacing-lg: 16px;\n * }\n */\nexport function compileDesignTokens(tokens: DesignTokens, prefix = \"\"): string {\n  const vars: string[] = []\n\n  function flatten(obj: DesignTokens, path: string) {\n    for (const [key, value] of Object.entries(obj)) {\n      const varPath = path ? `${path}-${key}` : key\n      if (typeof value === \"string\") {\n        vars.push(`  --${varPath}: ${value};`)\n      } else {\n        flatten(value as DesignTokens, varPath)\n      }\n    }\n  }\n\n  flatten(tokens, prefix)\n  return `:root {\\n${vars.join(\"\\n\")}\\n}`\n}\n"]}

package/dist/theme.d.cts

@@ -1,181 +0,0 @@
-/**
- * tailwind-styled-v4 — Multi-Theme Engine
- *
- * Enterprise-grade theming. Support light/dark/brand themes dengan
- * CSS variables. Zero runtime overhead — themes di-resolve via CSS.
- *
- * Fitur:
- *  - Multiple named themes (light, dark, brand, high-contrast)
- *  - CSS variable output (Tailwind v4 compatible)
- *  - Theme contract (TypeScript-safe — missing tokens = TS error)
- *  - Per-component theme override
- *  - White-label ready
- *
- * @example
- *   // 1. Define contract
- *   const contract = defineThemeContract({
- *     colors: { bg: "", fg: "", primary: "", muted: "" },
- *     font:   { sans: "", mono: "" },
- *   })
- *
- *   // 2. Create themes
- *   const lightTheme = createTheme(contract, "light", {
- *     colors: { bg: "#ffffff", fg: "#09090b", primary: "#3b82f6", muted: "#71717a" },
- *     font:   { sans: "InterVariable, sans-serif", mono: "JetBrains Mono, monospace" },
- *   })
- *
- *   const darkTheme = createTheme(contract, "dark", {
- *     colors: { bg: "#09090b", fg: "#fafafa", primary: "#60a5fa", muted: "#a1a1aa" },
- *     font:   { sans: "InterVariable, sans-serif", mono: "JetBrains Mono, monospace" },
- *   })
- *
- *   // 3. Use tokens in components
- *   const Card = tw.div`bg-[var(--colors-bg)] text-[var(--colors-fg)] p-6`
- *
- *   // 4. Apply in layout
- *   // <html data-theme="dark"> or inject CSS
- */
-type TokenMap = Record<string, Record<string, string>>;
-interface ThemeContract<T extends TokenMap> {
-    _contract: T;
-    _vars: ThemeVars<T>;
-}
-type ThemeVars<T extends TokenMap> = {
-    [Group in keyof T]: {
-        [Token in keyof T[Group]]: string;
-    };
-};
-interface Theme<T extends TokenMap> {
-    name: string;
-    contract: ThemeContract<T>;
-    values: T;
-    /** CSS string to inject (`:root` or `[data-theme="name"]`) */
-    css: string;
-    /** CSS variables as a flat record */
-    vars: Record<string, string>;
-    /** Apply this theme to an element via data attribute */
-    selector: string;
-}
-/**
- * Define the shape of your theme. All themes must satisfy this contract.
- * Returns typed CSS variable references for use in tw components.
- *
- * @example
- * const contract = defineThemeContract({
- *   colors: { bg: "", fg: "", primary: "" },
- *   font: { sans: "" },
- * })
- *
- * // Use in components:
- * const Card = tw.div`bg-[${contract._vars.colors.bg}]`
- * // → tw.div`bg-[var(--colors-bg)]`
- */
-declare function defineThemeContract<T extends TokenMap>(shape: T): ThemeContract<T>;
-/**
- * Create a typed theme that satisfies a contract.
- *
- * @param contract - Theme contract from defineThemeContract()
- * @param name - Theme name ("light", "dark", "brand", etc.)
- * @param values - Token values (TypeScript enforces completeness)
- * @param asRoot - If true, use :root selector. Default: false (uses [data-theme])
- */
-declare function createTheme<T extends TokenMap>(contract: ThemeContract<T>, name: string, values: T, asRoot?: boolean): Theme<T>;
-declare class ThemeRegistry {
-    private themes;
-    private defaultTheme;
-    /** Register a theme */
-    register<T extends TokenMap>(theme: Theme<T>, isDefault?: boolean): this;
-    /** Get a theme by name */
-    get(name: string): Theme<any> | undefined;
-    /** Get all theme names */
-    names(): string[];
-    /**
-     * Generate combined CSS for all themes.
-     * Inject into <head> or a .css file.
-     *
-     * @example
-     * // In globals.css or layout.tsx
-     * const css = registry.generateCss()
-     */
-    generateCss(): string;
-    /**
-     * Get the CSS for a specific theme only.
-     */
-    getThemeCss(name: string): string | null;
-    /**
-     * Inject all theme CSS into document <head> (browser only).
-     * Call once on app init.
-     */
-    inject(styleId?: string): void;
-    /**
-     * Switch active theme by setting data-theme on <html>.
-     */
-    apply(name: string, target?: HTMLElement): void;
-    /**
-     * Get current active theme name from data-theme attribute.
-     */
-    current(target?: HTMLElement): string | null;
-}
-interface MultiThemeConfig<T extends TokenMap> {
-    contract: ThemeContract<T>;
-    light: T;
-    dark: T;
-    /** Additional named themes (brand, high-contrast, etc.) */
-    extras?: Record<string, T>;
-}
-/**
- * Create a ThemeRegistry with light/dark + optional extras in one call.
- *
- * @example
- * const { registry, vars } = createMultiTheme({
- *   contract: defineThemeContract({
- *     colors: { bg: "", fg: "", primary: "", border: "" }
- *   }),
- *   light: {
- *     colors: { bg: "#fff", fg: "#09090b", primary: "#3b82f6", border: "#e5e7eb" }
- *   },
- *   dark: {
- *     colors: { bg: "#09090b", fg: "#fafafa", primary: "#60a5fa", border: "#27272a" }
- *   },
- * })
- *
- * // Inject CSS:
- * registry.inject()
- *
- * // Use tokens in components:
- * const Card = tw.div`bg-[${vars.colors.bg}] text-[${vars.colors.fg}]`
- */
-declare function createMultiTheme<T extends TokenMap>(config: MultiThemeConfig<T>): {
-    registry: ThemeRegistry;
-    vars: ThemeVars<T>;
-    light: Theme<T>;
-    dark: Theme<T>;
-};
-interface DesignTokens {
-    [path: string]: string | DesignTokens;
-}
-/**
- * Flatten nested design token object into CSS variables.
- * Supports Figma-style nested tokens.
- *
- * @example
- * compileDesignTokens({
- *   color: {
- *     brand: { primary: "#3b82f6", secondary: "#6366f1" },
- *     neutral: { 50: "#fafafa", 900: "#09090b" }
- *   },
- *   spacing: { base: "4px", lg: "16px" }
- * })
- * →
- * :root {
- *   --color-brand-primary: #3b82f6;
- *   --color-brand-secondary: #6366f1;
- *   --color-neutral-50: #fafafa;
- *   --color-neutral-900: #09090b;
- *   --spacing-base: 4px;
- *   --spacing-lg: 16px;
- * }
- */
-declare function compileDesignTokens(tokens: DesignTokens, prefix?: string): string;
-
-export { type DesignTokens, type MultiThemeConfig, type Theme, type ThemeContract, ThemeRegistry, type ThemeVars, type TokenMap, compileDesignTokens, createMultiTheme, createTheme, defineThemeContract };

package/dist/theme.d.ts

@@ -1,181 +0,0 @@
-/**
- * tailwind-styled-v4 — Multi-Theme Engine
- *
- * Enterprise-grade theming. Support light/dark/brand themes dengan
- * CSS variables. Zero runtime overhead — themes di-resolve via CSS.
- *
- * Fitur:
- *  - Multiple named themes (light, dark, brand, high-contrast)
- *  - CSS variable output (Tailwind v4 compatible)
- *  - Theme contract (TypeScript-safe — missing tokens = TS error)
- *  - Per-component theme override
- *  - White-label ready
- *
- * @example
- *   // 1. Define contract
- *   const contract = defineThemeContract({
- *     colors: { bg: "", fg: "", primary: "", muted: "" },
- *     font:   { sans: "", mono: "" },
- *   })
- *
- *   // 2. Create themes
- *   const lightTheme = createTheme(contract, "light", {
- *     colors: { bg: "#ffffff", fg: "#09090b", primary: "#3b82f6", muted: "#71717a" },
- *     font:   { sans: "InterVariable, sans-serif", mono: "JetBrains Mono, monospace" },
- *   })
- *
- *   const darkTheme = createTheme(contract, "dark", {
- *     colors: { bg: "#09090b", fg: "#fafafa", primary: "#60a5fa", muted: "#a1a1aa" },
- *     font:   { sans: "InterVariable, sans-serif", mono: "JetBrains Mono, monospace" },
- *   })
- *
- *   // 3. Use tokens in components
- *   const Card = tw.div`bg-[var(--colors-bg)] text-[var(--colors-fg)] p-6`
- *
- *   // 4. Apply in layout
- *   // <html data-theme="dark"> or inject CSS
- */
-type TokenMap = Record<string, Record<string, string>>;
-interface ThemeContract<T extends TokenMap> {
-    _contract: T;
-    _vars: ThemeVars<T>;
-}
-type ThemeVars<T extends TokenMap> = {
-    [Group in keyof T]: {
-        [Token in keyof T[Group]]: string;
-    };
-};
-interface Theme<T extends TokenMap> {
-    name: string;
-    contract: ThemeContract<T>;
-    values: T;
-    /** CSS string to inject (`:root` or `[data-theme="name"]`) */
-    css: string;
-    /** CSS variables as a flat record */
-    vars: Record<string, string>;
-    /** Apply this theme to an element via data attribute */
-    selector: string;
-}
-/**
- * Define the shape of your theme. All themes must satisfy this contract.
- * Returns typed CSS variable references for use in tw components.
- *
- * @example
- * const contract = defineThemeContract({
- *   colors: { bg: "", fg: "", primary: "" },
- *   font: { sans: "" },
- * })
- *
- * // Use in components:
- * const Card = tw.div`bg-[${contract._vars.colors.bg}]`
- * // → tw.div`bg-[var(--colors-bg)]`
- */
-declare function defineThemeContract<T extends TokenMap>(shape: T): ThemeContract<T>;
-/**
- * Create a typed theme that satisfies a contract.
- *
- * @param contract - Theme contract from defineThemeContract()
- * @param name - Theme name ("light", "dark", "brand", etc.)
- * @param values - Token values (TypeScript enforces completeness)
- * @param asRoot - If true, use :root selector. Default: false (uses [data-theme])
- */
-declare function createTheme<T extends TokenMap>(contract: ThemeContract<T>, name: string, values: T, asRoot?: boolean): Theme<T>;
-declare class ThemeRegistry {
-    private themes;
-    private defaultTheme;
-    /** Register a theme */
-    register<T extends TokenMap>(theme: Theme<T>, isDefault?: boolean): this;
-    /** Get a theme by name */
-    get(name: string): Theme<any> | undefined;
-    /** Get all theme names */
-    names(): string[];
-    /**
-     * Generate combined CSS for all themes.
-     * Inject into <head> or a .css file.
-     *
-     * @example
-     * // In globals.css or layout.tsx
-     * const css = registry.generateCss()
-     */
-    generateCss(): string;
-    /**
-     * Get the CSS for a specific theme only.
-     */
-    getThemeCss(name: string): string | null;
-    /**
-     * Inject all theme CSS into document <head> (browser only).
-     * Call once on app init.
-     */
-    inject(styleId?: string): void;
-    /**
-     * Switch active theme by setting data-theme on <html>.
-     */
-    apply(name: string, target?: HTMLElement): void;
-    /**
-     * Get current active theme name from data-theme attribute.
-     */
-    current(target?: HTMLElement): string | null;
-}
-interface MultiThemeConfig<T extends TokenMap> {
-    contract: ThemeContract<T>;
-    light: T;
-    dark: T;
-    /** Additional named themes (brand, high-contrast, etc.) */
-    extras?: Record<string, T>;
-}
-/**
- * Create a ThemeRegistry with light/dark + optional extras in one call.
- *
- * @example
- * const { registry, vars } = createMultiTheme({
- *   contract: defineThemeContract({
- *     colors: { bg: "", fg: "", primary: "", border: "" }
- *   }),
- *   light: {
- *     colors: { bg: "#fff", fg: "#09090b", primary: "#3b82f6", border: "#e5e7eb" }
- *   },
- *   dark: {
- *     colors: { bg: "#09090b", fg: "#fafafa", primary: "#60a5fa", border: "#27272a" }
- *   },
- * })
- *
- * // Inject CSS:
- * registry.inject()
- *
- * // Use tokens in components:
- * const Card = tw.div`bg-[${vars.colors.bg}] text-[${vars.colors.fg}]`
- */
-declare function createMultiTheme<T extends TokenMap>(config: MultiThemeConfig<T>): {
-    registry: ThemeRegistry;
-    vars: ThemeVars<T>;
-    light: Theme<T>;
-    dark: Theme<T>;
-};
-interface DesignTokens {
-    [path: string]: string | DesignTokens;
-}
-/**
- * Flatten nested design token object into CSS variables.
- * Supports Figma-style nested tokens.
- *
- * @example
- * compileDesignTokens({
- *   color: {
- *     brand: { primary: "#3b82f6", secondary: "#6366f1" },
- *     neutral: { 50: "#fafafa", 900: "#09090b" }
- *   },
- *   spacing: { base: "4px", lg: "16px" }
- * })
- * →
- * :root {
- *   --color-brand-primary: #3b82f6;
- *   --color-brand-secondary: #6366f1;
- *   --color-neutral-50: #fafafa;
- *   --color-neutral-900: #09090b;
- *   --spacing-base: 4px;
- *   --spacing-lg: 16px;
- * }
- */
-declare function compileDesignTokens(tokens: DesignTokens, prefix?: string): string;
-
-export { type DesignTokens, type MultiThemeConfig, type Theme, type ThemeContract, ThemeRegistry, type ThemeVars, type TokenMap, compileDesignTokens, createMultiTheme, createTheme, defineThemeContract };

package/dist/theme.js

@@ -1,148 +0,0 @@
-/* tailwind-styled-v4 v4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
-
-// ../theme/src/index.ts
-function defineThemeContract(shape) {
-  const vars = {};
-  for (const group in shape) {
-    vars[group] = {};
-    for (const token in shape[group]) {
-      vars[group][token] = `var(--${group}-${token})`;
-    }
-  }
-  return { _contract: shape, _vars: vars };
-}
-function createTheme(contract, name, values, asRoot = false) {
-  const flatVars = {};
-  const cssLines = [];
-  for (const group in values) {
-    for (const token in values[group]) {
-      const varName = `--${group}-${token}`;
-      const value = values[group][token];
-      flatVars[varName] = value;
-      cssLines.push(`  ${varName}: ${value};`);
-    }
-  }
-  const selector = asRoot ? ":root" : `[data-theme="${name}"]`;
-  const css = `${selector} {
-${cssLines.join("\n")}
-}`;
-  return {
-    name,
-    contract,
-    values,
-    css,
-    vars: flatVars,
-    selector
-  };
-}
-var ThemeRegistry = class {
-  constructor() {
-    this.themes = /* @__PURE__ */ new Map();
-    this.defaultTheme = null;
-  }
-  /** Register a theme */
-  register(theme, isDefault = false) {
-    this.themes.set(theme.name, theme);
-    if (isDefault || !this.defaultTheme) {
-      this.defaultTheme = theme.name;
-    }
-    return this;
-  }
-  /** Get a theme by name */
-  get(name) {
-    return this.themes.get(name);
-  }
-  /** Get all theme names */
-  names() {
-    return Array.from(this.themes.keys());
-  }
-  /**
-   * Generate combined CSS for all themes.
-   * Inject into <head> or a .css file.
-   *
-   * @example
-   * // In globals.css or layout.tsx
-   * const css = registry.generateCss()
-   */
-  generateCss() {
-    return Array.from(this.themes.values()).map((t) => t.css).join("\n\n");
-  }
-  /**
-   * Get the CSS for a specific theme only.
-   */
-  getThemeCss(name) {
-    var _a, _b;
-    return (_b = (_a = this.themes.get(name)) == null ? void 0 : _a.css) != null ? _b : null;
-  }
-  /**
-   * Inject all theme CSS into document <head> (browser only).
-   * Call once on app init.
-   */
-  inject(styleId = "__tw_themes") {
-    if (typeof document === "undefined") return;
-    let style = document.getElementById(styleId);
-    if (!style) {
-      style = document.createElement("style");
-      style.id = styleId;
-      document.head.appendChild(style);
-    }
-    style.textContent = this.generateCss();
-  }
-  /**
-   * Switch active theme by setting data-theme on <html>.
-   */
-  apply(name, target = document.documentElement) {
-    if (typeof document === "undefined") return;
-    if (!this.themes.has(name)) {
-      console.warn(`[tailwind-styled-v4] Theme "${name}" not registered.`);
-      return;
-    }
-    target.dataset.theme = name;
-  }
-  /**
-   * Get current active theme name from data-theme attribute.
-   */
-  current(target = document.documentElement) {
-    var _a;
-    if (typeof document === "undefined") return this.defaultTheme;
-    return (_a = target.dataset.theme) != null ? _a : this.defaultTheme;
-  }
-};
-function createMultiTheme(config) {
-  var _a;
-  const registry = new ThemeRegistry();
-  const light = createTheme(config.contract, "light", config.light, true);
-  const dark = createTheme(config.contract, "dark", config.dark, false);
-  registry.register(light, true);
-  registry.register(dark);
-  for (const [name, values] of Object.entries((_a = config.extras) != null ? _a : {})) {
-    registry.register(createTheme(config.contract, name, values));
-  }
-  return {
-    registry,
-    vars: config.contract._vars,
-    light,
-    dark
-  };
-}
-function compileDesignTokens(tokens, prefix = "") {
-  const vars = [];
-  function flatten(obj, path) {
-    for (const [key, value] of Object.entries(obj)) {
-      const varPath = path ? `${path}-${key}` : key;
-      if (typeof value === "string") {
-        vars.push(`  --${varPath}: ${value};`);
-      } else {
-        flatten(value, varPath);
-      }
-    }
-  }
-  flatten(tokens, prefix);
-  return `:root {
-${vars.join("\n")}
-}`;
-}
-
-export { ThemeRegistry, compileDesignTokens, createMultiTheme, createTheme, defineThemeContract };
-//# sourceMappingURL=theme.js.map
-//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../theme/src/index.ts"],"names":[],"mappings":";;;AAqFO,SAAS,oBAAwC,KAAA,EAA4B;AAClF,EAAA,MAAM,OAAO,EAAC;AAEd,EAAA,KAAA,MAAW,SAAS,KAAA,EAAO;AACxB,IAAC,IAAA,CAAa,KAAK,CAAA,GAAI,EAAC;AACzB,IAAA,KAAA,MAAW,KAAA,IAAS,KAAA,CAAM,KAAK,CAAA,EAAG;AAC/B,MAAC,IAAA,CAAa,KAAK,CAAA,CAAE,KAAK,IAAI,CAAA,MAAA,EAAS,KAAK,IAAI,KAAK,CAAA,CAAA,CAAA;AAAA,IACxD;AAAA,EACF;AAEA,EAAA,OAAO,EAAE,SAAA,EAAW,KAAA,EAAO,KAAA,EAAO,IAAA,EAAK;AACzC;AAcO,SAAS,WAAA,CACd,QAAA,EACA,IAAA,EACA,MAAA,EACA,SAAS,KAAA,EACC;AACV,EAAA,MAAM,WAAmC,EAAC;AAC1C,EAAA,MAAM,WAAqB,EAAC;AAE5B,EAAA,KAAA,MAAW,SAAS,MAAA,EAAQ;AAC1B,IAAA,KAAA,MAAW,KAAA,IAAS,MAAA,CAAO,KAAK,CAAA,EAAG;AACjC,MAAA,MAAM,OAAA,GAAU,CAAA,EAAA,EAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AACnC,MAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,KAAK,CAAA,CAAE,KAAK,CAAA;AACjC,MAAA,QAAA,CAAS,OAAO,CAAA,GAAI,KAAA;AACpB,MAAA,QAAA,CAAS,IAAA,CAAK,CAAA,EAAA,EAAK,OAAO,CAAA,EAAA,EAAK,KAAK,CAAA,CAAA,CAAG,CAAA;AAAA,IACzC;AAAA,EACF;AAEA,EAAA,MAAM,QAAA,GAAW,MAAA,GAAS,OAAA,GAAU,CAAA,aAAA,EAAgB,IAAI,CAAA,EAAA,CAAA;AACxD,EAAA,MAAM,GAAA,GAAM,GAAG,QAAQ,CAAA;AAAA,EAAO,QAAA,CAAS,IAAA,CAAK,IAAI,CAAC;AAAA,CAAA,CAAA;AAEjD,EAAA,OAAO;AAAA,IACL,IAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA,EAAM,QAAA;AAAA,IACN;AAAA,GACF;AACF;AAMO,IAAM,gBAAN,MAAoB;AAAA,EAApB,WAAA,GAAA;AACL,IAAA,IAAA,CAAQ,MAAA,uBAAa,GAAA,EAAwB;AAC7C,IAAA,IAAA,CAAQ,YAAA,GAA8B,IAAA;AAAA,EAAA;AAAA;AAAA,EAGtC,QAAA,CAA6B,KAAA,EAAiB,SAAA,GAAY,KAAA,EAAa;AACrE,IAAA,IAAA,CAAK,MAAA,CAAO,GAAA,CAAI,KAAA,CAAM,IAAA,EAAM,KAAK,CAAA;AACjC,IAAA,IAAI,SAAA,IAAa,CAAC,IAAA,CAAK,YAAA,EAAc;AACnC,MAAA,IAAA,CAAK,eAAe,KAAA,CAAM,IAAA;AAAA,IAC5B;AACA,IAAA,OAAO,IAAA;AAAA,EACT;AAAA;AAAA,EAGA,IAAI,IAAA,EAAsC;AACxC,IAAA,OAAO,IAAA,CAAK,MAAA,CAAO,GAAA,CAAI,IAAI,CAAA;AAAA,EAC7B;AAAA;AAAA,EAGA,KAAA,GAAkB;AAChB,IAAA,OAAO,KAAA,CAAM,IAAA,CAAK,IAAA,CAAK,MAAA,CAAO,MAAM,CAAA;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,WAAA,GAAsB;AACpB,IAAA,OAAO,KAAA,CAAM,IAAA,CAAK,IAAA,CAAK,MAAA,CAAO,QAAQ,CAAA,CACnC,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,GAAG,CAAA,CAChB,KAAK,MAAM,CAAA;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,IAAA,EAA6B;AAzL3C,IAAA,IAAA,EAAA,EAAA,EAAA;AA0LI,IAAA,OAAA,CAAO,gBAAK,MAAA,CAAO,GAAA,CAAI,IAAI,CAAA,KAApB,IAAA,GAAA,MAAA,GAAA,EAAA,CAAuB,QAAvB,IAAA,GAAA,EAAA,GAA8B,IAAA;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAA,CAAO,UAAU,aAAA,EAAqB;AACpC,IAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AAErC,IAAA,IAAI,KAAA,GAAQ,QAAA,CAAS,cAAA,CAAe,OAAO,CAAA;AAC3C,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,KAAA,GAAQ,QAAA,CAAS,cAAc,OAAO,CAAA;AACtC,MAAA,KAAA,CAAM,EAAA,GAAK,OAAA;AACX,MAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;AAAA,IACjC;AACA,IAAA,KAAA,CAAM,WAAA,GAAc,KAAK,WAAA,EAAY;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,CAAM,IAAA,EAAc,MAAA,GAAsB,QAAA,CAAS,eAAA,EAAuB;AACxE,IAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,IAAA,IAAI,CAAC,IAAA,CAAK,MAAA,CAAO,GAAA,CAAI,IAAI,CAAA,EAAG;AAC1B,MAAA,OAAA,CAAQ,IAAA,CAAK,CAAA,4BAAA,EAA+B,IAAI,CAAA,iBAAA,CAAmB,CAAA;AACnE,MAAA;AAAA,IACF;AACA,IAAA,MAAA,CAAO,QAAQ,KAAA,GAAQ,IAAA;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAA,CAAQ,MAAA,GAAsB,QAAA,CAAS,eAAA,EAAgC;AA5NzE,IAAA,IAAA,EAAA;AA6NI,IAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,IAAA,CAAK,YAAA;AACjD,IAAA,OAAA,CAAO,EAAA,GAAA,MAAA,CAAO,OAAA,CAAQ,KAAA,KAAf,IAAA,GAAA,EAAA,GAAwB,IAAA,CAAK,YAAA;AAAA,EACtC;AACF;AAoCO,SAAS,iBACd,MAAA,EAMA;AA3QF,EAAA,IAAA,EAAA;AA4QE,EAAA,MAAM,QAAA,GAAW,IAAI,aAAA,EAAc;AAEnC,EAAA,MAAM,QAAQ,WAAA,CAAY,MAAA,CAAO,UAAU,OAAA,EAAS,MAAA,CAAO,OAAO,IAAI,CAAA;AACtE,EAAA,MAAM,OAAO,WAAA,CAAY,MAAA,CAAO,UAAU,MAAA,EAAQ,MAAA,CAAO,MAAM,KAAK,CAAA;AAEpE,EAAA,QAAA,CAAS,QAAA,CAAS,OAAO,IAAI,CAAA;AAC7B,EAAA,QAAA,CAAS,SAAS,IAAI,CAAA;AAEtB,EAAA,KAAA,MAAW,CAAC,IAAA,EAAM,MAAM,CAAA,IAAK,MAAA,CAAO,OAAA,CAAA,CAAQ,EAAA,GAAA,MAAA,CAAO,MAAA,KAAP,IAAA,GAAA,EAAA,GAAiB,EAAE,CAAA,EAAG;AAChE,IAAA,QAAA,CAAS,SAAS,WAAA,CAAY,MAAA,CAAO,QAAA,EAAU,IAAA,EAAM,MAAW,CAAC,CAAA;AAAA,EACnE;AAEA,EAAA,OAAO;AAAA,IACL,QAAA;AAAA,IACA,IAAA,EAAM,OAAO,QAAA,CAAS,KAAA;AAAA,IACtB,KAAA;AAAA,IACA;AAAA,GACF;AACF;AAiCO,SAAS,mBAAA,CAAoB,MAAA,EAAsB,MAAA,GAAS,EAAA,EAAY;AAC7E,EAAA,MAAM,OAAiB,EAAC;AAExB,EAAA,SAAS,OAAA,CAAQ,KAAmB,IAAA,EAAc;AAChD,IAAA,KAAA,MAAW,CAAC,GAAA,EAAK,KAAK,KAAK,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAA,EAAG;AAC9C,MAAA,MAAM,UAAU,IAAA,GAAO,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,GAAK,GAAA;AAC1C,MAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,QAAA,IAAA,CAAK,IAAA,CAAK,CAAA,IAAA,EAAO,OAAO,CAAA,EAAA,EAAK,KAAK,CAAA,CAAA,CAAG,CAAA;AAAA,MACvC,CAAA,MAAO;AACL,QAAA,OAAA,CAAQ,OAAuB,OAAO,CAAA;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAA,CAAQ,QAAQ,MAAM,CAAA;AACtB,EAAA,OAAO,CAAA;AAAA,EAAY,IAAA,CAAK,IAAA,CAAK,IAAI,CAAC;AAAA,CAAA,CAAA;AACpC","file":"theme.js","sourcesContent":["/**\n * tailwind-styled-v4 — Multi-Theme Engine\n *\n * Enterprise-grade theming. Support light/dark/brand themes dengan\n * CSS variables. Zero runtime overhead — themes di-resolve via CSS.\n *\n * Fitur:\n *  - Multiple named themes (light, dark, brand, high-contrast)\n *  - CSS variable output (Tailwind v4 compatible)\n *  - Theme contract (TypeScript-safe — missing tokens = TS error)\n *  - Per-component theme override\n *  - White-label ready\n *\n * @example\n *   // 1. Define contract\n *   const contract = defineThemeContract({\n *     colors: { bg: \"\", fg: \"\", primary: \"\", muted: \"\" },\n *     font:   { sans: \"\", mono: \"\" },\n *   })\n *\n *   // 2. Create themes\n *   const lightTheme = createTheme(contract, \"light\", {\n *     colors: { bg: \"#ffffff\", fg: \"#09090b\", primary: \"#3b82f6\", muted: \"#71717a\" },\n *     font:   { sans: \"InterVariable, sans-serif\", mono: \"JetBrains Mono, monospace\" },\n *   })\n *\n *   const darkTheme = createTheme(contract, \"dark\", {\n *     colors: { bg: \"#09090b\", fg: \"#fafafa\", primary: \"#60a5fa\", muted: \"#a1a1aa\" },\n *     font:   { sans: \"InterVariable, sans-serif\", mono: \"JetBrains Mono, monospace\" },\n *   })\n *\n *   // 3. Use tokens in components\n *   const Card = tw.div`bg-[var(--colors-bg)] text-[var(--colors-fg)] p-6`\n *\n *   // 4. Apply in layout\n *   // <html data-theme=\"dark\"> or inject CSS\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport type TokenMap = Record<string, Record<string, string>>\n\nexport interface ThemeContract<T extends TokenMap> {\n  _contract: T\n  _vars: ThemeVars<T>\n}\n\nexport type ThemeVars<T extends TokenMap> = {\n  [Group in keyof T]: {\n    [Token in keyof T[Group]]: string // \"var(--group-token)\"\n  }\n}\n\nexport interface Theme<T extends TokenMap> {\n  name: string\n  contract: ThemeContract<T>\n  values: T\n  /** CSS string to inject (`:root` or `[data-theme=\"name\"]`) */\n  css: string\n  /** CSS variables as a flat record */\n  vars: Record<string, string>\n  /** Apply this theme to an element via data attribute */\n  selector: string\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// defineThemeContract\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Define the shape of your theme. All themes must satisfy this contract.\n * Returns typed CSS variable references for use in tw components.\n *\n * @example\n * const contract = defineThemeContract({\n *   colors: { bg: \"\", fg: \"\", primary: \"\" },\n *   font: { sans: \"\" },\n * })\n *\n * // Use in components:\n * const Card = tw.div`bg-[${contract._vars.colors.bg}]`\n * // → tw.div`bg-[var(--colors-bg)]`\n */\nexport function defineThemeContract<T extends TokenMap>(shape: T): ThemeContract<T> {\n  const vars = {} as ThemeVars<T>\n\n  for (const group in shape) {\n    ;(vars as any)[group] = {}\n    for (const token in shape[group]) {\n      ;(vars as any)[group][token] = `var(--${group}-${token})`\n    }\n  }\n\n  return { _contract: shape, _vars: vars }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// createTheme\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Create a typed theme that satisfies a contract.\n *\n * @param contract - Theme contract from defineThemeContract()\n * @param name - Theme name (\"light\", \"dark\", \"brand\", etc.)\n * @param values - Token values (TypeScript enforces completeness)\n * @param asRoot - If true, use :root selector. Default: false (uses [data-theme])\n */\nexport function createTheme<T extends TokenMap>(\n  contract: ThemeContract<T>,\n  name: string,\n  values: T,\n  asRoot = false\n): Theme<T> {\n  const flatVars: Record<string, string> = {}\n  const cssLines: string[] = []\n\n  for (const group in values) {\n    for (const token in values[group]) {\n      const varName = `--${group}-${token}`\n      const value = values[group][token]\n      flatVars[varName] = value\n      cssLines.push(`  ${varName}: ${value};`)\n    }\n  }\n\n  const selector = asRoot ? \":root\" : `[data-theme=\"${name}\"]`\n  const css = `${selector} {\\n${cssLines.join(\"\\n\")}\\n}`\n\n  return {\n    name,\n    contract,\n    values,\n    css,\n    vars: flatVars,\n    selector,\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// ThemeRegistry — manage multiple themes\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport class ThemeRegistry {\n  private themes = new Map<string, Theme<any>>()\n  private defaultTheme: string | null = null\n\n  /** Register a theme */\n  register<T extends TokenMap>(theme: Theme<T>, isDefault = false): this {\n    this.themes.set(theme.name, theme)\n    if (isDefault || !this.defaultTheme) {\n      this.defaultTheme = theme.name\n    }\n    return this\n  }\n\n  /** Get a theme by name */\n  get(name: string): Theme<any> | undefined {\n    return this.themes.get(name)\n  }\n\n  /** Get all theme names */\n  names(): string[] {\n    return Array.from(this.themes.keys())\n  }\n\n  /**\n   * Generate combined CSS for all themes.\n   * Inject into <head> or a .css file.\n   *\n   * @example\n   * // In globals.css or layout.tsx\n   * const css = registry.generateCss()\n   */\n  generateCss(): string {\n    return Array.from(this.themes.values())\n      .map((t) => t.css)\n      .join(\"\\n\\n\")\n  }\n\n  /**\n   * Get the CSS for a specific theme only.\n   */\n  getThemeCss(name: string): string | null {\n    return this.themes.get(name)?.css ?? null\n  }\n\n  /**\n   * Inject all theme CSS into document <head> (browser only).\n   * Call once on app init.\n   */\n  inject(styleId = \"__tw_themes\"): void {\n    if (typeof document === \"undefined\") return\n\n    let style = document.getElementById(styleId) as HTMLStyleElement | null\n    if (!style) {\n      style = document.createElement(\"style\")\n      style.id = styleId\n      document.head.appendChild(style)\n    }\n    style.textContent = this.generateCss()\n  }\n\n  /**\n   * Switch active theme by setting data-theme on <html>.\n   */\n  apply(name: string, target: HTMLElement = document.documentElement): void {\n    if (typeof document === \"undefined\") return\n    if (!this.themes.has(name)) {\n      console.warn(`[tailwind-styled-v4] Theme \"${name}\" not registered.`)\n      return\n    }\n    target.dataset.theme = name\n  }\n\n  /**\n   * Get current active theme name from data-theme attribute.\n   */\n  current(target: HTMLElement = document.documentElement): string | null {\n    if (typeof document === \"undefined\") return this.defaultTheme\n    return target.dataset.theme ?? this.defaultTheme\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Convenience: createMultiTheme — shorthand for common light/dark setup\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface MultiThemeConfig<T extends TokenMap> {\n  contract: ThemeContract<T>\n  light: T\n  dark: T\n  /** Additional named themes (brand, high-contrast, etc.) */\n  extras?: Record<string, T>\n}\n\n/**\n * Create a ThemeRegistry with light/dark + optional extras in one call.\n *\n * @example\n * const { registry, vars } = createMultiTheme({\n *   contract: defineThemeContract({\n *     colors: { bg: \"\", fg: \"\", primary: \"\", border: \"\" }\n *   }),\n *   light: {\n *     colors: { bg: \"#fff\", fg: \"#09090b\", primary: \"#3b82f6\", border: \"#e5e7eb\" }\n *   },\n *   dark: {\n *     colors: { bg: \"#09090b\", fg: \"#fafafa\", primary: \"#60a5fa\", border: \"#27272a\" }\n *   },\n * })\n *\n * // Inject CSS:\n * registry.inject()\n *\n * // Use tokens in components:\n * const Card = tw.div`bg-[${vars.colors.bg}] text-[${vars.colors.fg}]`\n */\nexport function createMultiTheme<T extends TokenMap>(\n  config: MultiThemeConfig<T>\n): {\n  registry: ThemeRegistry\n  vars: ThemeVars<T>\n  light: Theme<T>\n  dark: Theme<T>\n} {\n  const registry = new ThemeRegistry()\n\n  const light = createTheme(config.contract, \"light\", config.light, true) // :root\n  const dark = createTheme(config.contract, \"dark\", config.dark, false)\n\n  registry.register(light, true)\n  registry.register(dark)\n\n  for (const [name, values] of Object.entries(config.extras ?? {})) {\n    registry.register(createTheme(config.contract, name, values as T))\n  }\n\n  return {\n    registry,\n    vars: config.contract._vars,\n    light,\n    dark,\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Design Token Compiler — generate CSS vars from token object\n// (Enterprise feature: sync with Figma variables)\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface DesignTokens {\n  [path: string]: string | DesignTokens\n}\n\n/**\n * Flatten nested design token object into CSS variables.\n * Supports Figma-style nested tokens.\n *\n * @example\n * compileDesignTokens({\n *   color: {\n *     brand: { primary: \"#3b82f6\", secondary: \"#6366f1\" },\n *     neutral: { 50: \"#fafafa\", 900: \"#09090b\" }\n *   },\n *   spacing: { base: \"4px\", lg: \"16px\" }\n * })\n * →\n * :root {\n *   --color-brand-primary: #3b82f6;\n *   --color-brand-secondary: #6366f1;\n *   --color-neutral-50: #fafafa;\n *   --color-neutral-900: #09090b;\n *   --spacing-base: 4px;\n *   --spacing-lg: 16px;\n * }\n */\nexport function compileDesignTokens(tokens: DesignTokens, prefix = \"\"): string {\n  const vars: string[] = []\n\n  function flatten(obj: DesignTokens, path: string) {\n    for (const [key, value] of Object.entries(obj)) {\n      const varPath = path ? `${path}-${key}` : key\n      if (typeof value === \"string\") {\n        vars.push(`  --${varPath}: ${value};`)\n      } else {\n        flatten(value as DesignTokens, varPath)\n      }\n    }\n  }\n\n  flatten(tokens, prefix)\n  return `:root {\\n${vars.join(\"\\n\")}\\n}`\n}\n"]}