tailwind-styled-v4 5.0.8 → 5.0.9

package/README.md

@@ -142,9 +142,32 @@ function Alert({ type, children }) {
 }
 ```
 
-### 6. Sub-components (Inline)
+### 6. Sub-components
 
-Definisikan sub-components langsung di template literal dengan syntax `[name] { classes }` — **TypeScript otomatis infer nama tanpa perlu `.withSub<>()`**.
+Ada **dua cara** mendefinisikan sub-components:
+
+#### A. Config Object — Direkomendasikan (Autocomplete + Type Safe)
+
+```tsx
+const Card = tw.div({
+  base: "flex flex-col p-4 rounded-xl bg-white shadow",
+  sub: {
+    header: "font-bold text-lg border-b pb-2",
+    body:   "text-gray-600 py-2",
+    footer: "border-t pt-2 text-sm text-gray-400",
+  },
+})
+
+// TypeScript infer keys dari object literal → autocomplete penuh
+<Card>
+  <Card.header>Judul</Card.header>    // ✅ autocomplete
+  <Card.body>Konten</Card.body>       // ✅ autocomplete
+  <Card.footer>Footer</Card.footer>   // ✅ autocomplete
+  <Card.xyz>?</Card.xyz>              // ❌ TypeScript error
+</Card>
+```
+
+#### B. Template Literal Inline — Ringkas (tanpa autocomplete)
 
 ```tsx
 const Card = tw.div`
@@ -154,24 +177,18 @@ const Card = tw.div`
   [footer] { border-t pt-2 text-sm text-gray-400 }
 `
 
-// TypeScript otomatis tahu: Card.header, Card.body, Card.footer
+// Runtime benar, tapi TypeScript tidak bisa infer nama dari multiline template —
+// ini limitasi TypeScript, bukan bug library. Gunakan config object untuk type safety.
 <Card>
   <Card.header>Judul</Card.header>
   <Card.body>Konten</Card.body>
   <Card.footer>Footer</Card.footer>
 </Card>
-
-// Autocomplete ✓ — Card.nonexistent akan error TypeScript
 ```
 
-> **Catatan:** Sub-components **tidak mewarisi** style base `Card`. Mereka adalah komponen terpisah dengan classes dari block `[name] { ... }`. Untuk mewarisi, gunakan `.extend()` (Pattern B di bawah).
+> Sub-components **tidak mewarisi** style base. Untuk mewarisi, pakai `.extend()` (lihat Pattern B di bawah).
 
-**`.withSub<>()`** hanya diperlukan jika nama sub-component tidak muncul di template literal (misalnya di-register secara dinamis):
-
-```tsx
-// Kasus khusus — nama tidak ada di template
-const Modal = tw.div`fixed inset-0`.withSub<"overlay" | "content">()
-```
+> **Sub-component tidak terdefinisi** tidak akan crash — library otomatis fallback ke `<span>` passthrough. Tapi tetap gunakan config object untuk catch typo di TypeScript.
 
 ### 7. State Engine — Zero-JS State Management
 
@@ -248,9 +265,22 @@ const IconButton = Button.extend`p-2 rounded-full`
 
 ### Pattern Sub-components
 
-**Pattern A: Inline `[name] { }` — Direkomendasikan**
+**Pattern A: Config Object — Direkomendasikan (autocomplete + type safe)**
+
+```tsx
+const Card = tw.div({
+  base: "flex flex-col p-4 rounded-xl bg-white shadow",
+  sub: {
+    header: "font-bold text-lg border-b pb-2",
+    body:   "text-gray-600 py-2",
+    footer: "border-t pt-2 text-sm",
+  },
+})
+// TypeScript infer: Card.header, Card.body, Card.footer ✅ autocomplete
+// Card.xyz → TypeScript error ✅
+```
 
-Cocok kalau sub-components punya style sendiri yang *tidak perlu* mewarisi base:
+**Pattern A2: Inline Template `[name] { }` — Ringkas (tanpa autocomplete)**
 
 ```tsx
 const Card = tw.div`
@@ -259,7 +289,7 @@ const Card = tw.div`
   [body]   { text-gray-600 py-2 }
   [footer] { border-t pt-2 text-sm }
 `
-// TypeScript otomatis: Card.header, Card.body, Card.footer ✓
+// Runtime benar — TypeScript tidak bisa infer nama dari multiline template literal
 ```
 
 **Pattern B: `.extend()` — Sub-components Mewarisi Style Base**

package/dist/index.d.mts

@@ -26,7 +26,12 @@ 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>;
 }
+type InferSubFromConfig<C extends ComponentConfig> = C extends {
+    sub: Record<infer K extends string, string>;
+} ? K : never;
 interface ContainerConfig {
     base?: string;
     queries?: Record<string, string>;
@@ -54,14 +59,14 @@ type TwSubComponentAccessor = React.FC<{
     children?: React.ReactNode;
     className?: string;
 }>;
-type TrimLeft<S extends string> = S extends ` ${infer R}` | `
-${infer R}` | `	${infer R}` | `
+type TrimLeft<S extends string> = S extends ` ${infer R}` | `
+${infer R}` | `	${infer R}` | `
 ${infer R}` ? TrimLeft<R> : S;
-type TrimRight<S extends string> = S extends `${infer L} ` | `${infer L}
-` | `${infer L}	` | `${infer L}
+type TrimRight<S extends string> = S extends `${infer L} ` | `${infer L}
+` | `${infer L}	` | `${infer L}
 ` ? TrimRight<L> : S;
 type Trim<S extends string> = TrimLeft<TrimRight<S>>;
-type ExtractSubNames<T extends string> = T extends `${infer _}[${infer Name}]${infer Rest}` ? (Trim<Name> extends string ? Trim<Name> : never) | ExtractSubNames<Rest> : never;
+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;
 } : {
@@ -80,7 +85,20 @@ type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S exten
         }): TwStyledComponent<Config, S>;
     };
     withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S>;
-    withSub<NewS extends string>(): TwStyledComponent<Config, S | NewS>;
+    /**
+     * Declare sub-component names secara eksplisit untuk autocomplete + type safety.
+     *
+     * @example
+     * export const Button = tw.button`
+     *   flex h-12 ...
+     *   icon { flex h-4 }
+     * `.withSub<"icon" | "footer">()
+     *
+     * Button.icon   // ✅ autocomplete
+     * Button.footer // ✅ autocomplete
+     * Button.xyz    // ❌ TypeScript error
+     */
+    withSub<NewS extends string>(): TwStyledComponent<Config, NewS>;
     animate: (opts: AnimateOptions) => Promise<TwStyledComponent<Config, S>>;
 } & SubComponentKeys<S>;
 interface TwSubComponent<P = unknown> {
@@ -88,9 +106,9 @@ interface TwSubComponent<P = unknown> {
     displayName?: string;
 }
 interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig> {
-    <const T extends string>(strings: readonly [T, ...unknown[]], ...exprs: unknown[]): TwStyledComponent<Config, ExtractSubNames<T>>;
+    <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, string>;
+    <C extends ComponentConfig>(config: C): TwStyledComponent<C, InferSubFromConfig<C>>;
 }
 type TwTagFactory = {
     [K in HtmlTagName]: TwTemplateFactory;

package/dist/index.d.ts

@@ -26,7 +26,12 @@ 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>;
 }
+type InferSubFromConfig<C extends ComponentConfig> = C extends {
+    sub: Record<infer K extends string, string>;
+} ? K : never;
 interface ContainerConfig {
     base?: string;
     queries?: Record<string, string>;
@@ -54,14 +59,14 @@ type TwSubComponentAccessor = React.FC<{
     children?: React.ReactNode;
     className?: string;
 }>;
-type TrimLeft<S extends string> = S extends ` ${infer R}` | `
-${infer R}` | `	${infer R}` | `
+type TrimLeft<S extends string> = S extends ` ${infer R}` | `
+${infer R}` | `	${infer R}` | `
 ${infer R}` ? TrimLeft<R> : S;
-type TrimRight<S extends string> = S extends `${infer L} ` | `${infer L}
-` | `${infer L}	` | `${infer L}
+type TrimRight<S extends string> = S extends `${infer L} ` | `${infer L}
+` | `${infer L}	` | `${infer L}
 ` ? TrimRight<L> : S;
 type Trim<S extends string> = TrimLeft<TrimRight<S>>;
-type ExtractSubNames<T extends string> = T extends `${infer _}[${infer Name}]${infer Rest}` ? (Trim<Name> extends string ? Trim<Name> : never) | ExtractSubNames<Rest> : never;
+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;
 } : {
@@ -80,7 +85,20 @@ type TwStyledComponent<Config extends ComponentConfig = ComponentConfig, S exten
         }): TwStyledComponent<Config, S>;
     };
     withVariants: (config: Partial<Config>) => TwStyledComponent<Config, S>;
-    withSub<NewS extends string>(): TwStyledComponent<Config, S | NewS>;
+    /**
+     * Declare sub-component names secara eksplisit untuk autocomplete + type safety.
+     *
+     * @example
+     * export const Button = tw.button`
+     *   flex h-12 ...
+     *   icon { flex h-4 }
+     * `.withSub<"icon" | "footer">()
+     *
+     * Button.icon   // ✅ autocomplete
+     * Button.footer // ✅ autocomplete
+     * Button.xyz    // ❌ TypeScript error
+     */
+    withSub<NewS extends string>(): TwStyledComponent<Config, NewS>;
     animate: (opts: AnimateOptions) => Promise<TwStyledComponent<Config, S>>;
 } & SubComponentKeys<S>;
 interface TwSubComponent<P = unknown> {
@@ -88,9 +106,9 @@ interface TwSubComponent<P = unknown> {
     displayName?: string;
 }
 interface TwTemplateFactory<Config extends ComponentConfig = ComponentConfig> {
-    <const T extends string>(strings: readonly [T, ...unknown[]], ...exprs: unknown[]): TwStyledComponent<Config, ExtractSubNames<T>>;
+    <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, string>;
+    <C extends ComponentConfig>(config: C): TwStyledComponent<C, InferSubFromConfig<C>>;
 }
 type TwTagFactory = {
     [K in HtmlTagName]: TwTemplateFactory;

package/dist/index.js

@@ -341,28 +341,44 @@ function getStateRegistry() {
 
 // packages/domain/core/src/createComponent.ts
 var ALWAYS_BLOCKED = /* @__PURE__ */ new Set(["base", "_ref", "state", "container", "containerName"]);
-function parseSubComponentNames(template) {
-  const matches = [...template.matchAll(/\[(\w+)\]/g)];
-  return [...new Set(matches.map((m) => m[1]))];
+function parseSubComponentBlocks(template) {
+  const map = /* @__PURE__ */ new Map();
+  const re = /(?:\[([a-zA-Z][a-zA-Z0-9_-]*)\]|([a-zA-Z][a-zA-Z0-9_-]*))\s*\{([^}]*)\}/g;
+  let m;
+  while ((m = re.exec(template)) !== null) {
+    const name = m[1] ?? m[2];
+    const classes = m[3].trim().replace(/\s+/g, " ");
+    if (classes) map.set(name, classes);
+  }
+  return map;
 }
 function extractBaseClasses(template) {
-  return template.replace(/\[\w+\]\s*\{[^}]*\}/g, "").replace(/\s+/g, " ").trim();
+  return template.replace(/(?:\[[a-zA-Z][a-zA-Z0-9_-]*\]|[a-zA-Z][a-zA-Z0-9_-]*)\s*\{[^}]*\}/g, "").replace(/\s+/g, " ").trim();
 }
-function createSubComponentAccessor(parentDisplayName, name) {
+function createSubComponentAccessor(parentDisplayName, name, classes) {
   const SubComponent = ({
     children,
     className
-  }) => React3__default.default.createElement(React3__default.default.Fragment, null, children);
+  }) => React3__default.default.createElement(
+    "span",
+    { className: className ? `${classes} ${className}` : classes },
+    children
+  );
   SubComponent.displayName = `${parentDisplayName}[${name}]`;
   return SubComponent;
 }
-function registerSubComponents(component, template) {
-  const names = parseSubComponentNames(template);
+function registerSubComponents(component, template, configSub) {
   const displayName = component.displayName ?? "tw";
   const map = component;
-  for (const name of names) {
+  if (configSub) {
+    for (const [name, classes] of Object.entries(configSub)) {
+      map[name] = createSubComponentAccessor(displayName, name, classes.trim().replace(/\s+/g, " "));
+    }
+  }
+  const blocks = parseSubComponentBlocks(template);
+  for (const [name, classes] of blocks) {
     if (!(name in map)) {
-      map[name] = createSubComponentAccessor(displayName, name);
+      map[name] = createSubComponentAccessor(displayName, name, classes);
     }
   }
 }
@@ -413,13 +429,21 @@ function carryOverSubComponents(target, source) {
 function attachExtend(component, originalTag, base, config) {
   function extendWithClasses(stringsOrConfig) {
     if (Array.isArray(stringsOrConfig) && "raw" in stringsOrConfig) {
-      const extra = stringsOrConfig.raw.join("").trim().replace(/\s+/g, " ");
-      const merged2 = twMerge(extractBaseClasses(base), extra);
+      const rawExtra = stringsOrConfig.raw.join("").trim().replace(/\s+/g, " ");
+      const merged2 = twMerge(extractBaseClasses(base), extractBaseClasses(rawExtra));
       const extended2 = createComponent(
         originalTag,
         typeof config === "string" ? merged2 : { ...config, base: merged2 }
       );
       carryOverSubComponents(extended2, component);
+      const extendSubBlocks = parseSubComponentBlocks(rawExtra);
+      if (extendSubBlocks.size > 0) {
+        const extComp = extended2;
+        const displayName = extended2.displayName ?? "tw";
+        for (const [subName, subClasses] of extendSubBlocks) {
+          extComp[subName] = createSubComponentAccessor(displayName, subName, subClasses);
+        }
+      }
       return extended2;
     }
     const extCfg = stringsOrConfig;
@@ -477,6 +501,7 @@ function createComponent(tag, config) {
   const stateConfig = typeof config === "string" ? void 0 : config.state;
   const containerConfig = typeof config === "string" ? void 0 : config.container;
   const containerName = typeof config === "string" ? void 0 : config.containerName;
+  const configSub = typeof config === "string" ? void 0 : config.sub;
   const stateResult = stateConfig ? processState(typeof tag === "string" ? tag : "component", stateConfig) : null;
   const containerResult = containerConfig ? processContainer(typeof tag === "string" ? tag : "component", containerConfig, containerName) : null;
   const engineClasses = [stateResult?.stateClass, containerResult?.containerClass].filter(Boolean).join(" ");
@@ -495,8 +520,8 @@ function createComponent(tag, config) {
     const component2 = baseComponent2;
     component2.displayName = `tw.${tagLabel}`;
     const result2 = attachExtend(component2, tag, base, config);
-    registerSubComponents(result2, base);
-    return result2;
+    registerSubComponents(result2, base, configSub);
+    return wrapWithSubProxy(result2, tagLabel);
   }
   const baseComponent = React3__default.default.forwardRef((props, ref) => {
     const { className, ...rest } = props;
@@ -512,8 +537,36 @@ function createComponent(tag, config) {
   const component = baseComponent;
   component.displayName = `tw.${tagLabel}`;
   const result = attachExtend(component, tag, base, config);
-  registerSubComponents(result, base);
-  return result;
+  registerSubComponents(result, base, configSub);
+  return wrapWithSubProxy(result, tagLabel);
+}
+var SKIP_PROXY_KEYS = /* @__PURE__ */ new Set([
+  "extend",
+  "withVariants",
+  "animate",
+  "withSub",
+  "displayName",
+  "$$typeof",
+  "render",
+  "prototype",
+  "__esModule",
+  "then"
+]);
+function wrapWithSubProxy(component, tagLabel) {
+  return new Proxy(component, {
+    get(target, prop) {
+      const value = target[prop];
+      if (value !== void 0) return value;
+      if (typeof prop === "symbol") return value;
+      if (SKIP_PROXY_KEYS.has(prop)) return value;
+      const Fallback = ({
+        children,
+        className
+      }) => React3__default.default.createElement("span", { className }, children);
+      Fallback.displayName = `tw.${tagLabel}.${prop}(fallback)`;
+      return Fallback;
+    }
+  });
 }
 var __generatedRegistry = {};
 function lookupGenerated(componentId, props, defaultVariants) {
@@ -1008,7 +1061,7 @@ function createStyledSystem(config) {
     tokens
   });
 }
-var SUB_RE = /\[([a-zA-Z][a-zA-Z0-9_-]*)\]\s*\{([^}]*)\}/g;
+var SUB_RE = /(?:\[([a-zA-Z][a-zA-Z0-9_-]*)\]|([a-zA-Z][a-zA-Z0-9_-]*))\s*\{([^}]*)\}/g;
 var COMMENT_RE = /\/\/[^\n]*/g;
 function parseTemplate(strings, exprs) {
   const raw = strings.raw.reduce((acc, str, i) => {
@@ -1021,8 +1074,8 @@ function parseTemplate(strings, exprs) {
   let match;
   SUB_RE.lastIndex = 0;
   while ((match = SUB_RE.exec(raw)) !== null) {
-    const name = match[1];
-    const inner = match[2].replace(COMMENT_RE, "").split("\n").map((l) => l.trim()).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+    const name = match[1] ?? match[2];
+    const inner = match[3].replace(COMMENT_RE, "").split("\n").map((l) => l.trim()).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
     subs[name] = inner;
     base = base.replace(match[0], "");
   }