tailwind-styled-v4 5.0.11 → 5.0.12

package/dist/index.browser.mjs

@@ -29,94 +29,20 @@ function hashContainer(tag, container, name) {
   const sortedKey = tag + (name ?? "") + JSON.stringify(Object.entries(container).sort());
   const cached = _hashContainerCache.get(sortedKey);
   if (cached) return cached;
-  let id;
-  try {
-    const native = getNativeBinding();
-    if (native?.hashContent) ; else {
-      throw new Error("no hashContent");
-    }
-  } catch {
-    const hash = sortedKey.split("").reduce((h, char) => (h << 5) + h ^ char.charCodeAt(0), 5381);
-    id = `tw-cq-${Math.abs(hash).toString(36).slice(0, 6)}`;
+  {
+    throw new Error("FATAL: Native binding 'hashContent' is required but not available.");
   }
-  _hashContainerCache.set(sortedKey, id);
-  return id;
-}
-var LAYOUT_MAP = {
-  "flex-col": "flex-direction:column",
-  "flex-row": "flex-direction:row",
-  "flex-wrap": "flex-wrap:wrap",
-  "flex-nowrap": "flex-wrap:nowrap",
-  "flex-1": "flex:1 1 0%",
-  hidden: "display:none",
-  block: "display:block",
-  flex: "display:flex",
-  grid: "display:grid",
-  "grid-cols-1": "grid-template-columns:repeat(1,minmax(0,1fr))",
-  "grid-cols-2": "grid-template-columns:repeat(2,minmax(0,1fr))",
-  "grid-cols-3": "grid-template-columns:repeat(3,minmax(0,1fr))",
-  "grid-cols-4": "grid-template-columns:repeat(4,minmax(0,1fr))",
-  "grid-cols-6": "grid-template-columns:repeat(6,minmax(0,1fr))",
-  "grid-cols-12": "grid-template-columns:repeat(12,minmax(0,1fr))",
-  "text-sm": "font-size:0.875rem;line-height:1.25rem",
-  "text-base": "font-size:1rem;line-height:1.5rem",
-  "text-lg": "font-size:1.125rem;line-height:1.75rem",
-  "text-xl": "font-size:1.25rem;line-height:1.75rem",
-  "text-2xl": "font-size:1.5rem;line-height:2rem",
-  "text-xs": "font-size:0.75rem;line-height:1rem",
-  "p-2": "padding:0.5rem",
-  "p-4": "padding:1rem",
-  "p-6": "padding:1.5rem",
-  "p-8": "padding:2rem",
-  "px-2": "padding-left:0.5rem;padding-right:0.5rem",
-  "px-4": "padding-left:1rem;padding-right:1rem",
-  "px-6": "padding-left:1.5rem;padding-right:1.5rem",
-  "py-2": "padding-top:0.5rem;padding-bottom:0.5rem",
-  "py-4": "padding-top:1rem;padding-bottom:1rem",
-  "gap-2": "gap:0.5rem",
-  "gap-4": "gap:1rem",
-  "gap-6": "gap:1.5rem",
-  "gap-8": "gap:2rem",
-  "w-full": "width:100%",
-  "w-1/2": "width:50%",
-  "w-1/3": "width:33.333333%",
-  "w-2/3": "width:66.666667%",
-  "max-w-sm": "max-width:24rem",
-  "max-w-md": "max-width:28rem",
-  "max-w-lg": "max-width:32rem",
-  "max-w-xl": "max-width:36rem",
-  "items-center": "align-items:center",
-  "items-start": "align-items:flex-start",
-  "items-end": "align-items:flex-end",
-  "justify-center": "justify-content:center",
-  "justify-between": "justify-content:space-between",
-  "justify-start": "justify-content:flex-start",
-  "justify-end": "justify-content:flex-end"
-};
+}
 function layoutClassesToCss(classes) {
-  try {
-    const native = getNativeBinding();
-    if (native?.layoutClassesToCss) ;
-  } catch {
-  }
-  const decls = [];
-  for (const cls of classes.trim().split(/\s+/)) {
-    if (LAYOUT_MAP[cls]) decls.push(LAYOUT_MAP[cls]);
-    else if (cls.startsWith("w-[")) {
-      const val = cls.match(/\[(.+)\]/)?.[1];
-      if (val) decls.push(`width:${val}`);
-    } else if (cls.startsWith("max-w-[")) {
-      const val = cls.match(/\[(.+)\]/)?.[1];
-      if (val) decls.push(`max-width:${val}`);
-    }
+  {
+    throw new Error("FATAL: Native binding 'layoutClassesToCss' is required but not available.");
   }
-  return decls.join(";");
 }
 function buildContainerRules(id, container, containerName) {
   const rules = Object.entries(container).map(([key, value]) => {
     const minWidth = typeof value === "string" ? CONTAINER_BREAKPOINTS[key] ?? key : value.minWidth ?? CONTAINER_BREAKPOINTS[key] ?? key;
-    const classes = typeof value === "string" ? value : value.classes;
-    const css = layoutClassesToCss(classes);
+    typeof value === "string" ? value : value.classes;
+    const css = layoutClassesToCss();
     if (!css) return null;
     const query = containerName ? `@container ${containerName} (min-width: ${minWidth})` : `@container (min-width: ${minWidth})`;
     return `${query}{.${id}{${css}}}`;
@@ -129,10 +55,29 @@ try {
   if (typeof mod?.batchedInject === "function") _cqBatchedInjectFn = mod.batchedInject;
 } catch {
 }
+var _cqStaticDetected = /* @__PURE__ */ new Set();
 function injectContainerStyles(id, container, containerName) {
   if (typeof document === "undefined") return;
   const styleId = `tw-cq-${id}`;
   if (document.getElementById(styleId)) return;
+  if (_cqStaticDetected.has(id)) return;
+  if (typeof document.styleSheets !== "undefined") {
+    const selectorTarget = `.${id}`;
+    for (let i = 0; i < document.styleSheets.length; i++) {
+      try {
+        const rules = document.styleSheets[i].cssRules;
+        for (let j = 0; j < rules.length; j++) {
+          const rule = rules[j];
+          if (rule.cssText.includes(selectorTarget)) {
+            _cqStaticDetected.add(id);
+            return;
+          }
+        }
+      } catch {
+        continue;
+      }
+    }
+  }
   const css = buildContainerRules(id, container, containerName);
   if (!css) return;
   if (_cqBatchedInjectFn) {
@@ -165,39 +110,27 @@ function processContainer(tag, container, containerName) {
   return { containerClass: id, hasContainer: true };
 }
 function generateContainerCss(tag, container, containerName) {
-  const id = hashContainer(tag, container, containerName);
-  try {
-    const native = getNativeBinding();
-    if (native?.buildContainerRules) ;
-  } catch {
+  hashContainer(tag, container, containerName);
+  {
+    throw new Error("FATAL: Native binding 'buildContainerRules' is required but not available.");
   }
-  return buildContainerRules(id, container, containerName);
 }
 function getContainerRegistry() {
   return containerRegistry;
 }
 
 // packages/domain/core/src/merge.ts
-function normalizeClassInput(classLists) {
-  const result = [];
-  for (let i = 0; i < classLists.length; i++) {
-    const v = classLists[i];
-    if (!v) continue;
-    const s = String(v).trim();
-    if (s.length > 0) result.push(s);
-  }
-  return result;
-}
 function createTwMerge(_options = {}) {
   return function twMerge2(...classLists) {
-    const clean = normalizeClassInput(classLists);
-    if (clean.length === 0) return "";
-    try {
-      const native = getNativeBinding();
-      if (native?.twMergeMany) ;
-    } catch {
+    const inputs = [];
+    for (let i = 0; i < classLists.length; i++) {
+      const v = classLists[i];
+      if (v) inputs.push(String(v));
+    }
+    if (inputs.length === 0) return "";
+    {
+      throw new Error("Native binding 'twMergeRaw' is required but not available.");
     }
-    return clean.join(" ");
   };
 }
 var twMerge = createTwMerge();
@@ -220,18 +153,9 @@ function hashState(tag, state) {
   const sortedKey = tag + JSON.stringify(Object.entries(state).sort());
   const cached = _hashStateCache.get(sortedKey);
   if (cached) return cached;
-  let id;
-  try {
-    const native = getNativeBinding();
-    if (native?.hashContent) ; else {
-      throw new Error("no hashContent");
-    }
-  } catch {
-    const hash = sortedKey.split("").reduce((h, char) => (h << 5) + h ^ char.charCodeAt(0), 5381);
-    id = `tw-s-${Math.abs(hash).toString(36).slice(0, 6)}`;
+  {
+    throw new Error("FATAL: Native binding 'hashContent' is required but not available.");
   }
-  _hashStateCache.set(sortedKey, id);
-  return id;
 }
 var _twClassesToCssCache = /* @__PURE__ */ new Map();
 function twClassesToCss(classes) {
@@ -241,6 +165,7 @@ function twClassesToCss(classes) {
     throw new Error("FATAL: Native binding 'twClassesToCss' is required but not available.");
   }
 }
+var _staticCssDetected = /* @__PURE__ */ new Set();
 var _batchedInjectFn = null;
 try {
   const mod = __require("@tailwind-styled/runtime-css/batched");
@@ -251,6 +176,25 @@ function injectStateStyles(id, state) {
   if (typeof document === "undefined") return;
   const styleId = `tw-state-${id}`;
   if (document.getElementById(styleId)) return;
+  if (_staticCssDetected.has(id)) return;
+  if (typeof document.styleSheets !== "undefined") {
+    const selectorPrefix = `.${id}[data-`;
+    for (let i = 0; i < document.styleSheets.length; i++) {
+      try {
+        const sheet = document.styleSheets[i];
+        const rules2 = sheet.cssRules;
+        for (let j = 0; j < rules2.length; j++) {
+          const rule = rules2[j];
+          if (rule instanceof CSSStyleRule && rule.selectorText.startsWith(selectorPrefix)) {
+            _staticCssDetected.add(id);
+            return;
+          }
+        }
+      } catch {
+        continue;
+      }
+    }
+  }
   const rules = Object.entries(state).map(([stateName, classes]) => {
     const css = twClassesToCss(classes);
     return css ? `.${id}[data-${stateName}="true"]{${css}}` : null;
@@ -266,8 +210,8 @@ function injectStateStyles(id, state) {
   style.textContent = rules.join("\n");
   document.head.appendChild(style);
 }
-function processState(tag, state) {
-  const id = hashState(tag, state);
+function processState(tag, state, precomputedHash) {
+  const id = precomputedHash ? `tw-s-${precomputedHash}` : hashState(tag, state);
   const stateNames = Object.keys(state);
   if (!stateRegistry.has(id)) {
     stateRegistry.set(id, {
@@ -307,19 +251,7 @@ function _getParsedTemplate(template) {
     if (native?.parseSubcomponentBlocksNapi) ;
   } catch {
   }
-  const subMap = /* @__PURE__ */ new Map();
-  const regex = /((?:\[[a-zA-Z][a-zA-Z0-9_-]*\]|[a-zA-Z][a-zA-Z0-9_-]*))\s*\{([^}]*)\}/g;
-  let match;
-  while ((match = regex.exec(template)) !== null) {
-    const rawName = match[1];
-    const name = rawName.startsWith("[") ? rawName.slice(1, -1) : rawName;
-    const classes = match[2].trim().replace(/\s+/g, " ");
-    if (classes) subMap.set(name, classes);
-  }
-  const baseClasses = template.replace(/(?:\[[a-zA-Z][a-zA-Z0-9_-]*\]|[a-zA-Z][a-zA-Z0-9_-]*)\s*\{[^}]*\}/g, "").replace(/\s+/g, " ").trim();
-  result = { baseClasses, subMap };
-  _templateParseCache.set(template, result);
-  return result;
+  throw new Error("FATAL: Native binding 'parseSubcomponentBlocksNapi' is required but not available.");
 }
 function parseSubComponentBlocks(template) {
   return _getParsedTemplate(template).subMap;
@@ -465,17 +397,7 @@ function resolveVariants(variants, props, defaults) {
     if (binding?.resolveSimpleVariants) ;
   } catch {
   }
-  const resolved = { ...defaults, ...cleanProps };
-  const classes = [];
-  const sortedVariantEntries = Object.entries(variants).sort(([a], [b]) => a.localeCompare(b));
-  for (const [variantKey, variantMap] of sortedVariantEntries) {
-    const selected = resolved[variantKey];
-    if (selected !== void 0 && variantMap[selected] !== void 0) {
-      const normalized = variantMap[selected].trim().replace(/\s+/g, " ");
-      classes.push(normalized);
-    }
-  }
-  return classes.filter(Boolean).join(" ");
+  throw new Error("FATAL: Native binding 'resolveSimpleVariants' is required but not available.");
 }
 function resolveStates(statesConfig, stateKeys, statesLookup, props) {
   if (statesLookup && stateKeys.length > 0) {
@@ -602,7 +524,13 @@ function createComponent(tag, config) {
       }
     }
   }
-  const stateResult = stateConfig ? processState(typeof tag === "string" ? tag : "component", stateConfig) : null;
+  const stateResult = stateConfig ? processState(
+    typeof tag === "string" ? tag : "component",
+    stateConfig,
+    // Pakai pre-computed hash dari turbopackLoader (Rust inject_state_hash)
+    // kalau tersedia — skip runtime hashState() computation sepenuhnya
+    config.__hash
+  ) : null;
   const containerResult = containerConfig ? processContainer(typeof tag === "string" ? tag : "component", containerConfig, containerName) : null;
   const engineClasses = [stateResult?.stateClass, containerResult?.containerClass].filter(Boolean).join(" ");
   const filterProps = makeFilterProps(new Set(Object.keys(variants)), new Set(stateKeys));
@@ -688,59 +616,74 @@ function lookupGenerated(componentId, props, defaultVariants, variantKeys) {
     sortedKeys = [...keysToUse].sort();
     _sortedVariantKeysCache.set(componentId, sortedKeys);
   }
-  let key = "";
-  for (let i = 0; i < sortedKeys.length; i++) {
-    if (i > 0) key += "|";
-    key += sortedKeys[i] + ":" + String(merged[sortedKeys[i]]);
-  }
-  return table[key];
-}
-var _configJsonCache = /* @__PURE__ */ new WeakMap();
-function _getConfigJson(config) {
-  let json = _configJsonCache.get(config);
-  if (!json) {
-    json = JSON.stringify(config);
-    _configJsonCache.set(config, json);
+  {
+    throw new Error("FATAL: Native binding 'buildVariantLookupKey' is required but not available.");
   }
-  return json;
 }
 function resolveVariantsNative(config, props) {
-  const { base = "", variants = {}, compoundVariants = [], defaultVariants = {} } = config;
-  const variantKeys = Object.keys(variants);
+  const { variants = {}, defaultVariants = {} } = config;
   try {
     const binding = getNativeBinding();
-    if (binding?.resolveVariants) ;
-    if (binding?.resolveSimpleVariants) ;
-  } catch {
-  }
-  const resolved = {};
-  for (const k of variantKeys) {
-    const dv = defaultVariants[k];
-    if (dv !== void 0) resolved[k] = dv;
-  }
-  for (const k of variantKeys) {
-    const v = props[k];
-    if (v !== void 0 && v !== null) resolved[k] = String(v);
-  }
-  const classes = [];
-  if (base) classes.push(base);
-  for (const k of variantKeys) {
-    const variantMap = variants[k];
-    const selected = resolved[k];
-    if (selected !== void 0 && variantMap?.[selected] !== void 0) {
-      classes.push(variantMap[selected]);
+    if (!binding?.resolveVariants) {
+      throw new Error("resolveVariants not available");
     }
-  }
-  const resolvedFull = { ...defaultVariants, ...props };
-  for (const compound of compoundVariants) {
-    const { class: compoundClass, className: compoundClassName, ...conditions } = compound;
-    const matches = Object.entries(conditions).every(([key, val]) => resolvedFull[key] === val);
-    if (matches) {
-      if (compoundClass) classes.push(String(compoundClass));
-      if (compoundClassName) classes.push(String(compoundClassName));
+    const variantKeys = Object.keys(variants);
+    const configJson = (() => {
+      const cfgObj = config;
+      const cfgStr = JSON.stringify(cfgObj);
+      const parsed = JSON.parse(cfgStr);
+      if ("defaultVariants" in parsed && !("default_variants" in parsed)) {
+        parsed.default_variants = parsed.defaultVariants;
+        delete parsed.defaultVariants;
+      }
+      if ("compoundVariants" in parsed && !("compound_variants" in parsed)) {
+        parsed.compound_variants = parsed.compoundVariants;
+        delete parsed.compoundVariants;
+      }
+      if (!("variants" in parsed) || parsed.variants == null) {
+        parsed.variants = {};
+      }
+      return JSON.stringify(parsed);
+    })();
+    const cleanProps = {};
+    for (const k of variantKeys) {
+      const dv = defaultVariants[k];
+      if (dv !== void 0 && dv !== null) cleanProps[k] = String(dv);
     }
+    for (const k of variantKeys) {
+      const v = props[k];
+      if (v !== void 0 && v !== null) cleanProps[k] = String(v);
+    }
+    const propsJson = JSON.stringify(cleanProps);
+    const result = binding.resolveVariants(configJson, propsJson);
+    return result?.classes ?? "";
+  } catch (_err) {
+    {
+      console.warn("[cv() fallback] getNativeBinding threw error, using JS fallback");
+    }
+    const result = [];
+    const { base = "", compoundVariants = [] } = config;
+    if (base) result.push(base);
+    const merged = { ...defaultVariants };
+    for (const [key, values] of Object.entries(variants || {})) {
+      const selected = props[key] ?? defaultVariants?.[key];
+      if (selected !== void 0 && selected !== null) merged[key] = selected;
+      if (selected && typeof values === "object" && values !== null) {
+        const variantValues = values;
+        if (variantValues[String(selected)]) {
+          result.push(variantValues[String(selected)]);
+        }
+      }
+    }
+    for (const compound of compoundVariants) {
+      const { class: compoundClass, ...conditions } = compound;
+      const matches = Object.entries(conditions).every(
+        ([k, v]) => String(merged[k]) === String(v)
+      );
+      if (matches && compoundClass) result.push(compoundClass);
+    }
+    return result.join(" ");
   }
-  return classes.filter(Boolean).join(" ");
 }
 function cv(config, componentId) {
   {
@@ -782,23 +725,16 @@ function cn(...inputs) {
     }
   }
   if (strings.length === 0) return "";
-  try {
-    const native = getNativeBinding();
-    if (native?.resolveClassNames) ;
-  } catch {
+  {
+    throw new Error("Native binding 'resolveClassNames' is required but not available.");
   }
-  return strings.join(" ");
 }
 function cx(...inputs) {
   const filtered = inputs.flat().filter(Boolean);
   if (filtered.length === 0) return "";
-  try {
-    const native = getNativeBinding();
-    if (native?.twMergeMany) ;
-    if (native?.twMerge) ;
-  } catch {
+  {
+    throw new Error("Native binding 'twMergeMany' is required but not available.");
   }
-  return filtered.join(" ");
 }
 var cxm = cx;
 var TOKEN_ENGINE_KEY = "__TW_TOKEN_ENGINE__";
@@ -1100,18 +1036,16 @@ function injectTokensToRoot(tokens, prefix) {
   if (typeof document === "undefined") return;
   const styleId = `__tw-sys-tokens-${prefix}`;
   if (document.getElementById(styleId)) return;
-  const lines = [":root {"];
-  for (const [group, map] of Object.entries(tokens)) {
-    for (const [name, value] of Object.entries(map)) {
-      lines.push(`  ${tokenVarName(prefix, group, name)}: ${value};`);
-    }
-  }
-  lines.push("}");
   const style = document.createElement("style");
   style.id = styleId;
-  style.textContent = lines.join("\n");
+  style.textContent = _buildTokenCss();
   document.head.appendChild(style);
 }
+function _buildTokenCss(tokens, prefix) {
+  {
+    throw new Error("FATAL: Native binding 'generateSystemTokenCss' is required but not available.");
+  }
+}
 function resolveComponentConfig(config, tokens, prefix) {
   const resolveStr = (s) => resolveTokenRef(tokens, prefix, s);
   const base = resolveStr(config.base ?? "");
@@ -1213,14 +1147,7 @@ function createStyledSystem(config) {
         tokens[group][name] = value;
       }
     }
-    const lines = [":root {"];
-    for (const [group, map] of Object.entries(tokens)) {
-      for (const [name, value] of Object.entries(map)) {
-        lines.push(`  ${tokenVarName(prefix, group, name)}: ${value};`);
-      }
-    }
-    lines.push("}");
-    style.textContent = lines.join("\n");
+    style.textContent = _buildTokenCss();
   }
   function getConfig(name) {
     return resolvedConfigs.get(name);
@@ -1233,39 +1160,6 @@ function createStyledSystem(config) {
     tokens
   });
 }
-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 parseTemplateFallback(strings, exprs) {
-  const raw = strings.raw.reduce((acc, str, i) => {
-    const expr = exprs[i];
-    const exprStr = typeof expr === "function" ? "" : expr ?? "";
-    return acc + str + String(exprStr);
-  }, "");
-  const subs = {};
-  let base = raw;
-  let match;
-  SUB_RE.lastIndex = 0;
-  while ((match = SUB_RE.exec(raw)) !== null) {
-    const name = match[1] ?? match[2];
-    const rawInner = match[3].replace(COMMENT_RE, "");
-    let inner = "";
-    for (const line of rawInner.split("\n")) {
-      const t2 = line.trim();
-      if (t2) inner += (inner ? " " : "") + t2;
-    }
-    inner = inner.replace(/\s+/g, " ").trim();
-    subs[name] = inner;
-    base = base.replace(match[0], "");
-  }
-  const rawBase = base.replace(COMMENT_RE, "");
-  let cleanBase = "";
-  for (const line of rawBase.split("\n")) {
-    const t2 = line.trim();
-    if (t2) cleanBase += (cleanBase ? " " : "") + t2;
-  }
-  cleanBase = cleanBase.replace(/\s+/g, " ").trim();
-  return { base: cleanBase, subs, hasSubs: Object.keys(subs).length > 0 };
-}
 var _parsedTemplateCache = /* @__PURE__ */ new Map();
 function parseTemplate(strings, exprs) {
   const raw = strings.raw.reduce((acc, str, i) => {
@@ -1275,15 +1169,9 @@ function parseTemplate(strings, exprs) {
   }, "");
   const cached = _parsedTemplateCache.get(raw);
   if (cached) return cached;
-  let result;
-  try {
-    const binding = getNativeBinding();
-    if (binding?.parseTemplate) ;
-  } catch {
+  {
+    throw new Error("FATAL: Native binding 'parseTemplate' is required but not available.");
   }
-  result = parseTemplateFallback(strings, exprs);
-  _parsedTemplateCache.set(raw, result);
-  return result;
 }
 function makeTag(tag) {
   return ((stringsOrConfig, ...exprs) => {