tailwind-styled-v4 5.1.19 → 5.1.21

package/dist/index.d.mts

@@ -126,6 +126,42 @@ type InferSubFromConfig<C extends ComponentConfig> = C extends {
 } ? {
     [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;
+/**
+ * HTML tags yang otomatis dikenali sebagai tag dari bare sub-key (tanpa "tag:name" syntax).
+ * HARUS identik dengan SEMANTIC_HTML_TAGS di createComponent.ts (parseSubKey) — kalau
+ * drift, sub-component bisa di-tipe-kan dengan native attributes yang salah (tag yang
+ * benar2 di-render di runtime beda dari yang dipakai untuk inference type-nya).
+ */
+type SemanticSubTag = "article" | "aside" | "details" | "figcaption" | "figure" | "footer" | "header" | "main" | "mark" | "nav" | "section" | "summary" | "time" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "ul" | "ol" | "li" | "dl" | "dt" | "dd" | "table" | "thead" | "tbody" | "tfoot" | "tr" | "th" | "td" | "form" | "fieldset" | "legend" | "label" | "a" | "button" | "img" | "span" | "div" | "blockquote" | "pre" | "code" | "em" | "strong" | "small";
+/**
+ * Resolve tag HTML dari satu sub-key string — mirror logic `parseSubKey()` runtime
+ * di createComponent.ts:
+ * - "a:link"  → tag eksplisit sebelum colon ("a")
+ * - "header"  → bare key, fallback ke key itu sendiri kalau termasuk SemanticSubTag
+ * - "icon"    → bare key, bukan semantic tag → fallback "span" (default runtime)
+ */
+type ResolveSubTag<K extends string> = K extends `${infer Tag}:${string}` ? Tag extends HtmlTagName ? Tag : "span" : K extends SemanticSubTag ? K : "span";
+/** Gabungkan union of object types jadi satu intersection — dipakai untuk merge per-key tag map. */
+type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+/**
+ * Infer mapping { subComponentName: htmlTag } dari config.sub — dipakai supaya setiap
+ * sub-component (Card.icon, Breadcrumb.link, dst) punya native HTML attributes yang
+ * SESUAI tag yang benar2 di-render (href untuk <a>, src untuk <img>, dst), bukan cuma
+ * `{ children?, className? }` generik.
+ *
+ * @example
+ * sub: { "a:link": "...", "span:sep": "..." } → { link: "a"; sep: "span" }
+ * sub: { header: { topBar: "..." } }          → { topBar: "header" }
+ */
+type InferSubTagsFromConfig<C extends ComponentConfig> = C extends {
+    sub: infer S extends Record<string, SubValue>;
+} ? 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";
+    } : never : never;
+}[keyof S]> : Record<string, never>;
 interface ContainerConfig {
     base?: string;
     queries?: Record<string, string>;
@@ -146,10 +182,9 @@ interface StyledComponentProps {
     className?: string;
     as?: HtmlTagName;
     children?: React.ReactNode;
-    [key: string]: unknown;
 }
 type SubComponentMap = Record<string, unknown>;
-type TwSubComponentAccessor = React.FC<{
+type TwSubComponentAccessor<Tag extends HtmlTagName = "span"> = React.FC<Omit<React.ComponentPropsWithoutRef<Tag>, "ref"> & {
     children?: React.ReactNode;
     className?: string;
 }>;
@@ -161,24 +196,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> = string extends S ? {
-    [key: string]: TwSubComponentAccessor;
-} : {
-    [K in S]: TwSubComponentAccessor;
+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 TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S extends string = string> = {
-    (props: StyledComponentProps & InferVariantProps<Config> & InferSizeProps<Config> & InferStatesProps<Config>): React.ReactElement | null;
+type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S extends string = string, TagMap extends Record<string, string> = Record<string, never>, Tag extends HtmlTagName = HtmlTagName> = {
+    (props: React.ComponentPropsWithoutRef<Tag> & StyledComponentProps & InferVariantProps<Config> & InferSizeProps<Config> & InferStatesProps<Config>): React.ReactElement | null;
     displayName?: string;
     extend: {
-        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S>;
+        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S, TagMap, Tag>;
         (config: {
             classes?: string;
             variants?: ComponentConfig["variants"];
             defaultVariants?: ComponentConfig["defaultVariants"];
             compoundVariants?: ComponentConfig["compoundVariants"];
-        }): TwStyledComponent<Config, S>;
+        }): TwStyledComponent<Config, S, TagMap, Tag>;
     };
-    withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S>;
+    withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S, TagMap, Tag>;
     /**
      * Declare sub-component names secara eksplisit untuk autocomplete + type safety.
      *
@@ -192,27 +225,27 @@ type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S exten
      * Button.footer // ✅ autocomplete
      * Button.xyz    // ❌ TypeScript error
      */
-    withSub<NewS extends string>(): TwStyledComponent<Config, NewS>;
-    animate: (opts: AnimateOptions) => Promise<TwStyledComponent<Config, S>>;
-} & SubComponentKeys<S>;
+    withSub<NewS extends string>(): TwStyledComponent<Config, NewS, TagMap, Tag>;
+    animate: (opts: AnimateOptions) => Promise<TwStyledComponent<Config, S, TagMap, Tag>>;
+} & SubComponentKeys<S, TagMap>;
 interface TwSubComponent<P = unknown> {
     (props: P): React.ReactElement | null;
     displayName?: string;
 }
-interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig> {
-    <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, InferSubFromConfig<C>>;
+interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig, Tag extends HtmlTagName = HtmlTagName> {
+    <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>;
+    <C extends ComponentConfig>(config: C): TwStyledComponent<C, InferSubFromConfig<C>, InferSubTagsFromConfig<C> extends Record<string, string> ? InferSubTagsFromConfig<C> : Record<string, never>, Tag>;
 }
 type TwTagFactory = {
-    [K in HtmlTagName]: TwTemplateFactory;
+    [K in HtmlTagName]: TwTemplateFactory<ComponentConfig, K>;
 };
 type TwTagFactoryAny = {
     [key: string]: TwTemplateFactory;
 };
 type TwComponentFactory<T extends React.ElementType = React.ElementType> = (tag: T) => TwTemplateFactory;
 type TwServerObject = TwTagFactory & {
-    [K in HtmlTagName as `${K}`]: TwTemplateFactory;
+    [K in HtmlTagName as `${K}`]: TwTemplateFactory<ComponentConfig, K>;
 };
 type TwObject = TwComponentFactory & TwTagFactory & {
     server: TwServerObject;

package/dist/index.d.ts

@@ -126,6 +126,42 @@ type InferSubFromConfig<C extends ComponentConfig> = C extends {
 } ? {
     [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;
+/**
+ * HTML tags yang otomatis dikenali sebagai tag dari bare sub-key (tanpa "tag:name" syntax).
+ * HARUS identik dengan SEMANTIC_HTML_TAGS di createComponent.ts (parseSubKey) — kalau
+ * drift, sub-component bisa di-tipe-kan dengan native attributes yang salah (tag yang
+ * benar2 di-render di runtime beda dari yang dipakai untuk inference type-nya).
+ */
+type SemanticSubTag = "article" | "aside" | "details" | "figcaption" | "figure" | "footer" | "header" | "main" | "mark" | "nav" | "section" | "summary" | "time" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "ul" | "ol" | "li" | "dl" | "dt" | "dd" | "table" | "thead" | "tbody" | "tfoot" | "tr" | "th" | "td" | "form" | "fieldset" | "legend" | "label" | "a" | "button" | "img" | "span" | "div" | "blockquote" | "pre" | "code" | "em" | "strong" | "small";
+/**
+ * Resolve tag HTML dari satu sub-key string — mirror logic `parseSubKey()` runtime
+ * di createComponent.ts:
+ * - "a:link"  → tag eksplisit sebelum colon ("a")
+ * - "header"  → bare key, fallback ke key itu sendiri kalau termasuk SemanticSubTag
+ * - "icon"    → bare key, bukan semantic tag → fallback "span" (default runtime)
+ */
+type ResolveSubTag<K extends string> = K extends `${infer Tag}:${string}` ? Tag extends HtmlTagName ? Tag : "span" : K extends SemanticSubTag ? K : "span";
+/** Gabungkan union of object types jadi satu intersection — dipakai untuk merge per-key tag map. */
+type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+/**
+ * Infer mapping { subComponentName: htmlTag } dari config.sub — dipakai supaya setiap
+ * sub-component (Card.icon, Breadcrumb.link, dst) punya native HTML attributes yang
+ * SESUAI tag yang benar2 di-render (href untuk <a>, src untuk <img>, dst), bukan cuma
+ * `{ children?, className? }` generik.
+ *
+ * @example
+ * sub: { "a:link": "...", "span:sep": "..." } → { link: "a"; sep: "span" }
+ * sub: { header: { topBar: "..." } }          → { topBar: "header" }
+ */
+type InferSubTagsFromConfig<C extends ComponentConfig> = C extends {
+    sub: infer S extends Record<string, SubValue>;
+} ? 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";
+    } : never : never;
+}[keyof S]> : Record<string, never>;
 interface ContainerConfig {
     base?: string;
     queries?: Record<string, string>;
@@ -146,10 +182,9 @@ interface StyledComponentProps {
     className?: string;
     as?: HtmlTagName;
     children?: React.ReactNode;
-    [key: string]: unknown;
 }
 type SubComponentMap = Record<string, unknown>;
-type TwSubComponentAccessor = React.FC<{
+type TwSubComponentAccessor<Tag extends HtmlTagName = "span"> = React.FC<Omit<React.ComponentPropsWithoutRef<Tag>, "ref"> & {
     children?: React.ReactNode;
     className?: string;
 }>;
@@ -161,24 +196,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> = string extends S ? {
-    [key: string]: TwSubComponentAccessor;
-} : {
-    [K in S]: TwSubComponentAccessor;
+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 TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S extends string = string> = {
-    (props: StyledComponentProps & InferVariantProps<Config> & InferSizeProps<Config> & InferStatesProps<Config>): React.ReactElement | null;
+type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S extends string = string, TagMap extends Record<string, string> = Record<string, never>, Tag extends HtmlTagName = HtmlTagName> = {
+    (props: React.ComponentPropsWithoutRef<Tag> & StyledComponentProps & InferVariantProps<Config> & InferSizeProps<Config> & InferStatesProps<Config>): React.ReactElement | null;
     displayName?: string;
     extend: {
-        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S>;
+        (strings: TemplateStringsArray, ...exprs: unknown[]): TwStyledComponent<Config, S, TagMap, Tag>;
         (config: {
             classes?: string;
             variants?: ComponentConfig["variants"];
             defaultVariants?: ComponentConfig["defaultVariants"];
             compoundVariants?: ComponentConfig["compoundVariants"];
-        }): TwStyledComponent<Config, S>;
+        }): TwStyledComponent<Config, S, TagMap, Tag>;
     };
-    withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S>;
+    withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S, TagMap, Tag>;
     /**
      * Declare sub-component names secara eksplisit untuk autocomplete + type safety.
      *
@@ -192,27 +225,27 @@ type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S exten
      * Button.footer // ✅ autocomplete
      * Button.xyz    // ❌ TypeScript error
      */
-    withSub<NewS extends string>(): TwStyledComponent<Config, NewS>;
-    animate: (opts: AnimateOptions) => Promise<TwStyledComponent<Config, S>>;
-} & SubComponentKeys<S>;
+    withSub<NewS extends string>(): TwStyledComponent<Config, NewS, TagMap, Tag>;
+    animate: (opts: AnimateOptions) => Promise<TwStyledComponent<Config, S, TagMap, Tag>>;
+} & SubComponentKeys<S, TagMap>;
 interface TwSubComponent<P = unknown> {
     (props: P): React.ReactElement | null;
     displayName?: string;
 }
-interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig> {
-    <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, InferSubFromConfig<C>>;
+interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig, Tag extends HtmlTagName = HtmlTagName> {
+    <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>;
+    <C extends ComponentConfig>(config: C): TwStyledComponent<C, InferSubFromConfig<C>, InferSubTagsFromConfig<C> extends Record<string, string> ? InferSubTagsFromConfig<C> : Record<string, never>, Tag>;
 }
 type TwTagFactory = {
-    [K in HtmlTagName]: TwTemplateFactory;
+    [K in HtmlTagName]: TwTemplateFactory<ComponentConfig, K>;
 };
 type TwTagFactoryAny = {
     [key: string]: TwTemplateFactory;
 };
 type TwComponentFactory<T extends React.ElementType = React.ElementType> = (tag: T) => TwTemplateFactory;
 type TwServerObject = TwTagFactory & {
-    [K in HtmlTagName as `${K}`]: TwTemplateFactory;
+    [K in HtmlTagName as `${K}`]: TwTemplateFactory<ComponentConfig, K>;
 };
 type TwObject = TwComponentFactory & TwTagFactory & {
     server: TwServerObject;

package/dist/index.js

@@ -741,16 +741,19 @@ function parseSubKey(key) {
 function createSubComponentAccessor(parentDisplayName, name, classes, tag = "span", asChild = false) {
   const SubComponent = ({
     children,
-    className
+    className,
+    ...rest
+    // tangkap semua native HTML props (href, onClick, src, alt, dll)
   }) => {
     const mergedClass = className ? `${classes} ${className}` : classes;
     if (asChild && import_react.default.isValidElement(children)) {
       const child = import_react.default.Children.only(children);
       return import_react.default.cloneElement(child, {
+        ...rest,
         className: child.props.className ? `${mergedClass} ${child.props.className}` : mergedClass
       });
     }
-    return import_react.default.createElement(tag, { className: mergedClass }, children);
+    return import_react.default.createElement(tag, { ...rest, className: mergedClass }, children);
   };
   SubComponent.displayName = `${parentDisplayName}[${name}]`;
   return SubComponent;
@@ -1026,8 +1029,9 @@ function wrapWithSubProxy(component, tagLabel) {
       if (SKIP_PROXY_KEYS.has(prop)) return value;
       const Fallback = ({
         children,
-        className
-      }) => import_react.default.createElement("span", { className }, children);
+        className,
+        ...rest
+      }) => import_react.default.createElement("span", { ...rest, className }, children);
       Fallback.displayName = `tw.${tagLabel}.${prop}(fallback)`;
       return Fallback;
     }