@kbach/react 0.2.6 → 0.2.7

package/dist/{chunk-7YSVROUJ.mjs → chunk-LYGD2GSW.mjs}

@@ -1683,6 +1683,45 @@ var RESOLVERS = {
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
   },
+  // ── Ring (web-only: box-shadow outline ring) ──────────────────────────────
+  ring: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_WIDTH = 3;
+    if (!value) {
+      return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+    }
+    if (value === "inset") {
+      return { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+    }
+    const widthTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    if (!isArbitrary && value in widthTokens) {
+      const w = widthTokens[value];
+      return { boxShadow: w === 0 ? "none" : `0 0 0 ${w}px ${DEFAULT_COLOR}` };
+    }
+    if (isArbitrary) {
+      const numMatch = /^(\d+(?:\.\d+)?)(px|rem|em|vw|vh)?$/.exec(value);
+      if (numMatch) {
+        const unit = numMatch[2] ?? "px";
+        return { boxShadow: `0 0 0 ${numMatch[1]}${unit} ${DEFAULT_COLOR}` };
+      }
+      return { boxShadow: value.replace(/_/g, " ") };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${color}` };
+    return null;
+  },
+  "ring-offset": ({ value, isArbitrary }, _theme) => {
+    if (!isWeb) return null;
+    const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_RING_WIDTH = 3;
+    const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
+    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    return {
+      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+    };
+  },
   // ── Space between (uses CSS gap or margin fallback) ────────────────────────
   "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
@@ -1760,42 +1799,35 @@ function injectRule(rule) {
   _injectedRules.add(rule);
   getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
 }
-function injectCSS(classString, resolved, darkMode) {
-  if (!isWeb) return;
-  for (const [modifierKey, styles] of Object.entries(resolved)) {
-    if (!styles || Object.keys(styles).length === 0) continue;
-    const classes = classString.trim().split(/\s+/);
-    for (const cls of classes) {
-      const cssDecls = styleValueToCSS(styles);
-      if (!cssDecls) continue;
-      const escaped = escapeCSSSelector(cls);
-      if (modifierKey === "base") {
-        injectRule(`.${escaped} { ${cssDecls} }`);
-        continue;
-      }
-      const mods = modifierKey.split(":");
-      const pseudos = mods.filter((m) => !["dark", "light"].includes(m));
-      const hasDark = mods.includes("dark");
-      const pseudoSuffix = pseudos.map((p) => `:${p}`).join("");
-      let selector = `.${escaped}${pseudoSuffix}`;
-      let rule;
-      if (hasDark) {
-        if (darkMode === "media") {
-          rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
-        } else if (darkMode === "class") {
-          rule = `.dark ${selector} { ${cssDecls} }`;
-        } else {
-          rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
-        }
-      } else {
-        rule = `${selector} { ${cssDecls} }`;
-      }
-      injectRule(rule);
+function injectClassRule(cls, bucketKey, styles, darkMode) {
+  const cssDecls = styleValueToCSS(styles);
+  if (!cssDecls) return;
+  const escaped = escapeCSSSelector(cls);
+  if (bucketKey === "base") {
+    injectRule(`.${escaped} { ${cssDecls} }`);
+    return;
+  }
+  const mods = bucketKey.split(":");
+  const pseudos = mods.filter((m) => !["dark", "light"].includes(m));
+  const hasDark = mods.includes("dark");
+  const pseudoSuffix = pseudos.map((p) => `:${p}`).join("");
+  const selector = `.${escaped}${pseudoSuffix}`;
+  let rule;
+  if (hasDark) {
+    if (darkMode === "media") {
+      rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
+    } else if (darkMode === "class") {
+      rule = `.dark ${selector} { ${cssDecls} }`;
+    } else {
+      rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
     }
+  } else {
+    rule = `${selector} { ${cssDecls} }`;
   }
+  injectRule(rule);
 }
 function styleValueToCSS(styles) {
-  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null).map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
+  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null && typeof v !== "object").map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -1806,16 +1838,24 @@ function resolve(classString, theme, darkMode = "attribute") {
   if (cached) return cached;
   const result = {};
   const parsedClasses = parseClasses(classString);
+  const injectQueue = [];
   for (const parsed of parsedClasses) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) continue;
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
+    if (isWeb) {
+      injectQueue.push({ cls: parsed.original, bucketKey, styles });
+    }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb) {
-    Promise.resolve().then(() => injectCSS(classString, result, darkMode));
+  if (isWeb && injectQueue.length > 0) {
+    Promise.resolve().then(() => {
+      for (const { cls, bucketKey, styles } of injectQueue) {
+        injectClassRule(cls, bucketKey, styles, darkMode);
+      }
+    });
   }
   return result;
 }

package/dist/{chunk-XW4LEBBB.mjs → chunk-QMJ4XUJA.mjs}

@@ -5,7 +5,7 @@ import {
   isWeb,
   resolve,
   useGlobalDarkMode
-} from "./chunk-7YSVROUJ.mjs";
+} from "./chunk-LYGD2GSW.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";

package/dist/index.js

@@ -1783,6 +1783,45 @@ var RESOLVERS = {
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
   },
+  // ── Ring (web-only: box-shadow outline ring) ──────────────────────────────
+  ring: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_WIDTH = 3;
+    if (!value) {
+      return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+    }
+    if (value === "inset") {
+      return { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+    }
+    const widthTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    if (!isArbitrary && value in widthTokens) {
+      const w = widthTokens[value];
+      return { boxShadow: w === 0 ? "none" : `0 0 0 ${w}px ${DEFAULT_COLOR}` };
+    }
+    if (isArbitrary) {
+      const numMatch = /^(\d+(?:\.\d+)?)(px|rem|em|vw|vh)?$/.exec(value);
+      if (numMatch) {
+        const unit = numMatch[2] ?? "px";
+        return { boxShadow: `0 0 0 ${numMatch[1]}${unit} ${DEFAULT_COLOR}` };
+      }
+      return { boxShadow: value.replace(/_/g, " ") };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${color}` };
+    return null;
+  },
+  "ring-offset": ({ value, isArbitrary }, _theme) => {
+    if (!isWeb) return null;
+    const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_RING_WIDTH = 3;
+    const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
+    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    return {
+      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+    };
+  },
   // ── Space between (uses CSS gap or margin fallback) ────────────────────────
   "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
@@ -1824,42 +1863,35 @@ function injectRule(rule) {
   _injectedRules.add(rule);
   getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
 }
-function injectCSS(classString, resolved, darkMode) {
-  if (!isWeb) return;
-  for (const [modifierKey, styles] of Object.entries(resolved)) {
-    if (!styles || Object.keys(styles).length === 0) continue;
-    const classes = classString.trim().split(/\s+/);
-    for (const cls of classes) {
-      const cssDecls = styleValueToCSS(styles);
-      if (!cssDecls) continue;
-      const escaped = escapeCSSSelector(cls);
-      if (modifierKey === "base") {
-        injectRule(`.${escaped} { ${cssDecls} }`);
-        continue;
-      }
-      const mods = modifierKey.split(":");
-      const pseudos = mods.filter((m) => !["dark", "light"].includes(m));
-      const hasDark = mods.includes("dark");
-      const pseudoSuffix = pseudos.map((p) => `:${p}`).join("");
-      let selector = `.${escaped}${pseudoSuffix}`;
-      let rule;
-      if (hasDark) {
-        if (darkMode === "media") {
-          rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
-        } else if (darkMode === "class") {
-          rule = `.dark ${selector} { ${cssDecls} }`;
-        } else {
-          rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
-        }
-      } else {
-        rule = `${selector} { ${cssDecls} }`;
-      }
-      injectRule(rule);
+function injectClassRule(cls, bucketKey, styles, darkMode) {
+  const cssDecls = styleValueToCSS(styles);
+  if (!cssDecls) return;
+  const escaped = escapeCSSSelector(cls);
+  if (bucketKey === "base") {
+    injectRule(`.${escaped} { ${cssDecls} }`);
+    return;
+  }
+  const mods = bucketKey.split(":");
+  const pseudos = mods.filter((m) => !["dark", "light"].includes(m));
+  const hasDark = mods.includes("dark");
+  const pseudoSuffix = pseudos.map((p) => `:${p}`).join("");
+  const selector = `.${escaped}${pseudoSuffix}`;
+  let rule;
+  if (hasDark) {
+    if (darkMode === "media") {
+      rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
+    } else if (darkMode === "class") {
+      rule = `.dark ${selector} { ${cssDecls} }`;
+    } else {
+      rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
     }
+  } else {
+    rule = `${selector} { ${cssDecls} }`;
   }
+  injectRule(rule);
 }
 function styleValueToCSS(styles) {
-  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null).map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
+  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null && typeof v !== "object").map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -1870,16 +1902,24 @@ function resolve(classString, theme, darkMode = "attribute") {
   if (cached) return cached;
   const result = {};
   const parsedClasses = parseClasses(classString);
+  const injectQueue = [];
   for (const parsed of parsedClasses) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) continue;
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
+    if (isWeb) {
+      injectQueue.push({ cls: parsed.original, bucketKey, styles });
+    }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb) {
-    Promise.resolve().then(() => injectCSS(classString, result, darkMode));
+  if (isWeb && injectQueue.length > 0) {
+    Promise.resolve().then(() => {
+      for (const { cls, bucketKey, styles } of injectQueue) {
+        injectClassRule(cls, bucketKey, styles, darkMode);
+      }
+    });
   }
   return result;
 }

package/dist/index.mjs

@@ -15,7 +15,7 @@ import {
   syncGlobalDarkMode,
   updateConfig,
   useGlobalDarkMode
-} from "./chunk-7YSVROUJ.mjs";
+} from "./chunk-LYGD2GSW.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -1752,6 +1752,45 @@ var RESOLVERS = {
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
   },
+  // ── Ring (web-only: box-shadow outline ring) ──────────────────────────────
+  ring: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_WIDTH = 3;
+    if (!value) {
+      return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+    }
+    if (value === "inset") {
+      return { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+    }
+    const widthTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    if (!isArbitrary && value in widthTokens) {
+      const w = widthTokens[value];
+      return { boxShadow: w === 0 ? "none" : `0 0 0 ${w}px ${DEFAULT_COLOR}` };
+    }
+    if (isArbitrary) {
+      const numMatch = /^(\d+(?:\.\d+)?)(px|rem|em|vw|vh)?$/.exec(value);
+      if (numMatch) {
+        const unit = numMatch[2] ?? "px";
+        return { boxShadow: `0 0 0 ${numMatch[1]}${unit} ${DEFAULT_COLOR}` };
+      }
+      return { boxShadow: value.replace(/_/g, " ") };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${color}` };
+    return null;
+  },
+  "ring-offset": ({ value, isArbitrary }, _theme) => {
+    if (!isWeb) return null;
+    const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_RING_WIDTH = 3;
+    const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
+    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    return {
+      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+    };
+  },
   // ── Space between (uses CSS gap or margin fallback) ────────────────────────
   "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
@@ -1793,42 +1832,35 @@ function injectRule(rule) {
   _injectedRules.add(rule);
   getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
 }
-function injectCSS(classString, resolved, darkMode) {
-  if (!isWeb) return;
-  for (const [modifierKey, styles] of Object.entries(resolved)) {
-    if (!styles || Object.keys(styles).length === 0) continue;
-    const classes = classString.trim().split(/\s+/);
-    for (const cls of classes) {
-      const cssDecls = styleValueToCSS(styles);
-      if (!cssDecls) continue;
-      const escaped = escapeCSSSelector(cls);
-      if (modifierKey === "base") {
-        injectRule(`.${escaped} { ${cssDecls} }`);
-        continue;
-      }
-      const mods = modifierKey.split(":");
-      const pseudos = mods.filter((m) => !["dark", "light"].includes(m));
-      const hasDark = mods.includes("dark");
-      const pseudoSuffix = pseudos.map((p) => `:${p}`).join("");
-      let selector = `.${escaped}${pseudoSuffix}`;
-      let rule;
-      if (hasDark) {
-        if (darkMode === "media") {
-          rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
-        } else if (darkMode === "class") {
-          rule = `.dark ${selector} { ${cssDecls} }`;
-        } else {
-          rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
-        }
-      } else {
-        rule = `${selector} { ${cssDecls} }`;
-      }
-      injectRule(rule);
+function injectClassRule(cls, bucketKey, styles, darkMode) {
+  const cssDecls = styleValueToCSS(styles);
+  if (!cssDecls) return;
+  const escaped = escapeCSSSelector(cls);
+  if (bucketKey === "base") {
+    injectRule(`.${escaped} { ${cssDecls} }`);
+    return;
+  }
+  const mods = bucketKey.split(":");
+  const pseudos = mods.filter((m) => !["dark", "light"].includes(m));
+  const hasDark = mods.includes("dark");
+  const pseudoSuffix = pseudos.map((p) => `:${p}`).join("");
+  const selector = `.${escaped}${pseudoSuffix}`;
+  let rule;
+  if (hasDark) {
+    if (darkMode === "media") {
+      rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
+    } else if (darkMode === "class") {
+      rule = `.dark ${selector} { ${cssDecls} }`;
+    } else {
+      rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
     }
+  } else {
+    rule = `${selector} { ${cssDecls} }`;
   }
+  injectRule(rule);
 }
 function styleValueToCSS(styles) {
-  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null).map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
+  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null && typeof v !== "object").map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -1839,16 +1871,24 @@ function resolve(classString, theme, darkMode = "attribute") {
   if (cached) return cached;
   const result = {};
   const parsedClasses = parseClasses(classString);
+  const injectQueue = [];
   for (const parsed of parsedClasses) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) continue;
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
+    if (isWeb) {
+      injectQueue.push({ cls: parsed.original, bucketKey, styles });
+    }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb) {
-    Promise.resolve().then(() => injectCSS(classString, result, darkMode));
+  if (isWeb && injectQueue.length > 0) {
+    Promise.resolve().then(() => {
+      for (const { cls, bucketKey, styles } of injectQueue) {
+        injectClassRule(cls, bucketKey, styles, darkMode);
+      }
+    });
   }
   return result;
 }

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-XW4LEBBB.mjs";
-import "./chunk-7YSVROUJ.mjs";
+} from "./chunk-QMJ4XUJA.mjs";
+import "./chunk-LYGD2GSW.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -1751,6 +1751,45 @@ var RESOLVERS = {
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
   },
+  // ── Ring (web-only: box-shadow outline ring) ──────────────────────────────
+  ring: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_WIDTH = 3;
+    if (!value) {
+      return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+    }
+    if (value === "inset") {
+      return { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+    }
+    const widthTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    if (!isArbitrary && value in widthTokens) {
+      const w = widthTokens[value];
+      return { boxShadow: w === 0 ? "none" : `0 0 0 ${w}px ${DEFAULT_COLOR}` };
+    }
+    if (isArbitrary) {
+      const numMatch = /^(\d+(?:\.\d+)?)(px|rem|em|vw|vh)?$/.exec(value);
+      if (numMatch) {
+        const unit = numMatch[2] ?? "px";
+        return { boxShadow: `0 0 0 ${numMatch[1]}${unit} ${DEFAULT_COLOR}` };
+      }
+      return { boxShadow: value.replace(/_/g, " ") };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${color}` };
+    return null;
+  },
+  "ring-offset": ({ value, isArbitrary }, _theme) => {
+    if (!isWeb) return null;
+    const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_RING_WIDTH = 3;
+    const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
+    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    return {
+      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+    };
+  },
   // ── Space between (uses CSS gap or margin fallback) ────────────────────────
   "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
@@ -1792,42 +1831,35 @@ function injectRule(rule) {
   _injectedRules.add(rule);
   getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
 }
-function injectCSS(classString, resolved, darkMode) {
-  if (!isWeb) return;
-  for (const [modifierKey, styles] of Object.entries(resolved)) {
-    if (!styles || Object.keys(styles).length === 0) continue;
-    const classes = classString.trim().split(/\s+/);
-    for (const cls of classes) {
-      const cssDecls = styleValueToCSS(styles);
-      if (!cssDecls) continue;
-      const escaped = escapeCSSSelector(cls);
-      if (modifierKey === "base") {
-        injectRule(`.${escaped} { ${cssDecls} }`);
-        continue;
-      }
-      const mods = modifierKey.split(":");
-      const pseudos = mods.filter((m) => !["dark", "light"].includes(m));
-      const hasDark = mods.includes("dark");
-      const pseudoSuffix = pseudos.map((p) => `:${p}`).join("");
-      let selector = `.${escaped}${pseudoSuffix}`;
-      let rule;
-      if (hasDark) {
-        if (darkMode === "media") {
-          rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
-        } else if (darkMode === "class") {
-          rule = `.dark ${selector} { ${cssDecls} }`;
-        } else {
-          rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
-        }
-      } else {
-        rule = `${selector} { ${cssDecls} }`;
-      }
-      injectRule(rule);
+function injectClassRule(cls, bucketKey, styles, darkMode) {
+  const cssDecls = styleValueToCSS(styles);
+  if (!cssDecls) return;
+  const escaped = escapeCSSSelector(cls);
+  if (bucketKey === "base") {
+    injectRule(`.${escaped} { ${cssDecls} }`);
+    return;
+  }
+  const mods = bucketKey.split(":");
+  const pseudos = mods.filter((m) => !["dark", "light"].includes(m));
+  const hasDark = mods.includes("dark");
+  const pseudoSuffix = pseudos.map((p) => `:${p}`).join("");
+  const selector = `.${escaped}${pseudoSuffix}`;
+  let rule;
+  if (hasDark) {
+    if (darkMode === "media") {
+      rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
+    } else if (darkMode === "class") {
+      rule = `.dark ${selector} { ${cssDecls} }`;
+    } else {
+      rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
     }
+  } else {
+    rule = `${selector} { ${cssDecls} }`;
   }
+  injectRule(rule);
 }
 function styleValueToCSS(styles) {
-  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null).map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
+  return Object.entries(styles).filter(([, v]) => v !== void 0 && v !== null && typeof v !== "object").map(([prop, val]) => `${camelToKebab(prop)}: ${val}`).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -1838,16 +1870,24 @@ function resolve(classString, theme, darkMode = "attribute") {
   if (cached) return cached;
   const result = {};
   const parsedClasses = parseClasses(classString);
+  const injectQueue = [];
   for (const parsed of parsedClasses) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) continue;
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
+    if (isWeb) {
+      injectQueue.push({ cls: parsed.original, bucketKey, styles });
+    }
   }
   styleCache.set(cacheKey, result);
-  if (isWeb) {
-    Promise.resolve().then(() => injectCSS(classString, result, darkMode));
+  if (isWeb && injectQueue.length > 0) {
+    Promise.resolve().then(() => {
+      for (const { cls, bucketKey, styles } of injectQueue) {
+        injectClassRule(cls, bucketKey, styles, darkMode);
+      }
+    });
   }
   return result;
 }

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-XW4LEBBB.mjs";
-import "./chunk-7YSVROUJ.mjs";
+} from "./chunk-QMJ4XUJA.mjs";
+import "./chunk-LYGD2GSW.mjs";
 export {
   Fragment,
   jsx,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",