@react-xp/aeiou 0.1.0-rc.1 → 1.0.0-beta.0

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

@@ -5,12 +5,13 @@ exports.A = A;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
 const index_native_1 = require("../../hooks/index.native");
-function A({ className, children, onPress, onClick, disabled, 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.Pressable, { ref: ref, onPress: onAction, disabled: disabled, ...rest, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { className: cn(disabled && 'opacity-60', className), children: children }) }));
+const useCn_1 = require("../../hooks/useCn");
+const index_native_2 = require("../e/index.native");
+function A({ accessibilityLabel, accessibilityRole, accessibilityState, className, children, loading, ref, style, testId, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_native_1.useInteractiveHandlers)(restProps);
+    const { getStylesWithInteraction } = (0, index_native_1.useStyles)();
+    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, testID: testId, ...eventHandlers, ...getStylesWithInteraction({ disabled, style }), children: (0, jsx_runtime_1.jsx)(index_native_2.E, { className: cn(disabled && 'opacity-60', className), style: style, ...restProps, children: children }) }));
 }
 exports.Action = A;

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

@@ -4,12 +4,12 @@ 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, ...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, ...rest, children: children }));
+const useCn_1 = require("../../hooks/useCn");
+function A({ className, children, loading, ref, testId, accessibilityLabel, accessibilityRole, accessibilityState, style, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { getStyles } = (0, index_web_1.useStyles)();
+    const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
+    const isDisabled = Boolean(disabled || loading);
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", className: cn('cursor-pointer', disabled && 'opacity-60', className), "aria-disabled": isDisabled || undefined, "aria-busy": loading || undefined, "aria-label": accessibilityLabel, "data-testid": testId, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Action = A;

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

@@ -4,10 +4,10 @@ exports.Dialog = void 0;
 exports.D = D;
 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 }) {
-    const cn = (0, index_native_1.useCn)();
+const useCn_1 = require("../../hooks/useCn");
+const index_native_1 = require("../e/index.native");
+function D({ open, onOpenChange, placement = 'center', backdropClassName, backdropStyle, containerClassName, containerStyle, contentClassName, contentStyle, children, ref, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
     const placementClasses = {
         center: 'items-center justify-center',
         top: 'items-start justify-center',
@@ -16,13 +16,13 @@ function D({ open, onOpenChange, placement = 'center', className, backdropClassN
         right: 'items-stretch justify-end',
     };
     const containerClasses = cn('flex-1 bg-black/40 flex', placementClasses[placement], containerClassName, backdropClassName);
-    const contentClasses = cn('bg-background p-4 rounded-lg shadow-lg max-h-[90vh] w-full max-w-lg', placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '', placement === 'bottom' || placement === 'top' ? 'max-w-none' : '', className, contentClassName);
+    const contentClasses = cn('bg-background p-4 rounded-lg shadow-lg max-h-[90vh] w-full max-w-lg', placement === 'left' || placement === 'right' ? 'h-full max-h-none' : '', placement === 'bottom' || placement === 'top' ? 'max-w-none' : '', contentClassName);
     const handleRequestClose = (e) => {
         onOpenChange?.(false);
-        if (typeof rest.onRequestClose === 'function') {
-            rest.onRequestClose?.(e);
+        if (typeof restProps.onRequestClose === 'function') {
+            restProps.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, ...restProps, children: (0, jsx_runtime_1.jsx)(index_native_1.E, { className: containerClasses, style: { ...containerStyle, ...backdropStyle }, children: (0, jsx_runtime_1.jsx)(index_native_1.E, { ref: ref, className: contentClasses, style: contentStyle, children: children }) }) }));
 }
 exports.Dialog = D;

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

@@ -4,10 +4,10 @@ exports.Dialog = void 0;
 exports.D = D;
 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, ...rest }) {
-    const cn = (0, index_web_1.useCn)();
+const useCn_1 = require("../../hooks/useCn");
+const index_web_1 = require("../e/index.web");
+function D({ open, onOpenChange, placement = 'center', backdropClassName, backdropStyle, containerClassName, containerStyle, contentClassName, contentStyle, closeOnBackdropClick = true, children, ref, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
     if (typeof document === 'undefined')
         return null;
     if (!open)
@@ -27,7 +27,12 @@ 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)("dialog", { ref: ref, "aria-modal": "true", className: contentClasses, ...rest, children: children }) }), document.body);
+    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' : '', contentClassName);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(index_web_1.E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, style: {
+            ...(containerStyle || {}),
+            ...(backdropStyle || {}),
+        }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, 
+            // biome-ignore lint/a11y/useSemanticElements: <explanation>
+            role: "dialog", "aria-modal": "true", className: contentClasses, style: contentStyle, ...restProps, children: children }) }), document.body);
 }
 exports.Dialog = D;

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

@@ -4,17 +4,13 @@ exports.Element = void 0;
 exports.E = E;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-const index_native_1 = require("../../hooks/index.native");
-function E({ className, children, onPress, onClick, ref, ...rest }) {
-    const cn = (0, index_native_1.useCn)();
-    const { onAction } = (0, index_native_1.useAction)({
-        onClick,
-        onPress,
-    });
-    const handleOnPress = () => {
-        onAction();
-        return false;
-    };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, className: cn(className), onStartShouldSetResponder: handleOnPress, ...rest, children: children }));
+const useCn_1 = require("../../hooks/useCn");
+const index_native_1 = require("../../index.native");
+const index_native_2 = require("../t/index.native");
+function E({ className, children, ref, style, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { getStyles } = (0, index_native_1.useStyles)();
+    const { disabled, eventHandlers } = (0, index_native_1.useInteractiveHandlers)(restProps);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, className: cn(className), ...eventHandlers, ...getStyles({ disabled, style }), 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

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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, ...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, ...rest, children: children }));
+const useCn_1 = require("../../hooks/useCn");
+const index_web_1 = require("../../index.web");
+function E({ className, children, ref, role, style, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_web_1.useStyles)();
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cn(className), role: role, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Element = E;

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

@@ -4,27 +4,25 @@ exports.Input = void 0;
 exports.I = I;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-const index_native_1 = require("../../hooks/index.native");
+const useCn_1 = require("../../hooks/useCn");
+const useOnChange_1 = require("../../hooks/useOnChange");
+const index_native_1 = require("../../index.native");
 const useIUtils_1 = require("./useIUtils");
-function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, editable, disabled, ref, ...rest }) {
+function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, editable, ref, name, style, ...restProps }) {
     const { treatTypeModeAndKeyboardType } = (0, useIUtils_1.useIUtils)();
-    const cn = (0, index_native_1.useCn)();
-    const { onChange: handleOnChange } = (0, index_native_1.useOnChange)({
+    const cn = (0, useCn_1.useCn)();
+    const { onChange: handleOnChange } = (0, useOnChange_1.useOnChange)({
         onChange,
         onChangeValue,
     });
+    const { disabled, eventHandlers } = (0, index_native_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_native_1.useStyles)();
     const effectiveEditable = editable ?? !disabled;
     const { masterInputType, masterInputKeyboardType } = treatTypeModeAndKeyboardType({
         inputMode,
         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, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref, className: cn(!effectiveEditable && 'opacity-60', className), value: value?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, secureTextEntry: masterInputType === 'password', keyboardType: masterInputKeyboardType, editable: effectiveEditable, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
 }
 exports.Input = I;

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

@@ -3,21 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 exports.I = I;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const index_web_1 = require("../../hooks/index.web");
+const useCn_1 = require("../../hooks/useCn");
+const useOnChange_1 = require("../../hooks/useOnChange");
+const index_web_1 = require("../../index.web");
 const useIUtils_1 = require("./useIUtils");
-function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, disabled, editable, ref, ...rest }) {
+function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, editable, ref, style, ...restProps }) {
     const { treatTypeModeAndKeyboardType } = (0, useIUtils_1.useIUtils)();
-    const cn = (0, index_web_1.useCn)();
-    const { onChange: handleOnChange } = (0, index_web_1.useOnChange)({
+    const cn = (0, useCn_1.useCn)();
+    const { onChange: handleOnChange } = (0, useOnChange_1.useOnChange)({
         onChange,
         onChangeValue,
     });
+    const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_web_1.useStyles)();
     const effectiveDisabled = disabled || editable === false;
     const { masterInputType, masterInputMode } = treatTypeModeAndKeyboardType({
         inputMode,
         keyboardType,
         type,
     });
-    return ((0, jsx_runtime_1.jsx)("input", { ref: ref, type: masterInputType, inputMode: masterInputMode, className: cn('outline-none', effectiveDisabled && 'opacity-60 cursor-not-allowed', className), value: value, defaultValue: defaultValue, placeholder: placeholder, onChange: handleOnChange, disabled: effectiveDisabled, ...rest }));
+    return ((0, jsx_runtime_1.jsx)("input", { ref: ref, type: masterInputType, inputMode: masterInputMode, className: cn('outline-none', effectiveDisabled && 'opacity-60 cursor-not-allowed', className), value: value?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, disabled: effectiveDisabled, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
 }
 exports.Input = I;

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

@@ -3,15 +3,13 @@ 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, ...rest }) {
-    const cn = (0, index_web_1.useCn)();
-    const { onAction } = (0, index_native_1.useAction)({
-        onClick,
-        onPress,
-    });
+const useCn_1 = require("../../hooks/useCn");
+const index_web_1 = require("../../index.web");
+function L({ className, children, to, href, preventDefault, ref, style, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_web_1.useStyles)();
     const resolvedHref = href ?? to ?? '#';
-    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), onClick: onAction, ...rest, children: children }));
+    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Link = L;

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

@@ -4,9 +4,9 @@ exports.Overflow = void 0;
 exports.O = O;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-const index_native_1 = require("../../hooks/index.native");
-function O({ className, children, horizontal, ref, ...rest }) {
-    const cn = (0, index_native_1.useCn)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: ref, className: cn(className), horizontal: horizontal, ...rest, children: children }));
+const useCn_1 = require("../../hooks/useCn");
+function O({ className, children, horizontal, ref, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: ref, className: cn(className), horizontal: horizontal, ...restProps, children: children }));
 }
 exports.Overflow = O;

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

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overflow = void 0;
 exports.O = O;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const index_web_1 = require("../../hooks/index.web");
-function O({ className, children, horizontal, ref, ...rest }) {
-    const cn = (0, index_web_1.useCn)();
+const useCn_1 = require("../../hooks/useCn");
+const index_web_1 = require("../../index.web");
+function O({ className, children, horizontal, ref, style, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_web_1.useStyles)();
     const overflowClass = horizontal ? 'overflow-x-auto' : 'overflow-y-auto';
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cn(overflowClass, className), ...rest, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cn(overflowClass, className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Overflow = O;

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

@@ -4,10 +4,10 @@ exports.Picture = void 0;
 exports.P = P;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
-const index_native_1 = require("../../hooks/index.native");
-function P({ className, src, source, ref, ...rest }) {
-    const cn = (0, index_native_1.useCn)();
+const useCn_1 = require("../../hooks/useCn");
+function P({ className, src, source, ref, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
     const finalSource = src != null ? { uri: src } : source;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Image, { ref: ref, className: cn(className), source: finalSource, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Image, { ref: ref, className: cn(className), source: finalSource, ...restProps }));
 }
 exports.Picture = P;

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

@@ -3,11 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Picture = void 0;
 exports.P = P;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const index_web_1 = require("../../hooks/index.web");
-function P({ alt, className, ref, ...rest }) {
-    const cn = (0, index_web_1.useCn)();
+const useCn_1 = require("../../hooks/useCn");
+const index_web_1 = require("../../index.web");
+function P({ alt, className, ref, style, source, src, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_web_1.useStyles)();
     return (
     // biome-ignore lint/a11y/useAltText: <explanation>
-    (0, jsx_runtime_1.jsx)("img", { alt: alt, "aria-label": alt, ref: ref, className: cn('object-cover', className), ...rest }));
+    (0, jsx_runtime_1.jsx)("img", { alt: alt, "aria-label": alt, ref: ref, className: cn('object-cover', className), src: src ?? source, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
 }
 exports.Picture = P;

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.S = S;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const index_native_1 = require("../../hooks/index.native");
-function S({ className, children, ref, ...rest }) {
-    const cn = (0, index_native_1.useCn)();
-    return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaView, { ref: ref, className: cn(className), ...rest, children: children }));
+const useCn_1 = require("../../hooks/useCn");
+function S({ className, children, ref, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaView, { ref: ref, className: cn(className), ...restProps, children: children }));
 }

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

@@ -4,13 +4,12 @@ exports.Text = void 0;
 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 }) {
-    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 useCn_1 = require("../../hooks/useCn");
+const index_native_1 = require("../../index.native");
+function T({ className, children, ref, style, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_native_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_native_1.useStyles)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, className: cn('leading-relaxed', className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Text = T;

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

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 }) {
-    const cn = (0, index_web_1.useCn)();
-    const { onAction } = (0, index_web_1.useAction)({
-        onClick,
-        onPress,
-    });
+const useCn_1 = require("../../hooks/useCn");
+const index_web_1 = require("../../index.web");
+function T({ className, children, as = 'span', ref, style, ...restProps }) {
+    const cn = (0, useCn_1.useCn)();
+    const { disabled, eventHandlers } = (0, index_web_1.useInteractiveHandlers)(restProps);
+    const { getStyles } = (0, index_web_1.useStyles)();
     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), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 exports.Text = T;

package/dist/cjs/components/u/errorBoundary.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+class ErrorBoundary extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.props.onError?.callback?.(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            if (this.props.onError?.render) {
+                return this.props.onError.render;
+            }
+            return (0, jsx_runtime_1.jsx)("h1", { children: "Ocorreu um erro. Por favor, tente novamente mais tarde." });
+        }
+        return this.props.children;
+    }
+}
+exports.ErrorBoundary = ErrorBoundary;

package/dist/cjs/components/u/provider.native.js

@@ -6,7 +6,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const context_1 = require("./context");
-function U({ children, config }) {
+const errorBoundary_1 = require("./errorBoundary");
+function U({ children, config, onError }) {
     const systemColorScheme = react_native_1.Appearance.getColorScheme() ?? 'light';
     const [colorScheme, setColorScheme] = (0, react_1.useState)(config?.colorScheme ?? 'system');
     const [locale, setLocale] = (0, react_1.useState)(config?.locale ?? 'en-US');
@@ -18,6 +19,6 @@ function U({ children, config }) {
         setColorScheme,
         setLocale,
     }), [colorScheme, locale, systemColorScheme]);
-    return ((0, jsx_runtime_1.jsx)(context_1.UniverseContext.Provider, { value: value, children: children }));
+    return ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { onError: onError, children: (0, jsx_runtime_1.jsx)(context_1.UniverseContext.Provider, { value: value, children: children }) }));
 }
 exports.Universe = U;

package/dist/cjs/components/u/provider.web.js

@@ -5,7 +5,8 @@ exports.U = U;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const context_1 = require("./context");
-function U({ children, config }) {
+const errorBoundary_1 = require("./errorBoundary");
+function U({ children, config, onError }) {
     const [colorScheme, setColorScheme] = (0, react_1.useState)(config?.colorScheme ?? 'system');
     const [locale, setLocale] = (0, react_1.useState)(config?.locale ?? 'en-US');
     const value = (0, react_1.useMemo)(() => ({
@@ -15,6 +16,6 @@ function U({ children, config }) {
         setColorScheme,
         setLocale,
     }), [colorScheme, locale]);
-    return ((0, jsx_runtime_1.jsx)(context_1.UniverseContext.Provider, { value: value, children: children }));
+    return ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { onError: onError, children: (0, jsx_runtime_1.jsx)(context_1.UniverseContext.Provider, { value: value, children: children }) }));
 }
 exports.Universe = U;

package/dist/cjs/hooks/index.js

@@ -14,8 +14,6 @@ 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("./useProps"), exports);

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

@@ -14,8 +14,9 @@ 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("./useInteractiveHandlers/useInteractiveHandlers.native"), exports);
 __exportStar(require("./useInteractiveState/useInteractiveState.native"), exports);
 __exportStar(require("./useOnChange"), exports);
 __exportStar(require("./useProps"), exports);
+__exportStar(require("./useStyles/useStyles.native"), exports);

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

@@ -14,8 +14,9 @@ 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("./useInteractiveHandlers/useInteractiveHandlers.web"), exports);
 __exportStar(require("./useInteractiveState/useInteractiveState.web"), exports);
 __exportStar(require("./useOnChange"), exports);
 __exportStar(require("./useProps"), exports);
+__exportStar(require("./useStyles/useStyles.web"), exports);

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInteractiveHandlers = useInteractiveHandlers;
+const react_1 = require("react");
+function useInteractiveHandlers({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const offOn = (0, react_1.useRef)('off');
+    const eventHandlers = {
+        onBlur: (e) => {
+            if (disabled) {
+                return;
+            }
+            onBlur?.(e);
+        },
+        onFocus: (e) => {
+            if (disabled) {
+                return;
+            }
+            onFocus?.(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);
+        },
+    };
+    return {
+        disabled,
+        eventHandlers,
+    };
+}

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInteractiveHandlers = useInteractiveHandlers;
+function useInteractiveHandlers({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const eventHandlers = {
+        onBlur: (e) => {
+            if (disabled) {
+                return;
+            }
+            onBlur?.(e);
+        },
+        onClick: (e) => {
+            if (disabled) {
+                return;
+            }
+            if (onClick) {
+                onClick?.(e);
+                return;
+            }
+            onPress?.(e);
+        },
+        onFocus: (e) => {
+            if (disabled) {
+                return;
+            }
+            onFocus?.(e);
+        },
+        onMouseEnter: (e) => {
+            if (disabled) {
+                return;
+            }
+            onIn?.(e);
+        },
+        onMouseLeave: (e) => {
+            if (disabled) {
+                return;
+            }
+            onOut?.(e);
+        },
+    };
+    return {
+        disabled,
+        eventHandlers,
+    };
+}