import React from 'react';

type HtmlTagName = keyof HTMLElementTagNameMap;

/**
 * tailwind-styled-v4 — Core Types
 *
 * CRITIQUE-20 #1 fix: CvFn dan TwComponentFactory sekarang punya proper generic types
 * bukan `any`. Type safety sudah berlaku di public API.
 */

type VariantLiterals = string | number | boolean;
/** Sizes sugar syntax — shorthand untuk variants.size */
type SizesConfig = Record<string, string>;
/**
 * Shared literal-narrowing logic dipakai baik oleh `InferVariantProps` (top-level
 * component variants) maupun `InferSubVariantsFromConfig` (sub-component variants) —
 * supaya kedua tempat itu tidak duplikasi & selalu konsisten.
 */
type InferVariantPropsFromVariantsMap<V> = {
    [K in keyof V as string extends K ? never : number extends K ? never : K]?: V[K] extends Record<infer Key, unknown> ? Key extends "true" | "false" ? boolean : Key extends number ? Key : Key extends `${infer N extends number}` ? N : Key : never;
};
type InferVariantProps<T extends ComponentConfig> = InferVariantPropsFromVariantsMap<T["variants"]>;
/**
 * Infer allowed types for defaultVariants based on variant keys.
 * Supports:
 * - String keys: { variant: "primary" }
 * - Number keys: { priority: 0 }
 * - Boolean keys: { disabled: false } (translates true/false to "true"/"false" keys)
 *
 * This helper ensures type safety when defaultVariants contains non-string values.
 */
type InferDefaultVariantsType<T extends ComponentConfig> = InferVariantPropsFromVariantsMap<T["variants"]>;
type InferSizeProps<T extends ComponentConfig> = T["sizes"] extends Record<string, string> ? {
    size?: keyof T["sizes"];
} : Record<never, never>;
/**
 * Infer boolean props dari states config.
 * Setiap key di states → optional boolean prop di component.
 *
 * @example
 * // states: { loading: "...", fullWidth: "..." }
 * // → { loading?: boolean, fullWidth?: boolean }
 */
type InferStatesProps<T extends ComponentConfig> = {
    [K in keyof T["states"] as string extends K ? never : number extends K ? never : K]?: boolean;
};
/**
 * Sub-component config bisa berupa:
 * - string: "font-bold text-lg" → render <span> dengan classes
 * - Record<componentName, string>: nested HTML tag dengan component names dan classes
 * - Record<componentName, SubComponentConfig>: nested HTML tag dengan component names dan full variant config
 *
 * @example
 * sub: {
 *   icon: "w-4 h-4",                        // → <span class="w-4 h-4"> dipanggil Card.icon
 *   header: { topBar: "bg-gray-900" },       // → <header> dipanggil Card.topBar
 *   h2: { title: "text-xl font-bold" },      // → <h2> dipanggil Card.title
 *   section: { content: "px-6 py-4" },       // → <section> dipanggil Card.content
 *   canvas: { base: "p-6", variants: { layout: { wrap: "gap-4", column: "gap-0" } } }  // → <div> dengan variants
 * }
 */
interface SubComponentConfig {
    base?: string;
    variants?: Record<string, Record<string, string>>;
    defaultVariants?: Record<string, string | number | boolean>;
    compoundVariants?: Array<{
        class: string;
        [key: string]: string;
    }>;
}
type SubValue = string | SubComponentConfig | Record<string, string | SubComponentConfig>;
/**
 * Boolean props yang di-resolve via bitmask lookup table (pre-generated di build time).
 * Berbeda dari `state` (CSS data-attribute driven) — ini adalah React props boolean.
 *
 * @example
 * states: {
 *   loading:   "opacity-60 cursor-wait pointer-events-none",
 *   fullWidth: "w-full",
 *   disabled:  "opacity-50 cursor-not-allowed",
 * }
 *
 * // JSX — boolean prop langsung:
 * <Button loading fullWidth>Submit</Button>
 */
type StatesConfig = Record<string, string>;
interface ComponentConfig {
    base?: string;
    /** Variants — nested: { intent: { primary: "..." }, size: { sm: "..." } }
     * Supports string and boolean keys: { disabled: { true: "...", false: "..." } }
     */
    variants?: Record<string, Record<string | "true" | "false" | number, string>>;
    /** defaultVariants accepts string | number | boolean to match all possible variant key types */
    defaultVariants?: Record<string, string | number | boolean>;
    compoundVariants?: Array<{
        class: string;
        [key: string]: string;
    }>;
    state?: Record<string, Record<string, string>>;
    container?: Record<string, string>;
    containerName?: string;
    /** Sugar syntax untuk variants.size — { sm: "...", md: "...", lg: "..." } */
    sizes?: SizesConfig;
    /** defaultSize — default ke key pertama kalau tidak diset */
    defaultSize?: string;
    /**
     * Boolean props — di-resolve via Rust bitmask lookup table di build time.
     * Maksimal 16 states per komponen (2^16 kombinasi).
     */
    states?: StatesConfig;
    /** Sub-component definitions — string atau nested { tag: { name: classes } } */
    sub?: Record<string, SubValue>;
    /**
     * Pre-computed hash — di-inject oleh turbopackLoader via `inject_state_hash()` (Rust).
     * Kalau ada, `stateEngine.ts` skip runtime `hashState()` computation sepenuhnya.
     * Format: 6-char FNV-1a hex string, identik dengan output `hashState()`.
     * @internal — jangan set manual, ini di-inject otomatis saat build/dev.
     */
    __hash?: string;
    /**
     * Wave 3: Semantic component type untuk auto-generated ARIA metadata.
     * Digunakan oleh build-time ARIA injection plugin untuk determine semantic role.
     *
     * Common values: 'button', 'link', 'checkbox', 'radio', 'input', 'form', 'dialog',
     *                'navigation', 'heading', 'alert', 'tab', 'section', 'status', 'aside'
     *
     * @example
     * '@semantic': 'button'  // → auto-inject role="button"
     * '@semantic': 'dialog'  // → auto-inject role="dialog", aria-modal="true"
     */
    '@semantic'?: string;
    /**
     * Wave 3: Explicit ARIA attributes untuk semantic component.
     * Merged dengan auto-injected ARIA dari semantic type.
     * User-provided ARIA memiliki precedence lebih tinggi (tidak di-override).
     *
     * @example
     * '@aria': { role: 'tab', 'aria-selected': 'true' }
     */
    '@aria'?: Record<string, string>;
    /**
     * Wave 3: State → ARIA property mapping untuk semantic metadata.
     * Determines mana variant/state yang map ke ARIA properties.
     *
     * @example
     * '@state': { expanded: 'aria-expanded', disabled: 'aria-disabled' }
     * → When expanded prop true → aria-expanded="true" auto-injected
     */
    '@state'?: Record<string, string>;
}
/**
 * Strip tag prefix dari "tag:name" format sub key.
 * "div:action" → "action"
 * "header"     → "header" (tidak berubah)
 */
type ExtractSubName<K extends string> = K extends `${string}:${infer Name}` ? Name : K;
/**
 * True kalau S[K] adalah SubComponentConfig LANGSUNG (satu sub-component dengan
 * `base`/`variants` sendiri, mis. `canvas: { base: "...", variants: {...} }`) —
 * bukan nested named-group (mis. `header: { topBar: "...", nav: "..." }`).
 *
 * HARUS identik dengan discriminant runtime di createComponent.ts:
 * `"base" in value || "variants" in value`. Kedua bentuk sama-sama tampak sebagai
 * `Record<string, ...>` secara struktural, jadi tidak bisa dibedakan cuma lewat
 * `extends Record<string, string>` — perlu cek keberadaan key `base`/`variants`
 * secara eksplisit seperti runtime-nya.
 */
type IsDirectSubConfig<V> = V extends string ? false : "variants" extends keyof V ? true : "base" extends keyof V ? true : false;
/**
 * Infer semua sub-component names dari config.sub:
 * - string value plain     → key langsung: { icon: "..." } → "icon"
 * - string value tag:name  → strip tag: { "div:action": "..." } → "action"
 * - direct SubComponentConfig → key langsung (support "tag:name" juga): { canvas: {base, variants} } → "canvas"
 * - nested named-group     → nested keys: { h2: { title: "..." } } → "title"
 */
type InferSubFromConfig<C extends ComponentConfig> = C extends {
    sub: infer S extends Record<string, SubValue>;
} ? {
    [K in keyof S]: S[K] extends string ? K extends string ? ExtractSubName<K> : never : IsDirectSubConfig<S[K]> extends true ? K extends string ? ExtractSubName<K> : never : S[K] extends Record<infer N extends string, string> ? N : never;
}[keyof S] : never;
/**
 * HTML tags yang otomatis dikenali sebagai tag dari bare sub-key (tanpa "tag:name" syntax).
 * HARUS identik dengan SEMANTIC_HTML_TAGS di createComponent.ts (parseSubKey) — kalau
 * drift, sub-component bisa di-tipe-kan dengan native attributes yang salah (tag yang
 * benar2 di-render di runtime beda dari yang dipakai untuk inference type-nya).
 */
type SemanticSubTag = "article" | "aside" | "details" | "figcaption" | "figure" | "footer" | "header" | "main" | "mark" | "nav" | "section" | "summary" | "time" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "ul" | "ol" | "li" | "dl" | "dt" | "dd" | "table" | "thead" | "tbody" | "tfoot" | "tr" | "th" | "td" | "form" | "fieldset" | "legend" | "label" | "a" | "button" | "img" | "span" | "div" | "blockquote" | "pre" | "code" | "em" | "strong" | "small";
/**
 * Resolve tag HTML dari satu sub-key string — mirror logic `parseSubKey()` runtime
 * di createComponent.ts:
 * - "a:link"  → tag eksplisit sebelum colon ("a")
 * - "header"  → bare key, fallback ke key itu sendiri kalau termasuk SemanticSubTag
 * - "icon"    → bare key, bukan semantic tag → fallback "span" (default runtime)
 */
type ResolveSubTag<K extends string> = K extends `${infer Tag}:${string}` ? Tag extends HtmlTagName ? Tag : "span" : K extends SemanticSubTag ? K : "span";
/** Gabungkan union of object types jadi satu intersection — dipakai untuk merge per-key tag map. */
type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
/**
 * Infer mapping { subComponentName: htmlTag } dari config.sub — dipakai supaya setiap
 * sub-component (Card.icon, Breadcrumb.link, dst) punya native HTML attributes yang
 * SESUAI tag yang benar2 di-render (href untuk <a>, src untuk <img>, dst), bukan cuma
 * `{ children?, className? }` generik.
 *
 * @example
 * sub: { "a:link": "...", "span:sep": "..." } → { link: "a"; sep: "span" }
 * sub: { header: { topBar: "..." } }          → { topBar: "header" }
 */
type InferSubTagsFromConfig<C extends ComponentConfig> = C extends {
    sub: infer S extends Record<string, SubValue>;
} ? UnionToIntersection<{
    [K in keyof S]: K extends string ? S[K] extends string ? {
        [N in ExtractSubName<K>]: ResolveSubTag<K>;
    } : IsDirectSubConfig<S[K]> extends true ? {
        [N in ExtractSubName<K>]: ResolveSubTag<K>;
    } : S[K] extends Record<string, string> ? {
        [N in keyof S[K]]: K extends HtmlTagName ? K : "span";
    } : never : never;
}[keyof S]> : Record<string, never>;
/**
 * Infer mapping { subComponentName: variantProps } dari config.sub — dipakai supaya
 * sub-component yang punya `variants` sendiri (mis. `canvas: { base, variants: { layout: {...} } }`)
 * ikut ke-expose propnya (`layout`) di accessor-nya (`PlaygroundWrap.canvas`), bukan cuma
 * native HTML attributes dari tag-nya.
 *
 * @example
 * sub: { canvas: { variants: { layout: { wrap: "...", column: "..." } } } }
 * → { canvas: { layout?: "wrap" | "column" } }
 */
type InferSubVariantsFromConfig<C extends ComponentConfig> = C extends {
    sub: infer S extends Record<string, SubValue>;
} ? UnionToIntersection<{
    [K in keyof S]: K extends string ? IsDirectSubConfig<S[K]> extends true ? S[K] extends {
        variants?: infer V;
    } ? {
        [N in ExtractSubName<K>]: InferVariantPropsFromVariantsMap<V>;
    } : Record<never, never> : Record<never, never> : Record<never, never>;
}[keyof S]> : Record<never, never>;
interface ContainerConfig {
    base?: string;
    queries?: Record<string, string>;
    defaultQuery?: string;
}
interface StateConfig {
    base?: string;
    states?: Record<string, Record<string, string>>;
    defaultStates?: Record<string, boolean>;
}
type CvFn<C extends ComponentConfig> = (props?: {
    [K in keyof C["variants"] as string extends K ? never : number extends K ? never : K]?: keyof C["variants"][K];
} & {
    class?: string;
    className?: string;
}) => string;
interface StyledComponentProps {
    className?: string;
    as?: HtmlTagName;
    children?: React.ReactNode;
}
type SubComponentMap = Record<string, unknown>;
type TwSubComponentAccessor<Tag extends HtmlTagName = "span", ExtraProps extends Record<string, unknown> = Record<never, never>> = React.FC<Omit<React.ComponentPropsWithoutRef<Tag>, "ref" | keyof ExtraProps> & ExtraProps & {
    children?: React.ReactNode;
    className?: string;
}>;
type TrimLeft<S extends string> = S extends ` ${infer R}` | `
${infer R}` | `	${infer R}` | `
${infer R}` ? TrimLeft<R> : S;
type TrimRight<S extends string> = S extends `${infer L} ` | `${infer L}
` | `${infer L}	` | `${infer L}
` ? TrimRight<L> : S;
type Trim<S extends string> = TrimLeft<TrimRight<S>>;
type ExtractSubNames<T extends string> = T extends `${string}[${infer Name}]${string}{${string}}${infer Rest}` ? Trim<Name> | ExtractSubNames<Rest> : T extends `${string}\n${infer Name}{${string}}${infer Rest}` ? (Trim<Name> extends "" ? never : Trim<Name>) | ExtractSubNames<Rest> : never;
type SubComponentKeys<S extends string, TagMap extends Record<string, string> = Record<string, never>, SubVariantsMap extends Record<string, Record<string, unknown>> = Record<string, never>> = {
    [K in S]: TwSubComponentAccessor<K extends keyof TagMap ? (TagMap[K] extends HtmlTagName ? TagMap[K] : "span") : "span", K extends keyof SubVariantsMap ? SubVariantsMap[K] : Record<never, never>>;
};
type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S extends string = string, TagMap extends Record<string, string> = Record<string, never>, Tag extends HtmlTagName = HtmlTagName, SubVariantsMap extends Record<string, Record<string, unknown>> = Record<string, never>> = {
    (props: Omit<React.ComponentPropsWithoutRef<Tag>, keyof InferVariantProps<Config> | keyof InferSizeProps<Config> | keyof InferStatesProps<Config>> & StyledComponentProps & InferVariantProps<Config> & InferSizeProps<Config> & InferStatesProps<Config>): React.ReactElement | null;
    displayName?: string;
    extend: {
        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
        <EC extends {
            classes?: string;
            variants?: ComponentConfig["variants"];
            defaultVariants?: ComponentConfig["defaultVariants"];
            compoundVariants?: ComponentConfig["compoundVariants"];
        }>(config: EC & {
            defaultVariants?: InferDefaultVariantsType<{
                variants: EC["variants"];
            }>;
        }): TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
    };
    withVariants: (config: Partial<Omit<Config, "defaultVariants">> & {
        defaultVariants?: InferDefaultVariantsType<Config>;
    }) => TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
    /**
     * Declare sub-component names secara eksplisit untuk autocomplete + type safety.
     *
     * @example
     * export const Button = tw.button`
     *   flex h-12 ...
     *   icon { flex h-4 }
     * `.withSub<"icon" | "footer">()
     *
     * Button.icon   // ✅ autocomplete
     * Button.footer // ✅ autocomplete
     * Button.xyz    // ❌ TypeScript error
     */
    withSub<NewS extends string>(): TwStyledComponent<Config, NewS, TagMap, Tag, SubVariantsMap>;
} & SubComponentKeys<S, TagMap, SubVariantsMap>;
interface TwSubComponent<P = unknown> {
    (props: P): React.ReactElement | null;
    displayName?: string;
}
interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig, Tag extends HtmlTagName = HtmlTagName> {
    <C extends ComponentConfig>(config: C & {
        defaultVariants?: InferDefaultVariantsType<C>;
    }): TwStyledComponent<C, InferSubFromConfig<C>, InferSubTagsFromConfig<C> extends Record<string, string> ? InferSubTagsFromConfig<C> : Record<string, never>, Tag, InferSubVariantsFromConfig<C> extends Record<string, Record<string, unknown>> ? InferSubVariantsFromConfig<C> : Record<string, never>>;
    <const T extends string>(strings: readonly [T], ...exprs: []): TwStyledComponent<Config, ExtractSubNames<T>, Record<string, never>, Tag>;
    (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, string, Record<string, never>, Tag>;
}
type TwTagFactory = {
    [K in HtmlTagName]: TwTemplateFactory<ComponentConfig, K>;
};
type TwTagFactoryAny = {
    [key: string]: TwTemplateFactory;
};
type TwComponentFactory<T extends React.ElementType = React.ElementType> = (tag: T) => TwTemplateFactory;
type TwServerObject = TwTagFactory & {
    [K in HtmlTagName as `${K}`]: TwTemplateFactory<ComponentConfig, K>;
};
type TwObject = TwComponentFactory & TwTagFactory & {
    server: TwServerObject;
};

/**
 * tailwind-styled-v4 v2 — tw
 *
 * API:
 *   tw.div`p-4 bg-zinc-900`
 *   tw.button`px-4 [icon] { h-4 w-4 }`   ← sub-components inline
 *   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 — cv()
 *
 * Runtime: native-first with fallback to generated variant tables.
 *
 * Dua mode:
 * 1. GENERATED (optimal) — import dari variants.generated.ts hasil `npx tw compile-variants`
 *    → O(1) lookup, static, zero runtime computation
 * 2. RUNTIME (fallback) — compute on-the-fly via native binding
 *    → Requires native Rust binding for variant resolution
 */

/**
 * Register pre-computed variant table dari generated file.
 * Dipanggil otomatis saat import variants.generated.ts
 */
declare function registerVariantTable(componentId: string, table: Record<string, string>): void;
declare function cv<C extends ComponentConfig>(config: C, componentId?: string): CvFn<C>;

/**
 * tailwind-styled-v4 v2 — cx / cn
 *
 * Native Rust binding dipakai di Node.js/SSR untuk performa maksimal.
 *
 * Browser fallback (Bug 2 — "Native binding 'resolveClassNames' is required
 * but not available." crash di browser):
 *
 * getNativeBinding() return `null` di browser (bukan throw). Ketika itu terjadi
 * kita gunakan pure-TS fallback yang semantiknya identik dengan implementasi Rust:
 * - cn(): filter falsy + join spasi (identik dengan resolve_class_names di Rust)
 * - cx(): conflict-aware merge via twMergeRawJs (port dari tw_merge.rs)
 * - cxn(): flatten nested array + filter falsy + join spasi
 *
 * Server path TIDAK DIUBAH: throw Error tetap dijalankan jika native null di
 * Node.js (menandakan miskonfigurasi). Fallback hanya aktif saat isBrowser=true.
 */
type ClassValue = string | undefined | null | false | 0;
/**
 * cn — simple class name joiner (no conflict resolution).
 * Node.js: delegates ke Rust `resolve_class_names`.
 * Browser: pure-TS fallback — filter falsy + join spasi.
 *
 * @example cn("p-4", isActive && "opacity-100") → "p-4 opacity-100"
 */
declare function cn(...inputs: (ClassValue | ClassValue[])[]): string;
/**
 * cx — conflict-aware class merger.
 * Node.js: delegates ke Rust `tw_merge_many`.
 * Browser: pure-TS fallback via twMergeRawJs (port algoritma Rust).
 *
 * @example cx("p-4 p-8")                        → "p-8"
 * @example cx("bg-red-500", "bg-blue-500")       → "bg-blue-500"
 * @example cx(["flex", "items-center"], "px-4")  → "flex items-center px-4"
 */
declare function cx(...inputs: (ClassValue | ClassValue[])[]): string;
/** @deprecated Use cx() instead. */
declare const cxm: typeof cx;

declare function createComponent<TConfig extends ComponentConfig>(tag: React.ElementType, config: TConfig | string): TwStyledComponent<TConfig, InferSubFromConfig<TConfig>>;

interface ThemeConfig$1 {
    colors: Record<string, string>;
    spacing: Record<string, string>;
    fonts: Record<string, string>;
    breakpoints: Record<string, string>;
    animations: Record<string, string>;
    raw: Record<string, string>;
}

/**
 * tailwind-styled-v4 — createTwMerge()
 *
 * Native Rust binding (twMergeRaw) is used when available (Node.js, build
 * time, SSR) for maximum performance/parity with the rest of the pipeline.
 *
 * Browser fallback (Bug C — "Uncaught Error: Native binding 'twMergeRaw' is
 * required but not available." crashing in the browser):
 *
 * createComponent.ts calls twMerge() unconditionally inside the React render
 * function for EVERY tw.* component, on EVERY render — including the very
 * first client-side render of any component that runs/re-renders in the
 * browser. A `.node` native addon can never load inside a browser JS engine,
 * so this isn't a rare edge case, it's unconditional: any tw.* component
 * rendering client-side needs a working fallback path.
 *
 * getNativeBinding() returns `null` (not a throw) when running in the
 * browser — see native.ts. When that happens we use mergeFallback.ts, a
 * hand-written pure-TS port of the SAME algorithm as `tw_merge_raw` in
 * tw_merge.rs (conflict_group / split_variants / merge_class_string),
 * instead of the third-party `tailwind-merge` package. This keeps merge
 * behavior defined by one algorithm — ours — rather than risking the
 * browser and the server silently disagreeing on merged className output
 * because two different implementations drifted apart. The cost: when
 * tw_merge.rs's conflict_group() changes, mergeFallback.ts must be updated
 * by hand to match (see comments there).
 */

interface MergeOptions {
    /**
     * NOTE: not currently applied — matches the native path, which calls
     * `native.twMergeRaw(inputs)` without ever forwarding a prefix either.
     * Kept on the type for API stability; wire it through conflictGroup()
     * in mergeFallback.ts (and tw_merge_raw on the Rust side) together if a
     * custom Tailwind prefix needs to be supported correctly end-to-end.
     */
    prefix?: string;
    separator?: string;
    theme?: ThemeConfig$1;
}
declare function createTwMerge(options?: MergeOptions): (...classLists: Array<string | undefined | null | false>) => string;
declare const twMerge: (...classLists: Array<string | undefined | null | false>) => string;
declare function mergeWithRules(rules: Record<string, (classes: string[]) => string>, ...classLists: string[]): string;

/**
 * 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;
}
declare const stateRegistry: Map<string, StateComponentEntry>;
declare global {
    interface Window {
        __TW_STATE_REGISTRY__?: typeof stateRegistry;
    }
}
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).
 *
 * @param tag HTML tag name
 * @param state State config object
 * @param precomputedHash Optional pre-computed hash dari `inject_state_hash()` Rust transform.
 *   Kalau ada, skip runtime `hashState()` sepenuhnya → zero hashing overhead.
 */
declare function processState(tag: string, state: StateConfig, precomputedHash?: string): 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 — 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;
}
declare const containerRegistry: Map<string, ContainerEntry>;
declare global {
    interface Window {
        __TW_CONTAINER_REGISTRY__?: typeof containerRegistry;
    }
}
interface ContainerQueryResult {
    containerClass: string;
    hasContainer: true;
}
declare function processContainer(tag: string, container: ContainerConfig, containerName?: string): ContainerQueryResult;
/**
 * Generate @container CSS rules dari breakpoint config.
 *
 * Native-only: Rust string building tanpa intermediate allocations.
 */
declare function generateContainerCss(tag: string, container: ContainerConfig, containerName?: string): string;
declare function getContainerRegistry(): Map<string, ContainerEntry>;

/**
 * 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;
    /** HTML tag for the component */
    tag?: 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<ComponentConfig, string>;
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>;

interface StyledOptions {
    base?: string;
    variants?: Record<string, Record<string, string>>;
    defaultVariants?: Record<string, string>;
    compoundVariants?: Array<{
        variants: Record<string, string>;
        className: string;
    }>;
}
type StyledProps = {
    className?: string;
} & Record<string, string | number | boolean | undefined>;
declare function resolveStyledClassName(options: StyledOptions, props?: StyledProps): string;
declare function styled(options: StyledOptions): (props?: StyledProps) => string;

/**
 * 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;
};

interface SubComponentProps {
    children?: React.ReactNode;
    className?: string;
}
interface SubComponentEntry {
    name: string;
    component: React.FC<SubComponentProps>;
    defaultClasses?: string;
}
declare function registerSubComponent(entry: SubComponentEntry): void;
declare function getSubComponent(name: string): SubComponentEntry | undefined;
declare function getAllSubComponents(): SubComponentEntry[];
declare function withSubComponents<T extends object>(Component: T, subComponentNames: string[]): T & Record<string, React.FC<SubComponentProps>>;

/**
 * tailwind-styled-v5 — Native Rust Bindings
 *
 * All functions require native Rust bindings.
 * Uses @tailwind-styled/shared for native resolution.
 */
interface ParsedClassModifier {
    type: "opacity" | "arbitrary";
    value: string;
}
interface ParsedClass {
    raw: string;
    base: string;
    variants: string[];
    modifier?: ParsedClassModifier;
}
interface ThemeConfig {
    colors: Record<string, string>;
    spacing: Record<string, string>;
    fonts: Record<string, string>;
    breakpoints: Record<string, string>;
    animations: Record<string, string>;
    raw: Record<string, string>;
}

export { type ComponentConfig, type ContainerConfig, type ContainerEntry, type CvFn, type HtmlTagName, type InferVariantProps, type MergeOptions, type ParsedClass, type ParsedClassModifier, type ResolvedThemeTokens, type StateComponentEntry, type StateConfig, type StyledComponentProps, type StyledOptions, type StyledProps, type StyledSystemConfig, type StyledSystemInstance, type SubComponentEntry, type SubComponentMap, type SubComponentProps, type SystemComponentConfig, type SystemComponentFactory, type SystemTokenMap, type ThemeConfig, type ThemeTokenMap, type TwComponentFactory, type TwObject, type TwStyledComponent, type TwSubComponent, type TwTagFactory, type TwTagFactoryAny, type VariantLiterals, cn, createComponent, createStyledSystem, createTheme, createTwMerge, cssVar, cv, cx, cxm, generateContainerCss, generateStateCss, getAllSubComponents, getContainerRegistry, getStateRegistry, getSubComponent, mergeWithRules, processContainer, processState, registerSubComponent, registerVariantTable, resolveStyledClassName, server, styled, t, tw, twMerge, twVar, v4Tokens, withSubComponents };