@kbach/react 0.2.6 → 0.2.8

package/dist/{chunk-7YSVROUJ.mjs → chunk-GN4JPJHC.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);
@@ -1758,44 +1797,73 @@ function getStyleEl() {
 function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
   _injectedRules.add(rule);
-  getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  try {
+    getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  } catch {
+  }
 }
-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);
 }
+var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation",
+  "includeFontPadding",
+  "textAlignVertical",
+  "writingDirection"
+]);
+var CSS_UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "fontWeight",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "zIndex",
+  "aspectRatio",
+  "columnCount",
+  "lineHeight"
+]);
 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(
+    ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
+  ).map(([prop, val]) => {
+    const cssProp = camelToKebab(prop);
+    let cssVal;
+    if (typeof val === "number") {
+      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+    } else {
+      cssVal = String(val);
+    }
+    return `${cssProp}: ${cssVal}`;
+  }).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -1806,16 +1874,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-YDKLJFFY.mjs}

@@ -5,7 +5,7 @@ import {
   isWeb,
   resolve,
   useGlobalDarkMode
-} from "./chunk-7YSVROUJ.mjs";
+} from "./chunk-GN4JPJHC.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);
@@ -1822,44 +1861,73 @@ function getStyleEl() {
 function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
   _injectedRules.add(rule);
-  getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  try {
+    getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  } catch {
+  }
 }
-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);
 }
+var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation",
+  "includeFontPadding",
+  "textAlignVertical",
+  "writingDirection"
+]);
+var CSS_UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "fontWeight",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "zIndex",
+  "aspectRatio",
+  "columnCount",
+  "lineHeight"
+]);
 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(
+    ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
+  ).map(([prop, val]) => {
+    const cssProp = camelToKebab(prop);
+    let cssVal;
+    if (typeof val === "number") {
+      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+    } else {
+      cssVal = String(val);
+    }
+    return `${cssProp}: ${cssVal}`;
+  }).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -1870,16 +1938,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-GN4JPJHC.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);
@@ -1791,44 +1830,73 @@ function getStyleEl() {
 function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
   _injectedRules.add(rule);
-  getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  try {
+    getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  } catch {
+  }
 }
-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);
 }
+var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation",
+  "includeFontPadding",
+  "textAlignVertical",
+  "writingDirection"
+]);
+var CSS_UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "fontWeight",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "zIndex",
+  "aspectRatio",
+  "columnCount",
+  "lineHeight"
+]);
 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(
+    ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
+  ).map(([prop, val]) => {
+    const cssProp = camelToKebab(prop);
+    let cssVal;
+    if (typeof val === "number") {
+      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+    } else {
+      cssVal = String(val);
+    }
+    return `${cssProp}: ${cssVal}`;
+  }).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -1839,16 +1907,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-YDKLJFFY.mjs";
+import "./chunk-GN4JPJHC.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);
@@ -1790,44 +1829,73 @@ function getStyleEl() {
 function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
   _injectedRules.add(rule);
-  getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  try {
+    getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+  } catch {
+  }
 }
-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);
 }
+var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation",
+  "includeFontPadding",
+  "textAlignVertical",
+  "writingDirection"
+]);
+var CSS_UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "fontWeight",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "zIndex",
+  "aspectRatio",
+  "columnCount",
+  "lineHeight"
+]);
 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(
+    ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
+  ).map(([prop, val]) => {
+    const cssProp = camelToKebab(prop);
+    let cssVal;
+    if (typeof val === "number") {
+      cssVal = val === 0 || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
+    } else {
+      cssVal = String(val);
+    }
+    return `${cssProp}: ${cssVal}`;
+  }).join("; ");
 }
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -1838,16 +1906,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-YDKLJFFY.mjs";
+import "./chunk-GN4JPJHC.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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