@vertz/ui 0.2.0

package/dist/shared/chunk-f1ynwam4.js

@@ -0,0 +1,872 @@
+// src/css/token-tables.ts
+var PROPERTY_MAP = {
+  p: { properties: ["padding"], valueType: "spacing" },
+  px: { properties: ["padding-inline"], valueType: "spacing" },
+  py: { properties: ["padding-block"], valueType: "spacing" },
+  pt: { properties: ["padding-top"], valueType: "spacing" },
+  pr: { properties: ["padding-right"], valueType: "spacing" },
+  pb: { properties: ["padding-bottom"], valueType: "spacing" },
+  pl: { properties: ["padding-left"], valueType: "spacing" },
+  m: { properties: ["margin"], valueType: "spacing" },
+  mx: { properties: ["margin-inline"], valueType: "spacing" },
+  my: { properties: ["margin-block"], valueType: "spacing" },
+  mt: { properties: ["margin-top"], valueType: "spacing" },
+  mr: { properties: ["margin-right"], valueType: "spacing" },
+  mb: { properties: ["margin-bottom"], valueType: "spacing" },
+  ml: { properties: ["margin-left"], valueType: "spacing" },
+  w: { properties: ["width"], valueType: "size" },
+  h: { properties: ["height"], valueType: "size" },
+  "min-w": { properties: ["min-width"], valueType: "size" },
+  "max-w": { properties: ["max-width"], valueType: "size" },
+  "min-h": { properties: ["min-height"], valueType: "size" },
+  "max-h": { properties: ["max-height"], valueType: "size" },
+  bg: { properties: ["background-color"], valueType: "color" },
+  text: { properties: ["color"], valueType: "color" },
+  border: { properties: ["border-color"], valueType: "color" },
+  "border-r": { properties: ["border-right-width"], valueType: "raw" },
+  "border-l": { properties: ["border-left-width"], valueType: "raw" },
+  "border-t": { properties: ["border-top-width"], valueType: "raw" },
+  "border-b": { properties: ["border-bottom-width"], valueType: "raw" },
+  rounded: { properties: ["border-radius"], valueType: "radius" },
+  shadow: { properties: ["box-shadow"], valueType: "shadow" },
+  gap: { properties: ["gap"], valueType: "spacing" },
+  items: { properties: ["align-items"], valueType: "alignment" },
+  justify: { properties: ["justify-content"], valueType: "alignment" },
+  "grid-cols": { properties: ["grid-template-columns"], valueType: "raw" },
+  font: { properties: ["font-size"], valueType: "font-size" },
+  weight: { properties: ["font-weight"], valueType: "font-weight" },
+  leading: { properties: ["line-height"], valueType: "line-height" },
+  tracking: { properties: ["letter-spacing"], valueType: "raw" },
+  ring: { properties: ["outline"], valueType: "ring" },
+  cursor: { properties: ["cursor"], valueType: "raw" },
+  transition: { properties: ["transition"], valueType: "raw" },
+  resize: { properties: ["resize"], valueType: "raw" },
+  opacity: { properties: ["opacity"], valueType: "raw" },
+  inset: { properties: ["inset"], valueType: "raw" },
+  z: { properties: ["z-index"], valueType: "raw" },
+  content: { properties: ["content"], valueType: "content" }
+};
+var KEYWORD_MAP = {
+  flex: [{ property: "display", value: "flex" }],
+  grid: [{ property: "display", value: "grid" }],
+  block: [{ property: "display", value: "block" }],
+  inline: [{ property: "display", value: "inline" }],
+  hidden: [{ property: "display", value: "none" }],
+  "inline-flex": [{ property: "display", value: "inline-flex" }],
+  "flex-1": [{ property: "flex", value: "1 1 0%" }],
+  "flex-col": [{ property: "flex-direction", value: "column" }],
+  "flex-row": [{ property: "flex-direction", value: "row" }],
+  "flex-wrap": [{ property: "flex-wrap", value: "wrap" }],
+  "flex-nowrap": [{ property: "flex-wrap", value: "nowrap" }],
+  fixed: [{ property: "position", value: "fixed" }],
+  absolute: [{ property: "position", value: "absolute" }],
+  relative: [{ property: "position", value: "relative" }],
+  sticky: [{ property: "position", value: "sticky" }],
+  uppercase: [{ property: "text-transform", value: "uppercase" }],
+  lowercase: [{ property: "text-transform", value: "lowercase" }],
+  capitalize: [{ property: "text-transform", value: "capitalize" }],
+  "outline-none": [{ property: "outline", value: "none" }]
+};
+var DISPLAY_MAP = {
+  flex: "flex",
+  grid: "grid",
+  block: "block",
+  inline: "inline",
+  hidden: "none",
+  "inline-flex": "inline-flex"
+};
+var SPACING_SCALE = {
+  "0": "0",
+  "0.5": "0.125rem",
+  "1": "0.25rem",
+  "1.5": "0.375rem",
+  "2": "0.5rem",
+  "2.5": "0.625rem",
+  "3": "0.75rem",
+  "3.5": "0.875rem",
+  "4": "1rem",
+  "5": "1.25rem",
+  "6": "1.5rem",
+  "7": "1.75rem",
+  "8": "2rem",
+  "9": "2.25rem",
+  "10": "2.5rem",
+  "11": "2.75rem",
+  "12": "3rem",
+  "14": "3.5rem",
+  "16": "4rem",
+  "20": "5rem",
+  "24": "6rem",
+  "28": "7rem",
+  "32": "8rem",
+  "36": "9rem",
+  "40": "10rem",
+  "44": "11rem",
+  "48": "12rem",
+  "52": "13rem",
+  "56": "14rem",
+  "60": "15rem",
+  "64": "16rem",
+  "72": "18rem",
+  "80": "20rem",
+  "96": "24rem",
+  auto: "auto"
+};
+var RADIUS_SCALE = {
+  none: "0",
+  sm: "0.125rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  xl: "0.75rem",
+  "2xl": "1rem",
+  "3xl": "1.5rem",
+  full: "9999px"
+};
+var SHADOW_SCALE = {
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+  none: "none"
+};
+var FONT_SIZE_SCALE = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "1.875rem",
+  "4xl": "2.25rem",
+  "5xl": "3rem"
+};
+var FONT_WEIGHT_SCALE = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+};
+var LINE_HEIGHT_SCALE = {
+  none: "1",
+  tight: "1.25",
+  snug: "1.375",
+  normal: "1.5",
+  relaxed: "1.625",
+  loose: "2"
+};
+var ALIGNMENT_MAP = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var SIZE_KEYWORDS = {
+  full: "100%",
+  svw: "100svw",
+  dvw: "100dvw",
+  min: "min-content",
+  max: "max-content",
+  fit: "fit-content",
+  auto: "auto",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  "5xl": "64rem",
+  "6xl": "72rem",
+  "7xl": "80rem"
+};
+var HEIGHT_AXIS_PROPERTIES = new Set(["h", "min-h", "max-h"]);
+var COLOR_NAMESPACES = new Set([
+  "primary",
+  "secondary",
+  "accent",
+  "background",
+  "foreground",
+  "muted",
+  "surface",
+  "destructive",
+  "danger",
+  "success",
+  "warning",
+  "info",
+  "border",
+  "ring",
+  "input",
+  "card",
+  "popover",
+  "gray"
+]);
+var CSS_COLOR_KEYWORDS = new Set([
+  "transparent",
+  "inherit",
+  "currentColor",
+  "initial",
+  "unset",
+  "white",
+  "black"
+]);
+var CONTENT_MAP = {
+  empty: "''",
+  none: "none"
+};
+var PSEUDO_PREFIXES = new Set([
+  "hover",
+  "focus",
+  "focus-visible",
+  "active",
+  "disabled",
+  "first",
+  "last"
+]);
+var PSEUDO_MAP = {
+  hover: ":hover",
+  focus: ":focus",
+  "focus-visible": ":focus-visible",
+  active: ":active",
+  disabled: ":disabled",
+  first: ":first-child",
+  last: ":last-child"
+};
+
+// src/css/class-generator.ts
+function generateClassName(filePath, blockName) {
+  const input = `${filePath}::${blockName}`;
+  const hash = djb2Hash(input);
+  return `_${hash}`;
+}
+function djb2Hash(str) {
+  let hash = 5381;
+  for (let i = 0;i < str.length; i++) {
+    hash = (hash << 5) + hash + str.charCodeAt(i) | 0;
+  }
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+
+// src/css/shorthand-parser.ts
+var DISPLAY_KEYWORDS = new Set(["flex", "grid", "block", "inline", "hidden"]);
+function parseShorthand(input) {
+  if (!input || input.trim() === "") {
+    throw new ShorthandParseError("Empty shorthand string", input);
+  }
+  const trimmed = input.trim();
+  const parts = splitShorthand(trimmed);
+  if (parts.length === 1) {
+    const [property] = parts;
+    return { property, value: null, pseudo: null };
+  }
+  if (parts.length === 2) {
+    const [first, second] = parts;
+    if (PSEUDO_PREFIXES.has(first)) {
+      const pseudo = PSEUDO_MAP[first] ?? first;
+      if (DISPLAY_KEYWORDS.has(second)) {
+        return { property: second, value: null, pseudo };
+      }
+      return { property: second, value: null, pseudo };
+    }
+    return { property: first, value: second, pseudo: null };
+  }
+  if (parts.length === 3) {
+    const [first, second, third] = parts;
+    if (!PSEUDO_PREFIXES.has(first)) {
+      throw new ShorthandParseError(`Unknown pseudo prefix '${first}'. Supported: ${[...PSEUDO_PREFIXES].join(", ")}`, input);
+    }
+    return {
+      property: second,
+      value: third,
+      pseudo: PSEUDO_MAP[first] ?? first
+    };
+  }
+  throw new ShorthandParseError(`Too many segments (${parts.length}). Expected 'property:value' or 'pseudo:property:value'`, input);
+}
+function splitShorthand(input) {
+  return input.split(":");
+}
+
+class ShorthandParseError extends Error {
+  input;
+  constructor(message, input) {
+    super(`Invalid shorthand '${input}': ${message}`);
+    this.name = "ShorthandParseError";
+    this.input = input;
+  }
+}
+
+// src/css/token-resolver.ts
+class TokenResolveError extends Error {
+  shorthand;
+  constructor(message, shorthand) {
+    super(message);
+    this.name = "TokenResolveError";
+    this.shorthand = shorthand;
+  }
+}
+function resolveToken(parsed) {
+  const { property, value, pseudo } = parsed;
+  const keyword = KEYWORD_MAP[property];
+  if (keyword !== undefined && value === null) {
+    return { declarations: [...keyword], pseudo };
+  }
+  const mapping = PROPERTY_MAP[property];
+  if (!mapping) {
+    throw new TokenResolveError(`Unknown property shorthand '${property}'`, formatShorthand(parsed));
+  }
+  if (value === null) {
+    throw new TokenResolveError(`Property '${property}' requires a value`, formatShorthand(parsed));
+  }
+  if (property === "text") {
+    return { declarations: resolveText(value), pseudo };
+  }
+  if (property === "font") {
+    return { declarations: resolveFont(value), pseudo };
+  }
+  if (property === "border") {
+    return { declarations: resolveBorder(value), pseudo };
+  }
+  if (property === "ring") {
+    return { declarations: resolveRingMulti(value), pseudo };
+  }
+  const resolvedValue = resolveValue(value, mapping.valueType, property);
+  const declarations = mapping.properties.map((prop) => ({
+    property: prop,
+    value: resolvedValue
+  }));
+  return { declarations, pseudo };
+}
+function resolveValue(value, valueType, property) {
+  switch (valueType) {
+    case "spacing":
+      return resolveSpacing(value, property);
+    case "color":
+      return resolveColor(value, property);
+    case "radius":
+      return resolveRadius(value, property);
+    case "shadow":
+      return resolveShadow(value, property);
+    case "size":
+      return resolveSize(value, property);
+    case "alignment":
+      return resolveAlignment(value, property);
+    case "font-size":
+      return resolveFontSize(value, property);
+    case "font-weight":
+      return resolveFontWeight(value, property);
+    case "line-height":
+      return resolveLineHeight(value, property);
+    case "ring":
+      return resolveRing(value, property);
+    case "content":
+      return resolveContent(value, property);
+    case "display":
+      return value;
+    case "raw":
+      return resolveRaw(value, property);
+  }
+}
+function resolveSpacing(value, property) {
+  const scaled = SPACING_SCALE[value];
+  if (scaled !== undefined)
+    return scaled;
+  throw new TokenResolveError(`Invalid spacing value '${value}' for '${property}'. Use a spacing scale number (0, 1, 2, 4, 8, etc.) or 'auto'.`, `${property}:${value}`);
+}
+function resolveColor(value, property) {
+  const dotIndex = value.indexOf(".");
+  if (dotIndex !== -1) {
+    const namespace = value.substring(0, dotIndex);
+    const shade = value.substring(dotIndex + 1);
+    if (COLOR_NAMESPACES.has(namespace)) {
+      return `var(--color-${namespace}-${shade})`;
+    }
+    throw new TokenResolveError(`Unknown color token '${value}'. Known namespaces: ${[...COLOR_NAMESPACES].join(", ")}`, `${property}:${value}`);
+  }
+  if (COLOR_NAMESPACES.has(value)) {
+    return `var(--color-${value})`;
+  }
+  if (CSS_COLOR_KEYWORDS.has(value)) {
+    return value;
+  }
+  throw new TokenResolveError(`Unknown color token '${value}'. Use a design token name (e.g. 'primary', 'background') or 'primary.700' for shades.`, `${property}:${value}`);
+}
+function resolveRadius(value, property) {
+  const scaled = RADIUS_SCALE[value];
+  if (scaled !== undefined)
+    return scaled;
+  throw new TokenResolveError(`Invalid border-radius value '${value}' for '${property}'. Use: ${Object.keys(RADIUS_SCALE).join(", ")}`, `${property}:${value}`);
+}
+function resolveShadow(value, property) {
+  const scaled = SHADOW_SCALE[value];
+  if (scaled !== undefined)
+    return scaled;
+  throw new TokenResolveError(`Invalid shadow value '${value}' for '${property}'. Use: ${Object.keys(SHADOW_SCALE).join(", ")}`, `${property}:${value}`);
+}
+function resolveSize(value, property) {
+  const spaced = SPACING_SCALE[value];
+  if (spaced !== undefined)
+    return spaced;
+  if (value === "screen") {
+    return HEIGHT_AXIS_PROPERTIES.has(property) ? "100vh" : "100vw";
+  }
+  const keyword = SIZE_KEYWORDS[value];
+  if (keyword !== undefined)
+    return keyword;
+  throw new TokenResolveError(`Invalid size value '${value}' for '${property}'. Use a spacing scale number or keyword (full, screen, min, max, fit, auto).`, `${property}:${value}`);
+}
+function resolveAlignment(value, property) {
+  const mapped = ALIGNMENT_MAP[value];
+  if (mapped !== undefined)
+    return mapped;
+  throw new TokenResolveError(`Invalid alignment value '${value}' for '${property}'. Use: ${Object.keys(ALIGNMENT_MAP).join(", ")}`, `${property}:${value}`);
+}
+function resolveFontSize(value, property) {
+  const scaled = FONT_SIZE_SCALE[value];
+  if (scaled !== undefined)
+    return scaled;
+  throw new TokenResolveError(`Invalid font-size value '${value}' for '${property}'. Use: ${Object.keys(FONT_SIZE_SCALE).join(", ")}`, `${property}:${value}`);
+}
+function resolveFontWeight(value, property) {
+  const scaled = FONT_WEIGHT_SCALE[value];
+  if (scaled !== undefined)
+    return scaled;
+  throw new TokenResolveError(`Invalid font-weight value '${value}' for '${property}'. Use: ${Object.keys(FONT_WEIGHT_SCALE).join(", ")}`, `${property}:${value}`);
+}
+function resolveLineHeight(value, property) {
+  const scaled = LINE_HEIGHT_SCALE[value];
+  if (scaled !== undefined)
+    return scaled;
+  throw new TokenResolveError(`Invalid line-height value '${value}' for '${property}'. Use: ${Object.keys(LINE_HEIGHT_SCALE).join(", ")}`, `${property}:${value}`);
+}
+function resolveRing(value, property) {
+  const num = Number(value);
+  if (Number.isNaN(num) || num < 0) {
+    throw new TokenResolveError(`Invalid ring width '${value}' for '${property}'. Use a non-negative number (0, 1, 2, 4, etc.).`, `${property}:${value}`);
+  }
+  return `${num}px solid var(--color-ring)`;
+}
+function resolveContent(value, property) {
+  const mapped = CONTENT_MAP[value];
+  if (mapped !== undefined)
+    return mapped;
+  throw new TokenResolveError(`Invalid content value '${value}' for '${property}'. Use: ${Object.keys(CONTENT_MAP).join(", ")}`, `${property}:${value}`);
+}
+var TEXT_ALIGN_KEYWORDS = new Set(["center", "left", "right", "justify", "start", "end"]);
+function resolveText(value) {
+  if (FONT_SIZE_SCALE[value] !== undefined) {
+    return [{ property: "font-size", value: FONT_SIZE_SCALE[value] }];
+  }
+  if (TEXT_ALIGN_KEYWORDS.has(value)) {
+    return [{ property: "text-align", value }];
+  }
+  return [{ property: "color", value: resolveColor(value, "text") }];
+}
+function resolveFont(value) {
+  if (FONT_WEIGHT_SCALE[value] !== undefined) {
+    return [{ property: "font-weight", value: FONT_WEIGHT_SCALE[value] }];
+  }
+  return [{ property: "font-size", value: resolveFontSize(value, "font") }];
+}
+function resolveBorder(value) {
+  const num = Number(value);
+  if (!Number.isNaN(num) && num >= 0) {
+    return [{ property: "border-width", value: `${num}px` }];
+  }
+  return [{ property: "border-color", value: resolveColor(value, "border") }];
+}
+function resolveRingMulti(value) {
+  const num = Number(value);
+  if (!Number.isNaN(num) && num >= 0) {
+    return [{ property: "outline", value: `${num}px solid var(--color-ring)` }];
+  }
+  return [{ property: "outline-color", value: resolveColor(value, "ring") }];
+}
+function resolveRaw(value, property) {
+  if (property === "border-r" || property === "border-l" || property === "border-t" || property === "border-b") {
+    const num = Number(value);
+    if (!Number.isNaN(num))
+      return `${num}px`;
+    return value;
+  }
+  if (property === "transition") {
+    const TIMING = "150ms cubic-bezier(0.4, 0, 0.2, 1)";
+    const COLOR_PROPS = [
+      "color",
+      "background-color",
+      "border-color",
+      "outline-color",
+      "text-decoration-color",
+      "fill",
+      "stroke"
+    ];
+    const TRANSITION_MAP = {
+      none: "none",
+      all: `all ${TIMING}`,
+      colors: COLOR_PROPS.map((p) => `${p} ${TIMING}`).join(", "),
+      shadow: `box-shadow ${TIMING}`,
+      transform: `transform ${TIMING}`,
+      opacity: `opacity ${TIMING}`
+    };
+    return TRANSITION_MAP[value] ?? value;
+  }
+  if (property === "tracking") {
+    const TRACKING_MAP = {
+      tighter: "-0.05em",
+      tight: "-0.025em",
+      normal: "0em",
+      wide: "0.025em",
+      wider: "0.05em",
+      widest: "0.1em"
+    };
+    return TRACKING_MAP[value] ?? value;
+  }
+  if (property === "grid-cols") {
+    const num = Number(value);
+    if (!Number.isNaN(num) && num > 0)
+      return `repeat(${num}, minmax(0, 1fr))`;
+    return value;
+  }
+  if (property === "inset") {
+    const spaced = SPACING_SCALE[value];
+    if (spaced !== undefined)
+      return spaced;
+    return value;
+  }
+  return value;
+}
+function formatShorthand(parsed) {
+  const parts = [];
+  if (parsed.pseudo)
+    parts.push(parsed.pseudo);
+  parts.push(parsed.property);
+  if (parsed.value)
+    parts.push(parsed.value);
+  return parts.join(":");
+}
+
+// src/css/css.ts
+var DEFAULT_FILE_PATH = "__runtime__";
+var injectedCSS = new Set;
+function injectCSS(cssText) {
+  if (!cssText || typeof document === "undefined" || injectedCSS.has(cssText))
+    return;
+  injectedCSS.add(cssText);
+  const style = document.createElement("style");
+  style.setAttribute("data-vertz-css", "");
+  style.textContent = cssText;
+  document.head.appendChild(style);
+}
+function css(input, filePath = DEFAULT_FILE_PATH) {
+  const classNames = {};
+  const cssRules = [];
+  for (const [blockName, entries] of Object.entries(input)) {
+    const className = generateClassName(filePath, blockName);
+    classNames[blockName] = className;
+    const baseDeclarations = [];
+    const pseudoDeclarations = new Map;
+    const nestedRules = [];
+    for (const entry of entries) {
+      if (typeof entry === "string") {
+        const parsed = parseShorthand(entry);
+        const resolved = resolveToken(parsed);
+        if (resolved.pseudo) {
+          const existing = pseudoDeclarations.get(resolved.pseudo) ?? [];
+          existing.push(...resolved.declarations);
+          pseudoDeclarations.set(resolved.pseudo, existing);
+        } else {
+          baseDeclarations.push(...resolved.declarations);
+        }
+      } else {
+        for (const [selector, nestedEntries] of Object.entries(entry)) {
+          const nestedDecls = [];
+          for (const nestedEntry of nestedEntries) {
+            const parsed = parseShorthand(nestedEntry);
+            const resolved = resolveToken(parsed);
+            nestedDecls.push(...resolved.declarations);
+          }
+          const resolvedSelector = selector.replace("&", `.${className}`);
+          nestedRules.push(formatRule(resolvedSelector, nestedDecls));
+        }
+      }
+    }
+    if (baseDeclarations.length > 0) {
+      cssRules.push(formatRule(`.${className}`, baseDeclarations));
+    }
+    for (const [pseudo, declarations] of pseudoDeclarations) {
+      cssRules.push(formatRule(`.${className}${pseudo}`, declarations));
+    }
+    cssRules.push(...nestedRules);
+  }
+  const cssText = cssRules.join(`
+`);
+  injectCSS(cssText);
+  return {
+    classNames,
+    css: cssText
+  };
+}
+function formatRule(selector, declarations) {
+  const props = declarations.map((d) => `  ${d.property}: ${d.value};`).join(`
+`);
+  return `${selector} {
+${props}
+}`;
+}
+
+// src/css/global-css.ts
+function globalCss(input) {
+  const rules = [];
+  for (const [selector, properties] of Object.entries(input)) {
+    const declarations = Object.entries(properties).map(([prop, value]) => {
+      const cssProperty = prop.startsWith("--") ? prop : camelToKebab(prop);
+      return `  ${cssProperty}: ${value};`;
+    }).join(`
+`);
+    rules.push(`${selector} {
+${declarations}
+}`);
+  }
+  const cssText = rules.join(`
+`);
+  injectCSS(cssText);
+  return {
+    css: cssText
+  };
+}
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+// src/css/s.ts
+function s(entries) {
+  const styles = {};
+  for (const entry of entries) {
+    const parsed = parseShorthand(entry);
+    if (parsed.pseudo) {
+      throw new InlineStyleError(`Pseudo-state '${parsed.pseudo}' is not supported in inline styles. Use css() instead.`, entry);
+    }
+    const resolved = resolveToken(parsed);
+    for (const decl of resolved.declarations) {
+      styles[kebabToCamel(decl.property)] = decl.value;
+    }
+  }
+  return styles;
+}
+function kebabToCamel(str) {
+  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+class InlineStyleError extends Error {
+  entry;
+  constructor(message, entry) {
+    super(message);
+    this.name = "InlineStyleError";
+    this.entry = entry;
+  }
+}
+
+// src/css/theme.ts
+function defineTheme(input) {
+  return {
+    colors: input.colors,
+    spacing: input.spacing
+  };
+}
+function compileTheme(theme) {
+  const rootVars = [];
+  const darkVars = [];
+  const tokenPaths = [];
+  for (const [name, values] of Object.entries(theme.colors)) {
+    for (const [key, value] of Object.entries(values)) {
+      if (key === "DEFAULT") {
+        const varName = `--color-${name}`;
+        rootVars.push(`  ${varName}: ${value};`);
+        tokenPaths.push(name);
+      } else if (key.startsWith("_")) {
+        const variant = key.slice(1);
+        const varName = `--color-${name}`;
+        if (variant === "dark") {
+          darkVars.push(`  ${varName}: ${value};`);
+        }
+      } else {
+        const varName = `--color-${name}-${key}`;
+        rootVars.push(`  ${varName}: ${value};`);
+        tokenPaths.push(`${name}.${key}`);
+      }
+    }
+  }
+  if (theme.spacing) {
+    for (const [name, value] of Object.entries(theme.spacing)) {
+      const varName = `--spacing-${name}`;
+      rootVars.push(`  ${varName}: ${value};`);
+      tokenPaths.push(`spacing.${name}`);
+    }
+  }
+  const blocks = [];
+  if (rootVars.length > 0) {
+    blocks.push(`:root {
+${rootVars.join(`
+`)}
+}`);
+  }
+  if (darkVars.length > 0) {
+    blocks.push(`[data-theme="dark"] {
+${darkVars.join(`
+`)}
+}`);
+  }
+  return {
+    css: blocks.join(`
+`),
+    tokens: tokenPaths
+  };
+}
+
+// src/css/theme-provider.ts
+function ThemeProvider(props) {
+  const { theme = "light", children } = props;
+  const el = document.createElement("div");
+  el.setAttribute("data-theme", theme);
+  for (const child of children) {
+    if (typeof child === "string") {
+      el.appendChild(document.createTextNode(child));
+    } else {
+      el.appendChild(child);
+    }
+  }
+  return el;
+}
+
+// src/css/variants.ts
+function deriveConfigKey(config) {
+  const parts = [];
+  for (const entry of config.base) {
+    parts.push(typeof entry === "string" ? entry : JSON.stringify(entry));
+  }
+  const variantNames = Object.keys(config.variants).sort();
+  for (const variantName of variantNames) {
+    const options = config.variants[variantName];
+    if (!options)
+      continue;
+    const optionNames = Object.keys(options).sort();
+    for (const optionName of optionNames) {
+      const styles = options[optionName];
+      if (!styles)
+        continue;
+      parts.push(`${variantName}:${optionName}=${styles.map((s2) => typeof s2 === "string" ? s2 : JSON.stringify(s2)).join(",")}`);
+    }
+  }
+  return `__variants__${parts.join("|")}`;
+}
+function variants(config) {
+  const { base, variants: variantDefs, defaultVariants, compoundVariants } = config;
+  const filePath = deriveConfigKey(config);
+  const baseResult = base.length > 0 ? css({ base }, filePath) : { classNames: {}, css: "" };
+  const variantResults = {};
+  for (const [variantName, options] of Object.entries(variantDefs)) {
+    variantResults[variantName] = {};
+    for (const [optionName, styles] of Object.entries(options)) {
+      if (styles.length > 0) {
+        const blockName = `${variantName}_${optionName}`;
+        const result = css({ [blockName]: styles }, filePath);
+        const className = result.classNames[blockName];
+        if (className) {
+          variantResults[variantName][optionName] = {
+            className,
+            css: result.css
+          };
+        }
+      }
+    }
+  }
+  const compoundResults = [];
+  if (compoundVariants) {
+    for (let i = 0;i < compoundVariants.length; i++) {
+      const compound = compoundVariants[i];
+      if (!compound)
+        continue;
+      const { styles, ...conditions } = compound;
+      if (styles.length > 0) {
+        const blockName = `compound_${i}`;
+        const result = css({ [blockName]: styles }, filePath);
+        const className = result.classNames[blockName];
+        if (className) {
+          compoundResults.push({
+            conditions,
+            className,
+            css: result.css
+          });
+        }
+      }
+    }
+  }
+  const allCss = [];
+  if (baseResult.css)
+    allCss.push(baseResult.css);
+  for (const options of Object.values(variantResults)) {
+    for (const result of Object.values(options)) {
+      if (result.css)
+        allCss.push(result.css);
+    }
+  }
+  for (const result of compoundResults) {
+    if (result.css)
+      allCss.push(result.css);
+  }
+  const fn = (props) => {
+    const classNames = [];
+    const baseClassName = baseResult.classNames.base;
+    if (baseClassName) {
+      classNames.push(baseClassName);
+    }
+    const resolved = {};
+    if (defaultVariants) {
+      for (const [key, value] of Object.entries(defaultVariants)) {
+        if (value !== undefined) {
+          resolved[key] = String(value);
+        }
+      }
+    }
+    if (props) {
+      for (const [key, value] of Object.entries(props)) {
+        if (value !== undefined) {
+          resolved[key] = String(value);
+        }
+      }
+    }
+    for (const [variantName, optionName] of Object.entries(resolved)) {
+      const variantGroup = variantResults[variantName];
+      if (variantGroup) {
+        const result = variantGroup[optionName];
+        if (result) {
+          classNames.push(result.className);
+        }
+      }
+    }
+    for (const compound of compoundResults) {
+      const matches = Object.entries(compound.conditions).every(([key, value]) => {
+        return resolved[key] === String(value);
+      });
+      if (matches) {
+        classNames.push(compound.className);
+      }
+    }
+    return classNames.join(" ");
+  };
+  fn.css = allCss.join(`
+`);
+  return fn;
+}
+
+export { PROPERTY_MAP, KEYWORD_MAP, DISPLAY_MAP, SPACING_SCALE, RADIUS_SCALE, SHADOW_SCALE, FONT_SIZE_SCALE, FONT_WEIGHT_SCALE, LINE_HEIGHT_SCALE, ALIGNMENT_MAP, SIZE_KEYWORDS, HEIGHT_AXIS_PROPERTIES, COLOR_NAMESPACES, CSS_COLOR_KEYWORDS, CONTENT_MAP, PSEUDO_PREFIXES, PSEUDO_MAP, css, globalCss, s, defineTheme, compileTheme, ThemeProvider, variants };