@kbach/react 0.5.3 → 0.5.5

package/dist/{chunk-OKK7AJ2G.mjs → chunk-D7Q7ZCOW.mjs}

@@ -3600,6 +3600,9 @@ var InteractiveWrapper = forwardRef(
     style: styleProp,
     onPressIn,
     onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -3615,6 +3618,9 @@ var InteractiveWrapper = forwardRef(
     const [focused, setFocused] = useState(false);
     const handlePressIn = useCallback(chain(onPressIn, () => setPressed(true)), [onPressIn]);
     const handlePressOut = useCallback(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = useCallback(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = useCallback(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = useCallback(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
     const handleMouseEnter = useCallback(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
     const handleMouseLeave = useCallback(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
     const handleFocus = useCallback(chain(onFocus, () => setFocused(true)), [onFocus]);
@@ -3662,8 +3668,9 @@ var InteractiveWrapper = forwardRef(
       ...restWithoutChildren,
       style: finalStyle,
       ...isWeb && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only; skip on web to avoid DOM warnings.
-      ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // onPressIn / onPressOut are React Native-only.
+      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
+      ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/{chunk-7C3WGTMN.mjs → chunk-UR4DTYE3.mjs}

@@ -8,7 +8,7 @@ import {
   resolve,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-OKK7AJ2G.mjs";
+} from "./chunk-D7Q7ZCOW.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment } from "react/jsx-runtime";

package/dist/index.d.mts

@@ -315,6 +315,9 @@ interface InteractiveWrapperProps {
     children?: React__default.ReactNode;
     onPressIn?: (...args: any[]) => void;
     onPressOut?: (...args: any[]) => void;
+    onPointerDown?: (...args: any[]) => void;
+    onPointerUp?: (...args: any[]) => void;
+    onPointerLeave?: (...args: any[]) => void;
     onMouseEnter?: (...args: any[]) => void;
     onMouseLeave?: (...args: any[]) => void;
     onFocus?: (...args: any[]) => void;

package/dist/index.d.ts

@@ -315,6 +315,9 @@ interface InteractiveWrapperProps {
     children?: React__default.ReactNode;
     onPressIn?: (...args: any[]) => void;
     onPressOut?: (...args: any[]) => void;
+    onPointerDown?: (...args: any[]) => void;
+    onPointerUp?: (...args: any[]) => void;
+    onPointerLeave?: (...args: any[]) => void;
     onMouseEnter?: (...args: any[]) => void;
     onMouseLeave?: (...args: any[]) => void;
     onFocus?: (...args: any[]) => void;

package/dist/index.js

@@ -3968,6 +3968,9 @@ function styled(Component, baseClasses = "") {
         style: styleProp,
         onPressIn,
         onPressOut,
+        onPointerDown,
+        onPointerUp,
+        onPointerLeave,
         onMouseEnter,
         onMouseLeave,
         onFocus,
@@ -3986,6 +3989,18 @@ function styled(Component, baseClasses = "") {
         setPressed(false);
         onPressOut?.(e);
       }, [onPressOut]);
+      const handlePointerDown = (0, import_react6.useCallback)((e) => {
+        setPressed(true);
+        onPointerDown?.(e);
+      }, [onPointerDown]);
+      const handlePointerUp = (0, import_react6.useCallback)((e) => {
+        setPressed(false);
+        onPointerUp?.(e);
+      }, [onPointerUp]);
+      const handlePointerLeave = (0, import_react6.useCallback)((e) => {
+        setPressed(false);
+        onPointerLeave?.(e);
+      }, [onPointerLeave]);
       const handleMouseEnter = (0, import_react6.useCallback)((e) => {
         setHovered(true);
         onMouseEnter?.(e);
@@ -4020,9 +4035,8 @@ function styled(Component, baseClasses = "") {
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
         ...isWeb && combined ? { className: combined } : {},
-        // onPressIn / onPressOut are React Native-only events; forwarding them to
-        // a DOM element on web triggers React's unknown-prop warning.
-        ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+        // onPressIn / onPressOut are React Native-only; on web use Pointer Events instead.
+        ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,
@@ -4120,6 +4134,9 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     style: styleProp,
     onPressIn,
     onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -4135,6 +4152,9 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
     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]);
@@ -4182,8 +4202,9 @@ var InteractiveWrapper = (0, import_react9.forwardRef)(
       ...restWithoutChildren,
       style: finalStyle,
       ...isWeb && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only; skip on web to avoid DOM warnings.
-      ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // onPressIn / onPressOut are React Native-only.
+      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
+      ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/index.mjs

@@ -23,7 +23,7 @@ import {
   useConditionalWidth,
   useGlobalDarkMode,
   useGlobalWidth
-} from "./chunk-OKK7AJ2G.mjs";
+} from "./chunk-D7Q7ZCOW.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -390,6 +390,9 @@ function styled(Component, baseClasses = "") {
         style: styleProp,
         onPressIn,
         onPressOut,
+        onPointerDown,
+        onPointerUp,
+        onPointerLeave,
         onMouseEnter,
         onMouseLeave,
         onFocus,
@@ -408,6 +411,18 @@ function styled(Component, baseClasses = "") {
         setPressed(false);
         onPressOut?.(e);
       }, [onPressOut]);
+      const handlePointerDown = useCallback3((e) => {
+        setPressed(true);
+        onPointerDown?.(e);
+      }, [onPointerDown]);
+      const handlePointerUp = useCallback3((e) => {
+        setPressed(false);
+        onPointerUp?.(e);
+      }, [onPointerUp]);
+      const handlePointerLeave = useCallback3((e) => {
+        setPressed(false);
+        onPointerLeave?.(e);
+      }, [onPointerLeave]);
       const handleMouseEnter = useCallback3((e) => {
         setHovered(true);
         onMouseEnter?.(e);
@@ -442,9 +457,8 @@ function styled(Component, baseClasses = "") {
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
         ...isWeb && combined ? { className: combined } : {},
-        // onPressIn / onPressOut are React Native-only events; forwarding them to
-        // a DOM element on web triggers React's unknown-prop warning.
-        ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+        // onPressIn / onPressOut are React Native-only; on web use Pointer Events instead.
+        ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,

package/dist/jsx-dev-runtime.js

@@ -3578,6 +3578,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     style: styleProp,
     onPressIn,
     onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -3593,6 +3596,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     const [focused, setFocused] = (0, import_react3.useState)(false);
     const handlePressIn = (0, import_react3.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
     const handlePressOut = (0, import_react3.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = (0, import_react3.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = (0, import_react3.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = (0, import_react3.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
     const handleMouseEnter = (0, import_react3.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
     const handleMouseLeave = (0, import_react3.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
     const handleFocus = (0, import_react3.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
@@ -3640,8 +3646,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       ...restWithoutChildren,
       style: finalStyle,
       ...isWeb && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only; skip on web to avoid DOM warnings.
-      ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // onPressIn / onPressOut are React Native-only.
+      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
+      ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-7C3WGTMN.mjs";
-import "./chunk-OKK7AJ2G.mjs";
+} from "./chunk-UR4DTYE3.mjs";
+import "./chunk-D7Q7ZCOW.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, _source, _self) {

package/dist/jsx-runtime.js

@@ -3577,6 +3577,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     style: styleProp,
     onPressIn,
     onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -3592,6 +3595,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
     const [focused, setFocused] = (0, import_react3.useState)(false);
     const handlePressIn = (0, import_react3.useCallback)(chain(onPressIn, () => setPressed(true)), [onPressIn]);
     const handlePressOut = (0, import_react3.useCallback)(chain(onPressOut, () => setPressed(false)), [onPressOut]);
+    const handlePointerDown = (0, import_react3.useCallback)(chain(onPointerDown, () => setPressed(true)), [onPointerDown]);
+    const handlePointerUp = (0, import_react3.useCallback)(chain(onPointerUp, () => setPressed(false)), [onPointerUp]);
+    const handlePointerLeave = (0, import_react3.useCallback)(chain(onPointerLeave, () => setPressed(false)), [onPointerLeave]);
     const handleMouseEnter = (0, import_react3.useCallback)(chain(onMouseEnter, () => setHovered(true)), [onMouseEnter]);
     const handleMouseLeave = (0, import_react3.useCallback)(chain(onMouseLeave, () => setHovered(false)), [onMouseLeave]);
     const handleFocus = (0, import_react3.useCallback)(chain(onFocus, () => setFocused(true)), [onFocus]);
@@ -3639,8 +3645,9 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       ...restWithoutChildren,
       style: finalStyle,
       ...isWeb && className ? { className } : {},
-      // onPressIn / onPressOut are React Native-only; skip on web to avoid DOM warnings.
-      ...isWeb ? {} : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // onPressIn / onPressOut are React Native-only.
+      // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
+      ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { 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-7C3WGTMN.mjs";
-import "./chunk-OKK7AJ2G.mjs";
+} from "./chunk-UR4DTYE3.mjs";
+import "./chunk-D7Q7ZCOW.mjs";
 export {
   Fragment,
   jsx,

package/package.json

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