tailwind-styled-v4 5.1.31 → 5.1.33

package/dist/index.d.mts

@@ -12,9 +12,15 @@ type HtmlTagName = keyof HTMLElementTagNameMap;
 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"]]?: T["variants"][K] extends Record<infer Key, any> ? Key extends "true" | "false" ? boolean : Key extends number ? Key : Key extends `${infer N extends number}` ? N : Key : never;
+/**
+ * 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]?: V[K] extends Record<infer Key, any> ? 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"]>;
 type InferSizeProps<T extends ComponentConfig> = T["sizes"] extends Record<string, string> ? {
     size?: keyof T["sizes"];
 } : Record<never, never>;
@@ -53,7 +59,7 @@ interface SubComponentConfig {
         [key: string]: string;
     }>;
 }
-type SubValue = string | Record<string, string | SubComponentConfig>;
+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.
@@ -139,16 +145,29 @@ interface ComponentConfig {
  * "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"
- * - nested object        → nested keys: { h2: { title: "..." } } → "title"
+ * - 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 : S[K] extends Record<infer N extends string, string> ? N : never;
+    [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).
@@ -182,10 +201,31 @@ type InferSubTagsFromConfig<C extends ComponentConfig> = C extends {
 } ? 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>;
@@ -208,7 +248,7 @@ interface StyledComponentProps {
     children?: React.ReactNode;
 }
 type SubComponentMap = Record<string, unknown>;
-type TwSubComponentAccessor<Tag extends HtmlTagName = "span"> = React.FC<Omit<React.ComponentPropsWithoutRef<Tag>, "ref"> & {
+type TwSubComponentAccessor<Tag extends HtmlTagName = "span", ExtraProps extends Record<string, unknown> = Record<never, never>> = React.FC<Omit<React.ComponentPropsWithoutRef<Tag>, "ref"> & ExtraProps & {
     children?: React.ReactNode;
     className?: string;
 }>;
@@ -220,22 +260,22 @@ type TrimRight<S extends string> = S extends `${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>> = {
-    [K in S]: TwSubComponentAccessor<K extends keyof TagMap ? (TagMap[K] extends HtmlTagName ? TagMap[K] : "span") : "span">;
+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> = {
+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: React.ComponentPropsWithoutRef<Tag> & StyledComponentProps & InferVariantProps<Config> & InferSizeProps<Config> & InferStatesProps<Config>): React.ReactElement | null;
     displayName?: string;
     extend: {
-        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S, TagMap, Tag>;
+        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
         (config: {
             classes?: string;
             variants?: ComponentConfig["variants"];
             defaultVariants?: ComponentConfig["defaultVariants"];
             compoundVariants?: ComponentConfig["compoundVariants"];
-        }): TwStyledComponent<Config, S, TagMap, Tag>;
+        }): TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
     };
-    withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S, TagMap, Tag>;
+    withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
     /**
      * Declare sub-component names secara eksplisit untuk autocomplete + type safety.
      *
@@ -249,14 +289,14 @@ type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S exten
      * Button.footer // ✅ autocomplete
      * Button.xyz    // ❌ TypeScript error
      */
-    withSub<NewS extends string>(): TwStyledComponent<Config, NewS, TagMap, Tag>;
-} & SubComponentKeys<S, TagMap>;
+    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): TwStyledComponent<C, InferSubFromConfig<C>, InferSubTagsFromConfig<C> extends Record<string, string> ? InferSubTagsFromConfig<C> : Record<string, never>, Tag>;
+    <C extends ComponentConfig>(config: 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>;
 }

package/dist/index.d.ts

@@ -12,9 +12,15 @@ type HtmlTagName = keyof HTMLElementTagNameMap;
 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"]]?: T["variants"][K] extends Record<infer Key, any> ? Key extends "true" | "false" ? boolean : Key extends number ? Key : Key extends `${infer N extends number}` ? N : Key : never;
+/**
+ * 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]?: V[K] extends Record<infer Key, any> ? 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"]>;
 type InferSizeProps<T extends ComponentConfig> = T["sizes"] extends Record<string, string> ? {
     size?: keyof T["sizes"];
 } : Record<never, never>;
@@ -53,7 +59,7 @@ interface SubComponentConfig {
         [key: string]: string;
     }>;
 }
-type SubValue = string | Record<string, string | SubComponentConfig>;
+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.
@@ -139,16 +145,29 @@ interface ComponentConfig {
  * "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"
- * - nested object        → nested keys: { h2: { title: "..." } } → "title"
+ * - 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 : S[K] extends Record<infer N extends string, string> ? N : never;
+    [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).
@@ -182,10 +201,31 @@ type InferSubTagsFromConfig<C extends ComponentConfig> = C extends {
 } ? 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>;
@@ -208,7 +248,7 @@ interface StyledComponentProps {
     children?: React.ReactNode;
 }
 type SubComponentMap = Record<string, unknown>;
-type TwSubComponentAccessor<Tag extends HtmlTagName = "span"> = React.FC<Omit<React.ComponentPropsWithoutRef<Tag>, "ref"> & {
+type TwSubComponentAccessor<Tag extends HtmlTagName = "span", ExtraProps extends Record<string, unknown> = Record<never, never>> = React.FC<Omit<React.ComponentPropsWithoutRef<Tag>, "ref"> & ExtraProps & {
     children?: React.ReactNode;
     className?: string;
 }>;
@@ -220,22 +260,22 @@ type TrimRight<S extends string> = S extends `${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>> = {
-    [K in S]: TwSubComponentAccessor<K extends keyof TagMap ? (TagMap[K] extends HtmlTagName ? TagMap[K] : "span") : "span">;
+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> = {
+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: React.ComponentPropsWithoutRef<Tag> & StyledComponentProps & InferVariantProps<Config> & InferSizeProps<Config> & InferStatesProps<Config>): React.ReactElement | null;
     displayName?: string;
     extend: {
-        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S, TagMap, Tag>;
+        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
         (config: {
             classes?: string;
             variants?: ComponentConfig["variants"];
             defaultVariants?: ComponentConfig["defaultVariants"];
             compoundVariants?: ComponentConfig["compoundVariants"];
-        }): TwStyledComponent<Config, S, TagMap, Tag>;
+        }): TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
     };
-    withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S, TagMap, Tag>;
+    withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
     /**
      * Declare sub-component names secara eksplisit untuk autocomplete + type safety.
      *
@@ -249,14 +289,14 @@ type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S exten
      * Button.footer // ✅ autocomplete
      * Button.xyz    // ❌ TypeScript error
      */
-    withSub<NewS extends string>(): TwStyledComponent<Config, NewS, TagMap, Tag>;
-} & SubComponentKeys<S, TagMap>;
+    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): TwStyledComponent<C, InferSubFromConfig<C>, InferSubTagsFromConfig<C> extends Record<string, string> ? InferSubTagsFromConfig<C> : Record<string, never>, Tag>;
+    <C extends ComponentConfig>(config: 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>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-styled-v4",
-  "version": "5.1.31",
+  "version": "5.1.33",
   "packageManager": "npm@11.11.1",
   "engines": {
     "node": ">=20"