@react-xp/aeiou 0.1.0-beta.7 → 0.1.0-beta.8

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

@@ -6,7 +6,7 @@ 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 D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, children, ref, ...rest }) {
+function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, children, ref, containerStyle, contentStyle, ...rest }) {
     const cn = (0, index_native_1.useCn)();
     const placementClasses = {
         center: 'items-center justify-center',
@@ -23,6 +23,6 @@ function D({ open, onOpenChange, placement = 'center', className, backdropClassN
             rest.onRequestClose?.(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...rest, children: (0, jsx_runtime_1.jsx)(index_native_2.E, { className: containerClasses, children: (0, jsx_runtime_1.jsx)(index_native_2.E, { ref: ref, className: contentClasses, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...rest, children: (0, jsx_runtime_1.jsx)(index_native_2.E, { className: containerClasses, style: containerStyle, children: (0, jsx_runtime_1.jsx)(index_native_2.E, { ref: ref, className: contentClasses, style: contentStyle, children: children }) }) }));
 }
 exports.Dialog = D;

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

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_dom_1 = require("react-dom");
 const index_web_1 = require("../../hooks/index.web");
 const index_web_2 = require("../e/index.web");
-function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, closeOnBackdropClick = true, children, ref, style, ...rest }) {
+function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, closeOnBackdropClick = true, children, ref, containerStyle, contentStyle, ...rest }) {
     const cn = (0, index_web_1.useCn)();
     if (typeof document === 'undefined')
         return null;
@@ -28,8 +28,8 @@ function D({ open, onOpenChange, placement = 'center', className, backdropClassN
     };
     const backdropClasses = cn('fixed inset-0 z-50 flex bg-black/40', placementClasses[placement], containerClassName, backdropClassName);
     const contentClasses = cn('relative max-h-[90vh] w-full max-w-lg overflow-auto rounded-lg bg-background p-4 shadow-lg', placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '', placement === 'bottom' || placement === 'top' ? 'max-w-none' : '', className, contentClassName);
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(index_web_2.E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, 
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(index_web_2.E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, style: containerStyle, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, 
             // biome-ignore lint/a11y/useSemanticElements: <explanation>
-            role: "dialog", "aria-modal": "true", className: contentClasses, style: style, ...rest, children: children }) }), document.body);
+            role: "dialog", "aria-modal": "true", className: contentClasses, style: contentStyle, ...rest, children: children }) }), document.body);
 }
 exports.Dialog = D;

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

@@ -6,14 +6,16 @@ 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, onPress, onClick, ref, style, ...rest }) {
+function E({ className, children, onIn, onOut, onClick, onPress, 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 }));

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

@@ -4,12 +4,13 @@ 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, onPress, onClick, ref, style, ...rest }) {
+function E({ className, children, onIn, onOut, onPress, onClick, ref, style, ...rest }) {
     const cn = (0, index_web_1.useCn)();
     const { onAction } = (0, index_web_1.useAction)({
         onClick,
         onPress,
     });
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cn(className), onClick: onAction, style: style, ...rest, children: children }));
+    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 }));
 }
 exports.Element = E;

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

@@ -19,12 +19,6 @@ function I({ className, value, defaultValue, placeholder, onChange, onChangeValu
         keyboardType,
         type,
     });
-    const handleChange = (event) => {
-        if (onChange)
-            onChange(event);
-        if (onChangeValue)
-            onChangeValue(event.nativeEvent.text);
-    };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value, defaultValue: defaultValue, placeholder: placeholder, onChange: handleChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, style: style, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value, defaultValue: defaultValue, placeholder: placeholder, onChange: handleOnChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, style: style, ...rest }));
 }
 exports.Input = I;

package/dist/cjs/hooks/index.js

@@ -18,4 +18,5 @@ __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

@@ -18,4 +18,5 @@ __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

@@ -18,4 +18,5 @@ __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/useOnHoverOrPress.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnHoverOrPress = void 0;
+const react_1 = require("react");
+const useOnHoverOrPress = ({ onIn, onOut }) => {
+    const value = (0, react_1.useRef)('on');
+    return (0, react_1.useMemo)(() => ({
+        onMouseEnter: onIn,
+        onMouseLeave: onOut,
+        onPress: (event) => {
+            if (value.current === 'on') {
+                value.current = 'off';
+                onOut?.(event);
+                return;
+            }
+            value.current = 'on';
+            onIn?.(event);
+        },
+    }), [onIn, onOut]);
+};
+exports.useOnHoverOrPress = useOnHoverOrPress;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Modal } from 'react-native';
 import { useCn } from '../../hooks/index.native';
 import { E } from '../e/index.native';
-export function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, children, ref, ...rest }) {
+export function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, children, ref, containerStyle, contentStyle, ...rest }) {
     const cn = useCn();
     const placementClasses = {
         center: 'items-center justify-center',
@@ -19,6 +19,6 @@ export function D({ open, onOpenChange, placement = 'center', className, backdro
             rest.onRequestClose?.(e);
         }
     };
-    return (_jsx(Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...rest, children: _jsx(E, { className: containerClasses, children: _jsx(E, { ref: ref, className: contentClasses, children: children }) }) }));
+    return (_jsx(Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...rest, children: _jsx(E, { className: containerClasses, style: containerStyle, children: _jsx(E, { ref: ref, className: contentClasses, style: contentStyle, children: children }) }) }));
 }
 export const Dialog = D;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
 import { useCn } from '../../hooks/index.web';
 import { E } from '../e/index.web';
-export function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, closeOnBackdropClick = true, children, ref, style, ...rest }) {
+export function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, closeOnBackdropClick = true, children, ref, containerStyle, contentStyle, ...rest }) {
     const cn = useCn();
     if (typeof document === 'undefined')
         return null;
@@ -24,8 +24,8 @@ export function D({ open, onOpenChange, placement = 'center', className, backdro
     };
     const backdropClasses = cn('fixed inset-0 z-50 flex bg-black/40', placementClasses[placement], containerClassName, backdropClassName);
     const contentClasses = cn('relative max-h-[90vh] w-full max-w-lg overflow-auto rounded-lg bg-background p-4 shadow-lg', placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '', placement === 'bottom' || placement === 'top' ? 'max-w-none' : '', className, contentClassName);
-    return createPortal(_jsx(E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, children: _jsx("div", { ref: ref, 
+    return createPortal(_jsx(E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, style: containerStyle, children: _jsx("div", { ref: ref, 
             // biome-ignore lint/a11y/useSemanticElements: <explanation>
-            role: "dialog", "aria-modal": "true", className: contentClasses, style: style, ...rest, children: children }) }), document.body);
+            role: "dialog", "aria-modal": "true", className: contentClasses, style: contentStyle, ...rest, children: children }) }), document.body);
 }
 export const Dialog = D;

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

@@ -1,15 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
-import { useAction, useCn } from '../../hooks/index.native';
+import { useAction, useCn, useOnHoverOrPress } from '../../hooks/index.native';
 import { T } from '../t/index.native';
-export function E({ className, children, onPress, onClick, ref, style, ...rest }) {
+export function E({ className, children, onIn, onOut, onClick, onPress, 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 }));

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAction, useCn } from '../../hooks/index.web';
-export function E({ className, children, onPress, onClick, ref, style, ...rest }) {
+import { useAction, useCn, useOnHoverOrPress } from '../../hooks/index.web';
+export function E({ className, children, onIn, onOut, onPress, onClick, ref, style, ...rest }) {
     const cn = useCn();
     const { onAction } = useAction({
         onClick,
         onPress,
     });
-    return (_jsx("div", { ref: ref, className: cn(className), onClick: onAction, style: style, ...rest, children: children }));
+    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 }));
 }
 export const Element = E;

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

@@ -15,12 +15,6 @@ export function I({ className, value, defaultValue, placeholder, onChange, onCha
         keyboardType,
         type,
     });
-    const handleChange = (event) => {
-        if (onChange)
-            onChange(event);
-        if (onChangeValue)
-            onChangeValue(event.nativeEvent.text);
-    };
-    return (_jsx(TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value, defaultValue: defaultValue, placeholder: placeholder, onChange: handleChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, style: style, ...rest }));
+    return (_jsx(TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value, defaultValue: defaultValue, placeholder: placeholder, onChange: handleOnChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, style: style, ...rest }));
 }
 export const Input = I;

package/dist/esm/hooks/index.js

@@ -2,4 +2,5 @@ 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

@@ -2,4 +2,5 @@ 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

@@ -2,4 +2,5 @@ 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/useOnHoverOrPress.js

@@ -0,0 +1,17 @@
+import { useMemo, useRef } from 'react';
+export const useOnHoverOrPress = ({ onIn, onOut }) => {
+    const value = useRef('on');
+    return useMemo(() => ({
+        onMouseEnter: onIn,
+        onMouseLeave: onOut,
+        onPress: (event) => {
+            if (value.current === 'on') {
+                value.current = 'off';
+                onOut?.(event);
+                return;
+            }
+            value.current = 'on';
+            onIn?.(event);
+        },
+    }), [onIn, onOut]);
+};

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

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("nativewind/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 D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, children, ref, ...rest }) {
+function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, children, ref, containerStyle, contentStyle, ...rest }) {
     const cn = (0, index_native_1.useCn)();
     const placementClasses = {
         center: 'items-center justify-center',
@@ -23,6 +23,6 @@ function D({ open, onOpenChange, placement = 'center', className, backdropClassN
             rest.onRequestClose?.(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...rest, children: (0, jsx_runtime_1.jsx)(index_native_2.E, { className: containerClasses, children: (0, jsx_runtime_1.jsx)(index_native_2.E, { ref: ref, className: contentClasses, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...rest, children: (0, jsx_runtime_1.jsx)(index_native_2.E, { className: containerClasses, style: containerStyle, children: (0, jsx_runtime_1.jsx)(index_native_2.E, { ref: ref, className: contentClasses, style: contentStyle, children: children }) }) }));
 }
 exports.Dialog = D;

package/dist/native/cjs/components/d/d.web.js

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("nativewind/jsx-runtime");
 const react_dom_1 = require("react-dom");
 const index_web_1 = require("../../hooks/index.web");
 const index_web_2 = require("../e/index.web");
-function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, closeOnBackdropClick = true, children, ref, style, ...rest }) {
+function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, closeOnBackdropClick = true, children, ref, containerStyle, contentStyle, ...rest }) {
     const cn = (0, index_web_1.useCn)();
     if (typeof document === 'undefined')
         return null;
@@ -28,8 +28,8 @@ function D({ open, onOpenChange, placement = 'center', className, backdropClassN
     };
     const backdropClasses = cn('fixed inset-0 z-50 flex bg-black/40', placementClasses[placement], containerClassName, backdropClassName);
     const contentClasses = cn('relative max-h-[90vh] w-full max-w-lg overflow-auto rounded-lg bg-background p-4 shadow-lg', placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '', placement === 'bottom' || placement === 'top' ? 'max-w-none' : '', className, contentClassName);
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(index_web_2.E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, 
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(index_web_2.E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, style: containerStyle, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, 
             // biome-ignore lint/a11y/useSemanticElements: <explanation>
-            role: "dialog", "aria-modal": "true", className: contentClasses, style: style, ...rest, children: children }) }), document.body);
+            role: "dialog", "aria-modal": "true", className: contentClasses, style: contentStyle, ...rest, children: children }) }), document.body);
 }
 exports.Dialog = D;

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

@@ -6,14 +6,16 @@ const jsx_runtime_1 = require("nativewind/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, onPress, onClick, ref, style, ...rest }) {
+function E({ className, children, onIn, onOut, onClick, onPress, 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 }));

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

@@ -4,12 +4,13 @@ exports.Element = void 0;
 exports.E = E;
 const jsx_runtime_1 = require("nativewind/jsx-runtime");
 const index_web_1 = require("../../hooks/index.web");
-function E({ className, children, onPress, onClick, ref, style, ...rest }) {
+function E({ className, children, onIn, onOut, onPress, onClick, ref, style, ...rest }) {
     const cn = (0, index_web_1.useCn)();
     const { onAction } = (0, index_web_1.useAction)({
         onClick,
         onPress,
     });
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cn(className), onClick: onAction, style: style, ...rest, children: children }));
+    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 }));
 }
 exports.Element = E;

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

@@ -19,12 +19,6 @@ function I({ className, value, defaultValue, placeholder, onChange, onChangeValu
         keyboardType,
         type,
     });
-    const handleChange = (event) => {
-        if (onChange)
-            onChange(event);
-        if (onChangeValue)
-            onChangeValue(event.nativeEvent.text);
-    };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value, defaultValue: defaultValue, placeholder: placeholder, onChange: handleChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, style: style, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value, defaultValue: defaultValue, placeholder: placeholder, onChange: handleOnChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, style: style, ...rest }));
 }
 exports.Input = I;

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

@@ -18,4 +18,5 @@ __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/native/cjs/hooks/index.native.js

@@ -18,4 +18,5 @@ __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/native/cjs/hooks/index.web.js

@@ -18,4 +18,5 @@ __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/native/cjs/hooks/useOnHoverOrPress.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnHoverOrPress = void 0;
+const react_1 = require("react");
+const useOnHoverOrPress = ({ onIn, onOut }) => {
+    const value = (0, react_1.useRef)('on');
+    return (0, react_1.useMemo)(() => ({
+        onMouseEnter: onIn,
+        onMouseLeave: onOut,
+        onPress: (event) => {
+            if (value.current === 'on') {
+                value.current = 'off';
+                onOut?.(event);
+                return;
+            }
+            value.current = 'on';
+            onIn?.(event);
+        },
+    }), [onIn, onOut]);
+};
+exports.useOnHoverOrPress = useOnHoverOrPress;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { Modal } from 'react-native';
 import { useCn } from '../../hooks/index.native';
 import { E } from '../e/index.native';
-export function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, children, ref, ...rest }) {
+export function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, children, ref, containerStyle, contentStyle, ...rest }) {
     const cn = useCn();
     const placementClasses = {
         center: 'items-center justify-center',
@@ -19,6 +19,6 @@ export function D({ open, onOpenChange, placement = 'center', className, backdro
             rest.onRequestClose?.(e);
         }
     };
-    return (_jsx(Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...rest, children: _jsx(E, { className: containerClasses, children: _jsx(E, { ref: ref, className: contentClasses, children: children }) }) }));
+    return (_jsx(Modal, { visible: open, animationType: "slide", transparent: true, onRequestClose: handleRequestClose, ...rest, children: _jsx(E, { className: containerClasses, style: containerStyle, children: _jsx(E, { ref: ref, className: contentClasses, style: contentStyle, children: children }) }) }));
 }
 export const Dialog = D;

package/dist/native/esm/components/d/d.web.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { createPortal } from 'react-dom';
 import { useCn } from '../../hooks/index.web';
 import { E } from '../e/index.web';
-export function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, closeOnBackdropClick = true, children, ref, style, ...rest }) {
+export function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, closeOnBackdropClick = true, children, ref, containerStyle, contentStyle, ...rest }) {
     const cn = useCn();
     if (typeof document === 'undefined')
         return null;
@@ -24,8 +24,8 @@ export function D({ open, onOpenChange, placement = 'center', className, backdro
     };
     const backdropClasses = cn('fixed inset-0 z-50 flex bg-black/40', placementClasses[placement], containerClassName, backdropClassName);
     const contentClasses = cn('relative max-h-[90vh] w-full max-w-lg overflow-auto rounded-lg bg-background p-4 shadow-lg', placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '', placement === 'bottom' || placement === 'top' ? 'max-w-none' : '', className, contentClassName);
-    return createPortal(_jsx(E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, children: _jsx("div", { ref: ref, 
+    return createPortal(_jsx(E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, style: containerStyle, children: _jsx("div", { ref: ref, 
             // biome-ignore lint/a11y/useSemanticElements: <explanation>
-            role: "dialog", "aria-modal": "true", className: contentClasses, style: style, ...rest, children: children }) }), document.body);
+            role: "dialog", "aria-modal": "true", className: contentClasses, style: contentStyle, ...rest, children: children }) }), document.body);
 }
 export const Dialog = D;

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

@@ -1,15 +1,17 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { View } from 'react-native';
-import { useAction, useCn } from '../../hooks/index.native';
+import { useAction, useCn, useOnHoverOrPress } from '../../hooks/index.native';
 import { T } from '../t/index.native';
-export function E({ className, children, onPress, onClick, ref, style, ...rest }) {
+export function E({ className, children, onIn, onOut, onClick, onPress, 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 }));

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { useAction, useCn } from '../../hooks/index.web';
-export function E({ className, children, onPress, onClick, ref, style, ...rest }) {
+import { useAction, useCn, useOnHoverOrPress } from '../../hooks/index.web';
+export function E({ className, children, onIn, onOut, onPress, onClick, ref, style, ...rest }) {
     const cn = useCn();
     const { onAction } = useAction({
         onClick,
         onPress,
     });
-    return (_jsx("div", { ref: ref, className: cn(className), onClick: onAction, style: style, ...rest, children: children }));
+    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 }));
 }
 export const Element = E;

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

@@ -15,12 +15,6 @@ export function I({ className, value, defaultValue, placeholder, onChange, onCha
         keyboardType,
         type,
     });
-    const handleChange = (event) => {
-        if (onChange)
-            onChange(event);
-        if (onChangeValue)
-            onChangeValue(event.nativeEvent.text);
-    };
-    return (_jsx(TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value, defaultValue: defaultValue, placeholder: placeholder, onChange: handleChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, style: style, ...rest }));
+    return (_jsx(TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value, defaultValue: defaultValue, placeholder: placeholder, onChange: handleOnChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, style: style, ...rest }));
 }
 export const Input = I;

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { useMemo, useRef } from 'react';
+export const useOnHoverOrPress = ({ onIn, onOut }) => {
+    const value = useRef('on');
+    return useMemo(() => ({
+        onMouseEnter: onIn,
+        onMouseLeave: onOut,
+        onPress: (event) => {
+            if (value.current === 'on') {
+                value.current = 'off';
+                onOut?.(event);
+                return;
+            }
+            value.current = 'on';
+            onIn?.(event);
+        },
+    }), [onIn, onOut]);
+};