tailwind-styled-v4 4.0.0 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (194) hide show
  1. package/CHANGELOG.md +398 -0
  2. package/LICENSE +21 -0
  3. package/README.md +532 -0
  4. package/dist/analyzer.d.mts +114 -0
  5. package/dist/analyzer.d.ts +114 -0
  6. package/dist/analyzer.js +1555 -0
  7. package/dist/analyzer.js.map +1 -0
  8. package/dist/analyzer.mjs +1544 -0
  9. package/dist/analyzer.mjs.map +1 -0
  10. package/dist/animate.d.mts +46 -0
  11. package/dist/animate.d.ts +41 -112
  12. package/dist/animate.js +792 -235
  13. package/dist/animate.js.map +1 -1
  14. package/dist/animate.mjs +782 -0
  15. package/dist/animate.mjs.map +1 -0
  16. package/dist/atomic.d.mts +18 -0
  17. package/dist/atomic.d.ts +18 -0
  18. package/dist/atomic.js +191 -0
  19. package/dist/atomic.js.map +1 -0
  20. package/dist/atomic.mjs +185 -0
  21. package/dist/atomic.mjs.map +1 -0
  22. package/dist/cli.d.mts +1 -0
  23. package/dist/cli.d.ts +1 -0
  24. package/dist/cli.js +6063 -0
  25. package/dist/cli.js.map +1 -0
  26. package/dist/cli.mjs +6053 -0
  27. package/dist/cli.mjs.map +1 -0
  28. package/dist/{compiler.d.cts → compiler.d.mts} +503 -210
  29. package/dist/compiler.d.ts +503 -210
  30. package/dist/compiler.js +1549 -566
  31. package/dist/compiler.js.map +1 -1
  32. package/dist/{compiler.cjs → compiler.mjs} +1476 -627
  33. package/dist/compiler.mjs.map +1 -0
  34. package/dist/dashboard.d.mts +272 -0
  35. package/dist/dashboard.d.ts +272 -0
  36. package/dist/dashboard.js +249 -0
  37. package/dist/dashboard.js.map +1 -0
  38. package/dist/dashboard.mjs +239 -0
  39. package/dist/dashboard.mjs.map +1 -0
  40. package/dist/devtools.js +336 -211
  41. package/dist/devtools.js.map +1 -1
  42. package/dist/{devtools.cjs → devtools.mjs} +331 -220
  43. package/dist/devtools.mjs.map +1 -0
  44. package/dist/engine.d.mts +84 -0
  45. package/dist/engine.d.ts +84 -0
  46. package/dist/engine.js +3014 -0
  47. package/dist/engine.js.map +1 -0
  48. package/dist/engine.mjs +3005 -0
  49. package/dist/engine.mjs.map +1 -0
  50. package/dist/{index.d.cts → index.d.mts} +75 -4
  51. package/dist/index.d.ts +75 -4
  52. package/dist/index.js +1341 -149
  53. package/dist/index.js.map +1 -1
  54. package/dist/index.mjs +2162 -0
  55. package/dist/index.mjs.map +1 -0
  56. package/dist/liveTokenEngine-DYN3Zale.d.mts +34 -0
  57. package/dist/liveTokenEngine-DYN3Zale.d.ts +34 -0
  58. package/dist/next.d.mts +55 -0
  59. package/dist/next.d.ts +30 -20
  60. package/dist/next.js +6947 -149
  61. package/dist/next.js.map +1 -1
  62. package/dist/next.mjs +7050 -0
  63. package/dist/next.mjs.map +1 -0
  64. package/dist/plugin.d.mts +90 -0
  65. package/dist/plugin.d.ts +90 -0
  66. package/dist/plugin.js +185 -0
  67. package/dist/plugin.js.map +1 -0
  68. package/dist/plugin.mjs +174 -0
  69. package/dist/plugin.mjs.map +1 -0
  70. package/dist/pluginRegistry.d.mts +83 -0
  71. package/dist/pluginRegistry.d.ts +83 -0
  72. package/dist/pluginRegistry.js +303 -0
  73. package/dist/pluginRegistry.js.map +1 -0
  74. package/dist/pluginRegistry.mjs +298 -0
  75. package/dist/pluginRegistry.mjs.map +1 -0
  76. package/dist/{preset.d.cts → preset.d.mts} +29 -2
  77. package/dist/preset.d.ts +29 -2
  78. package/dist/preset.js +318 -21
  79. package/dist/preset.js.map +1 -1
  80. package/dist/preset.mjs +414 -0
  81. package/dist/preset.mjs.map +1 -0
  82. package/dist/rspack.d.mts +33 -0
  83. package/dist/rspack.d.ts +33 -0
  84. package/dist/rspack.js +55 -0
  85. package/dist/rspack.js.map +1 -0
  86. package/dist/rspack.mjs +45 -0
  87. package/dist/rspack.mjs.map +1 -0
  88. package/dist/runtime.d.mts +62 -0
  89. package/dist/runtime.d.ts +62 -0
  90. package/dist/runtime.js +207 -0
  91. package/dist/runtime.js.map +1 -0
  92. package/dist/runtime.mjs +188 -0
  93. package/dist/runtime.mjs.map +1 -0
  94. package/dist/runtimeCss.d.mts +65 -0
  95. package/dist/runtimeCss.d.ts +65 -0
  96. package/dist/runtimeCss.js +188 -0
  97. package/dist/runtimeCss.js.map +1 -0
  98. package/dist/runtimeCss.mjs +173 -0
  99. package/dist/runtimeCss.mjs.map +1 -0
  100. package/dist/scanner.d.mts +25 -0
  101. package/dist/scanner.d.ts +25 -0
  102. package/dist/scanner.js +717 -0
  103. package/dist/scanner.js.map +1 -0
  104. package/dist/scanner.mjs +703 -0
  105. package/dist/scanner.mjs.map +1 -0
  106. package/dist/shared.d.mts +85 -0
  107. package/dist/shared.d.ts +85 -0
  108. package/dist/shared.js +255 -0
  109. package/dist/shared.js.map +1 -0
  110. package/dist/shared.mjs +233 -0
  111. package/dist/shared.mjs.map +1 -0
  112. package/dist/storybookAddon.d.mts +108 -0
  113. package/dist/storybookAddon.d.ts +108 -0
  114. package/dist/storybookAddon.js +95 -0
  115. package/dist/storybookAddon.js.map +1 -0
  116. package/dist/storybookAddon.mjs +88 -0
  117. package/dist/storybookAddon.mjs.map +1 -0
  118. package/dist/svelte.d.mts +114 -0
  119. package/dist/svelte.d.ts +114 -0
  120. package/dist/svelte.js +67 -0
  121. package/dist/svelte.js.map +1 -0
  122. package/dist/svelte.mjs +59 -0
  123. package/dist/svelte.mjs.map +1 -0
  124. package/dist/testing.d.mts +185 -0
  125. package/dist/testing.d.ts +185 -0
  126. package/dist/testing.js +173 -0
  127. package/dist/testing.js.map +1 -0
  128. package/dist/testing.mjs +158 -0
  129. package/dist/testing.mjs.map +1 -0
  130. package/dist/{theme.d.cts → theme.d.mts} +18 -11
  131. package/dist/theme.d.ts +18 -11
  132. package/dist/theme.js +205 -19
  133. package/dist/theme.js.map +1 -1
  134. package/dist/theme.mjs +311 -0
  135. package/dist/theme.mjs.map +1 -0
  136. package/dist/types-DXr2PmGP.d.mts +31 -0
  137. package/dist/types-DXr2PmGP.d.ts +31 -0
  138. package/dist/vite.d.mts +51 -0
  139. package/dist/vite.d.ts +35 -6
  140. package/dist/vite.js +4254 -57
  141. package/dist/vite.js.map +1 -1
  142. package/dist/vite.mjs +4281 -0
  143. package/dist/vite.mjs.map +1 -0
  144. package/dist/vue.d.mts +89 -0
  145. package/dist/vue.d.ts +89 -0
  146. package/dist/vue.js +104 -0
  147. package/dist/vue.js.map +1 -0
  148. package/dist/vue.mjs +96 -0
  149. package/dist/vue.mjs.map +1 -0
  150. package/package.json +173 -67
  151. package/dist/animate.cjs +0 -252
  152. package/dist/animate.cjs.map +0 -1
  153. package/dist/animate.d.cts +0 -117
  154. package/dist/astTransform-ua-eapqs.d.cts +0 -41
  155. package/dist/astTransform-ua-eapqs.d.ts +0 -41
  156. package/dist/compiler.cjs.map +0 -1
  157. package/dist/css.cjs +0 -71
  158. package/dist/css.cjs.map +0 -1
  159. package/dist/css.d.cts +0 -45
  160. package/dist/css.d.ts +0 -45
  161. package/dist/css.js +0 -62
  162. package/dist/css.js.map +0 -1
  163. package/dist/devtools.cjs.map +0 -1
  164. package/dist/index.cjs +0 -1058
  165. package/dist/index.cjs.map +0 -1
  166. package/dist/next.cjs +0 -268
  167. package/dist/next.cjs.map +0 -1
  168. package/dist/next.d.cts +0 -45
  169. package/dist/plugins.cjs +0 -396
  170. package/dist/plugins.cjs.map +0 -1
  171. package/dist/plugins.d.cts +0 -231
  172. package/dist/plugins.d.ts +0 -231
  173. package/dist/plugins.js +0 -381
  174. package/dist/plugins.js.map +0 -1
  175. package/dist/preset.cjs +0 -129
  176. package/dist/preset.cjs.map +0 -1
  177. package/dist/theme.cjs +0 -154
  178. package/dist/theme.cjs.map +0 -1
  179. package/dist/turbopackLoader.cjs +0 -2689
  180. package/dist/turbopackLoader.cjs.map +0 -1
  181. package/dist/turbopackLoader.d.cts +0 -22
  182. package/dist/turbopackLoader.d.ts +0 -22
  183. package/dist/turbopackLoader.js +0 -2681
  184. package/dist/turbopackLoader.js.map +0 -1
  185. package/dist/vite.cjs +0 -105
  186. package/dist/vite.cjs.map +0 -1
  187. package/dist/vite.d.cts +0 -22
  188. package/dist/webpackLoader.cjs +0 -2670
  189. package/dist/webpackLoader.cjs.map +0 -1
  190. package/dist/webpackLoader.d.cts +0 -24
  191. package/dist/webpackLoader.d.ts +0 -24
  192. package/dist/webpackLoader.js +0 -2662
  193. package/dist/webpackLoader.js.map +0 -1
  194. /package/dist/{devtools.d.cts → devtools.d.mts} +0 -0
package/dist/theme.cjs DELETED
@@ -1,154 +0,0 @@
1
- 'use strict';
2
-
3
- /* tailwind-styled-v4 v4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
4
-
5
- // ../theme/src/index.ts
6
- function defineThemeContract(shape) {
7
- const vars = {};
8
- for (const group in shape) {
9
- vars[group] = {};
10
- for (const token in shape[group]) {
11
- vars[group][token] = `var(--${group}-${token})`;
12
- }
13
- }
14
- return { _contract: shape, _vars: vars };
15
- }
16
- function createTheme(contract, name, values, asRoot = false) {
17
- const flatVars = {};
18
- const cssLines = [];
19
- for (const group in values) {
20
- for (const token in values[group]) {
21
- const varName = `--${group}-${token}`;
22
- const value = values[group][token];
23
- flatVars[varName] = value;
24
- cssLines.push(` ${varName}: ${value};`);
25
- }
26
- }
27
- const selector = asRoot ? ":root" : `[data-theme="${name}"]`;
28
- const css = `${selector} {
29
- ${cssLines.join("\n")}
30
- }`;
31
- return {
32
- name,
33
- contract,
34
- values,
35
- css,
36
- vars: flatVars,
37
- selector
38
- };
39
- }
40
- var ThemeRegistry = class {
41
- constructor() {
42
- this.themes = /* @__PURE__ */ new Map();
43
- this.defaultTheme = null;
44
- }
45
- /** Register a theme */
46
- register(theme, isDefault = false) {
47
- this.themes.set(theme.name, theme);
48
- if (isDefault || !this.defaultTheme) {
49
- this.defaultTheme = theme.name;
50
- }
51
- return this;
52
- }
53
- /** Get a theme by name */
54
- get(name) {
55
- return this.themes.get(name);
56
- }
57
- /** Get all theme names */
58
- names() {
59
- return Array.from(this.themes.keys());
60
- }
61
- /**
62
- * Generate combined CSS for all themes.
63
- * Inject into <head> or a .css file.
64
- *
65
- * @example
66
- * // In globals.css or layout.tsx
67
- * const css = registry.generateCss()
68
- */
69
- generateCss() {
70
- return Array.from(this.themes.values()).map((t) => t.css).join("\n\n");
71
- }
72
- /**
73
- * Get the CSS for a specific theme only.
74
- */
75
- getThemeCss(name) {
76
- var _a, _b;
77
- return (_b = (_a = this.themes.get(name)) == null ? void 0 : _a.css) != null ? _b : null;
78
- }
79
- /**
80
- * Inject all theme CSS into document <head> (browser only).
81
- * Call once on app init.
82
- */
83
- inject(styleId = "__tw_themes") {
84
- if (typeof document === "undefined") return;
85
- let style = document.getElementById(styleId);
86
- if (!style) {
87
- style = document.createElement("style");
88
- style.id = styleId;
89
- document.head.appendChild(style);
90
- }
91
- style.textContent = this.generateCss();
92
- }
93
- /**
94
- * Switch active theme by setting data-theme on <html>.
95
- */
96
- apply(name, target = document.documentElement) {
97
- if (typeof document === "undefined") return;
98
- if (!this.themes.has(name)) {
99
- console.warn(`[tailwind-styled-v4] Theme "${name}" not registered.`);
100
- return;
101
- }
102
- target.dataset.theme = name;
103
- }
104
- /**
105
- * Get current active theme name from data-theme attribute.
106
- */
107
- current(target = document.documentElement) {
108
- var _a;
109
- if (typeof document === "undefined") return this.defaultTheme;
110
- return (_a = target.dataset.theme) != null ? _a : this.defaultTheme;
111
- }
112
- };
113
- function createMultiTheme(config) {
114
- var _a;
115
- const registry = new ThemeRegistry();
116
- const light = createTheme(config.contract, "light", config.light, true);
117
- const dark = createTheme(config.contract, "dark", config.dark, false);
118
- registry.register(light, true);
119
- registry.register(dark);
120
- for (const [name, values] of Object.entries((_a = config.extras) != null ? _a : {})) {
121
- registry.register(createTheme(config.contract, name, values));
122
- }
123
- return {
124
- registry,
125
- vars: config.contract._vars,
126
- light,
127
- dark
128
- };
129
- }
130
- function compileDesignTokens(tokens, prefix = "") {
131
- const vars = [];
132
- function flatten(obj, path) {
133
- for (const [key, value] of Object.entries(obj)) {
134
- const varPath = path ? `${path}-${key}` : key;
135
- if (typeof value === "string") {
136
- vars.push(` --${varPath}: ${value};`);
137
- } else {
138
- flatten(value, varPath);
139
- }
140
- }
141
- }
142
- flatten(tokens, prefix);
143
- return `:root {
144
- ${vars.join("\n")}
145
- }`;
146
- }
147
-
148
- exports.ThemeRegistry = ThemeRegistry;
149
- exports.compileDesignTokens = compileDesignTokens;
150
- exports.createMultiTheme = createMultiTheme;
151
- exports.createTheme = createTheme;
152
- exports.defineThemeContract = defineThemeContract;
153
- //# sourceMappingURL=theme.cjs.map
154
- //# sourceMappingURL=theme.cjs.map
package/dist/theme.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"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"]}