tailwind-styled-v4 5.1.31 → 5.1.32

package/dist/index.d.mts

@@ -52,8 +52,22 @@ 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 | Record<string, string | SubComponentConfig>;
+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.
@@ -148,7 +162,7 @@ type ExtractSubName<K extends string> = K extends `${string}:${infer Name}` ? Na
 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 : S[K] extends Record<infer N extends string, string | SubComponentConfig> ? N : never;
 }[keyof S] : never;
 /**
  * HTML tags yang otomatis dikenali sebagai tag dari bare sub-key (tanpa "tag:name" syntax).
@@ -182,8 +196,14 @@ 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>;
-    } : S[K] extends Record<string, string> ? {
-        [N in keyof S[K]]: K extends HtmlTagName ? K : "span";
+    } : 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";
     } : never : never;
 }[keyof S]> : Record<string, never>;
 interface ContainerConfig {

package/dist/index.d.ts

@@ -52,8 +52,22 @@ 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 | Record<string, string | SubComponentConfig>;
+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.
@@ -148,7 +162,7 @@ type ExtractSubName<K extends string> = K extends `${string}:${infer Name}` ? Na
 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 : S[K] extends Record<infer N extends string, string | SubComponentConfig> ? N : never;
 }[keyof S] : never;
 /**
  * HTML tags yang otomatis dikenali sebagai tag dari bare sub-key (tanpa "tag:name" syntax).
@@ -182,8 +196,14 @@ 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>;
-    } : S[K] extends Record<string, string> ? {
-        [N in keyof S[K]]: K extends HtmlTagName ? K : "span";
+    } : 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";
     } : never : never;
 }[keyof S]> : Record<string, never>;
 interface ContainerConfig {

package/dist/index.js

@@ -913,7 +913,8 @@ function registerSubComponents(component, template, configSub) {
           tag
         );
       } else if ("base" in value || "variants" in value) {
-        map[key] = createComponent("div", value);
+        const explicitTag = value.tag ?? "div";
+        map[key] = createComponent(explicitTag, value);
       } else {
         const tag = key;
         for (const [componentName, classesOrConfig] of Object.entries(value)) {
@@ -925,7 +926,8 @@ function registerSubComponents(component, template, configSub) {
               tag
             );
           } else {
-            map[componentName] = createComponent(tag, classesOrConfig);
+            const nestedTag = classesOrConfig.tag ?? tag;
+            map[componentName] = createComponent(nestedTag, classesOrConfig);
           }
         }
       }