@kbach/react 0.5.37 → 0.5.40

package/dist/index.js

@@ -83,7 +83,20 @@ function applyOpacity(color, opacity) {
   const a = Math.max(0, Math.min(1, opacity / 100));
   if (color.startsWith("#")) {
     const h = color.slice(1);
-    const [rs, gs, bs] = h.length === 3 ? [h[0] + h[0], h[1] + h[1], h[2] + h[2]] : [h.slice(0, 2), h.slice(2, 4), h.slice(4, 6)];
+    let rs, gs, bs;
+    if (h.length === 3 || h.length === 4) {
+      rs = h[0] + h[0];
+      gs = h[1] + h[1];
+      bs = h[2] + h[2];
+    } else if (h.length === 8) {
+      rs = h.slice(0, 2);
+      gs = h.slice(2, 4);
+      bs = h.slice(4, 6);
+    } else {
+      rs = h.slice(0, 2);
+      gs = h.slice(2, 4);
+      bs = h.slice(4, 6);
+    }
     return `rgba(${parseInt(rs, 16)},${parseInt(gs, 16)},${parseInt(bs, 16)},${a})`;
   }
   if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
@@ -696,7 +709,11 @@ var LRUCache = class {
     return this;
   }
   has(key) {
-    return this.cache.has(key);
+    if (!this.cache.has(key)) return false;
+    const value = this.cache.get(key);
+    this.cache.delete(key);
+    this.cache.set(key, value);
+    return true;
   }
   delete(key) {
     return this.cache.delete(key);
@@ -726,773 +743,104 @@ function escapeCSSSelector(cls) {
   return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
-// src/core/parser.ts
-var PLUGIN_MODIFIERS = /* @__PURE__ */ new Set();
-function registerModifier(name) {
-  PLUGIN_MODIFIERS.add(name);
+// src/core/registry.ts
+var BUILTIN_MODIFIERS = {
+  // ── Mode ─────────────────────────────────────────────────────────────────
+  dark: { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  "not-light": { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  light: { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  "not-dark": { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  // ── Interactive — JS state + CSS pseudo ───────────────────────────────────
+  hover: { pseudo: ":hover", jsBehavior: "interactive", jsMatch: (_, s) => !!s.hover },
+  "not-hover": { pseudo: ":not(:hover)", jsBehavior: "interactive", jsMatch: (_, s) => !s.hover },
+  focus: { pseudo: ":focus", jsBehavior: "interactive", jsMatch: (_, s) => !!s.focus },
+  "not-focus": { pseudo: ":not(:focus)", jsBehavior: "interactive", jsMatch: (_, s) => !s.focus },
+  active: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.active || !!s.pressed },
+  "not-active": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.active && !s.pressed },
+  pressed: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.pressed || !!s.active },
+  "not-pressed": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.pressed && !s.active },
+  disabled: { pseudo: ":disabled", jsBehavior: "interactive", jsMatch: (_, s) => !!s.disabled },
+  "not-disabled": { pseudo: ":not(:disabled)", jsBehavior: "interactive", jsMatch: (_, s) => !s.disabled },
+  checked: { pseudo: ":checked", jsBehavior: "interactive", jsMatch: (_, s) => !!s.checked },
+  "not-checked": { pseudo: ":not(:checked)", jsBehavior: "interactive", jsMatch: (_, s) => !s.checked },
+  visited: { pseudo: ":visited", jsBehavior: "interactive", jsMatch: (_, s) => !!s.visited },
+  "not-visited": { pseudo: ":not(:visited)", jsBehavior: "interactive", jsMatch: (_, s) => !s.visited },
+  placeholder: { pseudo: "::placeholder", jsBehavior: "interactive", jsMatch: (_, s) => !!s.placeholder },
+  // ── CSS-only pseudo-classes (structural) ──────────────────────────────────
+  first: { pseudo: ":first-child", jsBehavior: "css-only", forcesImportant: true },
+  last: { pseudo: ":last-child", jsBehavior: "css-only", forcesImportant: true },
+  odd: { pseudo: ":nth-child(odd)", jsBehavior: "css-only", forcesImportant: true },
+  even: { pseudo: ":nth-child(even)", jsBehavior: "css-only", forcesImportant: true },
+  only: { pseudo: ":only-child", jsBehavior: "css-only", forcesImportant: true },
+  "focus-within": { pseudo: ":focus-within", jsBehavior: "css-only", forcesImportant: true },
+  "focus-visible": { pseudo: ":focus-visible", jsBehavior: "css-only", forcesImportant: true },
+  // ── CSS-only pseudo-elements ───────────────────────────────────────────────
+  before: { pseudo: "::before", jsBehavior: "css-only" },
+  after: { pseudo: "::after", jsBehavior: "css-only" },
+  selection: { pseudo: "::selection", jsBehavior: "css-only" },
+  "first-letter": { pseudo: "::first-letter", jsBehavior: "css-only" },
+  "first-line": { pseudo: "::first-line", jsBehavior: "css-only" },
+  marker: { pseudo: "::marker", jsBehavior: "css-only" },
+  // ── Group / peer ancestor selectors (CSS-only) ─────────────────────────────
+  "group-hover": { ancestorSelector: ".group:hover ", jsBehavior: "css-only", forcesImportant: true },
+  "group-focus": { ancestorSelector: ".group:focus ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-hover": { ancestorSelector: ".peer:hover ~ ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-focus": { ancestorSelector: ".peer:focus ~ ", jsBehavior: "css-only", forcesImportant: true },
+  // ── Responsive — both CSS (@media min-width) and JS (breakpoints set) ──────
+  sm: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("sm") },
+  md: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("md") },
+  lg: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("lg") },
+  xl: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("xl") },
+  "2xl": { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("2xl") },
+  // ── Print media (CSS-only) ─────────────────────────────────────────────────
+  print: { mediaQuery: "print", jsBehavior: "css-only", forcesImportant: true },
+  // ── Orientation / accessibility media (CSS-only) ───────────────────────────
+  landscape: { mediaQuery: "(orientation: landscape)", jsBehavior: "css-only", forcesImportant: true },
+  portrait: { mediaQuery: "(orientation: portrait)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-reduce": { mediaQuery: "(prefers-reduced-motion: reduce)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-safe": { mediaQuery: "(prefers-reduced-motion: no-preference)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-more": { mediaQuery: "(prefers-contrast: more)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-less": { mediaQuery: "(prefers-contrast: less)", jsBehavior: "css-only", forcesImportant: true },
+  // ── Directionality (CSS-only) ──────────────────────────────────────────────
+  rtl: { dirSelector: '[dir="rtl"] ', jsBehavior: "css-only", forcesImportant: true },
+  ltr: { dirSelector: '[dir="ltr"] ', jsBehavior: "css-only", forcesImportant: true }
+};
+var _pluginModifiers = {};
+var _allNames = null;
+var _interactiveNames = null;
+var _modeNames = null;
+var _responsiveNames = null;
+function _invalidate() {
+  _allNames = null;
+  _interactiveNames = null;
+  _modeNames = null;
+  _responsiveNames = null;
+}
+function registerModifier(name, def) {
+  _pluginModifiers[name] = def;
+  _invalidate();
 }
 function clearPluginModifiers() {
-  PLUGIN_MODIFIERS.clear();
+  for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
+  _invalidate();
 }
-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",
-  // Pseudo-elements (CSS-injection only; matchesMods returns false for these)
-  "before",
-  "after",
-  "selection",
-  "first-letter",
-  "first-line",
-  "marker",
-  // Print media modifier
-  "print",
-  // Orientation media modifiers (CSS-injection only)
-  "landscape",
-  "portrait",
-  // Accessibility media modifiers (CSS-injection only)
-  "motion-reduce",
-  "motion-safe",
-  "contrast-more",
-  "contrast-less",
-  // Directionality modifiers (CSS-injection only)
-  "rtl",
-  "ltr"
-]);
-var UTILITY_PREFIXES = [
-  // Multi-word flex
-  "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",
-  "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",
-  "bg-gradient-to",
-  "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",
-  // Transform origin (single prefix, value carries direction)
-  "origin",
-  "min-w",
-  "min-h",
-  "max-w",
-  "max-h",
-  "ring-offset",
-  "bg-opacity",
-  "text-opacity",
-  "border-opacity",
-  // Grid placement
-  "col-span",
-  "col-start",
-  "col-end",
-  "row-span",
-  "row-start",
-  "row-end",
-  "grid-cols",
-  "grid-rows",
-  "grid-flow",
-  "auto-cols",
-  "auto-rows",
-  // Grid alignment
-  "place-items",
-  "place-content",
-  "place-self",
-  "justify-items",
-  "justify-self",
-  // Backdrop filters (longer than 'backdrop' alone)
-  "backdrop-blur",
-  "backdrop-brightness",
-  "backdrop-contrast",
-  "backdrop-grayscale",
-  "backdrop-hue-rotate",
-  "backdrop-invert",
-  "backdrop-opacity",
-  "backdrop-saturate",
-  "backdrop-sepia",
-  "backdrop-filter",
-  // Filters
-  "drop-shadow",
-  "hue-rotate",
-  "text-shadow",
-  "underline-offset",
-  "outline-offset",
-  "will-change",
-  "mix-blend",
-  "bg-blend",
-  "decoration",
-  "perspective",
-  "tint",
-  "animate",
-  // 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",
-  "subpixel-antialiased",
-  "overflow-ellipsis",
-  "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",
-  "size",
-  "opacity",
-  "leading",
-  "tracking",
-  "line-clamp",
-  "basis",
-  "grow",
-  "shrink",
-  "order",
-  "delay",
-  "duration",
-  "scale",
-  "rotate",
-  "aspect",
-  "columns",
-  "ring",
-  "gap",
-  "inset",
-  "filter",
-  "transform",
-  "blur",
-  "brightness",
-  "contrast",
-  "grayscale",
-  "invert",
-  "saturate",
-  "sepia",
-  "bg",
-  "text",
-  "font",
-  "caret",
-  "accent",
-  "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"
-];
-var SORTED_PREFIXES = [...new Set(UTILITY_PREFIXES)].sort((a, b) => b.length - a.length);
-var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
-  // Display
-  "flex",
-  "block",
-  "inline-block",
-  "inline",
-  "grid",
-  "inline-flex",
-  "inline-grid",
-  "grd",
-  "hidden",
-  "contents",
-  "flow-root",
-  // Position
-  "relative",
-  "absolute",
-  "fixed",
-  "sticky",
-  "static",
-  // Visibility
-  "visible",
-  "invisible",
-  // Typography
-  "uppercase",
-  "lowercase",
-  "capitalize",
-  "normal-case",
-  "italic",
-  "non-italic",
-  "underline",
-  "overline",
-  "line-through",
-  "no-underline",
-  "truncate",
-  "antialiased",
-  "sr-only",
-  "not-sr-only",
-  // Font variant numeric
-  "normal-nums",
-  "ordinal",
-  "slashed-zero",
-  "lining-nums",
-  "oldstyle-nums",
-  "proportional-nums",
-  "tabular-nums",
-  "diagonal-fractions",
-  "stacked-fractions",
-  // Flexbox
-  "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",
-  "content-stretch",
-  "self-start",
-  "self-end",
-  "self-center",
-  "self-auto",
-  "self-stretch",
-  "self-baseline",
-  // Text align
-  "text-left",
-  "text-right",
-  "text-center",
-  "text-justify",
-  // Font weight shortcuts
-  "font-thin",
-  "font-extralight",
-  "font-light",
-  "font-normal",
-  "font-medium",
-  "font-semibold",
-  "font-bold",
-  "font-extrabold",
-  "font-black",
-  // Overflow
-  "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 fit
-  "object-contain",
-  "object-cover",
-  "object-fill",
-  "object-none",
-  "object-scale-down",
-  // Object position
-  "object-center",
-  "object-top",
-  "object-bottom",
-  "object-left",
-  "object-right",
-  "object-left-top",
-  "object-left-bottom",
-  "object-right-top",
-  "object-right-bottom",
-  // Border
-  "border-solid",
-  "border-dashed",
-  "border-dotted",
-  "border-none",
-  "border-t",
-  "border-r",
-  "border-b",
-  "border-l",
-  "border-collapse",
-  "border-separate",
-  // Lists
-  "list-none",
-  "list-disc",
-  "list-decimal",
-  "list-inside",
-  "list-outside",
-  // Cursor / select
-  "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 / word break
-  "whitespace-normal",
-  "whitespace-nowrap",
-  "whitespace-pre",
-  "whitespace-pre-wrap",
-  "whitespace-pre-line",
-  "break-normal",
-  "break-words",
-  "break-all",
-  // Background clip
-  "bg-clip-border",
-  "bg-clip-padding",
-  "bg-clip-content",
-  "bg-clip-text",
-  // Background size
-  "bg-auto",
-  "bg-cover",
-  "bg-contain",
-  // Background position
-  "bg-center",
-  "bg-top",
-  "bg-bottom",
-  "bg-left",
-  "bg-right",
-  "bg-left-top",
-  "bg-left-bottom",
-  "bg-right-top",
-  "bg-right-bottom",
-  // Background repeat
-  "bg-repeat",
-  "bg-no-repeat",
-  "bg-repeat-x",
-  "bg-repeat-y",
-  "bg-repeat-round",
-  "bg-repeat-space",
-  // Background attachment
-  "bg-fixed",
-  "bg-local",
-  "bg-scroll",
-  // Background image
-  "bg-none",
-  // Box sizing
-  "box-border",
-  "box-content",
-  // Resize
-  "resize",
-  "resize-none",
-  "resize-y",
-  "resize-x",
-  // Outline
-  "appearance-none",
-  "outline-none",
-  "outline",
-  // Table
-  "table",
-  "table-auto",
-  "table-fixed",
-  "caption-top",
-  "caption-bottom",
-  // CSS filters (standalone = default/full effect)
-  "grayscale",
-  "invert",
-  "sepia",
-  // Isolation
-  "isolate",
-  "isolation-auto",
-  // Backface visibility (both platforms)
-  "backface-visible",
-  "backface-hidden",
-  // Divide none
-  "divide-none",
-  // Group / peer markers (no-op style; needed so isKnownUtility recognises them)
-  "group",
-  "peer",
-  // Text-wrap (web-only)
-  "text-wrap",
-  "text-nowrap",
-  "text-balance",
-  "text-pretty",
-  // Screen sizing
-  "w-screen",
-  "min-h-screen",
-  "max-h-screen",
-  "min-w-screen",
-  "max-w-screen",
-  // max-w named container sizes (Tailwind compat)
-  "max-w-none",
-  "max-w-xs",
-  "max-w-sm",
-  "max-w-md",
-  "max-w-lg",
-  "max-w-xl",
-  "max-w-2xl",
-  "max-w-3xl",
-  "max-w-4xl",
-  "max-w-5xl",
-  "max-w-6xl",
-  "max-w-7xl",
-  "max-w-prose",
-  // Extended cursors (web-only)
-  "cursor-grab",
-  "cursor-grabbing",
-  "cursor-zoom-in",
-  "cursor-zoom-out",
-  "cursor-crosshair",
-  "cursor-help",
-  "cursor-none",
-  // Overflow clip (web-only)
-  "overflow-clip",
-  "overflow-x-clip",
-  "overflow-y-clip",
-  // Scroll behavior (web-only)
-  "scroll-smooth",
-  "scroll-auto",
-  // Float & clear (web-only)
-  "float-left",
-  "float-right",
-  "float-start",
-  "float-end",
-  "float-none",
-  "clear-left",
-  "clear-right",
-  "clear-both",
-  "clear-start",
-  "clear-end",
-  "clear-none",
-  // Vertical align (web-only)
-  "align-baseline",
-  "align-top",
-  "align-middle",
-  "align-bottom",
-  "align-text-top",
-  "align-text-bottom",
-  "align-sub",
-  "align-super",
-  // Touch action (web-only)
-  "touch-auto",
-  "touch-none",
-  "touch-pan-x",
-  "touch-pan-y",
-  "touch-pan-left",
-  "touch-pan-right",
-  "touch-pan-up",
-  "touch-pan-down",
-  "touch-pinch-zoom",
-  "touch-manipulation"
-]);
-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) || PLUGIN_MODIFIERS.has(candidate)) {
-      modifiers.push(candidate);
-      remaining = remaining.slice(colonIdx + 1);
-    } else {
-      break;
-    }
-  }
-  let important = false;
-  if (remaining.startsWith("!") && remaining.length > 1) {
-    important = true;
-    remaining = remaining.slice(1);
-  }
-  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).replace(/_/g, " ");
-    return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
-  }
-  if (STANDALONE_UTILITIES.has(remaining)) {
-    return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
-  }
-  for (const prefix of SORTED_PREFIXES) {
-    if (remaining === prefix) {
-      return { original: trimmed, modifiers, negative, important, utility: prefix, value: "", isArbitrary: false };
-    }
-    if (remaining.startsWith(prefix + "-")) {
-      const value = remaining.slice(prefix.length + 1);
-      return { original: trimmed, modifiers, negative, important, utility: prefix, value, isArbitrary: false };
-    }
-  }
-  const firstDash = remaining.indexOf("-");
-  if (firstDash > 0) {
-    return {
-      original: trimmed,
-      modifiers,
-      negative,
-      important,
-      utility: remaining.slice(0, firstDash),
-      value: remaining.slice(firstDash + 1),
-      isArbitrary: false
-    };
-  }
-  return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
+function getModifier(name) {
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
 }
-function splitClassTokens(classString) {
-  const tokens = [];
-  let current = "";
-  let depth = 0;
-  for (let i = 0; i < classString.length; i++) {
-    const ch = classString[i];
-    if (ch === "[") {
-      depth++;
-      current += ch;
-      continue;
-    }
-    if (ch === "]") {
-      depth--;
-      current += ch;
-      continue;
-    }
-    if (/\s/.test(ch)) {
-      if (depth === 0) {
-        if (current) {
-          tokens.push(current);
-          current = "";
-        }
-      }
-    } else {
-      current += ch;
-    }
-  }
-  if (current) tokens.push(current);
-  return tokens;
+function isKnownModifier(name) {
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
 }
-function normalizeClassString(classString) {
-  return splitClassTokens(classString).join(" ");
+function _allEntries() {
+  return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
 }
-function parseClasses(classString) {
-  const results = [];
-  for (const token of splitClassTokens(classString)) {
-    const parsed = parseClass(token);
-    if (parsed) results.push(parsed);
+function getResponsiveModifiers() {
+  if (!_responsiveNames) {
+    _responsiveNames = new Set(_allEntries().filter(([, d]) => d.jsBehavior === "responsive").map(([k]) => k));
   }
-  return results;
+  return _responsiveNames;
 }
-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;
+function matchModifier(name, isDark, state, breakpoints) {
+  return getModifier(name)?.jsMatch?.(isDark, state, breakpoints) ?? false;
 }
 
 // src/core/utilities.ts
@@ -1586,6 +934,7 @@ function resolveSizing(value, spacing, isArbitrary) {
   if (raw !== void 0) return raw;
   if (/^\d+\/\d+$/.test(value)) {
     const [num, den] = value.split("/").map(Number);
+    if (!den) return null;
     return `${(num / den * 100).toFixed(6)}%`;
   }
   return null;
@@ -3100,10 +2449,10 @@ function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility === "grd" || parsed.utility === "grid") {
-      return { display: "grid" };
+      return getEffectiveIsWeb() ? { display: "grid" } : null;
     }
     if (parsed.utility === "inline-grid") {
-      return { display: "inline-grid" };
+      return getEffectiveIsWeb() ? { display: "inline-grid" } : null;
     }
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
   }
@@ -3116,6 +2465,8 @@ var PLUGIN_RESOLVERS = {};
 function clearPluginUtilities() {
   for (const key of Object.keys(PLUGIN_STANDALONE)) delete PLUGIN_STANDALONE[key];
   for (const key of Object.keys(PLUGIN_RESOLVERS)) delete PLUGIN_RESOLVERS[key];
+  _sortedPrefixes = null;
+  _standaloneNames = null;
 }
 function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
@@ -3123,6 +2474,129 @@ function getPluginStandaloneMap() {
 function isKnownUtility(utility) {
   return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
 }
+var _sortedPrefixes = null;
+var _standaloneNames = null;
+function getBuiltinUtilityPrefixes() {
+  if (!_sortedPrefixes) {
+    const all = [.../* @__PURE__ */ new Set([...Object.keys(RESOLVERS), ...Object.keys(PLUGIN_RESOLVERS)])];
+    _sortedPrefixes = all.sort((a, b) => b.length - a.length);
+  }
+  return _sortedPrefixes;
+}
+function getBuiltinStandaloneNames() {
+  if (!_standaloneNames) {
+    _standaloneNames = /* @__PURE__ */ new Set([...Object.keys(getStandalone()), ...Object.keys(PLUGIN_STANDALONE)]);
+  }
+  return _standaloneNames;
+}
+
+// src/core/parser.ts
+function parseClass(className) {
+  const trimmed = className.trim();
+  if (!trimmed) return null;
+  const modifiers = [];
+  let remaining = trimmed;
+  while (true) {
+    const colonIdx = findOuterColon(remaining);
+    if (colonIdx === -1) break;
+    const candidate = remaining.slice(0, colonIdx);
+    if (!isKnownModifier(candidate)) break;
+    modifiers.push(candidate);
+    remaining = remaining.slice(colonIdx + 1);
+  }
+  let important = false;
+  if (remaining.startsWith("!") && remaining.length > 1) {
+    important = true;
+    remaining = remaining.slice(1);
+  }
+  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).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
+  }
+  if (getBuiltinStandaloneNames().has(remaining)) {
+    return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
+  }
+  for (const prefix of getBuiltinUtilityPrefixes()) {
+    if (remaining === prefix) {
+      return { original: trimmed, modifiers, negative, important, utility: prefix, value: "", isArbitrary: false };
+    }
+    if (remaining.startsWith(prefix + "-")) {
+      const value = remaining.slice(prefix.length + 1);
+      return { original: trimmed, modifiers, negative, important, utility: prefix, value, isArbitrary: false };
+    }
+  }
+  const firstDash = remaining.indexOf("-");
+  if (firstDash > 0) {
+    return {
+      original: trimmed,
+      modifiers,
+      negative,
+      important,
+      utility: remaining.slice(0, firstDash),
+      value: remaining.slice(firstDash + 1),
+      isArbitrary: false
+    };
+  }
+  return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
+}
+function splitClassTokens(classString) {
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  for (let i = 0; i < classString.length; i++) {
+    const ch = classString[i];
+    if (ch === "[") {
+      depth++;
+      current += ch;
+      continue;
+    }
+    if (ch === "]") {
+      depth--;
+      current += ch;
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      if (depth === 0) {
+        if (current) {
+          tokens.push(current);
+          current = "";
+        }
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
+function parseClasses(classString) {
+  const results = [];
+  for (const token of splitClassTokens(classString)) {
+    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/responsiveStore.ts
 var RESPONSIVE_KEY = "__kbach_responsive__";
@@ -3167,7 +2641,30 @@ function getActiveBreakpoints(width) {
 }
 
 // src/core/resolver.ts
-var styleCache = new LRUCache(1e4);
+var _themeCache = /* @__PURE__ */ new WeakMap();
+function getThemeCache(theme) {
+  let cache = _themeCache.get(theme);
+  if (!cache) {
+    cache = new LRUCache(1e4);
+    _themeCache.set(theme, cache);
+  }
+  return cache;
+}
+var _sortCache = /* @__PURE__ */ new WeakMap();
+function getSortedEntries(resolved) {
+  let sorted = _sortCache.get(resolved);
+  if (!sorted) {
+    const entries = Object.entries(resolved);
+    entries.sort((a, b) => {
+      const pa = a[0] === "base" ? -1 : a[0].split(":").length;
+      const pb = b[0] === "base" ? -1 : b[0].split(":").length;
+      return pa - pb;
+    });
+    sorted = entries;
+    _sortCache.set(resolved, sorted);
+  }
+  return sorted;
+}
 var FONT_KEY = "__kbach_default_font__";
 function setDefaultFontFamily(font) {
   globalThis[FONT_KEY] = font;
@@ -3176,7 +2673,7 @@ function getDefaultFontFamily() {
   return globalThis[FONT_KEY];
 }
 var _styleEl = null;
-var _injectedRules = /* @__PURE__ */ new Set();
+var _injectedRules = new LRUCache(5e4);
 function getStyleEl() {
   if (_styleEl) return _styleEl;
   _styleEl = document.createElement("style");
@@ -3186,7 +2683,7 @@ function getStyleEl() {
 }
 function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
-  _injectedRules.add(rule);
+  _injectedRules.set(rule, true);
   try {
     getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
   } catch {
@@ -3210,150 +2707,20 @@ function injectGlobalStyles(theme) {
   }
   getGlobalStyleEl().textContent = rules.join("\n");
 }
-var MODIFIER_TO_PSEUDO = {
-  hover: ":hover",
-  focus: ":focus",
-  "focus-within": ":focus-within",
-  "focus-visible": ":focus-visible",
-  active: ":active",
-  pressed: ":active",
-  disabled: ":disabled",
-  checked: ":checked",
-  visited: ":visited",
-  placeholder: "::placeholder",
-  first: ":first-child",
-  last: ":last-child",
-  odd: ":nth-child(odd)",
-  even: ":nth-child(even)",
-  only: ":only-child",
-  "not-hover": ":not(:hover)",
-  "not-focus": ":not(:focus)",
-  "not-active": ":not(:active)",
-  "not-pressed": ":not(:active)",
-  "not-disabled": ":not(:disabled)",
-  "not-checked": ":not(:checked)",
-  "not-visited": ":not(:visited)",
-  // Pseudo-elements (CSS-injection only; never applied as inline styles)
-  before: "::before",
-  after: "::after",
-  selection: "::selection",
-  "first-letter": "::first-letter",
-  "first-line": "::first-line",
-  marker: "::marker"
-};
-var GROUP_PEER_PREFIX = {
-  "group-hover": ".group:hover",
-  "group-focus": ".group:focus",
-  "peer-hover": ".peer:hover ~",
-  "peer-focus": ".peer:focus ~"
-};
-var MODE_MODS = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
-var RESPONSIVE_MODS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
-var PRINT_MODS = /* @__PURE__ */ new Set(["print"]);
-var MEDIA_MODS = {
-  landscape: "(orientation: landscape)",
-  portrait: "(orientation: portrait)",
-  "motion-reduce": "(prefers-reduced-motion: reduce)",
-  "motion-safe": "(prefers-reduced-motion: no-preference)",
-  "contrast-more": "(prefers-contrast: more)",
-  "contrast-less": "(prefers-contrast: less)"
-};
-var DIR_MODS = {
-  rtl: '[dir="rtl"]',
-  ltr: '[dir="ltr"]'
-};
 function buildDivideDecls(styles) {
   const parts = [];
   if ("__divideX" in styles) {
     const w = Number(styles.__divideX);
-    parts.push(`border-left-width: ${w}px`);
-    parts.push("border-right-width: 0px");
+    parts.push(`border-left-width: ${w}px`, "border-right-width: 0px");
   }
   if ("__divideY" in styles) {
     const w = Number(styles.__divideY);
-    parts.push(`border-top-width: ${w}px`);
-    parts.push("border-bottom-width: 0px");
+    parts.push(`border-top-width: ${w}px`, "border-bottom-width: 0px");
   }
   if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}`);
   if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}`);
   return parts.join("; ");
 }
-function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens) {
-  const rules = [];
-  if ("__keyframe" in styles && typeof styles.__keyframe === "string") {
-    rules.push(styles.__keyframe);
-  }
-  const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
-  const escaped = escapeCSSSelector(cls);
-  const childSuffix = isDivide ? " > * + *" : "";
-  if (bucketKey === "base") {
-    const baseCssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
-    if (!baseCssDecls) return rules;
-    rules.push(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
-    return rules;
-  }
-  const mods = bucketKey.split(":");
-  const responsiveMods = mods.filter((m) => RESPONSIVE_MODS.has(m));
-  const nonResponsiveMods = mods.filter((m) => !RESPONSIVE_MODS.has(m));
-  const hasDark = nonResponsiveMods.includes("dark") || nonResponsiveMods.includes("not-light");
-  const hasLight = nonResponsiveMods.includes("light") || nonResponsiveMods.includes("not-dark");
-  const hasPrint = nonResponsiveMods.includes("print");
-  const mediaMods = nonResponsiveMods.filter((m) => m in MEDIA_MODS);
-  const dirMods = nonResponsiveMods.filter((m) => m in DIR_MODS);
-  const ancestorMods = nonResponsiveMods.filter((m) => m in GROUP_PEER_PREFIX);
-  const pseudoMods = nonResponsiveMods.filter(
-    (m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX) && !PRINT_MODS.has(m) && !(m in MEDIA_MODS) && !(m in DIR_MODS)
-  );
-  const pseudoSuffix = pseudoMods.map((p) => MODIFIER_TO_PSEUDO[p] ?? `:${p}`).join("");
-  const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
-  const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
-  const dirPrefix = dirMods.length ? dirMods.map((m) => DIR_MODS[m]).join(" ") + " " : "";
-  const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
-  const CSS_ONLY_PSEUDOS = /* @__PURE__ */ new Set([
-    "first",
-    "last",
-    "odd",
-    "even",
-    "only",
-    "focus-within",
-    "focus-visible"
-  ]);
-  const needsImportant = important || hasPrint || mediaMods.length > 0 || dirMods.length > 0 || ancestorMods.length > 0 || pseudoMods.some((m) => CSS_ONLY_PSEUDOS.has(m));
-  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
-  if (!cssDecls) return rules;
-  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 if (hasLight) {
-    if (darkMode === "media") {
-      rule = `@media (prefers-color-scheme: light) { ${selector} { ${cssDecls} } }`;
-    } else if (darkMode === "class") {
-      rule = `:not(.dark) ${selector} { ${cssDecls} }`;
-    } else {
-      rule = `[data-theme="light"] ${selector} { ${cssDecls} }`;
-    }
-  } else {
-    rule = `${selector} { ${cssDecls} }`;
-  }
-  if (hasPrint) rule = `@media print { ${rule} }`;
-  for (const m of mediaMods) rule = `@media ${MEDIA_MODS[m]} { ${rule} }`;
-  if (responsiveMods.length > 0) {
-    const minWidth = Math.max(...responsiveMods.map((m) => screens[m] ?? 0));
-    if (minWidth > 0) rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
-  }
-  rules.push(rule);
-  return rules;
-}
-function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
-  const cssRules = buildClassCSSRules(cls, bucketKey, styles, darkMode, important, getGlobalScreens());
-  for (const r of cssRules) injectRule(r);
-}
 var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "shadowColor",
   "shadowOffset",
@@ -3363,13 +2730,10 @@ var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "includeFontPadding",
   "textAlignVertical",
   "writingDirection",
-  // Text shadow native props — web uses the textShadow CSS shorthand instead
   "textShadowColor",
   "textShadowOffset",
   "textShadowRadius",
-  // tintColor is native-only (Image/icon tinting)
   "tintColor",
-  // Internal markers — handled specially, never serialized as CSS props
   "__divideX",
   "__divideY",
   "__divideColor",
@@ -3411,8 +2775,7 @@ function styleValueToCSS(styles, forceImportant = false) {
     const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
     if (prop in RN_SHORTHAND_EXPAND) {
       const [p1, p2] = RN_SHORTHAND_EXPAND[prop];
-      parts.push(`${p1}: ${cssVal}${imp}`);
-      parts.push(`${p2}: ${cssVal}${imp}`);
+      parts.push(`${p1}: ${cssVal}${imp}`, `${p2}: ${cssVal}${imp}`);
       continue;
     }
     parts.push(`${camelToKebab(prop)}: ${cssVal}${imp}`);
@@ -3422,14 +2785,87 @@ function styleValueToCSS(styles, forceImportant = false) {
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
 }
+function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens) {
+  const rules = [];
+  if ("__keyframe" in styles && typeof styles.__keyframe === "string") {
+    rules.push(styles.__keyframe);
+  }
+  const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
+  const escaped = escapeCSSSelector(cls);
+  const childSuffix = isDivide ? " > * + *" : "";
+  if (bucketKey === "base") {
+    const decls2 = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    if (!decls2) return rules;
+    rules.push(`.${escaped}${childSuffix} { ${decls2} }`);
+    return rules;
+  }
+  const mods = bucketKey.split(":");
+  let darkScheme;
+  let needsImportant = important;
+  const pseudoParts = [];
+  const ancestorParts = [];
+  const dirParts = [];
+  const mediaWrappers = [];
+  let minWidth = 0;
+  for (const mod of mods) {
+    const def = getModifier(mod);
+    if (!def) continue;
+    if (def.darkScheme) darkScheme = def.darkScheme;
+    if (def.pseudo) pseudoParts.push(def.pseudo);
+    if (def.ancestorSelector) {
+      ancestorParts.push(def.ancestorSelector);
+      needsImportant = true;
+    }
+    if (def.dirSelector) {
+      dirParts.push(def.dirSelector);
+      needsImportant = true;
+    }
+    if (def.mediaQuery) {
+      mediaWrappers.push(`@media ${def.mediaQuery}`);
+      needsImportant = true;
+    }
+    if (def.isResponsive) {
+      const w = screens[mod] ?? 0;
+      if (w > minWidth) minWidth = w;
+    }
+    if (def.forcesImportant) needsImportant = true;
+  }
+  const pseudoSuffix = pseudoParts.join("");
+  const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
+  const ancestorPrefix = ancestorParts.join("");
+  const dirPrefix = dirParts.join("");
+  const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
+  const decls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  if (!decls) return rules;
+  let rule;
+  if (darkScheme === "dark") {
+    if (darkMode === "media") rule = `@media (prefers-color-scheme: dark) { ${selector} { ${decls} } }`;
+    else if (darkMode === "class") rule = `.dark ${selector} { ${decls} }`;
+    else rule = `[data-theme="dark"] ${selector} { ${decls} }`;
+  } else if (darkScheme === "light") {
+    if (darkMode === "media") rule = `@media (prefers-color-scheme: light) { ${selector} { ${decls} } }`;
+    else if (darkMode === "class") rule = `:not(.dark) ${selector} { ${decls} }`;
+    else rule = `[data-theme="light"] ${selector} { ${decls} }`;
+  } else {
+    rule = `${selector} { ${decls} }`;
+  }
+  for (const mw of mediaWrappers) rule = `${mw} { ${rule} }`;
+  if (minWidth > 0) rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
+  rules.push(rule);
+  return rules;
+}
+function injectClassRule(cls, bucketKey, styles, darkMode, important) {
+  const cssRules = buildClassCSSRules(cls, bucketKey, styles, darkMode, important, getGlobalScreens());
+  for (const r of cssRules) injectRule(r);
+}
 function resolve(classString, theme, darkMode = "attribute") {
+  const cache = getThemeCache(theme);
   const cacheKey = `${classString}::${darkMode}`;
-  const cached = styleCache.get(cacheKey);
+  const cached = cache.get(cacheKey);
   if (cached) return cached;
   const result = {};
-  const parsedClasses = parseClasses(classString);
-  const injectQueue = [];
-  for (const parsed of parsedClasses) {
+  const onWeb = typeof document !== "undefined";
+  for (const parsed of parseClasses(classString)) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) {
       if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility)) {
@@ -3440,116 +2876,60 @@ function resolve(classString, theme, darkMode = "attribute") {
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
-    if (typeof document !== "undefined") {
-      injectQueue.push({ cls: parsed.original, bucketKey, styles, important: parsed.important });
-    }
-  }
-  styleCache.set(cacheKey, result);
-  if (typeof document !== "undefined") {
-    for (const { cls, bucketKey, styles, important } of injectQueue) {
-      injectClassRule(cls, bucketKey, styles, darkMode, important);
+    if (onWeb) {
+      injectClassRule(parsed.original, bucketKey, styles, darkMode, parsed.important);
     }
   }
+  cache.set(cacheKey, result);
   return result;
 }
 function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
   const result = {};
-  const entries = Object.entries(resolved);
-  entries.sort((a, b) => {
-    const pa = a[0] === "base" ? -1 : a[0].split(":").length;
-    const pb = b[0] === "base" ? -1 : b[0].split(":").length;
-    return pa - pb;
-  });
-  for (const [key, styles] of entries) {
+  for (const [key, styles] of getSortedEntries(resolved)) {
     if (!styles) continue;
     if (key === "base") {
       Object.assign(result, styles);
       continue;
     }
     const mods = key.split(":");
-    if (matchesMods(mods, isDark, state, breakpoints)) {
+    if (mods.every((mod) => matchModifier(mod, isDark, state, breakpoints))) {
       Object.assign(result, styles);
     }
   }
-  const _df = getDefaultFontFamily();
-  if (_df && !("fontFamily" in result)) {
-    result.fontFamily = _df;
+  const defaultFont = getDefaultFontFamily();
+  if (defaultFont && !("fontFamily" in result)) {
+    result.fontFamily = defaultFont;
   }
   if (isWeb) {
     const r = result;
-    for (const [rnProp, [p1, p2]] of Object.entries(RN_SHORTHAND_EXPAND)) {
-      const v = r[rnProp];
-      if (v !== void 0) {
-        r[p1] = v;
-        r[p2] = v;
-        delete r[rnProp];
-      }
+    const ph = r.paddingHorizontal;
+    if (ph !== void 0) {
+      r.paddingLeft = ph;
+      r.paddingRight = ph;
+      delete r.paddingHorizontal;
+    }
+    const pv = r.paddingVertical;
+    if (pv !== void 0) {
+      r.paddingTop = pv;
+      r.paddingBottom = pv;
+      delete r.paddingVertical;
+    }
+    const mh = r.marginHorizontal;
+    if (mh !== void 0) {
+      r.marginLeft = mh;
+      r.marginRight = mh;
+      delete r.marginHorizontal;
+    }
+    const mv = r.marginVertical;
+    if (mv !== void 0) {
+      r.marginTop = mv;
+      r.marginBottom = mv;
+      delete r.marginVertical;
     }
   }
   return result;
 }
-function matchesMods(mods, isDark, state, breakpoints) {
-  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;
-      case "sm":
-      case "md":
-      case "lg":
-      case "xl":
-      case "2xl":
-        return breakpoints.has(mod);
-      // CSS-only modifiers — never applied as inline styles
-      case "print":
-      case "landscape":
-      case "portrait":
-      case "motion-reduce":
-      case "motion-safe":
-      case "contrast-more":
-      case "contrast-less":
-      case "rtl":
-      case "ltr":
-        return false;
-      default:
-        return false;
-    }
-  });
-}
 function clearCache() {
-  styleCache.clear();
   _injectedRules.clear();
   if (_styleEl) {
     _styleEl.remove();
@@ -3596,14 +2976,24 @@ function resolveOneRef(ref, colors) {
   return entry[m[2]] ?? null;
 }
 function resolveColorRefs(colors) {
+  const MAX_DEPTH = 5;
+  function resolveChain(raw) {
+    let current = raw;
+    for (let i = 0; i < MAX_DEPTH; i++) {
+      const next = resolveOneRef(current, colors);
+      if (!next || next === current) break;
+      current = next;
+    }
+    return current;
+  }
   const out = {};
   for (const [key, val] of Object.entries(colors)) {
     if (typeof val === "string") {
-      out[key] = resolveOneRef(val, colors) ?? val;
+      out[key] = resolveChain(val);
     } else {
       const shades = {};
       for (const [shade, hex] of Object.entries(val)) {
-        shades[shade] = resolveOneRef(hex, colors) ?? hex;
+        shades[shade] = resolveChain(hex);
       }
       out[key] = shades;
     }
@@ -3651,15 +3041,26 @@ function buildConfig(userConfig) {
   injectGlobalStyles(resolved.theme);
   return resolved;
 }
+function _selectorToModifierDef(selector) {
+  const s = selector.trim();
+  if (s.startsWith("@media ")) {
+    return { mediaQuery: s.slice(7), jsBehavior: "css-only", forcesImportant: true };
+  }
+  if (s.startsWith("::") || s.startsWith(":")) {
+    return { pseudo: s, jsBehavior: "css-only", forcesImportant: true };
+  }
+  return { ancestorSelector: s.endsWith(" ") ? s : `${s} `, jsBehavior: "css-only", forcesImportant: true };
+}
 function makePluginAPI(theme) {
   const standalone = getPluginStandaloneMap();
   return {
     addUtility(name, styles) {
       standalone[name] = styles;
     },
-    addVariant(name, selector) {
-      customVariants[name] = selector;
-      registerModifier(name);
+    addVariant(name, selectorOrDef) {
+      const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
+      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      registerModifier(name, def);
     },
     theme(path, defaultValue) {
       const parts = path.replace(/\[([^\]]+)\]/g, ".$1").split(".");
@@ -3784,8 +3185,16 @@ function ThemeProvider({
     () => isWeb && typeof window !== "undefined" ? window.innerWidth : 0
   );
   const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
-  syncGlobalWidth(effectiveWidth);
-  syncGlobalScreens(resolvedConfig.theme.screens);
+  const numericScreens = {};
+  for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
+    numericScreens[k] = typeof v === "number" ? v : parseInt(String(v), 10);
+  }
+  const _prevWidthRef = (0, import_react3.useRef)(-1);
+  if (_prevWidthRef.current !== effectiveWidth) {
+    _prevWidthRef.current = effectiveWidth;
+    syncGlobalWidth(effectiveWidth);
+  }
+  syncGlobalScreens(numericScreens);
   (0, import_react3.useEffect)(() => {
     setGlobalWidth(effectiveWidth);
   }, [effectiveWidth]);
@@ -4059,17 +3468,19 @@ function useConditionalWidth(active) {
   );
 }
 
-// src/styled.tsx
-var RESPONSIVE_MODS2 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+// src/shared-utils.ts
 function hasResponsiveBuckets(resolved) {
+  const responsiveMods = getResponsiveModifiers();
   for (const key of Object.keys(resolved)) {
     if (key === "base") continue;
     for (const mod of key.split(":")) {
-      if (RESPONSIVE_MODS2.has(mod)) return true;
+      if (responsiveMods.has(mod)) return true;
     }
   }
   return false;
 }
+
+// src/styled.tsx
 function styled(Component, baseClasses = "") {
   const Styled = (0, import_react6.forwardRef)(
     (props, ref) => {
@@ -4164,10 +3575,10 @@ var import_react7 = require("react");
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
-  const breakpoints = getActiveBreakpoints(width);
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
   return (0, import_react7.useMemo)(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
+    const breakpoints = getActiveBreakpoints(width);
     return flatten(resolved, isDark, state, breakpoints);
   }, [normalised, isDark, config, width, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
 }
@@ -4197,11 +3608,15 @@ function useGlobalDarkMode() {
 }
 
 // src/useBreakpoint.ts
+var import_react9 = require("react");
 function useBreakpoint() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  const sorted = Object.entries(screens).filter(([, v]) => typeof v === "number").sort(([, a], [, b]) => b - a);
+  const sorted = (0, import_react9.useMemo)(
+    () => Object.entries(screens).filter(([, v]) => typeof v === "number").sort(([, a], [, b]) => b - a),
+    [screens]
+  );
   for (const [name, minW] of sorted) {
     if (width >= minW) return name;
   }
@@ -4211,32 +3626,24 @@ function useResponsive() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  const result = {};
-  for (const [name, minW] of Object.entries(screens)) {
-    if (typeof minW === "number") result[name] = width >= minW;
-  }
-  return result;
+  return (0, import_react9.useMemo)(() => {
+    const result = {};
+    for (const [name, minW] of Object.entries(screens)) {
+      if (typeof minW === "number") result[name] = width >= minW;
+    }
+    return result;
+  }, [screens, width]);
 }
 
 // src/InteractiveWrapper.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 function chain(original, extra) {
   return (...args) => {
     original?.(...args);
     extra();
   };
 }
-var RESPONSIVE_MODS3 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
-function hasResponsiveBuckets2(resolved) {
-  for (const key of Object.keys(resolved)) {
-    if (key === "base") continue;
-    for (const mod of key.split(":")) {
-      if (RESPONSIVE_MODS3.has(mod)) return true;
-    }
-  }
-  return false;
-}
-var InteractiveWrapper = (0, import_react9.forwardRef)(
+var InteractiveWrapper = (0, import_react10.forwardRef)(
   function InteractiveWrapper2({
     Component,
     resolvedStyle,
@@ -4254,22 +3661,22 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     ...rest
   }, ref) {
     const isDark = useGlobalDarkMode();
-    const needsWidth = hasResponsiveBuckets2(resolvedStyle);
+    const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-    const [pressed, setPressed] = (0, import_react9.useState)(false);
-    const [hovered, setHovered] = (0, import_react9.useState)(false);
-    const [focused, setFocused] = (0, import_react9.useState)(false);
-    const handlePressIn = (0, import_react9.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react9.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handlePointerDown = (0, import_react9.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-    const handlePointerUp = (0, import_react9.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-    const handlePointerLeave = (0, import_react9.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-    const handleMouseEnter = (0, import_react9.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react9.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react9.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react9.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
-    const computedStyle = (0, import_react9.useMemo)(
+    const [pressed, setPressed] = (0, import_react10.useState)(false);
+    const [hovered, setHovered] = (0, import_react10.useState)(false);
+    const [focused, setFocused] = (0, import_react10.useState)(false);
+    const handlePressIn = (0, import_react10.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = (0, import_react10.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = (0, import_react10.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = (0, import_react10.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = (0, import_react10.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
+    const handleMouseEnter = (0, import_react10.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = (0, import_react10.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = (0, import_react10.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = (0, import_react10.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const computedStyle = (0, import_react10.useMemo)(
       () => {
         const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused }, breakpoints);
         delete s.__divideX;
@@ -4320,7 +3727,7 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
       onFocus: handleFocus,
       onBlur: handleBlur
     };
-    return Array.isArray(children) ? import_react9.default.createElement(Component, componentProps, ...children) : import_react9.default.createElement(Component, componentProps, children);
+    return Array.isArray(children) ? import_react10.default.createElement(Component, componentProps, ...children) : import_react10.default.createElement(Component, componentProps, children);
   }
 );
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";