tailwind-styled-v4 5.0.10 → 5.0.11

package/dist/index.browser.mjs

@@ -0,0 +1,1512 @@
+import React3 from 'react';
+
+/* tailwind-styled-v4 v5.0.4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+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');
+});
+
+// packages/domain/core/src/native.browser.ts
+var getNativeBinding = () => null;
+
+// packages/domain/core/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;
+}
+var _hashContainerCache = /* @__PURE__ */ new Map();
+function hashContainer(tag, container, name) {
+  const sortedKey = tag + (name ?? "") + JSON.stringify(Object.entries(container).sort());
+  const cached = _hashContainerCache.get(sortedKey);
+  if (cached) return cached;
+  let id;
+  try {
+    const native = getNativeBinding();
+    if (native?.hashContent) ; else {
+      throw new Error("no hashContent");
+    }
+  } catch {
+    const hash = sortedKey.split("").reduce((h, char) => (h << 5) + h ^ char.charCodeAt(0), 5381);
+    id = `tw-cq-${Math.abs(hash).toString(36).slice(0, 6)}`;
+  }
+  _hashContainerCache.set(sortedKey, id);
+  return id;
+}
+var LAYOUT_MAP = {
+  "flex-col": "flex-direction:column",
+  "flex-row": "flex-direction:row",
+  "flex-wrap": "flex-wrap:wrap",
+  "flex-nowrap": "flex-wrap:nowrap",
+  "flex-1": "flex:1 1 0%",
+  hidden: "display:none",
+  block: "display:block",
+  flex: "display:flex",
+  grid: "display:grid",
+  "grid-cols-1": "grid-template-columns:repeat(1,minmax(0,1fr))",
+  "grid-cols-2": "grid-template-columns:repeat(2,minmax(0,1fr))",
+  "grid-cols-3": "grid-template-columns:repeat(3,minmax(0,1fr))",
+  "grid-cols-4": "grid-template-columns:repeat(4,minmax(0,1fr))",
+  "grid-cols-6": "grid-template-columns:repeat(6,minmax(0,1fr))",
+  "grid-cols-12": "grid-template-columns:repeat(12,minmax(0,1fr))",
+  "text-sm": "font-size:0.875rem;line-height:1.25rem",
+  "text-base": "font-size:1rem;line-height:1.5rem",
+  "text-lg": "font-size:1.125rem;line-height:1.75rem",
+  "text-xl": "font-size:1.25rem;line-height:1.75rem",
+  "text-2xl": "font-size:1.5rem;line-height:2rem",
+  "text-xs": "font-size:0.75rem;line-height:1rem",
+  "p-2": "padding:0.5rem",
+  "p-4": "padding:1rem",
+  "p-6": "padding:1.5rem",
+  "p-8": "padding:2rem",
+  "px-2": "padding-left:0.5rem;padding-right:0.5rem",
+  "px-4": "padding-left:1rem;padding-right:1rem",
+  "px-6": "padding-left:1.5rem;padding-right:1.5rem",
+  "py-2": "padding-top:0.5rem;padding-bottom:0.5rem",
+  "py-4": "padding-top:1rem;padding-bottom:1rem",
+  "gap-2": "gap:0.5rem",
+  "gap-4": "gap:1rem",
+  "gap-6": "gap:1.5rem",
+  "gap-8": "gap:2rem",
+  "w-full": "width:100%",
+  "w-1/2": "width:50%",
+  "w-1/3": "width:33.333333%",
+  "w-2/3": "width:66.666667%",
+  "max-w-sm": "max-width:24rem",
+  "max-w-md": "max-width:28rem",
+  "max-w-lg": "max-width:32rem",
+  "max-w-xl": "max-width:36rem",
+  "items-center": "align-items:center",
+  "items-start": "align-items:flex-start",
+  "items-end": "align-items:flex-end",
+  "justify-center": "justify-content:center",
+  "justify-between": "justify-content:space-between",
+  "justify-start": "justify-content:flex-start",
+  "justify-end": "justify-content:flex-end"
+};
+function layoutClassesToCss(classes) {
+  try {
+    const native = getNativeBinding();
+    if (native?.layoutClassesToCss) ;
+  } catch {
+  }
+  const decls = [];
+  for (const cls of classes.trim().split(/\s+/)) {
+    if (LAYOUT_MAP[cls]) decls.push(LAYOUT_MAP[cls]);
+    else if (cls.startsWith("w-[")) {
+      const val = cls.match(/\[(.+)\]/)?.[1];
+      if (val) decls.push(`width:${val}`);
+    } else if (cls.startsWith("max-w-[")) {
+      const val = cls.match(/\[(.+)\]/)?.[1];
+      if (val) decls.push(`max-width:${val}`);
+    }
+  }
+  return decls.join(";");
+}
+function buildContainerRules(id, container, containerName) {
+  const rules = Object.entries(container).map(([key, value]) => {
+    const minWidth = typeof value === "string" ? CONTAINER_BREAKPOINTS[key] ?? key : value.minWidth ?? CONTAINER_BREAKPOINTS[key] ?? key;
+    const classes = typeof value === "string" ? value : value.classes;
+    const css = layoutClassesToCss(classes);
+    if (!css) return null;
+    const query = containerName ? `@container ${containerName} (min-width: ${minWidth})` : `@container (min-width: ${minWidth})`;
+    return `${query}{.${id}{${css}}}`;
+  }).filter(Boolean);
+  return rules.join("\n");
+}
+var _cqBatchedInjectFn = null;
+try {
+  const mod = __require("@tailwind-styled/runtime-css/batched");
+  if (typeof mod?.batchedInject === "function") _cqBatchedInjectFn = mod.batchedInject;
+} catch {
+}
+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;
+  if (_cqBatchedInjectFn) {
+    for (const rule of css.split("\n").filter(Boolean)) _cqBatchedInjectFn(rule);
+    return;
+  }
+  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);
+  try {
+    const native = getNativeBinding();
+    if (native?.buildContainerRules) ;
+  } catch {
+  }
+  return buildContainerRules(id, container, containerName);
+}
+function getContainerRegistry() {
+  return containerRegistry;
+}
+
+// packages/domain/core/src/merge.ts
+function normalizeClassInput(classLists) {
+  const result = [];
+  for (let i = 0; i < classLists.length; i++) {
+    const v = classLists[i];
+    if (!v) continue;
+    const s = String(v).trim();
+    if (s.length > 0) result.push(s);
+  }
+  return result;
+}
+function createTwMerge(_options = {}) {
+  return function twMerge2(...classLists) {
+    const clean = normalizeClassInput(classLists);
+    if (clean.length === 0) return "";
+    try {
+      const native = getNativeBinding();
+      if (native?.twMergeMany) ;
+    } catch {
+    }
+    return clean.join(" ");
+  };
+}
+var twMerge = createTwMerge();
+function mergeWithRules(rules, ...classLists) {
+  const base = twMerge(...classLists);
+  const classes = Object.values(rules).reduce(
+    (acc, rule) => twMerge(rule(acc)).split(/\s+/).filter(Boolean),
+    base.split(/\s+/).filter(Boolean)
+  );
+  return classes.join(" ");
+}
+
+// packages/domain/core/src/stateEngine.ts
+var stateRegistry = /* @__PURE__ */ new Map();
+if (typeof window !== "undefined") {
+  window.__TW_STATE_REGISTRY__ = stateRegistry;
+}
+var _hashStateCache = /* @__PURE__ */ new Map();
+function hashState(tag, state) {
+  const sortedKey = tag + JSON.stringify(Object.entries(state).sort());
+  const cached = _hashStateCache.get(sortedKey);
+  if (cached) return cached;
+  let id;
+  try {
+    const native = getNativeBinding();
+    if (native?.hashContent) ; else {
+      throw new Error("no hashContent");
+    }
+  } catch {
+    const hash = sortedKey.split("").reduce((h, char) => (h << 5) + h ^ char.charCodeAt(0), 5381);
+    id = `tw-s-${Math.abs(hash).toString(36).slice(0, 6)}`;
+  }
+  _hashStateCache.set(sortedKey, id);
+  return id;
+}
+var _twClassesToCssCache = /* @__PURE__ */ new Map();
+function twClassesToCss(classes) {
+  const cached = _twClassesToCssCache.get(classes);
+  if (cached !== void 0) return cached;
+  {
+    throw new Error("FATAL: Native binding 'twClassesToCss' is required but not available.");
+  }
+}
+var _batchedInjectFn = null;
+try {
+  const mod = __require("@tailwind-styled/runtime-css/batched");
+  if (typeof mod?.batchedInject === "function") _batchedInjectFn = mod.batchedInject;
+} catch {
+}
+function injectStateStyles(id, state) {
+  if (typeof document === "undefined") return;
+  const styleId = `tw-state-${id}`;
+  if (document.getElementById(styleId)) return;
+  const rules = Object.entries(state).map(([stateName, classes]) => {
+    const css = twClassesToCss(classes);
+    return css ? `.${id}[data-${stateName}="true"]{${css}}` : null;
+  }).filter(Boolean);
+  if (rules.length === 0) return;
+  if (_batchedInjectFn) {
+    for (const rule of rules) _batchedInjectFn(rule);
+    return;
+  }
+  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 = Object.entries(state).map(([stateName, classes]) => {
+    const css = twClassesToCss(classes);
+    return css ? `.${id}[data-${stateName}="true"]{${css}}` : null;
+  }).filter(Boolean);
+  return rules.join("\n");
+}
+function getStateRegistry() {
+  return stateRegistry;
+}
+
+// packages/domain/core/src/createComponent.ts
+var ALWAYS_BLOCKED = /* @__PURE__ */ new Set(["base", "_ref", "state", "container", "containerName"]);
+var _templateParseCache = /* @__PURE__ */ new Map();
+var _statesLookupCache = /* @__PURE__ */ new Map();
+function _getParsedTemplate(template) {
+  const cached = _templateParseCache.get(template);
+  if (cached) return cached;
+  let result;
+  try {
+    const native = getNativeBinding();
+    if (native?.parseSubcomponentBlocksNapi) ;
+  } catch {
+  }
+  const subMap = /* @__PURE__ */ new Map();
+  const regex = /((?:\[[a-zA-Z][a-zA-Z0-9_-]*\]|[a-zA-Z][a-zA-Z0-9_-]*))\s*\{([^}]*)\}/g;
+  let match;
+  while ((match = regex.exec(template)) !== null) {
+    const rawName = match[1];
+    const name = rawName.startsWith("[") ? rawName.slice(1, -1) : rawName;
+    const classes = match[2].trim().replace(/\s+/g, " ");
+    if (classes) subMap.set(name, classes);
+  }
+  const baseClasses = template.replace(/(?:\[[a-zA-Z][a-zA-Z0-9_-]*\]|[a-zA-Z][a-zA-Z0-9_-]*)\s*\{[^}]*\}/g, "").replace(/\s+/g, " ").trim();
+  result = { baseClasses, subMap };
+  _templateParseCache.set(template, result);
+  return result;
+}
+function parseSubComponentBlocks(template) {
+  return _getParsedTemplate(template).subMap;
+}
+function extractBaseClasses(template) {
+  return _getParsedTemplate(template).baseClasses;
+}
+var SEMANTIC_HTML_TAGS = /* @__PURE__ */ new Set([
+  "article",
+  "aside",
+  "details",
+  "figcaption",
+  "figure",
+  "footer",
+  "header",
+  "main",
+  "mark",
+  "nav",
+  "section",
+  "summary",
+  "time",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "ul",
+  "ol",
+  "li",
+  "dl",
+  "dt",
+  "dd",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "th",
+  "td",
+  "form",
+  "fieldset",
+  "legend",
+  "label",
+  "a",
+  "button",
+  "img",
+  "span",
+  "div",
+  "blockquote",
+  "pre",
+  "code",
+  "em",
+  "strong",
+  "small"
+]);
+function parseSubKey(key) {
+  const colonIdx = key.indexOf(":");
+  if (colonIdx !== -1) {
+    const tag = key.slice(0, colonIdx).trim();
+    const componentName = key.slice(colonIdx + 1).trim();
+    return { tag: tag || "span", componentName: componentName || tag };
+  }
+  const isSemanticTag = SEMANTIC_HTML_TAGS.has(key);
+  return { tag: isSemanticTag ? key : "span", componentName: key };
+}
+function createSubComponentAccessor(parentDisplayName, name, classes, tag = "span", asChild = false) {
+  const SubComponent = ({
+    children,
+    className
+  }) => {
+    const mergedClass = className ? `${classes} ${className}` : classes;
+    if (asChild && React3.isValidElement(children)) {
+      const child = React3.Children.only(children);
+      return React3.cloneElement(child, {
+        className: child.props.className ? `${mergedClass} ${child.props.className}` : mergedClass
+      });
+    }
+    return React3.createElement(tag, { className: mergedClass }, children);
+  };
+  SubComponent.displayName = `${parentDisplayName}[${name}]`;
+  return SubComponent;
+}
+function registerSubComponents(component, template, configSub) {
+  const displayName = component.displayName ?? "tw";
+  const map = component;
+  if (configSub) {
+    for (const [key, value] of Object.entries(configSub)) {
+      if (typeof value === "string") {
+        const { tag, componentName } = parseSubKey(key);
+        map[componentName] = createSubComponentAccessor(
+          displayName,
+          componentName,
+          value.trim().replace(/\s+/g, " "),
+          tag
+        );
+      } else {
+        const tag = key;
+        for (const [componentName, classes] of Object.entries(value)) {
+          map[componentName] = createSubComponentAccessor(
+            displayName,
+            componentName,
+            classes.trim().replace(/\s+/g, " "),
+            tag
+          );
+        }
+      }
+    }
+  }
+  const blocks = parseSubComponentBlocks(template);
+  for (const [name, classes] of blocks) {
+    if (!(name in map)) {
+      map[name] = createSubComponentAccessor(displayName, name, classes);
+    }
+  }
+}
+function normalizeClassName(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function makeFilterProps(variantKeys, stateKeys = /* @__PURE__ */ new Set()) {
+  return function filterProps(props) {
+    const out = {};
+    for (const key in props) {
+      if (variantKeys.has(key)) continue;
+      if (stateKeys.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 variantKeys = Object.keys(variants);
+  const cleanProps = {};
+  for (const k of variantKeys) {
+    const v = props[k];
+    if (v !== void 0 && v !== null) cleanProps[k] = String(v);
+  }
+  try {
+    const binding = getNativeBinding();
+    if (binding?.resolveSimpleVariants) ;
+  } catch {
+  }
+  const resolved = { ...defaults, ...cleanProps };
+  const classes = [];
+  const sortedVariantEntries = Object.entries(variants).sort(([a], [b]) => a.localeCompare(b));
+  for (const [variantKey, variantMap] of sortedVariantEntries) {
+    const selected = resolved[variantKey];
+    if (selected !== void 0 && variantMap[selected] !== void 0) {
+      const normalized = variantMap[selected].trim().replace(/\s+/g, " ");
+      classes.push(normalized);
+    }
+  }
+  return classes.filter(Boolean).join(" ");
+}
+function resolveStates(statesConfig, stateKeys, statesLookup, props) {
+  if (statesLookup && stateKeys.length > 0) {
+    let mask = 0;
+    for (let i = 0; i < stateKeys.length; i++) {
+      if (props[stateKeys[i]]) mask |= 1 << i;
+    }
+    return statesLookup[mask] ?? "";
+  }
+  const activeClasses = stateKeys.filter((k) => props[k]).map((k) => statesConfig[k]).filter(Boolean);
+  return activeClasses.join(" ");
+}
+function resolveCompound(compounds, props) {
+  const classes = [];
+  for (const compound of compounds) {
+    const { class: compoundClass, ...conditions } = compound;
+    const matches = Object.entries(conditions).every(([key, value]) => props[key] === value);
+    if (matches) {
+      classes.push(compoundClass);
+    }
+  }
+  return classes.join(" ");
+}
+function carryOverSubComponents(target, source) {
+  const INTERNAL_KEYS = /* @__PURE__ */ new Set(["extend", "withVariants", "animate", "withSub", "displayName"]);
+  for (const key of Object.keys(source)) {
+    if (!INTERNAL_KEYS.has(key)) {
+      target[key] = source[key];
+    }
+  }
+}
+function attachExtend(component, originalTag, base, config) {
+  function extendWithClasses(stringsOrConfig) {
+    if (Array.isArray(stringsOrConfig) && "raw" in stringsOrConfig) {
+      const rawExtra = stringsOrConfig.raw.join("").trim().replace(/\s+/g, " ");
+      const merged2 = twMerge(extractBaseClasses(base), extractBaseClasses(rawExtra));
+      const extended2 = createComponent(
+        originalTag,
+        typeof config === "string" ? merged2 : { ...config, base: merged2 }
+      );
+      carryOverSubComponents(extended2, component);
+      const extendSubBlocks = parseSubComponentBlocks(rawExtra);
+      if (extendSubBlocks.size > 0) {
+        const extComp = extended2;
+        const displayName = extended2.displayName ?? "tw";
+        for (const [subName, subClasses] of extendSubBlocks) {
+          extComp[subName] = createSubComponentAccessor(displayName, subName, subClasses);
+        }
+      }
+      return extended2;
+    }
+    const extCfg = stringsOrConfig;
+    const extraClasses = extCfg.classes ?? "";
+    const merged = twMerge(extractBaseClasses(base), extraClasses);
+    const existing = typeof config === "object" ? config : {};
+    const extended = createComponent(originalTag, {
+      ...existing,
+      base: merged,
+      variants: { ...existing.variants ?? {}, ...extCfg.variants ?? {} },
+      compoundVariants: [
+        ...existing.compoundVariants ?? [],
+        ...extCfg.compoundVariants ?? []
+      ],
+      defaultVariants: {
+        ...existing.defaultVariants ?? {},
+        ...extCfg.defaultVariants ?? {}
+      }
+    });
+    carryOverSubComponents(extended, component);
+    return extended;
+  }
+  component.extend = extendWithClasses;
+  component.withVariants = (newConfig) => {
+    const existing = typeof config === "object" ? config : {};
+    return createComponent(originalTag, {
+      ...existing,
+      base,
+      variants: { ...existing.variants ?? {}, ...newConfig.variants ?? {} },
+      compoundVariants: [
+        ...existing.compoundVariants ?? [],
+        ...newConfig.compoundVariants ?? []
+      ],
+      defaultVariants: {
+        ...existing.defaultVariants ?? {},
+        ...newConfig.defaultVariants ?? {}
+      }
+    });
+  };
+  component.animate = async (_opts) => {
+    console.warn(
+      '[tailwind-styled-v4] .animate() tidak tersedia di main bundle.\nGunakan: import { animate } from "tailwind-styled-v4/animate"'
+    );
+    return component;
+  };
+  component.withSub = (() => component);
+  return component;
+}
+function createComponent(tag, config) {
+  const isStatic = typeof config === "string";
+  const base = typeof config === "string" ? config : config.base ?? "";
+  const variants = typeof config === "string" ? {} : config.variants ?? {};
+  const compoundVariants = typeof config === "string" ? [] : config.compoundVariants ?? [];
+  const defaultVariants = typeof config === "string" ? {} : config.defaultVariants ?? {};
+  const stateConfig = typeof config === "string" ? void 0 : config.state;
+  const containerConfig = typeof config === "string" ? void 0 : config.container;
+  const containerName = typeof config === "string" ? void 0 : config.containerName;
+  const configSub = typeof config === "string" ? void 0 : config.sub;
+  const statesConfig = typeof config === "string" ? void 0 : config.states;
+  let statesLookup = null;
+  let stateKeys = [];
+  if (statesConfig && Object.keys(statesConfig).length > 0) {
+    stateKeys = Object.keys(statesConfig);
+    const statesCacheKey = JSON.stringify(statesConfig, Object.keys(statesConfig).sort());
+    const cachedStates = _statesLookupCache.get(statesCacheKey);
+    if (cachedStates) {
+      statesLookup = cachedStates.lookup;
+      stateKeys = cachedStates.keys;
+    } else {
+      try {
+        const native = getNativeBinding();
+        if (native?.pregenerateStatesNapi) ;
+      } catch (e) {
+        console.warn("[tailwind-styled-v4] states pre-generation failed, falling back to runtime cx()", e);
+      }
+    }
+  }
+  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 filterProps = makeFilterProps(new Set(Object.keys(variants)), new Set(stateKeys));
+  const tagLabel = typeof tag === "string" ? tag : tag.displayName ?? "Component";
+  if (isStatic || Object.keys(variants).length === 0) {
+    const baseComponent2 = React3.forwardRef((props, ref) => {
+      const { className, ...rest } = props;
+      const runtimeClassName = normalizeClassName(className);
+      const statesClasses = statesConfig ? resolveStates(statesConfig, stateKeys, statesLookup, props) : "";
+      const mergedBase = twMerge(extractBaseClasses(base), engineClasses, runtimeClassName);
+      const className2 = statesClasses ? `${mergedBase} ${statesClasses}`.trim() : mergedBase;
+      return React3.createElement(tag, {
+        ref,
+        ...filterProps(rest),
+        className: className2
+      });
+    });
+    const component2 = baseComponent2;
+    component2.displayName = `tw.${tagLabel}`;
+    const result2 = attachExtend(component2, tag, base, config);
+    registerSubComponents(result2, base, configSub);
+    return wrapWithSubProxy(result2, tagLabel);
+  }
+  const baseComponent = React3.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    const runtimeClassName = normalizeClassName(className);
+    const variantClasses = resolveVariants(variants, props, defaultVariants);
+    const compoundClasses = resolveCompound(compoundVariants, props);
+    const statesClasses = statesConfig ? resolveStates(statesConfig, stateKeys, statesLookup, props) : "";
+    const mergedBase = twMerge(extractBaseClasses(base), variantClasses, compoundClasses, engineClasses, runtimeClassName);
+    const className2 = statesClasses ? `${mergedBase} ${statesClasses}`.trim() : mergedBase;
+    return React3.createElement(tag, {
+      ref,
+      ...filterProps(rest),
+      className: className2
+    });
+  });
+  const component = baseComponent;
+  component.displayName = `tw.${tagLabel}`;
+  const result = attachExtend(component, tag, base, config);
+  registerSubComponents(result, base, configSub);
+  return wrapWithSubProxy(result, tagLabel);
+}
+var SKIP_PROXY_KEYS = /* @__PURE__ */ new Set([
+  "extend",
+  "withVariants",
+  "animate",
+  "withSub",
+  "displayName",
+  "$$typeof",
+  "render",
+  "prototype",
+  "__esModule",
+  "then"
+]);
+function wrapWithSubProxy(component, tagLabel) {
+  return new Proxy(component, {
+    get(target, prop) {
+      const value = target[prop];
+      if (value !== void 0) return value;
+      if (typeof prop === "symbol") return value;
+      if (SKIP_PROXY_KEYS.has(prop)) return value;
+      const Fallback = ({
+        children,
+        className
+      }) => React3.createElement("span", { className }, children);
+      Fallback.displayName = `tw.${tagLabel}.${prop}(fallback)`;
+      return Fallback;
+    }
+  });
+}
+
+// packages/domain/core/src/cv.ts
+var __generatedRegistry = {};
+var _sortedVariantKeysCache = /* @__PURE__ */ new Map();
+function lookupGenerated(componentId, props, defaultVariants, variantKeys) {
+  const table = __generatedRegistry[componentId];
+  if (!table) return void 0;
+  const merged = { ...defaultVariants, ...props };
+  let sortedKeys = _sortedVariantKeysCache.get(componentId);
+  if (!sortedKeys) {
+    const keysToUse = variantKeys ? variantKeys : Object.keys(merged).filter((k) => k !== "className");
+    sortedKeys = [...keysToUse].sort();
+    _sortedVariantKeysCache.set(componentId, sortedKeys);
+  }
+  let key = "";
+  for (let i = 0; i < sortedKeys.length; i++) {
+    if (i > 0) key += "|";
+    key += sortedKeys[i] + ":" + String(merged[sortedKeys[i]]);
+  }
+  return table[key];
+}
+var _configJsonCache = /* @__PURE__ */ new WeakMap();
+function _getConfigJson(config) {
+  let json = _configJsonCache.get(config);
+  if (!json) {
+    json = JSON.stringify(config);
+    _configJsonCache.set(config, json);
+  }
+  return json;
+}
+function resolveVariantsNative(config, props) {
+  const { base = "", variants = {}, compoundVariants = [], defaultVariants = {} } = config;
+  const variantKeys = Object.keys(variants);
+  try {
+    const binding = getNativeBinding();
+    if (binding?.resolveVariants) ;
+    if (binding?.resolveSimpleVariants) ;
+  } catch {
+  }
+  const resolved = {};
+  for (const k of variantKeys) {
+    const dv = defaultVariants[k];
+    if (dv !== void 0) resolved[k] = dv;
+  }
+  for (const k of variantKeys) {
+    const v = props[k];
+    if (v !== void 0 && v !== null) resolved[k] = String(v);
+  }
+  const classes = [];
+  if (base) classes.push(base);
+  for (const k of variantKeys) {
+    const variantMap = variants[k];
+    const selected = resolved[k];
+    if (selected !== void 0 && variantMap?.[selected] !== void 0) {
+      classes.push(variantMap[selected]);
+    }
+  }
+  const resolvedFull = { ...defaultVariants, ...props };
+  for (const compound of compoundVariants) {
+    const { class: compoundClass, className: compoundClassName, ...conditions } = compound;
+    const matches = Object.entries(conditions).every(([key, val]) => resolvedFull[key] === val);
+    if (matches) {
+      if (compoundClass) classes.push(String(compoundClass));
+      if (compoundClassName) classes.push(String(compoundClassName));
+    }
+  }
+  return classes.filter(Boolean).join(" ");
+}
+function cv(config, componentId) {
+  {
+    const { variants = {}, defaultVariants = {} } = config;
+    for (const dk of Object.keys(defaultVariants)) {
+      if (!(dk in variants)) {
+        console.warn(`[tailwind-styled] defaultVariants["${dk}"] not in variants`);
+      }
+    }
+  }
+  return (props = {}) => {
+    let result;
+    const variantKeys = Object.keys(config.variants ?? {});
+    if (componentId) {
+      const generated = lookupGenerated(
+        componentId,
+        props,
+        config.defaultVariants,
+        variantKeys
+      );
+      result = generated ?? resolveVariantsNative(config, props);
+    } else {
+      result = resolveVariantsNative(config, props);
+    }
+    return props.className ? twMerge(result, props.className) : result;
+  };
+}
+
+// packages/domain/core/src/cx.ts
+function cn(...inputs) {
+  const strings = [];
+  for (const item of inputs) {
+    if (Array.isArray(item)) {
+      for (const v of item) {
+        if (v) strings.push(String(v));
+      }
+    } else if (item) {
+      strings.push(String(item));
+    }
+  }
+  if (strings.length === 0) return "";
+  try {
+    const native = getNativeBinding();
+    if (native?.resolveClassNames) ;
+  } catch {
+  }
+  return strings.join(" ");
+}
+function cx(...inputs) {
+  const filtered = inputs.flat().filter(Boolean);
+  if (filtered.length === 0) return "";
+  try {
+    const native = getNativeBinding();
+    if (native?.twMergeMany) ;
+    if (native?.twMerge) ;
+  } catch {
+  }
+  return filtered.join(" ");
+}
+var cxm = cx;
+var TOKEN_ENGINE_KEY = "__TW_TOKEN_ENGINE__";
+function tokenVar(name) {
+  const normalized = name.replace(/[^a-zA-Z0-9-]/g, "-").toLowerCase();
+  return `--tw-token-${normalized}`;
+}
+function tokenRef(name) {
+  return `var(${tokenVar(name)})`;
+}
+var buildRootCss = (tokens) => {
+  const vars = Object.entries(tokens).map(([name, value]) => `  ${tokenVar(name)}: ${value};`).join("\n");
+  return `:root {
+${vars}
+}`;
+};
+var createLiveTokenEngine = () => {
+  const state = {
+    currentTokens: {},
+    styleEl: null
+  };
+  const subscribers = /* @__PURE__ */ new Set();
+  const syncStyleEl = () => {
+    if (typeof document === "undefined") return;
+    if (!state.styleEl) {
+      const styleEl = document.createElement("style");
+      styleEl.id = "tw-live-tokens";
+      styleEl.setAttribute("data-tw-tokens", "true");
+      document.head.appendChild(styleEl);
+      state.styleEl = styleEl;
+    }
+    state.styleEl.textContent = buildRootCss(state.currentTokens);
+  };
+  const notifySubscribers = () => {
+    const snapshot = { ...state.currentTokens };
+    for (const subscriber of subscribers) {
+      try {
+        subscriber(snapshot);
+      } catch {
+      }
+    }
+  };
+  const setToken2 = (name, value) => {
+    state.currentTokens = { ...state.currentTokens, [name]: value };
+    if (typeof document !== "undefined") {
+      document.documentElement.style.setProperty(tokenVar(name), value);
+    }
+    syncStyleEl();
+    notifySubscribers();
+  };
+  const setTokens2 = (tokens) => {
+    state.currentTokens = { ...state.currentTokens, ...tokens };
+    if (typeof document !== "undefined") {
+      const root = document.documentElement;
+      for (const [name, value] of Object.entries(tokens)) {
+        root.style.setProperty(tokenVar(name), value);
+      }
+    }
+    syncStyleEl();
+    notifySubscribers();
+  };
+  const applyTokenSet2 = (tokens) => {
+    if (typeof document !== "undefined") {
+      const root = document.documentElement;
+      for (const name of Object.keys(state.currentTokens)) {
+        if (!(name in tokens)) {
+          root.style.removeProperty(tokenVar(name));
+        }
+      }
+      for (const [name, value] of Object.entries(tokens)) {
+        root.style.setProperty(tokenVar(name), value);
+      }
+    }
+    state.currentTokens = { ...tokens };
+    syncStyleEl();
+    notifySubscribers();
+  };
+  return {
+    liveToken(tokens) {
+      setTokens2(tokens);
+      const vars = {};
+      for (const name of Object.keys(tokens)) {
+        vars[name] = tokenRef(name);
+      }
+      return {
+        vars,
+        get(name) {
+          return state.currentTokens[name];
+        },
+        set(name, value) {
+          setToken2(name, value);
+        },
+        setAll(nextTokens) {
+          setTokens2(nextTokens);
+        },
+        snapshot() {
+          return { ...state.currentTokens };
+        }
+      };
+    },
+    getToken(name) {
+      return state.currentTokens[name];
+    },
+    getTokens() {
+      return { ...state.currentTokens };
+    },
+    setToken: setToken2,
+    setTokens: setTokens2,
+    applyTokenSet: applyTokenSet2,
+    generateTokenCssString() {
+      return buildRootCss(state.currentTokens);
+    },
+    subscribe(fn) {
+      subscribers.add(fn);
+      return () => {
+        subscribers.delete(fn);
+      };
+    }
+  };
+};
+var engine = createLiveTokenEngine();
+function liveToken(tokens) {
+  return engine.liveToken(tokens);
+}
+function setToken(name, value) {
+  engine.setToken(name, value);
+}
+function setTokens(tokens) {
+  engine.setTokens(tokens);
+}
+function applyTokenSet(tokens) {
+  engine.applyTokenSet(tokens);
+}
+function getToken(name) {
+  return engine.getToken(name);
+}
+function getTokens() {
+  return engine.getTokens();
+}
+function subscribeTokens(fn) {
+  return engine.subscribe(fn);
+}
+function generateTokenCssString() {
+  return engine.generateTokenCssString();
+}
+function createUseTokens() {
+  return function useTokens() {
+    const [tokens, setTokensState] = React3.useState(engine.getTokens());
+    React3.useEffect(() => {
+      setTokensState(engine.getTokens());
+      return engine.subscribe((nextTokens) => setTokensState(nextTokens));
+    }, []);
+    return tokens;
+  };
+}
+var liveTokenEngine = {
+  getToken: engine.getToken,
+  getTokens: engine.getTokens,
+  setToken: engine.setToken,
+  setTokens: engine.setTokens,
+  applyTokenSet: engine.applyTokenSet,
+  subscribeTokens: engine.subscribe,
+  subscribe: engine.subscribe
+};
+var globalTokenEngine = globalThis;
+globalTokenEngine[TOKEN_ENGINE_KEY] = liveTokenEngine;
+if (typeof window !== "undefined") {
+  window.__TW_TOKEN_ENGINE__ = liveTokenEngine;
+}
+var subComponentRegistry = /* @__PURE__ */ new Map();
+function registerSubComponent(entry) {
+  subComponentRegistry.set(entry.name, entry);
+}
+function getSubComponent(name) {
+  return subComponentRegistry.get(name);
+}
+function getAllSubComponents() {
+  return Array.from(subComponentRegistry.values());
+}
+function withSubComponents(Component, subComponentNames) {
+  const result = { ...Component };
+  for (const name of subComponentNames) {
+    const entry = getSubComponent(name);
+    if (entry) result[name] = entry.component;
+  }
+  return result;
+}
+registerSubComponent({
+  name: "icon",
+  component: ({ children, className }) => React3.createElement("span", { className }, children),
+  defaultClasses: ""
+});
+registerSubComponent({
+  name: "text",
+  component: ({ children, className }) => React3.createElement("span", { className }, children),
+  defaultClasses: ""
+});
+registerSubComponent({
+  name: "badge",
+  component: ({ children, className }) => React3.createElement(
+    "span",
+    {
+      className: `ml-2 px-2 py-0.5 text-xs rounded-full bg-red-500 text-white ${className || ""}`
+    },
+    children
+  ),
+  defaultClasses: "ml-2 px-2 py-0.5 text-xs rounded-full bg-red-500 text-white"
+});
+registerSubComponent({
+  name: "header",
+  component: ({ children, className }) => React3.createElement("header", { className: `font-bold text-lg ${className || ""}` }, children),
+  defaultClasses: "font-bold text-lg"
+});
+registerSubComponent({
+  name: "body",
+  component: ({ children, className }) => React3.createElement("div", { className: `flex-1 ${className || ""}` }, children),
+  defaultClasses: "flex-1"
+});
+registerSubComponent({
+  name: "footer",
+  component: ({ children, className }) => React3.createElement("footer", { className: `border-t pt-4 ${className || ""}` }, children),
+  defaultClasses: "border-t pt-4"
+});
+registerSubComponent({
+  name: "content",
+  component: ({ children, className }) => React3.createElement("div", { className }, children),
+  defaultClasses: ""
+});
+registerSubComponent({
+  name: "title",
+  component: ({ children, className }) => React3.createElement("div", { className: `font-semibold ${className || ""}` }, children),
+  defaultClasses: "font-semibold"
+});
+registerSubComponent({
+  name: "message",
+  component: ({ children, className }) => React3.createElement("div", { className: `text-sm ${className || ""}` }, children),
+  defaultClasses: "text-sm"
+});
+registerSubComponent({
+  name: "close",
+  component: ({ children, className }) => React3.createElement("span", { className: `cursor-pointer ${className || ""}` }, children),
+  defaultClasses: "cursor-pointer"
+});
+registerSubComponent({
+  name: "image",
+  component: ({ className }) => React3.createElement("img", { className }),
+  defaultClasses: ""
+});
+
+// packages/domain/core/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 twMerge(...parts);
+}
+function styled(options) {
+  return function getClassName(props = {}) {
+    return resolveStyledClassName(options, props);
+  };
+}
+
+// packages/domain/core/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);
+      const runtimeTag = tag;
+      if (!overrides || Object.keys(overrides).length === 0) {
+        return createComponent(runtimeTag, 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(runtimeTag, 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}`;
+    const style = document.getElementById(styleId) ?? (() => {
+      const el = document.createElement("style");
+      el.id = styleId;
+      document.head.appendChild(el);
+      return el;
+    })();
+    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
+  });
+}
+var SUB_RE = /(?:\[([a-zA-Z][a-zA-Z0-9_-]*)\]|([a-zA-Z][a-zA-Z0-9_-]*))\s*\{([^}]*)\}/g;
+var COMMENT_RE = /\/\/[^\n]*/g;
+function parseTemplateFallback(strings, exprs) {
+  const raw = strings.raw.reduce((acc, str, i) => {
+    const expr = exprs[i];
+    const exprStr = typeof expr === "function" ? "" : expr ?? "";
+    return acc + str + String(exprStr);
+  }, "");
+  const subs = {};
+  let base = raw;
+  let match;
+  SUB_RE.lastIndex = 0;
+  while ((match = SUB_RE.exec(raw)) !== null) {
+    const name = match[1] ?? match[2];
+    const rawInner = match[3].replace(COMMENT_RE, "");
+    let inner = "";
+    for (const line of rawInner.split("\n")) {
+      const t2 = line.trim();
+      if (t2) inner += (inner ? " " : "") + t2;
+    }
+    inner = inner.replace(/\s+/g, " ").trim();
+    subs[name] = inner;
+    base = base.replace(match[0], "");
+  }
+  const rawBase = base.replace(COMMENT_RE, "");
+  let cleanBase = "";
+  for (const line of rawBase.split("\n")) {
+    const t2 = line.trim();
+    if (t2) cleanBase += (cleanBase ? " " : "") + t2;
+  }
+  cleanBase = cleanBase.replace(/\s+/g, " ").trim();
+  return { base: cleanBase, subs, hasSubs: Object.keys(subs).length > 0 };
+}
+var _parsedTemplateCache = /* @__PURE__ */ new Map();
+function parseTemplate(strings, exprs) {
+  const raw = strings.raw.reduce((acc, str, i) => {
+    const expr = exprs[i];
+    const exprStr = typeof expr === "function" ? "" : expr ?? "";
+    return acc + str + String(exprStr);
+  }, "");
+  const cached = _parsedTemplateCache.get(raw);
+  if (cached) return cached;
+  let result;
+  try {
+    const binding = getNativeBinding();
+    if (binding?.parseTemplate) ;
+  } catch {
+  }
+  result = parseTemplateFallback(strings, exprs);
+  _parsedTemplateCache.set(raw, result);
+  return result;
+}
+function makeTag(tag) {
+  return ((stringsOrConfig, ...exprs) => {
+    if (!Array.isArray(stringsOrConfig) && typeof stringsOrConfig === "object" && stringsOrConfig !== null && !("raw" in stringsOrConfig)) {
+      return createComponent(tag, stringsOrConfig);
+    }
+    const parsed = parseTemplate(stringsOrConfig, exprs);
+    const component = createComponent(tag, parsed.base);
+    if (parsed.hasSubs) {
+      for (const [name, classes] of Object.entries(parsed.subs)) {
+        const SubComp = React3.forwardRef(
+          ({ children, className }, ref) => React3.createElement("span", {
+            ref,
+            className: className ? `${classes} ${className}` : classes
+          }, children)
+        );
+        SubComp.displayName = `tw.${typeof tag === "string" ? tag : "component"}.${name}`;
+        component[name] = SubComp;
+      }
+    }
+    return component;
+  });
+}
+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" && true) {
+    return ((stringsOrConfig, ...exprs) => {
+      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(stringsOrConfig, ...exprs);
+    });
+  }
+  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
+});
+
+// packages/domain/core/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")
+};
+
+export { applyTokenSet, cn, tokenRef as containerRef, createComponent, createStyledSystem, createTheme, createTwMerge, createUseTokens, cssVar, cv, cx, cxm, generateContainerCss, generateStateCss, generateTokenCssString, getAllSubComponents, getContainerRegistry, getStateRegistry, getSubComponent, getToken, getTokens, liveToken, mergeWithRules, processContainer, processState, registerSubComponent, resolveStyledClassName, server, setToken, setTokens, styled, subscribeTokens, t, tokenRef, tokenVar, tw, twMerge, twVar, v4Tokens, withSubComponents };
+//# sourceMappingURL=index.browser.mjs.map
+//# sourceMappingURL=index.browser.mjs.map