tailwind-styled-v4 1.0.0 → 4.0.0

package/dist/index.d.cts

@@ -0,0 +1,584 @@
+import * as _tailwind_styled_animate from '@tailwind-styled/animate';
+import React, { JSX } from 'react';
+
+/** Reactive state config — generates data-attr CSS selectors */
+interface StateConfig {
+    [stateName: string]: string;
+}
+/** Container query breakpoints */
+interface ContainerConfig {
+    /** @container (min-width: Xpx) */
+    [breakpoint: string]: string | {
+        minWidth?: string;
+        maxWidth?: string;
+        classes: string;
+    };
+}
+interface ComponentConfig {
+    base?: string;
+    variants?: Record<string, Record<string, string>>;
+    compoundVariants?: Array<{
+        class: string;
+        [key: string]: any;
+    }>;
+    defaultVariants?: Record<string, string>;
+    /** Reactive state: { active: "bg-blue-500", disabled: "opacity-50" } */
+    state?: StateConfig;
+    /** Container query: { sm: "flex-col", md: "flex-row" } */
+    container?: ContainerConfig;
+    /** Named container for @container queries */
+    containerName?: string;
+}
+type VariantLiterals<V extends Record<string, string>> = keyof V & string;
+type InferVariantProps<C extends ComponentConfig> = C["variants"] extends Record<string, Record<string, string>> ? {
+    [K in keyof C["variants"]]?: VariantLiterals<C["variants"][K]>;
+} : Record<never, never>;
+type StyledComponentProps<P extends object, C extends ComponentConfig = ComponentConfig> = P & InferVariantProps<C> & {
+    className?: string;
+};
+interface TwStyledComponent<P extends object = Record<string, any>> extends React.ForwardRefExoticComponent<P & React.RefAttributes<any>> {
+    extend(strings: TemplateStringsArray, ...exprs: any[]): TwStyledComponent<P>;
+    withVariants(config: Partial<ComponentConfig>): TwStyledComponent<P>;
+    /** Attach a CSS animation. Requires @tailwind-styled/animate. */
+    animate(opts: _tailwind_styled_animate.AnimateOptions): TwStyledComponent<P>;
+}
+type CvFn<C extends ComponentConfig> = (props?: InferVariantProps<C> & {
+    className?: string;
+} & Record<string, any>) => string;
+type Interpolation<P extends object> = string | number | boolean | null | undefined | ((props: P) => string | number | boolean | null | undefined);
+type 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>;
+    <C extends ComponentConfig>(config: C): TwStyledComponent<JSX.IntrinsicElements[E] & InferVariantProps<C>>;
+    (config: ComponentConfig): TwStyledComponent<JSX.IntrinsicElements[E]>;
+};
+type TwComponentFactory<C extends React.ComponentType<any>> = {
+    (strings: TemplateStringsArray, ...exprs: Interpolation<React.ComponentPropsWithRef<C>>[]): TwStyledComponent<React.ComponentPropsWithRef<C>>;
+    <Config extends ComponentConfig>(config: Config): TwStyledComponent<React.ComponentPropsWithRef<C> & InferVariantProps<Config>>;
+};
+type HtmlTagName = "div" | "section" | "article" | "aside" | "header" | "footer" | "main" | "nav" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "strong" | "em" | "b" | "i" | "s" | "u" | "small" | "mark" | "sub" | "sup" | "blockquote" | "q" | "cite" | "abbr" | "address" | "time" | "code" | "pre" | "kbd" | "samp" | "var" | "ul" | "ol" | "li" | "dl" | "dt" | "dd" | "figure" | "figcaption" | "details" | "summary" | "table" | "thead" | "tbody" | "tfoot" | "tr" | "th" | "td" | "caption" | "colgroup" | "col" | "img" | "picture" | "video" | "audio" | "source" | "track" | "canvas" | "svg" | "path" | "circle" | "rect" | "line" | "polyline" | "polygon" | "ellipse" | "g" | "defs" | "use" | "symbol" | "text" | "tspan" | "form" | "input" | "textarea" | "select" | "option" | "optgroup" | "button" | "label" | "fieldset" | "legend" | "output" | "progress" | "meter" | "datalist" | "a" | "area" | "map" | "iframe" | "embed" | "object" | "hr" | "br" | "wbr" | "dialog" | "menu" | "template" | "slot";
+type TwServerObject = {
+    [K in HtmlTagName]: K extends keyof JSX.IntrinsicElements ? TwTagFactory<K> : TwTagFactory<"div">;
+};
+type TwObject = {
+    [K in keyof JSX.IntrinsicElements]: TwTagFactory<K>;
+} & {
+    <C extends React.ComponentType<any>>(component: C): TwComponentFactory<C>;
+    server: TwServerObject;
+};
+
+/**
+ * tailwind-styled-v4 — Container Query Engine
+ *
+ * Generates @container rules from a simple breakpoint config.
+ *
+ * Usage:
+ *   const Card = tw.div({
+ *     base: "p-4",
+ *     container: {
+ *       sm: "flex-col",      // @container (min-width: 320px)
+ *       md: "flex-row",      // @container (min-width: 640px)
+ *       lg: "grid-cols-3",   // @container (min-width: 1024px)
+ *     },
+ *     containerName: "card",
+ *   })
+ *
+ *   // Wrap with container context:
+ *   const CardWrapper = tw.div`@container`
+ *
+ * Named containers:
+ *   const SidebarCard = tw.div({
+ *     base: "p-2",
+ *     container: { lg: "text-sm" },
+ *     containerName: "sidebar",
+ *   })
+ *   // Generates: @container sidebar (min-width: 1024px) { ... }
+ */
+
+interface ContainerEntry {
+    id: string;
+    tag: string;
+    containerName?: string;
+    breakpoints: Array<{
+        minWidth: string;
+        classes: string;
+    }>;
+    cssInjected: boolean;
+}
+interface ContainerQueryResult {
+    containerClass: string;
+    hasContainer: true;
+}
+declare function processContainer(tag: string, container: ContainerConfig, containerName?: string): ContainerQueryResult;
+declare function generateContainerCss(tag: string, container: ContainerConfig, containerName?: string): string;
+declare function getContainerRegistry(): Map<string, ContainerEntry>;
+
+/**
+ * tailwind-styled-v4 v3 — createComponent
+ *
+ * v3 additions:
+ *   - StateEngine integration: state key → data-attr CSS
+ *   - ContainerQuery integration: container key → @container CSS
+ *
+ * Fixes from v2:
+ *  #03 — filterProps: dynamic based on actual variant keys
+ *  #07 — extend(): always use originalTag, not previous forwardRef wrapper
+ */
+
+declare function createComponent<P extends object = Record<string, any>>(tag: any, config: string | ComponentConfig): TwStyledComponent<P>;
+
+/**
+ * tailwind-styled-v4 v2 — cv()
+ *
+ * UPGRADE #3: cv() now infers exact variant values from config.
+ *
+ * Standalone class variant function — no React needed.
+ * Compatible with shadcn/ui, Radix, Headless UI.
+ *
+ * @example
+ * const button = cv({
+ *   base: "px-4 py-2 rounded-lg",
+ *   variants: { size: { sm: "text-sm", lg: "text-lg" } },
+ *   defaultVariants: { size: "sm" }
+ * })
+ *
+ * // BEFORE: button({ size: "xl" }) — no error (size was string)
+ * // AFTER:  button({ size: "xl" }) — TypeScript ERROR: "xl" not in "sm" | "lg" ✓
+ *
+ * button({ size: "lg" }) → "px-4 py-2 rounded-lg text-lg"
+ */
+
+declare function cv<C extends ComponentConfig>(config: C): CvFn<C>;
+
+/**
+ * tailwind-styled-v4 v2 — cx / cn
+ *
+ * FIX #09: Rename for clarity — behavior was confusing with two near-identical utils.
+ *
+ * BEFORE:
+ *   cx()  → simple join, no conflict resolution → cx("p-4", "p-8") = "p-4 p-8" (WRONG)
+ *   cxm() → twMerge, correct — but obscure name
+ *
+ * AFTER:
+ *   cn()  → simple join (for cases where you know there's no conflict)
+ *   cx()  → twMerge-powered, conflict-aware (recommended for most use cases)
+ *   cxm() → kept as alias for cx() for backward compat
+ */
+type ClassValue = string | undefined | null | false | 0;
+/**
+ * cn — simple class name joiner (no conflict resolution).
+ * Use when you know classes don't conflict.
+ *
+ * FIX #09: Previously named `cx`. Renamed to `cn` for clarity.
+ *
+ * @example cn("p-4", isActive && "opacity-100") → "p-4 opacity-100"
+ */
+declare function cn(...inputs: ClassValue[]): string;
+/**
+ * cx — conflict-aware class merger using tailwind-merge.
+ * Recommended for combining Tailwind classes where conflicts are possible.
+ *
+ * FIX #09: Previously named `cxm`. Renamed to `cx` as the primary utility.
+ *
+ * @example cx("p-4 p-8") → "p-8"  (conflict resolved, last wins)
+ * @example cx("bg-red-500", "bg-blue-500") → "bg-blue-500"
+ */
+declare function cx(...inputs: ClassValue[]): string;
+/**
+ * cxm — alias for cx(), kept for backward compatibility.
+ * @deprecated Use cx() instead.
+ */
+declare const cxm: typeof cx;
+
+/**
+ * tailwind-styled-v4 — Live Token Engine
+ *
+ * Runtime design token management via CSS custom properties.
+ * Theme changes propagate instantly — no rebuild, no re-render.
+ *
+ * Usage:
+ *   import { liveToken, setToken, setTokens, subscribeTokens } from "tailwind-styled-v4"
+ *
+ *   // Define tokens (injected as CSS vars on first call)
+ *   const theme = liveToken({
+ *     primary:    "#3b82f6",
+ *     secondary:  "#6366f1",
+ *     accent:     "#f59e0b",
+ *     surface:    "#18181b",
+ *     "text-base": "#e4e4e7",
+ *   })
+ *
+ *   // Use in components
+ *   const Button = tw.button`
+ *     bg-[var(--tw-token-primary)]
+ *     text-[var(--tw-token-text-base)]
+ *   `
+ *
+ *   // Update at runtime (instant, no rebuild)
+ *   setToken("primary", "#ef4444")     // single token
+ *   setTokens({ primary: "#ef4444", secondary: "#ec4899" }) // batch
+ *
+ *   // Switch themes
+ *   applyTokenSet(darkTheme)
+ *
+ *   // Subscribe to changes
+ *   const unsub = subscribeTokens((tokens) => {
+ *     console.log("theme changed", tokens)
+ *   })
+ *
+ * Token CSS variable naming:
+ *   token("primary") → var(--tw-token-primary)
+ *   token("text-base") → var(--tw-token-text-base)
+ */
+type TokenMap = Record<string, string>;
+interface LiveTokenSet {
+    /** Token name → CSS variable name mapping */
+    vars: Record<string, string>;
+    /** Get current value of a token */
+    get(name: string): string | undefined;
+    /** Update a single token */
+    set(name: string, value: string): void;
+    /** Update multiple tokens at once */
+    setAll(tokens: TokenMap): void;
+    /** Snapshot of current values */
+    snapshot(): TokenMap;
+}
+type TokenSubscriber = (tokens: TokenMap) => void;
+declare function tokenVar(name: string): string;
+declare function tokenRef(name: string): string;
+/**
+ * Define a set of live tokens and inject them as CSS variables.
+ * Returns a LiveTokenSet for programmatic control.
+ *
+ * @example
+ * const theme = liveToken({ primary: "#3b82f6" })
+ * theme.set("primary", "#ef4444") // instant update
+ */
+declare function liveToken(tokens: TokenMap): LiveTokenSet;
+/**
+ * Update a single design token at runtime.
+ * CSS variable is updated immediately — no rebuild needed.
+ */
+declare function setToken(name: string, value: string): void;
+/**
+ * Update multiple tokens in one batch (single DOM update).
+ */
+declare function setTokens(tokens: TokenMap): void;
+/**
+ * Replace all tokens with a new token set (theme switch).
+ */
+declare function applyTokenSet(tokens: TokenMap): void;
+/**
+ * Get current value of a token.
+ */
+declare function getToken(name: string): string | undefined;
+/**
+ * Get snapshot of all current tokens.
+ */
+declare function getTokens(): TokenMap;
+/**
+ * Subscribe to token changes.
+ * Returns unsubscribe function.
+ *
+ * @example
+ * const unsub = subscribeTokens((tokens) => {
+ *   document.documentElement.classList.toggle("dark", tokens.surface === "#000")
+ * })
+ * // Later:
+ * unsub()
+ */
+declare function subscribeTokens(fn: TokenSubscriber): () => void;
+/**
+ * Generate SSR-safe CSS string for current tokens.
+ */
+declare function generateTokenCssString(): string;
+/**
+ * React hook for reading live tokens (re-renders on change).
+ * Import from tailwind-styled-v4/react.
+ */
+declare function createUseTokens(): (() => TokenMap) | null;
+
+/**
+ * tailwind-styled-v4 — Reactive State Engine
+ *
+ * Zero-JS CSS state management via data attributes.
+ * No React re-render needed for style changes.
+ *
+ * How it works:
+ *   1. tw.button({ state: { active: "bg-blue-500", loading: "opacity-70" } })
+ *   2. State engine generates a unique class + injects CSS:
+ *      .tw-s-abc123[data-active="true"] { @apply bg-blue-500; }
+ *      .tw-s-abc123[data-loading="true"] { @apply opacity-70; }
+ *   3. Component renders with the state class
+ *   4. User sets data-active="true" directly — no state needed
+ *
+ * Devtools integration:
+ *   All components register to __TW_STATE_REGISTRY__ for devtools inspection.
+ */
+
+interface StateComponentEntry {
+    id: string;
+    tag: string;
+    states: string[];
+    cssInjected: boolean;
+}
+interface StateEngineResult {
+    /** CSS class to add to the component */
+    stateClass: string;
+    /** Whether this component uses state (for SSR data attributes) */
+    hasState: true;
+    /** List of state names (for devtools) */
+    stateNames: string[];
+}
+/**
+ * Process a StateConfig for a component.
+ * Returns the state class and injects CSS (client-side only).
+ */
+declare function processState(tag: string, state: StateConfig): StateEngineResult;
+/**
+ * Generate SSR-safe CSS string for a state config.
+ * Used by SSR to inject styles into <head>.
+ */
+declare function generateStateCss(tag: string, state: StateConfig): string;
+/**
+ * Get the state registry (for devtools).
+ */
+declare function getStateRegistry(): Map<string, StateComponentEntry>;
+
+/**
+ * tailwind-styled-v4 — createStyledSystem()
+ *
+ * Design System Factory — Mode 3 API.
+ *
+ * Level 1 — utility:      tw.div`p-4`
+ * Level 2 — styled:       tw(Button)`px-4`
+ * Level 3 — design system: ui.button({ variant: "primary" })
+ *
+ * Usage:
+ *   const ui = createStyledSystem({
+ *     tokens: {
+ *       colors: { primary: "#6366f1", muted: "#71717a" },
+ *       radius: { base: "0.5rem", full: "9999px" },
+ *     },
+ *     components: {
+ *       button: {
+ *         base: "inline-flex items-center font-medium transition-colors",
+ *         variants: {
+ *           variant: {
+ *             primary: "bg-[var(--sys-color-primary)] text-white",
+ *             ghost:   "bg-transparent border border-current",
+ *             danger:  "bg-red-500 text-white",
+ *           },
+ *           size: {
+ *             sm: "h-8 px-3 text-sm",
+ *             md: "h-10 px-4 text-base",
+ *             lg: "h-12 px-6 text-lg",
+ *           },
+ *         },
+ *         defaultVariants: { variant: "primary", size: "md" },
+ *       },
+ *     },
+ *   })
+ *
+ *   const Button = ui.button()
+ *   // → <Button variant="primary" size="lg" />
+ *
+ *   // Token access
+ *   ui.token("colors.primary")       // → "var(--sys-color-primary)"
+ *   ui.cssVar("colors.primary")      // → "#6366f1"
+ */
+
+type SystemTokenMap = Record<string, Record<string, string>>;
+interface SystemComponentConfig extends ComponentConfig {
+    /** Extra class applied only when used from the system (e.g. system-level resets) */
+    systemBase?: string;
+}
+interface StyledSystemConfig<T extends SystemTokenMap = SystemTokenMap, C extends Record<string, SystemComponentConfig> = Record<string, SystemComponentConfig>> {
+    /** Design tokens — injected as CSS custom properties under --sys-{group}-{name} */
+    tokens?: T;
+    /** Component presets */
+    components?: C;
+    /** CSS variable prefix. Default: "sys" → --sys-color-primary */
+    prefix?: string;
+    /** If true, auto-inject token CSS vars into :root on init. Default: true */
+    injectTokens?: boolean;
+}
+type SystemComponentFactory<C extends SystemComponentConfig> = (overrides?: Partial<C>) => TwStyledComponent<any>;
+type StyledSystemInstance<T extends SystemTokenMap, C extends Record<string, SystemComponentConfig>> = {
+    [K in keyof C]: SystemComponentFactory<C[K]>;
+} & {
+    /**
+     * Get the CSS variable reference for a token.
+     * @example ui.token("colors.primary") → "var(--sys-colors-primary)"
+     */
+    token(path: string): string;
+    /**
+     * Get the raw value of a token.
+     * @example ui.rawToken("colors.primary") → "#6366f1"
+     */
+    rawToken(path: string): string | undefined;
+    /**
+     * Update token values at runtime (re-injects into :root).
+     */
+    setTokens(updates: Partial<{
+        [G in keyof T]: Partial<T[G]>;
+    }>): void;
+    /**
+     * Access the resolved component config for a registered component.
+     */
+    getConfig(name: keyof C): ComponentConfig | undefined;
+    /**
+     * The tokens object (for reference).
+     */
+    tokens: T;
+};
+declare function createStyledSystem<T extends SystemTokenMap = SystemTokenMap, C extends Record<string, SystemComponentConfig> = Record<string, SystemComponentConfig>>(config: StyledSystemConfig<T, C>): StyledSystemInstance<T, C>;
+
+/**
+ * tailwind-styled-v4 v2 — tw
+ *
+ * API:
+ *   tw.div`p-4 bg-zinc-900`
+ *   tw.button({ base: "px-4", variants: { size: { sm: "text-sm" } } })
+ *   tw(Link)`underline text-blue-400`
+ *   tw.server.div`p-4`   ← server-only, compiler enforced + runtime dev warning
+ */
+
+declare const server: TwServerObject;
+declare const tw: TwObject;
+
+/**
+ * tailwind-styled-v4 v2 — twTheme
+ *
+ * UPGRADE #1: Tailwind v4 CSS Variables integration.
+ *
+ * Tailwind v4 uses @theme inline to expose design tokens as CSS custom properties:
+ *   @theme inline {
+ *     --color-background: var(--background);
+ *     --color-foreground: var(--foreground);
+ *     --font-sans: var(--font-geist-sans);
+ *   }
+ *
+ * This module bridges tw() syntax with those CSS variables — zero config,
+ * full IDE support, type-safe design tokens.
+ *
+ * @example
+ * // Without twTheme (verbose, error-prone)
+ * const Box = tw.div`bg-[var(--color-background)] text-[var(--color-foreground)]`
+ *
+ * // With twTheme (clean, type-safe)
+ * const Box = tw.div`${t.bg("color-background")} ${t.text("color-foreground")}`
+ *
+ * // Or with createTheme for full project-level token map
+ * const theme = createTheme({
+ *   colors: { bg: "color-background", fg: "color-foreground", primary: "color-primary" },
+ *   fonts:  { sans: "font-sans", mono: "font-mono" },
+ * })
+ * const Box = tw.div`bg-${theme.colors.bg} text-${theme.colors.fg}`
+ */
+/**
+ * Reference a CSS custom property in Tailwind v4 arbitrary value syntax.
+ *
+ * @example
+ * cssVar("color-background")         → "var(--color-background)"
+ * cssVar("color-primary", "#3b82f6") → "var(--color-primary, #3b82f6)"
+ */
+declare function cssVar(varName: string, fallback?: string): string;
+/**
+ * Generate a Tailwind v4 arbitrary value that references a CSS variable.
+ *
+ * @example
+ * twVar("bg", "color-background")   → "bg-[var(--color-background)]"
+ * twVar("text", "color-foreground") → "text-[var(--color-foreground)]"
+ * twVar("border", "color-border", "#e5e7eb") → "border-[var(--color-border,#e5e7eb)]"
+ */
+declare function twVar(property: string, varName: string, fallback?: string): string;
+declare const t: {
+    /** Background color from CSS variable: t.bg("color-primary") → "bg-[var(--color-primary)]" */
+    bg: (v: string, fb?: string) => string;
+    /** Text color from CSS variable */
+    text: (v: string, fb?: string) => string;
+    /** Border color from CSS variable */
+    border: (v: string, fb?: string) => string;
+    /** Ring color from CSS variable */
+    ring: (v: string, fb?: string) => string;
+    /** Outline color from CSS variable */
+    outline: (v: string, fb?: string) => string;
+    /** Fill color from CSS variable (SVG) */
+    fill: (v: string, fb?: string) => string;
+    /** Stroke color from CSS variable (SVG) */
+    stroke: (v: string, fb?: string) => string;
+    /** Font family from CSS variable */
+    font: (v: string, fb?: string) => string;
+    /** Shadow from CSS variable */
+    shadow: (v: string, fb?: string) => string;
+    /** Any arbitrary property from CSS variable */
+    var: (property: string, v: string, fb?: string) => string;
+};
+interface ThemeTokenMap {
+    colors?: Record<string, string>;
+    fonts?: Record<string, string>;
+    spacing?: Record<string, string>;
+    [key: string]: Record<string, string> | undefined;
+}
+type ResolvedThemeTokens<T extends ThemeTokenMap> = {
+    [Group in keyof T]: T[Group] extends Record<string, string> ? {
+        [Token in keyof T[Group]]: string;
+    } : never;
+};
+/**
+ * Create a typed theme token map from your CSS variable names.
+ * Returns helper functions that generate Tailwind v4 arbitrary values.
+ *
+ * @example
+ * // Define your tokens (match your globals.css @theme block)
+ * const theme = createTheme({
+ *   colors: {
+ *     bg:       "color-background",
+ *     fg:       "color-foreground",
+ *     primary:  "color-primary",
+ *     muted:    "color-muted",
+ *   },
+ *   fonts: {
+ *     sans: "font-sans",
+ *     mono: "font-mono",
+ *   },
+ * })
+ *
+ * // Use in tw components
+ * const Card = tw.div`
+ *   bg-${theme.colors.bg}
+ *   text-${theme.colors.fg}
+ *   font-${theme.fonts.sans}
+ * `
+ * // → tw.div`bg-[var(--color-background)] text-[var(--color-foreground)] font-[var(--font-sans)]`
+ *
+ * // Use in cv()
+ * const button = cv({
+ *   base: `px-4 py-2 ${theme.colors.bg} ${theme.colors.fg}`,
+ *   variants: { ... }
+ * })
+ */
+declare function createTheme<T extends ThemeTokenMap>(tokenMap: T): ResolvedThemeTokens<T>;
+/**
+ * Pre-built references for standard Tailwind v4 CSS variable tokens.
+ * Works out of the box with next-app-standar-config globals.css.
+ *
+ * @example
+ * import { v4Tokens } from "tailwind-styled-v4"
+ *
+ * const Page = tw.div`${v4Tokens.bg} ${v4Tokens.text}`
+ * // → tw.div`bg-[var(--color-background)] text-[var(--color-foreground)]`
+ */
+declare const v4Tokens: {
+    /** bg-[var(--color-background)] */
+    readonly bg: string;
+    /** text-[var(--color-foreground)] */
+    readonly text: string;
+    /** font-[var(--font-sans)] */
+    readonly fontSans: string;
+    /** font-[var(--font-mono)] */
+    readonly fontMono: string;
+};
+
+export { type ComponentConfig, type ContainerConfig, type ContainerEntry, type CvFn, type HtmlTagName, type InferVariantProps, type LiveTokenSet, type ResolvedThemeTokens, type StateComponentEntry, type StateConfig, type StyledComponentProps, type StyledSystemConfig, type StyledSystemInstance, type SystemComponentConfig, type SystemComponentFactory, type SystemTokenMap, type ThemeTokenMap, type TokenMap, type TokenSubscriber, type TwComponentFactory, type TwObject, type TwStyledComponent, type TwTagFactory, type VariantLiterals, applyTokenSet, cn, tokenRef as containerRef, createComponent, createStyledSystem, createTheme, createUseTokens, cssVar, cv, cx, cxm, generateContainerCss, generateStateCss, generateTokenCssString, getContainerRegistry, getStateRegistry, getToken, getTokens, liveToken, processContainer, processState, server, setToken, setTokens, subscribeTokens, t, tokenRef, tokenVar, tw, twVar, v4Tokens };