tailwind-styled-v4 1.0.1 → 4.0.0

package/dist/index.cjs

@@ -0,0 +1,1058 @@
+'use strict';
+
+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 */
+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 = {
+  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 != null ? 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) {
+  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];
+      if (val) decls.push(`width:${val}`);
+    } else if (cls.startsWith("max-w-[")) {
+      const val = (_b = cls.match(/\[(.+)\]/)) == null ? void 0 : _b[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;
+      classes = value;
+    } else {
+      minWidth = (_c = (_b = value.minWidth) != null ? _b : CONTAINER_BREAKPOINTS[key]) != null ? _c : 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 } = __require("@tailwind-styled/runtime-css/batched");
+    for (const rule of css.split("\n").filter(Boolean)) batchedInject(rule);
+    return;
+  } catch (e) {
+  }
+  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]) => {
+      var _a;
+      return {
+        minWidth: (_a = CONTAINER_BREAKPOINTS[key]) != null ? _a : 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) {
+  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];
+      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 } = __require("@tailwind-styled/runtime-css/batched");
+    for (const rule of rules) batchedInject(rule);
+    return;
+  } catch (e) {
+  }
+  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) {
+  var _a;
+  const classes = [];
+  for (const key in variants) {
+    const val = (_a = props[key]) != null ? _a : 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 _a = compound, { class: cls } = _a, conditions = __objRest(_a, ["class"]);
+    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 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 variantKeySet = new Set(Object.keys(variants));
+  const filterProps = makeFilterProps(variantKeySet);
+  const tagStr = typeof tag === "string" ? tag : (_e = tag.displayName) != null ? _e : "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)), {
+        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, __spreadProps(__spreadValues({
+      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 : __spreadProps(__spreadValues({}, 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), {
+      base,
+      variants: __spreadValues(__spreadValues({}, (_a = existing.variants) != null ? _a : {}), (_b = newConfig.variants) != null ? _b : {}),
+      compoundVariants: [
+        ...(_c = existing.compoundVariants) != null ? _c : [],
+        ...(_d = newConfig.compoundVariants) != null ? _d : []
+      ],
+      defaultVariants: __spreadValues(__spreadValues({}, (_e = existing.defaultVariants) != null ? _e : {}), (_f = newConfig.defaultVariants) != null ? _f : {})
+    }));
+  };
+  Component.animate = (opts) => {
+    try {
+      const { animate: animateFn } = __require("@tailwind-styled/animate");
+      const animClass = animateFn(opts);
+      const merged = tailwindMerge.twMerge(base, animClass);
+      return createComponent(
+        originalTag,
+        typeof config === "string" ? merged : __spreadProps(__spreadValues({}, config), { base: merged })
+      );
+    } catch (e) {
+      console.warn("[tailwind-styled-v4] .animate() requires @tailwind-styled/animate");
+      return Component;
+    }
+  };
+}
+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];
+      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 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;
+
+// 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 = __spreadValues({}, _currentTokens);
+  for (const sub of _subscribers) {
+    try {
+      sub(snapshot);
+    } catch (_e) {
+    }
+  }
+}
+function liveToken(tokens) {
+  _currentTokens = __spreadValues(__spreadValues({}, _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 __spreadValues({}, _currentTokens);
+    }
+  };
+}
+function setToken(name, value) {
+  _currentTokens = __spreadProps(__spreadValues({}, _currentTokens), { [name]: value });
+  if (typeof document !== "undefined") {
+    document.documentElement.style.setProperty(tokenVar(name), value);
+  }
+  notifySubscribers();
+}
+function setTokens(tokens) {
+  _currentTokens = __spreadValues(__spreadValues({}, _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 = __spreadValues({}, tokens);
+  syncStyleEl();
+  notifySubscribers();
+}
+function getToken(name) {
+  return _currentTokens[name];
+}
+function getTokens() {
+  return __spreadValues({}, _currentTokens);
+}
+function subscribeTokens(fn) {
+  _subscribers.add(fn);
+  return () => {
+    _subscribers.delete(fn);
+  };
+}
+function generateTokenCssString() {
+  return buildRootCss(_currentTokens);
+}
+function createUseTokens() {
+  let useState, useEffect;
+  try {
+    const react = __require("react");
+    useState = react.useState;
+    useEffect = react.useEffect;
+  } catch (e) {
+    return null;
+  }
+  return function useTokens() {
+    const [tokens, setTokens_] = useState(__spreadValues({}, _currentTokens));
+    useEffect(() => {
+      setTokens_(__spreadValues({}, _currentTokens));
+      const unsub = subscribeTokens((t2) => setTokens_(__spreadValues({}, 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) {
+  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) {
+      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) {
+  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 mergedBase = [systemBase, base].filter(Boolean).join(" ");
+  const variants = {};
+  for (const [variantKey, variantMap] of Object.entries((_c = config.variants) != null ? _c : {})) {
+    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);
+  });
+  return {
+    base: mergedBase,
+    variants,
+    compoundVariants,
+    defaultVariants: (_e = config.defaultVariants) != null ? _e : {},
+    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 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 = (_d = compCfg.tag) != null ? _d : "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);
+      }
+      const overrideResolved = resolveComponentConfig(
+        overrides,
+        tokens,
+        prefix
+      );
+      const merged = {
+        base: [baseResolved.base, overrideResolved.base].filter(Boolean).join(" "),
+        variants: __spreadValues(__spreadValues({}, (_a2 = baseResolved.variants) != null ? _a2 : {}), (_b2 = overrideResolved.variants) != null ? _b2 : {}),
+        compoundVariants: [
+          ...(_c2 = baseResolved.compoundVariants) != null ? _c2 : [],
+          ...(_d2 = overrideResolved.compoundVariants) != null ? _d2 : []
+        ],
+        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
+      };
+      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) {
+    var _a2;
+    const [group, name] = path.split(".");
+    if (!group || !name) return void 0;
+    return (_a2 = tokens[group]) == null ? void 0 : _a2[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/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 : "";
+    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) => {
+      var _a;
+      const tagName = typeof tag === "string" ? tag : (_a = tag.displayName) != null ? _a : "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) {
+  var _a;
+  const map = {
+    colors: "bg",
+    // default to bg; user can use t.text() for text colors
+    fonts: "font",
+    spacing: "p",
+    shadows: "shadow"
+  };
+  return (_a = map[group]) != null ? _a : "";
+}
+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")
+};
+
+exports.applyTokenSet = applyTokenSet;
+exports.cn = cn;
+exports.containerRef = tokenRef;
+exports.createComponent = createComponent;
+exports.createStyledSystem = createStyledSystem;
+exports.createTheme = createTheme;
+exports.createUseTokens = createUseTokens;
+exports.cssVar = cssVar;
+exports.cv = cv;
+exports.cx = cx;
+exports.cxm = cxm;
+exports.generateContainerCss = generateContainerCss;
+exports.generateStateCss = generateStateCss;
+exports.generateTokenCssString = generateTokenCssString;
+exports.getContainerRegistry = getContainerRegistry;
+exports.getStateRegistry = getStateRegistry;
+exports.getToken = getToken;
+exports.getTokens = getTokens;
+exports.liveToken = liveToken;
+exports.processContainer = processContainer;
+exports.processState = processState;
+exports.server = server;
+exports.setToken = setToken;
+exports.setTokens = setTokens;
+exports.subscribeTokens = subscribeTokens;
+exports.t = t;
+exports.tokenRef = tokenRef;
+exports.tokenVar = tokenVar;
+exports.tw = tw;
+exports.twVar = twVar;
+exports.v4Tokens = v4Tokens;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map