@kbach/react 0.1.6 → 0.2.0

package/dist/jsx-runtime.js

@@ -36,15 +36,1941 @@ __export(jsx_runtime_exports, {
 });
 module.exports = __toCommonJS(jsx_runtime_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_core4 = require("@kbach/core");
+
+// src/core/theme.ts
+var defaultColors = {
+  transparent: "transparent",
+  current: "currentColor",
+  black: "#000000",
+  white: "#ffffff",
+  slate: {
+    1: "#f8f9fc",
+    2: "#edf0f8",
+    3: "#dde3f2",
+    4: "#c5cee8",
+    5: "#9badd3",
+    6: "#6c87b6",
+    7: "#526b98",
+    8: "#3e5479",
+    9: "#2d3f5e",
+    10: "#1d2b42",
+    11: "#0f1828"
+  },
+  gray: {
+    1: "#f9f9f9",
+    2: "#f3f3f3",
+    3: "#e6e6e7",
+    4: "#d2d2d4",
+    5: "#aaaaad",
+    6: "#757578",
+    7: "#585860",
+    8: "#434349",
+    9: "#2c2c32",
+    10: "#1c1c21",
+    11: "#0c0c0f"
+  },
+  zinc: {
+    1: "#fafafa",
+    2: "#f4f4f5",
+    3: "#e8e8ea",
+    4: "#d3d4d7",
+    5: "#a9aaae",
+    6: "#74757c",
+    7: "#57585f",
+    8: "#42434b",
+    9: "#2a2b31",
+    10: "#1a1b20",
+    11: "#0b0b0e"
+  },
+  neutral: {
+    1: "#fafafa",
+    2: "#f5f5f5",
+    3: "#e9e9e9",
+    4: "#d5d5d5",
+    5: "#ababab",
+    6: "#777777",
+    7: "#5a5a5a",
+    8: "#444444",
+    9: "#2d2d2d",
+    10: "#1d1d1d",
+    11: "#0d0d0d"
+  },
+  stone: {
+    1: "#fafaf8",
+    2: "#f5f4f1",
+    3: "#e9e6e0",
+    4: "#d6d0c8",
+    5: "#b3ab9c",
+    6: "#7e7568",
+    7: "#605850",
+    8: "#4a4440",
+    9: "#302c28",
+    10: "#201d1a",
+    11: "#100f0c"
+  },
+  red: {
+    1: "#fff4f3",
+    2: "#ffe8e6",
+    3: "#ffd1ce",
+    4: "#ffaba5",
+    5: "#ff7b73",
+    6: "#f44642",
+    7: "#d6302c",
+    8: "#be2020",
+    9: "#961515",
+    10: "#6e0f0f",
+    11: "#3e0606"
+  },
+  orange: {
+    1: "#fff8ec",
+    2: "#ffedce",
+    3: "#ffdda0",
+    4: "#ffc06a",
+    5: "#ff9c32",
+    6: "#f47c0c",
+    7: "#cc6205",
+    8: "#a34b04",
+    9: "#7d3806",
+    10: "#5b2807",
+    11: "#311502"
+  },
+  amber: {
+    1: "#fffbea",
+    2: "#fff5c7",
+    3: "#ffeb85",
+    4: "#ffd944",
+    5: "#f8c00e",
+    6: "#e4a500",
+    7: "#bd8300",
+    8: "#956600",
+    9: "#704c00",
+    10: "#513600",
+    11: "#2d1e00"
+  },
+  yellow: {
+    1: "#ffffe8",
+    2: "#ffffc8",
+    3: "#fffb82",
+    4: "#fff342",
+    5: "#f5da0e",
+    6: "#e1bd00",
+    7: "#bb9a00",
+    8: "#947800",
+    9: "#6f5900",
+    10: "#514200",
+    11: "#2d2500"
+  },
+  lime: {
+    1: "#f5ffe8",
+    2: "#eaffca",
+    3: "#d5ff90",
+    4: "#b8f658",
+    5: "#97e422",
+    6: "#74c90b",
+    7: "#5aa407",
+    8: "#457e08",
+    9: "#346008",
+    10: "#254408",
+    11: "#132505"
+  },
+  green: {
+    1: "#f0fdf5",
+    2: "#dcfce9",
+    3: "#b8f4d2",
+    4: "#84e8b1",
+    5: "#47d38d",
+    6: "#1cb86d",
+    7: "#129a57",
+    8: "#0e7b45",
+    9: "#0d6035",
+    10: "#0b4f2d",
+    11: "#042a18"
+  },
+  emerald: {
+    1: "#ecfdf7",
+    2: "#d0fcea",
+    3: "#a5f4d6",
+    4: "#6aeabc",
+    5: "#35d49f",
+    6: "#10b982",
+    7: "#099768",
+    8: "#087a53",
+    9: "#0a5f43",
+    10: "#094e37",
+    11: "#032b1f"
+  },
+  teal: {
+    1: "#efffff",
+    2: "#ccfcf8",
+    3: "#99f7f1",
+    4: "#60eee6",
+    5: "#2cdad3",
+    6: "#13bebc",
+    7: "#0d9997",
+    8: "#0d7a78",
+    9: "#0e6160",
+    10: "#0d4f4e",
+    11: "#063535"
+  },
+  cyan: {
+    1: "#ecfeff",
+    2: "#cffcfe",
+    3: "#a3f6fc",
+    4: "#67ebfa",
+    5: "#23d7f5",
+    6: "#07bde0",
+    7: "#0898b8",
+    8: "#0c7896",
+    9: "#135f78",
+    10: "#134e65",
+    11: "#053143"
+  },
+  sky: {
+    1: "#f0f8ff",
+    2: "#e0f2fe",
+    3: "#bde3fd",
+    4: "#89cffa",
+    5: "#48b4f8",
+    6: "#149aeb",
+    7: "#057ec8",
+    8: "#0664a4",
+    9: "#0a5087",
+    10: "#0d4270",
+    11: "#082748"
+  },
+  blue: {
+    1: "#eff5ff",
+    2: "#dde9fe",
+    3: "#bdd2fd",
+    4: "#8db1fb",
+    5: "#5a89f7",
+    6: "#2f64f3",
+    7: "#1b4de6",
+    8: "#1740cc",
+    9: "#142da8",
+    10: "#102080",
+    11: "#0b144f"
+  },
+  indigo: {
+    1: "#eff1ff",
+    2: "#e2e7ff",
+    3: "#c9d1ff",
+    4: "#a9b4ff",
+    5: "#8590fe",
+    6: "#6267f3",
+    7: "#4f51e7",
+    8: "#4240d0",
+    9: "#3434ae",
+    10: "#292888",
+    11: "#181854"
+  },
+  violet: {
+    1: "#f5f3ff",
+    2: "#ede9ff",
+    3: "#ddd5fe",
+    4: "#c6b8fd",
+    5: "#a893fa",
+    6: "#8a69f7",
+    7: "#7248ec",
+    8: "#6137d6",
+    9: "#4f28ae",
+    10: "#3f218e",
+    11: "#250f58"
+  },
+  purple: {
+    1: "#fbf3ff",
+    2: "#f4e8ff",
+    3: "#e9cfff",
+    4: "#d8adfd",
+    5: "#bf7cfa",
+    6: "#a650f5",
+    7: "#8f30e7",
+    8: "#7c1fce",
+    9: "#671caa",
+    10: "#521885",
+    11: "#300860"
+  },
+  fuchsia: {
+    1: "#fef3ff",
+    2: "#fbe8ff",
+    3: "#f6cfff",
+    4: "#efaaff",
+    5: "#e672fb",
+    6: "#d748ef",
+    7: "#be20d3",
+    8: "#a41ab5",
+    9: "#86168e",
+    10: "#631470",
+    11: "#42024a"
+  },
+  pink: {
+    1: "#fef2f8",
+    2: "#fde7f3",
+    3: "#fbcde7",
+    4: "#f8a8d1",
+    5: "#f36cb8",
+    6: "#ea3f98",
+    7: "#d4217c",
+    8: "#be1965",
+    9: "#9c1651",
+    10: "#74143e",
+    11: "#450827"
+  },
+  rose: {
+    1: "#fff2f3",
+    2: "#ffe5e8",
+    3: "#ffcacd",
+    4: "#ff9fa7",
+    5: "#fd6b77",
+    6: "#f43e52",
+    7: "#e01e31",
+    8: "#c0152c",
+    9: "#9a1222",
+    10: "#701019",
+    11: "#420611"
+  }
+};
+var defaultTheme = {
+  colors: defaultColors,
+  // 1 unit = 4px
+  spacing: {
+    px: 1,
+    0: 0,
+    "0.5": 2,
+    1: 4,
+    "1.5": 6,
+    2: 8,
+    "2.5": 10,
+    3: 12,
+    "3.5": 14,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40,
+    11: 44,
+    12: 48,
+    14: 56,
+    16: 64,
+    20: 80,
+    24: 96,
+    28: 112,
+    32: 128,
+    36: 144,
+    40: 160,
+    44: 176,
+    48: 192,
+    52: 208,
+    56: 224,
+    60: 240,
+    64: 256,
+    72: 288,
+    80: 320,
+    96: 384,
+    auto: "auto",
+    full: "100%",
+    "1/2": "50%",
+    "1/3": "33.333333%",
+    "2/3": "66.666667%",
+    "1/4": "25%",
+    "3/4": "75%",
+    screen: "100vh",
+    min: "min-content",
+    max: "max-content",
+    fit: "fit-content"
+  },
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+    "5xl": 48,
+    "6xl": 60,
+    "7xl": 72,
+    "8xl": 96,
+    "9xl": 128
+  },
+  fontFamily: {
+    sans: "System",
+    mono: "Courier New",
+    serif: "Georgia"
+  },
+  fontWeight: {
+    thin: "100",
+    extralight: "200",
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900"
+  },
+  borderRadius: {
+    none: 0,
+    sm: 2,
+    DEFAULT: 4,
+    md: 6,
+    lg: 8,
+    xl: 12,
+    "2xl": 16,
+    "3xl": 24,
+    full: 9999
+  },
+  borderWidth: {
+    DEFAULT: 1,
+    0: 0,
+    2: 2,
+    4: 4,
+    8: 8
+  },
+  opacity: {
+    0: 0,
+    5: 0.05,
+    10: 0.1,
+    15: 0.15,
+    20: 0.2,
+    25: 0.25,
+    30: 0.3,
+    40: 0.4,
+    50: 0.5,
+    60: 0.6,
+    70: 0.7,
+    75: 0.75,
+    80: 0.8,
+    90: 0.9,
+    95: 0.95,
+    100: 1
+  },
+  lineHeight: {
+    none: 1,
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40
+  },
+  letterSpacing: {
+    tighter: -0.8,
+    tight: -0.4,
+    normal: 0,
+    wide: 0.4,
+    wider: 0.8,
+    widest: 1.6
+  },
+  zIndex: {
+    auto: "auto",
+    0: 0,
+    10: 10,
+    20: 20,
+    30: 30,
+    40: 40,
+    50: 50
+  },
+  flex: {
+    1: 1,
+    auto: 1,
+    initial: 0,
+    none: 0
+  },
+  shadow: {
+    sm: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 2,
+      elevation: 1
+    },
+    DEFAULT: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 2
+    },
+    md: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.1,
+      shadowRadius: 8,
+      elevation: 3
+    },
+    lg: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.1,
+      shadowRadius: 15,
+      elevation: 4
+    },
+    xl: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 16 },
+      shadowOpacity: 0.1,
+      shadowRadius: 24,
+      elevation: 6
+    },
+    "2xl": {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 24 },
+      shadowOpacity: 0.25,
+      shadowRadius: 48,
+      elevation: 8
+    },
+    none: {
+      shadowColor: "transparent",
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0
+    }
+  },
+  screens: {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  }
+};
+
+// src/core/cache.ts
+var LRUCache = class {
+  constructor(capacity = 1e4) {
+    this.capacity = capacity;
+    this.cache = /* @__PURE__ */ new Map();
+  }
+  get(key) {
+    if (!this.cache.has(key)) return void 0;
+    const value = this.cache.get(key);
+    this.cache.delete(key);
+    this.cache.set(key, value);
+    return value;
+  }
+  set(key, value) {
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.capacity) {
+      this.cache.delete(this.cache.keys().next().value);
+    }
+    this.cache.set(key, value);
+    return this;
+  }
+  has(key) {
+    return this.cache.has(key);
+  }
+  delete(key) {
+    return this.cache.delete(key);
+  }
+  clear() {
+    this.cache.clear();
+  }
+  get size() {
+    return this.cache.size;
+  }
+};
+
+// src/core/platform.ts
+var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+function toNativeValue(raw) {
+  if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
+  if (/^-?\d+(\.\d+)?rem$/.test(raw)) return parseFloat(raw) * 16;
+  if (/^-?\d+(\.\d+)?em$/.test(raw)) return parseFloat(raw) * 16;
+  if (/^-?\d+(\.\d+)?$/.test(raw)) return parseFloat(raw);
+  return raw;
+}
+function escapeCSSSelector(cls) {
+  return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+}
+
+// src/core/parser.ts
+var MODIFIERS = /* @__PURE__ */ new Set([
+  // Theme
+  "dark",
+  "light",
+  "not-dark",
+  "not-light",
+  // Interaction
+  "hover",
+  "focus",
+  "active",
+  "visited",
+  "disabled",
+  "checked",
+  "pressed",
+  "placeholder",
+  "focus-within",
+  "focus-visible",
+  // Negated interaction
+  "not-hover",
+  "not-focus",
+  "not-active",
+  "not-visited",
+  "not-disabled",
+  "not-checked",
+  "not-pressed",
+  // Structural
+  "first",
+  "last",
+  "odd",
+  "even",
+  "only",
+  // Group / peer
+  "group-hover",
+  "group-focus",
+  "peer-hover",
+  "peer-focus",
+  // Responsive (handled separately but accepted)
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl"
+]);
+var UTILITY_PREFIXES = [
+  // Multi-word order matters
+  "flex-row-reverse",
+  "flex-col-reverse",
+  "flex-row",
+  "flex-col",
+  "flex-wrap-reverse",
+  "flex-wrap",
+  "flex-nowrap",
+  "flex-shrink-0",
+  "flex-shrink",
+  "flex-grow-0",
+  "flex-grow",
+  "items-start",
+  "items-end",
+  "items-center",
+  "items-baseline",
+  "items-stretch",
+  "justify-start",
+  "justify-end",
+  "justify-center",
+  "justify-between",
+  "justify-around",
+  "justify-evenly",
+  "content-start",
+  "content-end",
+  "content-center",
+  "content-between",
+  "content-around",
+  "content-evenly",
+  "self-start",
+  "self-end",
+  "self-center",
+  "self-auto",
+  "self-stretch",
+  "text-left",
+  "text-right",
+  "text-center",
+  "text-justify",
+  "font-thin",
+  "font-extralight",
+  "font-light",
+  "font-normal",
+  "font-medium",
+  "font-semibold",
+  "font-bold",
+  "font-extrabold",
+  "font-black",
+  "overflow-hidden",
+  "overflow-visible",
+  "overflow-scroll",
+  "overflow-auto",
+  "overflow-x-hidden",
+  "overflow-x-scroll",
+  "overflow-x-auto",
+  "overflow-y-hidden",
+  "overflow-y-scroll",
+  "overflow-y-auto",
+  "object-contain",
+  "object-cover",
+  "object-fill",
+  "object-none",
+  "object-scale-down",
+  "border-solid",
+  "border-dashed",
+  "border-dotted",
+  "border-none",
+  "border-t",
+  "border-r",
+  "border-b",
+  "border-l",
+  "rounded-tl",
+  "rounded-tr",
+  "rounded-bl",
+  "rounded-br",
+  "rounded-t",
+  "rounded-r",
+  "rounded-b",
+  "rounded-l",
+  "text-decoration-none",
+  "list-none",
+  "list-disc",
+  "list-decimal",
+  "cursor-auto",
+  "cursor-default",
+  "cursor-pointer",
+  "cursor-wait",
+  "cursor-text",
+  "cursor-move",
+  "cursor-not-allowed",
+  "select-none",
+  "select-text",
+  "select-all",
+  "select-auto",
+  "pointer-events-none",
+  "pointer-events-auto",
+  "whitespace-normal",
+  "whitespace-nowrap",
+  "whitespace-pre-wrap",
+  "whitespace-pre-line",
+  "whitespace-pre",
+  "break-normal",
+  "break-words",
+  "break-all",
+  "break-keep",
+  "bg-clip-border",
+  "bg-clip-padding",
+  "bg-clip-content",
+  "bg-clip-text",
+  "resize-none",
+  "resize-y",
+  "resize-x",
+  "box-border",
+  "box-content",
+  "gap-x",
+  "gap-y",
+  "inset-x",
+  "inset-y",
+  "divide-x",
+  "divide-y",
+  "space-x",
+  "space-y",
+  "translate-x",
+  "translate-y",
+  "scale-x",
+  "scale-y",
+  "skew-x",
+  "skew-y",
+  "origin-center",
+  "origin-top",
+  "origin-top-right",
+  "origin-right",
+  "origin-bottom-right",
+  "origin-bottom",
+  "origin-bottom-left",
+  "origin-left",
+  "origin-top-left",
+  "min-w",
+  "min-h",
+  "max-w",
+  "max-h",
+  "ring-offset",
+  "bg-opacity",
+  "text-opacity",
+  "border-opacity",
+  // Single-word prefixes last
+  "appearance-none",
+  "outline-none",
+  "outline",
+  "inline-flex",
+  "inline-block",
+  "inline-grid",
+  "italic",
+  "non-italic",
+  "underline",
+  "overline",
+  "line-through",
+  "no-underline",
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "normal-case",
+  "antialiased",
+  "truncate",
+  "sr-only",
+  "not-sr-only",
+  "relative",
+  "absolute",
+  "fixed",
+  "sticky",
+  "static",
+  "visible",
+  "invisible",
+  "hidden",
+  "contents",
+  "flow-root",
+  "block",
+  "inline",
+  "flex",
+  "grid",
+  "resize",
+  "appearance",
+  "border",
+  "rounded",
+  "shadow",
+  "opacity",
+  "leading",
+  "tracking",
+  "basis",
+  "grow",
+  "shrink",
+  "order",
+  "delay",
+  "duration",
+  "scale",
+  "rotate",
+  "aspect",
+  "columns",
+  "placeholder",
+  "ring",
+  "gap",
+  "inset",
+  "bg",
+  "text",
+  "font",
+  "from",
+  "via",
+  "to",
+  "divide",
+  "space",
+  "transition",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "p",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "m",
+  "w",
+  "h",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "z",
+  "col",
+  "row",
+  "flex"
+  // also a standalone
+];
+var SORTED_PREFIXES = [...new Set(UTILITY_PREFIXES)].sort((a, b) => b.length - a.length);
+var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
+  "flex",
+  "block",
+  "inline-block",
+  "inline",
+  "grid",
+  "inline-flex",
+  "inline-grid",
+  "hidden",
+  "contents",
+  "flow-root",
+  "relative",
+  "absolute",
+  "fixed",
+  "sticky",
+  "static",
+  "visible",
+  "invisible",
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "normal-case",
+  "italic",
+  "non-italic",
+  "underline",
+  "overline",
+  "line-through",
+  "no-underline",
+  "truncate",
+  "antialiased",
+  "sr-only",
+  "not-sr-only",
+  "flex-row",
+  "flex-col",
+  "flex-row-reverse",
+  "flex-col-reverse",
+  "flex-wrap",
+  "flex-wrap-reverse",
+  "flex-nowrap",
+  "flex-shrink",
+  "flex-shrink-0",
+  "flex-grow",
+  "flex-grow-0",
+  "items-start",
+  "items-end",
+  "items-center",
+  "items-baseline",
+  "items-stretch",
+  "justify-start",
+  "justify-end",
+  "justify-center",
+  "justify-between",
+  "justify-around",
+  "justify-evenly",
+  "content-start",
+  "content-end",
+  "content-center",
+  "content-between",
+  "content-around",
+  "content-evenly",
+  "self-start",
+  "self-end",
+  "self-center",
+  "self-auto",
+  "self-stretch",
+  "text-left",
+  "text-right",
+  "text-center",
+  "text-justify",
+  "font-thin",
+  "font-extralight",
+  "font-light",
+  "font-normal",
+  "font-medium",
+  "font-semibold",
+  "font-bold",
+  "font-extrabold",
+  "font-black",
+  "overflow-hidden",
+  "overflow-visible",
+  "overflow-scroll",
+  "overflow-auto",
+  "overflow-x-hidden",
+  "overflow-x-scroll",
+  "overflow-x-auto",
+  "overflow-y-hidden",
+  "overflow-y-scroll",
+  "overflow-y-auto",
+  "object-contain",
+  "object-cover",
+  "object-fill",
+  "object-none",
+  "object-scale-down",
+  "border-solid",
+  "border-dashed",
+  "border-dotted",
+  "border-none",
+  "border-t",
+  "border-r",
+  "border-b",
+  "border-l",
+  "list-none",
+  "list-disc",
+  "list-decimal",
+  "cursor-auto",
+  "cursor-default",
+  "cursor-pointer",
+  "cursor-wait",
+  "cursor-text",
+  "cursor-move",
+  "cursor-not-allowed",
+  "select-none",
+  "select-text",
+  "select-all",
+  "select-auto",
+  "pointer-events-none",
+  "pointer-events-auto",
+  "whitespace-normal",
+  "whitespace-nowrap",
+  "whitespace-pre",
+  "whitespace-pre-wrap",
+  "whitespace-pre-line",
+  "break-normal",
+  "break-words",
+  "break-all",
+  "bg-clip-border",
+  "bg-clip-padding",
+  "bg-clip-content",
+  "bg-clip-text",
+  "box-border",
+  "box-content",
+  "resize",
+  "resize-none",
+  "resize-y",
+  "resize-x",
+  "appearance-none",
+  "outline-none",
+  "outline"
+]);
+function parseClass(className) {
+  const trimmed = className.trim();
+  if (!trimmed) return null;
+  const modifiers = [];
+  let remaining = trimmed;
+  for (let i = 0; i < 3; i++) {
+    const colonIdx = findOuterColon(remaining);
+    if (colonIdx === -1) break;
+    const candidate = remaining.slice(0, colonIdx);
+    if (MODIFIERS.has(candidate)) {
+      modifiers.push(candidate);
+      remaining = remaining.slice(colonIdx + 1);
+    } else {
+      break;
+    }
+  }
+  let negative = false;
+  if (remaining.startsWith("-") && remaining.length > 1 && remaining[1] !== "-") {
+    negative = true;
+    remaining = remaining.slice(1);
+  }
+  const bracketStart = remaining.lastIndexOf("-[");
+  if (bracketStart > 0 && remaining.endsWith("]")) {
+    const utility = remaining.slice(0, bracketStart);
+    const value = remaining.slice(bracketStart + 2, -1);
+    return { original: trimmed, modifiers, negative, utility, value, isArbitrary: true };
+  }
+  if (STANDALONE_UTILITIES.has(remaining)) {
+    return { original: trimmed, modifiers, negative, utility: remaining, value: "", isArbitrary: false };
+  }
+  for (const prefix of SORTED_PREFIXES) {
+    if (remaining === prefix) {
+      return { original: trimmed, modifiers, negative, utility: prefix, value: "", isArbitrary: false };
+    }
+    if (remaining.startsWith(prefix + "-")) {
+      const value = remaining.slice(prefix.length + 1);
+      return { original: trimmed, modifiers, negative, utility: prefix, value, isArbitrary: false };
+    }
+  }
+  const firstDash = remaining.indexOf("-");
+  if (firstDash > 0) {
+    return {
+      original: trimmed,
+      modifiers,
+      negative,
+      utility: remaining.slice(0, firstDash),
+      value: remaining.slice(firstDash + 1),
+      isArbitrary: false
+    };
+  }
+  return { original: trimmed, modifiers, negative, utility: remaining, value: "", isArbitrary: false };
+}
+function parseClasses(classString) {
+  const results = [];
+  for (const token of classString.split(/\s+/)) {
+    if (!token) continue;
+    const parsed = parseClass(token);
+    if (parsed) results.push(parsed);
+  }
+  return results;
+}
+function findOuterColon(s) {
+  let depth = 0;
+  for (let i = 0; i < s.length; i++) {
+    const ch = s[i];
+    if (ch === "[") depth++;
+    else if (ch === "]") depth--;
+    else if (ch === ":" && depth === 0) return i;
+  }
+  return -1;
+}
+
+// src/core/utilities.ts
+function resolveColor(value, colors, isArbitrary) {
+  if (isArbitrary) return value;
+  const slashIdx = value.indexOf("/");
+  const colorPart = slashIdx > 0 ? value.slice(0, slashIdx) : value;
+  const opacityPart = slashIdx > 0 ? value.slice(slashIdx + 1) : null;
+  let hex = null;
+  if (colorPart in colors) {
+    const entry = colors[colorPart];
+    if (typeof entry === "string") hex = entry;
+    else if (typeof entry === "object" && "6" in entry) hex = entry["6"];
+  } else {
+    const lastDash = colorPart.lastIndexOf("-");
+    if (lastDash > 0) {
+      const colorName = colorPart.slice(0, lastDash);
+      const shade = colorPart.slice(lastDash + 1);
+      const scale = colors[colorName];
+      if (scale && typeof scale === "object" && shade in scale) {
+        hex = scale[shade] ?? null;
+      }
+    }
+  }
+  if (!hex) return null;
+  if (!opacityPart) return hex;
+  let alpha;
+  if (opacityPart.startsWith("[") && opacityPart.endsWith("]")) {
+    const v = parseFloat(opacityPart.slice(1, -1));
+    alpha = v > 1 ? v / 100 : v;
+  } else {
+    alpha = parseFloat(opacityPart) / 100;
+  }
+  if (isNaN(alpha)) return hex;
+  return hexToRgba(hex, alpha);
+}
+function hexToRgba(hex, alpha) {
+  const h = hex.replace("#", "");
+  let r, g, b;
+  if (h.length === 3) {
+    r = parseInt(h[0] + h[0], 16);
+    g = parseInt(h[1] + h[1], 16);
+    b = parseInt(h[2] + h[2], 16);
+  } else {
+    r = parseInt(h.slice(0, 2), 16);
+    g = parseInt(h.slice(2, 4), 16);
+    b = parseInt(h.slice(4, 6), 16);
+  }
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+function resolveSpacing(value, negative, spacing, isArbitrary) {
+  if (isArbitrary) {
+    const resolved = isWeb ? value : toNativeValue(value);
+    return negative && typeof resolved === "number" ? -resolved : resolved;
+  }
+  const raw = spacing[value];
+  if (raw === void 0) return null;
+  if (typeof raw === "number") return negative ? -raw : raw;
+  if (raw === "auto") return "auto";
+  if (negative && typeof raw === "string" && raw.endsWith("%")) {
+    return `-${raw}`;
+  }
+  return raw;
+}
+function resolveSizing(value, spacing, isArbitrary) {
+  if (isArbitrary) return isWeb ? value : toNativeValue(value);
+  const raw = spacing[value];
+  if (raw !== void 0) return raw;
+  if (/^\d+\/\d+$/.test(value)) {
+    const [num, den] = value.split("/").map(Number);
+    return `${(num / den * 100).toFixed(6)}%`;
+  }
+  return null;
+}
+function resolveRadius(value, radii, isArbitrary) {
+  if (isArbitrary) return isWeb ? value : toNativeValue(value);
+  const key = value === "" ? "DEFAULT" : value;
+  return radii[key] ?? null;
+}
+function resolveFontSize(value, fontSizes, isArbitrary) {
+  if (isArbitrary) return isWeb ? value : toNativeValue(value);
+  return fontSizes[value] ?? null;
+}
+var STANDALONE = {
+  // Display
+  flex: { display: "flex" },
+  block: { display: "block" },
+  "inline-block": { display: "inline-block" },
+  inline: { display: "inline" },
+  grid: { display: "grid" },
+  "inline-flex": { display: "inline-flex" },
+  "inline-grid": { display: "inline-grid" },
+  hidden: { display: "none" },
+  contents: { display: "contents" },
+  "flow-root": { display: "flow-root" },
+  // Flex direction
+  "flex-row": { flexDirection: "row" },
+  "flex-col": { flexDirection: "column" },
+  "flex-row-reverse": { flexDirection: "row-reverse" },
+  "flex-col-reverse": { flexDirection: "column-reverse" },
+  // Flex wrap
+  "flex-wrap": { flexWrap: "wrap" },
+  "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
+  "flex-nowrap": { flexWrap: "nowrap" },
+  // Flex grow / shrink
+  "flex-grow": { flexGrow: 1 },
+  "flex-grow-0": { flexGrow: 0 },
+  "flex-shrink": { flexShrink: 1 },
+  "flex-shrink-0": { flexShrink: 0 },
+  // Align items
+  "items-start": { alignItems: "flex-start" },
+  "items-end": { alignItems: "flex-end" },
+  "items-center": { alignItems: "center" },
+  "items-baseline": { alignItems: "baseline" },
+  "items-stretch": { alignItems: "stretch" },
+  // Justify content
+  "justify-start": { justifyContent: "flex-start" },
+  "justify-end": { justifyContent: "flex-end" },
+  "justify-center": { justifyContent: "center" },
+  "justify-between": { justifyContent: "space-between" },
+  "justify-around": { justifyContent: "space-around" },
+  "justify-evenly": { justifyContent: "space-evenly" },
+  // Align content
+  "content-start": { alignContent: "flex-start" },
+  "content-end": { alignContent: "flex-end" },
+  "content-center": { alignContent: "center" },
+  "content-between": { alignContent: "space-between" },
+  "content-around": { alignContent: "space-around" },
+  "content-evenly": { alignContent: "space-evenly" },
+  // Align self
+  "self-auto": { alignSelf: "auto" },
+  "self-start": { alignSelf: "flex-start" },
+  "self-end": { alignSelf: "flex-end" },
+  "self-center": { alignSelf: "center" },
+  "self-stretch": { alignSelf: "stretch" },
+  // Text align
+  "text-left": { textAlign: "left" },
+  "text-right": { textAlign: "right" },
+  "text-center": { textAlign: "center" },
+  "text-justify": { textAlign: "justify" },
+  // Font weight shortcuts
+  "font-thin": { fontWeight: "100" },
+  "font-extralight": { fontWeight: "200" },
+  "font-light": { fontWeight: "300" },
+  "font-normal": { fontWeight: "400" },
+  "font-medium": { fontWeight: "500" },
+  "font-semibold": { fontWeight: "600" },
+  "font-bold": { fontWeight: "700" },
+  "font-extrabold": { fontWeight: "800" },
+  "font-black": { fontWeight: "900" },
+  // Text decoration
+  underline: { textDecorationLine: "underline" },
+  overline: { textDecorationLine: "overline" },
+  "line-through": { textDecorationLine: "line-through" },
+  "no-underline": { textDecorationLine: "none" },
+  // Text transform
+  uppercase: { textTransform: "uppercase" },
+  lowercase: { textTransform: "lowercase" },
+  capitalize: { textTransform: "capitalize" },
+  "normal-case": { textTransform: "none" },
+  // Font style
+  italic: { fontStyle: "italic" },
+  "non-italic": { fontStyle: "normal" },
+  // Position
+  relative: { position: "relative" },
+  absolute: { position: "absolute" },
+  fixed: { position: "fixed" },
+  sticky: { position: "sticky" },
+  static: { position: "static" },
+  // Visibility
+  visible: { visibility: "visible" },
+  invisible: { visibility: "hidden" },
+  // Overflow
+  "overflow-hidden": { overflow: "hidden" },
+  "overflow-visible": { overflow: "visible" },
+  "overflow-scroll": { overflow: "scroll" },
+  "overflow-auto": { overflow: "auto" },
+  "overflow-x-hidden": { overflowX: "hidden" },
+  "overflow-x-scroll": { overflowX: "scroll" },
+  "overflow-x-auto": { overflowX: "auto" },
+  "overflow-y-hidden": { overflowY: "hidden" },
+  "overflow-y-scroll": { overflowY: "scroll" },
+  "overflow-y-auto": { overflowY: "auto" },
+  // Object fit
+  "object-contain": { objectFit: "contain" },
+  "object-cover": { objectFit: "cover" },
+  "object-fill": { objectFit: "fill" },
+  "object-none": { objectFit: "none" },
+  "object-scale-down": { objectFit: "scale-down" },
+  // Border style
+  "border-solid": { borderStyle: "solid" },
+  "border-dashed": { borderStyle: "dashed" },
+  "border-dotted": { borderStyle: "dotted" },
+  "border-none": { borderWidth: 0 },
+  // Border sides (default width 1)
+  "border-t": { borderTopWidth: 1 },
+  "border-r": { borderRightWidth: 1 },
+  "border-b": { borderBottomWidth: 1 },
+  "border-l": { borderLeftWidth: 1 },
+  // 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" },
+  // Select
+  "select-none": { userSelect: "none" },
+  "select-text": { userSelect: "text" },
+  "select-all": { userSelect: "all" },
+  "select-auto": { userSelect: "auto" },
+  // Pointer events
+  "pointer-events-none": { pointerEvents: "none" },
+  "pointer-events-auto": { pointerEvents: "auto" },
+  // Whitespace
+  "whitespace-normal": { whiteSpace: "normal" },
+  "whitespace-nowrap": { whiteSpace: "nowrap" },
+  "whitespace-pre": { whiteSpace: "pre" },
+  "whitespace-pre-wrap": { whiteSpace: "pre-wrap" },
+  "whitespace-pre-line": { whiteSpace: "pre-line" },
+  // Word break
+  "break-normal": { overflowWrap: "normal", wordBreak: "normal" },
+  "break-words": { overflowWrap: "break-word" },
+  "break-all": { wordBreak: "break-all" },
+  // Misc
+  truncate: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  "box-border": { boxSizing: "border-box" },
+  "box-content": { boxSizing: "content-box" },
+  "appearance-none": { appearance: "none" },
+  "outline-none": { outline: "none", outlineOffset: "0" },
+  outline: { outline: "2px solid transparent", outlineOffset: "2px" },
+  resize: { resize: "both" },
+  "resize-none": { resize: "none" },
+  "resize-y": { resize: "vertical" },
+  "resize-x": { resize: "horizontal" },
+  antialiased: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" },
+  "sr-only": {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: "hidden",
+    clip: "rect(0,0,0,0)",
+    whiteSpace: "nowrap",
+    border: 0
+  },
+  "not-sr-only": {
+    position: "static",
+    width: "auto",
+    height: "auto",
+    padding: 0,
+    margin: 0,
+    overflow: "visible",
+    clip: "auto",
+    whiteSpace: "normal"
+  },
+  // Lists
+  "list-none": { listStyleType: "none" },
+  "list-disc": { listStyleType: "disc" },
+  "list-decimal": { listStyleType: "decimal" },
+  // Background clip
+  "bg-clip-border": { backgroundClip: "border-box" },
+  "bg-clip-padding": { backgroundClip: "padding-box" },
+  "bg-clip-content": { backgroundClip: "content-box" },
+  "bg-clip-text": { backgroundClip: "text", WebkitBackgroundClip: "text" }
+};
+var RESOLVERS = {
+  // ── Background ─────────────────────────────────────────────────────────────
+  bg: ({ value, isArbitrary }, { colors }) => {
+    const color = resolveColor(value, colors, isArbitrary);
+    return color ? { backgroundColor: color } : null;
+  },
+  "bg-opacity": ({ value, isArbitrary }, _) => {
+    const v = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+    return isNaN(v) ? null : { "--bg-opacity": v };
+  },
+  // ── Text ───────────────────────────────────────────────────────────────────
+  text: ({ value, isArbitrary }, { colors, fontSize }) => {
+    const size = resolveFontSize(value, fontSize, false);
+    if (!isArbitrary && size !== null) return { fontSize: size };
+    if (isArbitrary) {
+      if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
+        return { fontSize: isWeb ? value : toNativeValue(value) };
+      }
+      return { color: value };
+    }
+    const color = resolveColor(value, colors, false);
+    return color ? { color } : null;
+  },
+  "text-opacity": ({ value }, _) => {
+    const v = parseFloat(value) / 100;
+    return isNaN(v) ? null : { "--text-opacity": v };
+  },
+  // ── Padding ────────────────────────────────────────────────────────────────
+  p: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { padding: v } : null;
+  },
+  px: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingHorizontal: v } : null;
+  },
+  py: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingVertical: v } : null;
+  },
+  pt: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingTop: v } : null;
+  },
+  pr: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingRight: v } : null;
+  },
+  pb: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingBottom: v } : null;
+  },
+  pl: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingLeft: v } : null;
+  },
+  // ── Margin ─────────────────────────────────────────────────────────────────
+  m: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { margin: v } : null;
+  },
+  mx: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginHorizontal: v } : null;
+  },
+  my: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginVertical: v } : null;
+  },
+  mt: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginTop: v } : null;
+  },
+  mr: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginRight: v } : null;
+  },
+  mb: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginBottom: v } : null;
+  },
+  ml: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginLeft: v } : null;
+  },
+  // ── Sizing ─────────────────────────────────────────────────────────────────
+  w: ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { width: v } : null;
+  },
+  h: ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { height: v } : null;
+  },
+  "min-w": ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { minWidth: v } : null;
+  },
+  "min-h": ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { minHeight: v } : null;
+  },
+  "max-w": ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { maxWidth: v } : null;
+  },
+  "max-h": ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { maxHeight: v } : null;
+  },
+  // ── Border width ───────────────────────────────────────────────────────────
+  border: ({ value, isArbitrary }, { colors, borderWidth, spacing }) => {
+    if (!value) return { borderWidth: borderWidth["DEFAULT"] ?? 1 };
+    const color = resolveColor(value, colors, isArbitrary);
+    if (color) return { borderColor: color };
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      return { borderWidth: typeof w2 === "number" ? w2 : 1 };
+    }
+    const w = borderWidth[value] ?? spacing[value];
+    if (w !== void 0) return { borderWidth: typeof w === "number" ? w : parseFloat(String(w)) };
+    return null;
+  },
+  "border-t": ({ value, isArbitrary }, { colors, borderWidth }) => {
+    if (!value) return { borderTopWidth: 1 };
+    const color = resolveColor(value, colors, isArbitrary);
+    if (color) return { borderTopColor: color };
+    const w = borderWidth[value] ?? (isArbitrary ? toNativeValue(value) : null);
+    return w !== null ? { borderTopWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+  },
+  "border-r": ({ value, isArbitrary }, { colors, borderWidth }) => {
+    if (!value) return { borderRightWidth: 1 };
+    const color = resolveColor(value, colors, isArbitrary);
+    if (color) return { borderRightColor: color };
+    const w = borderWidth[value] ?? (isArbitrary ? toNativeValue(value) : null);
+    return w !== null ? { borderRightWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+  },
+  "border-b": ({ value, isArbitrary }, { colors, borderWidth }) => {
+    if (!value) return { borderBottomWidth: 1 };
+    const color = resolveColor(value, colors, isArbitrary);
+    if (color) return { borderBottomColor: color };
+    const w = borderWidth[value] ?? (isArbitrary ? toNativeValue(value) : null);
+    return w !== null ? { borderBottomWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+  },
+  "border-l": ({ value, isArbitrary }, { colors, borderWidth }) => {
+    if (!value) return { borderLeftWidth: 1 };
+    const color = resolveColor(value, colors, isArbitrary);
+    if (color) return { borderLeftColor: color };
+    const w = borderWidth[value] ?? (isArbitrary ? toNativeValue(value) : null);
+    return w !== null ? { borderLeftWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+  },
+  // ── Border radius ──────────────────────────────────────────────────────────
+  rounded: ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderRadius: r } : null;
+  },
+  "rounded-t": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderTopLeftRadius: r, borderTopRightRadius: r } : null;
+  },
+  "rounded-r": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderTopRightRadius: r, borderBottomRightRadius: r } : null;
+  },
+  "rounded-b": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderBottomLeftRadius: r, borderBottomRightRadius: r } : null;
+  },
+  "rounded-l": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderTopLeftRadius: r, borderBottomLeftRadius: r } : null;
+  },
+  "rounded-tl": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderTopLeftRadius: r } : null;
+  },
+  "rounded-tr": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderTopRightRadius: r } : null;
+  },
+  "rounded-bl": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderBottomLeftRadius: r } : null;
+  },
+  "rounded-br": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderBottomRightRadius: r } : null;
+  },
+  // ── Flex ───────────────────────────────────────────────────────────────────
+  flex: ({ value, isArbitrary }, { flex, spacing }) => {
+    if (!value) return { display: "flex" };
+    if (isArbitrary) {
+      const v = parseFloat(value);
+      return isNaN(v) ? null : { flex: v };
+    }
+    if (value in flex) return { flex: flex[value] };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { flex: n };
+  },
+  basis: ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { flexBasis: v } : null;
+  },
+  grow: ({ value }, _) => {
+    if (!value) return { flexGrow: 1 };
+    const n = parseFloat(value);
+    return { flexGrow: isNaN(n) ? 1 : n };
+  },
+  shrink: ({ value }, _) => {
+    if (!value) return { flexShrink: 1 };
+    const n = parseFloat(value);
+    return { flexShrink: isNaN(n) ? 1 : n };
+  },
+  order: ({ value, isArbitrary }, _) => {
+    if (isArbitrary) return { order: parseInt(value) };
+    const n = parseInt(value);
+    return isNaN(n) ? null : { order: n };
+  },
+  // ── Gap ────────────────────────────────────────────────────────────────────
+  gap: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { gap: v } : null;
+  },
+  "gap-x": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { columnGap: v } : null;
+  },
+  "gap-y": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { rowGap: v } : null;
+  },
+  // ── Position ───────────────────────────────────────────────────────────────
+  top: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { top: v } : null;
+  },
+  right: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { right: v } : null;
+  },
+  bottom: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { bottom: v } : null;
+  },
+  left: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { left: v } : null;
+  },
+  inset: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { top: v, right: v, bottom: v, left: v } : null;
+  },
+  "inset-x": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { left: v, right: v } : null;
+  },
+  "inset-y": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { top: v, bottom: v } : null;
+  },
+  // ── Z-index ────────────────────────────────────────────────────────────────
+  z: ({ value, isArbitrary }, { zIndex }) => {
+    if (isArbitrary) return { zIndex: parseInt(value) };
+    const v = zIndex[value];
+    if (v !== void 0) return { zIndex: v };
+    const n = parseInt(value);
+    return isNaN(n) ? null : { zIndex: n };
+  },
+  // ── Opacity ────────────────────────────────────────────────────────────────
+  opacity: ({ value, isArbitrary }, { opacity }) => {
+    if (isArbitrary) {
+      const v2 = parseFloat(value);
+      return isNaN(v2) ? null : { opacity: v2 > 1 ? v2 / 100 : v2 };
+    }
+    const v = opacity[value];
+    if (v !== void 0) return { opacity: v };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
+  },
+  // ── Font ───────────────────────────────────────────────────────────────────
+  font: ({ value, isArbitrary }, { fontFamily, fontWeight }) => {
+    if (isArbitrary) return { fontFamily: value };
+    if (value in fontFamily) {
+      const ff = fontFamily[value];
+      return { fontFamily: Array.isArray(ff) ? ff.join(", ") : ff };
+    }
+    if (value in fontWeight) return { fontWeight: String(fontWeight[value]) };
+    return null;
+  },
+  // ── Line height ────────────────────────────────────────────────────────────
+  leading: ({ value, isArbitrary }, { lineHeight }) => {
+    if (isArbitrary) return { lineHeight: isWeb ? value : toNativeValue(value) };
+    const v = lineHeight[value];
+    return v !== void 0 ? { lineHeight: v } : null;
+  },
+  // ── Letter spacing ─────────────────────────────────────────────────────────
+  tracking: ({ value, isArbitrary }, { letterSpacing }) => {
+    if (isArbitrary) return { letterSpacing: isWeb ? value : toNativeValue(value) };
+    const v = letterSpacing[value];
+    return v !== void 0 ? { letterSpacing: v } : null;
+  },
+  // ── Shadow ─────────────────────────────────────────────────────────────────
+  shadow: ({ value }, { shadow }) => {
+    const key = value === "" ? "DEFAULT" : value;
+    return shadow[key] ?? null;
+  },
+  // ── Scale ──────────────────────────────────────────────────────────────────
+  scale: ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return isWeb ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
+  },
+  "scale-x": ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return isWeb ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
+  },
+  "scale-y": ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return isWeb ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
+  },
+  // ── Rotate ─────────────────────────────────────────────────────────────────
+  rotate: ({ value, negative, isArbitrary }) => {
+    const raw = isArbitrary ? value : `${value}deg`;
+    const deg = parseFloat(raw);
+    if (isNaN(deg)) return null;
+    const finalDeg = negative ? -deg : deg;
+    return isWeb ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
+  },
+  // ── Translate ──────────────────────────────────────────────────────────────
+  "translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    if (v === null) return null;
+    return isWeb ? { transform: `translateX(${v})` } : { transform: [{ translateX: typeof v === "string" ? parseFloat(v) : v }] };
+  },
+  "translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    if (v === null) return null;
+    return isWeb ? { transform: `translateY(${v})` } : { transform: [{ translateY: typeof v === "string" ? parseFloat(v) : v }] };
+  },
+  // ── Aspect ratio ───────────────────────────────────────────────────────────
+  aspect: ({ value, isArbitrary }) => {
+    if (isArbitrary) return { aspectRatio: value };
+    const presets = { auto: "auto", square: 1, video: 16 / 9 };
+    return value in presets ? { aspectRatio: presets[value] } : null;
+  },
+  // ── Transition ─────────────────────────────────────────────────────────────
+  transition: ({ value }) => {
+    const presets = {
+      "": "color 150ms, background-color 150ms, border-color 150ms, opacity 150ms, box-shadow 150ms",
+      all: "all 150ms",
+      none: "none",
+      colors: "color 150ms, background-color 150ms, border-color 150ms",
+      opacity: "opacity 150ms",
+      shadow: "box-shadow 150ms",
+      transform: "transform 150ms"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { transition: v } : null;
+  },
+  duration: ({ value, isArbitrary }) => {
+    const ms = isArbitrary ? value : `${value}ms`;
+    return { transitionDuration: ms };
+  },
+  delay: ({ value, isArbitrary }) => {
+    const ms = isArbitrary ? value : `${value}ms`;
+    return { transitionDelay: ms };
+  },
+  // ── Space between (uses CSS gap or margin fallback) ────────────────────────
+  "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { columnGap: v } : null;
+  },
+  "space-y": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { rowGap: v } : null;
+  }
+};
+function resolveUtility(parsed, theme) {
+  const standalone = STANDALONE[parsed.utility];
+  if (standalone) return standalone;
+  const resolver = RESOLVERS[parsed.utility];
+  if (resolver) return resolver(parsed, theme);
+  return null;
+}
+function getStandaloneMap() {
+  return STANDALONE;
+}
+function getResolverMap() {
+  return RESOLVERS;
+}
+
+// src/core/resolver.ts
+var styleCache = new LRUCache(1e4);
+var _styleEl = null;
+var _injectedRules = /* @__PURE__ */ new Set();
+function getStyleEl() {
+  if (_styleEl) return _styleEl;
+  _styleEl = document.createElement("style");
+  _styleEl.setAttribute("data-kbach", "");
+  document.head.appendChild(_styleEl);
+  return _styleEl;
+}
+function injectRule(rule) {
+  if (_injectedRules.has(rule)) return;
+  _injectedRules.add(rule);
+  getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+}
+function injectCSS(classString, resolved, darkMode) {
+  if (!isWeb) return;
+  for (const [modifierKey, styles] of Object.entries(resolved)) {
+    if (!styles || Object.keys(styles).length === 0) continue;
+    const classes = classString.trim().split(/\s+/);
+    for (const cls of classes) {
+      const cssDecls = styleValueToCSS(styles);
+      if (!cssDecls) continue;
+      const escaped = escapeCSSSelector(cls);
+      if (modifierKey === "base") {
+        injectRule(`.${escaped} { ${cssDecls} }`);
+        continue;
+      }
+      const mods = modifierKey.split(":");
+      const pseudos = mods.filter((m) => !["dark", "light"].includes(m));
+      const hasDark = mods.includes("dark");
+      const pseudoSuffix = pseudos.map((p) => `:${p}`).join("");
+      let selector = `.${escaped}${pseudoSuffix}`;
+      let rule;
+      if (hasDark) {
+        if (darkMode === "media") {
+          rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
+        } else if (darkMode === "class") {
+          rule = `.dark ${selector} { ${cssDecls} }`;
+        } else {
+          rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
+        }
+      } else {
+        rule = `${selector} { ${cssDecls} }`;
+      }
+      injectRule(rule);
+    }
+  }
+}
+function styleValueToCSS(styles) {
+  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null).map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
+}
+function camelToKebab(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function resolve(classString, theme, darkMode = "attribute") {
+  const cacheKey = `${classString}::${darkMode}`;
+  const cached = styleCache.get(cacheKey);
+  if (cached) return cached;
+  const result = {};
+  const parsedClasses = parseClasses(classString);
+  for (const parsed of parsedClasses) {
+    const styles = resolveUtility(parsed, theme);
+    if (!styles) continue;
+    const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
+    if (!result[bucketKey]) result[bucketKey] = {};
+    Object.assign(result[bucketKey], styles);
+  }
+  styleCache.set(cacheKey, result);
+  if (isWeb) {
+    Promise.resolve().then(() => injectCSS(classString, result, darkMode));
+  }
+  return result;
+}
+function flatten(resolved, isDark, state = {}) {
+  const result = { ...resolved.base ?? {} };
+  for (const [key, styles] of Object.entries(resolved)) {
+    if (key === "base" || !styles) continue;
+    const mods = key.split(":");
+    if (matchesMods(mods, isDark, state)) {
+      Object.assign(result, styles);
+    }
+  }
+  return result;
+}
+function matchesMods(mods, isDark, state) {
+  return mods.every((mod) => {
+    switch (mod) {
+      case "dark":
+        return isDark;
+      case "light":
+      case "not-dark":
+        return !isDark;
+      case "not-light":
+        return isDark;
+      case "hover":
+        return !!state.hover;
+      case "not-hover":
+        return !state.hover;
+      case "focus":
+        return !!state.focus;
+      case "not-focus":
+        return !state.focus;
+      case "pressed":
+      case "active":
+        return !!state.pressed || !!state.active;
+      case "not-pressed":
+      case "not-active":
+        return !state.pressed && !state.active;
+      case "disabled":
+        return !!state.disabled;
+      case "not-disabled":
+        return !state.disabled;
+      case "checked":
+        return !!state.checked;
+      case "not-checked":
+        return !state.checked;
+      case "visited":
+        return !!state.visited;
+      case "not-visited":
+        return !state.visited;
+      case "placeholder":
+        return !!state.placeholder;
+      default:
+        return false;
+    }
+  });
+}
+
+// src/core/config.ts
+function deepMerge(base, override) {
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    const baseVal = base[key];
+    const overVal = override[key];
+    if (baseVal !== null && typeof baseVal === "object" && !Array.isArray(baseVal) && overVal !== null && typeof overVal === "object" && !Array.isArray(overVal)) {
+      result[key] = deepMerge(
+        baseVal,
+        overVal
+      );
+    } else if (overVal !== void 0) {
+      result[key] = overVal;
+    }
+  }
+  return result;
+}
+var _resolved = null;
+function getConfig() {
+  if (_resolved) return _resolved;
+  _resolved = buildConfig({});
+  return _resolved;
+}
+function buildConfig(userConfig) {
+  let theme = { ...defaultTheme };
+  if (userConfig.theme) {
+    theme = deepMerge(theme, userConfig.theme);
+  }
+  if (userConfig.extend?.theme) {
+    const ext = userConfig.extend.theme;
+    for (const [key, value] of Object.entries(ext)) {
+      if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+        theme[key] = deepMerge(
+          theme[key] ?? {},
+          value
+        );
+      } else {
+        theme[key] = value;
+      }
+    }
+  }
+  const resolved = {
+    darkMode: userConfig.darkMode ?? "attribute",
+    theme,
+    plugins: userConfig.plugins ?? []
+  };
+  for (const plugin of resolved.plugins) {
+    plugin(makePluginAPI(resolved.theme));
+  }
+  return resolved;
+}
+function makePluginAPI(theme) {
+  const standalone = getStandaloneMap();
+  const resolvers = getResolverMap();
+  return {
+    addUtility(name, styles) {
+      standalone[name] = styles;
+    },
+    addVariant(name, _selector) {
+      customVariants[name] = _selector;
+    },
+    theme(path, defaultValue) {
+      const parts = path.replace(/\[([^\]]+)\]/g, ".$1").split(".");
+      let current = theme;
+      for (const part of parts) {
+        if (current === null || typeof current !== "object") return defaultValue;
+        current = current[part];
+      }
+      return current ?? defaultValue;
+    },
+    e(className) {
+      return className.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+    }
+  };
+}
+var customVariants = {};
+
+// src/core/darkModeStore.ts
+var _isDark = false;
+var _subscribers = /* @__PURE__ */ new Set();
+function getGlobalDarkMode() {
+  return _isDark;
+}
+function subscribeGlobalDarkMode(callback) {
+  _subscribers.add(callback);
+  return () => _subscribers.delete(callback);
+}
 
 // src/InteractiveWrapper.tsx
 var import_react2 = __toESM(require("react"));
-var import_core2 = require("@kbach/core");
 
 // src/useGlobalDarkMode.ts
 var import_react = __toESM(require("react"));
-var import_core = require("@kbach/core");
 var useSyncExternalStore = import_react.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
   const [, forceUpdate] = import_react.default.useReducer((n) => n + 1, 0);
   import_react.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
@@ -52,8 +1978,8 @@ var useSyncExternalStore = import_react.default.useSyncExternalStore ?? function
 };
 function useGlobalDarkMode() {
   return useSyncExternalStore(
-    import_core.subscribeGlobalDarkMode,
-    import_core.getGlobalDarkMode,
+    subscribeGlobalDarkMode,
+    getGlobalDarkMode,
     () => false
     // SSR: default light
   );
@@ -91,7 +2017,7 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
     const handleFocus = (0, import_react2.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
     const handleBlur = (0, import_react2.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
     const computedStyle = (0, import_react2.useMemo)(
-      () => (0, import_core2.flatten)(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }),
+      () => flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }),
       [resolvedStyle, isDark, pressed, hovered, focused]
     );
     const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
@@ -100,7 +2026,7 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       ref,
       ...restWithoutChildren,
       style: finalStyle,
-      ...import_core2.isWeb && className ? { className } : {},
+      ...isWeb && className ? { className } : {},
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       onMouseEnter: handleMouseEnter,
@@ -115,11 +2041,10 @@ InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 
 // src/DarkWrapper.tsx
 var import_react3 = __toESM(require("react"));
-var import_core3 = require("@kbach/core");
 var DarkWrapper = import_react3.default.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
     const isDark = useGlobalDarkMode();
-    const computedStyle = (0, import_core3.flatten)(resolvedStyle, isDark);
+    const computedStyle = flatten(resolvedStyle, isDark);
     const finalStyle = styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? import_react3.default.createElement(Component, props, ...children) : import_react3.default.createElement(Component, props, children);
@@ -137,7 +2062,7 @@ function hasInteractiveBuckets(resolved) {
     return true;
   });
 }
-var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "tw", "__kbachStyles", "__kbachClasses"]);
+var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "kb", "__kbachStyles", "__kbachClasses"]);
 function omitConsumed(props) {
   const out = {};
   for (const key of Object.keys(props)) {
@@ -155,19 +2080,19 @@ function makeElement(isStaticChildren, type, props, key) {
 }
 function processElement(type, rawProps, key, isStaticChildren) {
   if (!rawProps) return (0, import_jsx_runtime.jsx)(type, null, key);
-  const { className, tw: twProp, __kbachStyles, __kbachClasses } = rawProps;
-  const classStr = className ?? twProp ?? __kbachClasses;
+  const { className, kb: kbProp, __kbachStyles, __kbachClasses } = rawProps;
+  const classStr = className ?? kbProp ?? __kbachClasses;
   if (!classStr && !__kbachStyles) {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
-  const config = (0, import_core4.getConfig)();
-  const resolved = __kbachStyles ?? (classStr ? (0, import_core4.resolve)(classStr, config.theme, config.darkMode) : {});
+  const config = getConfig();
+  const resolved = __kbachStyles ?? (classStr ? resolve(classStr, config.theme, config.darkMode) : {});
   const { style: userStyle, ...passProps } = omitConsumed(rawProps);
   if (hasInteractiveBuckets(resolved)) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
       Component: type,
       resolvedStyle: resolved,
-      ...import_core4.isWeb && classStr ? { className: classStr } : {},
+      ...isWeb && classStr ? { className: classStr } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -179,17 +2104,17 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
       Component: type,
       resolvedStyle: resolved,
-      ...import_core4.isWeb && classStr ? { className: classStr } : {},
+      ...isWeb && classStr ? { className: classStr } : {},
       style: userStyle,
       ...passProps
     }, key);
   }
-  const computedStyle = (0, import_core4.flatten)(resolved, false);
+  const computedStyle = flatten(resolved, false);
   const finalStyle = mergeStyle(computedStyle, userStyle);
   return makeElement(isStaticChildren, type, {
     ...passProps,
     style: finalStyle,
-    ...import_core4.isWeb && classStr ? { className: classStr } : {}
+    ...isWeb && classStr ? { className: classStr } : {}
   }, key);
 }
 function jsx(type, props, key) {