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

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

@@ -2,70 +2,68 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInteractiveState = useInteractiveState;
 const react_1 = require("react");
-function computeVisualState(state) {
-    if (state.disabled)
-        return 'disabled';
-    if (state.pressed)
-        return 'pressed';
-    if (state.hovered)
-        return 'hovered';
-    if (state.focused)
-        return 'focused';
-    return 'default';
-}
-function toDataAttrs(state) {
-    const visual = computeVisualState(state);
-    return {
-        'data-state': visual,
-        'data-hovered': String(state.hovered),
-        'data-pressed': String(state.pressed),
-        'data-focused': String(state.focused),
-        'data-disabled': String(state.disabled),
+function useInteractiveState({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const offOn = (0, react_1.useRef)('off');
+    const [interactiveState, setInteractiveState] = (0, react_1.useState)('idle');
+    const dataAttrs = {
+        'data-state': interactiveState,
+        'data-disabled': disabled ? 'true' : 'false',
+        'data-focused': interactiveState === 'focused' ? 'true' : 'false',
+        'data-hovered': interactiveState === 'hovered' ? 'true' : 'false',
+        'data-pressed': interactiveState === 'pressed' ? 'true' : 'false',
     };
-}
-function useInteractiveState(options = {}) {
-    const { disabled = false } = options;
-    const [state, setState] = (0, react_1.useState)({
-        hovered: false,
-        pressed: false,
-        focused: false,
-        disabled,
-    });
-    (0, react_1.useEffect)(() => {
-        setState((prev) => ({ ...prev, disabled }));
-    }, [disabled]);
-    const eventHandlers = (0, react_1.useMemo)(() => ({
-        onMouseEnter: () => {
-            if (disabled)
+    const eventHandlers = {
+        onBlur: (e) => {
+            if (disabled) {
                 return;
-            setState((prev) => ({ ...prev, hovered: true }));
+            }
+            onBlur?.(e);
+            setInteractiveState('idle');
         },
-        onMouseLeave: () => {
-            if (disabled)
+        onFocus: (e) => {
+            if (disabled) {
                 return;
-            setState((prev) => ({ ...prev, hovered: false, pressed: false }));
+            }
+            onFocus?.(e);
+            setInteractiveState('focused');
         },
-        onMouseDown: () => {
-            if (disabled)
+        onPress: (e) => {
+            if (disabled) {
                 return;
-            setState((prev) => ({ ...prev, pressed: true }));
-        },
-        onMouseUp: () => {
-            if (disabled)
+            }
+            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;
-            setState((prev) => ({ ...prev, pressed: false }));
+            }
+            onClick?.(e);
         },
-        onFocus: () => {
-            if (disabled)
+        onPressIn: (e) => {
+            if (disabled) {
                 return;
-            setState((prev) => ({ ...prev, focused: true }));
+            }
+            onIn?.(e);
+            setInteractiveState('pressed');
         },
-        onBlur: () => {
-            if (disabled)
+        onPressOut: (e) => {
+            if (disabled) {
                 return;
-            setState((prev) => ({ ...prev, focused: false, pressed: false }));
+            }
+            onOut?.(e);
+            setInteractiveState('idle');
         },
-    }), [disabled]);
-    const dataAttrs = toDataAttrs(state);
-    return { state, dataAttrs, eventHandlers };
+    };
+    return {
+        dataAttrs,
+        disabled,
+        eventHandlers,
+        interactiveState,
+    };
 }

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

@@ -2,70 +2,73 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInteractiveState = useInteractiveState;
 const react_1 = require("react");
-function computeVisualState(state) {
-    if (state.disabled)
-        return 'disabled';
-    if (state.pressed)
-        return 'pressed';
-    if (state.hovered)
-        return 'hovered';
-    if (state.focused)
-        return 'focused';
-    return 'default';
-}
-function toDataAttrs(state) {
-    const visual = computeVisualState(state);
-    return {
-        'data-state': visual,
-        'data-hovered': String(state.hovered),
-        'data-pressed': String(state.pressed),
-        'data-focused': String(state.focused),
-        'data-disabled': String(state.disabled),
+function useInteractiveState({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const [interactiveState, setInteractiveState] = (0, react_1.useState)('idle');
+    const dataAttrs = {
+        'data-state': interactiveState,
+        'data-disabled': disabled ? 'true' : 'false',
+        'data-focused': interactiveState === 'focused' ? 'true' : 'false',
+        'data-hovered': interactiveState === 'hovered' ? 'true' : 'false',
+        'data-pressed': interactiveState === 'pressed' ? 'true' : 'false',
     };
-}
-function useInteractiveState(options = {}) {
-    const { disabled = false } = options;
-    const [state, setState] = (0, react_1.useState)({
-        hovered: false,
-        pressed: false,
-        focused: false,
-        disabled,
-    });
-    (0, react_1.useEffect)(() => {
-        setState((prev) => ({ ...prev, disabled }));
-    }, [disabled]);
-    const eventHandlers = (0, react_1.useMemo)(() => ({
-        onMouseEnter: () => {
-            if (disabled)
+    const eventHandlers = {
+        onBlur: (e) => {
+            if (disabled) {
                 return;
-            setState((prev) => ({ ...prev, hovered: true }));
+            }
+            onBlur?.(e);
+            setInteractiveState('idle');
         },
-        onMouseLeave: () => {
-            if (disabled)
+        onClick: (e) => {
+            if (disabled) {
+                return;
+            }
+            if (onClick) {
+                onClick?.(e);
                 return;
-            setState((prev) => ({ ...prev, hovered: false, pressed: false }));
+            }
+            onPress?.(e);
         },
-        onMouseDown: () => {
-            if (disabled)
+        onFocus: (e) => {
+            if (disabled) {
                 return;
-            setState((prev) => ({ ...prev, pressed: true }));
+            }
+            onFocus?.(e);
+            setInteractiveState('focused');
         },
-        onMouseUp: () => {
-            if (disabled)
+        onMouseDown: (e) => {
+            if (disabled) {
                 return;
-            setState((prev) => ({ ...prev, pressed: false }));
+            }
+            setInteractiveState('pressed');
         },
-        onFocus: () => {
-            if (disabled)
+        onMouseEnter: (e) => {
+            if (disabled) {
                 return;
-            setState((prev) => ({ ...prev, focused: true }));
+            }
+            onIn?.(e);
+            setInteractiveState('hovered');
         },
-        onBlur: () => {
-            if (disabled)
+        onMouseLeave: (e) => {
+            if (disabled) {
                 return;
-            setState((prev) => ({ ...prev, focused: false, pressed: false }));
+            }
+            console.log('[DEBUG] onMouseLeave', typeof onOut, e);
+            onOut?.(e);
+            setInteractiveState('idle');
         },
-    }), [disabled]);
-    const dataAttrs = toDataAttrs(state);
-    return { state, dataAttrs, eventHandlers };
+        onMouseUp: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onMouseUp', e);
+            setInteractiveState('idle');
+        },
+    };
+    return {
+        dataAttrs,
+        disabled,
+        eventHandlers,
+        interactiveState,
+    };
 }

package/dist/cjs/hooks/useOnChange.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOnChange = void 0;
 const react_1 = require("react");
-const useOnChange = ({ onChange, onChangeValue }) => {
+const useOnChange = ({ onChange, onChangeValue, }) => {
     return (0, react_1.useMemo)(() => ({
         onChange: (event) => {
             if (onChange) {

package/dist/cjs/hooks/useStyles/useStyles.helpers.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCssDecls = exports.toKebab = exports.extractStyles = void 0;
+const extractStyles = (style) => {
+    const base = { ...style };
+    const disabled = style.$disabled || {};
+    const focused = style.$focused || {};
+    const hovered = style.$hovered || {};
+    const pressed = style.$pressed || {};
+    base.$disabled = undefined;
+    base.$focused = undefined;
+    base.$hovered = undefined;
+    base.$pressed = undefined;
+    return {
+        styleBase: base,
+        styleDisabled: disabled,
+        styleFocused: focused,
+        styleHovered: hovered,
+        stylePressed: pressed,
+    };
+};
+exports.extractStyles = extractStyles;
+const toKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+exports.toKebab = toKebab;
+const toCssDecls = (style) => {
+    if (!style) {
+        return '';
+    }
+    // TODO: adiconar os px ou outra medida quando necessario e faça sentido
+    return Object.entries(style)
+        .filter(([, v]) => v !== undefined && v !== null)
+        .map(([k, v]) => `${(0, exports.toKebab)(k)}:${typeof v === 'number' ? `${v}` : v};`)
+        .join('');
+};
+exports.toCssDecls = toCssDecls;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+const useStyles_helpers_1 = require("./useStyles.helpers");
+const getStyles = ({ disabled, style, }) => {
+    if (!style) {
+        return {};
+    }
+    const { styleBase, styleDisabled, styleFocused, styleHovered, stylePressed } = (0, useStyles_helpers_1.extractStyles)(style);
+    const composedStyle = { ...styleBase };
+    if (disabled) {
+        Object.assign(composedStyle, styleDisabled || {});
+    }
+    return { style: composedStyle };
+};
+const getStylesWithInteraction = ({ disabled, style }) => (options) => {
+    if (!style) {
+        return {};
+    }
+    const { styleBase, styleDisabled, styleFocused, styleHovered, stylePressed, } = (0, useStyles_helpers_1.extractStyles)(style);
+    const composedStyle = { ...styleBase };
+    if (disabled) {
+        Object.assign(composedStyle, styleDisabled || {});
+    }
+    if (options?.focused) {
+        Object.assign(composedStyle, styleFocused || {});
+    }
+    if (options?.hovered) {
+        Object.assign(composedStyle, styleHovered || {});
+    }
+    if (options?.pressed) {
+        Object.assign(composedStyle, stylePressed || {});
+    }
+    return { style: composedStyle };
+};
+const useStyles = () => {
+    return {
+        getStyles,
+        getStylesWithInteraction,
+    };
+};
+exports.useStyles = useStyles;

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = exports.createInteractiveClass = void 0;
+const react_1 = require("react");
+const useStyles_helpers_1 = require("./useStyles.helpers");
+const injected = new Set();
+const injectOnce = (id, cssText) => {
+    if (typeof document === 'undefined')
+        return;
+    if (injected.has(id))
+        return;
+    const style = document.createElement('style');
+    style.setAttribute('data-interactive', id);
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    injected.add(id);
+};
+const createInteractiveClass = ({ disabled, id, style, }) => {
+    const className = `ix-${id}`;
+    const { styleBase, styleDisabled, styleFocused, styleHovered, stylePressed } = (0, useStyles_helpers_1.extractStyles)(style);
+    const hoveredClass = styleHovered
+        ? `.${className}:hover{${(0, useStyles_helpers_1.toCssDecls)(styleHovered)}}`
+        : '';
+    const activeClass = stylePressed
+        ? `.${className}:active{${(0, useStyles_helpers_1.toCssDecls)(stylePressed)}}`
+        : '';
+    // focus-visible com fallback para browsers sem suporte
+    const focusVisibleClass = styleFocused
+        ? `
+.${className}:focus-visible{${(0, useStyles_helpers_1.toCssDecls)(styleFocused)}}
+@supports not selector(:focus-visible){
+  .${className}:focus{${(0, useStyles_helpers_1.toCssDecls)(styleFocused)}}
+}
+`
+        : '';
+    const disabledClass = disabled
+        ? `
+.${className}[data-disabled="true"]{${(0, useStyles_helpers_1.toCssDecls)(styleDisabled)}}
+.${className}[data-disabled="true"]:hover{${(0, useStyles_helpers_1.toCssDecls)(styleDisabled)}}
+.${className}[data-disabled="true"]:active{${(0, useStyles_helpers_1.toCssDecls)(styleDisabled)}}
+`
+        : '';
+    const baseClass = `.${className}{${(0, useStyles_helpers_1.toCssDecls)(styleBase)}}`;
+    injectOnce(id, `${baseClass}${hoveredClass}${activeClass}${focusVisibleClass}${disabledClass}`);
+    return className;
+};
+exports.createInteractiveClass = createInteractiveClass;
+const getStyles = ({ id }) => ({ disabled, style }) => {
+    if (!style) {
+        return {};
+    }
+    const className = (0, exports.createInteractiveClass)({ disabled, id, style });
+    return {
+        className,
+        ...(disabled ? { 'aria-disabled': 'true', 'data-disabled': 'true' } : {}),
+    };
+};
+const useStyles = () => {
+    const id = (0, react_1.useId)();
+    // TODO: cleanup on unmount
+    // useEffect(() => {
+    //   return () => {
+    //     document.querySelector(`style[data-interactive="${id}"]`)?.remove();
+    //     injected.delete(id);
+    //   };
+    // }, [id]);
+    return {
+        getStyles: getStyles({ id }),
+    };
+};
+exports.useStyles = useStyles;

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

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

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAction, useCn } from '../../hooks/index.web';
-export function A({ className, children, onPress, onClick, disabled, ref, ...rest }) {
+import { useInteractiveHandlers, useStyles } from '../../hooks/index.web';
+import { useCn } from '../../hooks/useCn';
+export function A({ className, children, loading, ref, testId, accessibilityLabel, accessibilityRole, accessibilityState, style, ...restProps }) {
     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, ...rest, children: children }));
+    const { getStyles } = useStyles();
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const isDisabled = Boolean(disabled || loading);
+    return (_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 }));
 }
 export const Action = A;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Modal } from 'react-native';
-import { useCn } from '../../hooks/index.native';
+import { useCn } from '../../hooks/useCn';
 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', backdropClassName, backdropStyle, containerClassName, containerStyle, contentClassName, contentStyle, children, ref, ...restProps }) {
     const cn = useCn();
     const placementClasses = {
         center: 'items-center justify-center',
@@ -12,13 +12,13 @@ export function D({ open, onOpenChange, placement = 'center', className, backdro
         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 (_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, ...restProps, children: _jsx(E, { className: containerClasses, style: { ...containerStyle, ...backdropStyle }, children: _jsx(E, { ref: ref, className: contentClasses, style: contentStyle, children: children }) }) }));
 }
 export const Dialog = D;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
-import { useCn } from '../../hooks/index.web';
+import { useCn } from '../../hooks/useCn';
 import { E } from '../e/index.web';
-export function D({ open, onOpenChange, placement = 'center', className, backdropClassName, containerClassName, contentClassName, closeOnBackdropClick = true, children, ref, ...rest }) {
+export function D({ open, onOpenChange, placement = 'center', backdropClassName, backdropStyle, containerClassName, containerStyle, contentClassName, contentStyle, closeOnBackdropClick = true, children, ref, ...restProps }) {
     const cn = useCn();
     if (typeof document === 'undefined')
         return null;
@@ -23,7 +23,12 @@ 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("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 createPortal(_jsx(E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, style: {
+            ...(containerStyle || {}),
+            ...(backdropStyle || {}),
+        }, children: _jsx("div", { ref: ref, 
+            // biome-ignore lint/a11y/useSemanticElements: <explanation>
+            role: "dialog", "aria-modal": "true", className: contentClasses, style: contentStyle, ...restProps, children: children }) }), document.body);
 }
 export const Dialog = D;

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

@@ -1,16 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
-import { useAction, useCn } from '../../hooks/index.native';
-export function E({ className, children, onPress, onClick, ref, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+import { useInteractiveHandlers, useStyles } from '../../index.native';
+import { T } from '../t/index.native';
+export function E({ className, children, ref, style, ...restProps }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
-    const handleOnPress = () => {
-        onAction();
-        return false;
-    };
-    return (_jsx(View, { ref: ref, className: cn(className), onStartShouldSetResponder: handleOnPress, ...rest, children: children }));
+    const { getStyles } = useStyles();
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    return (_jsx(View, { ref: ref, className: cn(className), ...eventHandlers, ...getStyles({ disabled, style }), children: typeof children === 'string' ? _jsx(T, { children: children }) : children }));
 }
 export const Element = E;

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

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAction, useCn } from '../../hooks/index.web';
-export function E({ className, children, onPress, onClick, ref, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+import { useInteractiveHandlers, useStyles } from '../../index.web';
+export function E({ className, children, ref, role, style, ...restProps }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
-    return (_jsx("div", { ref: ref, className: cn(className), onClick: onAction, ...rest, children: children }));
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
+    return (_jsx("div", { ref: ref, className: cn(className), role: role, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 export const Element = E;

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

@@ -1,26 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextInput } from 'react-native';
-import { useCn, useOnChange } from '../../hooks/index.native';
+import { useCn } from '../../hooks/useCn';
+import { useOnChange } from '../../hooks/useOnChange';
+import { useInteractiveHandlers, useStyles } from '../../index.native';
 import { useIUtils } from './useIUtils';
-export function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, editable, disabled, ref, ...rest }) {
+export function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, editable, ref, name, style, ...restProps }) {
     const { treatTypeModeAndKeyboardType } = useIUtils();
     const cn = useCn();
     const { onChange: handleOnChange } = useOnChange({
         onChange,
         onChangeValue,
     });
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = 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 (_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, ...rest }));
+    return (_jsx(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 }) }));
 }
 export const Input = I;

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

@@ -1,19 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCn, useOnChange } from '../../hooks/index.web';
+import { useCn } from '../../hooks/useCn';
+import { useOnChange } from '../../hooks/useOnChange';
+import { useInteractiveHandlers, useStyles } from '../../index.web';
 import { useIUtils } from './useIUtils';
-export function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, disabled, editable, ref, ...rest }) {
+export function I({ className, value, defaultValue, placeholder, onChange, onChangeValue, type, inputMode, keyboardType, editable, ref, style, ...restProps }) {
     const { treatTypeModeAndKeyboardType } = useIUtils();
     const cn = useCn();
     const { onChange: handleOnChange } = useOnChange({
         onChange,
         onChangeValue,
     });
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
     const effectiveDisabled = disabled || editable === false;
     const { masterInputType, masterInputMode } = treatTypeModeAndKeyboardType({
         inputMode,
         keyboardType,
         type,
     });
-    return (_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 (_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 }) }));
 }
 export const Input = I;

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

@@ -1,13 +1,11 @@
 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, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+import { useInteractiveHandlers, useStyles } from '../../index.web';
+export function L({ className, children, to, href, preventDefault, ref, style, ...restProps }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
     const resolvedHref = href ?? to ?? '#';
-    return (_jsx("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), onClick: onAction, ...rest, children: children }));
+    return (_jsx("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 export const Link = L;