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

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "nativewind/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', backdropClassName, backdropStyle, containerClassName, containerStyle, contentClassName, contentStyle, 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',
@@ -15,10 +15,10 @@ export function D({ open, onOpenChange, placement = 'center', 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' : '', 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, style: { ...containerStyle, ...backdropStyle }, children: _jsx(E, { ref: ref, className: contentClasses, style: contentStyle, 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/native/esm/components/d/d.web.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "nativewind/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', backdropClassName, backdropStyle, containerClassName, containerStyle, contentClassName, contentStyle, 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;
@@ -25,10 +25,10 @@ export function D({ open, onOpenChange, placement = 'center', backdropClassName,
     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' : '', contentClassName);
     return createPortal(_jsx(E, { className: backdropClasses, role: "presentation", onClick: handleBackdropClick, style: {
-            ...containerStyle,
-            ...backdropStyle,
+            ...(containerStyle || {}),
+            ...(backdropStyle || {}),
         }, children: _jsx("div", { ref: ref, 
             // biome-ignore lint/a11y/useSemanticElements: <explanation>
-            role: "dialog", "aria-modal": "true", className: contentClasses, style: contentStyle, ...rest, children: children }) }), document.body);
+            role: "dialog", "aria-modal": "true", className: contentClasses, style: contentStyle, ...restProps, children: children }) }), document.body);
 }
 export const Dialog = D;

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { View } from 'react-native';
-import { useCn, useInteractiveState } from '../../hooks/index.native';
+import { useCn } from '../../hooks/useCn';
+import { useInteractiveHandlers, useStyles } from '../../index.native';
 import { T } from '../t/index.native';
-export function E({ className, children, ref, style, ...rest }) {
+export function E({ className, children, ref, style, ...restProps }) {
     const cn = useCn();
-    const { eventHandlers } = useInteractiveState(rest);
-    return (_jsx(View, { ref: ref, className: cn(className), style: style, ...rest, ...eventHandlers, children: typeof children === 'string' ? _jsx(T, { children: children }) : children }));
+    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/native/esm/components/e/e.web.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { useCn, useInteractiveState } from '../../hooks/index.web';
-export function E({ className, children, ref, style, ...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 { eventHandlers } = useInteractiveState(rest);
-    return (_jsx("div", { ref: ref, className: cn(className), style: style, ...rest, ...eventHandlers, 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/native/esm/components/i/i.native.js

@@ -1,20 +1,24 @@
 import { jsx as _jsx } from "nativewind/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, style, ...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,
     });
-    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, style: style, ...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/native/esm/components/i/i.web.js

@@ -1,19 +1,23 @@
 import { jsx as _jsx } from "nativewind/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, style, ...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?.toString(), defaultValue: defaultValue?.toString(), placeholder: placeholder, onChange: handleOnChange, disabled: effectiveDisabled, style: style, ...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/native/esm/components/l/l.web.js

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

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { ScrollView } from 'react-native';
-import { useCn } from '../../hooks/index.native';
-export function O({ className, children, horizontal, ref, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+export function O({ className, children, horizontal, ref, ...restProps }) {
     const cn = useCn();
-    return (_jsx(ScrollView, { ref: ref, className: cn(className), horizontal: horizontal, ...rest, children: children }));
+    return (_jsx(ScrollView, { ref: ref, className: cn(className), horizontal: horizontal, ...restProps, children: children }));
 }
 export const Overflow = O;

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

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { useCn } from '../../hooks/index.web';
-export function O({ className, children, horizontal, ref, style, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+import { useInteractiveHandlers, useStyles } from '../../index.web';
+export function O({ className, children, horizontal, ref, style, ...restProps }) {
     const cn = useCn();
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
     const overflowClass = horizontal ? 'overflow-x-auto' : 'overflow-y-auto';
-    return (_jsx("div", { ref: ref, className: cn(overflowClass, className), style: style, ...rest, children: children }));
+    return (_jsx("div", { ref: ref, className: cn(overflowClass, className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 export const Overflow = O;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { Image } from 'react-native';
-import { useCn } from '../../hooks/index.native';
-export function P({ className, src, source, ref, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+export function P({ className, src, source, ref, ...restProps }) {
     const cn = useCn();
     const finalSource = src != null ? { uri: src } : source;
-    return (_jsx(Image, { ref: ref, className: cn(className), source: finalSource, ...rest }));
+    return (_jsx(Image, { ref: ref, className: cn(className), source: finalSource, ...restProps }));
 }
 export const Picture = P;

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

@@ -1,9 +1,12 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { useCn } from '../../hooks/index.web';
-export function P({ alt, className, ref, style, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+import { useInteractiveHandlers, useStyles } from '../../index.web';
+export function P({ alt, className, ref, style, source, src, ...restProps }) {
     const cn = useCn();
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
     return (
     // biome-ignore lint/a11y/useAltText: <explanation>
-    _jsx("img", { alt: alt, "aria-label": alt, ref: ref, className: cn('object-cover', className), style: style, ...rest }));
+    _jsx("img", { alt: alt, "aria-label": alt, ref: ref, className: cn('object-cover', className), src: src ?? source, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
 }
 export const Picture = P;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { SafeAreaView, } from 'react-native-safe-area-context';
-import { useCn } from '../../hooks/index.native';
-export function S({ className, children, ref, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+export function S({ className, children, ref, ...restProps }) {
     const cn = useCn();
-    return (_jsx(SafeAreaView, { ref: ref, className: cn(className), ...rest, children: children }));
+    return (_jsx(SafeAreaView, { ref: ref, className: cn(className), ...restProps, children: children }));
 }

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { Text as RNText } from 'react-native';
-import { useCn, useInteractiveState } from '../../hooks/index.native';
-export function T({ className, children, ref, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+import { useInteractiveHandlers, useStyles } from '../../index.native';
+export function T({ className, children, ref, style, ...restProps }) {
     const cn = useCn();
-    const { eventHandlers } = useInteractiveState(rest);
-    return (_jsx(RNText, { ref: ref, className: cn('leading-relaxed', className), ...rest, ...eventHandlers, children: children }));
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
+    return (_jsx(RNText, { ref: ref, className: cn('leading-relaxed', className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 export const Text = T;

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { useCn, useInteractiveState } from '../../hooks/index.web';
-export function T({ className, children, as = 'span', ref, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+import { useInteractiveHandlers, useStyles } from '../../index.web';
+export function T({ className, children, as = 'span', ref, style, ...restProps }) {
     const cn = useCn();
-    const { eventHandlers } = useInteractiveState(rest);
+    const { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
     const Comp = as;
-    return (_jsx(Comp, { ref: ref, className: cn('leading-relaxed', className), ...rest, ...eventHandlers, children: children }));
+    return (_jsx(Comp, { ref: ref, className: cn('leading-relaxed', className), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
 }
 export const Text = T;

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

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { useRef } from 'react';
+export function useInteractiveHandlers({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const offOn = 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/native/esm/hooks/useInteractiveHandlers/useInteractiveHandlers.web.js

@@ -0,0 +1,42 @@
+export 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,
+    };
+}

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

@@ -1,25 +1,13 @@
 import { useRef, useState } from 'react';
-export function useInteractiveState(options = {}) {
-    const { disabled, onBlur, onClick, onFocus, onPress, onIn, onOut } = options;
-    const [hovered, setHovered] = useState(false);
-    const [pressed, setPressed] = useState(false);
-    const [focused, setFocused] = useState(false);
+export function useInteractiveState({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
     const offOn = useRef('off');
-    const state = disabled
-        ? 'disabled'
-        : pressed
-            ? 'pressed'
-            : hovered
-                ? 'hovered'
-                : focused
-                    ? 'focused'
-                    : 'idle';
+    const [interactiveState, setInteractiveState] = useState('idle');
     const dataAttrs = {
-        'data-state': state,
+        'data-state': interactiveState,
         'data-disabled': disabled ? 'true' : 'false',
-        'data-focused': focused ? 'true' : 'false',
-        'data-hovered': hovered ? 'true' : 'false',
-        'data-pressed': pressed ? 'true' : 'false',
+        'data-focused': interactiveState === 'focused' ? 'true' : 'false',
+        'data-hovered': interactiveState === 'hovered' ? 'true' : 'false',
+        'data-pressed': interactiveState === 'pressed' ? 'true' : 'false',
     };
     const eventHandlers = {
         onBlur: (e) => {
@@ -27,22 +15,14 @@ export function useInteractiveState(options = {}) {
                 return;
             }
             onBlur?.(e);
-            setFocused(false);
-            setPressed(false);
+            setInteractiveState('idle');
         },
         onFocus: (e) => {
             if (disabled) {
                 return;
             }
             onFocus?.(e);
-            setFocused(true);
-        },
-        onIn: (e) => {
-            if (disabled) {
-                return;
-            }
-            console.log('[DEBUG] onIn', typeof onIn, e);
-            onIn?.(e);
+            setInteractiveState('focused');
         },
         onPress: (e) => {
             if (disabled) {
@@ -67,22 +47,20 @@ export function useInteractiveState(options = {}) {
                 return;
             }
             onIn?.(e);
-            setPressed(true);
+            setInteractiveState('pressed');
         },
         onPressOut: (e) => {
             if (disabled) {
                 return;
             }
             onOut?.(e);
-            setPressed(false);
-        },
-        onOut: (e) => {
-            if (disabled) {
-                return;
-            }
-            console.log('[DEBUG] onOut', typeof onOut, e);
-            onOut?.(e);
+            setInteractiveState('idle');
         },
     };
-    return { state, dataAttrs, eventHandlers };
+    return {
+        dataAttrs,
+        disabled,
+        eventHandlers,
+        interactiveState,
+    };
 }

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

@@ -1,41 +1,25 @@
 import { useState } from 'react';
-export function useInteractiveState(options = {}) {
-    const { disabled, onBlur, onClick, onPress, onFocus, onIn, onOut } = options;
-    const [hovered, setHovered] = useState(false);
-    const [pressed, setPressed] = useState(false);
-    const [focused, setFocused] = useState(false);
-    const state = disabled
-        ? 'disabled'
-        : pressed
-            ? 'pressed'
-            : hovered
-                ? 'hovered'
-                : focused
-                    ? 'focused'
-                    : 'idle';
+export function useInteractiveState({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const [interactiveState, setInteractiveState] = useState('idle');
     const dataAttrs = {
-        'data-state': state,
+        'data-state': interactiveState,
         'data-disabled': disabled ? 'true' : 'false',
-        'data-focused': focused ? 'true' : 'false',
-        'data-hovered': hovered ? 'true' : 'false',
-        'data-pressed': pressed ? 'true' : 'false',
+        'data-focused': interactiveState === 'focused' ? 'true' : 'false',
+        'data-hovered': interactiveState === 'hovered' ? 'true' : 'false',
+        'data-pressed': interactiveState === 'pressed' ? 'true' : 'false',
     };
     const eventHandlers = {
         onBlur: (e) => {
             if (disabled) {
                 return;
             }
-            console.log('[DEBUG] onBlur', typeof onBlur, e);
             onBlur?.(e);
-            setFocused(false);
-            setPressed(false);
-            setHovered(false);
+            setInteractiveState('idle');
         },
         onClick: (e) => {
             if (disabled) {
                 return;
             }
-            console.log('[DEBUG] onClick', typeof onClick, e);
             if (onClick) {
                 onClick?.(e);
                 return;
@@ -46,31 +30,21 @@ export function useInteractiveState(options = {}) {
             if (disabled) {
                 return;
             }
-            console.log('[DEBUG] onFocus', typeof onFocus, e);
             onFocus?.(e);
-            setFocused(true);
-        },
-        onIn: (e) => {
-            if (disabled) {
-                return;
-            }
-            console.log('[DEBUG] onIn', typeof onIn, e);
-            onIn?.(e);
+            setInteractiveState('focused');
         },
         onMouseDown: (e) => {
-            if (disabled || e.button !== 0) {
+            if (disabled) {
                 return;
             }
-            console.log('[DEBUG] onMouseDown', e);
-            setPressed(true);
+            setInteractiveState('pressed');
         },
         onMouseEnter: (e) => {
             if (disabled) {
                 return;
             }
-            console.log('[DEBUG] onMouseEnter', typeof onIn, e);
             onIn?.(e);
-            setHovered(true);
+            setInteractiveState('hovered');
         },
         onMouseLeave: (e) => {
             if (disabled) {
@@ -78,23 +52,20 @@ export function useInteractiveState(options = {}) {
             }
             console.log('[DEBUG] onMouseLeave', typeof onOut, e);
             onOut?.(e);
-            setHovered(false);
-            setPressed(false);
+            setInteractiveState('idle');
         },
         onMouseUp: (e) => {
             if (disabled) {
                 return;
             }
             console.log('[DEBUG] onMouseUp', e);
-            setPressed(false);
-        },
-        onOut: (e) => {
-            if (disabled) {
-                return;
-            }
-            console.log('[DEBUG] onOut', typeof onOut, e);
-            onOut?.(e);
+            setInteractiveState('idle');
         },
     };
-    return { state, dataAttrs, eventHandlers };
+    return {
+        dataAttrs,
+        disabled,
+        eventHandlers,
+        interactiveState,
+    };
 }

package/dist/native/esm/hooks/useStyles/useStyles.helpers.js

@@ -0,0 +1,29 @@
+export 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,
+    };
+};
+export const toKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+export 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]) => `${toKebab(k)}:${typeof v === 'number' ? `${v}` : v};`)
+        .join('');
+};