@react-xp/aeiou 0.1.0-beta.12 → 0.1.0-beta.13

package/dist/cjs/components/a/a.native.js

@@ -6,12 +6,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
 const index_native_1 = require("../../hooks/index.native");
 const index_native_2 = require("../e/index.native");
-function A({ className, children, onPress, onClick, disabled, ref, style, ...rest }) {
+function A({ accessibilityLabel, accessibilityRole, accessibilityState, className, children, loading, disabled, ref, style, ...rest }) {
     const cn = (0, index_native_1.useCn)();
-    const { onAction } = (0, index_native_1.useAction)({
-        onClick,
-        onPress,
-    });
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ref: ref, onPress: onAction, disabled: disabled, children: (0, jsx_runtime_1.jsx)(index_native_2.E, { className: cn(disabled && 'opacity-60', className), style: style, ...rest, children: children }) }));
+    const { eventHandlers } = (0, index_native_1.useInteractiveState)({ ...rest, disabled });
+    const isDisabled = Boolean(disabled || loading);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ref: ref, disabled: isDisabled, accessibilityLabel: accessibilityLabel, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState, ...eventHandlers, children: (0, jsx_runtime_1.jsx)(index_native_2.E, { className: cn(disabled && 'opacity-60', className), style: style, ...rest, children: children }) }));
 }
 exports.Action = A;

package/dist/cjs/components/a/a.web.js

@@ -4,12 +4,10 @@ exports.Action = void 0;
 exports.A = A;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_web_1 = require("../../hooks/index.web");
-function A({ className, children, onPress, onClick, disabled, ref, style, ...rest }) {
+function A({ className, children, disabled, loading, ref, style, testID, accessibilityLabel, ...rest }) {
     const cn = (0, index_web_1.useCn)();
-    const { onAction } = (0, index_web_1.useAction)({
-        onClick,
-        onPress,
-    });
-    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", disabled: disabled, className: cn('cursor-pointer', disabled && 'opacity-60', className), onClick: onAction, style: style, ...rest, children: children }));
+    const { eventHandlers } = (0, index_web_1.useInteractiveState)({ ...rest, disabled });
+    const isDisabled = Boolean(disabled || loading);
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", disabled: disabled, className: cn('cursor-pointer', disabled && 'opacity-60', className), style: style, "aria-disabled": isDisabled || undefined, "aria-busy": loading || undefined, "aria-label": accessibilityLabel, "data-testid": testID, ...rest, ...eventHandlers, children: children }));
 }
 exports.Action = A;

package/dist/cjs/components/e/e.native.js

@@ -6,18 +6,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
 const index_native_1 = require("../../hooks/index.native");
 const index_native_2 = require("../t/index.native");
-function E({ className, children, onIn, onOut, onClick, onPress, ref, style, ...rest }) {
+function E({ className, children, ref, style, ...rest }) {
     const cn = (0, index_native_1.useCn)();
-    const { onAction } = (0, index_native_1.useAction)({
-        onClick,
-        onPress,
-    });
-    const { onPress: onHoverOrPress } = (0, index_native_1.useOnHoverOrPress)({ onIn, onOut });
-    const handleOnPress = () => {
-        onAction();
-        onHoverOrPress();
-        return false;
-    };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, className: cn(className), onStartShouldSetResponder: handleOnPress, style: style, ...rest, children: typeof children === 'string' ? (0, jsx_runtime_1.jsx)(index_native_2.T, { children: children }) : children }));
+    const { eventHandlers } = (0, index_native_1.useInteractiveState)(rest);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, className: cn(className), style: style, ...rest, ...eventHandlers, children: typeof children === 'string' ? (0, jsx_runtime_1.jsx)(index_native_2.T, { children: children }) : children }));
 }
 exports.Element = E;

package/dist/cjs/components/e/e.web.js

@@ -4,13 +4,9 @@ exports.Element = void 0;
 exports.E = E;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_web_1 = require("../../hooks/index.web");
-function E({ className, children, onIn, onOut, onPress, onClick, ref, style, ...rest }) {
+function E({ className, children, ref, style, ...rest }) {
     const cn = (0, index_web_1.useCn)();
-    const { onAction } = (0, index_web_1.useAction)({
-        onClick,
-        onPress,
-    });
-    const { onMouseEnter, onMouseLeave } = (0, index_web_1.useOnHoverOrPress)({ onIn, onOut });
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cn(className), onClick: onAction, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: style, ...rest, children: children }));
+    const { eventHandlers } = (0, index_web_1.useInteractiveState)(rest);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cn(className), style: style, ...rest, ...eventHandlers, children: children }));
 }
 exports.Element = E;

package/dist/cjs/components/l/l.web.js

@@ -3,15 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 exports.L = L;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const index_native_1 = require("../../hooks/index.native");
 const index_web_1 = require("../../hooks/index.web");
-function L({ className, children, to, href, onClick, onPress, preventDefault, ref, style, ...rest }) {
+function L({ className, children, to, href, preventDefault, ref, style, ...rest }) {
     const cn = (0, index_web_1.useCn)();
-    const { onAction } = (0, index_native_1.useAction)({
-        onClick,
-        onPress,
-    });
+    const { eventHandlers } = (0, index_web_1.useInteractiveState)(rest);
     const resolvedHref = href ?? to ?? '#';
-    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), onClick: onAction, style: style, ...rest, children: children }));
+    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), style: style, ...rest, ...eventHandlers, children: children }));
 }
 exports.Link = L;

package/dist/cjs/components/t/t.native.js

@@ -5,12 +5,9 @@ exports.T = T;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
 const index_native_1 = require("../../hooks/index.native");
-function T({ className, children, onClick, onPress, ref, ...rest }) {
+function T({ className, children, ref, ...rest }) {
     const cn = (0, index_native_1.useCn)();
-    const { onAction } = (0, index_native_1.useAction)({
-        onClick,
-        onPress,
-    });
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, className: cn('leading-relaxed', className), onPress: onAction, ...rest, children: children }));
+    const { eventHandlers } = (0, index_native_1.useInteractiveState)(rest);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, className: cn('leading-relaxed', className), ...rest, ...eventHandlers, children: children }));
 }
 exports.Text = T;

package/dist/cjs/components/t/t.web.js

@@ -4,13 +4,10 @@ exports.Text = void 0;
 exports.T = T;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_web_1 = require("../../hooks/index.web");
-function T({ className, children, as = 'span', onClick, onPress, ref, ...rest }) {
+function T({ className, children, as = 'span', ref, ...rest }) {
     const cn = (0, index_web_1.useCn)();
-    const { onAction } = (0, index_web_1.useAction)({
-        onClick,
-        onPress,
-    });
+    const { eventHandlers } = (0, index_web_1.useInteractiveState)(rest);
     const Comp = as;
-    return ((0, jsx_runtime_1.jsx)(Comp, { ref: ref, className: cn('leading-relaxed', className), onClick: onAction, ...rest, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Comp, { ref: ref, className: cn('leading-relaxed', className), ...rest, ...eventHandlers, children: children }));
 }
 exports.Text = T;

package/dist/cjs/hooks/index.js

@@ -14,9 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useAction/useAction.web"), exports);
 __exportStar(require("./useCn"), exports);
 __exportStar(require("./useInteractiveState/useInteractiveState.web"), exports);
 __exportStar(require("./useOnChange"), exports);
-__exportStar(require("./useOnHoverOrPress"), exports);
 __exportStar(require("./useProps"), exports);

package/dist/cjs/hooks/index.native.js

@@ -14,9 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useAction/useAction.native"), exports);
 __exportStar(require("./useCn"), exports);
 __exportStar(require("./useInteractiveState/useInteractiveState.native"), exports);
 __exportStar(require("./useOnChange"), exports);
-__exportStar(require("./useOnHoverOrPress"), exports);
 __exportStar(require("./useProps"), exports);

package/dist/cjs/hooks/index.web.js

@@ -14,9 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useAction/useAction.web"), exports);
 __exportStar(require("./useCn"), exports);
 __exportStar(require("./useInteractiveState/useInteractiveState.web"), exports);
 __exportStar(require("./useOnChange"), exports);
-__exportStar(require("./useOnHoverOrPress"), exports);
 __exportStar(require("./useProps"), exports);

package/dist/cjs/hooks/useInteractiveState/useInteractiveState.native.js

@@ -3,29 +3,89 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInteractiveState = useInteractiveState;
 const react_1 = require("react");
 function useInteractiveState(options = {}) {
-    const { disabled } = options;
+    const { disabled, onBlur, onClick, onFocus, onPress, onIn, onOut } = options;
+    const [hovered, setHovered] = (0, react_1.useState)(false);
     const [pressed, setPressed] = (0, react_1.useState)(false);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const offOn = (0, react_1.useRef)('off');
     const state = disabled
         ? 'disabled'
         : pressed
             ? 'pressed'
-            : 'idle';
+            : hovered
+                ? 'hovered'
+                : focused
+                    ? 'focused'
+                    : 'idle';
     const dataAttrs = {
         'data-state': state,
-        'data-pressed': pressed ? 'true' : 'false',
         'data-disabled': disabled ? 'true' : 'false',
+        'data-focused': focused ? 'true' : 'false',
+        'data-hovered': hovered ? 'true' : 'false',
+        'data-pressed': pressed ? 'true' : 'false',
     };
     const eventHandlers = {
+        onBlur: (e) => {
+            if (disabled) {
+                return;
+            }
+            onBlur?.(e);
+            setFocused(false);
+            setPressed(false);
+        },
+        onFocus: (e) => {
+            if (disabled) {
+                return;
+            }
+            onFocus?.(e);
+            setFocused(true);
+        },
+        onIn: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onIn', typeof onIn, e);
+            onIn?.(e);
+        },
+        onPress: (e) => {
+            if (disabled) {
+                return;
+            }
+            if ((onIn || onOut) && offOn.current === 'off') {
+                offOn.current = 'on';
+                onIn?.(e);
+            }
+            if ((onIn || onOut) && offOn.current === 'on') {
+                offOn.current = 'off';
+                onOut?.(e);
+            }
+            if (onPress) {
+                onPress?.(e);
+                return;
+            }
+            onClick?.(e);
+        },
         onPressIn: (e) => {
-            if (disabled)
+            if (disabled) {
                 return;
+            }
+            onIn?.(e);
             setPressed(true);
         },
         onPressOut: (e) => {
-            if (disabled)
+            if (disabled) {
                 return;
+            }
+            onOut?.(e);
             setPressed(false);
         },
+        onOut: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onOut', typeof onOut, e);
+            onOut?.(e);
+        },
     };
     return { state, dataAttrs, eventHandlers };
 }

package/dist/cjs/hooks/useInteractiveState/useInteractiveState.web.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInteractiveState = useInteractiveState;
 const react_1 = require("react");
 function useInteractiveState(options = {}) {
-    const { disabled } = options;
+    const { disabled, onBlur, onClick, onPress, onFocus, onIn, onOut } = options;
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [pressed, setPressed] = (0, react_1.useState)(false);
     const [focused, setFocused] = (0, react_1.useState)(false);
@@ -18,44 +18,85 @@ function useInteractiveState(options = {}) {
                     : 'idle';
     const dataAttrs = {
         'data-state': state,
+        'data-disabled': disabled ? 'true' : 'false',
+        'data-focused': focused ? 'true' : 'false',
         'data-hovered': hovered ? 'true' : 'false',
         'data-pressed': pressed ? 'true' : 'false',
-        'data-focused': focused ? 'true' : 'false',
-        'data-disabled': disabled ? 'true' : 'false',
     };
     const eventHandlers = {
-        onMouseEnter: () => {
-            if (disabled)
+        onBlur: (e) => {
+            if (disabled) {
                 return;
-            setHovered(true);
+            }
+            console.log('[DEBUG] onBlur', typeof onBlur, e);
+            onBlur?.(e);
+            setFocused(false);
+            setPressed(false);
+            setHovered(false);
         },
-        onMouseLeave: () => {
-            if (disabled)
+        onClick: (e) => {
+            if (disabled) {
                 return;
-            setHovered(false);
-            setPressed(false);
+            }
+            console.log('[DEBUG] onClick', typeof onClick, e);
+            if (onClick) {
+                onClick?.(e);
+                return;
+            }
+            onPress?.(e);
+        },
+        onFocus: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onFocus', typeof onFocus, e);
+            onFocus?.(e);
+            setFocused(true);
+        },
+        onIn: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onIn', typeof onIn, e);
+            onIn?.(e);
         },
         onMouseDown: (e) => {
-            if (disabled || e.button !== 0)
+            if (disabled || e.button !== 0) {
                 return;
+            }
+            console.log('[DEBUG] onMouseDown', e);
             setPressed(true);
         },
-        onMouseUp: () => {
-            if (disabled)
+        onMouseEnter: (e) => {
+            if (disabled) {
                 return;
-            setPressed(false);
+            }
+            console.log('[DEBUG] onMouseEnter', typeof onIn, e);
+            onIn?.(e);
+            setHovered(true);
         },
-        onFocus: () => {
-            if (disabled)
+        onMouseLeave: (e) => {
+            if (disabled) {
                 return;
-            setFocused(true);
+            }
+            console.log('[DEBUG] onMouseLeave', typeof onOut, e);
+            onOut?.(e);
+            setHovered(false);
+            setPressed(false);
         },
-        onBlur: () => {
-            if (disabled)
+        onMouseUp: (e) => {
+            if (disabled) {
                 return;
-            setFocused(false);
+            }
+            console.log('[DEBUG] onMouseUp', e);
             setPressed(false);
-            setHovered(false);
+        },
+        onOut: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onOut', typeof onOut, e);
+            onOut?.(e);
         },
     };
     return { state, dataAttrs, eventHandlers };

package/dist/esm/components/a/a.native.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pressable } from 'react-native';
-import { useAction, useCn } from '../../hooks/index.native';
+import { useCn, useInteractiveState } from '../../hooks/index.native';
 import { E } from '../e/index.native';
-export function A({ className, children, onPress, onClick, disabled, ref, style, ...rest }) {
+export function A({ accessibilityLabel, accessibilityRole, accessibilityState, className, children, loading, disabled, ref, style, ...rest }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
-    return (_jsx(Pressable, { ref: ref, onPress: onAction, disabled: disabled, children: _jsx(E, { className: cn(disabled && 'opacity-60', className), style: style, ...rest, children: children }) }));
+    const { eventHandlers } = useInteractiveState({ ...rest, disabled });
+    const isDisabled = Boolean(disabled || loading);
+    return (_jsx(Pressable, { ref: ref, disabled: isDisabled, accessibilityLabel: accessibilityLabel, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState, ...eventHandlers, children: _jsx(E, { className: cn(disabled && 'opacity-60', className), style: style, ...rest, children: children }) }));
 }
 export const Action = A;

package/dist/esm/components/a/a.web.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAction, useCn } from '../../hooks/index.web';
-export function A({ className, children, onPress, onClick, disabled, ref, style, ...rest }) {
+import { useCn, useInteractiveState } from '../../hooks/index.web';
+export function A({ className, children, disabled, loading, ref, style, testID, accessibilityLabel, ...rest }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
-    return (_jsx("button", { ref: ref, type: "button", disabled: disabled, className: cn('cursor-pointer', disabled && 'opacity-60', className), onClick: onAction, style: style, ...rest, children: children }));
+    const { eventHandlers } = useInteractiveState({ ...rest, disabled });
+    const isDisabled = Boolean(disabled || loading);
+    return (_jsx("button", { ref: ref, type: "button", disabled: disabled, className: cn('cursor-pointer', disabled && 'opacity-60', className), style: style, "aria-disabled": isDisabled || undefined, "aria-busy": loading || undefined, "aria-label": accessibilityLabel, "data-testid": testID, ...rest, ...eventHandlers, children: children }));
 }
 export const Action = A;

package/dist/esm/components/e/e.native.js

@@ -1,19 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
-import { useAction, useCn, useOnHoverOrPress } from '../../hooks/index.native';
+import { useCn, useInteractiveState } from '../../hooks/index.native';
 import { T } from '../t/index.native';
-export function E({ className, children, onIn, onOut, onClick, onPress, ref, style, ...rest }) {
+export function E({ className, children, ref, style, ...rest }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
-    const { onPress: onHoverOrPress } = useOnHoverOrPress({ onIn, onOut });
-    const handleOnPress = () => {
-        onAction();
-        onHoverOrPress();
-        return false;
-    };
-    return (_jsx(View, { ref: ref, className: cn(className), onStartShouldSetResponder: handleOnPress, style: style, ...rest, children: typeof children === 'string' ? _jsx(T, { children: children }) : children }));
+    const { eventHandlers } = useInteractiveState(rest);
+    return (_jsx(View, { ref: ref, className: cn(className), style: style, ...rest, ...eventHandlers, children: typeof children === 'string' ? _jsx(T, { children: children }) : children }));
 }
 export const Element = E;

package/dist/esm/components/e/e.web.js

@@ -1,12 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAction, useCn, useOnHoverOrPress } from '../../hooks/index.web';
-export function E({ className, children, onIn, onOut, onPress, onClick, ref, style, ...rest }) {
+import { useCn, useInteractiveState } from '../../hooks/index.web';
+export function E({ className, children, ref, style, ...rest }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
-    const { onMouseEnter, onMouseLeave } = useOnHoverOrPress({ onIn, onOut });
-    return (_jsx("div", { ref: ref, className: cn(className), onClick: onAction, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: style, ...rest, children: children }));
+    const { eventHandlers } = useInteractiveState(rest);
+    return (_jsx("div", { ref: ref, className: cn(className), style: style, ...rest, ...eventHandlers, children: children }));
 }
 export const Element = E;

package/dist/esm/components/l/l.web.js

@@ -1,13 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAction } from '../../hooks/index.native';
-import { useCn } from '../../hooks/index.web';
-export function L({ className, children, to, href, onClick, onPress, preventDefault, ref, style, ...rest }) {
+import { useCn, useInteractiveState } from '../../hooks/index.web';
+export function L({ className, children, to, href, preventDefault, ref, style, ...rest }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
+    const { eventHandlers } = useInteractiveState(rest);
     const resolvedHref = href ?? to ?? '#';
-    return (_jsx("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), onClick: onAction, style: style, ...rest, children: children }));
+    return (_jsx("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), style: style, ...rest, ...eventHandlers, children: children }));
 }
 export const Link = L;

package/dist/esm/components/t/t.native.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text as RNText } from 'react-native';
-import { useAction, useCn } from '../../hooks/index.native';
-export function T({ className, children, onClick, onPress, ref, ...rest }) {
+import { useCn, useInteractiveState } from '../../hooks/index.native';
+export function T({ className, children, ref, ...rest }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
-    return (_jsx(RNText, { ref: ref, className: cn('leading-relaxed', className), onPress: onAction, ...rest, children: children }));
+    const { eventHandlers } = useInteractiveState(rest);
+    return (_jsx(RNText, { ref: ref, className: cn('leading-relaxed', className), ...rest, ...eventHandlers, children: children }));
 }
 export const Text = T;

package/dist/esm/components/t/t.web.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAction, useCn } from '../../hooks/index.web';
-export function T({ className, children, as = 'span', onClick, onPress, ref, ...rest }) {
+import { useCn, useInteractiveState } from '../../hooks/index.web';
+export function T({ className, children, as = 'span', ref, ...rest }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
+    const { eventHandlers } = useInteractiveState(rest);
     const Comp = as;
-    return (_jsx(Comp, { ref: ref, className: cn('leading-relaxed', className), onClick: onAction, ...rest, children: children }));
+    return (_jsx(Comp, { ref: ref, className: cn('leading-relaxed', className), ...rest, ...eventHandlers, children: children }));
 }
 export const Text = T;

package/dist/esm/hooks/index.js

@@ -1,6 +1,4 @@
-export * from './useAction/useAction.web';
 export * from './useCn';
 export * from './useInteractiveState/useInteractiveState.web';
 export * from './useOnChange';
-export * from './useOnHoverOrPress';
 export * from './useProps';

package/dist/esm/hooks/index.native.js

@@ -1,6 +1,4 @@
-export * from './useAction/useAction.native';
 export * from './useCn';
 export * from './useInteractiveState/useInteractiveState.native';
 export * from './useOnChange';
-export * from './useOnHoverOrPress';
 export * from './useProps';

package/dist/esm/hooks/index.web.js

@@ -1,6 +1,4 @@
-export * from './useAction/useAction.web';
 export * from './useCn';
 export * from './useInteractiveState/useInteractiveState.web';
 export * from './useOnChange';
-export * from './useOnHoverOrPress';
 export * from './useProps';

package/dist/esm/hooks/useInteractiveState/useInteractiveState.native.js

@@ -1,28 +1,88 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 export function useInteractiveState(options = {}) {
-    const { disabled } = options;
+    const { disabled, onBlur, onClick, onFocus, onPress, onIn, onOut } = options;
+    const [hovered, setHovered] = useState(false);
     const [pressed, setPressed] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const offOn = useRef('off');
     const state = disabled
         ? 'disabled'
         : pressed
             ? 'pressed'
-            : 'idle';
+            : hovered
+                ? 'hovered'
+                : focused
+                    ? 'focused'
+                    : 'idle';
     const dataAttrs = {
         'data-state': state,
-        'data-pressed': pressed ? 'true' : 'false',
         'data-disabled': disabled ? 'true' : 'false',
+        'data-focused': focused ? 'true' : 'false',
+        'data-hovered': hovered ? 'true' : 'false',
+        'data-pressed': pressed ? 'true' : 'false',
     };
     const eventHandlers = {
+        onBlur: (e) => {
+            if (disabled) {
+                return;
+            }
+            onBlur?.(e);
+            setFocused(false);
+            setPressed(false);
+        },
+        onFocus: (e) => {
+            if (disabled) {
+                return;
+            }
+            onFocus?.(e);
+            setFocused(true);
+        },
+        onIn: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onIn', typeof onIn, e);
+            onIn?.(e);
+        },
+        onPress: (e) => {
+            if (disabled) {
+                return;
+            }
+            if ((onIn || onOut) && offOn.current === 'off') {
+                offOn.current = 'on';
+                onIn?.(e);
+            }
+            if ((onIn || onOut) && offOn.current === 'on') {
+                offOn.current = 'off';
+                onOut?.(e);
+            }
+            if (onPress) {
+                onPress?.(e);
+                return;
+            }
+            onClick?.(e);
+        },
         onPressIn: (e) => {
-            if (disabled)
+            if (disabled) {
                 return;
+            }
+            onIn?.(e);
             setPressed(true);
         },
         onPressOut: (e) => {
-            if (disabled)
+            if (disabled) {
                 return;
+            }
+            onOut?.(e);
             setPressed(false);
         },
+        onOut: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onOut', typeof onOut, e);
+            onOut?.(e);
+        },
     };
     return { state, dataAttrs, eventHandlers };
 }