tailwind-styled-v4 5.0.8 → 5.0.9

package/dist/index.mjs

@@ -335,28 +335,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.createElement(React3.Fragment, null, children);
+  }) => React3.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);
     }
   }
 }
@@ -407,13 +423,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;
@@ -471,6 +495,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(" ");
@@ -489,8 +514,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.forwardRef((props, ref) => {
     const { className, ...rest } = props;
@@ -506,8 +531,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.createElement("span", { className }, children);
+      Fallback.displayName = `tw.${tagLabel}.${prop}(fallback)`;
+      return Fallback;
+    }
+  });
 }
 var __generatedRegistry = {};
 function lookupGenerated(componentId, props, defaultVariants) {
@@ -1002,7 +1055,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) => {
@@ -1015,8 +1068,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], "");
   }