@kbach/react 0.6.36 → 0.6.39

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

@@ -1877,6 +1877,18 @@ var effectResolvers = {
     if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
+  },
+  ease: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { transitionTimingFunction: value };
+    const presets = {
+      linear: "linear",
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { transitionTimingFunction: v } : null;
   }
 };
 
@@ -3269,30 +3281,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)) {
@@ -3547,11 +3580,21 @@ function registerWebElement(rnComponent, htmlTag) {
   _userMap.set(rnComponent, htmlTag);
   _cache.delete(rnComponent);
 }
+var _forwardRefOrMemoType = /* @__PURE__ */ new Set([
+  /* @__PURE__ */ Symbol.for("react.forward_ref"),
+  /* @__PURE__ */ Symbol.for("react.memo")
+]);
+function looksLikeRealRNPrimitive(type) {
+  const t = type.$$typeof;
+  if (t !== void 0) return _forwardRefOrMemoType.has(t);
+  return !!type.prototype?.isReactComponent;
+}
 function getWebTag(type, props) {
   if (typeof type === "string") return null;
   if (type === null || typeof type !== "function" && typeof type !== "object") return null;
   const obj = type;
   if (_userMap.has(obj)) return _userMap.get(obj);
+  if (!looksLikeRealRNPrimitive(obj)) return null;
   const name = obj.displayName ?? obj.name;
   if (!name) {
     _cache.set(obj, null);

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

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

package/dist/core/index.js

@@ -1966,6 +1966,18 @@ var effectResolvers = {
     if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
+  },
+  ease: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { transitionTimingFunction: value };
+    const presets = {
+      linear: "linear",
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { transitionTimingFunction: v } : null;
   }
 };
 
@@ -3371,30 +3383,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.js

@@ -526,11 +526,21 @@ function registerWebElement(rnComponent, htmlTag) {
   _userMap.set(rnComponent, htmlTag);
   _cache.delete(rnComponent);
 }
+var _forwardRefOrMemoType = /* @__PURE__ */ new Set([
+  /* @__PURE__ */ Symbol.for("react.forward_ref"),
+  /* @__PURE__ */ Symbol.for("react.memo")
+]);
+function looksLikeRealRNPrimitive(type) {
+  const t = type.$$typeof;
+  if (t !== void 0) return _forwardRefOrMemoType.has(t);
+  return !!type.prototype?.isReactComponent;
+}
 function getWebTag(type, props) {
   if (typeof type === "string") return null;
   if (type === null || typeof type !== "function" && typeof type !== "object") return null;
   const obj = type;
   if (_userMap.has(obj)) return _userMap.get(obj);
+  if (!looksLikeRealRNPrimitive(obj)) return null;
   const name = obj.displayName ?? obj.name;
   if (!name) {
     _cache.set(obj, null);

package/dist/index.mjs

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

package/dist/jsx-dev-runtime.js

@@ -319,11 +319,21 @@ var _rnToHtml = {
 };
 var _userMap = /* @__PURE__ */ new Map();
 var _cache = /* @__PURE__ */ new WeakMap();
+var _forwardRefOrMemoType = /* @__PURE__ */ new Set([
+  /* @__PURE__ */ Symbol.for("react.forward_ref"),
+  /* @__PURE__ */ Symbol.for("react.memo")
+]);
+function looksLikeRealRNPrimitive(type) {
+  const t = type.$$typeof;
+  if (t !== void 0) return _forwardRefOrMemoType.has(t);
+  return !!type.prototype?.isReactComponent;
+}
 function getWebTag(type, props) {
   if (typeof type === "string") return null;
   if (type === null || typeof type !== "function" && typeof type !== "object") return null;
   const obj = type;
   if (_userMap.has(obj)) return _userMap.get(obj);
+  if (!looksLikeRealRNPrimitive(obj)) return null;
   const name = obj.displayName ?? obj.name;
   if (!name) {
     _cache.set(obj, null);

package/dist/jsx-dev-runtime.mjs

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

package/dist/jsx-runtime.js

@@ -325,11 +325,21 @@ function registerWebElement(rnComponent, htmlTag) {
   _userMap.set(rnComponent, htmlTag);
   _cache.delete(rnComponent);
 }
+var _forwardRefOrMemoType = /* @__PURE__ */ new Set([
+  /* @__PURE__ */ Symbol.for("react.forward_ref"),
+  /* @__PURE__ */ Symbol.for("react.memo")
+]);
+function looksLikeRealRNPrimitive(type) {
+  const t = type.$$typeof;
+  if (t !== void 0) return _forwardRefOrMemoType.has(t);
+  return !!type.prototype?.isReactComponent;
+}
 function getWebTag(type, props) {
   if (typeof type === "string") return null;
   if (type === null || typeof type !== "function" && typeof type !== "object") return null;
   const obj = type;
   if (_userMap.has(obj)) return _userMap.get(obj);
+  if (!looksLikeRealRNPrimitive(obj)) return null;
   const name = obj.displayName ?? obj.name;
   if (!name) {
     _cache.set(obj, null);

package/dist/jsx-runtime.mjs

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

package/dist/vite-plugin.js

@@ -2319,6 +2319,18 @@ var effectResolvers = {
     if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
+  },
+  ease: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { transitionTimingFunction: value };
+    const presets = {
+      linear: "linear",
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { transitionTimingFunction: v } : null;
   }
 };
 
@@ -3072,30 +3084,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

@@ -2285,6 +2285,18 @@ var effectResolvers = {
     if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
+  },
+  ease: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { transitionTimingFunction: value };
+    const presets = {
+      linear: "linear",
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { transitionTimingFunction: v } : null;
   }
 };
 
@@ -3038,30 +3050,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

@@ -619,6 +619,7 @@ animate-spin / animate-ping / animate-pulse / animate-bounce / animate-none
 transition / transition-all/none/colors/opacity/shadow/transform
 duration-75/100/150/200/300/500/700/1000
 delay-75/100/150/200/300/500/700/1000
+ease-linear/in/out/in-out         ease-[cubic-bezier(...)]
 ```
 
 ### Cursor
@@ -740,17 +741,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.39",
   "description": "React / React Native components and hooks for the Kbach framework",
   "repository": {
     "type": "git",