tailwind-styled-v4 5.1.32 → 5.1.34

package/dist/index.d.mts

@@ -12,9 +12,25 @@ 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 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>;
@@ -27,7 +43,7 @@ type InferSizeProps<T extends ComponentConfig> = T["sizes"] extends Record<strin
  * // → { loading?: boolean, fullWidth?: boolean }
  */
 type InferStatesProps<T extends ComponentConfig> = {
-    [K in keyof T["states"]]?: boolean;
+    [K in keyof T["states"] as string extends K ? never : number extends K ? never : K]?: boolean;
 };
 /**
  * Sub-component config bisa berupa:
@@ -52,22 +68,8 @@ interface SubComponentConfig {
         class: string;
         [key: string]: string;
     }>;
-    /**
-     * Override HTML tag untuk direct sub-component (bare key + base/variants).
-     * Default: "div" kalau tidak diset (backward-compatible).
-     * @example canvas: { tag: "section", base: "...", variants: {...} }
-     */
-    tag?: HtmlTagName;
 }
 type SubValue = string | SubComponentConfig | Record<string, string | SubComponentConfig>;
-/**
- * Mirror dari disambiguation logic runtime di createComponent.ts (registerSubComponents):
- *   `"base" in value || "variants" in value`
- * Kalau bare-key punya property "base"/"variants" langsung, value itu adalah
- * SubComponentConfig untuk key itu sendiri — bukan map { namaSubkomponen: classes }.
- * Contoh: `canvas: { base: "...", variants: {...} }` → key "canvas" ITU sendiri nama sub-component.
- */
-type IsDirectSubConfig<T> = T extends object ? ("base" extends keyof T ? true : "variants" extends keyof T ? true : false) : false;
 /**
  * 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.
@@ -153,16 +155,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 : IsDirectSubConfig<S[K]> extends true ? K : S[K] extends Record<infer N extends string, string | SubComponentConfig> ? 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).
@@ -197,15 +212,30 @@ type InferSubTagsFromConfig<C extends ComponentConfig> = C extends {
     [K in keyof S]: K extends string ? S[K] extends string ? {
         [N in ExtractSubName<K>]: ResolveSubTag<K>;
     } : IsDirectSubConfig<S[K]> extends true ? {
-        [N in K]: S[K] extends {
-            tag: infer T extends HtmlTagName;
-        } ? T : "div";
-    } : S[K] extends Record<string, string | SubComponentConfig> ? {
-        [N in keyof S[K]]: S[K][N] extends {
-            tag: infer T extends HtmlTagName;
-        } ? T : K extends HtmlTagName ? K : "span";
+        [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>;
@@ -217,7 +247,7 @@ interface StateConfig {
     defaultStates?: Record<string, boolean>;
 }
 type CvFn<C extends ComponentConfig> = (props?: {
-    [K in keyof C["variants"]]?: keyof C["variants"][K];
+    [K in keyof C["variants"] as string extends K ? never : number extends K ? never : K]?: keyof C["variants"][K];
 } & {
     class?: string;
     className?: string;
@@ -228,7 +258,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;
 }>;
@@ -240,22 +270,28 @@ 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>;
-        (config: {
+        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
+        <EC extends {
             classes?: string;
             variants?: ComponentConfig["variants"];
             defaultVariants?: ComponentConfig["defaultVariants"];
             compoundVariants?: ComponentConfig["compoundVariants"];
-        }): TwStyledComponent<Config, S, TagMap, Tag>;
+        }>(config: EC & {
+            defaultVariants?: InferDefaultVariantsType<{
+                variants: EC["variants"];
+            }>;
+        }): TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
     };
-    withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S, TagMap, Tag>;
+    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.
      *
@@ -269,14 +305,16 @@ 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 & {
+        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>;
 }

package/dist/index.d.ts

@@ -12,9 +12,25 @@ 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 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>;
@@ -27,7 +43,7 @@ type InferSizeProps<T extends ComponentConfig> = T["sizes"] extends Record<strin
  * // → { loading?: boolean, fullWidth?: boolean }
  */
 type InferStatesProps<T extends ComponentConfig> = {
-    [K in keyof T["states"]]?: boolean;
+    [K in keyof T["states"] as string extends K ? never : number extends K ? never : K]?: boolean;
 };
 /**
  * Sub-component config bisa berupa:
@@ -52,22 +68,8 @@ interface SubComponentConfig {
         class: string;
         [key: string]: string;
     }>;
-    /**
-     * Override HTML tag untuk direct sub-component (bare key + base/variants).
-     * Default: "div" kalau tidak diset (backward-compatible).
-     * @example canvas: { tag: "section", base: "...", variants: {...} }
-     */
-    tag?: HtmlTagName;
 }
 type SubValue = string | SubComponentConfig | Record<string, string | SubComponentConfig>;
-/**
- * Mirror dari disambiguation logic runtime di createComponent.ts (registerSubComponents):
- *   `"base" in value || "variants" in value`
- * Kalau bare-key punya property "base"/"variants" langsung, value itu adalah
- * SubComponentConfig untuk key itu sendiri — bukan map { namaSubkomponen: classes }.
- * Contoh: `canvas: { base: "...", variants: {...} }` → key "canvas" ITU sendiri nama sub-component.
- */
-type IsDirectSubConfig<T> = T extends object ? ("base" extends keyof T ? true : "variants" extends keyof T ? true : false) : false;
 /**
  * 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.
@@ -153,16 +155,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 : IsDirectSubConfig<S[K]> extends true ? K : S[K] extends Record<infer N extends string, string | SubComponentConfig> ? 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).
@@ -197,15 +212,30 @@ type InferSubTagsFromConfig<C extends ComponentConfig> = C extends {
     [K in keyof S]: K extends string ? S[K] extends string ? {
         [N in ExtractSubName<K>]: ResolveSubTag<K>;
     } : IsDirectSubConfig<S[K]> extends true ? {
-        [N in K]: S[K] extends {
-            tag: infer T extends HtmlTagName;
-        } ? T : "div";
-    } : S[K] extends Record<string, string | SubComponentConfig> ? {
-        [N in keyof S[K]]: S[K][N] extends {
-            tag: infer T extends HtmlTagName;
-        } ? T : K extends HtmlTagName ? K : "span";
+        [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>;
@@ -217,7 +247,7 @@ interface StateConfig {
     defaultStates?: Record<string, boolean>;
 }
 type CvFn<C extends ComponentConfig> = (props?: {
-    [K in keyof C["variants"]]?: keyof C["variants"][K];
+    [K in keyof C["variants"] as string extends K ? never : number extends K ? never : K]?: keyof C["variants"][K];
 } & {
     class?: string;
     className?: string;
@@ -228,7 +258,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;
 }>;
@@ -240,22 +270,28 @@ 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>;
-        (config: {
+        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
+        <EC extends {
             classes?: string;
             variants?: ComponentConfig["variants"];
             defaultVariants?: ComponentConfig["defaultVariants"];
             compoundVariants?: ComponentConfig["compoundVariants"];
-        }): TwStyledComponent<Config, S, TagMap, Tag>;
+        }>(config: EC & {
+            defaultVariants?: InferDefaultVariantsType<{
+                variants: EC["variants"];
+            }>;
+        }): TwStyledComponent<Config, S, TagMap, Tag, SubVariantsMap>;
     };
-    withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S, TagMap, Tag>;
+    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.
      *
@@ -269,14 +305,16 @@ 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 & {
+        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>;
 }

package/dist/index.js

@@ -913,8 +913,7 @@ function registerSubComponents(component, template, configSub) {
           tag
         );
       } else if ("base" in value || "variants" in value) {
-        const explicitTag = value.tag ?? "div";
-        map[key] = createComponent(explicitTag, value);
+        map[key] = createComponent("div", value);
       } else {
         const tag = key;
         for (const [componentName, classesOrConfig] of Object.entries(value)) {
@@ -926,8 +925,7 @@ function registerSubComponents(component, template, configSub) {
               tag
             );
           } else {
-            const nestedTag = classesOrConfig.tag ?? tag;
-            map[componentName] = createComponent(nestedTag, classesOrConfig);
+            map[componentName] = createComponent(tag, classesOrConfig);
           }
         }
       }
@@ -1048,7 +1046,7 @@ function attachExtend(component, originalTag, base, config) {
     return extended;
   }
   component.extend = extendWithClasses;
-  component.withVariants = (newConfig) => {
+  component.withVariants = ((newConfig) => {
     const existing = typeof config === "object" ? config : {};
     return createComponent(originalTag, {
       ...existing,
@@ -1063,7 +1061,7 @@ function attachExtend(component, originalTag, base, config) {
         ...newConfig.defaultVariants ?? {}
       }
     });
-  };
+  });
   component.withSub = (() => component);
   return component;
 }