tailwind-styled-v4 5.0.10 → 5.0.11

package/dist/index.d.ts

@@ -12,11 +12,57 @@ export { a as LiveTokenSet, T as TokenSubscriber, b as applyTokenSet, t as conta
  */
 
 type VariantLiterals = string | number | boolean;
+/** Sizes sugar syntax — shorthand untuk variants.size */
+type SizesConfig = Record<string, string>;
 type InferVariantProps<T extends ComponentConfig> = {
     [K in keyof T["variants"]]?: keyof T["variants"][K];
 };
+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"]]?: boolean;
+};
+/**
+ * Sub config bisa berupa:
+ * - string: "font-bold text-lg" → render <span>
+ * - Record<name, string>: nested object per HTML tag
+ *
+ * @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
+ * }
+ */
+type SubValue = string | Record<string, string>;
+/**
+ * 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: "..." } } */
     variants?: Record<string, Record<string, string>>;
     defaultVariants?: Record<string, string>;
     compoundVariants?: Array<{
@@ -26,12 +72,35 @@ 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>;
+    /** 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>;
 }
+/**
+ * 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;
+/**
+ * Infer semua sub-component names dari config.sub:
+ * - string value plain   → key langsung: { icon: "..." } → "icon"
+ * - string value tag:name → strip tag: { "div:action": "..." } → "action"
+ * - nested object        → nested keys: { h2: { title: "..." } } → "title"
+ */
 type InferSubFromConfig<C extends ComponentConfig> = C extends {
-    sub: Record<infer K extends string, string>;
-} ? K : never;
+    sub: infer S extends Record<string, SubValue>;
+} ? {
+    [K in keyof S]: S[K] extends string ? K extends string ? ExtractSubName<K> : never : S[K] extends Record<infer N extends string, string> ? N : never;
+}[keyof S] : never;
 interface ContainerConfig {
     base?: string;
     queries?: Record<string, string>;
@@ -73,7 +142,7 @@ type SubComponentKeys<S extends string> = string extends S ? {
     [K in S]: TwSubComponentAccessor;
 };
 type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S extends string = string> = {
-    (props: StyledComponentProps & InferVariantProps<Config>): React.ReactElement | null;
+    (props: StyledComponentProps & InferVariantProps<Config> & InferSizeProps<Config> & InferStatesProps<Config>): React.ReactElement | null;
     displayName?: string;
     extend: {
         (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S>;
@@ -182,7 +251,7 @@ declare function processContainer(tag: string, container: ContainerConfig, conta
 declare function generateContainerCss(tag: string, container: ContainerConfig, containerName?: string): string;
 declare function getContainerRegistry(): Map<string, ContainerEntry>;
 
-declare function createComponent<P extends object = Record<string, unknown>>(tag: React.ElementType, config: string | ComponentConfig): TwStyledComponent<P>;
+declare function createComponent<TConfig extends ComponentConfig>(tag: React.ElementType, config: TConfig | string): TwStyledComponent<TConfig, InferSubFromConfig<TConfig>>;
 
 /**
  * tailwind-styled-v4 — cv()
@@ -203,22 +272,27 @@ declare function cv<C extends ComponentConfig>(config: C, componentId?: string):
  *
  * Native-first:
  *   cn() → simple join (no conflict resolution) — delegates ke Rust `resolve_class_names`
- *   cx() → conflict-aware merge — delegates ke Rust `tw_merge` (required)
+ *   cx() → conflict-aware merge — delegates ke Rust `tw_merge` (preferred)
  *   cxm() → alias cx() untuk backward compat
+ *
+ * Browser fallback: simple join when native binding unavailable.
+ * In browser/client context, classes were already resolved on server during SSR.
  */
 type ClassValue = string | undefined | null | false | 0;
 /**
  * cn — simple class name joiner (no conflict resolution).
  * Native-first: delegates ke Rust `resolve_class_names` yang filter+join
  * dalam satu pass tanpa intermediate allocations.
+ * Browser fallback: flat+filter+join.
  *
  * @example cn("p-4", isActive && "opacity-100") → "p-4 opacity-100"
  */
 declare function cn(...inputs: (ClassValue | ClassValue[])[]): string;
 /**
  * cx — conflict-aware class merger.
- * Native-first: delegates ke Rust `tw_merge` (required).
+ * Native-first: delegates ke Rust `tw_merge` (preferred).
  * Mendukung array inputs — flatten sebelum di-pass ke native.
+ * Browser fallback: simple join without conflict resolution.
  *
  * @example cx("p-4 p-8")                        → "p-8"
  * @example cx("bg-red-500", "bg-blue-500")       → "bg-blue-500"
@@ -243,8 +317,9 @@ interface ThemeConfig$1 {
 /**
  * tailwind-styled-v4 — createTwMerge()
  *
- * Native-only: uses Rust `tw_merge_many`; requires native binding.
- * No JS fallback — tailwind-merge removed from bundle.
+ * Native-first: uses Rust `tw_merge_many` when available.
+ * Browser fallback: simple join (no conflict resolution).
+ * In browser/client context, classes were already resolved on the server during SSR.
  */
 
 interface MergeOptions {
@@ -254,7 +329,14 @@ interface MergeOptions {
 }
 /**
  * createTwMerge — returns a conflict-aware merge function.
- * Native-only: uses Rust `tw_merge_many`; throws if native binding unavailable.
+ * Native-first: uses Rust `tw_merge_many` when available.
+ * Browser fallback: simple join without conflict resolution.
+ *
+ * IMPORTANT: The browser fallback must produce output identical to the server
+ * (Rust) path to avoid React hydration mismatches. For static base classes this
+ * is fine because they are pre-resolved at build time. For runtime className
+ * overrides passed by the consumer, the join order must be stable and
+ * deterministic on both sides.
  *
  * Note: `prefix` and `separator` options are not supported in native mode
  * (Tailwind v3/v4 defaults are used).
@@ -430,7 +512,7 @@ interface StyledSystemConfig<T extends SystemTokenMap = SystemTokenMap, C extend
     /** If true, auto-inject token CSS vars into :root on init. Default: true */
     injectTokens?: boolean;
 }
-type SystemComponentFactory<C extends SystemComponentConfig> = (overrides?: Partial<C>) => TwStyledComponent<Record<string, unknown>>;
+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]>;
 } & {