@kbach/react 0.6.39 → 0.6.41

package/dist/core/index.js

@@ -26,7 +26,6 @@ __export(index_exports, {
   buildConfig: () => buildConfig,
   clearCache: () => clearCache,
   clearPluginModifiers: () => clearPluginModifiers,
-  customVariants: () => customVariants,
   defaultColors: () => defaultColors,
   defaultTheme: () => defaultTheme,
   disableRuntimeCSS: () => disableRuntimeCSS,
@@ -89,6 +88,11 @@ module.exports = __toCommonJS(index_exports);
 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/platform.ts
 var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
@@ -165,64 +169,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;
@@ -259,6 +263,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
@@ -297,6 +303,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;
 }
@@ -319,13 +334,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;
       }
     }
@@ -466,6 +479,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}))`;
       }
@@ -644,7 +658,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);
@@ -665,7 +679,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);
@@ -864,9 +878,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 }) => {
@@ -875,9 +889,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 }) => {
@@ -885,9 +899,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 }) => {
@@ -938,9 +952,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;
@@ -948,9 +963,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;
@@ -962,9 +978,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;
@@ -1034,8 +1051,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
@@ -1050,7 +1067,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" },
@@ -1402,7 +1418,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 = {
@@ -3027,9 +3047,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;
@@ -3038,6 +3070,7 @@ function evictInjectedRule(rule) {
   } catch {
     return;
   }
+  _sheetKeys.splice(idx, 1);
   for (const [key, i] of _ruleIndexByKey) {
     if (i > idx) _ruleIndexByKey.set(key, i - 1);
   }
@@ -3057,15 +3090,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 {
@@ -3257,9 +3295,10 @@ 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 generateClassCSS(classString, theme, darkMode = "attribute", screens = {}) {
   const rules = [];
@@ -3273,10 +3312,16 @@ function generateClassCSS(classString, theme, darkMode = "attribute", screens =
 }
 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);
@@ -3290,10 +3335,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()) {
@@ -3347,6 +3395,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;
@@ -3374,7 +3424,7 @@ 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({});
@@ -3416,10 +3466,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;
@@ -3481,7 +3530,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);
@@ -3510,8 +3558,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) {
@@ -3544,7 +3590,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() };
@@ -3572,7 +3617,6 @@ function subscribeGlobalDarkMode(callback) {
   buildConfig,
   clearCache,
   clearPluginModifiers,
-  customVariants,
   defaultColors,
   defaultTheme,
   disableRuntimeCSS,

package/dist/index.js

@@ -184,6 +184,7 @@ var _mountedProviderCount = 0;
 var _warnedMultipleProviders = false;
 var _mountedConfigOverrideCount = 0;
 var _warnedConfigOverride = false;
+var _warnedMediaModeToggle = false;
 function loadPersistedMode() {
   try {
     if (import_core2.isWeb) return localStorage.getItem(STORAGE_KEY);
@@ -262,10 +263,13 @@ function ThemeProvider({
     return () => {
       _mountedProviderCount--;
       if (configOverride) _mountedConfigOverrideCount--;
+      if (_prevConfigOverrideRef.current !== void 0 && _mountedProviderCount === 0) {
+        (0, import_core2.resetConfig)();
+      }
     };
   }, []);
   const [webWidth, setWebWidth] = (0, import_react5.useState)(0);
-  const effectiveWidth = windowWidthProp ?? (import_core2.isWeb ? webWidth : 0);
+  const effectiveWidth = (0, import_core2.getEffectiveIsWeb)() ? webWidth : windowWidthProp ?? 0;
   const numericScreens = (0, import_react5.useMemo)(() => {
     const out = {};
     for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
@@ -309,7 +313,7 @@ function ThemeProvider({
     getSystemScheme,
     getSystemSchemeServerSnapshot
   );
-  const systemScheme = import_core2.isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
+  const systemScheme = (0, import_core2.getEffectiveIsWeb)() ? webScheme : colorScheme === "dark" ? "dark" : "light";
   const [mode, _setMode] = (0, import_react5.useState)(defaultMode);
   (0, import_react5.useEffect)(() => {
     if (disablePersistence) return;
@@ -328,9 +332,15 @@ function ThemeProvider({
     return () => window.removeEventListener("storage", onStorage);
   }, [disablePersistence]);
   const setMode = (0, import_react5.useCallback)((next) => {
+    if (process.env.NODE_ENV !== "production" && import_core2.isWeb && resolvedConfig.darkMode === "media" && !_warnedMediaModeToggle) {
+      _warnedMediaModeToggle = true;
+      (0, import_core2.kbachWarn)(
+        'setMode()/toggle() was called while darkMode is "media" \u2014 the resolved mode/isDark from useTheme()/useIsDark() will update, but the actual CSS stays driven by prefers-color-scheme and will not change to match. Use darkMode: "attribute" or "class" if the app needs manual toggling.'
+      );
+    }
     _setMode(next);
     if (!disablePersistence) persistMode(next);
-  }, [disablePersistence]);
+  }, [disablePersistence, resolvedConfig.darkMode]);
   const toggle = (0, import_react5.useCallback)(() => {
     setMode(mode === "dark" || mode === "system" && systemScheme === "dark" ? "light" : "dark");
   }, [mode, systemScheme, setMode]);
@@ -499,6 +509,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 = {
@@ -555,18 +569,17 @@ function getWebTag(type, props) {
   _cache.set(obj, tag);
   return tag;
 }
-function getImpliedRNStyle(webTag, resolvedBase) {
+function getImpliedRNClasses(webTag, resolvedBase) {
   if (!webTag || !resolvedBase) return void 0;
-  const compensation = {};
-  if (resolvedBase.position === void 0) compensation.position = "relative";
+  const classes = [];
+  if (resolvedBase.position === void 0) classes.push("relative");
   const explicitDisplay = resolvedBase.display;
   const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase || "gap" in resolvedBase || "columnGap" in resolvedBase || "rowGap" in resolvedBase;
   const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
-  if (willBeFlex) {
-    if (explicitDisplay === void 0) compensation.display = "flex";
-    if (resolvedBase.flexDirection === void 0) compensation.flexDirection = "column";
+  if (willBeFlex && (explicitDisplay === void 0 || resolvedBase.flexDirection === void 0)) {
+    classes.push("flex-col");
   }
-  return Object.keys(compensation).length > 0 ? compensation : void 0;
+  return classes.length > 0 ? classes.join(" ") : void 0;
 }
 var _rnOnlyProps = /* @__PURE__ */ new Set([
   // Interaction
@@ -610,8 +623,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",
@@ -737,7 +751,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;
         }
@@ -753,7 +767,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") {
@@ -856,23 +870,22 @@ function styled(Component, baseClasses = "") {
         if (!isWebPlatform) setFocused(false);
       }), [onBlur, isWebPlatform]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const firstPassResolved = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
+      const impliedClasses = getImpliedRNClasses(webTag, firstPassResolved.base);
+      const finalClassStr = impliedClasses ? `${combined} ${impliedClasses}` : combined;
+      const resolved = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(finalClassStr, config.theme, config.darkMode), [finalClassStr, config.theme, config.darkMode]);
       const hasInteractive = (0, import_react6.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth && !isWebPlatform);
       const breakpoints = needsWidth ? (0, import_core7.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
+      const screens = (0, import_core7.getGlobalScreens)();
       const computedStyle = (0, import_react6.useMemo)(
         () => isWebPlatform ? {} : (0, import_core7.flatten)(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
-        [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
+        [resolved, isDark, pressed, hovered, focused, disabled, checked, width, screens]
         // eslint-disable-line react-hooks/exhaustive-deps
       );
-      const webTag = isWebPlatform ? getWebTag(Component, rest) : null;
-      const finalStyle = isWebPlatform ? (() => {
-        const flatStyleProp = (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0;
-        const compensation = getImpliedRNStyle(webTag, resolved.base);
-        if (!compensation) return flatStyleProp;
-        return flatStyleProp ? { ...compensation, ...flatStyleProp } : compensation;
-      })() : styleProp ? Array.isArray(styleProp) ? [computedStyle, ...styleProp] : [computedStyle, styleProp] : computedStyle;
+      const finalStyle = isWebPlatform ? (Array.isArray(styleProp) ? Object.assign({}, ...styleProp) : styleProp) ?? void 0 : composeNativeStyle(computedStyle, styleProp);
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
@@ -881,7 +894,7 @@ function styled(Component, baseClasses = "") {
         ...effectiveRest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
-        ...isWebPlatform && combined ? { className: (0, import_core7.normalizeClassString)(combined) } : {},
+        ...isWebPlatform && finalClassStr ? { className: (0, import_core7.normalizeClassString)(finalClassStr) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
         // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
@@ -1012,6 +1025,7 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth && !isWebPlatform);
     const breakpoints = needsWidth ? (0, import_core10.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
+    const screens = (0, import_core10.getGlobalScreens)();
     const [pressed, setPressed] = (0, import_react9.useState)(false);
     const [hovered, setHovered] = (0, import_react9.useState)(false);
     const [focused, setFocused] = (0, import_react9.useState)(false);
@@ -1055,10 +1069,10 @@ var InteractiveWrapper = (0, import_react9.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,