@kbach/react 0.6.39 → 0.6.41

package/dist/vite-plugin.mjs

@@ -619,6 +619,11 @@ var defaultTheme = {
 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) {
@@ -638,13 +643,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;
       }
     }
@@ -785,6 +788,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}))`;
       }
@@ -963,7 +967,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);
@@ -984,7 +988,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);
@@ -1183,9 +1187,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 }) => {
@@ -1194,9 +1198,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 }) => {
@@ -1204,9 +1208,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 }) => {
@@ -1257,9 +1261,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;
@@ -1267,9 +1272,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;
@@ -1281,9 +1287,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;
@@ -1353,8 +1360,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
@@ -1369,7 +1376,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" },
@@ -1721,7 +1727,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 = {
@@ -2489,64 +2499,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;
@@ -2583,6 +2593,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
@@ -2596,6 +2608,15 @@ function getModifier(name) {
 function isKnownModifier(name) {
   return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
+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;
+}
 
 // src/core/parser.ts
 var UNSAFE_ARBITRARY_VALUE = /[{};\\]|\/\*|\*\//;
@@ -2808,9 +2829,12 @@ function setDefaultFontFamily(font) {
 }
 var _styleEl = null;
 var _ruleIndexByKey = /* @__PURE__ */ new Map();
+var _sheetKeys = [];
+var _ruleOrderByKey = /* @__PURE__ */ new Map();
 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;
@@ -2819,6 +2843,7 @@ function evictInjectedRule(rule) {
   } catch {
     return;
   }
+  _sheetKeys.splice(idx, 1);
   for (const [key, i] of _ruleIndexByKey) {
     if (i > idx) _ruleIndexByKey.set(key, i - 1);
   }
@@ -3049,7 +3074,6 @@ function deepMerge(base, override) {
   }
   return result;
 }
-var configStore = { resolved: null, listeners: /* @__PURE__ */ new Set(), customVariants: {} };
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
   function resolveChain(raw, side) {
@@ -3083,10 +3107,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;
@@ -3148,7 +3171,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);
@@ -3177,8 +3199,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) {
@@ -3195,7 +3215,6 @@ function makePluginAPI(theme) {
     }
   };
 }
-var customVariants = configStore.customVariants;
 
 // src/core/generateTypesDts.ts
 var HEADER = `// AUTO-GENERATED by Kbach from your kbach.config.js \u2014 do not edit by hand.
@@ -3297,7 +3316,8 @@ var GROUP_ORDER = ["Layout", "Sizing", "Spacing", "Typography", "Colors", "Borde
 function classifyToken(token, responsiveRe) {
   if (/^dark:/.test(token)) return "Dark Mode";
   if (responsiveRe.test(token)) return "Responsive";
-  const base = token.replace(/^(hover|focus|active|group-hover|peer-hover):/, "");
+  const parsed = parseClass(token);
+  const base = parsed ? parsed.value ? `${parsed.utility}-${parsed.value}` : parsed.utility : token;
   for (const [label, re] of GROUPS) {
     if (re.test(base)) return label;
   }
@@ -3433,7 +3453,9 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
     if (!css) continue;
     const label = classifyToken(token, responsiveRe);
     if (!groups.has(label)) groups.set(label, []);
-    groups.get(label).push(prettifyCSS(applyVars(css)));
+    const parsedToken = parseClass(token);
+    const bucketKey = parsedToken && parsedToken.modifiers.length > 0 ? parsedToken.modifiers.join(":") : "base";
+    groups.get(label).push({ order: getModifierOrder(bucketKey), css: prettifyCSS(applyVars(css)) });
   }
   const out = ["/* Generated by Kbach \u2014 do not edit */"];
   if (declarations.size > 0) {
@@ -3448,9 +3470,10 @@ ${prettifyCSS(globalCSS)}`);
   for (const label of GROUP_ORDER) {
     const items = groups.get(label) ?? [];
     if (!items.length) continue;
+    const sorted = [...items].sort((a, b) => a.order - b.order);
     out.push(`
 /* ${label} */`);
-    out.push(items.join("\n\n"));
+    out.push(sorted.map((it) => it.css).join("\n\n"));
   }
   return out.join("\n");
 }
@@ -3719,6 +3742,13 @@ function kbach(userConfigOrOptions) {
   function scanProjectCssSelectors() {
     for (const dir of includeDirs) scanCssSelectorsInto(join(root, dir), projectCssClasses);
   }
+  function isWithinIncludeDirs(file) {
+    const nf = normPath(file);
+    return includeDirs.some((dir) => {
+      const base = normPath(join(root, dir));
+      return nf === base || nf.startsWith(base.endsWith("/") ? base : `${base}/`);
+    });
+  }
   function buildTokenCSSView() {
     const active = /* @__PURE__ */ new Set();
     for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
@@ -3820,6 +3850,7 @@ ${code}`,
     configureServer(server) {
       const onAddOrUnlink = (file, isUnlink) => {
         if (file.includes("node_modules")) return;
+        if (!isWithinIncludeDirs(file)) return;
         if (CSS_FILE_RE.test(file)) {
           if (!isUnlink) scanCssFileInto(file, projectCssClasses);
           return;
@@ -3841,6 +3872,7 @@ ${code}`,
     },
     handleHotUpdate({ file, server }) {
       if (file.includes("node_modules")) return;
+      if (!isWithinIncludeDirs(file)) return;
       if (CSS_FILE_RE.test(file)) {
         scanCssFileInto(file, projectCssClasses);
         return;
@@ -3856,5 +3888,6 @@ ${code}`,
   };
 }
 export {
+  formatKbachCSS,
   kbach
 };

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.39",
+  "version": "0.6.41",
   "description": "React / React Native components and hooks for the Kbach framework",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/semsakadanupol/kbach.git",
@@ -49,8 +50,12 @@
     "postinstall": "node scripts/postinstall.js"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^20.19.42",
     "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.4",
+    "jsdom": "^30.0.1",
+    "react-dom": "^19.2.3",
     "tsup": "^8.0.0",
     "vite": "^5.4.21",
     "vitest": "^1.0.0"