@csszyx/dynamic 0.6.2 → 0.8.0

package/dist/shared/dynamic.BLXLKBNg.mjs

@@ -0,0 +1,1149 @@
+import { transform } from '@csszyx/compiler/browser';
+
+const BREAKPOINTS = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem",
+  "max-sm": "40rem",
+  "max-md": "48rem",
+  "max-lg": "64rem",
+  "max-xl": "80rem",
+  "max-2xl": "96rem"
+};
+const PSEUDO_CLASS_MAP = {
+  hover: ":hover",
+  focus: ":focus",
+  "focus-visible": ":focus-visible",
+  "focus-within": ":focus-within",
+  active: ":active",
+  visited: ":visited",
+  disabled: ":disabled",
+  checked: ":checked",
+  required: ":required",
+  optional: ":optional",
+  valid: ":valid",
+  invalid: ":invalid",
+  placeholder: "::placeholder",
+  before: "::before",
+  after: "::after",
+  first: ":first-child",
+  last: ":last-child",
+  odd: ":nth-child(odd)",
+  even: ":nth-child(even)",
+  empty: ":empty",
+  open: "[open]"
+};
+const SPACING_PROPS = {
+  // Padding
+  p: ["padding"],
+  pt: ["padding-top"],
+  pr: ["padding-right"],
+  pb: ["padding-bottom"],
+  pl: ["padding-left"],
+  px: ["padding-inline"],
+  py: ["padding-block"],
+  ps: ["padding-inline-start"],
+  pe: ["padding-inline-end"],
+  pbs: ["padding-block-start"],
+  pbe: ["padding-block-end"],
+  // Margin
+  m: ["margin"],
+  mt: ["margin-top"],
+  mr: ["margin-right"],
+  mb: ["margin-bottom"],
+  ml: ["margin-left"],
+  mx: ["margin-inline"],
+  my: ["margin-block"],
+  ms: ["margin-inline-start"],
+  me: ["margin-inline-end"],
+  mbs: ["margin-block-start"],
+  mbe: ["margin-block-end"],
+  // Gap
+  gap: ["gap"],
+  "gap-x": ["column-gap"],
+  "gap-y": ["row-gap"],
+  // Sizing
+  w: ["width"],
+  h: ["height"],
+  "min-w": ["min-width"],
+  "max-w": ["max-width"],
+  "min-h": ["min-height"],
+  "max-h": ["max-height"],
+  size: ["width", "height"],
+  // Position
+  top: ["top"],
+  right: ["right"],
+  bottom: ["bottom"],
+  left: ["left"],
+  inset: ["inset"],
+  "inset-x": ["inset-inline"],
+  "inset-y": ["inset-block"],
+  "inset-s": ["inset-inline-start"],
+  "inset-e": ["inset-inline-end"],
+  // Flex
+  basis: ["flex-basis"],
+  // Typography
+  indent: ["text-indent"],
+  "outline-offset": ["outline-offset"],
+  "underline-offset": ["text-underline-offset"],
+  // Scroll
+  "scroll-m": ["scroll-margin"],
+  "scroll-mt": ["scroll-margin-top"],
+  "scroll-mr": ["scroll-margin-right"],
+  "scroll-mb": ["scroll-margin-bottom"],
+  "scroll-ml": ["scroll-margin-left"],
+  "scroll-mx": ["scroll-margin-inline"],
+  "scroll-my": ["scroll-margin-block"],
+  "scroll-ms": ["scroll-margin-inline-start"],
+  "scroll-me": ["scroll-margin-inline-end"],
+  "scroll-p": ["scroll-padding"],
+  "scroll-pt": ["scroll-padding-top"],
+  "scroll-pr": ["scroll-padding-right"],
+  "scroll-pb": ["scroll-padding-bottom"],
+  "scroll-pl": ["scroll-padding-left"],
+  "scroll-px": ["scroll-padding-inline"],
+  "scroll-py": ["scroll-padding-block"],
+  "scroll-ps": ["scroll-padding-inline-start"],
+  "scroll-pe": ["scroll-padding-inline-end"],
+  // Border spacing (CSS custom properties in Tailwind v4)
+  "border-spacing-x": ["--tw-border-spacing-x"],
+  "border-spacing-y": ["--tw-border-spacing-y"],
+  // Ring offset (CSS custom property)
+  "ring-offset": ["--tw-ring-offset-width"]
+};
+const SIZE_KEYWORDS = {
+  auto: "auto",
+  full: "100%",
+  screen: "100vw",
+  // width context; height context uses 100vh — see below
+  svw: "100svw",
+  dvw: "100dvw",
+  lvw: "100lvw",
+  svh: "100svh",
+  dvh: "100dvh",
+  lvh: "100lvh",
+  fit: "fit-content",
+  min: "min-content",
+  max: "max-content",
+  none: "none",
+  px: "1px",
+  "0": "0",
+  xs: "var(--container-xs)",
+  sm: "var(--container-sm)",
+  md: "var(--container-md)",
+  lg: "var(--container-lg)",
+  xl: "var(--container-xl)",
+  "2xl": "var(--container-2xl)",
+  "3xl": "var(--container-3xl)",
+  "4xl": "var(--container-4xl)",
+  "5xl": "var(--container-5xl)",
+  "6xl": "var(--container-6xl)",
+  "7xl": "var(--container-7xl)",
+  prose: "var(--container-prose)"
+};
+function resolveSpacingValue(v, prop) {
+  if (v === "0") {
+    return "0";
+  }
+  if (v === "px") {
+    return "1px";
+  }
+  if (v === "screen") {
+    if (prop && (prop === "height" || prop === "min-height" || prop === "max-height")) {
+      return "100vh";
+    }
+    return "100vw";
+  }
+  if (v in SIZE_KEYWORDS) {
+    return SIZE_KEYWORDS[v];
+  }
+  if (v.startsWith("[") && v.endsWith("]")) {
+    return v.slice(1, -1).replace(/_/g, " ");
+  }
+  if (v.startsWith("(") && v.endsWith(")") && v.includes("--")) {
+    return `var(${v.slice(1, -1)})`;
+  }
+  if (v.includes("/")) {
+    const slash = v.indexOf("/");
+    const num = parseFloat(v.slice(0, slash));
+    const den = parseFloat(v.slice(slash + 1));
+    if (!Number.isNaN(num) && !Number.isNaN(den) && den !== 0) {
+      const pct = num / den * 100;
+      return `${parseFloat(pct.toFixed(6))}%`;
+    }
+  }
+  if (v.startsWith("-") && !Number.isNaN(parseFloat(v.slice(1)))) {
+    return `calc(var(--spacing) * ${v})`;
+  }
+  if (!Number.isNaN(parseFloat(v))) {
+    return `calc(var(--spacing) * ${v})`;
+  }
+  return v;
+}
+const COLOR_PROPS = {
+  bg: "background-color",
+  text: "color",
+  border: "border-color",
+  "border-t": "border-top-color",
+  "border-r": "border-right-color",
+  "border-b": "border-bottom-color",
+  "border-l": "border-left-color",
+  "border-x": "border-inline-color",
+  "border-y": "border-block-color",
+  "border-s": "border-inline-start-color",
+  "border-e": "border-inline-end-color",
+  divide: "border-color",
+  outline: "outline-color",
+  fill: "fill",
+  stroke: "stroke",
+  from: "--tw-gradient-from",
+  via: "--tw-gradient-via",
+  to: "--tw-gradient-to",
+  decoration: "text-decoration-color",
+  accent: "accent-color",
+  caret: "caret-color",
+  shadow: "--tw-shadow-color",
+  "inset-shadow": "--tw-inset-shadow-color",
+  ring: "--tw-ring-color",
+  "ring-offset": "--tw-ring-offset-color",
+  "drop-shadow": "--tw-drop-shadow-color"
+};
+const DIRECT_COLOR_KEYWORDS = /* @__PURE__ */ new Set([
+  "white",
+  "black",
+  "transparent",
+  "inherit",
+  "current",
+  "currentColor"
+]);
+function resolveColorValue(v) {
+  if (DIRECT_COLOR_KEYWORDS.has(v)) {
+    if (v === "current") {
+      return "currentColor";
+    }
+    return v;
+  }
+  if (v.startsWith("[") && v.endsWith("]")) {
+    const inner = v.slice(1, -1).replace(/_/g, " ");
+    if (inner.startsWith("color:")) {
+      return inner.slice(6);
+    }
+    return inner;
+  }
+  if (v.startsWith("(") && v.endsWith(")") && v.includes("--")) {
+    return `var(${v.slice(1, -1)})`;
+  }
+  const slashIdx = v.lastIndexOf("/");
+  if (slashIdx > 0) {
+    const colorPart = v.slice(0, slashIdx);
+    const opacity = v.slice(slashIdx + 1);
+    const colorVar = DIRECT_COLOR_KEYWORDS.has(colorPart) ? colorPart : `var(--color-${colorPart})`;
+    const opacityPct = v.includes(".") ? `${parseFloat(opacity) * 100}%` : `${opacity}%`;
+    return `color-mix(in srgb, ${colorVar} ${opacityPct}, transparent)`;
+  }
+  return `var(--color-${v})`;
+}
+const TEXT_SIZES = /* @__PURE__ */ new Set([
+  "xs",
+  "sm",
+  "base",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "8xl",
+  "9xl"
+]);
+const KEYWORD_RULES = {
+  // Display
+  flex: "display: flex",
+  "inline-flex": "display: inline-flex",
+  block: "display: block",
+  "inline-block": "display: inline-block",
+  inline: "display: inline",
+  grid: "display: grid",
+  "inline-grid": "display: inline-grid",
+  hidden: "display: none",
+  contents: "display: contents",
+  "flow-root": "display: flow-root",
+  table: "display: table",
+  "table-row": "display: table-row",
+  "table-cell": "display: table-cell",
+  "list-item": "display: list-item",
+  // Position
+  static: "position: static",
+  fixed: "position: fixed",
+  absolute: "position: absolute",
+  relative: "position: relative",
+  sticky: "position: sticky",
+  // Visibility
+  visible: "visibility: visible",
+  invisible: "visibility: hidden",
+  collapse: "visibility: collapse",
+  // Overflow
+  "overflow-auto": "overflow: auto",
+  "overflow-hidden": "overflow: hidden",
+  "overflow-visible": "overflow: visible",
+  "overflow-scroll": "overflow: scroll",
+  "overflow-clip": "overflow: clip",
+  "overflow-x-auto": "overflow-x: auto",
+  "overflow-x-hidden": "overflow-x: hidden",
+  "overflow-y-auto": "overflow-y: auto",
+  "overflow-y-hidden": "overflow-y: hidden",
+  "overflow-y-scroll": "overflow-y: scroll",
+  "overflow-x-scroll": "overflow-x: scroll",
+  // Flex direction
+  "flex-row": "flex-direction: row",
+  "flex-col": "flex-direction: column",
+  "flex-row-reverse": "flex-direction: row-reverse",
+  "flex-col-reverse": "flex-direction: column-reverse",
+  // Flex wrap
+  "flex-wrap": "flex-wrap: wrap",
+  "flex-nowrap": "flex-wrap: nowrap",
+  "flex-wrap-reverse": "flex-wrap: wrap-reverse",
+  // Flex sizing
+  "flex-1": "flex: 1 1 0%",
+  "flex-auto": "flex: 1 1 auto",
+  "flex-none": "flex: none",
+  // Align
+  "items-start": "align-items: flex-start",
+  "items-center": "align-items: center",
+  "items-end": "align-items: flex-end",
+  "items-stretch": "align-items: stretch",
+  "items-baseline": "align-items: baseline",
+  "self-start": "align-self: flex-start",
+  "self-center": "align-self: center",
+  "self-end": "align-self: flex-end",
+  "self-stretch": "align-self: stretch",
+  "self-auto": "align-self: auto",
+  // Justify
+  "justify-start": "justify-content: flex-start",
+  "justify-center": "justify-content: center",
+  "justify-end": "justify-content: flex-end",
+  "justify-between": "justify-content: space-between",
+  "justify-around": "justify-content: space-around",
+  "justify-evenly": "justify-content: space-evenly",
+  "justify-stretch": "justify-content: stretch",
+  "justify-items-start": "justify-items: start",
+  "justify-items-center": "justify-items: center",
+  "justify-items-end": "justify-items: end",
+  "justify-items-stretch": "justify-items: stretch",
+  // Place
+  "place-content-center": "place-content: center",
+  "place-content-start": "place-content: start",
+  "place-content-end": "place-content: end",
+  "place-content-between": "place-content: space-between",
+  "place-content-around": "place-content: space-around",
+  "place-content-evenly": "place-content: space-evenly",
+  "place-items-center": "place-items: center",
+  "place-items-start": "place-items: start",
+  "place-items-end": "place-items: end",
+  "place-items-stretch": "place-items: stretch",
+  // Width / Height special
+  "w-auto": "width: auto",
+  "w-full": "width: 100%",
+  "w-screen": "width: 100vw",
+  "w-svw": "width: 100svw",
+  "w-dvw": "width: 100dvw",
+  "w-min": "width: min-content",
+  "w-max": "width: max-content",
+  "w-fit": "width: fit-content",
+  "h-auto": "height: auto",
+  "h-full": "height: 100%",
+  "h-screen": "height: 100vh",
+  "h-svh": "height: 100svh",
+  "h-dvh": "height: 100dvh",
+  "h-min": "height: min-content",
+  "h-max": "height: max-content",
+  "h-fit": "height: fit-content",
+  "min-h-0": "min-height: 0",
+  "min-h-full": "min-height: 100%",
+  "min-h-screen": "min-height: 100vh",
+  "max-h-full": "max-height: 100%",
+  "max-h-screen": "max-height: 100vh",
+  "max-h-none": "max-height: none",
+  "min-w-0": "min-width: 0",
+  "min-w-full": "min-width: 100%",
+  "max-w-full": "max-width: 100%",
+  "max-w-none": "max-width: none",
+  "max-w-screen": "max-width: 100vw",
+  // Font weight keywords
+  "font-thin": "font-weight: 100",
+  "font-extralight": "font-weight: 200",
+  "font-light": "font-weight: 300",
+  "font-normal": "font-weight: 400",
+  "font-medium": "font-weight: 500",
+  "font-semibold": "font-weight: 600",
+  "font-bold": "font-weight: 700",
+  "font-extrabold": "font-weight: 800",
+  "font-black": "font-weight: 900",
+  // Font style
+  italic: "font-style: italic",
+  "not-italic": "font-style: normal",
+  // Text align
+  "text-left": "text-align: left",
+  "text-center": "text-align: center",
+  "text-right": "text-align: right",
+  "text-justify": "text-align: justify",
+  "text-start": "text-align: start",
+  "text-end": "text-align: end",
+  // Text transform
+  uppercase: "text-transform: uppercase",
+  lowercase: "text-transform: lowercase",
+  capitalize: "text-transform: capitalize",
+  "normal-case": "text-transform: none",
+  // Text decoration
+  underline: "text-decoration-line: underline",
+  overline: "text-decoration-line: overline",
+  "line-through": "text-decoration-line: line-through",
+  "no-underline": "text-decoration-line: none",
+  // Text wrap
+  "text-wrap": "text-wrap: wrap",
+  "text-nowrap": "text-wrap: nowrap",
+  "text-balance": "text-wrap: balance",
+  "text-pretty": "text-wrap: pretty",
+  // Whitespace
+  "whitespace-normal": "white-space: normal",
+  "whitespace-nowrap": "white-space: nowrap",
+  "whitespace-pre": "white-space: pre",
+  "whitespace-pre-line": "white-space: pre-line",
+  "whitespace-pre-wrap": "white-space: pre-wrap",
+  "whitespace-break-spaces": "white-space: break-spaces",
+  // Border style
+  "border-solid": "border-style: solid",
+  "border-dashed": "border-style: dashed",
+  "border-dotted": "border-style: dotted",
+  "border-double": "border-style: double",
+  "border-none": "border-style: none",
+  // Rounded special values
+  "rounded-none": "border-radius: 0",
+  "rounded-full": "border-radius: calc(infinity * 1px)",
+  // Cursor
+  "cursor-auto": "cursor: auto",
+  "cursor-default": "cursor: default",
+  "cursor-pointer": "cursor: pointer",
+  "cursor-wait": "cursor: wait",
+  "cursor-text": "cursor: text",
+  "cursor-move": "cursor: move",
+  "cursor-not-allowed": "cursor: not-allowed",
+  "cursor-crosshair": "cursor: crosshair",
+  "cursor-grab": "cursor: grab",
+  "cursor-grabbing": "cursor: grabbing",
+  // Pointer events
+  "pointer-events-none": "pointer-events: none",
+  "pointer-events-auto": "pointer-events: auto",
+  // User select
+  "select-none": "user-select: none",
+  "select-text": "user-select: text",
+  "select-all": "user-select: all",
+  "select-auto": "user-select: auto",
+  // Object fit
+  "object-contain": "object-fit: contain",
+  "object-cover": "object-fit: cover",
+  "object-fill": "object-fit: fill",
+  "object-none": "object-fit: none",
+  "object-scale-down": "object-fit: scale-down",
+  // Truncate
+  truncate: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap",
+  "text-ellipsis": "text-overflow: ellipsis",
+  "text-clip": "text-overflow: clip",
+  // Grow / shrink
+  grow: "flex-grow: 1",
+  "grow-0": "flex-grow: 0",
+  shrink: "flex-shrink: 1",
+  "shrink-0": "flex-shrink: 0",
+  // Appearance
+  "appearance-none": "appearance: none",
+  "appearance-auto": "appearance: auto",
+  // Isolate
+  isolate: "isolation: isolate",
+  "isolation-auto": "isolation: auto",
+  // List style
+  "list-none": "list-style-type: none",
+  "list-disc": "list-style-type: disc",
+  "list-decimal": "list-style-type: decimal",
+  // Box sizing
+  "box-border": "box-sizing: border-box",
+  "box-content": "box-sizing: content-box",
+  // Float
+  "float-left": "float: left",
+  "float-right": "float: right",
+  "float-none": "float: none",
+  "float-start": "float: inline-start",
+  "float-end": "float: inline-end",
+  "clear-left": "clear: left",
+  "clear-right": "clear: right",
+  "clear-both": "clear: both",
+  "clear-none": "clear: none",
+  // SR only
+  "sr-only": "position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0",
+  "not-sr-only": "position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal"
+};
+const OPACITY_NAMED = {
+  0: "0",
+  5: "0.05",
+  10: "0.1",
+  15: "0.15",
+  20: "0.2",
+  25: "0.25",
+  30: "0.3",
+  35: "0.35",
+  40: "0.4",
+  45: "0.45",
+  50: "0.5",
+  55: "0.55",
+  60: "0.6",
+  65: "0.65",
+  70: "0.7",
+  75: "0.75",
+  80: "0.8",
+  85: "0.85",
+  90: "0.9",
+  95: "0.95",
+  100: "1"
+};
+const RADIUS_SIZES = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl", "3xl", "4xl"]);
+function escapeCSSSelector(cls) {
+  return cls.replace(/[^a-zA-Z0-9\-_]/g, (c) => `\\${c}`);
+}
+const MIN_BREAKPOINTS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+const MAX_BREAKPOINTS = /* @__PURE__ */ new Set(["max-sm", "max-md", "max-lg", "max-xl", "max-2xl"]);
+const CONTAINER_MIN = /* @__PURE__ */ new Set(["@sm", "@md", "@lg", "@xl", "@2xl"]);
+const CONTAINER_MAX = /* @__PURE__ */ new Set(["@max-sm", "@max-md", "@max-lg", "@max-xl", "@max-2xl"]);
+function parseVariants(cls) {
+  const parts = cls.split(":");
+  let tier = "base";
+  let pseudoSuffix = "";
+  let selectorPrefix = "";
+  let utilityIdx = 0;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const variant = parts[i];
+    if (MIN_BREAKPOINTS.has(variant)) {
+      tier = variant;
+      utilityIdx = i + 1;
+    } else if (MAX_BREAKPOINTS.has(variant)) {
+      tier = variant;
+      utilityIdx = i + 1;
+    } else if (CONTAINER_MIN.has(variant)) {
+      tier = variant;
+      utilityIdx = i + 1;
+    } else if (CONTAINER_MAX.has(variant)) {
+      tier = variant;
+      utilityIdx = i + 1;
+    } else if (variant === "dark") {
+      selectorPrefix = ".dark ";
+      utilityIdx = i + 1;
+    } else if (variant === "light") {
+      selectorPrefix = ".light ";
+      utilityIdx = i + 1;
+    } else if (variant in PSEUDO_CLASS_MAP) {
+      pseudoSuffix += PSEUDO_CLASS_MAP[variant];
+      utilityIdx = i + 1;
+    } else {
+      utilityIdx = i + 1;
+    }
+  }
+  const utility = parts.slice(utilityIdx).join(":");
+  return { tier, pseudoSuffix, selectorPrefix, utility };
+}
+function generateDeclarations(utility) {
+  if (utility in KEYWORD_RULES) {
+    return KEYWORD_RULES[utility];
+  }
+  if (utility.startsWith("opacity-")) {
+    const val = utility.slice(8);
+    if (val.startsWith("[") && val.endsWith("]")) {
+      return `opacity: ${val.slice(1, -1)}`;
+    }
+    const n = parseInt(val, 10);
+    if (!Number.isNaN(n)) {
+      const v = OPACITY_NAMED[n] ?? String(n / 100);
+      return `opacity: ${v}`;
+    }
+  }
+  if (utility.startsWith("z-")) {
+    const val = utility.slice(2);
+    if (val === "auto") {
+      return "z-index: auto";
+    }
+    if (val.startsWith("[") && val.endsWith("]")) {
+      return `z-index: ${val.slice(1, -1)}`;
+    }
+    if (!Number.isNaN(parseInt(val, 10))) {
+      return `z-index: ${val}`;
+    }
+  }
+  if (utility === "border") {
+    return "border-width: 1px";
+  }
+  if (/^border-[trblxyse]$/.test(utility)) {
+    const side = utility.slice(7);
+    const cssSide = {
+      t: "border-top-width",
+      r: "border-right-width",
+      b: "border-bottom-width",
+      l: "border-left-width",
+      x: "border-inline-width",
+      y: "border-block-width",
+      s: "border-inline-start-width",
+      e: "border-inline-end-width"
+    };
+    if (side in cssSide) {
+      return `${cssSide[side]}: 1px`;
+    }
+  }
+  if (/^border-\d+$/.test(utility)) {
+    const n = utility.slice(7);
+    return `border-width: ${n}px`;
+  }
+  const borderSideWidth = utility.match(/^border-([trblxse])-(\d+)$/);
+  if (borderSideWidth) {
+    const [, side, n] = borderSideWidth;
+    const cssSide = {
+      t: "border-top-width",
+      r: "border-right-width",
+      b: "border-bottom-width",
+      l: "border-left-width",
+      x: "border-inline-width",
+      y: "border-block-width",
+      s: "border-inline-start-width",
+      e: "border-inline-end-width"
+    };
+    if (side in cssSide) {
+      return `${cssSide[side]}: ${n}px`;
+    }
+  }
+  if (utility === "rounded") {
+    return "border-radius: var(--radius)";
+  }
+  if (utility.startsWith("rounded-")) {
+    const val = utility.slice(8);
+    if (val === "none") {
+      return "border-radius: 0";
+    }
+    if (val === "full") {
+      return "border-radius: calc(infinity * 1px)";
+    }
+    if (RADIUS_SIZES.has(val)) {
+      return `border-radius: var(--radius-${val})`;
+    }
+    const roundedDir = {
+      t: "border-top-left-radius: var(--radius); border-top-right-radius: var(--radius)",
+      r: "border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius)",
+      b: "border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius)",
+      l: "border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius)",
+      tl: "border-top-left-radius: var(--radius)",
+      tr: "border-top-right-radius: var(--radius)",
+      bl: "border-bottom-left-radius: var(--radius)",
+      br: "border-bottom-right-radius: var(--radius)"
+    };
+    if (val in roundedDir) {
+      return roundedDir[val];
+    }
+    const m = val.match(/^([trblse]+)-(.+)$/);
+    if (m) {
+      const [, dir, size] = m;
+      const sizeVal = RADIUS_SIZES.has(size) ? `var(--radius-${size})` : size === "full" ? "calc(infinity * 1px)" : size === "none" ? "0" : size;
+      if (dir in roundedDir) {
+        return roundedDir[dir].replace(/var\(--radius\)/g, sizeVal);
+      }
+    }
+    if (val.startsWith("[") && val.endsWith("]")) {
+      return `border-radius: ${val.slice(1, -1)}`;
+    }
+    if (RADIUS_SIZES.has(val)) {
+      return `border-radius: var(--radius-${val})`;
+    }
+  }
+  if (utility.startsWith("text-") && !utility.startsWith("text-opacity")) {
+    const val = utility.slice(5);
+    if (TEXT_SIZES.has(val)) {
+      return `font-size: var(--text-${val}); line-height: var(--tw-leading, var(--text-${val}--line-height))`;
+    }
+    if (val.startsWith("[") && val.endsWith("]")) {
+      return `font-size: ${val.slice(1, -1).replace(/_/g, " ")}`;
+    }
+  }
+  if (utility.startsWith("leading-")) {
+    const val = utility.slice(8);
+    const named = {
+      none: "1",
+      tight: "1.25",
+      snug: "1.375",
+      normal: "1.5",
+      relaxed: "1.625",
+      loose: "2"
+    };
+    if (val in named) {
+      return `line-height: ${named[val]}`;
+    }
+    if (val.startsWith("[") && val.endsWith("]")) {
+      return `line-height: ${val.slice(1, -1)}`;
+    }
+    if (!Number.isNaN(parseFloat(val))) {
+      return `line-height: calc(var(--spacing) * ${val})`;
+    }
+  }
+  if (utility.startsWith("tracking-")) {
+    const val = utility.slice(9);
+    const named = {
+      tighter: "var(--tracking-tighter)",
+      tight: "var(--tracking-tight)",
+      normal: "var(--tracking-normal)",
+      wide: "var(--tracking-wide)",
+      wider: "var(--tracking-wider)",
+      widest: "var(--tracking-widest)"
+    };
+    if (val in named) {
+      return `letter-spacing: ${named[val]}`;
+    }
+    if (val.startsWith("[") && val.endsWith("]")) {
+      return `letter-spacing: ${val.slice(1, -1)}`;
+    }
+  }
+  if (utility.startsWith("font-") && !KEYWORD_RULES[utility]) {
+    const val = utility.slice(5);
+    const familyNames = {
+      sans: "var(--font-sans, ui-sans-serif, system-ui, sans-serif)",
+      serif: "var(--font-serif, ui-serif, Georgia, serif)",
+      mono: "var(--font-mono, ui-monospace, SFMono-Regular, monospace)"
+    };
+    if (val in familyNames) {
+      return `font-family: ${familyNames[val]}`;
+    }
+    if (val.startsWith("[") && val.endsWith("]")) {
+      return `font-family: ${val.slice(1, -1).replace(/_/g, " ")}`;
+    }
+  }
+  if (utility === "shadow") {
+    return "box-shadow: var(--shadow)";
+  }
+  if (utility.startsWith("shadow-")) {
+    const val = utility.slice(7);
+    if (val.startsWith("[") && val.endsWith("]")) {
+      return `box-shadow: ${val.slice(1, -1).replace(/_/g, " ")}`;
+    }
+    const shadows = /* @__PURE__ */ new Set(["xs", "sm", "md", "lg", "xl", "2xl", "none", "inner"]);
+    if (shadows.has(val)) {
+      return val === "none" ? "box-shadow: none" : `box-shadow: var(--shadow-${val})`;
+    }
+  }
+  if (utility === "outline-none") {
+    return "outline: 2px solid transparent; outline-offset: 2px";
+  }
+  if (utility.startsWith("outline-")) {
+    const val = utility.slice(8);
+    if (/^\d+$/.test(val)) {
+      return `outline-width: ${val}px`;
+    }
+  }
+  if (utility === "ring") {
+    return "--tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, #3b82f680)";
+  }
+  if (utility.startsWith("ring-")) {
+    const val = utility.slice(5);
+    if (/^\d+$/.test(val)) {
+      return `--tw-ring-shadow: 0 0 0 ${val}px var(--tw-ring-color, #3b82f680)`;
+    }
+  }
+  if (utility.startsWith("grow-")) {
+    return `flex-grow: ${utility.slice(5)}`;
+  }
+  if (utility.startsWith("shrink-")) {
+    return `flex-shrink: ${utility.slice(7)}`;
+  }
+  if (utility.startsWith("order-")) {
+    const val = utility.slice(6);
+    if (val === "first") {
+      return "order: -9999";
+    }
+    if (val === "last") {
+      return "order: 9999";
+    }
+    if (val === "none") {
+      return "order: 0";
+    }
+    return `order: ${val}`;
+  }
+  if (utility.startsWith("columns-")) {
+    const val = utility.slice(8);
+    if (!Number.isNaN(parseInt(val, 10))) {
+      return `columns: ${val}`;
+    }
+    return `columns: var(--container-${val})`;
+  }
+  if (utility.startsWith("grid-cols-")) {
+    const val = utility.slice(10);
+    if (val === "none") {
+      return "grid-template-columns: none";
+    }
+    if (val === "subgrid") {
+      return "grid-template-columns: subgrid";
+    }
+    if (val.startsWith("[")) {
+      return `grid-template-columns: ${val.slice(1, -1).replace(/_/g, " ")}`;
+    }
+    return `grid-template-columns: repeat(${val}, minmax(0, 1fr))`;
+  }
+  if (utility.startsWith("grid-rows-")) {
+    const val = utility.slice(10);
+    if (val === "none") {
+      return "grid-template-rows: none";
+    }
+    if (val === "subgrid") {
+      return "grid-template-rows: subgrid";
+    }
+    if (val.startsWith("[")) {
+      return `grid-template-rows: ${val.slice(1, -1).replace(/_/g, " ")}`;
+    }
+    return `grid-template-rows: repeat(${val}, minmax(0, 1fr))`;
+  }
+  if (utility.startsWith("col-span-")) {
+    const val = utility.slice(9);
+    return val === "full" ? "grid-column: 1 / -1" : `grid-column: span ${val} / span ${val}`;
+  }
+  if (utility.startsWith("row-span-")) {
+    const val = utility.slice(9);
+    return val === "full" ? "grid-row: 1 / -1" : `grid-row: span ${val} / span ${val}`;
+  }
+  if (utility.startsWith("scale-x-")) {
+    const val = utility.slice(8);
+    return `--tw-scale-x: ${parseFloat(val) / 100}; scale: var(--tw-scale-x) var(--tw-scale-y, 1)`;
+  }
+  if (utility.startsWith("scale-y-")) {
+    const val = utility.slice(8);
+    return `--tw-scale-y: ${parseFloat(val) / 100}; scale: var(--tw-scale-x, 1) var(--tw-scale-y)`;
+  }
+  if (utility.startsWith("scale-")) {
+    const val = utility.slice(6);
+    const n = parseFloat(val) / 100;
+    return `scale: ${n}`;
+  }
+  if (utility.startsWith("rotate-")) {
+    const val = utility.slice(7);
+    if (val.startsWith("[")) {
+      return `rotate: ${val.slice(1, -1)}`;
+    }
+    return `rotate: ${val}deg`;
+  }
+  if (utility.startsWith("translate-x-")) {
+    const val = utility.slice(12);
+    const v = resolveSpacingValue(val, "width");
+    return `translate: ${v} var(--tw-translate-y, 0)`;
+  }
+  if (utility.startsWith("translate-y-")) {
+    const val = utility.slice(12);
+    const v = resolveSpacingValue(val, "height");
+    return `translate: var(--tw-translate-x, 0) ${v}`;
+  }
+  if (utility === "transition") {
+    return "transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: var(--tw-ease, ease); transition-duration: var(--tw-duration, 150ms)";
+  }
+  if (utility === "transition-all") {
+    return "transition-property: all; transition-timing-function: var(--tw-ease, ease); transition-duration: var(--tw-duration, 150ms)";
+  }
+  if (utility === "transition-none") {
+    return "transition-property: none";
+  }
+  if (utility.startsWith("duration-")) {
+    const val = utility.slice(9);
+    if (val.startsWith("[")) {
+      return `transition-duration: ${val.slice(1, -1)}`;
+    }
+    return `transition-duration: ${val}ms`;
+  }
+  if (utility.startsWith("ease-")) {
+    const eases = {
+      linear: "linear",
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    const val = utility.slice(5);
+    if (val in eases) {
+      return `transition-timing-function: ${eases[val]}`;
+    }
+    return `transition-timing-function: var(--ease-${val})`;
+  }
+  if (utility.startsWith("delay-")) {
+    const val = utility.slice(6);
+    if (val.startsWith("[")) {
+      return `transition-delay: ${val.slice(1, -1)}`;
+    }
+    return `transition-delay: ${val}ms`;
+  }
+  const colorPrefixes = Object.keys(COLOR_PROPS).sort((a, b) => b.length - a.length);
+  for (const prefix of colorPrefixes) {
+    if (utility === prefix || utility.startsWith(`${prefix}-`)) {
+      const rest = utility.slice(prefix.length + 1);
+      if (!rest && utility !== prefix) {
+        continue;
+      }
+      if (!rest && utility === prefix) {
+        continue;
+      }
+      const cssProp = COLOR_PROPS[prefix];
+      const colorVal = resolveColorValue(rest);
+      return `${cssProp}: ${colorVal}`;
+    }
+  }
+  const spacingPrefixes = Object.keys(SPACING_PROPS).sort((a, b) => b.length - a.length);
+  for (const prefix of spacingPrefixes) {
+    const dashPrefix = `${prefix}-`;
+    if (utility.startsWith(dashPrefix)) {
+      const val = utility.slice(dashPrefix.length);
+      const negative = val.startsWith("-");
+      const rawVal = negative ? val.slice(1) : val;
+      const props = SPACING_PROPS[prefix];
+      const resolved = resolveSpacingValue(negative ? `-${rawVal}` : rawVal, props[0]);
+      if (!resolved) {
+        continue;
+      }
+      return props.map((p) => `${p}: ${resolved}`).join("; ");
+    }
+  }
+  if (utility.startsWith("[") && utility.endsWith("]") && utility.includes(":")) {
+    const inner = utility.slice(1, -1).replace(/_/g, " ");
+    const colonIdx = inner.indexOf(":");
+    const prop = inner.slice(0, colonIdx);
+    const val = inner.slice(colonIdx + 1);
+    return `${prop}: ${val}`;
+  }
+  return "";
+}
+function generateCSSRule(className) {
+  const { utility, pseudoSuffix, selectorPrefix } = parseVariants(className);
+  const declarations = generateDeclarations(utility);
+  if (!declarations) {
+    return "";
+  }
+  const escapedClass = escapeCSSSelector(className);
+  const selector = `${selectorPrefix}.${escapedClass}${pseudoSuffix}`;
+  return `${selector} { ${declarations} }`;
+}
+
+const TIER_ORDER = [
+  "base",
+  // viewport min-width (ascending — sm wins over base, lg wins over md)
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  // viewport max-width (descending size — max-sm is most restrictive, must win)
+  "max-2xl",
+  "max-xl",
+  "max-lg",
+  "max-md",
+  "max-sm",
+  // container query min (ascending)
+  "@sm",
+  "@md",
+  "@lg",
+  "@xl",
+  "@2xl",
+  // container query max (descending)
+  "@max-2xl",
+  "@max-xl",
+  "@max-lg",
+  "@max-md",
+  "@max-sm"
+];
+const TIER_SET = new Set(TIER_ORDER);
+function supportsConstructableSheets() {
+  return typeof document !== "undefined" && typeof CSSStyleSheet !== "undefined" && "adoptedStyleSheets" in document;
+}
+let sheets = null;
+let fallbackStyle = null;
+const injected = /* @__PURE__ */ new Set();
+function wrapForTier(cssRule, tier) {
+  if (tier === "base") {
+    return cssRule;
+  }
+  if (tier.startsWith("@")) {
+    const bp = tier.slice(1);
+    const bpValue2 = BREAKPOINTS[bp];
+    if (!bpValue2) {
+      return cssRule;
+    }
+    const query2 = bp.startsWith("max-") ? `(width <= ${bpValue2})` : `(width >= ${bpValue2})`;
+    return `@container ${query2} { ${cssRule} }`;
+  }
+  const bpValue = BREAKPOINTS[tier];
+  if (!bpValue) {
+    return cssRule;
+  }
+  const query = tier.startsWith("max-") ? `(max-width: ${bpValue})` : `(min-width: ${bpValue})`;
+  return `@media ${query} { ${cssRule} }`;
+}
+function initSheets() {
+  const map = /* @__PURE__ */ new Map();
+  const adopted = [];
+  for (const tier of TIER_ORDER) {
+    const sheet = new CSSStyleSheet();
+    map.set(tier, sheet);
+    adopted.push(sheet);
+  }
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, ...adopted];
+  return map;
+}
+function initFallbackStyle() {
+  const el = document.createElement("style");
+  el.id = "__csszyx_dynamic__";
+  document.head.appendChild(el);
+  return el;
+}
+function resolveTier(className) {
+  const colonIdx = className.indexOf(":");
+  if (colonIdx === -1) {
+    return "base";
+  }
+  const prefix = className.slice(0, colonIdx);
+  const normalizedPrefix = prefix.startsWith("@") ? prefix : prefix;
+  if (TIER_SET.has(normalizedPrefix)) {
+    return normalizedPrefix;
+  }
+  return "base";
+}
+function injectRule(className, cssRule, tier = "base") {
+  if (injected.has(className)) {
+    return;
+  }
+  injected.add(className);
+  if (!cssRule) {
+    return;
+  }
+  if (supportsConstructableSheets()) {
+    if (!sheets) {
+      sheets = initSheets();
+    }
+    const resolved = sheets.get(tier) ?? sheets.get("base");
+    if (!resolved) {
+      return;
+    }
+    const sheet = resolved;
+    const rule = wrapForTier(cssRule, tier);
+    try {
+      sheet.insertRule(rule, sheet.cssRules.length);
+    } catch {
+    }
+  } else {
+    if (!fallbackStyle) {
+      fallbackStyle = initFallbackStyle();
+    }
+    const rule = wrapForTier(cssRule, tier);
+    fallbackStyle.sheet?.insertRule(rule, fallbackStyle.sheet.cssRules.length);
+  }
+}
+function cleanup$1() {
+  if (sheets) {
+    const tierSheets = new Set(sheets.values());
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s) => !tierSheets.has(s));
+    sheets = null;
+  }
+  if (fallbackStyle) {
+    fallbackStyle.remove();
+    fallbackStyle = null;
+  }
+  injected.clear();
+}
+
+let manifestClasses = null;
+let mangleMap = null;
+let manifestUrl = "/csszyx-manifest.json";
+let fetchPromise = null;
+function setManifestUrl(url) {
+  manifestUrl = url;
+}
+function ensureManifest() {
+  if (manifestClasses !== null) {
+    return Promise.resolve();
+  }
+  if (fetchPromise) {
+    return fetchPromise;
+  }
+  fetchPromise = fetch(manifestUrl).then((r) => {
+    if (!r.ok) {
+      throw new Error(`csszyx: manifest fetch failed ${r.status}`);
+    }
+    return r.json();
+  }).then((data) => {
+    manifestClasses = new Set(data.classes);
+    mangleMap = data.mangleMap ?? null;
+  }).catch(() => {
+    manifestClasses = /* @__PURE__ */ new Set();
+    mangleMap = null;
+    fetchPromise = null;
+  });
+  return fetchPromise;
+}
+async function preloadManifest$1(url) {
+  if (url) {
+    setManifestUrl(url);
+  }
+  return ensureManifest();
+}
+function lookupManifest(originalClass) {
+  if (manifestClasses === null) {
+    return null;
+  }
+  if (!manifestClasses.has(originalClass)) {
+    return null;
+  }
+  if (mangleMap && originalClass in mangleMap) {
+    return mangleMap[originalClass];
+  }
+  return originalClass;
+}
+function resetManifest() {
+  manifestClasses = null;
+  mangleMap = null;
+  fetchPromise = null;
+  manifestUrl = "/csszyx-manifest.json";
+}
+
+const isServer = typeof document === "undefined";
+
+function dynamic(szProps) {
+  const { className } = transform(szProps);
+  if (!className) {
+    return "";
+  }
+  if (isServer) {
+    const ssrMangleMap = globalThis.__csszyx_ssr_mangle_map;
+    if (ssrMangleMap) {
+      return className.split(" ").filter(Boolean).map((c) => ssrMangleMap[c] ?? c).join(" ");
+    }
+    return className;
+  }
+  ensureManifest();
+  const classes = className.split(" ").filter(Boolean);
+  const outputClasses = [];
+  for (const cls of classes) {
+    const manifestResult = lookupManifest(cls);
+    if (manifestResult !== null) {
+      outputClasses.push(manifestResult);
+    } else {
+      const tier = resolveTier(cls);
+      const rule = generateCSSRule(cls);
+      injectRule(cls, rule, tier);
+      outputClasses.push(cls);
+    }
+  }
+  return outputClasses.join(" ");
+}
+async function preloadManifest(url) {
+  return preloadManifest$1(url);
+}
+function cleanup() {
+  cleanup$1();
+  resetManifest();
+}
+
+export { cleanup as a, preloadManifest as b, cleanup$1 as c, dynamic as d, preloadManifest$1 as p, resetManifest as r, setManifestUrl as s };