@kbach/react 0.5.60 → 0.6.0

package/README.md

@@ -12,6 +12,8 @@ Tailwind-like utility classes for React (web). Write classes as `className` stri
 
 ## Install
 
+[npm package](https://www.npmjs.com/package/@kbach/react)
+
 ```
 npm install @kbach/react
 ```
@@ -226,15 +228,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 selector
-```
-
 ## Modifiers
 
 Chain modifiers in any order before the utility name:

package/dist/{chunk-NP4FVE77.mjs → chunk-6NED62DB.mjs}

@@ -1,10 +1,3 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
 // src/core/theme.ts
 var defaultColors = {
   transparent: "transparent",
@@ -1151,10 +1144,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 }) => {
@@ -1169,10 +1164,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 }) => {
@@ -2073,9 +2070,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 }) => {
@@ -2292,10 +2289,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 ─────────────────────────────────────────────────────────
@@ -3120,7 +3124,6 @@ var customVariants = new Proxy(
 );
 
 export {
-  __require,
   defaultColors,
   defaultTheme,
   isWeb,

package/dist/{chunk-LU2QNVYU.mjs → chunk-AAAI37Y4.mjs}

@@ -1,12 +1,12 @@
 import {
-  EMPTY_BREAKPOINTS2 as EMPTY_BREAKPOINTS,
+  EMPTY_BREAKPOINTS,
   InteractiveWrapper,
   getWebTag,
   hasResponsiveBuckets,
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-2MVCYYH5.mjs";
+} from "./chunk-D4LJICWZ.mjs";
 import {
   flatten,
   getActiveBreakpoints,
@@ -22,7 +22,7 @@ import {
   normalizeClassString,
   onConfigChange,
   resolve
-} from "./chunk-NP4FVE77.mjs";
+} from "./chunk-6NED62DB.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -187,7 +187,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/{chunk-2MVCYYH5.mjs → chunk-D4LJICWZ.mjs}

@@ -7,7 +7,7 @@ import {
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-NP4FVE77.mjs";
+} from "./chunk-6NED62DB.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";
@@ -407,7 +407,6 @@ function hasInteractiveBuckets(resolved) {
   }
   return false;
 }
-var EMPTY_BREAKPOINTS2 = /* @__PURE__ */ new Set();
 
 // src/InteractiveWrapper.tsx
 function chain(original, extra) {
@@ -495,9 +494,10 @@ var InteractiveWrapper = 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,
@@ -517,7 +517,6 @@ export {
   useConditionalWidth,
   hasResponsiveBuckets,
   hasInteractiveBuckets,
-  EMPTY_BREAKPOINTS2,
   registerWebElement,
   getWebTag,
   transformToWebProps,

package/dist/index.d.mts

@@ -133,34 +133,6 @@ interface ThemeProviderProps {
 }
 declare function ThemeProvider({ children, defaultMode, colorScheme, windowWidth: windowWidthProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
-type ToggleVariant = 'button' | 'switch' | 'icon-button';
-interface ThemeToggleProps {
-    /** Visual variant. Default: 'button' */
-    variant?: ToggleVariant;
-    /** Override label text (button variant) */
-    label?: string;
-    /** Custom light-mode label */
-    lightLabel?: string;
-    /** Custom dark-mode label */
-    darkLabel?: string;
-    /** Show system mode option */
-    includeSystem?: boolean;
-    /** Custom styles applied to the root container */
-    style?: object;
-    /** Custom styles for the label text */
-    labelStyle?: object;
-}
-/**
- * Drop-in theme toggle. Works on web and React Native.
- *
- * ```tsx
- * <ThemeToggle />
- * <ThemeToggle variant="switch" />
- * <ThemeToggle variant="icon-button" lightLabel="☀️" darkLabel="🌙" />
- * ```
- */
-declare function ThemeToggle({ variant, label, lightLabel, darkLabel, includeSystem, style, labelStyle, }: ThemeToggleProps): React__default.JSX.Element;
-
 interface StyledProps {
     /** Additional utility classes applied on top of the base classes */
     kb?: string;
@@ -306,4 +278,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };

package/dist/index.d.ts

@@ -133,34 +133,6 @@ interface ThemeProviderProps {
 }
 declare function ThemeProvider({ children, defaultMode, colorScheme, windowWidth: windowWidthProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
-type ToggleVariant = 'button' | 'switch' | 'icon-button';
-interface ThemeToggleProps {
-    /** Visual variant. Default: 'button' */
-    variant?: ToggleVariant;
-    /** Override label text (button variant) */
-    label?: string;
-    /** Custom light-mode label */
-    lightLabel?: string;
-    /** Custom dark-mode label */
-    darkLabel?: string;
-    /** Show system mode option */
-    includeSystem?: boolean;
-    /** Custom styles applied to the root container */
-    style?: object;
-    /** Custom styles for the label text */
-    labelStyle?: object;
-}
-/**
- * Drop-in theme toggle. Works on web and React Native.
- *
- * ```tsx
- * <ThemeToggle />
- * <ThemeToggle variant="switch" />
- * <ThemeToggle variant="icon-button" lightLabel="☀️" darkLabel="🌙" />
- * ```
- */
-declare function ThemeToggle({ variant, label, lightLabel, darkLabel, includeSystem, style, labelStyle, }: ThemeToggleProps): React__default.JSX.Element;
-
 interface StyledProps {
     /** Additional utility classes applied on top of the base classes */
     kb?: string;
@@ -306,4 +278,4 @@ declare function kb(classString: string, isDark?: boolean): StyleValue | string;
  */
 declare function cx(...classes: Array<string | false | null | undefined>): string;
 
-export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ToggleVariant, buildConfig, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };
+export { type ColorScale, type ColorsAPI, FrameworkConfig, type InteractionState, InteractiveWrapper, type InteractiveWrapperProps, ParsedClass, ResolvedConfig, ResolvedStyle, StyleValue, type StyledProps, ThemeConfig, ThemeContext, type ThemeContextValue, ThemeMode, ThemeProvider, type ThemeProviderProps, buildConfig, cx, defaultColors, defaultTheme, disableRuntimeCSS, flatten, getConfig, initConfig, kb, normalizeClassString, parseClass, parseClasses, resolve, splitClassTokens, styled, updateConfig, useBreakpoint, useColors, useGlobalDarkMode, useIsDark, useResolvedStyle, useResponsive, useStyles, useTheme, wrapColors };