tailwind-styled-v4 5.0.8 → 5.0.10

package/dist/{index-eWAocnD2.d.mts → index-NDINUhLN.d.mts}

@@ -63,10 +63,12 @@ interface LoadNativeBindingResult<T> {
 }
 declare function loadNativeBinding<T>(options: LoadNativeBindingOptions<T>): LoadNativeBindingResult<T>;
 interface ResolveCandidatesOptions {
-    runtimeDir: string;
+    runtimeDir?: string;
     envVarNames?: string[];
     includeDefaultCandidates?: boolean;
     enforceNodeExtensionForEnvPath?: boolean;
+    /** @deprecated — ignored, kept for backward compat */
+    packageName?: string;
 }
 declare function resolveNativeBindingCandidates(options: ResolveCandidatesOptions): string[];
 declare function resolveRuntimeDir(dir: string | undefined, importMetaUrl: string): string;

package/dist/{index-eWAocnD2.d.ts → index-NDINUhLN.d.ts}

@@ -63,10 +63,12 @@ interface LoadNativeBindingResult<T> {
 }
 declare function loadNativeBinding<T>(options: LoadNativeBindingOptions<T>): LoadNativeBindingResult<T>;
 interface ResolveCandidatesOptions {
-    runtimeDir: string;
+    runtimeDir?: string;
     envVarNames?: string[];
     includeDefaultCandidates?: boolean;
     enforceNodeExtensionForEnvPath?: boolean;
+    /** @deprecated — ignored, kept for backward compat */
+    packageName?: string;
 }
 declare function resolveNativeBindingCandidates(options: ResolveCandidatesOptions): string[];
 declare function resolveRuntimeDir(dir: string | undefined, importMetaUrl: string): string;

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { a as AnimateOptions } from './types-DXr2PmGP.mjs';
-import { H as HtmlTagName } from './index-eWAocnD2.mjs';
-export { T as TokenMap } from './index-eWAocnD2.mjs';
-export { a as LiveTokenSet, T as TokenSubscriber, b as applyTokenSet, t as containerRef, c as createUseTokens, g as generateTokenCssString, d as getToken, e as getTokens, l as liveToken, s as setToken, h as setTokens, i as subscribeTokens, t as tokenRef, j as tokenVar } from './liveTokenEngine-CX5_0c4q.mjs';
+import { H as HtmlTagName } from './index-NDINUhLN.mjs';
+export { T as TokenMap } from './index-NDINUhLN.mjs';
+export { a as LiveTokenSet, T as TokenSubscriber, b as applyTokenSet, t as containerRef, c as createUseTokens, g as generateTokenCssString, d as getToken, e as getTokens, l as liveToken, s as setToken, h as setTokens, i as subscribeTokens, t as tokenRef, j as tokenVar } from './liveTokenEngine-DKoWRtqH.mjs';
 
 /**
  * tailwind-styled-v4 — Core Types
@@ -26,7 +26,12 @@ interface ComponentConfig {
     state?: Record<string, Record<string, string>>;
     container?: Record<string, string>;
     containerName?: string;
+    /** Sub-component definitions — keys di-infer otomatis oleh TypeScript */
+    sub?: Record<string, string>;
 }
+type InferSubFromConfig<C extends ComponentConfig> = C extends {
+    sub: Record<infer K extends string, string>;
+} ? K : never;
 interface ContainerConfig {
     base?: string;
     queries?: Record<string, string>;
@@ -61,7 +66,7 @@ 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 `${infer _}[${infer Name}]${infer Rest}` ? (Trim<Name> extends string ? Trim<Name> : never) | ExtractSubNames<Rest> : never;
+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> = string extends S ? {
     [key: string]: TwSubComponentAccessor;
 } : {
@@ -80,7 +85,20 @@ type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S exten
         }): TwStyledComponent<Config, S>;
     };
     withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S>;
-    withSub<NewS extends string>(): TwStyledComponent<Config, S | NewS>;
+    /**
+     * 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>;
     animate: (opts: AnimateOptions) => Promise<TwStyledComponent<Config, S>>;
 } & SubComponentKeys<S>;
 interface TwSubComponent<P = unknown> {
@@ -88,9 +106,9 @@ interface TwSubComponent<P = unknown> {
     displayName?: string;
 }
 interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig> {
-    <const T extends string>(strings: readonly [T, ...unknown[]], ...exprs: unknown[]): TwStyledComponent<Config, ExtractSubNames<T>>;
+    <const T extends string>(strings: readonly [T], ...exprs: []): TwStyledComponent<Config, ExtractSubNames<T>>;
     (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, string>;
-    <C extends ComponentConfig>(config: C): TwStyledComponent<C, string>;
+    <C extends ComponentConfig>(config: C): TwStyledComponent<C, InferSubFromConfig<C>>;
 }
 type TwTagFactory = {
     [K in HtmlTagName]: TwTemplateFactory;
@@ -155,6 +173,12 @@ interface ContainerQueryResult {
     hasContainer: true;
 }
 declare function processContainer(tag: string, container: ContainerConfig, containerName?: string): ContainerQueryResult;
+/**
+ * Generate @container CSS rules dari breakpoint config.
+ *
+ * Native-first: Rust string building tanpa intermediate allocations.
+ * JS fallback: `buildContainerRules()` loop.
+ */
 declare function generateContainerCss(tag: string, container: ContainerConfig, containerName?: string): string;
 declare function getContainerRegistry(): Map<string, ContainerEntry>;
 
@@ -163,13 +187,13 @@ declare function createComponent<P extends object = Record<string, unknown>>(tag
 /**
  * tailwind-styled-v4 — cv()
  *
- * Runtime: pure JS, browser-safe, zero fs/native.
+ * 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, pure JS
- *    → Tetap browser-safe, tidak ada native binding
+ * 2. RUNTIME (fallback) — compute on-the-fly via native binding
+ *    → Requires native Rust binding for variant resolution
  */
 
 declare function cv<C extends ComponentConfig>(config: C, componentId?: string): CvFn<C>;
@@ -177,39 +201,32 @@ declare function cv<C extends ComponentConfig>(config: C, componentId?: string):
 /**
  * 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
+ * Native-first:
+ *   cn() → simple join (no conflict resolution) — delegates ke Rust `resolve_class_names`
+ *   cx() → conflict-aware merge — delegates ke Rust `tw_merge` (required)
+ *   cxm() → alias cx() untuk 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.
+ * Native-first: delegates ke Rust `resolve_class_names` yang filter+join
+ * dalam satu pass tanpa intermediate allocations.
  *
  * @example cn("p-4", isActive && "opacity-100") → "p-4 opacity-100"
  */
-declare function cn(...inputs: ClassValue[]): string;
+declare function cn(...inputs: (ClassValue | ClassValue[])[]): string;
 /**
- * cx — conflict-aware class merger using tailwind-merge.
- * Recommended for combining Tailwind classes where conflicts are possible.
+ * cx — conflict-aware class merger.
+ * Native-first: delegates ke Rust `tw_merge` (required).
+ * Mendukung array inputs — flatten sebelum di-pass ke native.
  *
- * 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"
+ * @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[]): string;
+declare function cx(...inputs: (ClassValue | ClassValue[])[]): string;
 /**
- * cxm — alias for cx(), kept for backward compatibility.
+ * cxm — alias untuk cx(), kept for backward compatibility.
  * @deprecated Use cx() instead.
  */
 declare const cxm: typeof cx;
@@ -223,11 +240,25 @@ interface ThemeConfig$1 {
     raw: Record<string, string>;
 }
 
+/**
+ * tailwind-styled-v4 — createTwMerge()
+ *
+ * Native-only: uses Rust `tw_merge_many`; requires native binding.
+ * No JS fallback — tailwind-merge removed from bundle.
+ */
+
 interface MergeOptions {
     prefix?: string;
     separator?: string;
     theme?: ThemeConfig$1;
 }
+/**
+ * createTwMerge — returns a conflict-aware merge function.
+ * Native-only: uses Rust `tw_merge_many`; throws if native binding unavailable.
+ *
+ * Note: `prefix` and `separator` options are not supported in native mode
+ * (Tailwind v3/v4 defaults are used).
+ */
 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;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { a as AnimateOptions } from './types-DXr2PmGP.js';
-import { H as HtmlTagName } from './index-eWAocnD2.js';
-export { T as TokenMap } from './index-eWAocnD2.js';
-export { a as LiveTokenSet, T as TokenSubscriber, b as applyTokenSet, t as containerRef, c as createUseTokens, g as generateTokenCssString, d as getToken, e as getTokens, l as liveToken, s as setToken, h as setTokens, i as subscribeTokens, t as tokenRef, j as tokenVar } from './liveTokenEngine-DSUk88P6.js';
+import { H as HtmlTagName } from './index-NDINUhLN.js';
+export { T as TokenMap } from './index-NDINUhLN.js';
+export { a as LiveTokenSet, T as TokenSubscriber, b as applyTokenSet, t as containerRef, c as createUseTokens, g as generateTokenCssString, d as getToken, e as getTokens, l as liveToken, s as setToken, h as setTokens, i as subscribeTokens, t as tokenRef, j as tokenVar } from './liveTokenEngine-CN9ian1R.js';
 
 /**
  * tailwind-styled-v4 — Core Types
@@ -26,7 +26,12 @@ interface ComponentConfig {
     state?: Record<string, Record<string, string>>;
     container?: Record<string, string>;
     containerName?: string;
+    /** Sub-component definitions — keys di-infer otomatis oleh TypeScript */
+    sub?: Record<string, string>;
 }
+type InferSubFromConfig<C extends ComponentConfig> = C extends {
+    sub: Record<infer K extends string, string>;
+} ? K : never;
 interface ContainerConfig {
     base?: string;
     queries?: Record<string, string>;
@@ -61,7 +66,7 @@ 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 `${infer _}[${infer Name}]${infer Rest}` ? (Trim<Name> extends string ? Trim<Name> : never) | ExtractSubNames<Rest> : never;
+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> = string extends S ? {
     [key: string]: TwSubComponentAccessor;
 } : {
@@ -80,7 +85,20 @@ type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S exten
         }): TwStyledComponent<Config, S>;
     };
     withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S>;
-    withSub<NewS extends string>(): TwStyledComponent<Config, S | NewS>;
+    /**
+     * 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>;
     animate: (opts: AnimateOptions) => Promise<TwStyledComponent<Config, S>>;
 } & SubComponentKeys<S>;
 interface TwSubComponent<P = unknown> {
@@ -88,9 +106,9 @@ interface TwSubComponent<P = unknown> {
     displayName?: string;
 }
 interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig> {
-    <const T extends string>(strings: readonly [T, ...unknown[]], ...exprs: unknown[]): TwStyledComponent<Config, ExtractSubNames<T>>;
+    <const T extends string>(strings: readonly [T], ...exprs: []): TwStyledComponent<Config, ExtractSubNames<T>>;
     (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, string>;
-    <C extends ComponentConfig>(config: C): TwStyledComponent<C, string>;
+    <C extends ComponentConfig>(config: C): TwStyledComponent<C, InferSubFromConfig<C>>;
 }
 type TwTagFactory = {
     [K in HtmlTagName]: TwTemplateFactory;
@@ -155,6 +173,12 @@ interface ContainerQueryResult {
     hasContainer: true;
 }
 declare function processContainer(tag: string, container: ContainerConfig, containerName?: string): ContainerQueryResult;
+/**
+ * Generate @container CSS rules dari breakpoint config.
+ *
+ * Native-first: Rust string building tanpa intermediate allocations.
+ * JS fallback: `buildContainerRules()` loop.
+ */
 declare function generateContainerCss(tag: string, container: ContainerConfig, containerName?: string): string;
 declare function getContainerRegistry(): Map<string, ContainerEntry>;
 
@@ -163,13 +187,13 @@ declare function createComponent<P extends object = Record<string, unknown>>(tag
 /**
  * tailwind-styled-v4 — cv()
  *
- * Runtime: pure JS, browser-safe, zero fs/native.
+ * 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, pure JS
- *    → Tetap browser-safe, tidak ada native binding
+ * 2. RUNTIME (fallback) — compute on-the-fly via native binding
+ *    → Requires native Rust binding for variant resolution
  */
 
 declare function cv<C extends ComponentConfig>(config: C, componentId?: string): CvFn<C>;
@@ -177,39 +201,32 @@ declare function cv<C extends ComponentConfig>(config: C, componentId?: string):
 /**
  * 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
+ * Native-first:
+ *   cn() → simple join (no conflict resolution) — delegates ke Rust `resolve_class_names`
+ *   cx() → conflict-aware merge — delegates ke Rust `tw_merge` (required)
+ *   cxm() → alias cx() untuk 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.
+ * Native-first: delegates ke Rust `resolve_class_names` yang filter+join
+ * dalam satu pass tanpa intermediate allocations.
  *
  * @example cn("p-4", isActive && "opacity-100") → "p-4 opacity-100"
  */
-declare function cn(...inputs: ClassValue[]): string;
+declare function cn(...inputs: (ClassValue | ClassValue[])[]): string;
 /**
- * cx — conflict-aware class merger using tailwind-merge.
- * Recommended for combining Tailwind classes where conflicts are possible.
+ * cx — conflict-aware class merger.
+ * Native-first: delegates ke Rust `tw_merge` (required).
+ * Mendukung array inputs — flatten sebelum di-pass ke native.
  *
- * 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"
+ * @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[]): string;
+declare function cx(...inputs: (ClassValue | ClassValue[])[]): string;
 /**
- * cxm — alias for cx(), kept for backward compatibility.
+ * cxm — alias untuk cx(), kept for backward compatibility.
  * @deprecated Use cx() instead.
  */
 declare const cxm: typeof cx;
@@ -223,11 +240,25 @@ interface ThemeConfig$1 {
     raw: Record<string, string>;
 }
 
+/**
+ * tailwind-styled-v4 — createTwMerge()
+ *
+ * Native-only: uses Rust `tw_merge_many`; requires native binding.
+ * No JS fallback — tailwind-merge removed from bundle.
+ */
+
 interface MergeOptions {
     prefix?: string;
     separator?: string;
     theme?: ThemeConfig$1;
 }
+/**
+ * createTwMerge — returns a conflict-aware merge function.
+ * Native-only: uses Rust `tw_merge_many`; throws if native binding unavailable.
+ *
+ * Note: `prefix` and `separator` options are not supported in native mode
+ * (Tailwind v3/v4 defaults are used).
+ */
 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;