tailwind-styled-v4 5.0.0 → 5.0.1

package/dist/testing.mjs

@@ -0,0 +1,158 @@
+/* tailwind-styled-v4 v5.0.1 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+
+// packages/testing/src/index.ts
+function toHaveClass(className) {
+  return (value) => {
+    const pass = Boolean(value?.classList?.contains(className));
+    return {
+      pass,
+      message: () => `expected element ${pass ? "not " : ""}to contain class '${className}'`
+    };
+  };
+}
+function toHaveClasses(classNames) {
+  return (value) => {
+    if (!value) return { pass: false, message: () => "element is null or undefined" };
+    const missing = classNames.filter((c) => !value.classList.contains(c));
+    const pass = missing.length === 0;
+    return {
+      pass,
+      message: () => pass ? `expected element not to have all classes: ${classNames.join(", ")}` : `expected element to have classes: ${missing.join(", ")}`
+    };
+  };
+}
+function toNotHaveClass(className) {
+  return (value) => {
+    if (!value) return { pass: false, message: () => "element is null or undefined" };
+    const pass = !value.classList.contains(className);
+    return {
+      pass,
+      message: () => `expected element ${pass ? "" : "not "}to have class '${className}'`
+    };
+  };
+}
+var tailwindMatchers = { toHaveClass, toHaveClasses, toNotHaveClass };
+function expectClasses(element, classes) {
+  if (!element) throw new Error("expectClasses: element is null or undefined");
+  const missing = classes.filter((c) => !element.classList.contains(c));
+  if (missing.length > 0) {
+    throw new Error(
+      `Expected element to have classes: ${missing.join(", ")}
+  Actual classes: ${element.className}`
+    );
+  }
+}
+function expectNoClasses(element, classes) {
+  if (!element) throw new Error("expectNoClasses: element is null or undefined");
+  const found = classes.filter((c) => element.classList.contains(c));
+  if (found.length > 0) {
+    throw new Error(
+      `Expected element NOT to have classes: ${found.join(", ")}
+  Actual classes: ${element.className}`
+    );
+  }
+}
+function getClassList(element) {
+  if (!element) return [];
+  return Array.from(element.classList).sort();
+}
+function snapshotVariants(render, variants) {
+  return variants.map((variant) => ({
+    variant,
+    output: render(variant)
+  }));
+}
+function expandVariantMatrix(matrix) {
+  const keys = Object.keys(matrix);
+  if (keys.length === 0) return [{}];
+  const result = [];
+  function walk(index, current) {
+    if (index >= keys.length) {
+      result.push({ ...current });
+      return;
+    }
+    const key = keys[index];
+    for (const value of matrix[key] ?? []) {
+      current[key] = value;
+      walk(index + 1, current);
+    }
+  }
+  walk(0, {});
+  return result;
+}
+function testAllVariants(matrix, testFn) {
+  const combinations = expandVariantMatrix(matrix);
+  for (const variant of combinations) {
+    testFn(variant);
+  }
+}
+function expectClassesEqual(actual, expected) {
+  const actualSet = new Set(actual.trim().split(/\s+/).filter(Boolean));
+  const expectedSet = new Set(expected.trim().split(/\s+/).filter(Boolean));
+  const missing = [...expectedSet].filter((c) => !actualSet.has(c));
+  const extra = [...actualSet].filter((c) => !expectedSet.has(c));
+  if (missing.length > 0 || extra.length > 0) {
+    const parts = [];
+    if (missing.length > 0) parts.push(`Missing: ${missing.join(", ")}`);
+    if (extra.length > 0) parts.push(`Extra:   ${extra.join(", ")}`);
+    throw new Error(`Class mismatch:
+  ${parts.join("\n  ")}`);
+  }
+}
+function expectEngineMetrics(metrics, expectations) {
+  if (expectations.minFiles !== void 0) {
+    const actual = metrics.totalFiles ?? 0;
+    if (actual < expectations.minFiles) {
+      throw new Error(
+        `Engine metrics: expected at least ${expectations.minFiles} files, got ${actual}`
+      );
+    }
+  }
+  if (expectations.maxBuildTimeMs !== void 0) {
+    const actual = metrics.buildTimeMs ?? 0;
+    if (actual > expectations.maxBuildTimeMs) {
+      throw new Error(
+        `Engine metrics: build took ${actual}ms, expected \u2264 ${expectations.maxBuildTimeMs}ms`
+      );
+    }
+  }
+  if (expectations.minUniqueClasses !== void 0) {
+    const actual = metrics.uniqueClasses ?? 0;
+    if (actual < expectations.minUniqueClasses) {
+      throw new Error(
+        `Engine metrics: expected at least ${expectations.minUniqueClasses} unique classes, got ${actual}`
+      );
+    }
+  }
+  if (expectations.cacheHitRateMin !== void 0) {
+    const hits = metrics.cacheHits ?? 0;
+    const total = hits + (metrics.cacheMisses ?? 0);
+    const rate = total > 0 ? hits / total : 0;
+    if (rate < expectations.cacheHitRateMin) {
+      throw new Error(
+        `Engine metrics: cache hit rate ${(rate * 100).toFixed(1)}%, expected \u2265 ${(expectations.cacheHitRateMin * 100).toFixed(1)}%`
+      );
+    }
+  }
+}
+function toHaveEngineMetrics(expectations) {
+  return (metrics) => {
+    try {
+      expectEngineMetrics(metrics, expectations);
+      return { pass: true, message: () => "engine metrics matched expectations" };
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      return { pass: false, message: () => msg };
+    }
+  };
+}
+var tailwindMatchersWithMetrics = {
+  toHaveClass,
+  toHaveClasses,
+  toNotHaveClass,
+  toHaveEngineMetrics
+};
+
+export { expandVariantMatrix, expectClasses, expectClassesEqual, expectEngineMetrics, expectNoClasses, getClassList, snapshotVariants, tailwindMatchers, tailwindMatchersWithMetrics, testAllVariants, toHaveClass, toHaveClasses, toHaveEngineMetrics, toNotHaveClass };
+//# sourceMappingURL=testing.mjs.map
+//# sourceMappingURL=testing.mjs.map

package/dist/testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/testing/src/index.ts"],"names":[],"mappings":"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","file":"testing.mjs","sourcesContent":["/**\n * tailwind-styled-v4 — Testing Utilities\n *\n * Integrasi dengan Jest / Vitest untuk test komponen tw().\n *\n * @example\n * // vitest.config.ts\n * import { tailwindStyledSetup } from '@tailwind-styled/testing'\n * export default defineConfig({ test: { setupFiles: ['@tailwind-styled/testing/setup'] } })\n *\n * // Button.test.ts\n * import { render } from '@testing-library/react'\n * import { expectClasses, getVariantClass } from '@tailwind-styled/testing'\n *\n * test('Button renders primary variant', () => {\n *   const { container } = render(<Button intent=\"primary\" />)\n *   expectClasses(container.firstChild, ['bg-blue-500', 'text-white'])\n * })\n */\n\n// ─── Jest/Vitest custom matchers ─────────────────────────────────────────────\n\n/**\n * Custom matcher: toHaveClass\n * Dipakai langsung atau via expect.extend(tailwindMatchers)\n *\n * @example\n * expect(element).toHaveClass('bg-blue-500')\n */\nexport function toHaveClass(className: string) {\n  return (value: { classList?: { contains: (name: string) => boolean } }) => {\n    const pass = Boolean(value?.classList?.contains(className))\n    return {\n      pass,\n      message: () => `expected element ${pass ? \"not \" : \"\"}to contain class '${className}'`,\n    }\n  }\n}\n\n/**\n * Custom matcher: toHaveClasses\n * Cek beberapa class sekaligus\n *\n * @example\n * expect(element).toHaveClasses(['px-4', 'py-2', 'rounded'])\n */\nexport function toHaveClasses(classNames: string[]) {\n  return (value: Element | null | undefined) => {\n    if (!value) return { pass: false, message: () => \"element is null or undefined\" }\n    const missing = classNames.filter((c) => !value.classList.contains(c))\n    const pass = missing.length === 0\n    return {\n      pass,\n      message: () =>\n        pass\n          ? `expected element not to have all classes: ${classNames.join(\", \")}`\n          : `expected element to have classes: ${missing.join(\", \")}`,\n    }\n  }\n}\n\n/**\n * Custom matcher: toNotHaveClass\n *\n * @example\n * expect(element).toNotHaveClass('hidden')\n */\nexport function toNotHaveClass(className: string) {\n  return (value: Element | null | undefined) => {\n    if (!value) return { pass: false, message: () => \"element is null or undefined\" }\n    const pass = !value.classList.contains(className)\n    return {\n      pass,\n      message: () => `expected element ${pass ? \"\" : \"not \"}to have class '${className}'`,\n    }\n  }\n}\n\n/** Semua matchers — pakai dengan expect.extend(tailwindMatchers) */\nexport const tailwindMatchers = { toHaveClass, toHaveClasses, toNotHaveClass }\n\n// ─── Helper utilities ────────────────────────────────────────────────────────\n\n/**\n * Assert element punya semua class yang diharapkan.\n * Lebih ergonomis dari `expect(el).toHaveClasses([...])` untuk banyak class.\n *\n * @example\n * const { container } = render(<Button intent=\"primary\" size=\"lg\" />)\n * expectClasses(container.firstChild, ['bg-blue-500', 'text-white', 'h-12'])\n */\nexport function expectClasses(element: Element | null | undefined, classes: string[]): void {\n  if (!element) throw new Error(\"expectClasses: element is null or undefined\")\n  const missing = classes.filter((c) => !element.classList.contains(c))\n  if (missing.length > 0) {\n    throw new Error(\n      `Expected element to have classes: ${missing.join(\", \")}\\n` +\n        `  Actual classes: ${element.className}`\n    )\n  }\n}\n\n/**\n * Assert element tidak punya class tertentu.\n *\n * @example\n * expectNoClasses(container.firstChild, ['opacity-50', 'cursor-not-allowed'])\n */\nexport function expectNoClasses(element: Element | null | undefined, classes: string[]): void {\n  if (!element) throw new Error(\"expectNoClasses: element is null or undefined\")\n  const found = classes.filter((c) => element.classList.contains(c))\n  if (found.length > 0) {\n    throw new Error(\n      `Expected element NOT to have classes: ${found.join(\", \")}\\n` +\n        `  Actual classes: ${element.className}`\n    )\n  }\n}\n\n/**\n * Extract class list dari element sebagai sorted array.\n * Berguna untuk snapshot testing.\n *\n * @example\n * expect(getClassList(element)).toMatchSnapshot()\n */\nexport function getClassList(element: Element | null | undefined): string[] {\n  if (!element) return []\n  return Array.from(element.classList).sort()\n}\n\n// ─── Variant snapshot helpers ────────────────────────────────────────────────\n\n/**\n * Buat snapshot dari semua kombinasi variant.\n * Berguna untuk regression testing pada styled components.\n *\n * @example\n * const buttonVariants = snapshotVariants(\n *   (props) => {\n *     const { container } = render(<Button {...props} />)\n *     return container.firstChild?.className ?? ''\n *   },\n *   [\n *     { intent: 'primary', size: 'sm' },\n *     { intent: 'primary', size: 'lg' },\n *     { intent: 'danger',  size: 'sm' },\n *   ]\n * )\n * expect(buttonVariants).toMatchSnapshot()\n */\nexport function snapshotVariants<T>(render: (variant: T) => string, variants: T[]) {\n  return variants.map((variant) => ({\n    variant,\n    output: render(variant),\n  }))\n}\n\n/**\n * Generate semua kombinasi dari variant matrix.\n *\n * @example\n * const combinations = expandVariantMatrix({\n *   intent: ['primary', 'danger'],\n *   size: ['sm', 'md', 'lg'],\n *   disabled: [true, false],\n * })\n * // → 2 × 3 × 2 = 12 kombinasi\n */\nexport function expandVariantMatrix(\n  matrix: Record<string, Array<string | number | boolean>>\n): Array<Record<string, string | number | boolean>> {\n  const keys = Object.keys(matrix)\n  if (keys.length === 0) return [{}]\n\n  const result: Array<Record<string, string | number | boolean>> = []\n\n  function walk(index: number, current: Record<string, string | number | boolean>) {\n    if (index >= keys.length) {\n      result.push({ ...current })\n      return\n    }\n    const key = keys[index]!\n    for (const value of matrix[key] ?? []) {\n      current[key] = value\n      walk(index + 1, current)\n    }\n  }\n\n  walk(0, {})\n  return result\n}\n\n/**\n * Test semua kombinasi variant sekaligus — no missing coverage.\n *\n * @example\n * testAllVariants(\n *   Button,\n *   { intent: ['primary','danger'], size: ['sm','lg'] },\n *   (el, variant) => {\n *     expect(el).not.toBeNull()\n *     if (variant.intent === 'primary') expectClasses(el, ['bg-blue-500'])\n *   }\n * )\n */\nexport function testAllVariants(\n  matrix: Record<string, Array<string | number | boolean>>,\n  testFn: (variant: Record<string, string | number | boolean>) => void\n): void {\n  const combinations = expandVariantMatrix(matrix)\n  for (const variant of combinations) {\n    testFn(variant)\n  }\n}\n\n// ─── CSS-in-JS output assertions ─────────────────────────────────────────────\n\n/**\n * Bandingkan dua class string secara semantik (urutan tidak penting).\n *\n * @example\n * expectClassesEqual('px-4 py-2 bg-blue-500', 'bg-blue-500 px-4 py-2') // pass\n */\nexport function expectClassesEqual(actual: string, expected: string): void {\n  const actualSet = new Set(actual.trim().split(/\\s+/).filter(Boolean))\n  const expectedSet = new Set(expected.trim().split(/\\s+/).filter(Boolean))\n\n  const missing = [...expectedSet].filter((c) => !actualSet.has(c))\n  const extra = [...actualSet].filter((c) => !expectedSet.has(c))\n\n  if (missing.length > 0 || extra.length > 0) {\n    const parts: string[] = []\n    if (missing.length > 0) parts.push(`Missing: ${missing.join(\", \")}`)\n    if (extra.length > 0) parts.push(`Extra:   ${extra.join(\", \")}`)\n    throw new Error(`Class mismatch:\\n  ${parts.join(\"\\n  \")}`)\n  }\n}\n\n// ─── Engine metrics matchers ──────────────────────────────────────────────────\n\nexport interface EngineMetricsSnapshot {\n  totalFiles?: number\n  uniqueClasses?: number\n  buildTimeMs?: number\n  cssBytes?: number\n  cacheHits?: number\n  cacheMisses?: number\n  incrementalRuns?: number\n  fullRescans?: number\n}\n\n/**\n * Assert engine metrics snapshot meets minimum thresholds.\n *\n * @example\n * const result = await engine.build()\n * expectEngineMetrics(metrics.snapshot(), {\n *   totalFiles: 10,\n *   buildTimeMs: 5000, // max\n * })\n */\nexport function expectEngineMetrics(\n  metrics: EngineMetricsSnapshot,\n  expectations: {\n    minFiles?: number\n    maxBuildTimeMs?: number\n    minUniqueClasses?: number\n    cacheHitRateMin?: number // 0–1\n  }\n): void {\n  if (expectations.minFiles !== undefined) {\n    const actual = metrics.totalFiles ?? 0\n    if (actual < expectations.minFiles) {\n      throw new Error(\n        `Engine metrics: expected at least ${expectations.minFiles} files, got ${actual}`\n      )\n    }\n  }\n\n  if (expectations.maxBuildTimeMs !== undefined) {\n    const actual = metrics.buildTimeMs ?? 0\n    if (actual > expectations.maxBuildTimeMs) {\n      throw new Error(\n        `Engine metrics: build took ${actual}ms, expected ≤ ${expectations.maxBuildTimeMs}ms`\n      )\n    }\n  }\n\n  if (expectations.minUniqueClasses !== undefined) {\n    const actual = metrics.uniqueClasses ?? 0\n    if (actual < expectations.minUniqueClasses) {\n      throw new Error(\n        `Engine metrics: expected at least ${expectations.minUniqueClasses} unique classes, got ${actual}`\n      )\n    }\n  }\n\n  if (expectations.cacheHitRateMin !== undefined) {\n    const hits = metrics.cacheHits ?? 0\n    const total = hits + (metrics.cacheMisses ?? 0)\n    const rate = total > 0 ? hits / total : 0\n    if (rate < expectations.cacheHitRateMin) {\n      throw new Error(\n        `Engine metrics: cache hit rate ${(rate * 100).toFixed(1)}%, expected ≥ ${(expectations.cacheHitRateMin * 100).toFixed(1)}%`\n      )\n    }\n  }\n}\n\n/**\n * Custom Jest/Vitest matcher: toHaveEngineMetrics\n *\n * @example\n * expect(metrics).toHaveEngineMetrics({ minFiles: 1 })\n */\nexport function toHaveEngineMetrics(expectations: Parameters<typeof expectEngineMetrics>[1]) {\n  return (metrics: EngineMetricsSnapshot) => {\n    try {\n      expectEngineMetrics(metrics, expectations)\n      return { pass: true, message: () => \"engine metrics matched expectations\" }\n    } catch (e: unknown) {\n      const msg = e instanceof Error ? e.message : String(e)\n      return { pass: false, message: () => msg }\n    }\n  }\n}\n\n/** All matchers including engine metrics */\nexport const tailwindMatchersWithMetrics = {\n  toHaveClass,\n  toHaveClasses,\n  toNotHaveClass,\n  toHaveEngineMetrics,\n}\n"]}

package/dist/theme.d.mts

@@ -0,0 +1,188 @@
+export { L as LiveTokenEngineBridge, a as LiveTokenSet, T as TokenMap, b as TokenSubscriber, c as applyTokenSet, d as createUseTokens, g as generateTokenCssString, e as getToken, f as getTokens, l as liveToken, h as liveTokenEngine, s as setToken, i as setTokens, j as subscribeTokens, t as tokenRef, k as tokenVar } from './liveTokenEngine-DYN3Zale.mjs';
+
+/**
+ * tailwind-styled-v5 — Multi-Theme Engine + Live Token Engine
+ *
+ * Enterprise-grade theming. Support light/dark/brand themes dengan
+ * CSS variables. Zero runtime overhead — themes di-resolve via CSS.
+ *
+ * Live token engine provides runtime token state management with
+ * CSS variable sync to document root.
+ *
+ * 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
+ *  - Live token engine (runtime token state + CSS sync)
+ *
+ * @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 ThemeTokenMap = Record<string, Record<string, string>>;
+interface ThemeContract<T extends ThemeTokenMap> {
+    _contract: T;
+    _vars: ThemeVars<T>;
+}
+type ThemeVars<T extends ThemeTokenMap> = {
+    [Group in keyof T]: {
+        [Token in keyof T[Group]]: string;
+    };
+};
+interface Theme<T extends ThemeTokenMap> {
+    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 ThemeTokenMap>(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 ThemeTokenMap>(contract: ThemeContract<T>, name: string, values: T, asRoot?: boolean): Theme<T>;
+declare class ThemeRegistry {
+    private themes;
+    private defaultTheme;
+    /** Register a theme */
+    register<T extends ThemeTokenMap>(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 ThemeTokenMap> {
+    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 ThemeTokenMap>(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 ThemeTokenMap, type ThemeVars, compileDesignTokens, createMultiTheme, createTheme, defineThemeContract };

package/dist/theme.d.ts

@@ -0,0 +1,188 @@
+export { L as LiveTokenEngineBridge, a as LiveTokenSet, T as TokenMap, b as TokenSubscriber, c as applyTokenSet, d as createUseTokens, g as generateTokenCssString, e as getToken, f as getTokens, l as liveToken, h as liveTokenEngine, s as setToken, i as setTokens, j as subscribeTokens, t as tokenRef, k as tokenVar } from './liveTokenEngine-DYN3Zale.js';
+
+/**
+ * tailwind-styled-v5 — Multi-Theme Engine + Live Token Engine
+ *
+ * Enterprise-grade theming. Support light/dark/brand themes dengan
+ * CSS variables. Zero runtime overhead — themes di-resolve via CSS.
+ *
+ * Live token engine provides runtime token state management with
+ * CSS variable sync to document root.
+ *
+ * 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
+ *  - Live token engine (runtime token state + CSS sync)
+ *
+ * @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 ThemeTokenMap = Record<string, Record<string, string>>;
+interface ThemeContract<T extends ThemeTokenMap> {
+    _contract: T;
+    _vars: ThemeVars<T>;
+}
+type ThemeVars<T extends ThemeTokenMap> = {
+    [Group in keyof T]: {
+        [Token in keyof T[Group]]: string;
+    };
+};
+interface Theme<T extends ThemeTokenMap> {
+    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 ThemeTokenMap>(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 ThemeTokenMap>(contract: ThemeContract<T>, name: string, values: T, asRoot?: boolean): Theme<T>;
+declare class ThemeRegistry {
+    private themes;
+    private defaultTheme;
+    /** Register a theme */
+    register<T extends ThemeTokenMap>(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 ThemeTokenMap> {
+    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 ThemeTokenMap>(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 ThemeTokenMap, type ThemeVars, compileDesignTokens, createMultiTheme, createTheme, defineThemeContract };