@kbach/react 0.5.60 → 0.6.0

package/dist/index.mjs

@@ -11,9 +11,8 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-2MVCYYH5.mjs";
+} from "./chunk-D4LJICWZ.mjs";
 import {
-  __require,
   buildConfig,
   defaultColors,
   defaultTheme,
@@ -33,7 +32,7 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-NP4FVE77.mjs";
+} from "./chunk-6NED62DB.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -270,150 +269,11 @@ function ThemeProvider({
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
 }
 
-// src/ThemeToggle.tsx
-import React2 from "react";
-function getPrimitives() {
-  try {
-    const RN = __require("react-native");
-    return {
-      View: RN.View,
-      Text: RN.Text,
-      Touchable: RN.TouchableOpacity,
-      Switch: RN.Switch
-    };
-  } catch {
-    const View = ({ style, ...rest }) => React2.createElement("div", { style, ...rest });
-    const Text = ({ style, ...rest }) => React2.createElement("span", { style, ...rest });
-    const Touchable = ({ onPress, style, ...rest }) => React2.createElement("button", { onClick: onPress, style, ...rest });
-    const Switch = ({
-      value,
-      onValueChange,
-      accessibilityLabel
-    }) => React2.createElement("input", {
-      type: "checkbox",
-      checked: value,
-      onChange: (e) => onValueChange?.(e.target.checked),
-      "aria-label": accessibilityLabel
-    });
-    return { View, Text, Touchable, Switch };
-  }
-}
-var { View: _View, Text: _Text, Touchable: _Touchable, Switch: _Switch } = getPrimitives();
-function ThemeToggle({
-  variant = "button",
-  label,
-  lightLabel = "Light",
-  darkLabel = "Dark",
-  includeSystem = false,
-  style,
-  labelStyle
-}) {
-  const { mode, isDark, setMode, toggle } = useTheme();
-  const View = _View, Text = _Text, Touchable = _Touchable, Switch = _Switch;
-  if (variant === "switch") {
-    return React2.createElement(
-      View,
-      { style: { flexDirection: "row", alignItems: "center", gap: 8, ...style } },
-      React2.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, lightLabel),
-      React2.createElement(Switch, {
-        value: isDark,
-        onValueChange: (v) => setMode(v ? "dark" : "light"),
-        trackColor: { false: "#d1d5db", true: "#6366f1" },
-        thumbColor: isDark ? "#ffffff" : "#f3f4f6",
-        ios_backgroundColor: "#d1d5db",
-        accessibilityLabel: "Toggle dark mode"
-      }),
-      React2.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, darkLabel)
-    );
-  }
-  if (variant === "icon-button") {
-    const icon = isDark ? darkLabel : lightLabel;
-    return React2.createElement(
-      Touchable,
-      {
-        onPress: toggle,
-        style: {
-          padding: 8,
-          borderRadius: 8,
-          backgroundColor: isDark ? "#374151" : "#f3f4f6",
-          ...style
-        },
-        accessibilityRole: "button",
-        accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
-        accessibilityState: {}
-      },
-      React2.createElement(Text, { style: { fontSize: 18, ...labelStyle } }, icon)
-    );
-  }
-  if (includeSystem) {
-    const modes = [
-      { key: "light", label: lightLabel },
-      { key: "dark", label: darkLabel },
-      { key: "system", label: "System" }
-    ];
-    return React2.createElement(
-      View,
-      { style: { flexDirection: "row", gap: 4, ...style } },
-      ...modes.map(
-        ({ key, label: mLabel }) => React2.createElement(
-          Touchable,
-          {
-            key,
-            onPress: () => setMode(key),
-            style: {
-              paddingHorizontal: 12,
-              paddingVertical: 6,
-              borderRadius: 6,
-              backgroundColor: mode === key ? isDark ? "#6366f1" : "#3b82f6" : isDark ? "#374151" : "#e5e7eb"
-            },
-            accessibilityRole: "button",
-            accessibilityLabel: `Set ${key} theme`,
-            accessibilityState: { selected: mode === key }
-          },
-          React2.createElement(Text, {
-            style: {
-              fontSize: 13,
-              fontWeight: "500",
-              color: mode === key ? "#ffffff" : isDark ? "#d1d5db" : "#374151",
-              ...labelStyle
-            }
-          }, mLabel)
-        )
-      )
-    );
-  }
-  const currentLabel = label ?? (isDark ? darkLabel : lightLabel);
-  return React2.createElement(
-    Touchable,
-    {
-      onPress: toggle,
-      style: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 8,
-        backgroundColor: isDark ? "#374151" : "#e5e7eb",
-        ...style
-      },
-      accessibilityRole: "button",
-      accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
-      accessibilityState: {}
-    },
-    React2.createElement(Text, {
-      style: {
-        fontSize: 14,
-        fontWeight: "500",
-        color: isDark ? "#f9fafb" : "#111827",
-        ...labelStyle
-      }
-    }, currentLabel)
-  );
-}
-
 // src/styled.tsx
-import React3, {
+import React2, {
   forwardRef,
   useState as useState2,
-  useCallback as useCallback3,
+  useCallback as useCallback2,
   useMemo as useMemo3
 } from "react";
 function styled(Component, baseClasses = "") {
@@ -440,39 +300,39 @@ function styled(Component, baseClasses = "") {
       const [pressed, setPressed] = useState2(false);
       const [hovered, setHovered] = useState2(false);
       const [focused, setFocused] = useState2(false);
-      const handlePressIn = useCallback3((e) => {
+      const handlePressIn = useCallback2((e) => {
         setPressed(true);
         onPressIn?.(e);
       }, [onPressIn]);
-      const handlePressOut = useCallback3((e) => {
+      const handlePressOut = useCallback2((e) => {
         setPressed(false);
         onPressOut?.(e);
       }, [onPressOut]);
-      const handlePointerDown = useCallback3((e) => {
+      const handlePointerDown = useCallback2((e) => {
         setPressed(true);
         onPointerDown?.(e);
       }, [onPointerDown]);
-      const handlePointerUp = useCallback3((e) => {
+      const handlePointerUp = useCallback2((e) => {
         setPressed(false);
         onPointerUp?.(e);
       }, [onPointerUp]);
-      const handlePointerLeave = useCallback3((e) => {
+      const handlePointerLeave = useCallback2((e) => {
         setPressed(false);
         onPointerLeave?.(e);
       }, [onPointerLeave]);
-      const handleMouseEnter = useCallback3((e) => {
+      const handleMouseEnter = useCallback2((e) => {
         setHovered(true);
         onMouseEnter?.(e);
       }, [onMouseEnter]);
-      const handleMouseLeave = useCallback3((e) => {
+      const handleMouseLeave = useCallback2((e) => {
         setHovered(false);
         onMouseLeave?.(e);
       }, [onMouseLeave]);
-      const handleFocus = useCallback3((e) => {
+      const handleFocus = useCallback2((e) => {
         setFocused(true);
         onFocus?.(e);
       }, [onFocus]);
-      const handleBlur = useCallback3((e) => {
+      const handleBlur = useCallback2((e) => {
         setFocused(false);
         onBlur?.(e);
       }, [onBlur]);
@@ -493,7 +353,7 @@ function styled(Component, baseClasses = "") {
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
-      return React3.createElement(effectiveComponent, {
+      return React2.createElement(effectiveComponent, {
         ref,
         ...effectiveRest,
         style: finalStyle,
@@ -501,7 +361,9 @@ function styled(Component, baseClasses = "") {
         ...isWeb && combined ? { className: normalizeClassString(combined) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
-        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPointerDown, onPointerUp, onPointerLeave } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        // onPressIn/onPressOut are forwarded on web too (not just native) since
+        // react-native-web components rely on receiving them directly.
+        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
         onFocus: hasInteractive ? handleFocus : onFocus,
@@ -579,7 +441,6 @@ export {
   InteractiveWrapper,
   ThemeContext,
   ThemeProvider,
-  ThemeToggle,
   buildConfig,
   cx,
   defaultColors,

package/dist/jsx-dev-runtime.js

@@ -1219,10 +1219,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { backgroundColor: color } : null;
   },
-  "bg-opacity": ({ value }, _) => {
+  "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--bg-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--bg-opacity": v };
   },
   // ── Text ───────────────────────────────────────────────────────────────────
   text: ({ value, isArbitrary }, { colors, fontSize }) => {
@@ -1237,10 +1239,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     return color ? { color } : null;
   },
-  "text-opacity": ({ value }, _) => {
+  "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--text-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
   },
   // ── Padding ────────────────────────────────────────────────────────────────
   p: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2141,9 +2145,9 @@ var RESOLVERS = {
     const n = parseFloat(value);
     return { flexShrink: isNaN(n) ? 1 : n };
   },
-  order: ({ value, isArbitrary }, _) => {
-    const n = parseInt(value);
-    return isNaN(n) ? null : { order: n };
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
   },
   // ── Gap ────────────────────────────────────────────────────────────────────
   gap: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2360,10 +2364,17 @@ var RESOLVERS = {
     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;
+    let offsetWidth;
+    if (!isArbitrary) {
+      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
+    } else {
+      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
+    }
+    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
+    const isZero = offsetWidth === 0 || offsetWidth === "0";
+    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
     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}`
+      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
     };
   },
   // ── Space between ─────────────────────────────────────────────────────────
@@ -3196,7 +3207,6 @@ function hasResponsiveBuckets(resolved) {
   }
   return false;
 }
-var EMPTY_BREAKPOINTS2 = /* @__PURE__ */ new Set();
 
 // src/InteractiveWrapper.tsx
 function chain(original, extra) {
@@ -3284,9 +3294,10 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only.
-      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
+      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
+      // (and any component that accepts both prop names) depend on receiving them directly.
+      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
@@ -3304,7 +3315,7 @@ var DarkWrapper = import_react4.default.forwardRef(
     const isDark = useGlobalDarkMode();
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
-    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS2;
+    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const screens = getGlobalScreens();
     const isNonStringComponent = typeof Component !== "string";
     const computedStyle = (0, import_react4.useMemo)(() => {
@@ -3728,7 +3739,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
       ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
     }, key);
   }
-  if (classStr && !__kbachStyles && /^(__[^\s]+\s*)+$/.test(classStr.trim())) {
+  if (classStr && !__kbachStyles && /^(__[A-Za-z0-9_]+\s*)+$/.test(classStr.trim())) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
       ...passProps2,

package/dist/jsx-dev-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-LU2QNVYU.mjs";
-import "./chunk-2MVCYYH5.mjs";
-import "./chunk-NP4FVE77.mjs";
+} from "./chunk-AAAI37Y4.mjs";
+import "./chunk-D4LJICWZ.mjs";
+import "./chunk-6NED62DB.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -1220,10 +1220,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { backgroundColor: color } : null;
   },
-  "bg-opacity": ({ value }, _) => {
+  "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--bg-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--bg-opacity": v };
   },
   // ── Text ───────────────────────────────────────────────────────────────────
   text: ({ value, isArbitrary }, { colors, fontSize }) => {
@@ -1238,10 +1240,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     return color ? { color } : null;
   },
-  "text-opacity": ({ value }, _) => {
+  "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--text-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
   },
   // ── Padding ────────────────────────────────────────────────────────────────
   p: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2142,9 +2146,9 @@ var RESOLVERS = {
     const n = parseFloat(value);
     return { flexShrink: isNaN(n) ? 1 : n };
   },
-  order: ({ value, isArbitrary }, _) => {
-    const n = parseInt(value);
-    return isNaN(n) ? null : { order: n };
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
   },
   // ── Gap ────────────────────────────────────────────────────────────────────
   gap: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2361,10 +2365,17 @@ var RESOLVERS = {
     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;
+    let offsetWidth;
+    if (!isArbitrary) {
+      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
+    } else {
+      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
+    }
+    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
+    const isZero = offsetWidth === 0 || offsetWidth === "0";
+    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
     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}`
+      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
     };
   },
   // ── Space between ─────────────────────────────────────────────────────────
@@ -3197,7 +3208,6 @@ function hasResponsiveBuckets(resolved) {
   }
   return false;
 }
-var EMPTY_BREAKPOINTS2 = /* @__PURE__ */ new Set();
 
 // src/InteractiveWrapper.tsx
 function chain(original, extra) {
@@ -3285,9 +3295,10 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
       ...!isNative && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only.
-      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
+      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
+      // (and any component that accepts both prop names) depend on receiving them directly.
+      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerLeave, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
@@ -3305,7 +3316,7 @@ var DarkWrapper = import_react4.default.forwardRef(
     const isDark = useGlobalDarkMode();
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
-    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS2;
+    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
     const screens = getGlobalScreens();
     const isNonStringComponent = typeof Component !== "string";
     const computedStyle = (0, import_react4.useMemo)(() => {
@@ -3734,7 +3745,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
       ...userStyle2 !== void 0 ? { style: userStyle2 } : {}
     }, key);
   }
-  if (classStr && !__kbachStyles && /^(__[^\s]+\s*)+$/.test(classStr.trim())) {
+  if (classStr && !__kbachStyles && /^(__[A-Za-z0-9_]+\s*)+$/.test(classStr.trim())) {
     const { style: userStyle2, ...passProps2 } = omitConsumed(workingProps);
     return makeElement(isStaticChildren, effectiveType, {
       ...passProps2,

package/dist/jsx-runtime.mjs

@@ -3,11 +3,11 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-LU2QNVYU.mjs";
+} from "./chunk-AAAI37Y4.mjs";
 import {
   registerWebElement
-} from "./chunk-2MVCYYH5.mjs";
-import "./chunk-NP4FVE77.mjs";
+} from "./chunk-D4LJICWZ.mjs";
+import "./chunk-6NED62DB.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/vite-plugin.ts
@@ -25,6 +35,7 @@ __export(vite_plugin_exports, {
 module.exports = __toCommonJS(vite_plugin_exports);
 var import_fs = require("fs");
 var import_path = require("path");
+var import_node_process = __toESM(require("process"));
 
 // src/core/platform.ts
 var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
@@ -1073,10 +1084,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { backgroundColor: color } : null;
   },
-  "bg-opacity": ({ value }, _) => {
+  "bg-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--bg-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--bg-opacity": v };
   },
   // ── Text ───────────────────────────────────────────────────────────────────
   text: ({ value, isArbitrary }, { colors, fontSize }) => {
@@ -1091,10 +1104,12 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     return color ? { color } : null;
   },
-  "text-opacity": ({ value }, _) => {
+  "text-opacity": ({ value, isArbitrary }, _) => {
     if (!getEffectiveIsWeb()) return null;
-    const v = parseFloat(value) / 100;
-    return isNaN(v) ? null : { "--text-opacity": v };
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
   },
   // ── Padding ────────────────────────────────────────────────────────────────
   p: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -1995,9 +2010,9 @@ var RESOLVERS = {
     const n = parseFloat(value);
     return { flexShrink: isNaN(n) ? 1 : n };
   },
-  order: ({ value, isArbitrary }, _) => {
-    const n = parseInt(value);
-    return isNaN(n) ? null : { order: n };
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
   },
   // ── Gap ────────────────────────────────────────────────────────────────────
   gap: ({ value, negative, isArbitrary }, { spacing }) => {
@@ -2214,10 +2229,17 @@ var RESOLVERS = {
     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;
+    let offsetWidth;
+    if (!isArbitrary) {
+      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
+    } else {
+      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
+    }
+    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
+    const isZero = offsetWidth === 0 || offsetWidth === "0";
+    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
     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}`
+      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
     };
   },
   // ── Space between ─────────────────────────────────────────────────────────
@@ -2917,9 +2939,10 @@ var customVariants = new Proxy(
 );
 
 // src/vite-plugin.ts
+var process2 = import_node_process.default;
 function normPath(p) {
   const fwd = p.replace(/\\/g, "/");
-  return process.platform === "win32" ? fwd.toLowerCase() : fwd;
+  return process2.platform === "win32" ? fwd.toLowerCase() : fwd;
 }
 setCSSGenMode(true);
 var KBACH_START = "/* kbach:start */";
@@ -3159,7 +3182,7 @@ function kbach(userConfigOrOptions) {
   const screenKeys = Object.keys(cfg.theme.screens ?? {});
   const responsivePattern = screenKeys.length ? screenKeys.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") : "sm|md|lg|xl|2xl";
   const responsiveRe = new RegExp(`^(${responsivePattern}):`);
-  let root = process.cwd();
+  let root = process2.cwd();
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
   const tokenCSS = /* @__PURE__ */ new Map();

package/dist/vite-plugin.mjs

@@ -4,11 +4,13 @@ import {
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-NP4FVE77.mjs";
+} from "./chunk-6NED62DB.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
 import { join } from "path";
+import processImport from "process";
+var process = processImport;
 function normPath(p) {
   const fwd = p.replace(/\\/g, "/");
   return process.platform === "win32" ? fwd.toLowerCase() : fwd;

package/kbach-react.md

@@ -163,14 +163,6 @@ colors['white/20']        // 'rgba(255,255,255,0.2)'
 colors.alpha('#ff6b35', 60) // 'rgba(255,107,53,0.6)'
 ```
 
-### ThemeToggle
-```jsx
-<ThemeToggle />                                 // button (default)
-<ThemeToggle variant="switch" />               // toggle switch
-<ThemeToggle variant="icon-button" />          // icon button
-<ThemeToggle variant="button" includeSystem /> // three-way light/dark/system
-```
-
 ---
 
 ## Modifier System

package/package.json

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