tailwind-styled-v4 4.0.0 → 5.0.0

package/dist/index.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var chunkY5D3E72P_cjs = require('./chunk-Y5D3E72P.cjs');
 var React = require('react');
 var tailwindMerge = require('tailwind-merge');
 
@@ -8,43 +9,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 /* 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 = {
@@ -60,7 +24,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);
@@ -119,31 +83,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);
@@ -160,10 +122,10 @@ function injectContainerStyles(id, container, containerName) {
   const css = buildContainerRules(id, container, containerName);
   if (!css) return;
   try {
-    const { batchedInject } = __require("@tailwind-styled/runtime-css/batched");
+    const { batchedInject } = chunkY5D3E72P_cjs.__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;
@@ -174,13 +136,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,
@@ -307,12 +266,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}`);
@@ -336,10 +294,10 @@ function injectStateStyles(id, state) {
   }
   if (rules.length === 0) return;
   try {
-    const { batchedInject } = __require("@tailwind-styled/runtime-css/batched");
+    const { batchedInject } = chunkY5D3E72P_cjs.__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;
@@ -393,10 +351,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)]);
     }
@@ -406,36 +363,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__default.default.forwardRef((props, ref) => {
-      const _a2 = props, { className } = _a2, rest = __objRest(_a2, ["className"]);
-      return React__default.default.createElement(tag, __spreadProps(__spreadValues({
-        ref
-      }, filterProps(rest)), {
+      const { className, ...rest } = props;
+      return React__default.default.createElement(tag, {
+        ref,
+        ...filterProps(rest),
         className: tailwindMerge.twMerge(base, engineClasses, className)
-      }));
+      });
     });
     Component2.displayName = `tw.${tagStr}`;
     attachExtend(Component2, tag, base, config);
@@ -445,11 +401,11 @@ function createComponent(tag, config) {
     const { className } = props;
     const variantClasses = resolveVariants(variants, props, defaultVariants);
     const compoundClasses = resolveCompound(compoundVariants, props);
-    return React__default.default.createElement(tag, __spreadProps(__spreadValues({
-      ref
-    }, filterProps(props)), {
+    return React__default.default.createElement(tag, {
+      ref,
+      ...filterProps(props),
       className: tailwindMerge.twMerge(base, variantClasses, compoundClasses, engineClasses, className)
-    }));
+    });
   });
   Component.displayName = `tw.${tagStr}`;
   attachExtend(Component, tag, base, config);
@@ -461,32 +417,35 @@ function attachExtend(Component, originalTag, base, config) {
     const merged = tailwindMerge.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 { animate: animateFn } = chunkY5D3E72P_cjs.__require("@tailwind-styled/animate");
+      const animClass = await animateFn(opts);
       const merged = tailwindMerge.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;
     }
@@ -495,16 +454,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);
     }
@@ -519,6 +477,25 @@ function cx(...inputs) {
   return tailwindMerge.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 tailwindMerge.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 = {};
@@ -555,16 +532,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)) {
@@ -582,19 +559,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)) {
@@ -612,7 +589,7 @@ function applyTokenSet(tokens) {
       }
     }
   }
-  _currentTokens = __spreadValues({}, tokens);
+  _currentTokens = { ...tokens };
   syncStyleEl();
   notifySubscribers();
 }
@@ -620,7 +597,7 @@ function getToken(name) {
   return _currentTokens[name];
 }
 function getTokens() {
-  return __spreadValues({}, _currentTokens);
+  return { ..._currentTokens };
 }
 function subscribeTokens(fn) {
   _subscribers.add(fn);
@@ -634,17 +611,19 @@ function generateTokenCssString() {
 function createUseTokens() {
   let useState, useEffect;
   try {
-    const react = __require("react");
+    const react = chunkY5D3E72P_cjs.__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;
@@ -659,11 +638,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);
     }
   }
@@ -686,37 +664,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);
@@ -730,9 +706,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);
@@ -744,15 +719,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);
     };
@@ -763,10 +744,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;
@@ -804,11 +784,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();
 }
@@ -931,8 +942,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.`
       );
@@ -1002,7 +1012,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
@@ -1010,7 +1019,7 @@ function getGroupPrefix(group) {
     spacing: "p",
     shadows: "shadow"
   };
-  return (_a = map[group]) != null ? _a : "";
+  return map[group] ?? "";
 }
 var v4Tokens = {
   /** bg-[var(--color-background)] */
@@ -1023,35 +1032,321 @@ var v4Tokens = {
   fontMono: twVar("font", "font-mono")
 };
 
+// src/parser.ts
+var _getNodePath = () => typeof chunkY5D3E72P_cjs.__require !== "undefined" ? chunkY5D3E72P_cjs.__require("path") : null;
+var _getCreateRequire = () => {
+  if (typeof chunkY5D3E72P_cjs.__require !== "undefined") {
+    try {
+      return chunkY5D3E72P_cjs.__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 chunkY5D3E72P_cjs.__require === "function" ? chunkY5D3E72P_cjs.__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();
+}
+
 exports.applyTokenSet = applyTokenSet;
+exports.clearThemeReaderCache = clearThemeReaderCache;
 exports.cn = cn;
 exports.containerRef = tokenRef;
 exports.createComponent = createComponent;
 exports.createStyledSystem = createStyledSystem;
 exports.createTheme = createTheme;
+exports.createTwMerge = createTwMerge;
 exports.createUseTokens = createUseTokens;
 exports.cssVar = cssVar;
 exports.cv = cv;
 exports.cx = cx;
 exports.cxm = cxm;
+exports.extractThemeFromCSS = extractThemeFromCSS;
 exports.generateContainerCss = generateContainerCss;
 exports.generateStateCss = generateStateCss;
 exports.generateTokenCssString = generateTokenCssString;
+exports.generateTypeDefinitions = generateTypeDefinitions;
 exports.getContainerRegistry = getContainerRegistry;
 exports.getStateRegistry = getStateRegistry;
 exports.getToken = getToken;
 exports.getTokens = getTokens;
 exports.liveToken = liveToken;
+exports.mergeWithRules = mergeWithRules;
+exports.parseClassToken = parseClassToken;
+exports.parseTailwindClasses = parseTailwindClasses;
 exports.processContainer = processContainer;
 exports.processState = processState;
+exports.resolveStyledClassName = resolveStyledClassName;
+exports.resolveThemeValue = resolveThemeValue;
 exports.server = server;
 exports.setToken = setToken;
 exports.setTokens = setTokens;
+exports.splitClassList = splitClassList;
+exports.styled = styled;
 exports.subscribeTokens = subscribeTokens;
 exports.t = t;
 exports.tokenRef = tokenRef;
 exports.tokenVar = tokenVar;
 exports.tw = tw;
+exports.twMerge = twMerge4;
 exports.twVar = twVar;
 exports.v4Tokens = v4Tokens;
 //# sourceMappingURL=index.cjs.map