@kbach/react 0.6.36 → 0.6.37

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

@@ -26,7 +26,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-ATZF2VI7.mjs";
+} from "./chunk-ZTDE7V7I.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -3269,30 +3269,51 @@ function getConfig() {
   configStore.resolved = buildConfig({});
   return configStore.resolved;
 }
-function resolveOneRef(ref, colors) {
-  const lastDash = ref.lastIndexOf("-");
-  if (lastDash <= 0) return null;
-  const name = ref.slice(0, lastDash);
-  const shade = ref.slice(lastDash + 1);
-  if (!/^\d+$/.test(shade)) return null;
-  const entry = colors[name];
-  if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
-  const target = entry[shade];
-  return typeof target === "string" ? target : null;
-}
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
-  function resolveChain(raw) {
+  function resolveChain(raw, side) {
     let current = raw;
     for (let i = 0; i < MAX_DEPTH; i++) {
-      const next = resolveOneRef(current, colors);
+      const next = resolveOneRef(current, side);
       if (!next || next === current) break;
       current = next;
     }
     return current;
   }
+  function resolveOneRef(ref, side) {
+    const slashIdx = ref.indexOf("/");
+    if (slashIdx > 0) {
+      const baseName = ref.slice(0, slashIdx);
+      const opacity = Number(ref.slice(slashIdx + 1));
+      if (!Number.isFinite(opacity)) return null;
+      let baseRef;
+      const entry2 = colors[baseName];
+      if (typeof entry2 === "string") {
+        baseRef = entry2;
+      } else if (isModeAwareColor(entry2)) {
+        if (!side) return null;
+        baseRef = entry2[side];
+      } else if (entry2 && typeof entry2 === "object" && "6" in entry2) {
+        const v = entry2["6"];
+        baseRef = typeof v === "string" ? v : void 0;
+      }
+      if (baseRef === void 0) return null;
+      const baseHex = resolveChain(baseRef, side);
+      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);
+    if (!/^\d+$/.test(shade)) return null;
+    const entry = colors[name];
+    if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
+    const target = entry[shade];
+    return typeof target === "string" ? target : null;
+  }
   function resolveValue(val) {
-    return typeof val === "string" ? resolveChain(val) : { light: resolveChain(val.light), dark: resolveChain(val.dark) };
+    return typeof val === "string" ? resolveChain(val, null) : { light: resolveChain(val.light, "light"), dark: resolveChain(val.dark, "dark") };
   }
   const out = {};
   for (const [key, val] of Object.entries(colors)) {

package/dist/core/index.js

@@ -3371,30 +3371,51 @@ function getConfig() {
 function resetConfig() {
   configStore.resolved = null;
 }
-function resolveOneRef(ref, colors) {
-  const lastDash = ref.lastIndexOf("-");
-  if (lastDash <= 0) return null;
-  const name = ref.slice(0, lastDash);
-  const shade = ref.slice(lastDash + 1);
-  if (!/^\d+$/.test(shade)) return null;
-  const entry = colors[name];
-  if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
-  const target = entry[shade];
-  return typeof target === "string" ? target : null;
-}
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
-  function resolveChain(raw) {
+  function resolveChain(raw, side) {
     let current = raw;
     for (let i = 0; i < MAX_DEPTH; i++) {
-      const next = resolveOneRef(current, colors);
+      const next = resolveOneRef(current, side);
       if (!next || next === current) break;
       current = next;
     }
     return current;
   }
+  function resolveOneRef(ref, side) {
+    const slashIdx = ref.indexOf("/");
+    if (slashIdx > 0) {
+      const baseName = ref.slice(0, slashIdx);
+      const opacity = Number(ref.slice(slashIdx + 1));
+      if (!Number.isFinite(opacity)) return null;
+      let baseRef;
+      const entry2 = colors[baseName];
+      if (typeof entry2 === "string") {
+        baseRef = entry2;
+      } else if (isModeAwareColor(entry2)) {
+        if (!side) return null;
+        baseRef = entry2[side];
+      } else if (entry2 && typeof entry2 === "object" && "6" in entry2) {
+        const v = entry2["6"];
+        baseRef = typeof v === "string" ? v : void 0;
+      }
+      if (baseRef === void 0) return null;
+      const baseHex = resolveChain(baseRef, side);
+      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);
+    if (!/^\d+$/.test(shade)) return null;
+    const entry = colors[name];
+    if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
+    const target = entry[shade];
+    return typeof target === "string" ? target : null;
+  }
   function resolveValue(val) {
-    return typeof val === "string" ? resolveChain(val) : { light: resolveChain(val.light), dark: resolveChain(val.dark) };
+    return typeof val === "string" ? resolveChain(val, null) : { light: resolveChain(val.light, "light"), dark: resolveChain(val.dark, "dark") };
   }
   const out = {};
   for (const [key, val] of Object.entries(colors)) {

package/dist/index.mjs

@@ -45,7 +45,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-ATZF2VI7.mjs";
+} from "./chunk-ZTDE7V7I.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-YDLZI5J6.mjs";
-import "./chunk-ATZF2VI7.mjs";
+} from "./chunk-OUKVG4DI.mjs";
+import "./chunk-ZTDE7V7I.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-YDLZI5J6.mjs";
+} from "./chunk-OUKVG4DI.mjs";
 import {
   registerWebElement
-} from "./chunk-ATZF2VI7.mjs";
+} from "./chunk-ZTDE7V7I.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -3072,30 +3072,51 @@ function deepMerge(base, override) {
   return result;
 }
 var configStore = { resolved: null, listeners: /* @__PURE__ */ new Set(), customVariants: {} };
-function resolveOneRef(ref, colors) {
-  const lastDash = ref.lastIndexOf("-");
-  if (lastDash <= 0) return null;
-  const name = ref.slice(0, lastDash);
-  const shade = ref.slice(lastDash + 1);
-  if (!/^\d+$/.test(shade)) return null;
-  const entry = colors[name];
-  if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
-  const target = entry[shade];
-  return typeof target === "string" ? target : null;
-}
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
-  function resolveChain(raw) {
+  function resolveChain(raw, side) {
     let current = raw;
     for (let i = 0; i < MAX_DEPTH; i++) {
-      const next = resolveOneRef(current, colors);
+      const next = resolveOneRef(current, side);
       if (!next || next === current) break;
       current = next;
     }
     return current;
   }
+  function resolveOneRef(ref, side) {
+    const slashIdx = ref.indexOf("/");
+    if (slashIdx > 0) {
+      const baseName = ref.slice(0, slashIdx);
+      const opacity = Number(ref.slice(slashIdx + 1));
+      if (!Number.isFinite(opacity)) return null;
+      let baseRef;
+      const entry2 = colors[baseName];
+      if (typeof entry2 === "string") {
+        baseRef = entry2;
+      } else if (isModeAwareColor(entry2)) {
+        if (!side) return null;
+        baseRef = entry2[side];
+      } else if (entry2 && typeof entry2 === "object" && "6" in entry2) {
+        const v = entry2["6"];
+        baseRef = typeof v === "string" ? v : void 0;
+      }
+      if (baseRef === void 0) return null;
+      const baseHex = resolveChain(baseRef, side);
+      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);
+    if (!/^\d+$/.test(shade)) return null;
+    const entry = colors[name];
+    if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
+    const target = entry[shade];
+    return typeof target === "string" ? target : null;
+  }
   function resolveValue(val) {
-    return typeof val === "string" ? resolveChain(val) : { light: resolveChain(val.light), dark: resolveChain(val.dark) };
+    return typeof val === "string" ? resolveChain(val, null) : { light: resolveChain(val.light, "light"), dark: resolveChain(val.dark, "dark") };
   }
   const out = {};
   for (const [key, val] of Object.entries(colors)) {

package/dist/vite-plugin.mjs

@@ -3038,30 +3038,51 @@ function deepMerge(base, override) {
   return result;
 }
 var configStore = { resolved: null, listeners: /* @__PURE__ */ new Set(), customVariants: {} };
-function resolveOneRef(ref, colors) {
-  const lastDash = ref.lastIndexOf("-");
-  if (lastDash <= 0) return null;
-  const name = ref.slice(0, lastDash);
-  const shade = ref.slice(lastDash + 1);
-  if (!/^\d+$/.test(shade)) return null;
-  const entry = colors[name];
-  if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
-  const target = entry[shade];
-  return typeof target === "string" ? target : null;
-}
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
-  function resolveChain(raw) {
+  function resolveChain(raw, side) {
     let current = raw;
     for (let i = 0; i < MAX_DEPTH; i++) {
-      const next = resolveOneRef(current, colors);
+      const next = resolveOneRef(current, side);
       if (!next || next === current) break;
       current = next;
     }
     return current;
   }
+  function resolveOneRef(ref, side) {
+    const slashIdx = ref.indexOf("/");
+    if (slashIdx > 0) {
+      const baseName = ref.slice(0, slashIdx);
+      const opacity = Number(ref.slice(slashIdx + 1));
+      if (!Number.isFinite(opacity)) return null;
+      let baseRef;
+      const entry2 = colors[baseName];
+      if (typeof entry2 === "string") {
+        baseRef = entry2;
+      } else if (isModeAwareColor(entry2)) {
+        if (!side) return null;
+        baseRef = entry2[side];
+      } else if (entry2 && typeof entry2 === "object" && "6" in entry2) {
+        const v = entry2["6"];
+        baseRef = typeof v === "string" ? v : void 0;
+      }
+      if (baseRef === void 0) return null;
+      const baseHex = resolveChain(baseRef, side);
+      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);
+    if (!/^\d+$/.test(shade)) return null;
+    const entry = colors[name];
+    if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
+    const target = entry[shade];
+    return typeof target === "string" ? target : null;
+  }
   function resolveValue(val) {
-    return typeof val === "string" ? resolveChain(val) : { light: resolveChain(val.light), dark: resolveChain(val.dark) };
+    return typeof val === "string" ? resolveChain(val, null) : { light: resolveChain(val.light, "light"), dark: resolveChain(val.dark, "dark") };
   }
   const out = {};
   for (const [key, val] of Object.entries(colors)) {

package/kbach-react.md

@@ -740,17 +740,21 @@ extend: {
       surface: { light: '#ffffff', dark: '#111827' },
       // each side can itself be an alias — resolved independently
       accent:  { light: 'blue-6', dark: 'blue-4' },
+      // or derived from another color at an opacity — 'name/opacity', resolved
+      // once here instead of only being computable at runtime via colors.alpha()
+      accentSoft: { light: 'accent/30', dark: 'accent/40' },
     },
   },
 },
 ```
 
 ```jsx
-<div className="bg-surface text-accent" />
-// equivalent to writing bg-white dark:bg-gray-9 text-blue-6 dark:text-blue-4 by hand
+<div className="bg-surface text-accent hover:bg-accentSoft" />
+// equivalent to writing bg-white dark:bg-gray-9 text-blue-6 dark:text-blue-4
+// hover:bg-[rgba(...)] dark:hover:bg-[rgba(...)] by hand
 ```
 
-Works everywhere a color does — `useColors()` (returns the active side directly), opacity composition (`bg-surface/50`), and per-shade within a scale (`brand: { 6: { light: '#3b82f6', dark: '#60a5fa' } }`). An explicit `dark:`/`light:` modifier stacked on an already mode-aware color is not supported (falls back to the light side) — the whole point is not needing `dark:` for these.
+Works everywhere a color does — `useColors()` (returns the active side directly), opacity composition (`bg-surface/50`), per-shade within a scale (`brand: { 6: { light: '#3b82f6', dark: '#60a5fa' } }`), and stacked under an explicit modifier (`dark:hover:bg-accent` correctly uses the dark side, still scoped to dark mode + hover — the modifier doesn't need to be there in the first place, but it's respected if it is).
 
 ### Runtime update
 ```js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.36",
+  "version": "0.6.37",
   "description": "React / React Native components and hooks for the Kbach framework",
   "repository": {
     "type": "git",