tailwind-styled-v4 1.0.0 → 1.0.1

package/dist/cli/init.js

@@ -0,0 +1,208 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/cli/init.ts
+var init_exports = {};
+__export(init_exports, {
+  runInit: () => runInit
+});
+module.exports = __toCommonJS(init_exports);
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var GREEN = (s) => `\x1B[32m${s}\x1B[0m`;
+var YELLOW = (s) => `\x1B[33m${s}\x1B[0m`;
+var CYAN = (s) => `\x1B[36m${s}\x1B[0m`;
+var BOLD = (s) => `\x1B[1m${s}\x1B[0m`;
+var DIM = (s) => `\x1B[2m${s}\x1B[0m`;
+function writeFile(absPath, content, force) {
+  const dir = import_path.default.dirname(absPath);
+  if (!import_fs.default.existsSync(dir)) import_fs.default.mkdirSync(dir, { recursive: true });
+  if (import_fs.default.existsSync(absPath) && !force) return "skipped";
+  import_fs.default.writeFileSync(absPath, content, "utf-8");
+  return "written";
+}
+function fileExists(cwd, ...parts) {
+  return import_fs.default.existsSync(import_path.default.join(cwd, ...parts));
+}
+function readJson(cwd, file) {
+  try {
+    return JSON.parse(import_fs.default.readFileSync(import_path.default.join(cwd, file), "utf-8"));
+  } catch {
+    return {};
+  }
+}
+function detectFramework(cwd) {
+  const pkg = readJson(cwd, "package.json");
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  if (deps["next"]) return "next";
+  if (deps["vite"]) return "vite";
+  if (deps["@remix-run/react"]) return "remix";
+  if (deps["astro"]) return "astro";
+  return "generic";
+}
+var VSCODE_SETTINGS = JSON.stringify({
+  "tailwindCSS.experimental.classRegex": [
+    ["tw\\.\\w+`([^`]*)`", "([^`]*)"],
+    ["tw\\.\\w+\\(([^)]*)\\)", '"([^"]*)"'],
+    ["cv\\(([^)]*)\\)", '"([^"]*)"'],
+    ["\\.extend`([^`]*)`", "([^`]*)"],
+    ['withTw\\([^,]+,\\s*"([^"]*)', '([^"]*)'],
+    ["cls`([^`]*)`", "([^`]*)"],
+    ["(?:cx|clsx|cn|cxm)\\(([^)]*)\\)", '"([^"]*)"']
+  ],
+  "tailwindCSS.includeLanguages": {
+    "typescript": "html",
+    "typescriptreact": "html"
+  },
+  "editor.quickSuggestions": { "strings": "on" },
+  "files.associations": { "*.css": "tailwindcss" }
+}, null, 2);
+var VSCODE_EXTENSIONS = JSON.stringify({
+  recommendations: [
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "styled-components.vscode-styled-components"
+  ]
+}, null, 2);
+function getNextConfig(_hasTs) {
+  return `/** @type {import('next').NextConfig} */
+// tailwind-styled-v4: wrap your config with withTailwindStyled
+// File: next.config.ts
+
+import { withTailwindStyled } from "tailwind-styled-v4/compiler"
+
+const nextConfig = {
+  // your existing config here
+}
+
+export default withTailwindStyled(nextConfig)
+`;
+}
+function getViteConfig(_hasTs) {
+  return `import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import { tailwindStyledVite } from "tailwind-styled-v4/compiler"
+
+// tailwind-styled-v4: add tailwindStyledVite() to plugins
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindStyledVite(),
+  ],
+})
+`;
+}
+var TAILWIND_CSS = `/* Tailwind CSS v4 \u2014 generated by tailwind-styled-v4 init */
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* Brand colors \u2014 customize as needed */
+  --color-brand:       #2563eb;
+  --color-brand-hover: #1d4ed8;
+}
+
+@layer base {
+  *, *::before, *::after { box-sizing: border-box; }
+  body { @apply antialiased; }
+}
+`;
+async function runInit(options) {
+  const { cwd, framework, force } = options;
+  const written = [];
+  const skipped = [];
+  function write(relPath, content) {
+    const result = writeFile(import_path.default.join(cwd, relPath), content, force);
+    if (result === "written") written.push(relPath);
+    else skipped.push(relPath);
+  }
+  console.info(BOLD("\n  tailwind-styled-v4 init\n"));
+  console.info(`  Framework: ${CYAN(framework)}`);
+  console.info(`  Directory: ${DIM(cwd)}
+`);
+  const _hasTs = fileExists(cwd, "tsconfig.json");
+  write(".vscode/settings.json", VSCODE_SETTINGS);
+  write(".vscode/extensions.json", VSCODE_EXTENSIONS);
+  const configHintPath = framework === "next" ? ".tailwind-styled-v4.next-config-hint.md" : framework === "vite" ? ".tailwind-styled-v4.vite-config-hint.md" : null;
+  if (configHintPath) {
+    const content = framework === "next" ? getNextConfig(_hasTs) : getViteConfig(_hasTs);
+    write(configHintPath, content);
+  }
+  if (framework === "next") {
+    const cssPath = fileExists(cwd, "app") ? "app/globals.css" : "src/app/globals.css";
+    if (!fileExists(cwd, cssPath)) write(cssPath, TAILWIND_CSS);
+    else skipped.push(cssPath + " (exists)");
+  } else if (framework === "vite" || framework === "remix") {
+    if (!fileExists(cwd, "src/index.css")) write("src/index.css", TAILWIND_CSS);
+    else skipped.push("src/index.css (exists)");
+  }
+  console.info("  " + BOLD("Files created:"));
+  written.forEach((f) => console.info("    " + GREEN("\u2713") + " " + f));
+  if (skipped.length > 0) {
+    console.info("\n  " + YELLOW("Skipped (already exists):"));
+    skipped.forEach((f) => console.info("    " + DIM("\u2022 " + f)));
+    console.info("  " + DIM("Run with --force to overwrite\n"));
+  }
+  console.info("\n  " + BOLD("Next steps:"));
+  if (framework === "next") {
+    console.info(`    1. Add ${CYAN("withTailwindStyled")} to your ${CYAN("next.config.ts")}:`);
+    console.info(`       ${DIM('import { withTailwindStyled } from "tailwind-styled-v4/compiler"')}`);
+    console.info(`       ${DIM("export default withTailwindStyled(nextConfig)")}`);
+  } else if (framework === "vite") {
+    console.info(`    1. Add ${CYAN("tailwindStyledVite()")} to your ${CYAN("vite.config.ts")} plugins`);
+  }
+  console.info(`    ${framework === "next" || framework === "vite" ? 2 : 1}. Install VSCode extension: ${CYAN("bradlc.vscode-tailwindcss")}`);
+  console.info(`    ${framework === "next" || framework === "vite" ? 3 : 2}. Start using:`);
+  console.info(`       ${DIM('import { tw } from "tailwind-styled-v4"')}`);
+  console.info(`       ${DIM("const Box = tw.div`p-4 bg-blue-500 rounded`")}
+`);
+}
+var args = process.argv.slice(2);
+var command = args[0];
+if (command === "init" || command === void 0) {
+  const cwd = process.cwd();
+  const framework = args.find((a) => a.startsWith("--framework="))?.split("=")[1] ?? detectFramework(cwd);
+  const force = args.includes("--force");
+  runInit({ cwd, framework, force }).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+} else {
+  console.error(`Unknown command: ${command}`);
+  console.info("Usage: npx tailwind-styled-v4 init [--framework=next|vite|remix|astro] [--force]");
+  process.exit(1);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  runInit
+});

package/dist/index.d.mts

@@ -37,39 +37,55 @@ interface ExtendableComponent {
 }
 
 /**
- * tailwind-styled-v4 — tw Proxy (PRO)
- *
- * The main entry point. Returns a Proxy that intercepts HTML tag access
- * and supports two syntaxes:
- *
- * ① Template literal (simple):
- *    const Box = tw.div`p-4 bg-zinc-900 rounded-xl`
- *
- * ② Object config (full control):
- *    const Button = tw.button({
- *      base: "px-4 py-2 rounded-lg font-medium",
- *      variants: {
- *        variant: { primary: "bg-blue-500 text-white", ghost: "bg-transparent" },
- *        size:    { sm: "h-8 text-sm", lg: "h-12 text-base" }
- *      },
- *      compoundVariants: [
- *        { variant: "primary", size: "lg", class: "shadow-lg shadow-blue-500/40" }
- *      ],
- *      defaultVariants: { variant: "primary", size: "sm" }
- *    })
- *
- * ③ Extend existing components:
- *    const Card = tw.div`p-6 rounded-2xl bg-zinc-900`
- *    const HeroCard = Card.extend`border border-zinc-700 shadow-xl`
- *
- * ④ Wrap existing styled / React components:
- *    const StyledLink = tw(Link)`underline text-blue-400`
+ * tailwind-styled-v4 v2 — tw
+ *
+ * ── Changelog v2 ──────────────────────────────────────────────────────────────
+ *
+ * FIX 1 — import { tw } undefined in Next.js / Vite
+ *   BEFORE: export const tw = new Proxy(fn, { get })
+ *           tsup splitting:true + Proxy = tw resolves undefined after chunk split
+ *   AFTER:  Object.assign(callable, { div, button, ... })
+ *           Plain object, pre-built at module load, transparent to all bundlers
+ *
+ * FIX 2 — tw.div<Props>`${({ $isHover }) => ...}` TypeScript generic
+ *   BEFORE: TwTagFactory not generic → "Binding element '$isHover' implicitly has 'any' type"
+ *   AFTER:  TwTagFactory<P> is a generic function → full type inference on template interpolations
+ *
+ * API (unchanged, backward compatible):
+ *   tw.div`p-4 bg-zinc-900`
+ *   tw.div<BadgeProps>`${({ $isHover }) => $isHover ? "opacity-100" : "opacity-0"}`
+ *   tw.button({ base, variants, compoundVariants, defaultVariants })
+ *   tw.div`...`.extend`extra`
+ *   tw(Link)`underline text-blue-400`
+ *   tw(Button)({ base, variants })
  */
 
-type TemplateLiteralCall = (strings: TemplateStringsArray, ...expr: any[]) => any;
-type ConfigCall = (config: ComponentConfig) => any;
-type TwTag = TemplateLiteralCall & ConfigCall;
-declare const tw: Record<string, TwTag> & ((component: any) => TwTag);
+/** Valid values inside a tw template literal interpolation */
+type Interpolation<P extends object> = string | number | boolean | null | undefined | ((props: P) => string | number | boolean | null | undefined | Interpolation<P>) | Interpolation<P>[];
+interface TwStyledComponent<P extends object = Record<string, any>> extends React$1.ForwardRefExoticComponent<P & Record<string, any>> {
+    /** Chain extra classes: Card.extend`shadow-2xl ring-1` */
+    extend<EP extends object = P>(strings: TemplateStringsArray, ...exprs: Interpolation<EP>[]): TwStyledComponent<EP>;
+    /** Merge new variants onto existing component */
+    withVariants(config: Pick<ComponentConfig, "variants" | "compoundVariants" | "defaultVariants">): TwStyledComponent<P>;
+}
+interface TwTagFactory<E extends keyof JSX.IntrinsicElements = "div"> {
+    (strings: TemplateStringsArray, ...exprs: Interpolation<JSX.IntrinsicElements[E]>[]): TwStyledComponent<JSX.IntrinsicElements[E]>;
+    <P extends object>(strings: TemplateStringsArray, ...exprs: Interpolation<JSX.IntrinsicElements[E] & P>[]): TwStyledComponent<JSX.IntrinsicElements[E] & P>;
+    (config: ComponentConfig): TwStyledComponent<JSX.IntrinsicElements[E]>;
+    <P extends object>(config: ComponentConfig): TwStyledComponent<JSX.IntrinsicElements[E] & P>;
+}
+type TwObject = {
+    [K in keyof JSX.IntrinsicElements]: TwTagFactory<K>;
+} & {
+    <C extends React$1.ComponentType<any>>(component: C): TwComponentFactory<C>;
+};
+/** Factory for wrapped React components — preserves original component's prop types */
+interface TwComponentFactory<C extends React$1.ComponentType<any>> {
+    (strings: TemplateStringsArray, ...exprs: Interpolation<React$1.ComponentPropsWithRef<C>>[]): TwStyledComponent<React$1.ComponentPropsWithRef<C>>;
+    <P extends object>(strings: TemplateStringsArray, ...exprs: Interpolation<React$1.ComponentPropsWithRef<C> & P>[]): TwStyledComponent<React$1.ComponentPropsWithRef<C> & P>;
+    (config: ComponentConfig): TwStyledComponent<React$1.ComponentPropsWithRef<C>>;
+}
+declare const tw: TwObject;
 
 /**
  * tailwind-styled-v4 — cv() (Class Variants)
@@ -250,6 +266,7 @@ declare function loadBuiltinPlugins(): void;
  *
  * Converts React props → Tailwind class strings.
  * Supports responsive objects: p={{ sm: 2, md: 4, lg: 8 }}
+ * Supports theme tokens:       bg="brand" → bg-blue-600
  */
 type PropResolver$1 = (value: any) => string;
 declare const TW_PROP_KEYS: ReadonlySet<string>;
@@ -266,18 +283,26 @@ declare function resolveProps(props: Record<string, any>): string;
  * tailwind-styled-v4 — Responsive Engine
  *
  * Converts a value or responsive object into Tailwind prefix classes.
+ * Optionally resolves design token aliases before interpolation.
  *
  * @example
  * resolveResponsive("p", 4)              → "p-4"
  * resolveResponsive("p", { sm:2, lg:8 }) → "sm:p-2 lg:p-8"
  * resolveResponsive("p", { base:1, md:4 })→ "p-1 md:p-4"
+ *
+ * // With token resolver:
+ * resolveResponsive("bg", "brand", resolveColor) → "bg-blue-600"
+ * resolveResponsive("bg", { base:"brand", md:"primary" }, resolveColor)
+ *   → "bg-blue-600 md:bg-blue-600"
  */
 declare const SCREENS: readonly ["sm", "md", "lg", "xl", "2xl"];
 type Screen = (typeof SCREENS)[number];
 type ResponsiveValue<T = string | number> = T | ({
     base?: T;
 } & Partial<Record<Screen, T>>);
-declare function resolveResponsive(key: string, value: ResponsiveValue): string;
+declare function resolveResponsive(key: string, value: ResponsiveValue, 
+/** Optional design-token resolver — called on every scalar value */
+tokenResolver?: (v: string) => string): string;
 
 /**
  * tailwind-styled-v4 — Variant Engine
@@ -308,13 +333,17 @@ declare function resolveVariants(variants: VariantMap, props: Record<string, any
  * ]
  */
 
-declare function resolveCompound(compounds: CompoundVariant[], props: Record<string, any>): string;
+declare function resolveCompound(compounds: CompoundVariant[], props: Record<string, any>, defaultVariants?: Record<string, any>): string;
 
 /**
  * tailwind-styled-v4 — Class Resolver
  *
  * Central resolver that combines all engines into a final className string.
  * Uses tailwind-merge to resolve class conflicts correctly.
+ *
+ * This is the canonical single-call API used externally (e.g. headless
+ * components, server-side rendering, testing). createComponent() uses the
+ * same engines directly for performance — keep the two in sync.
  */
 
 interface ResolveConfig {
@@ -773,7 +802,7 @@ interface ValidationResult {
     warnings: string[];
 }
 declare const VALID_SCREENS: Set<string>;
-declare const KNOWN_TW_PROPS: Set<string>;
+declare const KNOWN_TW_PROPS: ReadonlySet<string>;
 /**
  * Validate variant props against a schema.
  * Pure no-op in production.

package/dist/index.d.ts

@@ -37,39 +37,55 @@ interface ExtendableComponent {
 }
 
 /**
- * tailwind-styled-v4 — tw Proxy (PRO)
- *
- * The main entry point. Returns a Proxy that intercepts HTML tag access
- * and supports two syntaxes:
- *
- * ① Template literal (simple):
- *    const Box = tw.div`p-4 bg-zinc-900 rounded-xl`
- *
- * ② Object config (full control):
- *    const Button = tw.button({
- *      base: "px-4 py-2 rounded-lg font-medium",
- *      variants: {
- *        variant: { primary: "bg-blue-500 text-white", ghost: "bg-transparent" },
- *        size:    { sm: "h-8 text-sm", lg: "h-12 text-base" }
- *      },
- *      compoundVariants: [
- *        { variant: "primary", size: "lg", class: "shadow-lg shadow-blue-500/40" }
- *      ],
- *      defaultVariants: { variant: "primary", size: "sm" }
- *    })
- *
- * ③ Extend existing components:
- *    const Card = tw.div`p-6 rounded-2xl bg-zinc-900`
- *    const HeroCard = Card.extend`border border-zinc-700 shadow-xl`
- *
- * ④ Wrap existing styled / React components:
- *    const StyledLink = tw(Link)`underline text-blue-400`
+ * tailwind-styled-v4 v2 — tw
+ *
+ * ── Changelog v2 ──────────────────────────────────────────────────────────────
+ *
+ * FIX 1 — import { tw } undefined in Next.js / Vite
+ *   BEFORE: export const tw = new Proxy(fn, { get })
+ *           tsup splitting:true + Proxy = tw resolves undefined after chunk split
+ *   AFTER:  Object.assign(callable, { div, button, ... })
+ *           Plain object, pre-built at module load, transparent to all bundlers
+ *
+ * FIX 2 — tw.div<Props>`${({ $isHover }) => ...}` TypeScript generic
+ *   BEFORE: TwTagFactory not generic → "Binding element '$isHover' implicitly has 'any' type"
+ *   AFTER:  TwTagFactory<P> is a generic function → full type inference on template interpolations
+ *
+ * API (unchanged, backward compatible):
+ *   tw.div`p-4 bg-zinc-900`
+ *   tw.div<BadgeProps>`${({ $isHover }) => $isHover ? "opacity-100" : "opacity-0"}`
+ *   tw.button({ base, variants, compoundVariants, defaultVariants })
+ *   tw.div`...`.extend`extra`
+ *   tw(Link)`underline text-blue-400`
+ *   tw(Button)({ base, variants })
  */
 
-type TemplateLiteralCall = (strings: TemplateStringsArray, ...expr: any[]) => any;
-type ConfigCall = (config: ComponentConfig) => any;
-type TwTag = TemplateLiteralCall & ConfigCall;
-declare const tw: Record<string, TwTag> & ((component: any) => TwTag);
+/** Valid values inside a tw template literal interpolation */
+type Interpolation<P extends object> = string | number | boolean | null | undefined | ((props: P) => string | number | boolean | null | undefined | Interpolation<P>) | Interpolation<P>[];
+interface TwStyledComponent<P extends object = Record<string, any>> extends React$1.ForwardRefExoticComponent<P & Record<string, any>> {
+    /** Chain extra classes: Card.extend`shadow-2xl ring-1` */
+    extend<EP extends object = P>(strings: TemplateStringsArray, ...exprs: Interpolation<EP>[]): TwStyledComponent<EP>;
+    /** Merge new variants onto existing component */
+    withVariants(config: Pick<ComponentConfig, "variants" | "compoundVariants" | "defaultVariants">): TwStyledComponent<P>;
+}
+interface TwTagFactory<E extends keyof JSX.IntrinsicElements = "div"> {
+    (strings: TemplateStringsArray, ...exprs: Interpolation<JSX.IntrinsicElements[E]>[]): TwStyledComponent<JSX.IntrinsicElements[E]>;
+    <P extends object>(strings: TemplateStringsArray, ...exprs: Interpolation<JSX.IntrinsicElements[E] & P>[]): TwStyledComponent<JSX.IntrinsicElements[E] & P>;
+    (config: ComponentConfig): TwStyledComponent<JSX.IntrinsicElements[E]>;
+    <P extends object>(config: ComponentConfig): TwStyledComponent<JSX.IntrinsicElements[E] & P>;
+}
+type TwObject = {
+    [K in keyof JSX.IntrinsicElements]: TwTagFactory<K>;
+} & {
+    <C extends React$1.ComponentType<any>>(component: C): TwComponentFactory<C>;
+};
+/** Factory for wrapped React components — preserves original component's prop types */
+interface TwComponentFactory<C extends React$1.ComponentType<any>> {
+    (strings: TemplateStringsArray, ...exprs: Interpolation<React$1.ComponentPropsWithRef<C>>[]): TwStyledComponent<React$1.ComponentPropsWithRef<C>>;
+    <P extends object>(strings: TemplateStringsArray, ...exprs: Interpolation<React$1.ComponentPropsWithRef<C> & P>[]): TwStyledComponent<React$1.ComponentPropsWithRef<C> & P>;
+    (config: ComponentConfig): TwStyledComponent<React$1.ComponentPropsWithRef<C>>;
+}
+declare const tw: TwObject;
 
 /**
  * tailwind-styled-v4 — cv() (Class Variants)
@@ -250,6 +266,7 @@ declare function loadBuiltinPlugins(): void;
  *
  * Converts React props → Tailwind class strings.
  * Supports responsive objects: p={{ sm: 2, md: 4, lg: 8 }}
+ * Supports theme tokens:       bg="brand" → bg-blue-600
  */
 type PropResolver$1 = (value: any) => string;
 declare const TW_PROP_KEYS: ReadonlySet<string>;
@@ -266,18 +283,26 @@ declare function resolveProps(props: Record<string, any>): string;
  * tailwind-styled-v4 — Responsive Engine
  *
  * Converts a value or responsive object into Tailwind prefix classes.
+ * Optionally resolves design token aliases before interpolation.
  *
  * @example
  * resolveResponsive("p", 4)              → "p-4"
  * resolveResponsive("p", { sm:2, lg:8 }) → "sm:p-2 lg:p-8"
  * resolveResponsive("p", { base:1, md:4 })→ "p-1 md:p-4"
+ *
+ * // With token resolver:
+ * resolveResponsive("bg", "brand", resolveColor) → "bg-blue-600"
+ * resolveResponsive("bg", { base:"brand", md:"primary" }, resolveColor)
+ *   → "bg-blue-600 md:bg-blue-600"
  */
 declare const SCREENS: readonly ["sm", "md", "lg", "xl", "2xl"];
 type Screen = (typeof SCREENS)[number];
 type ResponsiveValue<T = string | number> = T | ({
     base?: T;
 } & Partial<Record<Screen, T>>);
-declare function resolveResponsive(key: string, value: ResponsiveValue): string;
+declare function resolveResponsive(key: string, value: ResponsiveValue, 
+/** Optional design-token resolver — called on every scalar value */
+tokenResolver?: (v: string) => string): string;
 
 /**
  * tailwind-styled-v4 — Variant Engine
@@ -308,13 +333,17 @@ declare function resolveVariants(variants: VariantMap, props: Record<string, any
  * ]
  */
 
-declare function resolveCompound(compounds: CompoundVariant[], props: Record<string, any>): string;
+declare function resolveCompound(compounds: CompoundVariant[], props: Record<string, any>, defaultVariants?: Record<string, any>): string;
 
 /**
  * tailwind-styled-v4 — Class Resolver
  *
  * Central resolver that combines all engines into a final className string.
  * Uses tailwind-merge to resolve class conflicts correctly.
+ *
+ * This is the canonical single-call API used externally (e.g. headless
+ * components, server-side rendering, testing). createComponent() uses the
+ * same engines directly for performance — keep the two in sync.
  */
 
 interface ResolveConfig {
@@ -773,7 +802,7 @@ interface ValidationResult {
     warnings: string[];
 }
 declare const VALID_SCREENS: Set<string>;
-declare const KNOWN_TW_PROPS: Set<string>;
+declare const KNOWN_TW_PROPS: ReadonlySet<string>;
 /**
  * Validate variant props against a schema.
  * Pure no-op in production.

package/dist/index.js

@@ -1,9 +1,4 @@
-'use strict';var B=require('styled-components'),tailwindMerge=require('tailwind-merge'),de=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var B__default=/*#__PURE__*/_interopDefault(B);var de__default=/*#__PURE__*/_interopDefault(de);/* tailwind-styled-v4 | MIT | https://github.com/your-org/tailwind-styled-v4 */
-var re=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(r,t)=>(typeof require<"u"?require:r)[t]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});function V(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)}var ne=["sm","md","lg","xl","2xl"];function n(e,r){if(!V(r))return `${e}-${r}`;let t=[],o=r;o.base!==void 0&&t.push(`${e}-${o.base}`);for(let i of ne)o[i]!==void 0&&t.push(`${i}:${e}-${o[i]}`);return t.join(" ")}var N={p:e=>n("p",e),px:e=>n("px",e),py:e=>n("py",e),pt:e=>n("pt",e),pb:e=>n("pb",e),pl:e=>n("pl",e),pr:e=>n("pr",e),m:e=>n("m",e),mx:e=>n("mx",e),my:e=>n("my",e),mt:e=>n("mt",e),mb:e=>n("mb",e),ml:e=>n("ml",e),mr:e=>n("mr",e),gap:e=>n("gap",e),gapX:e=>n("gap-x",e),gapY:e=>n("gap-y",e),spaceX:e=>n("space-x",e),spaceY:e=>n("space-y",e),w:e=>n("w",e),h:e=>n("h",e),size:e=>n("size",e),minW:e=>n("min-w",e),maxW:e=>n("max-w",e),minH:e=>n("min-h",e),maxH:e=>n("max-h",e),bg:e=>n("bg",e),text:e=>n("text",e),border:e=>e===true?"border":n("border",e),ring:e=>e===true?"ring":n("ring",e),ringColor:e=>n("ring",e),fill:e=>n("fill",e),stroke:e=>n("stroke",e),accent:e=>n("accent",e),caret:e=>n("caret",e),divide:e=>n("divide",e),font:e=>n("font",e),fontSize:e=>n("text",e),leading:e=>n("leading",e),tracking:e=>n("tracking",e),align:e=>`text-${e}`,whitespace:e=>`whitespace-${e}`,truncate:e=>e===true?"truncate":"",lineClamp:e=>`line-clamp-${e}`,flex:e=>e===true?"flex":e===false?"":n("flex",e),flexDir:e=>`flex-${e}`,flexRow:e=>e===true?"flex-row":"flex-col",flexCol:e=>e===true?"flex-col":"flex-row",items:e=>n("items",e),justify:e=>n("justify",e),content:e=>n("content",e),wrap:e=>e===true?"flex-wrap":e===false?"flex-nowrap":`flex-${e}`,grow:e=>e===true?"grow":e===false?"grow-0":`grow-${e}`,shrink:e=>e===true?"shrink":e===false?"shrink-0":`shrink-${e}`,basis:e=>n("basis",e),self:e=>n("self",e),place:e=>n("place-items",e),cols:e=>n("grid-cols",e),rows:e=>n("grid-rows",e),colSpan:e=>n("col-span",e),rowSpan:e=>n("row-span",e),colStart:e=>`col-start-${e}`,colEnd:e=>`col-end-${e}`,rowStart:e=>`row-start-${e}`,rowEnd:e=>`row-end-${e}`,display:e=>`${e}`,overflow:e=>n("overflow",e),overflowX:e=>`overflow-x-${e}`,overflowY:e=>`overflow-y-${e}`,pos:e=>`${e}`,position:e=>`${e}`,z:e=>n("z",e),top:e=>n("top",e),right:e=>n("right",e),bottom:e=>n("bottom",e),left:e=>n("left",e),inset:e=>n("inset",e),insetX:e=>n("inset-x",e),insetY:e=>n("inset-y",e),rounded:e=>e===true?"rounded":n("rounded",e),roundedT:e=>n("rounded-t",e),roundedB:e=>n("rounded-b",e),roundedL:e=>n("rounded-l",e),roundedR:e=>n("rounded-r",e),borderWidth:e=>n("border",e),borderStyle:e=>`border-${e}`,outline:e=>e==="none"?"outline-none":`outline-${e}`,outlineColor:e=>`outline-${e}`,opacity:e=>n("opacity",e),shadow:e=>e===true?"shadow":n("shadow",e),shadowColor:e=>`shadow-${e}`,blur:e=>e===true?"blur":n("blur",e),brightness:e=>n("brightness",e),contrast:e=>n("contrast",e),saturate:e=>n("saturate",e),grayscale:e=>e===true?"grayscale":"",invert:e=>e===true?"invert":"",backdrop:e=>n("backdrop-blur",e),transition:e=>e===true?"transition":`transition-${e}`,duration:e=>n("duration",e),ease:e=>`ease-${e}`,delay:e=>n("delay",e),animate:e=>`animate-${e}`,cursor:e=>`cursor-${e}`,select:e=>`select-${e}`,pointer:e=>e===true?"pointer-events-auto":"pointer-events-none",touch:e=>`touch-${e}`,sr:e=>e===true?"sr-only":"not-sr-only",hidden:e=>e===true?"hidden":"",visible:e=>e===true?"visible":"invisible",aspect:e=>`aspect-${e}`,object:e=>`object-${e}`,scroll:e=>`scroll-${e}`,container:e=>e===true?"container":""},y=new Set(Object.keys(N));function te(e,r){N[e]=r,y.add(e);}function x(e){let r=[];for(let t in e){let o=N[t];if(!o)continue;let i=e[t];if(i==null)continue;let s=o(i);s&&r.push(s);}return r.join(" ").trim()}function h(e,r,t){if(!e)return "";let o=[];for(let i in e){let s=r[i]??t?.[i];if(s==null)continue;let u=e[i][String(s)];u&&o.push(u);}return o.join(" ").trim()}function b(e,r){if(!e||e.length===0)return "";let t=[];for(let o of e){let i=true;for(let s in o)if(!(s==="class"||s==="className")&&r[s]!==o[s]){i=false;break}if(i){let s=o.class??o.className;s&&t.push(s);}}return t.join(" ").trim()}var T=new Map;function M(e){T.has(e.name)&&console.warn(`[tailwind-styled-v4] Plugin "${e.name}" already registered \u2014 overwriting`),T.set(e.name,e),e.onRegister?.();}function oe(e){return T.get(e)}function ie(){return Array.from(T.keys())}function w(e){let r=[];for(let t of T.values())for(let o in t.props)if(e[o]!==void 0){let i=t.props[o](e[o]);i&&r.push(i);}return r.join(" ").trim()}function _(e){if(e==null||e===false)return "";if(typeof e=="string")return e;if(typeof e=="number")return String(e);if(Array.isArray(e))return e.map(_).filter(Boolean).join(" ");if(typeof e=="object"){let r=e;return Object.keys(r).filter(t=>r[t]).join(" ")}return ""}function R(e,r){let t="";for(let o=0;o<e.length;o++)if(t+=e[o],o<r.length){let i=_(r[o]);i&&(t+=" "+i);}return t.split(`
-`).map(o=>o.trim()).filter(Boolean).join(" ").replace(/\s{2,}/g," ").trim()}function se(e,...r){return R(e,r)}var ae=new Set(["variant","size","intent","color","shape","tone"]);function le(e){return !(ae.has(e)||y.has(e))}function v(e,r){let t=typeof r=="string",o=t?r:r.base??"",i=t?{}:r.variants??{},s=t?[]:r.compoundVariants??[],m=t?{}:r.defaultVariants??{},u=B__default.default(e).withConfig({shouldForwardProp:le})``,l=B__default.default(u).attrs(a=>{let c=x(a),d=h(i,a,m),g=b(s,a),k=w(a);return {className:tailwindMerge.twMerge(o,d,g,c,k,a.className)}})``;return l.extend=(a,...c)=>{let d=R(a,c);return v(l,{...t?{}:r,base:tailwindMerge.twMerge(o,d)})},l.withVariants=a=>v(e,{base:o,variants:{...i,...a.variants??{}},compoundVariants:[...s,...a.compoundVariants??[]],defaultVariants:{...m,...a.defaultVariants??{}}}),l}function O(e){return function(r,...t){if(!Array.isArray(r)&&typeof r=="object"&&r!==null)return v(e,r);let o=R(r,t);return v(e,o)}}var ce=new Proxy(function(e){return O(e)},{get(e,r){return O(r)}});function ue(e){let{base:r="",variants:t={},compoundVariants:o=[],defaultVariants:i={}}=e;return function(s){let m={...i,...s??{}},u=h(t,m),l=b(o,m);return tailwindMerge.twMerge(r,u,l,s?.className)}}function D(e,r=""){let t=typeof r=="string"?r:r.base??"",o=typeof r=="object"?r.displayName??`withTw(${e.displayName??e.name??"Component"})`:`withTw(${e.displayName??e.name??"Component"})`,i=de.forwardRef((s,m)=>{let u={},l={};for(let g in s)y.has(g)?u[g]=s[g]:l[g]=s[g];let a=x(u),c=w(u),d=tailwindMerge.twMerge(t,a,c,s.className);return de__default.default.createElement(e,{...l,ref:m,className:d})});return i.displayName=o,i}function ge(e,r=""){return D(e,r)}function p(e){if(!e.name||typeof e.name!="string")throw new Error("[tailwind-styled-v4] Plugin must have a non-empty string name");if(!e.props||typeof e.props!="object")throw new Error(`[tailwind-styled-v4] Plugin "${e.name}" must define a props object`);M(e);}function ye(){p({name:"animation",props:{animate:e=>`animate-${e}`,duration:e=>`duration-${e}`,delay:e=>`delay-${e}`,ease:e=>`ease-${e}`}}),p({name:"grid",props:{grid:e=>e===true?"grid":`grid-cols-${e}`,gridCols:e=>`grid-cols-${e}`,gridRows:e=>`grid-rows-${e}`,autoRows:e=>`auto-rows-${e}`,autoCols:e=>`auto-cols-${e}`}}),p({name:"backdrop",props:{backdropBlur:e=>`backdrop-blur-${e}`,backdropBrightness:e=>`backdrop-brightness-${e}`,backdropContrast:e=>`backdrop-contrast-${e}`,backdropSaturate:e=>`backdrop-saturate-${e}`}}),p({name:"gradient",props:{gradientFrom:e=>`from-${e}`,gradientVia:e=>`via-${e}`,gradientTo:e=>`to-${e}`,gradient:e=>`bg-gradient-to-${e}`}}),p({name:"scroll",props:{scrollSmooth:e=>e===true?"scroll-smooth":"",scrollAuto:e=>e===true?"scroll-auto":"",snapAlign:e=>`snap-${e}`,snapType:e=>`snap-${e}`}}),p({name:"print",props:{printHidden:e=>e===true?"print:hidden":"",printBlock:e=>e===true?"print:block":""}});}function he(e,r){let{base:t,variants:o={},compoundVariants:i=[],defaultVariants:s={}}=e,m=x(r),u=h(o,r,s),l=b(i,r),a=w(r);return tailwindMerge.twMerge(t,u,l,m,a,r.className)}var f={},$=new Set;function C(e){for(let r in e){let t=e[r];t&&(f[r]={...f[r]??{},...t});}$.forEach(r=>r(f));}function be(e){f={...e},$.forEach(r=>r(f));}function we(){return {...f}}function ve(e){return {...f[e]??{}}}function Te(){f={},$.forEach(e=>e(f));}function Re(e){return $.add(e),()=>$.delete(e)}function E(e,r){let t=f[e];return t?t[r]??r:r}function $e(e,r){return !!f[e]?.[r]}function P(e,r){return E(e,r)}function Ce(e){return P("colors",e)}function Pe(e){return typeof e=="number"?String(e):P("spacing",e)}function Se(e){return P("radius",e)}function ke(){C({colors:{primary:"blue-600","primary-hover":"blue-700","primary-light":"blue-100",secondary:"violet-600","secondary-hover":"violet-700",success:"emerald-500",warning:"amber-500",danger:"red-500",info:"sky-500",foreground:"white",background:"zinc-950",surface:"zinc-900","surface-2":"zinc-800","surface-3":"zinc-700",muted:"zinc-500",subtle:"zinc-400",border:"zinc-700","border-light":"zinc-200","text-primary":"zinc-50","text-secondary":"zinc-400","text-muted":"zinc-600",link:"blue-400","link-hover":"blue-300"},spacing:{xs:"2",sm:"4",md:"6",lg:"8",xl:"12","2xl":"16","3xl":"24",section:"16",page:"24"},radius:{none:"none",xs:"sm",sm:"md",md:"lg",lg:"xl",xl:"2xl",card:"2xl",button:"lg",badge:"full",pill:"full",input:"md"},shadow:{xs:"sm",sm:"md",md:"lg",lg:"xl",xl:"2xl",card:"xl",modal:"2xl",none:"none"},font:{sans:"sans",mono:"mono",serif:"serif"},fontSize:{caption:"xs",small:"sm",body:"base",lead:"lg",title:"xl",heading:"2xl",display:"4xl"},duration:{fast:"150",normal:"200",slow:"300",slower:"500"},opacity:{disabled:"50",muted:"70",subtle:"40"}});}function Ve(){C({colors:{primary:"blue-500",secondary:"indigo-500",accent:"cyan-400",background:"zinc-950",surface:"zinc-900","surface-2":"zinc-800",foreground:"zinc-50",muted:"zinc-500",border:"zinc-800",success:"emerald-400",warning:"amber-400",danger:"red-400"},radius:{card:"xl",button:"lg",badge:"full",input:"md"}});}function I(e){let r=5381;for(let t=0;t<e.length;t++)r=(r<<5)+r^e.charCodeAt(t),r=r>>>0;return r}function F(e){return "tw-"+I(e).toString(16).slice(0,5).padStart(5,"0")}function Ne(e){return I(e)}function j(e,r){let t=F(`${e}:${r}`);return `Tw${e.charAt(0).toUpperCase()+e.slice(1)}-${t.replace("tw-","")}`}var z=new Set(["variant","size","intent","color","shape","tone","weight","hierarchy","emphasis","status","appearance","base","as","_ref"]);function L(e){return e.startsWith("$")?true:!(z.has(e)||y.has(e))}function je(e){z.add(e);}function ze(e){z.delete(e),y.delete(e);}function Ae(e,r=""){let t=B__default.default(e).withConfig({shouldForwardProp:L});if(process.env.NODE_ENV!=="production"&&typeof e=="string"&&r){let o=j(e,r);t.displayName=o;}return t}function _e(...e){return tailwindMerge.twMerge(...e.filter(Boolean))}function S(e){return Array.from(new Set(e.split(/\s+/).map(r=>r.trim()).filter(Boolean)))}function Be(e){return S(e).sort().join(" ")}function We(e){let r=S(e),t=[],o=[];for(let i of r)i.includes(":")?o.push(i):t.push(i);return {base:t,modifiers:o}}function Oe(e){return /^!?[-a-z0-9]+(?:[:/[\]().#,]+[-a-z0-9_]+)*$/.test(e)}function K(e){let r=e.indexOf(":");return r>-1?e.slice(0,r):null}function Y(e){let r=e.indexOf(":");return r>-1?e.slice(r+1):e}function De(e){let r=S(e),t={};for(let o of r){let i=K(o)??"",s=Y(o);t[i]||(t[i]=[]),t[i].push(s);}return t}function A(...e){let r=[];return X(e,r),r.join(" ")}function X(e,r){for(let t of e)if(t){if(typeof t=="string"){r.push(t);continue}if(typeof t=="number"){r.push(String(t));continue}if(Array.isArray(t)){X(t,r);continue}if(typeof t=="object")for(let o in t)t[o]&&r.push(o);}}function Ie(...e){try{let{twMerge:r}=re("tailwind-merge");return r(A(...e))}catch{return A(...e)}}var H=typeof process<"u"&&process.env.NODE_ENV!=="production",q=new Set(["base","sm","md","lg","xl","2xl"]),Fe=new Set(["p","px","py","pt","pb","pl","pr","m","mx","my","mt","mb","ml","mr","gap","gapX","gapY","spaceX","spaceY","w","h","size","minW","maxW","minH","maxH","bg","text","border","ring","fill","stroke","accent","caret","divide","font","fontSize","leading","tracking","align","truncate","lineClamp","flex","flexDir","items","justify","wrap","grow","shrink","basis","self","place","cols","rows","colSpan","rowSpan","colStart","colEnd","rowStart","rowEnd","display","overflow","overflowX","overflowY","pos","z","top","right","bottom","left","inset","rounded","roundedT","roundedB","roundedL","roundedR","borderWidth","borderStyle","outline","opacity","shadow","blur","brightness","contrast","saturate","grayscale","invert","backdrop","transition","duration","ease","delay","animate","cursor","select","pointer","touch","sr","hidden","visible","aspect","object","scroll","container","flex","grid","block","inline","hidden","truncate","underline","italic"]);function Le(e,r){if(!H)return {valid:true,errors:[],warnings:[]};let t=[],o=[],{tag:i,variants:s={},customValidators:m={}}=r;for(let[l,a]of Object.entries(s)){let c=e[l];if(c==null)continue;let d=String(c),g=Object.keys(a);g.includes(d)||t.push(`[tw-error] Invalid prop "${l}"="${d}" on <${i}>
-  Expected one of: ${g.map(k=>`"${k}"`).join(" | ")}
-  Got: "${d}"
-  Hint: Add "${d}" to the variants config, or fix the typo.`);}for(let[l,a]of Object.entries(m)){let c=a(e[l]);c&&t.push(`[tw-error] ${c}`);}let u=new Set(["p","px","py","pt","pb","pl","pr","m","mx","my","mt","mb","ml","mr","gap"]);for(let l of u){let a=e[l];typeof a=="number"&&a>96&&o.push(`[tw-warn] Prop "${l}"=${a} exceeds Tailwind spacing scale max (96).
-  Use arbitrary values: ${l}="[${a}px]" for custom sizes.`);}for(let[l,a]of Object.entries(e)){if(typeof a!="object"||!a||Array.isArray(a))continue;let c=Object.keys(a).filter(d=>!q.has(d));c.length>0&&o.push(`[tw-warn] Unknown screen(s) in "${l}" responsive object: ${c.map(d=>`"${d}"`).join(", ")}
-  Valid screens: "base" | "sm" | "md" | "lg" | "xl" | "2xl"`);}return H&&(t.forEach(l=>console.error(l)),o.forEach(l=>console.warn(l))),{valid:t.length===0,errors:t,warnings:o}}function Ke(e,r={}){return {tag:e,variants:r}}function U(){p({name:"typography",props:{prose:e=>e===true||e==="base"||e===""?"prose":typeof e=="string"?`prose prose-${e}`:"prose",proseColor:e=>`prose-${e}`,proseDark:e=>e===true?"dark:prose-invert":"",proseMaxW:e=>e===false?"max-w-none":"",proseLeading:e=>`leading-${e}`}});}function G(){p({name:"forms",props:{formInput:e=>e?"form-input":"",formSelect:e=>e?"form-select":"",formTextarea:e=>e?"form-textarea":"",formCheckbox:e=>e?"form-checkbox":"",formRadio:e=>e?"form-radio":"",formRange:e=>e?"form-range":"",form:e=>({input:"form-input",select:"form-select",textarea:"form-textarea",checkbox:"form-checkbox",radio:"form-radio",range:"form-range"})[e]??`form-${e}`}});}function J(){p({name:"aspect",props:{aspectRatio:e=>{let r={video:"aspect-video",square:"aspect-square",auto:"aspect-auto","4/3":"aspect-[4/3]","3/2":"aspect-[3/2]","1/1":"aspect-square"};return typeof e=="number"?Math.abs(e-16/9)<.01?"aspect-video":Math.abs(e-1)<.01?"aspect-square":`aspect-[${e}]`:r[e]??`aspect-${e}`}}});}function Q(){p({name:"container-queries",props:{container:e=>e===true?"@container":`@container/${e}`,containerName:e=>`@container/${e}`,cq:e=>e?`@${e}:block`:""}});}function Z(){p({name:"animations-v4",props:{enterAnim:e=>({fade:"animate-in fade-in","fade-up":"animate-in fade-in slide-in-from-bottom-4","fade-down":"animate-in fade-in slide-in-from-top-4","fade-left":"animate-in fade-in slide-in-from-right-4","fade-right":"animate-in fade-in slide-in-from-left-4",zoom:"animate-in zoom-in-95","slide-up":"animate-in slide-in-from-bottom-4","slide-down":"animate-in slide-in-from-top-4","spin-in":"animate-in spin-in-180"})[e]??`animate-in ${e}`,exitAnim:e=>({fade:"animate-out fade-out","fade-up":"animate-out fade-out slide-out-to-top-4","fade-down":"animate-out fade-out slide-out-to-bottom-4",zoom:"animate-out zoom-out-95","slide-up":"animate-out slide-out-to-top-4","slide-down":"animate-out slide-out-to-bottom-4"})[e]??`animate-out ${e}`,animFill:e=>`fill-mode-${e}`,animDuration:e=>`duration-${e}`,animDelay:e=>`delay-${e}`,animRepeat:e=>e==="infinite"?"repeat-infinite":`repeat-${e}`,animDirection:e=>`direction-${e}`}});}function ee(){p({name:"interactivity",props:{hoverBg:e=>`hover:bg-${e}`,hoverText:e=>`hover:text-${e}`,hoverBorder:e=>`hover:border-${e}`,hoverShadow:e=>`hover:shadow-${e}`,hoverOpacity:e=>`hover:opacity-${e}`,hoverScale:e=>e===true?"hover:scale-105":`hover:scale-${e}`,focusRing:e=>e===true?"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2":`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-${e} focus-visible:ring-offset-2`,focusBg:e=>`focus:bg-${e}`,activeScale:e=>e===true?"active:scale-95":`active:scale-${e}`,activeBg:e=>`active:bg-${e}`,activeOpacity:e=>`active:opacity-${e}`,groupHoverBg:e=>`group-hover:bg-${e}`,groupHoverText:e=>`group-hover:text-${e}`,groupHoverScale:e=>`group-hover:scale-${e}`,peerCheckedBg:e=>`peer-checked:bg-${e}`}});}function Ye(){U(),G(),J(),Q(),Z(),ee();}exports.KNOWN_TW_PROPS=Fe;exports.TW_PROP_KEYS=y;exports.VALID_SCREENS=q;exports.allowProp=ze;exports.attachTw=ge;exports.blockProp=je;exports.buildSchema=Ke;exports.cls=se;exports.componentName=j;exports.createComponent=v;exports.cv=ue;exports.cx=A;exports.cxm=Ie;exports.getModifier=K;exports.getPlugin=oe;exports.getTheme=we;exports.getThemeNamespace=ve;exports.groupByModifier=De;exports.hashClass=F;exports.hashNumber=Ne;exports.isObject=V;exports.isThemeToken=$e;exports.isValidClass=Oe;exports.listPlugins=ie;exports.loadAllV4Plugins=Ye;exports.loadAnimationPlugin=Z;exports.loadAspectPlugin=J;exports.loadBuiltinPlugins=ye;exports.loadContainerQueryPlugin=Q;exports.loadDarkTheme=Ve;exports.loadDefaultTheme=ke;exports.loadFormsPlugin=G;exports.loadInteractivityPlugin=ee;exports.loadTypographyPlugin=U;exports.mergeClasses=_e;exports.normalizeClasses=Be;exports.onThemeChange=Re;exports.parseClassString=S;exports.registerPlugin=p;exports.registerProp=te;exports.replaceTheme=be;exports.resetTheme=Te;exports.resolveClasses=he;exports.resolveColor=Ce;exports.resolveCompound=b;exports.resolveProps=x;exports.resolveRadius=Se;exports.resolveResponsive=n;exports.resolveSpacing=Pe;exports.resolveThemeToken=E;exports.resolveToken=P;exports.resolveVariants=h;exports.setTheme=C;exports.shouldForwardProp=L;exports.splitModifiers=We;exports.stripModifier=Y;exports.styledFactory=Ae;exports.tw=ce;exports.validateVariantProps=Le;exports.withTw=D;//# sourceMappingURL=index.js.map
+'use strict';var O=require('styled-components'),tailwindMerge=require('tailwind-merge'),Re=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var O__default=/*#__PURE__*/_interopDefault(O);var Re__default=/*#__PURE__*/_interopDefault(Re);/* tailwind-styled-v4 | MIT */
+var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(typeof require<"u"?require:t)[n]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});function N(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)}var ae=["sm","md","lg","xl","2xl"];function A(e,t){let n=String(e);return t?t(n):n}function r(e,t,n){if(!N(t))return `${e}-${A(t,n)}`;let o=[],i=t;i.base!==void 0&&o.push(`${e}-${A(i.base,n)}`);for(let s of ae)i[s]!==void 0&&o.push(`${s}:${e}-${A(i[s],n)}`);return o.join(" ")}var y={},S=new Set;function V(e){for(let t in e){let n=e[t];n&&(y[t]={...y[t]??{},...n});}S.forEach(t=>t(y));}function le(e){y={...e},S.forEach(t=>t(y));}function ce(){return {...y}}function pe(e){return {...y[e]??{}}}function me(){y={},S.forEach(e=>e(y));}function ue(e){return S.add(e),()=>S.delete(e)}function z(e,t){let n=y[e];return n?n[t]??t:t}function de(e,t){return !!y[e]?.[t]}function b(e,t){return z(e,t)}function m(e){return b("colors",e)}function p(e){return typeof e=="number"?String(e):b("spacing",e)}function w(e){return b("radius",e)}var I={p:e=>r("p",e,p),px:e=>r("px",e,p),py:e=>r("py",e,p),pt:e=>r("pt",e,p),pb:e=>r("pb",e,p),pl:e=>r("pl",e,p),pr:e=>r("pr",e,p),m:e=>r("m",e,p),mx:e=>r("mx",e,p),my:e=>r("my",e,p),mt:e=>r("mt",e,p),mb:e=>r("mb",e,p),ml:e=>r("ml",e,p),mr:e=>r("mr",e,p),gap:e=>r("gap",e,p),gapX:e=>r("gap-x",e,p),gapY:e=>r("gap-y",e,p),spaceX:e=>r("space-x",e,p),spaceY:e=>r("space-y",e,p),w:e=>r("w",e),h:e=>r("h",e),size:e=>r("size",e),minW:e=>r("min-w",e),maxW:e=>r("max-w",e),minH:e=>r("min-h",e),maxH:e=>r("max-h",e),bg:e=>r("bg",e,m),text:e=>r("text",e,m),border:e=>e===true?"border":r("border",e,m),ring:e=>e===true?"ring":r("ring",e,m),ringColor:e=>r("ring",e,m),fill:e=>r("fill",e,m),stroke:e=>r("stroke",e,m),accent:e=>r("accent",e,m),caret:e=>r("caret",e,m),divide:e=>r("divide",e,m),font:e=>r("font",e,t=>b("font",t)),fontSize:e=>r("text",e,t=>b("fontSize",t)),leading:e=>r("leading",e),tracking:e=>r("tracking",e),align:e=>`text-${e}`,whitespace:e=>`whitespace-${e}`,truncate:e=>e===true?"truncate":"",lineClamp:e=>`line-clamp-${e}`,flex:e=>e===true?"flex":e===false?"":r("flex",e),flexDir:e=>`flex-${e}`,flexRow:e=>e===true?"flex-row":"flex-col",flexCol:e=>e===true?"flex-col":"flex-row",items:e=>r("items",e),justify:e=>r("justify",e),content:e=>r("content",e),wrap:e=>e===true?"flex-wrap":e===false?"flex-nowrap":`flex-${e}`,grow:e=>e===true?"grow":e===false?"grow-0":`grow-${e}`,shrink:e=>e===true?"shrink":e===false?"shrink-0":`shrink-${e}`,basis:e=>r("basis",e),self:e=>r("self",e),place:e=>r("place-items",e),cols:e=>r("grid-cols",e),rows:e=>r("grid-rows",e),colSpan:e=>r("col-span",e),rowSpan:e=>r("row-span",e),colStart:e=>`col-start-${e}`,colEnd:e=>`col-end-${e}`,rowStart:e=>`row-start-${e}`,rowEnd:e=>`row-end-${e}`,display:e=>`${e}`,overflow:e=>r("overflow",e),overflowX:e=>`overflow-x-${e}`,overflowY:e=>`overflow-y-${e}`,pos:e=>`${e}`,position:e=>`${e}`,z:e=>r("z",e),top:e=>r("top",e),right:e=>r("right",e),bottom:e=>r("bottom",e),left:e=>r("left",e),inset:e=>r("inset",e),insetX:e=>r("inset-x",e),insetY:e=>r("inset-y",e),rounded:e=>e===true?"rounded":r("rounded",e,w),roundedT:e=>r("rounded-t",e,w),roundedB:e=>r("rounded-b",e,w),roundedL:e=>r("rounded-l",e,w),roundedR:e=>r("rounded-r",e,w),borderWidth:e=>r("border",e),borderStyle:e=>`border-${e}`,outline:e=>e==="none"?"outline-none":`outline-${e}`,outlineColor:e=>`outline-${e}`,opacity:e=>r("opacity",e,t=>b("opacity",t)),shadow:e=>e===true?"shadow":r("shadow",e,t=>b("shadow",t)),shadowColor:e=>`shadow-${m(String(e))}`,blur:e=>e===true?"blur":r("blur",e),brightness:e=>r("brightness",e),contrast:e=>r("contrast",e),saturate:e=>r("saturate",e),grayscale:e=>e===true?"grayscale":"",invert:e=>e===true?"invert":"",backdrop:e=>r("backdrop-blur",e),transition:e=>e===true?"transition":`transition-${e}`,duration:e=>r("duration",e,t=>b("duration",t)),ease:e=>`ease-${e}`,delay:e=>r("delay",e),animate:e=>`animate-${e}`,cursor:e=>`cursor-${e}`,select:e=>`select-${e}`,pointer:e=>e===true?"pointer-events-auto":"pointer-events-none",touch:e=>`touch-${e}`,sr:e=>e===true?"sr-only":"not-sr-only",hidden:e=>e===true?"hidden":"",visible:e=>e===true?"visible":"invisible",aspect:e=>`aspect-${e}`,object:e=>`object-${e}`,scroll:e=>`scroll-${e}`,container:e=>e===true?"container":""},x=new Set(Object.keys(I));function fe(e,t){I[e]=t,x.add(e);}function T(e){let t=[];for(let n in e){let o=I[n];if(!o)continue;let i=e[n];if(i==null||i===false)continue;let s=o(i);s&&t.push(s);}return t.join(" ").trim()}function v(e,t,n){if(!e)return "";let o=[];for(let i in e){let s=t[i]??n?.[i];if(s==null)continue;let c=e[i][String(s)];c&&o.push(c);}return o.join(" ").trim()}function C(e,t,n){if(!e||e.length===0)return "";let o=[],i=n?{...n,...t}:t;for(let s of e){let d=true;for(let c in s)if(!(c==="class"||c==="className")&&i[c]!==s[c]){d=false;break}if(d){let c=s.class??s.className;c&&o.push(c);}}return o.join(" ").trim()}var $=new Map;function W(e){$.has(e.name)&&console.warn(`[tailwind-styled-v4] Plugin "${e.name}" already registered \u2014 overwriting`),$.set(e.name,e),e.onRegister?.();}function ge(e){return $.get(e)}function ye(){return Array.from($.keys())}function P(e){let t=[];for(let n of $.values())for(let o in n.props)if(e[o]!==void 0){let i=n.props[o](e[o]);i&&t.push(i);}return t.join(" ").trim()}function F(e){if(e==null||e===false)return "";if(typeof e=="string")return e;if(typeof e=="number")return String(e);if(Array.isArray(e))return e.map(F).filter(Boolean).join(" ");if(typeof e=="object"){let t=e;return Object.keys(t).filter(n=>t[n]).join(" ")}return ""}function k(e,t){let n="";for(let o=0;o<e.length;o++)if(n+=e[o],o<t.length){let i=F(t[o]);i&&(n+=" "+i);}return n.split(`
+`).map(o=>o.trim()).filter(Boolean).join(" ").replace(/\s{2,}/g," ").trim()}function xe(e,...t){return k(e,t)}var he=new Set(["variant","size","intent","color","shape","tone"]);function be(e){return !(he.has(e)||x.has(e))}function R(e,t){let n=typeof t=="string",o=n?t:t.base??"",i=n?{}:t.variants??{},s=n?[]:t.compoundVariants??[],d=n?{}:t.defaultVariants??{},c=O__default.default(e).withConfig({shouldForwardProp:be})``,l=O__default.default(c).attrs(a=>{let u=T(a),g=v(i,a,d),h=C(s,a),j=P(a);return {className:tailwindMerge.twMerge(o,g,h,u,j,a.className)}})``;return l.extend=(a,...u)=>{let g=k(a,u);return R(l,{...n?{}:t,base:tailwindMerge.twMerge(o,g)})},l.withVariants=a=>R(e,{base:o,variants:{...i,...a.variants??{}},compoundVariants:[...s,...a.compoundVariants??[]],defaultVariants:{...d,...a.defaultVariants??{}}}),l}function X(e){return function(t,...n){return !Array.isArray(t)&&typeof t=="object"&&t!==null?R(e,t):R(e,k(t,n))}}var we=["div","section","article","aside","header","footer","main","nav","figure","figcaption","details","summary","h1","h2","h3","h4","h5","h6","p","span","strong","em","b","i","s","u","small","mark","abbr","cite","code","kbd","samp","var","time","address","blockquote","q","del","ins","sub","sup","ul","ol","li","dl","dt","dd","table","thead","tbody","tfoot","tr","th","td","caption","colgroup","col","img","picture","video","audio","source","track","canvas","svg","path","circle","rect","line","polyline","polygon","g","defs","use","symbol","form","input","textarea","select","option","optgroup","button","label","fieldset","legend","output","progress","meter","datalist","a","area","map","iframe","embed","object","pre","hr","br","wbr","dialog","menu","template","slot"],D={};for(let e of we)D[e]=X(e);var Te=function(e){return X(e)},ve=Object.assign(Te,D);function Pe(e){let{base:t="",variants:n={},compoundVariants:o=[],defaultVariants:i={}}=e;return function(s){let d={...i,...s??{}},c=v(n,d),l=C(o,d);return tailwindMerge.twMerge(t,c,l,s?.className)}}function K(e,t=""){let n=typeof t=="string"?t:t.base??"",o=typeof t=="object"?t.displayName??`withTw(${e.displayName??e.name??"Component"})`:`withTw(${e.displayName??e.name??"Component"})`,i=Re.forwardRef((s,d)=>{let c={},l={};for(let h in s)x.has(h)?c[h]=s[h]:l[h]=s[h];let a=T(c),u=P(c),g=tailwindMerge.twMerge(n,a,u,s.className);return Re__default.default.createElement(e,{...l,ref:d,className:g})});return i.displayName=o,i}function ke(e,t=""){return K(e,t)}function f(e){if(!e.name||typeof e.name!="string")throw new Error("[tailwind-styled-v4] Plugin must have a non-empty string name");if(!e.props||typeof e.props!="object")throw new Error(`[tailwind-styled-v4] Plugin "${e.name}" must define a props object`);W(e);}var J=false;function Ve(){J||(J=true,f({name:"animation",props:{motionSafe:e=>e===true?"motion-safe:transition-all":"",motionReduce:e=>e===true?"motion-reduce:transition-none":"",willChange:e=>`will-change-${e}`}}),f({name:"grid",props:{autoRows:e=>`auto-rows-${e}`,autoCols:e=>`auto-cols-${e}`}}),f({name:"backdrop",props:{backdropBlur:e=>`backdrop-blur-${e}`,backdropBrightness:e=>`backdrop-brightness-${e}`,backdropContrast:e=>`backdrop-contrast-${e}`,backdropSaturate:e=>`backdrop-saturate-${e}`}}),f({name:"gradient",props:{gradientFrom:e=>`from-${e}`,gradientVia:e=>`via-${e}`,gradientTo:e=>`to-${e}`,gradient:e=>`bg-gradient-to-${e}`}}),f({name:"scroll",props:{scrollSmooth:e=>e===true?"scroll-smooth":"",scrollAuto:e=>e===true?"scroll-auto":"",snapAlign:e=>`snap-${e}`,snapType:e=>`snap-${e}`}}),f({name:"print",props:{printHidden:e=>e===true?"print:hidden":"",printBlock:e=>e===true?"print:block":""}}));}function je(e,t){let{base:n,variants:o={},compoundVariants:i=[],defaultVariants:s={}}=e,d={...s,...t},c=v(o,d,s),l=C(i,d),a=T(t),u=P(t);return tailwindMerge.twMerge(n,c,l,a,u,t.className)}function Ne(){V({colors:{primary:"blue-600","primary-hover":"blue-700","primary-light":"blue-100",secondary:"violet-600","secondary-hover":"violet-700",success:"emerald-500",warning:"amber-500",danger:"red-500",info:"sky-500",foreground:"white",background:"zinc-950",surface:"zinc-900","surface-2":"zinc-800","surface-3":"zinc-700",muted:"zinc-500",subtle:"zinc-400",border:"zinc-700","border-light":"zinc-200","text-primary":"zinc-50","text-secondary":"zinc-400","text-muted":"zinc-600",link:"blue-400","link-hover":"blue-300"},spacing:{xs:"2",sm:"4",md:"6",lg:"8",xl:"12","2xl":"16","3xl":"24",section:"16",page:"24"},radius:{none:"none",xs:"sm",sm:"md",md:"lg",lg:"xl",xl:"2xl",card:"2xl",button:"lg",badge:"full",pill:"full",input:"md"},shadow:{xs:"sm",sm:"md",md:"lg",lg:"xl",xl:"2xl",card:"xl",modal:"2xl",none:"none"},font:{sans:"sans",mono:"mono",serif:"serif"},fontSize:{caption:"xs",small:"sm",body:"base",lead:"lg",title:"xl",heading:"2xl",display:"4xl"},duration:{fast:"150",normal:"200",slow:"300",slower:"500"},opacity:{disabled:"50",muted:"70",subtle:"40"}});}function Ae(){V({colors:{primary:"blue-500",secondary:"indigo-500",accent:"cyan-400",background:"zinc-950",surface:"zinc-900","surface-2":"zinc-800",foreground:"zinc-50",muted:"zinc-500",border:"zinc-800",success:"emerald-400",warning:"amber-400",danger:"red-400"},radius:{card:"xl",button:"lg",badge:"full",input:"md"}});}function L(e){let t=5381;for(let n=0;n<e.length;n++)t=(t<<5)+t^e.charCodeAt(n),t=t>>>0;return t}function Y(e){return "tw-"+L(e).toString(16).slice(0,5).padStart(5,"0")}function ze(e){return L(e)}function Ie(e,t){let n=Y(`${e}:${t}`);return `Tw${e.charAt(0).toUpperCase()+e.slice(1)}-${n.replace("tw-","")}`}var M=new Set(["variant","size","intent","color","shape","tone","weight","hierarchy","emphasis","status","appearance","base","as","_ref"]);function q(e){return e.startsWith("$")?true:!(M.has(e)||x.has(e))}function _e(e){M.add(e);}function We(e){M.delete(e),x.delete(e);}function Fe(e,t=""){return O__default.default(e).withConfig({shouldForwardProp:q})}function Be(...e){return tailwindMerge.twMerge(...e.filter(Boolean))}function E(e){return Array.from(new Set(e.split(/\s+/).map(t=>t.trim()).filter(Boolean)))}function Xe(e){return E(e).sort().join(" ")}function De(e){let t=E(e),n=[],o=[];for(let i of t)i.includes(":")?o.push(i):n.push(i);return {base:n,modifiers:o}}function Ke(e){return /^!?[-a-z0-9]+(?:[:/[\]().#,]+[-a-z0-9_]+)*$/.test(e)}function H(e){let t=e.indexOf(":");return t>-1?e.slice(0,t):null}function G(e){let t=e.indexOf(":");return t>-1?e.slice(t+1):e}function Je(e){let t=E(e),n={};for(let o of t){let i=H(o)??"",s=G(o);n[i]||(n[i]=[]),n[i].push(s);}return n}function _(...e){let t=[];return U(e,t),t.join(" ")}function U(e,t){for(let n of e)if(n){if(typeof n=="string"){t.push(n);continue}if(typeof n=="number"){t.push(String(n));continue}if(Array.isArray(n)){U(n,t);continue}if(typeof n=="object")for(let o in n)n[o]&&t.push(o);}}function Le(...e){try{let{twMerge:t}=se("tailwind-merge");return t(_(...e))}catch{return _(...e)}}var Z=new Set(["base","sm","md","lg","xl","2xl"]),Ye=x;function qe(e,t){return {valid:true,errors:[],warnings:[]};}function He(e,t={}){return {tag:e,variants:t}}function ee(){f({name:"typography",props:{prose:e=>e===true||e==="base"||e===""?"prose":typeof e=="string"?`prose prose-${e}`:"prose",proseColor:e=>`prose-${e}`,proseDark:e=>e===true?"dark:prose-invert":"",proseMaxW:e=>e===false?"max-w-none":"",proseLeading:e=>`leading-${e}`}});}function te(){f({name:"forms",props:{formInput:e=>e?"form-input":"",formSelect:e=>e?"form-select":"",formTextarea:e=>e?"form-textarea":"",formCheckbox:e=>e?"form-checkbox":"",formRadio:e=>e?"form-radio":"",formRange:e=>e?"form-range":"",form:e=>({input:"form-input",select:"form-select",textarea:"form-textarea",checkbox:"form-checkbox",radio:"form-radio",range:"form-range"})[e]??`form-${e}`}});}function ne(){f({name:"aspect",props:{aspectRatio:e=>{let t={video:"aspect-video",square:"aspect-square",auto:"aspect-auto","4/3":"aspect-[4/3]","3/2":"aspect-[3/2]","1/1":"aspect-square"};return typeof e=="number"?Math.abs(e-16/9)<.01?"aspect-video":Math.abs(e-1)<.01?"aspect-square":`aspect-[${e}]`:t[e]??`aspect-${e}`}}});}function re(){f({name:"container-queries",props:{container:e=>e===true?"@container":`@container/${e}`,containerName:e=>`@container/${e}`,cq:e=>e?`@${e}:block`:""}});}function oe(){f({name:"animations-v4",props:{enterAnim:e=>({fade:"animate-in fade-in","fade-up":"animate-in fade-in slide-in-from-bottom-4","fade-down":"animate-in fade-in slide-in-from-top-4","fade-left":"animate-in fade-in slide-in-from-right-4","fade-right":"animate-in fade-in slide-in-from-left-4",zoom:"animate-in zoom-in-95","slide-up":"animate-in slide-in-from-bottom-4","slide-down":"animate-in slide-in-from-top-4","spin-in":"animate-in spin-in-180"})[e]??`animate-in ${e}`,exitAnim:e=>({fade:"animate-out fade-out","fade-up":"animate-out fade-out slide-out-to-top-4","fade-down":"animate-out fade-out slide-out-to-bottom-4",zoom:"animate-out zoom-out-95","slide-up":"animate-out slide-out-to-top-4","slide-down":"animate-out slide-out-to-bottom-4"})[e]??`animate-out ${e}`,animFill:e=>`fill-mode-${e}`,animDuration:e=>`duration-${e}`,animDelay:e=>`delay-${e}`,animRepeat:e=>e==="infinite"?"repeat-infinite":`repeat-${e}`,animDirection:e=>`direction-${e}`}});}function ie(){f({name:"interactivity",props:{hoverBg:e=>`hover:bg-${m(String(e))}`,hoverText:e=>`hover:text-${m(String(e))}`,hoverBorder:e=>`hover:border-${m(String(e))}`,hoverShadow:e=>`hover:shadow-${e}`,hoverOpacity:e=>`hover:opacity-${e}`,hoverScale:e=>e===true?"hover:scale-105":`hover:scale-${e}`,focusRing:e=>e===true?"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2":`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-${e} focus-visible:ring-offset-2`,focusBg:e=>`focus:bg-${e}`,activeScale:e=>e===true?"active:scale-95":`active:scale-${e}`,activeBg:e=>`active:bg-${e}`,activeOpacity:e=>`active:opacity-${e}`,groupHoverBg:e=>`group-hover:bg-${m(String(e))}`,groupHoverText:e=>`group-hover:text-${e}`,groupHoverScale:e=>`group-hover:scale-${e}`,peerCheckedBg:e=>`peer-checked:bg-${e}`}});}function Ge(){ee(),te(),ne(),re(),oe(),ie();}exports.KNOWN_TW_PROPS=Ye;exports.TW_PROP_KEYS=x;exports.VALID_SCREENS=Z;exports.allowProp=We;exports.attachTw=ke;exports.blockProp=_e;exports.buildSchema=He;exports.cls=xe;exports.componentName=Ie;exports.createComponent=R;exports.cv=Pe;exports.cx=_;exports.cxm=Le;exports.getModifier=H;exports.getPlugin=ge;exports.getTheme=ce;exports.getThemeNamespace=pe;exports.groupByModifier=Je;exports.hashClass=Y;exports.hashNumber=ze;exports.isObject=N;exports.isThemeToken=de;exports.isValidClass=Ke;exports.listPlugins=ye;exports.loadAllV4Plugins=Ge;exports.loadAnimationPlugin=oe;exports.loadAspectPlugin=ne;exports.loadBuiltinPlugins=Ve;exports.loadContainerQueryPlugin=re;exports.loadDarkTheme=Ae;exports.loadDefaultTheme=Ne;exports.loadFormsPlugin=te;exports.loadInteractivityPlugin=ie;exports.loadTypographyPlugin=ee;exports.mergeClasses=Be;exports.normalizeClasses=Xe;exports.onThemeChange=ue;exports.parseClassString=E;exports.registerPlugin=f;exports.registerProp=fe;exports.replaceTheme=le;exports.resetTheme=me;exports.resolveClasses=je;exports.resolveColor=m;exports.resolveCompound=C;exports.resolveProps=T;exports.resolveRadius=w;exports.resolveResponsive=r;exports.resolveSpacing=p;exports.resolveThemeToken=z;exports.resolveToken=b;exports.resolveVariants=v;exports.setTheme=V;exports.shouldForwardProp=q;exports.splitModifiers=De;exports.stripModifier=G;exports.styledFactory=Fe;exports.tw=ve;exports.validateVariantProps=qe;exports.withTw=K;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map