tailwind-styled-v4 4.0.0 → 5.0.0

package/dist/index.js

@@ -1,44 +1,8 @@
+import { __require } from './chunk-VZEJV27B.js';
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 /* tailwind-styled-v4 v4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 
 // src/containerQuery.ts
 var CONTAINER_BREAKPOINTS = {
@@ -54,7 +18,7 @@ if (typeof window !== "undefined") {
   window.__TW_CONTAINER_REGISTRY__ = containerRegistry;
 }
 function hashContainer(tag, container, name) {
-  const key = tag + (name != null ? name : "") + JSON.stringify(Object.entries(container).sort());
+  const key = tag + (name ?? "") + JSON.stringify(Object.entries(container).sort());
   let hash = 5381;
   for (let i = 0; i < key.length; i++) {
     hash = (hash << 5) + hash ^ key.charCodeAt(i);
@@ -113,31 +77,29 @@ var LAYOUT_MAP = {
   "justify-end": "justify-content:flex-end"
 };
 function layoutClassesToCss(classes) {
-  var _a, _b;
   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 = (_a = cls.match(/\[(.+)\]/)) == null ? void 0 : _a[1];
+      const val = cls.match(/\[(.+)\]/)?.[1];
       if (val) decls.push(`width:${val}`);
     } else if (cls.startsWith("max-w-[")) {
-      const val = (_b = cls.match(/\[(.+)\]/)) == null ? void 0 : _b[1];
+      const val = cls.match(/\[(.+)\]/)?.[1];
       if (val) decls.push(`max-width:${val}`);
     }
   }
   return decls.join(";");
 }
 function buildContainerRules(id, container, containerName) {
-  var _a, _b, _c;
   const rules = [];
   for (const [key, value] of Object.entries(container)) {
     let minWidth;
     let classes;
     if (typeof value === "string") {
-      minWidth = (_a = CONTAINER_BREAKPOINTS[key]) != null ? _a : key;
+      minWidth = CONTAINER_BREAKPOINTS[key] ?? key;
       classes = value;
     } else {
-      minWidth = (_c = (_b = value.minWidth) != null ? _b : CONTAINER_BREAKPOINTS[key]) != null ? _c : key;
+      minWidth = value.minWidth ?? CONTAINER_BREAKPOINTS[key] ?? key;
       classes = value.classes;
     }
     const css = layoutClassesToCss(classes);
@@ -157,7 +119,7 @@ function injectContainerStyles(id, container, containerName) {
     const { batchedInject } = __require("@tailwind-styled/runtime-css/batched");
     for (const rule of css.split("\n").filter(Boolean)) batchedInject(rule);
     return;
-  } catch (e) {
+  } catch {
   }
   const style = document.createElement("style");
   style.id = styleId;
@@ -168,13 +130,10 @@ function injectContainerStyles(id, container, containerName) {
 function processContainer(tag, container, containerName) {
   const id = hashContainer(tag, container, containerName);
   if (!containerRegistry.has(id)) {
-    const breakpoints = Object.entries(container).map(([key, value]) => {
-      var _a;
-      return {
-        minWidth: (_a = CONTAINER_BREAKPOINTS[key]) != null ? _a : key,
-        classes: typeof value === "string" ? value : value.classes
-      };
-    });
+    const breakpoints = Object.entries(container).map(([key, value]) => ({
+      minWidth: CONTAINER_BREAKPOINTS[key] ?? key,
+      classes: typeof value === "string" ? value : value.classes
+    }));
     containerRegistry.set(id, {
       id,
       tag,
@@ -301,12 +260,11 @@ var TW_MAP = {
   "text-zinc-500": "color:rgb(113,113,122)"
 };
 function twClassesToCss(classes) {
-  var _a;
   const decls = [];
   for (const cls of classes.trim().split(/\s+/)) {
     if (TW_MAP[cls]) decls.push(TW_MAP[cls]);
     else if (cls.includes("[") && cls.includes("]")) {
-      const val = (_a = cls.match(/\[(.+)\]/)) == null ? void 0 : _a[1];
+      const val = cls.match(/\[(.+)\]/)?.[1];
       if (!val) continue;
       if (cls.startsWith("bg-[")) decls.push(`background-color:${val}`);
       else if (cls.startsWith("text-[")) decls.push(`color:${val}`);
@@ -333,7 +291,7 @@ function injectStateStyles(id, state) {
     const { batchedInject } = __require("@tailwind-styled/runtime-css/batched");
     for (const rule of rules) batchedInject(rule);
     return;
-  } catch (e) {
+  } catch {
   }
   const style = document.createElement("style");
   style.id = styleId;
@@ -387,10 +345,9 @@ function makeFilterProps(variantKeys) {
   };
 }
 function resolveVariants(variants, props, defaults) {
-  var _a;
   const classes = [];
   for (const key in variants) {
-    const val = (_a = props[key]) != null ? _a : defaults[key];
+    const val = props[key] ?? defaults[key];
     if (val !== void 0 && variants[key][String(val)]) {
       classes.push(variants[key][String(val)]);
     }
@@ -400,36 +357,35 @@ function resolveVariants(variants, props, defaults) {
 function resolveCompound(compounds, props) {
   const classes = [];
   for (const compound of compounds) {
-    const _a = compound, { class: cls } = _a, conditions = __objRest(_a, ["class"]);
+    const { class: cls, ...conditions } = compound;
     const match = Object.entries(conditions).every(([k, v]) => props[k] === v);
     if (match) classes.push(cls);
   }
   return classes.join(" ");
 }
 function createComponent(tag, config) {
-  var _a, _b, _c, _d, _e;
   const isStatic = typeof config === "string";
-  const base = isStatic ? config : (_a = config.base) != null ? _a : "";
-  const variants = isStatic ? {} : (_b = config.variants) != null ? _b : {};
-  const compoundVariants = isStatic ? [] : (_c = config.compoundVariants) != null ? _c : [];
-  const defaultVariants = isStatic ? {} : (_d = config.defaultVariants) != null ? _d : {};
+  const base = isStatic ? config : config.base ?? "";
+  const variants = isStatic ? {} : config.variants ?? {};
+  const compoundVariants = isStatic ? [] : config.compoundVariants ?? [];
+  const defaultVariants = isStatic ? {} : config.defaultVariants ?? {};
   const stateConfig = isStatic ? void 0 : config.state;
   const containerConfig = isStatic ? void 0 : config.container;
   const containerName = isStatic ? void 0 : config.containerName;
   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 == null ? void 0 : stateResult.stateClass, containerResult == null ? void 0 : containerResult.containerClass].filter(Boolean).join(" ");
+  const engineClasses = [stateResult?.stateClass, containerResult?.containerClass].filter(Boolean).join(" ");
   const variantKeySet = new Set(Object.keys(variants));
   const filterProps = makeFilterProps(variantKeySet);
-  const tagStr = typeof tag === "string" ? tag : (_e = tag.displayName) != null ? _e : "Component";
+  const tagStr = typeof tag === "string" ? tag : tag.displayName ?? "Component";
   if (isStatic || Object.keys(variants).length === 0) {
     const Component2 = React.forwardRef((props, ref) => {
-      const _a2 = props, { className } = _a2, rest = __objRest(_a2, ["className"]);
-      return React.createElement(tag, __spreadProps(__spreadValues({
-        ref
-      }, filterProps(rest)), {
+      const { className, ...rest } = props;
+      return React.createElement(tag, {
+        ref,
+        ...filterProps(rest),
         className: twMerge(base, engineClasses, className)
-      }));
+      });
     });
     Component2.displayName = `tw.${tagStr}`;
     attachExtend(Component2, tag, base, config);
@@ -439,11 +395,11 @@ function createComponent(tag, config) {
     const { className } = props;
     const variantClasses = resolveVariants(variants, props, defaultVariants);
     const compoundClasses = resolveCompound(compoundVariants, props);
-    return React.createElement(tag, __spreadProps(__spreadValues({
-      ref
-    }, filterProps(props)), {
+    return React.createElement(tag, {
+      ref,
+      ...filterProps(props),
       className: twMerge(base, variantClasses, compoundClasses, engineClasses, className)
-    }));
+    });
   });
   Component.displayName = `tw.${tagStr}`;
   attachExtend(Component, tag, base, config);
@@ -455,32 +411,35 @@ function attachExtend(Component, originalTag, base, config) {
     const merged = twMerge(base, extra);
     return createComponent(
       originalTag,
-      typeof config === "string" ? merged : __spreadProps(__spreadValues({}, config), { base: merged })
+      typeof config === "string" ? merged : { ...config, base: merged }
     );
   };
   Component.withVariants = (newConfig) => {
-    var _a, _b, _c, _d, _e, _f;
     const existing = typeof config === "object" ? config : {};
-    return createComponent(originalTag, __spreadProps(__spreadValues({}, existing), {
+    return createComponent(originalTag, {
+      ...existing,
       base,
-      variants: __spreadValues(__spreadValues({}, (_a = existing.variants) != null ? _a : {}), (_b = newConfig.variants) != null ? _b : {}),
+      variants: { ...existing.variants ?? void 0, ...newConfig.variants ?? void 0 },
       compoundVariants: [
-        ...(_c = existing.compoundVariants) != null ? _c : [],
-        ...(_d = newConfig.compoundVariants) != null ? _d : []
+        ...existing.compoundVariants ?? [],
+        ...newConfig.compoundVariants ?? []
       ],
-      defaultVariants: __spreadValues(__spreadValues({}, (_e = existing.defaultVariants) != null ? _e : {}), (_f = newConfig.defaultVariants) != null ? _f : {})
-    }));
+      defaultVariants: {
+        ...existing.defaultVariants ?? void 0,
+        ...newConfig.defaultVariants ?? void 0
+      }
+    });
   };
-  Component.animate = (opts) => {
+  Component.animate = async (opts) => {
     try {
       const { animate: animateFn } = __require("@tailwind-styled/animate");
-      const animClass = animateFn(opts);
+      const animClass = await animateFn(opts);
       const merged = twMerge(base, animClass);
       return createComponent(
         originalTag,
-        typeof config === "string" ? merged : __spreadProps(__spreadValues({}, config), { base: merged })
+        typeof config === "string" ? merged : { ...config, base: merged }
       );
-    } catch (e) {
+    } catch {
       console.warn("[tailwind-styled-v4] .animate() requires @tailwind-styled/animate");
       return Component;
     }
@@ -489,16 +448,15 @@ function attachExtend(Component, originalTag, base, config) {
 function cv(config) {
   const { base = "", variants = {}, compoundVariants = [], defaultVariants = {} } = config;
   return (props = {}) => {
-    var _a;
     const classes = [base];
     for (const key in variants) {
-      const val = (_a = props[key]) != null ? _a : defaultVariants[key];
+      const val = props[key] ?? defaultVariants[key];
       if (val !== void 0 && variants[key][String(val)]) {
         classes.push(variants[key][String(val)]);
       }
     }
     for (const compound of compoundVariants) {
-      const _b = compound, { class: cls } = _b, conditions = __objRest(_b, ["class"]);
+      const { class: cls, ...conditions } = compound;
       const match = Object.entries(conditions).every(([k, v]) => props[k] === v);
       if (match) classes.push(cls);
     }
@@ -513,6 +471,25 @@ function cx(...inputs) {
   return twMerge(...inputs.filter(Boolean));
 }
 var cxm = cx;
+function normalizeClassInput(classLists) {
+  return classLists.filter(Boolean).map((v) => String(v).trim()).filter((v) => v.length > 0);
+}
+function createTwMerge(_options = {}) {
+  return function twMerge5(...classLists) {
+    const clean = normalizeClassInput(classLists);
+    return twMerge(clean.join(" "));
+  };
+}
+var twMerge4 = createTwMerge();
+function mergeWithRules(rules, ...classLists) {
+  const base = twMerge4(...classLists);
+  let classes = base.split(/\s+/).filter(Boolean);
+  for (const rule of Object.values(rules)) {
+    const next = rule(classes);
+    classes = twMerge4(next).split(/\s+/).filter(Boolean);
+  }
+  return classes.join(" ");
+}
 
 // src/liveTokenEngine.ts
 var _currentTokens = {};
@@ -549,16 +526,16 @@ function syncStyleEl() {
   _styleEl.textContent = buildRootCss(_currentTokens);
 }
 function notifySubscribers() {
-  const snapshot = __spreadValues({}, _currentTokens);
+  const snapshot = { ..._currentTokens };
   for (const sub of _subscribers) {
     try {
       sub(snapshot);
-    } catch (_e) {
+    } catch {
     }
   }
 }
 function liveToken(tokens) {
-  _currentTokens = __spreadValues(__spreadValues({}, _currentTokens), tokens);
+  _currentTokens = { ..._currentTokens, ...tokens };
   syncStyleEl();
   const vars = {};
   for (const name of Object.keys(tokens)) {
@@ -576,19 +553,19 @@ function liveToken(tokens) {
       setTokens(newTokens);
     },
     snapshot() {
-      return __spreadValues({}, _currentTokens);
+      return { ..._currentTokens };
     }
   };
 }
 function setToken(name, value) {
-  _currentTokens = __spreadProps(__spreadValues({}, _currentTokens), { [name]: value });
+  _currentTokens = { ..._currentTokens, [name]: value };
   if (typeof document !== "undefined") {
     document.documentElement.style.setProperty(tokenVar(name), value);
   }
   notifySubscribers();
 }
 function setTokens(tokens) {
-  _currentTokens = __spreadValues(__spreadValues({}, _currentTokens), tokens);
+  _currentTokens = { ..._currentTokens, ...tokens };
   if (typeof document !== "undefined") {
     const root = document.documentElement;
     for (const [name, value] of Object.entries(tokens)) {
@@ -606,7 +583,7 @@ function applyTokenSet(tokens) {
       }
     }
   }
-  _currentTokens = __spreadValues({}, tokens);
+  _currentTokens = { ...tokens };
   syncStyleEl();
   notifySubscribers();
 }
@@ -614,7 +591,7 @@ function getToken(name) {
   return _currentTokens[name];
 }
 function getTokens() {
-  return __spreadValues({}, _currentTokens);
+  return { ..._currentTokens };
 }
 function subscribeTokens(fn) {
   _subscribers.add(fn);
@@ -631,14 +608,16 @@ function createUseTokens() {
     const react = __require("react");
     useState = react.useState;
     useEffect = react.useEffect;
-  } catch (e) {
+  } catch {
     return null;
   }
   return function useTokens() {
-    const [tokens, setTokens_] = useState(__spreadValues({}, _currentTokens));
+    const [tokens, setTokens_] = useState({
+      ..._currentTokens
+    });
     useEffect(() => {
-      setTokens_(__spreadValues({}, _currentTokens));
-      const unsub = subscribeTokens((t2) => setTokens_(__spreadValues({}, t2)));
+      setTokens_({ ..._currentTokens });
+      const unsub = subscribeTokens((t2) => setTokens_({ ...t2 }));
       return unsub;
     }, []);
     return tokens;
@@ -653,11 +632,10 @@ function tokenVarRef(prefix, group, name) {
   return `var(${tokenVarName(prefix, group, name)})`;
 }
 function resolveTokenRef(tokens, prefix, value) {
-  var _a;
   if (value.startsWith("token:")) {
     const path = value.slice(6);
     const [group, name] = path.split(".");
-    if (group && name && ((_a = tokens[group]) == null ? void 0 : _a[name]) !== void 0) {
+    if (group && name && tokens[group]?.[name] !== void 0) {
       return tokenVarRef(prefix, group, name);
     }
   }
@@ -680,37 +658,35 @@ function injectTokensToRoot(tokens, prefix) {
   document.head.appendChild(style);
 }
 function resolveComponentConfig(config, tokens, prefix) {
-  var _a, _b, _c, _d, _e;
   const resolveStr = (s) => resolveTokenRef(tokens, prefix, s);
-  const base = resolveStr((_a = config.base) != null ? _a : "");
-  const systemBase = resolveStr((_b = config.systemBase) != null ? _b : "");
+  const base = resolveStr(config.base ?? "");
+  const systemBase = resolveStr(config.systemBase ?? "");
   const mergedBase = [systemBase, base].filter(Boolean).join(" ");
   const variants = {};
-  for (const [variantKey, variantMap] of Object.entries((_c = config.variants) != null ? _c : {})) {
+  for (const [variantKey, variantMap] of Object.entries(config.variants ?? {})) {
     variants[variantKey] = {};
     for (const [optKey, classes] of Object.entries(variantMap)) {
       variants[variantKey][optKey] = classes.split(" ").map(resolveStr).join(" ");
     }
   }
-  const compoundVariants = ((_d = config.compoundVariants) != null ? _d : []).map((cv2) => {
-    const _a2 = cv2, { class: cls } = _a2, rest = __objRest(_a2, ["class"]);
-    return __spreadValues({ class: resolveStr(cls) }, rest);
+  const compoundVariants = (config.compoundVariants ?? []).map((cv2) => {
+    const { class: cls, ...rest } = cv2;
+    return { class: resolveStr(cls), ...rest };
   });
   return {
     base: mergedBase,
     variants,
     compoundVariants,
-    defaultVariants: (_e = config.defaultVariants) != null ? _e : {},
+    defaultVariants: config.defaultVariants ?? {},
     state: config.state,
     container: config.container,
     containerName: config.containerName
   };
 }
 function createStyledSystem(config) {
-  var _a, _b, _c, _d;
-  const prefix = (_a = config.prefix) != null ? _a : "sys";
-  const tokens = (_b = config.tokens) != null ? _b : {};
-  const componentDefs = (_c = config.components) != null ? _c : {};
+  const prefix = config.prefix ?? "sys";
+  const tokens = config.tokens ?? {};
+  const componentDefs = config.components ?? {};
   const shouldInject = config.injectTokens !== false;
   if (shouldInject && typeof window !== "undefined") {
     injectTokensToRoot(tokens, prefix);
@@ -724,9 +700,8 @@ function createStyledSystem(config) {
   }
   const factories = {};
   for (const [name, compCfg] of Object.entries(componentDefs)) {
-    const tag = (_d = compCfg.tag) != null ? _d : "div";
+    const tag = compCfg.tag ?? "div";
     factories[name] = (overrides) => {
-      var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i;
       const baseResolved = resolvedConfigs.get(name);
       if (!overrides || Object.keys(overrides).length === 0) {
         return createComponent(tag, baseResolved);
@@ -738,15 +713,21 @@ function createStyledSystem(config) {
       );
       const merged = {
         base: [baseResolved.base, overrideResolved.base].filter(Boolean).join(" "),
-        variants: __spreadValues(__spreadValues({}, (_a2 = baseResolved.variants) != null ? _a2 : {}), (_b2 = overrideResolved.variants) != null ? _b2 : {}),
+        variants: {
+          ...baseResolved.variants ?? void 0,
+          ...overrideResolved.variants ?? void 0
+        },
         compoundVariants: [
-          ...(_c2 = baseResolved.compoundVariants) != null ? _c2 : [],
-          ...(_d2 = overrideResolved.compoundVariants) != null ? _d2 : []
+          ...baseResolved.compoundVariants ?? [],
+          ...overrideResolved.compoundVariants ?? []
         ],
-        defaultVariants: __spreadValues(__spreadValues({}, (_e = baseResolved.defaultVariants) != null ? _e : {}), (_f = overrideResolved.defaultVariants) != null ? _f : {}),
-        state: (_g = overrideResolved.state) != null ? _g : baseResolved.state,
-        container: (_h = overrideResolved.container) != null ? _h : baseResolved.container,
-        containerName: (_i = overrideResolved.containerName) != null ? _i : baseResolved.containerName
+        defaultVariants: {
+          ...baseResolved.defaultVariants ?? void 0,
+          ...overrideResolved.defaultVariants ?? void 0
+        },
+        state: overrideResolved.state ?? baseResolved.state,
+        container: overrideResolved.container ?? baseResolved.container,
+        containerName: overrideResolved.containerName ?? baseResolved.containerName
       };
       return createComponent(tag, merged);
     };
@@ -757,10 +738,9 @@ function createStyledSystem(config) {
     return tokenVarRef(prefix, group, name);
   }
   function rawToken(path) {
-    var _a2;
     const [group, name] = path.split(".");
     if (!group || !name) return void 0;
-    return (_a2 = tokens[group]) == null ? void 0 : _a2[name];
+    return tokens[group]?.[name];
   }
   function setTokens2(updates) {
     if (typeof document === "undefined") return;
@@ -798,11 +778,42 @@ function createStyledSystem(config) {
   });
 }
 
+// src/styled.ts
+function resolveVariantClass(options, props) {
+  const out = [];
+  const variants = options.variants ?? {};
+  const defaults = options.defaultVariants ?? {};
+  for (const [variantName, valueMap] of Object.entries(variants)) {
+    const value = props[variantName] ?? defaults[variantName];
+    if (value === void 0) continue;
+    const key = String(value);
+    const cls = valueMap[key];
+    if (cls) out.push(cls);
+  }
+  for (const compound of options.compoundVariants ?? []) {
+    const matches = Object.entries(compound.variants).every(([k, expected]) => {
+      const current = props[k] ?? defaults[k];
+      return String(current) === expected;
+    });
+    if (matches) out.push(compound.className);
+  }
+  return out;
+}
+function resolveStyledClassName(options, props = {}) {
+  const parts = [options.base ?? "", ...resolveVariantClass(options, props), props.className ?? ""];
+  return twMerge4(...parts);
+}
+function styled(options) {
+  return function getClassName(props = {}) {
+    return resolveStyledClassName(options, props);
+  };
+}
+
 // src/twProxy.ts
 function parseTemplate(strings, exprs) {
   return strings.raw.reduce((acc, str, i) => {
     const expr = exprs[i];
-    const exprStr = typeof expr === "function" ? "" : expr != null ? expr : "";
+    const exprStr = typeof expr === "function" ? "" : expr ?? "";
     return acc + str + String(exprStr);
   }, "").split("\n").map((l) => l.trim()).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
 }
@@ -925,8 +936,7 @@ function makeServerTag(tag) {
   const baseFactory = makeTag(tag);
   if (typeof window !== "undefined" && process.env.NODE_ENV !== "production") {
     return ((...args) => {
-      var _a;
-      const tagName = typeof tag === "string" ? tag : (_a = tag.displayName) != null ? _a : "Component";
+      const tagName = typeof tag === "string" ? tag : tag.displayName ?? "Component";
       console.warn(
         `[tailwind-styled-v4] tw.server.${tagName} rendered in browser. Ensure withTailwindStyled or Vite plugin is configured.`
       );
@@ -996,7 +1006,6 @@ function createTheme(tokenMap) {
   return resolved;
 }
 function getGroupPrefix(group) {
-  var _a;
   const map = {
     colors: "bg",
     // default to bg; user can use t.text() for text colors
@@ -1004,7 +1013,7 @@ function getGroupPrefix(group) {
     spacing: "p",
     shadows: "shadow"
   };
-  return (_a = map[group]) != null ? _a : "";
+  return map[group] ?? "";
 }
 var v4Tokens = {
   /** bg-[var(--color-background)] */
@@ -1017,6 +1026,280 @@ var v4Tokens = {
   fontMono: twVar("font", "font-mono")
 };
 
-export { applyTokenSet, cn, tokenRef as containerRef, createComponent, createStyledSystem, createTheme, createUseTokens, cssVar, cv, cx, cxm, generateContainerCss, generateStateCss, generateTokenCssString, getContainerRegistry, getStateRegistry, getToken, getTokens, liveToken, processContainer, processState, server, setToken, setTokens, subscribeTokens, t, tokenRef, tokenVar, tw, twVar, v4Tokens };
+// src/parser.ts
+var _getNodePath = () => typeof __require !== "undefined" ? __require("path") : null;
+var _getCreateRequire = () => {
+  if (typeof __require !== "undefined") {
+    try {
+      return __require("module").createRequire;
+    } catch {
+      return null;
+    }
+  }
+  return null;
+};
+var _binding;
+function getBinding() {
+  if (_binding !== void 0) return _binding;
+  if (process.env.TWS_NO_NATIVE === "1" || process.env.TWS_NO_RUST === "1") {
+    return _binding = null;
+  }
+  if (typeof process === "undefined" || typeof process.cwd !== "function") {
+    return _binding = null;
+  }
+  const runtimeDir = typeof __dirname === "string" ? __dirname : process.cwd();
+  const nodePath = _getNodePath();
+  const nodeCreateRequire = _getCreateRequire();
+  if (!nodePath) return _binding = null;
+  const req = typeof __require === "function" ? __require : nodeCreateRequire ? nodeCreateRequire(nodePath.join(runtimeDir, "noop.cjs")) : null;
+  if (!req) return _binding = null;
+  const candidates = [
+    nodePath.resolve(process.cwd(), "native", "tailwind_styled_parser.node"),
+    nodePath.resolve(runtimeDir, "..", "..", "..", "native", "tailwind_styled_parser.node"),
+    nodePath.resolve(runtimeDir, "..", "..", "..", "..", "native", "tailwind_styled_parser.node")
+  ];
+  for (const c of candidates) {
+    try {
+      const mod = req(c);
+      if (mod?.parseClasses) return _binding = mod;
+    } catch {
+    }
+  }
+  return _binding = null;
+}
+function splitClassListJS(input) {
+  const out = [];
+  let token = "";
+  let square = 0;
+  let round = 0;
+  let escaped = false;
+  for (const ch of input) {
+    if (escaped) {
+      token += ch;
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\") {
+      token += ch;
+      escaped = true;
+      continue;
+    }
+    if (ch === "[") square++;
+    else if (ch === "]") square = Math.max(0, square - 1);
+    else if (ch === "(") round++;
+    else if (ch === ")") round = Math.max(0, round - 1);
+    const isSpace = /\s/.test(ch);
+    if (isSpace && square === 0 && round === 0) {
+      if (token.trim().length > 0) out.push(token.trim());
+      token = "";
+      continue;
+    }
+    token += ch;
+  }
+  if (token.trim().length > 0) out.push(token.trim());
+  return out;
+}
+function parseClassTokenJS(rawToken) {
+  const parts = [];
+  let current = "";
+  let square = 0;
+  let round = 0;
+  let escaped = false;
+  for (const ch of rawToken) {
+    if (escaped) {
+      current += ch;
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\") {
+      current += ch;
+      escaped = true;
+      continue;
+    }
+    if (ch === "[") square++;
+    else if (ch === "]") square = Math.max(0, square - 1);
+    else if (ch === "(") round++;
+    else if (ch === ")") round = Math.max(0, round - 1);
+    if (ch === ":" && square === 0 && round === 0) {
+      parts.push(current);
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  parts.push(current);
+  const variants = parts.slice(0, -1).filter(Boolean);
+  const baseToken = parts[parts.length - 1] ?? "";
+  const parsed = { raw: rawToken, base: baseToken, variants };
+  const opacityMatch = baseToken.match(/^(.*)\/(\d{1,3})$/);
+  if (opacityMatch && opacityMatch[1].length > 0) {
+    parsed.base = opacityMatch[1];
+    parsed.modifier = { type: "opacity", value: opacityMatch[2] };
+    return parsed;
+  }
+  const arbitraryMatch = baseToken.match(/\((--[a-zA-Z0-9_-]+)\)/);
+  if (arbitraryMatch) {
+    parsed.modifier = { type: "arbitrary", value: arbitraryMatch[1] };
+  }
+  return parsed;
+}
+function splitClassList(input) {
+  const binding = getBinding();
+  if (binding?.parseClasses) {
+    try {
+      return binding.parseClasses(input).map((p) => p.raw);
+    } catch {
+    }
+  }
+  return splitClassListJS(input);
+}
+function parseClassToken(rawToken) {
+  const binding = getBinding();
+  if (binding?.parseClasses) {
+    try {
+      const results = binding.parseClasses(rawToken);
+      if (results.length === 1) {
+        const r = results[0];
+        const parsed = {
+          raw: r.raw,
+          base: r.base,
+          variants: r.variants
+        };
+        if (r.modifierType && r.modifierValue) {
+          parsed.modifier = {
+            type: r.modifierType,
+            value: r.modifierValue
+          };
+        }
+        return parsed;
+      }
+    } catch {
+    }
+  }
+  return parseClassTokenJS(rawToken);
+}
+function parseTailwindClasses(input) {
+  const binding = getBinding();
+  if (binding?.parseClasses) {
+    try {
+      return binding.parseClasses(input).map((r) => {
+        const parsed = { raw: r.raw, base: r.base, variants: r.variants };
+        if (r.modifierType && r.modifierValue) {
+          parsed.modifier = {
+            type: r.modifierType,
+            value: r.modifierValue
+          };
+        }
+        return parsed;
+      });
+    } catch {
+    }
+  }
+  return splitClassListJS(input).map(parseClassTokenJS);
+}
+
+// src/themeReader.ts
+var THEME_BLOCK_RE = /@theme\s*\{([\s\S]*?)\}/g;
+var CSS_VAR_RE = /--([a-zA-Z0-9_-]+)\s*:\s*([^;]+);/g;
+var cache = /* @__PURE__ */ new Map();
+function createEmptyTheme() {
+  return {
+    colors: {},
+    spacing: {},
+    fonts: {},
+    breakpoints: {},
+    animations: {},
+    raw: {}
+  };
+}
+function setToken2(theme, key, value) {
+  theme.raw[key] = value;
+  if (key.startsWith("color-")) {
+    theme.colors[key.slice("color-".length)] = value;
+    return;
+  }
+  if (key.startsWith("spacing-")) {
+    theme.spacing[key.slice("spacing-".length)] = value;
+    return;
+  }
+  if (key.startsWith("font-")) {
+    theme.fonts[key.slice("font-".length)] = value;
+    return;
+  }
+  if (key.startsWith("breakpoint-")) {
+    theme.breakpoints[key.slice("breakpoint-".length)] = value;
+    return;
+  }
+  if (key.startsWith("animate-")) {
+    theme.animations[key.slice("animate-".length)] = value;
+  }
+}
+function resolveThemeValue(key, theme, visited = /* @__PURE__ */ new Set()) {
+  const token = key.replace(/^--/, "");
+  const raw = theme.raw[token];
+  if (!raw) return "";
+  if (visited.has(token)) return raw;
+  const nested = raw.match(/^var\((--[a-zA-Z0-9_-]+)\)$/);
+  if (!nested) return raw;
+  visited.add(token);
+  return resolveThemeValue(nested[1], theme, visited);
+}
+function extractThemeFromCSS(cssContent) {
+  const hit = cache.get(cssContent);
+  if (hit) return hit;
+  const theme = createEmptyTheme();
+  let blockMatch;
+  while ((blockMatch = THEME_BLOCK_RE.exec(cssContent)) !== null) {
+    const block = blockMatch[1];
+    let varMatch;
+    while ((varMatch = CSS_VAR_RE.exec(block)) !== null) {
+      const key = varMatch[1];
+      const value = varMatch[2].trim();
+      setToken2(theme, key, value);
+    }
+  }
+  for (const key of Object.keys(theme.raw)) {
+    const resolved = resolveThemeValue(`--${key}`, theme);
+    theme.raw[key] = resolved;
+    if (key.startsWith("color-")) {
+      theme.colors[key.slice("color-".length)] = resolved;
+    } else if (key.startsWith("spacing-")) {
+      theme.spacing[key.slice("spacing-".length)] = resolved;
+    } else if (key.startsWith("font-")) {
+      theme.fonts[key.slice("font-".length)] = resolved;
+    } else if (key.startsWith("breakpoint-")) {
+      theme.breakpoints[key.slice("breakpoint-".length)] = resolved;
+    } else if (key.startsWith("animate-")) {
+      theme.animations[key.slice("animate-".length)] = resolved;
+    }
+  }
+  cache.set(cssContent, theme);
+  return theme;
+}
+function generateTypeDefinitions(theme) {
+  const toRecordType = (name, obj) => {
+    const keys = Object.keys(obj);
+    if (keys.length === 0) return `  ${name}: Record<string, string>`;
+    const mapped = keys.map((k) => `    "${k}": string`).join("\n");
+    return `  ${name}: {
+${mapped}
+  }`;
+  };
+  return [
+    "export interface TailwindStyledThemeTokens {",
+    toRecordType("colors", theme.colors),
+    toRecordType("spacing", theme.spacing),
+    toRecordType("fonts", theme.fonts),
+    toRecordType("breakpoints", theme.breakpoints),
+    toRecordType("animations", theme.animations),
+    "}",
+    ""
+  ].join("\n");
+}
+function clearThemeReaderCache() {
+  cache.clear();
+}
+
+export { applyTokenSet, clearThemeReaderCache, cn, tokenRef as containerRef, createComponent, createStyledSystem, createTheme, createTwMerge, createUseTokens, cssVar, cv, cx, cxm, extractThemeFromCSS, generateContainerCss, generateStateCss, generateTokenCssString, generateTypeDefinitions, getContainerRegistry, getStateRegistry, getToken, getTokens, liveToken, mergeWithRules, parseClassToken, parseTailwindClasses, processContainer, processState, resolveStyledClassName, resolveThemeValue, server, setToken, setTokens, splitClassList, styled, subscribeTokens, t, tokenRef, tokenVar, tw, twMerge4 as twMerge, twVar, v4Tokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map