@kbach/react 0.5.62 → 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-BRCQK5DA.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",
@@ -3131,7 +3124,6 @@ var customVariants = new Proxy(
 );
 
 export {
-  __require,
   defaultColors,
   defaultTheme,
   isWeb,

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

@@ -6,7 +6,7 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-5MX3E4OL.mjs";
+} from "./chunk-D4LJICWZ.mjs";
 import {
   flatten,
   getActiveBreakpoints,
@@ -22,7 +22,7 @@ import {
   normalizeClassString,
   onConfigChange,
   resolve
-} from "./chunk-BRCQK5DA.mjs";
+} from "./chunk-6NED62DB.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-5MX3E4OL.mjs → chunk-D4LJICWZ.mjs}

@@ -7,7 +7,7 @@ import {
   isNative,
   isWeb,
   subscribeGlobalWidth
-} from "./chunk-BRCQK5DA.mjs";
+} from "./chunk-6NED62DB.mjs";
 
 // src/core/darkModeStore.ts
 var KEY = "__kbach_dark_store__";

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 };

package/dist/index.js

@@ -33,7 +33,6 @@ __export(index_exports, {
   InteractiveWrapper: () => InteractiveWrapper,
   ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
-  ThemeToggle: () => ThemeToggle,
   buildConfig: () => buildConfig,
   cx: () => cx,
   defaultColors: () => defaultColors,
@@ -3427,153 +3426,14 @@ function ThemeProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children });
 }
 
-// src/ThemeToggle.tsx
-var import_react4 = __toESM(require("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 }) => import_react4.default.createElement("div", { style, ...rest });
-    const Text = ({ style, ...rest }) => import_react4.default.createElement("span", { style, ...rest });
-    const Touchable = ({ onPress, style, ...rest }) => import_react4.default.createElement("button", { onClick: onPress, style, ...rest });
-    const Switch = ({
-      value,
-      onValueChange,
-      accessibilityLabel
-    }) => import_react4.default.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 import_react4.default.createElement(
-      View,
-      { style: { flexDirection: "row", alignItems: "center", gap: 8, ...style } },
-      import_react4.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, lightLabel),
-      import_react4.default.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"
-      }),
-      import_react4.default.createElement(Text, { style: { fontSize: 14, ...labelStyle } }, darkLabel)
-    );
-  }
-  if (variant === "icon-button") {
-    const icon = isDark ? darkLabel : lightLabel;
-    return import_react4.default.createElement(
-      Touchable,
-      {
-        onPress: toggle,
-        style: {
-          padding: 8,
-          borderRadius: 8,
-          backgroundColor: isDark ? "#374151" : "#f3f4f6",
-          ...style
-        },
-        accessibilityRole: "button",
-        accessibilityLabel: `Switch to ${isDark ? "light" : "dark"} mode`,
-        accessibilityState: {}
-      },
-      import_react4.default.createElement(Text, { style: { fontSize: 18, ...labelStyle } }, icon)
-    );
-  }
-  if (includeSystem) {
-    const modes = [
-      { key: "light", label: lightLabel },
-      { key: "dark", label: darkLabel },
-      { key: "system", label: "System" }
-    ];
-    return import_react4.default.createElement(
-      View,
-      { style: { flexDirection: "row", gap: 4, ...style } },
-      ...modes.map(
-        ({ key, label: mLabel }) => import_react4.default.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 }
-          },
-          import_react4.default.createElement(Text, {
-            style: {
-              fontSize: 13,
-              fontWeight: "500",
-              color: mode === key ? "#ffffff" : isDark ? "#d1d5db" : "#374151",
-              ...labelStyle
-            }
-          }, mLabel)
-        )
-      )
-    );
-  }
-  const currentLabel = label ?? (isDark ? darkLabel : lightLabel);
-  return import_react4.default.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: {}
-    },
-    import_react4.default.createElement(Text, {
-      style: {
-        fontSize: 14,
-        fontWeight: "500",
-        color: isDark ? "#f9fafb" : "#111827",
-        ...labelStyle
-      }
-    }, currentLabel)
-  );
-}
-
 // src/styled.tsx
-var import_react7 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/useGlobalDarkMode.ts
-var import_react5 = __toESM(require("react"));
-var useSyncExternalStore = import_react5.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react5.default.useReducer((n) => n + 1, 0);
-  import_react5.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+var import_react4 = __toESM(require("react"));
+var useSyncExternalStore = import_react4.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react4.default.useReducer((n) => n + 1, 0);
+  import_react4.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
   return getSnapshot();
 };
 function useGlobalDarkMode() {
@@ -3586,10 +3446,10 @@ function useGlobalDarkMode() {
 }
 
 // src/useGlobalWidth.ts
-var import_react6 = __toESM(require("react"));
-var useSyncExternalStore2 = import_react6.default.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react6.default.useReducer((n) => n + 1, 0);
-  import_react6.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
+var import_react5 = __toESM(require("react"));
+var useSyncExternalStore2 = import_react5.default.useSyncExternalStore ?? function useSyncExternalStoreFallback2(subscribe, getSnapshot, _getServerSnapshot) {
+  const [, forceUpdate] = import_react5.default.useReducer((n) => n + 1, 0);
+  import_react5.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
   return getSnapshot();
 };
 var NOOP_SUB = (_) => () => {
@@ -3940,7 +3800,7 @@ function transformToWebProps(originalName, tag, props) {
 
 // src/styled.tsx
 function styled(Component, baseClasses = "") {
-  const Styled = (0, import_react7.forwardRef)(
+  const Styled = (0, import_react6.forwardRef)(
     (props, ref) => {
       const {
         kb: extraClasses,
@@ -3960,52 +3820,52 @@ function styled(Component, baseClasses = "") {
       const checked = !!props.checked;
       const { config } = useTheme();
       const isDark = useGlobalDarkMode();
-      const [pressed, setPressed] = (0, import_react7.useState)(false);
-      const [hovered, setHovered] = (0, import_react7.useState)(false);
-      const [focused, setFocused] = (0, import_react7.useState)(false);
-      const handlePressIn = (0, import_react7.useCallback)((e) => {
+      const [pressed, setPressed] = (0, import_react6.useState)(false);
+      const [hovered, setHovered] = (0, import_react6.useState)(false);
+      const [focused, setFocused] = (0, import_react6.useState)(false);
+      const handlePressIn = (0, import_react6.useCallback)((e) => {
         setPressed(true);
         onPressIn?.(e);
       }, [onPressIn]);
-      const handlePressOut = (0, import_react7.useCallback)((e) => {
+      const handlePressOut = (0, import_react6.useCallback)((e) => {
         setPressed(false);
         onPressOut?.(e);
       }, [onPressOut]);
-      const handlePointerDown = (0, import_react7.useCallback)((e) => {
+      const handlePointerDown = (0, import_react6.useCallback)((e) => {
         setPressed(true);
         onPointerDown?.(e);
       }, [onPointerDown]);
-      const handlePointerUp = (0, import_react7.useCallback)((e) => {
+      const handlePointerUp = (0, import_react6.useCallback)((e) => {
         setPressed(false);
         onPointerUp?.(e);
       }, [onPointerUp]);
-      const handlePointerLeave = (0, import_react7.useCallback)((e) => {
+      const handlePointerLeave = (0, import_react6.useCallback)((e) => {
         setPressed(false);
         onPointerLeave?.(e);
       }, [onPointerLeave]);
-      const handleMouseEnter = (0, import_react7.useCallback)((e) => {
+      const handleMouseEnter = (0, import_react6.useCallback)((e) => {
         setHovered(true);
         onMouseEnter?.(e);
       }, [onMouseEnter]);
-      const handleMouseLeave = (0, import_react7.useCallback)((e) => {
+      const handleMouseLeave = (0, import_react6.useCallback)((e) => {
         setHovered(false);
         onMouseLeave?.(e);
       }, [onMouseLeave]);
-      const handleFocus = (0, import_react7.useCallback)((e) => {
+      const handleFocus = (0, import_react6.useCallback)((e) => {
         setFocused(true);
         onFocus?.(e);
       }, [onFocus]);
-      const handleBlur = (0, import_react7.useCallback)((e) => {
+      const handleBlur = (0, import_react6.useCallback)((e) => {
         setFocused(false);
         onBlur?.(e);
       }, [onBlur]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = (0, import_react7.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
-      const hasInteractive = (0, import_react7.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
+      const resolved = (0, import_react6.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const hasInteractive = (0, import_react6.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth);
       const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-      const computedStyle = (0, import_react7.useMemo)(
+      const computedStyle = (0, import_react6.useMemo)(
         () => isWeb ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
@@ -4016,7 +3876,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 import_react7.default.createElement(effectiveComponent, {
+      return import_react6.default.createElement(effectiveComponent, {
         ref,
         ...effectiveRest,
         style: finalStyle,
@@ -4040,12 +3900,12 @@ function styled(Component, baseClasses = "") {
 }
 
 // src/useStyles.ts
-var import_react8 = require("react");
+var import_react7 = require("react");
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react8.useMemo)(() => {
+  return (0, import_react7.useMemo)(() => {
     const resolved = resolve(normalised, config.theme, config.darkMode);
     const breakpoints = getActiveBreakpoints(width);
     return flatten(resolved, isDark, state, breakpoints);
@@ -4054,19 +3914,19 @@ function useStyles(classString, state = {}) {
 function useResolvedStyle(classString) {
   const { config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react8.useMemo)(
+  return (0, import_react7.useMemo)(
     () => resolve(normalised, config.theme, config.darkMode),
     [normalised, config]
   );
 }
 
 // src/useBreakpoint.ts
-var import_react9 = require("react");
+var import_react8 = require("react");
 function useBreakpoint() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  const sorted = (0, import_react9.useMemo)(
+  const sorted = (0, import_react8.useMemo)(
     () => Object.entries(screens).filter((entry) => typeof entry[1] === "number").sort(([, a], [, b]) => b - a),
     [screens]
   );
@@ -4079,7 +3939,7 @@ function useResponsive() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     const result = {};
     for (const [name, minW] of Object.entries(screens)) {
       if (typeof minW === "number") result[name] = width >= minW;
@@ -4089,14 +3949,14 @@ function useResponsive() {
 }
 
 // src/InteractiveWrapper.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 function chain(original, extra) {
   return (...args) => {
     original?.(...args);
     extra();
   };
 }
-var InteractiveWrapper = (0, import_react10.forwardRef)(
+var InteractiveWrapper = (0, import_react9.forwardRef)(
   function InteractiveWrapper2({
     Component,
     resolvedStyle,
@@ -4117,20 +3977,20 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-    const [pressed, setPressed] = (0, import_react10.useState)(false);
-    const [hovered, setHovered] = (0, import_react10.useState)(false);
-    const [focused, setFocused] = (0, import_react10.useState)(false);
-    const handlePressIn = (0, import_react10.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
-    const handlePressOut = (0, import_react10.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
-    const handlePointerDown = (0, import_react10.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
-    const handlePointerUp = (0, import_react10.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
-    const handlePointerLeave = (0, import_react10.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
-    const handleMouseEnter = (0, import_react10.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
-    const handleMouseLeave = (0, import_react10.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
-    const handleFocus = (0, import_react10.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
-    const handleBlur = (0, import_react10.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
+    const [pressed, setPressed] = (0, import_react9.useState)(false);
+    const [hovered, setHovered] = (0, import_react9.useState)(false);
+    const [focused, setFocused] = (0, import_react9.useState)(false);
+    const handlePressIn = (0, import_react9.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
+    const handlePressOut = (0, import_react9.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = (0, import_react9.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = (0, import_react9.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = (0, import_react9.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
+    const handleMouseEnter = (0, import_react9.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
+    const handleMouseLeave = (0, import_react9.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
+    const handleFocus = (0, import_react9.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
+    const handleBlur = (0, import_react9.useCallback)(chain(onBlur, () => setFocused(false)), [onBlur]);
     const { children, disabled, checked, ...restForComponent } = rest;
-    const computedStyle = (0, import_react10.useMemo)(
+    const computedStyle = (0, import_react9.useMemo)(
       () => {
         if (isWeb) return {};
         const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
@@ -4184,7 +4044,7 @@ var InteractiveWrapper = (0, import_react10.forwardRef)(
       onFocus: handleFocus,
       onBlur: handleBlur
     };
-    return Array.isArray(children) ? import_react10.default.createElement(Component, componentProps, ...children) : import_react10.default.createElement(Component, componentProps, children);
+    return Array.isArray(children) ? import_react9.default.createElement(Component, componentProps, ...children) : import_react9.default.createElement(Component, componentProps, children);
   }
 );
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
@@ -4206,7 +4066,6 @@ function cx(...classes) {
   InteractiveWrapper,
   ThemeContext,
   ThemeProvider,
-  ThemeToggle,
   buildConfig,
   cx,
   defaultColors,

package/dist/index.mjs

@@ -11,9 +11,8 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-5MX3E4OL.mjs";
+} from "./chunk-D4LJICWZ.mjs";
 import {
-  __require,
   buildConfig,
   defaultColors,
   defaultTheme,
@@ -33,7 +32,7 @@ import {
   syncGlobalScreens,
   syncGlobalWidth,
   updateConfig
-} from "./chunk-BRCQK5DA.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,
@@ -581,7 +441,6 @@ export {
   InteractiveWrapper,
   ThemeContext,
   ThemeProvider,
-  ThemeToggle,
   buildConfig,
   cx,
   defaultColors,

package/dist/jsx-dev-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-MZKQ7H67.mjs";
-import "./chunk-5MX3E4OL.mjs";
-import "./chunk-BRCQK5DA.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.mjs

@@ -3,11 +3,11 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-MZKQ7H67.mjs";
+} from "./chunk-AAAI37Y4.mjs";
 import {
   registerWebElement
-} from "./chunk-5MX3E4OL.mjs";
-import "./chunk-BRCQK5DA.mjs";
+} from "./chunk-D4LJICWZ.mjs";
+import "./chunk-6NED62DB.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.mjs

@@ -4,7 +4,7 @@ import {
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-BRCQK5DA.mjs";
+} from "./chunk-6NED62DB.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";

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.62",
+  "version": "0.6.0",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",