@kbach/react 0.2.8 → 0.3.0

package/dist/jsx-runtime.js

@@ -597,6 +597,13 @@ function escapeCSSSelector(cls) {
 }
 
 // src/core/parser.ts
+var PLUGIN_MODIFIERS = /* @__PURE__ */ new Set();
+function registerModifier(name) {
+  PLUGIN_MODIFIERS.add(name);
+}
+function clearPluginModifiers() {
+  PLUGIN_MODIFIERS.clear();
+}
 var MODIFIERS = /* @__PURE__ */ new Set([
   // Theme
   "dark",
@@ -1026,7 +1033,7 @@ function parseClass(className) {
     const colonIdx = findOuterColon(remaining);
     if (colonIdx === -1) break;
     const candidate = remaining.slice(0, colonIdx);
-    if (MODIFIERS.has(candidate)) {
+    if (MODIFIERS.has(candidate) || PLUGIN_MODIFIERS.has(candidate)) {
       modifiers.push(candidate);
       remaining = remaining.slice(colonIdx + 1);
     } else {
@@ -1492,43 +1499,64 @@ var RESOLVERS = {
   // ── Border width ───────────────────────────────────────────────────────────
   border: ({ value, isArbitrary }, { colors, borderWidth, spacing }) => {
     if (!value) return { borderWidth: borderWidth["DEFAULT"] ?? 1 };
-    const color = resolveColor(value, colors, isArbitrary);
-    if (color) return { borderColor: color };
     if (isArbitrary) {
       const w2 = toNativeValue(value);
-      return { borderWidth: typeof w2 === "number" ? w2 : 1 };
+      if (typeof w2 === "number") return { borderWidth: w2 };
+      return { borderColor: value };
     }
+    const color = resolveColor(value, colors, false);
+    if (color) return { borderColor: color };
     const w = borderWidth[value] ?? spacing[value];
     if (w !== void 0) return { borderWidth: typeof w === "number" ? w : parseFloat(String(w)) };
     return null;
   },
   "border-t": ({ value, isArbitrary }, { colors, borderWidth }) => {
     if (!value) return { borderTopWidth: 1 };
-    const color = resolveColor(value, colors, isArbitrary);
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { borderTopWidth: w2 };
+      return { borderTopColor: value };
+    }
+    const color = resolveColor(value, colors, false);
     if (color) return { borderTopColor: color };
-    const w = borderWidth[value] ?? (isArbitrary ? toNativeValue(value) : null);
-    return w !== null ? { borderTopWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderTopWidth: w } : null;
   },
   "border-r": ({ value, isArbitrary }, { colors, borderWidth }) => {
     if (!value) return { borderRightWidth: 1 };
-    const color = resolveColor(value, colors, isArbitrary);
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { borderRightWidth: w2 };
+      return { borderRightColor: value };
+    }
+    const color = resolveColor(value, colors, false);
     if (color) return { borderRightColor: color };
-    const w = borderWidth[value] ?? (isArbitrary ? toNativeValue(value) : null);
-    return w !== null ? { borderRightWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderRightWidth: w } : null;
   },
   "border-b": ({ value, isArbitrary }, { colors, borderWidth }) => {
     if (!value) return { borderBottomWidth: 1 };
-    const color = resolveColor(value, colors, isArbitrary);
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { borderBottomWidth: w2 };
+      return { borderBottomColor: value };
+    }
+    const color = resolveColor(value, colors, false);
     if (color) return { borderBottomColor: color };
-    const w = borderWidth[value] ?? (isArbitrary ? toNativeValue(value) : null);
-    return w !== null ? { borderBottomWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderBottomWidth: w } : null;
   },
   "border-l": ({ value, isArbitrary }, { colors, borderWidth }) => {
     if (!value) return { borderLeftWidth: 1 };
-    const color = resolveColor(value, colors, isArbitrary);
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { borderLeftWidth: w2 };
+      return { borderLeftColor: value };
+    }
+    const color = resolveColor(value, colors, false);
     if (color) return { borderLeftColor: color };
-    const w = borderWidth[value] ?? (isArbitrary ? toNativeValue(value) : null);
-    return w !== null ? { borderLeftWidth: typeof w === "number" ? w : parseFloat(String(w)) } : null;
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderLeftWidth: w } : null;
   },
   // ── Border radius ──────────────────────────────────────────────────────────
   rounded: ({ value, isArbitrary }, { borderRadius }) => {
@@ -1593,7 +1621,6 @@ var RESOLVERS = {
     return { flexShrink: isNaN(n) ? 1 : n };
   },
   order: ({ value, isArbitrary }, _) => {
-    if (isArbitrary) return { order: parseInt(value) };
     const n = parseInt(value);
     return isNaN(n) ? null : { order: n };
   },
@@ -1641,9 +1668,15 @@ var RESOLVERS = {
   },
   // ── Z-index ────────────────────────────────────────────────────────────────
   z: ({ value, isArbitrary }, { zIndex }) => {
-    if (isArbitrary) return { zIndex: parseInt(value) };
+    if (isArbitrary) {
+      const n2 = parseInt(value);
+      return isNaN(n2) ? null : { zIndex: n2 };
+    }
     const v = zIndex[value];
-    if (v !== void 0) return { zIndex: v };
+    if (v !== void 0) {
+      if (v === "auto") return isWeb ? { zIndex: "auto" } : null;
+      return { zIndex: v };
+    }
     const n = parseInt(value);
     return isNaN(n) ? null : { zIndex: n };
   },
@@ -1686,25 +1719,30 @@ var RESOLVERS = {
     return shadow[key] ?? null;
   },
   // ── Scale ──────────────────────────────────────────────────────────────────
+  // Non-arbitrary: scale-150 → value='150' → 150/100 = 1.5
+  // Arbitrary:     scale-[1.5] → value='1.5' → used as-is (already the factor)
   scale: ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
     if (isNaN(n)) return null;
     return isWeb ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
   },
   "scale-x": ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
     if (isNaN(n)) return null;
     return isWeb ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
   },
   "scale-y": ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) / 100 : parseFloat(value) / 100;
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
     if (isNaN(n)) return null;
     return isWeb ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
   },
   // ── Rotate ─────────────────────────────────────────────────────────────────
   rotate: ({ value, negative, isArbitrary }) => {
-    const raw = isArbitrary ? value : `${value}deg`;
-    const deg = parseFloat(raw);
+    if (isArbitrary) {
+      const finalValue = negative ? `-${value}` : value;
+      return isWeb ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
+    }
+    const deg = parseFloat(value);
     if (isNaN(deg)) return null;
     const finalDeg = negative ? -deg : deg;
     return isWeb ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
@@ -1713,18 +1751,31 @@ var RESOLVERS = {
   "translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
     if (v === null) return null;
-    return isWeb ? { transform: `translateX(${v})` } : { transform: [{ translateX: typeof v === "string" ? parseFloat(v) : v }] };
+    if (isWeb) return { transform: `translateX(${v})` };
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return isNaN(n) ? null : { transform: [{ translateX: n }] };
+    }
+    return { transform: [{ translateX: v }] };
   },
   "translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
     if (v === null) return null;
-    return isWeb ? { transform: `translateY(${v})` } : { transform: [{ translateY: typeof v === "string" ? parseFloat(v) : v }] };
+    if (isWeb) return { transform: `translateY(${v})` };
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return isNaN(n) ? null : { transform: [{ translateY: n }] };
+    }
+    return { transform: [{ translateY: v }] };
   },
   // ── Aspect ratio ───────────────────────────────────────────────────────────
   aspect: ({ value, isArbitrary }) => {
     if (isArbitrary) return { aspectRatio: value };
     const presets = { auto: "auto", square: 1, video: 16 / 9 };
-    return value in presets ? { aspectRatio: presets[value] } : null;
+    if (!(value in presets)) return null;
+    const v = presets[value];
+    if (v === "auto") return isWeb ? { aspectRatio: "auto" } : null;
+    return { aspectRatio: v };
   },
   // ── Transition (web-only; use Animated API on native) ─────────────────────
   transition: ({ value }) => {
@@ -1801,18 +1852,25 @@ var RESOLVERS = {
   }
 };
 function resolveUtility(parsed, theme) {
-  if (!parsed.value && parsed.utility in STANDALONE) {
-    return STANDALONE[parsed.utility] ?? null;
+  if (!parsed.value) {
+    if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
+    if (parsed.utility in STANDALONE) return STANDALONE[parsed.utility] ?? null;
   }
-  const resolver = RESOLVERS[parsed.utility];
+  const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
   return null;
 }
-function getStandaloneMap() {
-  return STANDALONE;
+var PLUGIN_STANDALONE = {};
+var PLUGIN_RESOLVERS = {};
+function clearPluginUtilities() {
+  for (const key of Object.keys(PLUGIN_STANDALONE)) delete PLUGIN_STANDALONE[key];
+  for (const key of Object.keys(PLUGIN_RESOLVERS)) delete PLUGIN_RESOLVERS[key];
 }
-function getResolverMap() {
-  return RESOLVERS;
+function getPluginStandaloneMap() {
+  return PLUGIN_STANDALONE;
+}
+function getPluginResolverMap() {
+  return PLUGIN_RESOLVERS;
 }
 
 // src/core/resolver.ts
@@ -1834,6 +1892,37 @@ function injectRule(rule) {
   } catch {
   }
 }
+var MODIFIER_TO_PSEUDO = {
+  hover: ":hover",
+  focus: ":focus",
+  "focus-within": ":focus-within",
+  "focus-visible": ":focus-visible",
+  active: ":active",
+  pressed: ":active",
+  disabled: ":disabled",
+  checked: ":checked",
+  visited: ":visited",
+  placeholder: "::placeholder",
+  first: ":first-child",
+  last: ":last-child",
+  odd: ":nth-child(odd)",
+  even: ":nth-child(even)",
+  only: ":only-child",
+  "not-hover": ":not(:hover)",
+  "not-focus": ":not(:focus)",
+  "not-active": ":not(:active)",
+  "not-pressed": ":not(:active)",
+  "not-disabled": ":not(:disabled)",
+  "not-checked": ":not(:checked)",
+  "not-visited": ":not(:visited)"
+};
+var GROUP_PEER_PREFIX = {
+  "group-hover": ".group:hover",
+  "group-focus": ".group:focus",
+  "peer-hover": ".peer:hover ~",
+  "peer-focus": ".peer:focus ~"
+};
+var MODE_MODS = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
 function injectClassRule(cls, bucketKey, styles, darkMode) {
   const cssDecls = styleValueToCSS(styles);
   if (!cssDecls) return;
@@ -1843,10 +1932,14 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
     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}`;
+  const hasDark = mods.includes("dark") || mods.includes("not-light");
+  const hasLight = mods.includes("light") || mods.includes("not-dark");
+  const ancestorMods = mods.filter((m) => m in GROUP_PEER_PREFIX);
+  const pseudoMods = mods.filter((m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX));
+  const pseudoSuffix = pseudoMods.map((p) => MODIFIER_TO_PSEUDO[p] ?? `:${p}`).join("");
+  const elementSelector = `.${escaped}${pseudoSuffix}`;
+  const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
+  const selector = `${ancestorPrefix}${elementSelector}`;
   let rule;
   if (hasDark) {
     if (darkMode === "media") {
@@ -1856,6 +1949,14 @@ function injectClassRule(cls, bucketKey, styles, darkMode) {
     } else {
       rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
     }
+  } else if (hasLight) {
+    if (darkMode === "media") {
+      rule = `@media (prefers-color-scheme: light) { ${selector} { ${cssDecls} } }`;
+    } else if (darkMode === "class") {
+      rule = `:not(.dark) ${selector} { ${cssDecls} }`;
+    } else {
+      rule = `[data-theme="light"] ${selector} { ${cssDecls} }`;
+    }
   } else {
     rule = `${selector} { ${cssDecls} }`;
   }
@@ -2036,20 +2137,24 @@ function buildConfig(userConfig) {
     theme,
     plugins: userConfig.plugins ?? []
   };
+  clearPluginUtilities();
+  clearPluginModifiers();
+  const pluginAPI = makePluginAPI(resolved.theme);
   for (const plugin of resolved.plugins) {
-    plugin(makePluginAPI(resolved.theme));
+    plugin(pluginAPI);
   }
   return resolved;
 }
 function makePluginAPI(theme) {
-  const standalone = getStandaloneMap();
-  const resolvers = getResolverMap();
+  const standalone = getPluginStandaloneMap();
+  const resolvers = getPluginResolverMap();
   return {
     addUtility(name, styles) {
       standalone[name] = styles;
     },
-    addVariant(name, _selector) {
-      customVariants[name] = _selector;
+    addVariant(name, selector) {
+      customVariants[name] = selector;
+      registerModifier(name);
     },
     theme(path, defaultValue) {
       const parts = path.replace(/\[([^\]]+)\]/g, ".$1").split(".");
@@ -2165,8 +2270,8 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       ...restWithoutChildren,
       style: finalStyle,
       ...isWeb && className ? { className } : {},
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
+      // onPressIn / onPressOut are React Native-only; skip on web to avoid DOM warnings.
+      ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/jsx-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-YDKLJFFY.mjs";
-import "./chunk-GN4JPJHC.mjs";
+} from "./chunk-Q5RMVTAU.mjs";
+import "./chunk-V5KHX4CZ.mjs";
 export {
   Fragment,
   jsx,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -52,5 +52,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": ["dist"]
+  "files": [
+    "dist"
+  ]
 }