@kbach/react 0.6.37 → 0.6.40

package/dist/{chunk-ZTDE7V7I.mjs → chunk-LQH3CJ3G.mjs}

@@ -75,64 +75,64 @@ var LRUCache = class {
 // 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 },
+  dark: { order: 60, darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  "not-light": { order: 60, darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  light: { order: 60, darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  "not-dark": { order: 60, 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 },
+  hover: { order: 10, pseudo: ":hover", jsBehavior: "interactive", jsMatch: (_, s) => !!s.hover },
+  "not-hover": { order: 10, pseudo: ":not(:hover)", jsBehavior: "interactive", jsMatch: (_, s) => !s.hover },
+  focus: { order: 20, pseudo: ":focus", jsBehavior: "interactive", jsMatch: (_, s) => !!s.focus },
+  "not-focus": { order: 20, pseudo: ":not(:focus)", jsBehavior: "interactive", jsMatch: (_, s) => !s.focus },
+  active: { order: 30, pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.active || !!s.pressed },
+  "not-active": { order: 30, pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.active && !s.pressed },
+  pressed: { order: 30, pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.pressed || !!s.active },
+  "not-pressed": { order: 30, pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.pressed && !s.active },
+  disabled: { order: 40, pseudo: ":disabled", jsBehavior: "interactive", jsMatch: (_, s) => !!s.disabled },
+  "not-disabled": { order: 40, pseudo: ":not(:disabled)", jsBehavior: "interactive", jsMatch: (_, s) => !s.disabled },
+  checked: { order: 35, pseudo: ":checked", jsBehavior: "interactive", jsMatch: (_, s) => !!s.checked },
+  "not-checked": { order: 35, pseudo: ":not(:checked)", jsBehavior: "interactive", jsMatch: (_, s) => !s.checked },
+  visited: { order: 5, pseudo: ":visited", jsBehavior: "interactive", jsMatch: (_, s) => !!s.visited },
+  "not-visited": { order: 5, pseudo: ":not(:visited)", jsBehavior: "interactive", jsMatch: (_, s) => !s.visited },
+  placeholder: { order: 0, 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 },
+  first: { order: 0, pseudo: ":first-child", jsBehavior: "css-only", forcesImportant: true },
+  last: { order: 0, pseudo: ":last-child", jsBehavior: "css-only", forcesImportant: true },
+  odd: { order: 0, pseudo: ":nth-child(odd)", jsBehavior: "css-only", forcesImportant: true },
+  even: { order: 0, pseudo: ":nth-child(even)", jsBehavior: "css-only", forcesImportant: true },
+  only: { order: 0, pseudo: ":only-child", jsBehavior: "css-only", forcesImportant: true },
+  "focus-within": { order: 15, pseudo: ":focus-within", jsBehavior: "css-only", forcesImportant: true },
+  "focus-visible": { order: 25, 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" },
+  before: { order: 0, pseudo: "::before", jsBehavior: "css-only" },
+  after: { order: 0, pseudo: "::after", jsBehavior: "css-only" },
+  selection: { order: 0, pseudo: "::selection", jsBehavior: "css-only" },
+  "first-letter": { order: 0, pseudo: "::first-letter", jsBehavior: "css-only" },
+  "first-line": { order: 0, pseudo: "::first-line", jsBehavior: "css-only" },
+  marker: { order: 0, 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 },
+  "group-hover": { order: 10, ancestorSelector: ".group:hover ", jsBehavior: "css-only", forcesImportant: true },
+  "group-focus": { order: 20, ancestorSelector: ".group:focus ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-hover": { order: 10, ancestorSelector: ".peer:hover ~ ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-focus": { order: 20, 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") },
+  sm: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("sm") },
+  md: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("md") },
+  lg: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("lg") },
+  xl: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("xl") },
+  "2xl": { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("2xl") },
   // ── Print media (CSS-only) ─────────────────────────────────────────────────
-  print: { mediaQuery: "print", jsBehavior: "css-only", forcesImportant: true },
+  print: { order: 70, 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 },
+  landscape: { order: 70, mediaQuery: "(orientation: landscape)", jsBehavior: "css-only", forcesImportant: true },
+  portrait: { order: 70, mediaQuery: "(orientation: portrait)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-reduce": { order: 70, mediaQuery: "(prefers-reduced-motion: reduce)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-safe": { order: 70, mediaQuery: "(prefers-reduced-motion: no-preference)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-more": { order: 70, mediaQuery: "(prefers-contrast: more)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-less": { order: 70, 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 }
+  rtl: { order: 80, dirSelector: '[dir="rtl"] ', jsBehavior: "css-only", forcesImportant: true },
+  ltr: { order: 80, dirSelector: '[dir="ltr"] ', jsBehavior: "css-only", forcesImportant: true }
 };
 var _pluginModifiers = {};
 var _allNames = null;
@@ -169,6 +169,8 @@ function getNamedGroupPeerModifier(name) {
   const pseudo = trigger === "hover" ? ":hover" : ":focus";
   const combinator = kind === "group" ? " " : " ~ ";
   const def = {
+    // Matches the plain group-hover/group-focus/peer-hover/peer-focus order below.
+    order: trigger === "hover" ? 10 : 20,
     ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
     jsBehavior: "css-only",
     forcesImportant: true
@@ -203,6 +205,15 @@ function getResponsiveModifiers() {
   }
   return _responsiveNames;
 }
+function getModifierOrder(bucketKey) {
+  if (bucketKey === "base") return -1;
+  let max = 0;
+  for (const mod of bucketKey.split(":")) {
+    const order = getModifier(mod)?.order ?? 0;
+    if (order > max) max = order;
+  }
+  return max;
+}
 function matchModifier(name, isDark, state, breakpoints) {
   return getModifier(name)?.jsMatch?.(isDark, state, breakpoints) ?? false;
 }
@@ -211,6 +222,11 @@ function matchModifier(name, isDark, state, breakpoints) {
 function isModeAwareColor(v) {
   return typeof v === "object" && v !== null && "light" in v && "dark" in v;
 }
+function splitColorShadeRef(ref) {
+  const lastDash = ref.lastIndexOf("-");
+  if (lastDash <= 0) return null;
+  return { name: ref.slice(0, lastDash), shade: ref.slice(lastDash + 1) };
+}
 
 // src/core/resolvers/color.ts
 function pickModeAwareFallback(v) {
@@ -230,13 +246,11 @@ function resolveColor(value, colors, isArbitrary) {
     else if (isModeAwareColor(entry)) hex = pickModeAwareFallback(entry);
     else if (typeof entry === "object" && "6" in entry) hex = pickModeAwareFallback(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" && !isModeAwareColor(scale) && shade in scale) {
-        const shadeVal = scale[shade];
+    const split = splitColorShadeRef(colorPart);
+    if (split) {
+      const scale = colors[split.name];
+      if (scale && typeof scale === "object" && !isModeAwareColor(scale) && split.shade in scale) {
+        const shadeVal = scale[split.shade];
         hex = shadeVal !== void 0 ? pickModeAwareFallback(shadeVal) : null;
       }
     }
@@ -377,6 +391,7 @@ function resolveSpacing(value, negative, spacing, isArbitrary) {
     if (negative) {
       if (typeof resolved === "number") return -resolved;
       if (typeof resolved === "string") {
+        if (resolved.startsWith("-")) return resolved.slice(1);
         if (/^\d/.test(resolved)) return `-${resolved}`;
         if (/^(calc|var|min|max|clamp|env)\s*\(/.test(resolved)) return `calc(-1 * (${resolved}))`;
       }
@@ -555,7 +570,7 @@ function makeBorderSideResolver(widthProp, colorProp) {
     if (!value) return { [widthProp]: 1 };
     if (isArbitrary) {
       const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { [widthProp]: w2 };
+      if (typeof w2 === "number") return { [widthProp]: getEffectiveIsWeb() ? value : w2 };
       return { [colorProp]: value };
     }
     const color = resolveColor(value, colors, false);
@@ -576,7 +591,7 @@ var borderResolvers = {
     if (!value) return { borderWidth: borderWidth["DEFAULT"] ?? 1 };
     if (isArbitrary) {
       const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { borderWidth: w2 };
+      if (typeof w2 === "number") return { borderWidth: getEffectiveIsWeb() ? value : w2 };
       return { borderColor: value };
     }
     const color = resolveColor(value, colors, false);
@@ -775,9 +790,9 @@ var filterResolvers = {
     const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-contrast": v, filter: FILTER_COMPOSE };
   },
-  grayscale: ({ value }) => {
+  grayscale: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = value === "0" ? "grayscale(0)" : "grayscale(100%)";
+    const v = isArbitrary ? `grayscale(${value})` : value === "0" ? "grayscale(0)" : "grayscale(100%)";
     return { "--kb-grayscale": v, filter: FILTER_COMPOSE };
   },
   "hue-rotate": ({ value, negative, isArbitrary }) => {
@@ -786,9 +801,9 @@ var filterResolvers = {
     if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
     return { "--kb-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
   },
-  invert: ({ value }) => {
+  invert: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = value === "0" ? "invert(0)" : "invert(100%)";
+    const v = isArbitrary ? `invert(${value})` : value === "0" ? "invert(0)" : "invert(100%)";
     return { "--kb-invert": v, filter: FILTER_COMPOSE };
   },
   saturate: ({ value, isArbitrary }) => {
@@ -796,9 +811,9 @@ var filterResolvers = {
     const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-saturate": v, filter: FILTER_COMPOSE };
   },
-  sepia: ({ value }) => {
+  sepia: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = value === "0" ? "sepia(0)" : "sepia(100%)";
+    const v = isArbitrary ? `sepia(${value})` : value === "0" ? "sepia(0)" : "sepia(100%)";
     return { "--kb-sepia": v, filter: FILTER_COMPOSE };
   },
   "drop-shadow": ({ value, isArbitrary }) => {
@@ -849,9 +864,10 @@ var filterResolvers = {
     const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
-  "backdrop-grayscale": ({ value }) => {
+  "backdrop-grayscale": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    return { "--kb-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    const v = isArbitrary ? `grayscale(${value})` : value === "0" ? "grayscale(0)" : "grayscale(100%)";
+    return { "--kb-backdrop-grayscale": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -859,9 +875,10 @@ var filterResolvers = {
     if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
     return { "--kb-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
-  "backdrop-invert": ({ value }) => {
+  "backdrop-invert": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    return { "--kb-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    const v = isArbitrary ? `invert(${value})` : value === "0" ? "invert(0)" : "invert(100%)";
+    return { "--kb-backdrop-invert": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-opacity": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -873,9 +890,10 @@ var filterResolvers = {
     const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
-  "backdrop-sepia": ({ value }) => {
+  "backdrop-sepia": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    return { "--kb-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    const v = isArbitrary ? `sepia(${value})` : value === "0" ? "sepia(0)" : "sepia(100%)";
+    return { "--kb-backdrop-sepia": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-filter": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -945,8 +963,8 @@ var filterResolvers = {
 
 // src/core/resolvers/layout.ts
 var _standalone = null;
-function buildStandalone() {
-  const web = getEffectiveIsWeb();
+var _standaloneWeb = null;
+function buildStandalone(web) {
   return {
     // Display
     // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
@@ -961,7 +979,6 @@ function buildStandalone() {
     "inline-block": { display: web ? "inline-block" : "flex" },
     inline: { display: web ? "inline" : "flex" },
     grid: web ? { display: "grid" } : null,
-    grd: web ? { display: "grid" } : null,
     "inline-flex": { display: web ? "inline-flex" : "flex" },
     "inline-grid": { display: web ? "inline-grid" : "flex" },
     hidden: { display: "none" },
@@ -1313,7 +1330,11 @@ function buildStandalone() {
   };
 }
 function getStandalone() {
-  if (!_standalone) _standalone = buildStandalone();
+  const web = getEffectiveIsWeb();
+  if (!_standalone || _standaloneWeb !== web) {
+    _standalone = buildStandalone(web);
+    _standaloneWeb = web;
+  }
   return _standalone;
 }
 var layoutResolvers = {
@@ -1877,6 +1898,18 @@ var effectResolvers = {
     if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
+  },
+  ease: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { transitionTimingFunction: value };
+    const presets = {
+      linear: "linear",
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { transitionTimingFunction: v } : null;
   }
 };
 
@@ -2926,9 +2959,21 @@ function getDefaultFontFamily() {
 }
 var _styleEl = null;
 var _ruleIndexByKey = /* @__PURE__ */ new Map();
+var _sheetKeys = [];
+var _ruleOrderByKey = /* @__PURE__ */ new Map();
+function findInsertionIndex(order) {
+  let lo = 0, hi = _sheetKeys.length;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    if (_ruleOrderByKey.get(_sheetKeys[mid]) > order) hi = mid;
+    else lo = mid + 1;
+  }
+  return lo;
+}
 function evictInjectedRule(rule) {
   const idx = _ruleIndexByKey.get(rule);
   _ruleIndexByKey.delete(rule);
+  _ruleOrderByKey.delete(rule);
   if (idx === void 0) return;
   const sheet = _styleEl?.sheet;
   if (!sheet) return;
@@ -2937,6 +2982,7 @@ function evictInjectedRule(rule) {
   } catch {
     return;
   }
+  _sheetKeys.splice(idx, 1);
   for (const [key, i] of _ruleIndexByKey) {
     if (i > idx) _ruleIndexByKey.set(key, i - 1);
   }
@@ -2956,15 +3002,20 @@ function getStyleEl() {
   document.head.appendChild(_styleEl);
   return _styleEl;
 }
-function injectRule(rule) {
+function injectRule(rule, order) {
   if (isRuntimeCSSDisabled()) return;
   if (_injectedRules.get(rule)) return;
   try {
     const sheet = getStyleEl().sheet;
     if (sheet) {
-      const idx = sheet.cssRules.length;
+      const idx = findInsertionIndex(order);
       sheet.insertRule(rule, idx);
+      _sheetKeys.splice(idx, 0, rule);
+      for (const [key, i] of _ruleIndexByKey) {
+        if (i >= idx) _ruleIndexByKey.set(key, i + 1);
+      }
       _ruleIndexByKey.set(rule, idx);
+      _ruleOrderByKey.set(rule, order);
       _injectedRules.set(rule, true);
     }
   } catch {
@@ -3156,16 +3207,23 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
   rules.push(rule);
   return rules;
 }
-function injectClassRule(cls, bucketKey, styles, darkMode, important) {
+function injectClassRule(cls, bucketKey, styles, darkMode, important, order) {
   const cssRules = buildClassCSSRules(cls, bucketKey, styles, darkMode, important, getGlobalScreens());
-  for (const r of cssRules) injectRule(r);
+  for (const r of cssRules) injectRule(r, order);
+  return cssRules;
 }
 function resolve(classString, theme, darkMode = "attribute") {
   const cache = getThemeCache(theme);
-  const cacheKey = `${classString}::${darkMode}`;
+  const cacheKey = `${classString}::${darkMode}::${getEffectiveIsWeb() ? "web" : "native"}`;
   const cached = cache.get(cacheKey);
-  if (cached) return cached;
+  if (cached) {
+    if (isWeb) {
+      for (const { rule, order } of cached.rules) injectRule(rule, order);
+    }
+    return cached.result;
+  }
   const result = {};
+  const rules = [];
   const onWeb = isWeb;
   for (const parsed of parseClasses(expandModeAwareColorClasses(classString, theme.colors))) {
     const styles = resolveUtility(parsed, theme);
@@ -3179,10 +3237,13 @@ function resolve(classString, theme, darkMode = "attribute") {
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
     if (onWeb) {
-      injectClassRule(parsed.original, bucketKey, styles, darkMode, parsed.important);
+      const order = getModifierOrder(bucketKey);
+      for (const r of injectClassRule(parsed.original, bucketKey, styles, darkMode, parsed.important, order)) {
+        rules.push({ rule: r, order });
+      }
     }
   }
-  cache.set(cacheKey, result);
+  cache.set(cacheKey, { result, rules });
   return result;
 }
 function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
@@ -3236,6 +3297,8 @@ function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new
 function clearCache() {
   _injectedRules.clear();
   _ruleIndexByKey.clear();
+  _ruleOrderByKey.clear();
+  _sheetKeys.length = 0;
   if (_styleEl) {
     _styleEl.remove();
     _styleEl = null;
@@ -3263,12 +3326,15 @@ function deepMerge(base, override) {
   }
   return result;
 }
-var configStore = { resolved: null, listeners: /* @__PURE__ */ new Set(), customVariants: {} };
+var configStore = { resolved: null, listeners: /* @__PURE__ */ new Set() };
 function getConfig() {
   if (configStore.resolved) return configStore.resolved;
   configStore.resolved = buildConfig({});
   return configStore.resolved;
 }
+function resetConfig() {
+  configStore.resolved = null;
+}
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
   function resolveChain(raw, side) {
@@ -3302,10 +3368,9 @@ function resolveColorRefs(colors) {
       const a = opacity > 1 ? opacity / 100 : opacity;
       return hexToRgba(baseHex, a);
     }
-    const lastDash = ref.lastIndexOf("-");
-    if (lastDash <= 0) return null;
-    const name = ref.slice(0, lastDash);
-    const shade = ref.slice(lastDash + 1);
+    const split = splitColorShadeRef(ref);
+    if (!split) return null;
+    const { name, shade } = split;
     if (!/^\d+$/.test(shade)) return null;
     const entry = colors[name];
     if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
@@ -3367,7 +3432,6 @@ function buildConfig(userConfig) {
     clearPluginUtilities();
     clearPluginModifiers();
   }
-  for (const k of Object.keys(configStore.customVariants)) delete configStore.customVariants[k];
   const pluginAPI = makePluginAPI(resolved.theme);
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
@@ -3396,8 +3460,6 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? null;
-      if (selector !== null && selector !== name) customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -3430,7 +3492,6 @@ function initConfig(userConfig) {
   if (configStore._src === userConfig) return;
   updateConfig(userConfig);
 }
-var customVariants = configStore.customVariants;
 
 // src/core/darkModeStore.ts
 var store2 = { isDark: false, notifiedIsDark: false, subscribers: /* @__PURE__ */ new Set() };
@@ -3541,6 +3602,10 @@ function stripWebOnlyProps(s) {
     delete s.position;
   }
 }
+function composeNativeStyle(computed, userStyle) {
+  if (!userStyle) return computed;
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
+}
 
 // src/web-substitute.ts
 var _rnToHtml = {
@@ -3568,11 +3633,21 @@ function registerWebElement(rnComponent, htmlTag) {
   _userMap.set(rnComponent, htmlTag);
   _cache.delete(rnComponent);
 }
+var _forwardRefOrMemoType = /* @__PURE__ */ new Set([
+  /* @__PURE__ */ Symbol.for("react.forward_ref"),
+  /* @__PURE__ */ Symbol.for("react.memo")
+]);
+function looksLikeRealRNPrimitive(type) {
+  const t = type.$$typeof;
+  if (t !== void 0) return _forwardRefOrMemoType.has(t);
+  return !!type.prototype?.isReactComponent;
+}
 function getWebTag(type, props) {
   if (typeof type === "string") return null;
   if (type === null || typeof type !== "function" && typeof type !== "object") return null;
   const obj = type;
   if (_userMap.has(obj)) return _userMap.get(obj);
+  if (!looksLikeRealRNPrimitive(obj)) return null;
   const name = obj.displayName ?? obj.name;
   if (!name) {
     _cache.set(obj, null);
@@ -3642,8 +3717,9 @@ var _rnOnlyProps = /* @__PURE__ */ new Set([
   "lineBreakStrategyIOS",
   // TextInput
   "multiline",
-  "resizeMode",
-  // handled separately
+  // NOTE: 'resizeMode' (Image's prop, not TextInput's) deliberately does NOT
+  // go here — it's handled below in the isImage branch (mapped to CSS
+  // object-fit). Blacklisting it here would make that branch unreachable.
   "blurOnSubmit",
   "clearButtonMode",
   "clearTextOnFocus",
@@ -3769,7 +3845,7 @@ function transformToWebProps(originalName, tag, props) {
         continue;
       }
       if (k === "keyboardType") {
-        if (!("type" in props) && !("secureTextEntry" in props)) {
+        if (!("type" in props) && !props.secureTextEntry) {
           const mapped = _keyboardTypeMap[v];
           if (mapped) out.type = mapped;
         }
@@ -3785,7 +3861,7 @@ function transformToWebProps(originalName, tag, props) {
       }
     }
     if (isScrollable && k === "horizontal") {
-      if (v) pendingStyle = { display: "flex", flexDirection: "row", overflowX: "auto" };
+      if (v) pendingStyle = { ...pendingStyle ?? {}, display: "flex", flexDirection: "row", overflowX: "auto" };
       continue;
     }
     if (k === "pointerEvents") {
@@ -3905,6 +3981,7 @@ var InteractiveWrapper = forwardRef(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth && !isWebPlatform);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+    const screens = getGlobalScreens();
     const [pressed, setPressed] = useState(false);
     const [hovered, setHovered] = useState(false);
     const [focused, setFocused] = useState(false);
@@ -3948,10 +4025,10 @@ var InteractiveWrapper = forwardRef(
         if (isNonStringComponent) stripWebOnlyProps(s);
         return s;
       },
-      [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
+      [resolvedStyle, isDark, pressed, hovered, focused, width, screens, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : composeNativeStyle(computedStyle, styleProp);
     const componentProps = {
       ref,
       ...restForComponent,
@@ -4021,6 +4098,7 @@ export {
   flatten,
   clearCache,
   getConfig,
+  resetConfig,
   buildConfig,
   onConfigChange,
   updateConfig,
@@ -4038,6 +4116,7 @@ export {
   chain,
   stripInternalMarkers,
   stripWebOnlyProps,
+  composeNativeStyle,
   registerWebElement,
   getWebTag,
   getImpliedRNStyle,

package/dist/{chunk-OUKVG4DI.mjs → chunk-ZFVHIT3V.mjs}

@@ -2,6 +2,7 @@
 import {
   EMPTY_BREAKPOINTS,
   InteractiveWrapper,
+  composeNativeStyle,
   expandModeAwareColorClasses,
   flatten,
   getActiveBreakpoints,
@@ -26,7 +27,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-ZTDE7V7I.mjs";
+} from "./chunk-LQH3CJ3G.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -51,7 +52,7 @@ var DarkWrapper = React.forwardRef(
       return s;
     }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
     const skipComputedInline = isWebPlatform;
-    const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : composeNativeStyle(computedStyle, styleProp);
     const props = { ref, ...rest, style: finalStyle };
     return Array.isArray(children) ? React.createElement(Component, props, ...children) : React.createElement(Component, props, children);
   }
@@ -107,10 +108,6 @@ function omitConsumed(props) {
   }
   return out;
 }
-function mergeStyle(computed, userStyle) {
-  if (!userStyle) return computed;
-  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
-}
 function withImpliedRNStyleIfNeeded(webTag, resolvedBase, userStyle) {
   const compensation = getImpliedRNStyle(webTag, resolvedBase);
   if (!compensation) return userStyle;
@@ -186,7 +183,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     const computedStyle = flatten(resolved, false);
     stripInternalMarkers(computedStyle);
     if (typeof effectiveType !== "string") stripWebOnlyProps(computedStyle);
-    finalStyle = mergeStyle(computedStyle, userStyle);
+    finalStyle = composeNativeStyle(computedStyle, userStyle);
   } else {
     finalStyle = userStyle ?? void 0;
   }