tailwind-styled-v4 1.0.1 → 5.0.0

package/dist/index.cjs

@@ -0,0 +1,1353 @@
+'use strict';
+
+var chunkY5D3E72P_cjs = require('./chunk-Y5D3E72P.cjs');
+var React = require('react');
+var tailwindMerge = require('tailwind-merge');
+
+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 */
+
+// src/containerQuery.ts
+var CONTAINER_BREAKPOINTS = {
+  xs: "240px",
+  sm: "320px",
+  md: "640px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+};
+var containerRegistry = /* @__PURE__ */ new Map();
+if (typeof window !== "undefined") {
+  window.__TW_CONTAINER_REGISTRY__ = containerRegistry;
+}
+function hashContainer(tag, container, name) {
+  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);
+  }
+  return `tw-cq-${Math.abs(hash).toString(36).slice(0, 6)}`;
+}
+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) {
+  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}`);
+    }
+  }
+  return decls.join(";");
+}
+function buildContainerRules(id, container, containerName) {
+  const rules = [];
+  for (const [key, value] of Object.entries(container)) {
+    let minWidth;
+    let classes;
+    if (typeof value === "string") {
+      minWidth = CONTAINER_BREAKPOINTS[key] ?? key;
+      classes = value;
+    } else {
+      minWidth = value.minWidth ?? CONTAINER_BREAKPOINTS[key] ?? key;
+      classes = value.classes;
+    }
+    const css = layoutClassesToCss(classes);
+    if (!css) continue;
+    const query = containerName ? `@container ${containerName} (min-width: ${minWidth})` : `@container (min-width: ${minWidth})`;
+    rules.push(`${query}{.${id}{${css}}}`);
+  }
+  return rules.join("\n");
+}
+function injectContainerStyles(id, container, containerName) {
+  if (typeof document === "undefined") return;
+  const styleId = `tw-cq-${id}`;
+  if (document.getElementById(styleId)) return;
+  const css = buildContainerRules(id, container, containerName);
+  if (!css) return;
+  try {
+    const { batchedInject } = chunkY5D3E72P_cjs.__require("@tailwind-styled/runtime-css/batched");
+    for (const rule of css.split("\n").filter(Boolean)) batchedInject(rule);
+    return;
+  } catch {
+  }
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.setAttribute("data-tw-container", id);
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+function processContainer(tag, container, containerName) {
+  const id = hashContainer(tag, container, containerName);
+  if (!containerRegistry.has(id)) {
+    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,
+      containerName,
+      breakpoints,
+      cssInjected: false
+    });
+  }
+  injectContainerStyles(id, container, containerName);
+  containerRegistry.get(id).cssInjected = true;
+  return { containerClass: id, hasContainer: true };
+}
+function generateContainerCss(tag, container, containerName) {
+  const id = hashContainer(tag, container, containerName);
+  return buildContainerRules(id, container, containerName);
+}
+function getContainerRegistry() {
+  return containerRegistry;
+}
+
+// src/stateEngine.ts
+var stateRegistry = /* @__PURE__ */ new Map();
+if (typeof window !== "undefined") {
+  window.__TW_STATE_REGISTRY__ = stateRegistry;
+}
+function hashState(tag, state) {
+  const key = tag + JSON.stringify(Object.entries(state).sort());
+  let hash = 5381;
+  for (let i = 0; i < key.length; i++) {
+    hash = (hash << 5) + hash ^ key.charCodeAt(i);
+  }
+  return `tw-s-${Math.abs(hash).toString(36).slice(0, 6)}`;
+}
+var TW_MAP = {
+  // Display
+  hidden: "display:none",
+  block: "display:block",
+  flex: "display:flex",
+  inline: "display:inline",
+  "inline-flex": "display:inline-flex",
+  grid: "display:grid",
+  // Opacity
+  "opacity-0": "opacity:0",
+  "opacity-5": "opacity:0.05",
+  "opacity-10": "opacity:0.1",
+  "opacity-20": "opacity:0.2",
+  "opacity-25": "opacity:0.25",
+  "opacity-30": "opacity:0.3",
+  "opacity-40": "opacity:0.4",
+  "opacity-50": "opacity:0.5",
+  "opacity-60": "opacity:0.6",
+  "opacity-70": "opacity:0.7",
+  "opacity-75": "opacity:0.75",
+  "opacity-80": "opacity:0.8",
+  "opacity-90": "opacity:0.9",
+  "opacity-95": "opacity:0.95",
+  "opacity-100": "opacity:1",
+  // Cursor
+  "cursor-pointer": "cursor:pointer",
+  "cursor-not-allowed": "cursor:not-allowed",
+  "cursor-default": "cursor:default",
+  "cursor-wait": "cursor:wait",
+  "cursor-move": "cursor:move",
+  "cursor-grab": "cursor:grab",
+  "cursor-grabbing": "cursor:grabbing",
+  // Pointer events
+  "pointer-events-none": "pointer-events:none",
+  "pointer-events-auto": "pointer-events:auto",
+  // Scale
+  "scale-90": "transform:scale(0.9)",
+  "scale-95": "transform:scale(0.95)",
+  "scale-100": "transform:scale(1)",
+  "scale-105": "transform:scale(1.05)",
+  "scale-110": "transform:scale(1.1)",
+  // Translate
+  "translate-x-0": "transform:translateX(0)",
+  "translate-y-0": "transform:translateY(0)",
+  "-translate-x-1": "transform:translateX(-0.25rem)",
+  "-translate-y-1": "transform:translateY(-0.25rem)",
+  "translate-x-1": "transform:translateX(0.25rem)",
+  "translate-y-1": "transform:translateY(0.25rem)",
+  // Ring
+  ring: "box-shadow:0 0 0 3px rgba(59,130,246,0.5)",
+  "ring-2": "box-shadow:0 0 0 2px rgba(59,130,246,0.5)",
+  "ring-4": "box-shadow:0 0 0 4px rgba(59,130,246,0.5)",
+  "ring-inset": "box-shadow:inset 0 0 0 3px rgba(59,130,246,0.5)",
+  // Border
+  border: "border-width:1px",
+  "border-2": "border-width:2px",
+  "border-transparent": "border-color:transparent",
+  // Outline
+  "outline-none": "outline:2px solid transparent;outline-offset:2px",
+  outline: "outline:2px solid currentColor",
+  // Overflow
+  "overflow-hidden": "overflow:hidden",
+  "overflow-auto": "overflow:auto",
+  "overflow-scroll": "overflow:scroll",
+  // Text decoration
+  underline: "text-decoration-line:underline",
+  "no-underline": "text-decoration-line:none",
+  "line-through": "text-decoration-line:line-through",
+  // Font weight
+  "font-bold": "font-weight:700",
+  "font-semibold": "font-weight:600",
+  "font-medium": "font-weight:500",
+  "font-normal": "font-weight:400",
+  // Background colors (common)
+  "bg-transparent": "background-color:transparent",
+  "bg-white": "background-color:#fff",
+  "bg-black": "background-color:#000",
+  "bg-blue-500": "background-color:rgb(59,130,246)",
+  "bg-blue-600": "background-color:rgb(37,99,235)",
+  "bg-red-500": "background-color:rgb(239,68,68)",
+  "bg-green-500": "background-color:rgb(34,197,94)",
+  "bg-yellow-500": "background-color:rgb(234,179,8)",
+  "bg-zinc-900": "background-color:rgb(24,24,27)",
+  "bg-zinc-800": "background-color:rgb(39,39,42)",
+  // Text colors
+  "text-white": "color:#fff",
+  "text-black": "color:#000",
+  "text-blue-500": "color:rgb(59,130,246)",
+  "text-red-500": "color:rgb(239,68,68)",
+  "text-zinc-400": "color:rgb(161,161,170)",
+  "text-zinc-500": "color:rgb(113,113,122)"
+};
+function twClassesToCss(classes) {
+  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 = cls.match(/\[(.+)\]/)?.[1];
+      if (!val) continue;
+      if (cls.startsWith("bg-[")) decls.push(`background-color:${val}`);
+      else if (cls.startsWith("text-[")) decls.push(`color:${val}`);
+      else if (cls.startsWith("w-[")) decls.push(`width:${val}`);
+      else if (cls.startsWith("h-[")) decls.push(`height:${val}`);
+      else if (cls.startsWith("opacity-[")) decls.push(`opacity:${val}`);
+    }
+  }
+  return decls.join(";");
+}
+function injectStateStyles(id, state) {
+  if (typeof document === "undefined") return;
+  const styleId = `tw-state-${id}`;
+  if (document.getElementById(styleId)) return;
+  const rules = [];
+  for (const [stateName, classes] of Object.entries(state)) {
+    const css = twClassesToCss(classes);
+    if (css) {
+      rules.push(`.${id}[data-${stateName}="true"]{${css}}`);
+    }
+  }
+  if (rules.length === 0) return;
+  try {
+    const { batchedInject } = chunkY5D3E72P_cjs.__require("@tailwind-styled/runtime-css/batched");
+    for (const rule of rules) batchedInject(rule);
+    return;
+  } catch {
+  }
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.setAttribute("data-tw-state", id);
+  style.textContent = rules.join("\n");
+  document.head.appendChild(style);
+}
+function processState(tag, state) {
+  const id = hashState(tag, state);
+  const stateNames = Object.keys(state);
+  if (!stateRegistry.has(id)) {
+    stateRegistry.set(id, {
+      id,
+      tag,
+      states: stateNames,
+      cssInjected: false
+    });
+  }
+  injectStateStyles(id, state);
+  const entry = stateRegistry.get(id);
+  entry.cssInjected = true;
+  return { stateClass: id, hasState: true, stateNames };
+}
+function generateStateCss(tag, state) {
+  const id = hashState(tag, state);
+  const rules = [];
+  for (const [stateName, classes] of Object.entries(state)) {
+    const css = twClassesToCss(classes);
+    if (css) {
+      rules.push(`.${id}[data-${stateName}="true"]{${css}}`);
+    }
+  }
+  return rules.join("\n");
+}
+function getStateRegistry() {
+  return stateRegistry;
+}
+
+// src/createComponent.ts
+var ALWAYS_BLOCKED = /* @__PURE__ */ new Set(["base", "_ref", "state", "container", "containerName"]);
+function makeFilterProps(variantKeys) {
+  return function filterProps(props) {
+    const out = {};
+    for (const key in props) {
+      if (variantKeys.has(key)) continue;
+      if (key.startsWith("$")) continue;
+      if (ALWAYS_BLOCKED.has(key)) continue;
+      out[key] = props[key];
+    }
+    return out;
+  };
+}
+function resolveVariants(variants, props, defaults) {
+  const classes = [];
+  for (const key in variants) {
+    const val = props[key] ?? defaults[key];
+    if (val !== void 0 && variants[key][String(val)]) {
+      classes.push(variants[key][String(val)]);
+    }
+  }
+  return classes.join(" ");
+}
+function resolveCompound(compounds, props) {
+  const classes = [];
+  for (const compound of compounds) {
+    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) {
+  const isStatic = typeof config === "string";
+  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?.stateClass, containerResult?.containerClass].filter(Boolean).join(" ");
+  const variantKeySet = new Set(Object.keys(variants));
+  const filterProps = makeFilterProps(variantKeySet);
+  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 { 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);
+    return Component2;
+  }
+  const Component = React__default.default.forwardRef((props, ref) => {
+    const { className } = props;
+    const variantClasses = resolveVariants(variants, props, defaultVariants);
+    const compoundClasses = resolveCompound(compoundVariants, 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);
+  return Component;
+}
+function attachExtend(Component, originalTag, base, config) {
+  Component.extend = (strings, ..._exprs) => {
+    const extra = strings.raw.join("").trim().replace(/\s+/g, " ");
+    const merged = tailwindMerge.twMerge(base, extra);
+    return createComponent(
+      originalTag,
+      typeof config === "string" ? merged : { ...config, base: merged }
+    );
+  };
+  Component.withVariants = (newConfig) => {
+    const existing = typeof config === "object" ? config : {};
+    return createComponent(originalTag, {
+      ...existing,
+      base,
+      variants: { ...existing.variants ?? void 0, ...newConfig.variants ?? void 0 },
+      compoundVariants: [
+        ...existing.compoundVariants ?? [],
+        ...newConfig.compoundVariants ?? []
+      ],
+      defaultVariants: {
+        ...existing.defaultVariants ?? void 0,
+        ...newConfig.defaultVariants ?? void 0
+      }
+    });
+  };
+  Component.animate = async (opts) => {
+    try {
+      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 : { ...config, base: merged }
+      );
+    } catch {
+      console.warn("[tailwind-styled-v4] .animate() requires @tailwind-styled/animate");
+      return Component;
+    }
+  };
+}
+function cv(config) {
+  const { base = "", variants = {}, compoundVariants = [], defaultVariants = {} } = config;
+  return (props = {}) => {
+    const classes = [base];
+    for (const key in variants) {
+      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 { class: cls, ...conditions } = compound;
+      const match = Object.entries(conditions).every(([k, v]) => props[k] === v);
+      if (match) classes.push(cls);
+    }
+    if (props.className) classes.push(props.className);
+    return tailwindMerge.twMerge(...classes);
+  };
+}
+function cn(...inputs) {
+  return inputs.filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+}
+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 = {};
+var _subscribers = /* @__PURE__ */ new Set();
+var _styleEl = null;
+if (typeof window !== "undefined") {
+  window.__TW_TOKEN_ENGINE__ = {
+    getTokens: () => _currentTokens,
+    setToken: (name, value) => setToken(name, value),
+    subscribe: (fn) => subscribeTokens(fn)
+  };
+}
+function tokenVar(name) {
+  const normalized = name.replace(/[^a-zA-Z0-9-]/g, "-").toLowerCase();
+  return `--tw-token-${normalized}`;
+}
+function tokenRef(name) {
+  return `var(${tokenVar(name)})`;
+}
+function buildRootCss(tokens) {
+  const vars = Object.entries(tokens).map(([name, value]) => `  ${tokenVar(name)}: ${value};`).join("\n");
+  return `:root {
+${vars}
+}`;
+}
+function syncStyleEl() {
+  if (typeof document === "undefined") return;
+  if (!_styleEl) {
+    _styleEl = document.createElement("style");
+    _styleEl.id = "tw-live-tokens";
+    _styleEl.setAttribute("data-tw-tokens", "true");
+    document.head.appendChild(_styleEl);
+  }
+  _styleEl.textContent = buildRootCss(_currentTokens);
+}
+function notifySubscribers() {
+  const snapshot = { ..._currentTokens };
+  for (const sub of _subscribers) {
+    try {
+      sub(snapshot);
+    } catch {
+    }
+  }
+}
+function liveToken(tokens) {
+  _currentTokens = { ..._currentTokens, ...tokens };
+  syncStyleEl();
+  const vars = {};
+  for (const name of Object.keys(tokens)) {
+    vars[name] = tokenRef(name);
+  }
+  return {
+    vars,
+    get(name) {
+      return _currentTokens[name];
+    },
+    set(name, value) {
+      setToken(name, value);
+    },
+    setAll(newTokens) {
+      setTokens(newTokens);
+    },
+    snapshot() {
+      return { ..._currentTokens };
+    }
+  };
+}
+function setToken(name, value) {
+  _currentTokens = { ..._currentTokens, [name]: value };
+  if (typeof document !== "undefined") {
+    document.documentElement.style.setProperty(tokenVar(name), value);
+  }
+  notifySubscribers();
+}
+function setTokens(tokens) {
+  _currentTokens = { ..._currentTokens, ...tokens };
+  if (typeof document !== "undefined") {
+    const root = document.documentElement;
+    for (const [name, value] of Object.entries(tokens)) {
+      root.style.setProperty(tokenVar(name), value);
+    }
+  }
+  notifySubscribers();
+}
+function applyTokenSet(tokens) {
+  if (typeof document !== "undefined") {
+    const root = document.documentElement;
+    for (const name of Object.keys(_currentTokens)) {
+      if (!(name in tokens)) {
+        root.style.removeProperty(tokenVar(name));
+      }
+    }
+  }
+  _currentTokens = { ...tokens };
+  syncStyleEl();
+  notifySubscribers();
+}
+function getToken(name) {
+  return _currentTokens[name];
+}
+function getTokens() {
+  return { ..._currentTokens };
+}
+function subscribeTokens(fn) {
+  _subscribers.add(fn);
+  return () => {
+    _subscribers.delete(fn);
+  };
+}
+function generateTokenCssString() {
+  return buildRootCss(_currentTokens);
+}
+function createUseTokens() {
+  let useState, useEffect;
+  try {
+    const react = chunkY5D3E72P_cjs.__require("react");
+    useState = react.useState;
+    useEffect = react.useEffect;
+  } catch {
+    return null;
+  }
+  return function useTokens() {
+    const [tokens, setTokens_] = useState({
+      ..._currentTokens
+    });
+    useEffect(() => {
+      setTokens_({ ..._currentTokens });
+      const unsub = subscribeTokens((t2) => setTokens_({ ...t2 }));
+      return unsub;
+    }, []);
+    return tokens;
+  };
+}
+
+// src/styledSystem.ts
+function tokenVarName(prefix, group, name) {
+  return `--${prefix}-${group}-${name}`;
+}
+function tokenVarRef(prefix, group, name) {
+  return `var(${tokenVarName(prefix, group, name)})`;
+}
+function resolveTokenRef(tokens, prefix, value) {
+  if (value.startsWith("token:")) {
+    const path = value.slice(6);
+    const [group, name] = path.split(".");
+    if (group && name && tokens[group]?.[name] !== void 0) {
+      return tokenVarRef(prefix, group, name);
+    }
+  }
+  return value;
+}
+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");
+  document.head.appendChild(style);
+}
+function resolveComponentConfig(config, tokens, prefix) {
+  const resolveStr = (s) => resolveTokenRef(tokens, prefix, s);
+  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(config.variants ?? {})) {
+    variants[variantKey] = {};
+    for (const [optKey, classes] of Object.entries(variantMap)) {
+      variants[variantKey][optKey] = classes.split(" ").map(resolveStr).join(" ");
+    }
+  }
+  const compoundVariants = (config.compoundVariants ?? []).map((cv2) => {
+    const { class: cls, ...rest } = cv2;
+    return { class: resolveStr(cls), ...rest };
+  });
+  return {
+    base: mergedBase,
+    variants,
+    compoundVariants,
+    defaultVariants: config.defaultVariants ?? {},
+    state: config.state,
+    container: config.container,
+    containerName: config.containerName
+  };
+}
+function createStyledSystem(config) {
+  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);
+  }
+  const resolvedConfigs = /* @__PURE__ */ new Map();
+  for (const [name, compCfg] of Object.entries(componentDefs)) {
+    resolvedConfigs.set(
+      name,
+      resolveComponentConfig(compCfg, tokens, prefix)
+    );
+  }
+  const factories = {};
+  for (const [name, compCfg] of Object.entries(componentDefs)) {
+    const tag = compCfg.tag ?? "div";
+    factories[name] = (overrides) => {
+      const baseResolved = resolvedConfigs.get(name);
+      if (!overrides || Object.keys(overrides).length === 0) {
+        return createComponent(tag, baseResolved);
+      }
+      const overrideResolved = resolveComponentConfig(
+        overrides,
+        tokens,
+        prefix
+      );
+      const merged = {
+        base: [baseResolved.base, overrideResolved.base].filter(Boolean).join(" "),
+        variants: {
+          ...baseResolved.variants ?? void 0,
+          ...overrideResolved.variants ?? void 0
+        },
+        compoundVariants: [
+          ...baseResolved.compoundVariants ?? [],
+          ...overrideResolved.compoundVariants ?? []
+        ],
+        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);
+    };
+  }
+  function token(path) {
+    const [group, name] = path.split(".");
+    if (!group || !name) return path;
+    return tokenVarRef(prefix, group, name);
+  }
+  function rawToken(path) {
+    const [group, name] = path.split(".");
+    if (!group || !name) return void 0;
+    return tokens[group]?.[name];
+  }
+  function setTokens2(updates) {
+    if (typeof document === "undefined") return;
+    const styleId = `__tw-sys-tokens-${prefix}`;
+    let style = document.getElementById(styleId);
+    if (!style) {
+      style = document.createElement("style");
+      style.id = styleId;
+      document.head.appendChild(style);
+    }
+    for (const [group, map] of Object.entries(updates)) {
+      if (!tokens[group]) continue;
+      for (const [name, value] of Object.entries(map)) {
+        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");
+  }
+  function getConfig(name) {
+    return resolvedConfigs.get(name);
+  }
+  return Object.assign(factories, {
+    token,
+    rawToken,
+    setTokens: setTokens2,
+    getConfig,
+    tokens
+  });
+}
+
+// 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 ?? "";
+    return acc + str + String(exprStr);
+  }, "").split("\n").map((l) => l.trim()).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+}
+function makeTag(tag) {
+  return ((stringsOrConfig, ...exprs) => {
+    if (!Array.isArray(stringsOrConfig) && typeof stringsOrConfig === "object" && stringsOrConfig !== null && !("raw" in stringsOrConfig)) {
+      return createComponent(tag, stringsOrConfig);
+    }
+    const classes = parseTemplate(stringsOrConfig, exprs);
+    return createComponent(tag, classes);
+  });
+}
+var HTML_TAGS = [
+  "div",
+  "section",
+  "article",
+  "aside",
+  "header",
+  "footer",
+  "main",
+  "nav",
+  "figure",
+  "figcaption",
+  "details",
+  "summary",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "strong",
+  "em",
+  "b",
+  "i",
+  "s",
+  "u",
+  "small",
+  "mark",
+  "abbr",
+  "cite",
+  "code",
+  "kbd",
+  "samp",
+  "var",
+  "time",
+  "address",
+  "blockquote",
+  "q",
+  "del",
+  "ins",
+  "sub",
+  "sup",
+  "ul",
+  "ol",
+  "li",
+  "dl",
+  "dt",
+  "dd",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "th",
+  "td",
+  "caption",
+  "colgroup",
+  "col",
+  "img",
+  "picture",
+  "video",
+  "audio",
+  "source",
+  "track",
+  "canvas",
+  "svg",
+  "path",
+  "circle",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "g",
+  "defs",
+  "use",
+  "symbol",
+  "form",
+  "input",
+  "textarea",
+  "select",
+  "option",
+  "optgroup",
+  "button",
+  "label",
+  "fieldset",
+  "legend",
+  "output",
+  "progress",
+  "meter",
+  "datalist",
+  "a",
+  "area",
+  "map",
+  "iframe",
+  "embed",
+  "object",
+  "pre",
+  "hr",
+  "br",
+  "wbr",
+  "dialog",
+  "menu",
+  "template",
+  "slot"
+];
+function makeServerTag(tag) {
+  const baseFactory = makeTag(tag);
+  if (typeof window !== "undefined" && process.env.NODE_ENV !== "production") {
+    return ((...args) => {
+      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.`
+      );
+      return baseFactory(...args);
+    });
+  }
+  return baseFactory;
+}
+var serverFactories = {};
+for (const tag of HTML_TAGS) {
+  serverFactories[tag] = makeServerTag(tag);
+}
+var server = serverFactories;
+var tagFactories = {};
+for (const tag of HTML_TAGS) {
+  tagFactories[tag] = makeTag(tag);
+}
+function twCallable(component) {
+  return makeTag(component);
+}
+var tw = Object.assign(twCallable, tagFactories, {
+  server
+});
+
+// src/twTheme.ts
+function cssVar(varName, fallback) {
+  const name = varName.startsWith("--") ? varName : `--${varName}`;
+  return fallback ? `var(${name}, ${fallback})` : `var(${name})`;
+}
+function twVar(property, varName, fallback) {
+  const ref = fallback ? `var(--${varName},${fallback})` : `var(--${varName})`;
+  return `${property}-[${ref}]`;
+}
+var t = {
+  /** Background color from CSS variable: t.bg("color-primary") → "bg-[var(--color-primary)]" */
+  bg: (v, fb) => twVar("bg", v, fb),
+  /** Text color from CSS variable */
+  text: (v, fb) => twVar("text", v, fb),
+  /** Border color from CSS variable */
+  border: (v, fb) => twVar("border", v, fb),
+  /** Ring color from CSS variable */
+  ring: (v, fb) => twVar("ring", v, fb),
+  /** Outline color from CSS variable */
+  outline: (v, fb) => twVar("outline", v, fb),
+  /** Fill color from CSS variable (SVG) */
+  fill: (v, fb) => twVar("fill", v, fb),
+  /** Stroke color from CSS variable (SVG) */
+  stroke: (v, fb) => twVar("stroke", v, fb),
+  /** Font family from CSS variable */
+  font: (v, fb) => twVar("font", v, fb),
+  /** Shadow from CSS variable */
+  shadow: (v, fb) => twVar("shadow", v, fb),
+  /** Any arbitrary property from CSS variable */
+  var: (property, v, fb) => twVar(property, v, fb)
+};
+function createTheme(tokenMap) {
+  const resolved = {};
+  for (const group in tokenMap) {
+    resolved[group] = {};
+    const tokens = tokenMap[group];
+    for (const name in tokens) {
+      const varName = tokens[name];
+      const prefix = getGroupPrefix(group);
+      resolved[group][name] = prefix ? twVar(prefix, varName) : cssVar(varName);
+    }
+  }
+  return resolved;
+}
+function getGroupPrefix(group) {
+  const map = {
+    colors: "bg",
+    // default to bg; user can use t.text() for text colors
+    fonts: "font",
+    spacing: "p",
+    shadows: "shadow"
+  };
+  return map[group] ?? "";
+}
+var v4Tokens = {
+  /** bg-[var(--color-background)] */
+  bg: twVar("bg", "color-background"),
+  /** text-[var(--color-foreground)] */
+  text: twVar("text", "color-foreground"),
+  /** font-[var(--font-sans)] */
+  fontSans: twVar("font", "font-sans"),
+  /** font-[var(--font-mono)] */
+  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
+//# sourceMappingURL=index.cjs.map