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

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/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/esm/components/o/o.web.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCn } from '../../hooks/index.web';
-export function O({ className, children, horizontal, ref, ...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), ...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/esm/components/p/p.native.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/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/esm/components/p/p.web.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCn } from '../../hooks/index.web';
-export function P({ alt, className, ref, ...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), ...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/esm/components/s/s.native.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/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/esm/components/t/t.native.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text as RNText } from 'react-native';
-import { useAction, useCn } from '../../hooks/index.native';
-export function T({ className, children, onClick, onPress, ref, ...rest }) {
+import { useCn } from '../../hooks/useCn';
+import { useInteractiveHandlers, useStyles } from '../../index.native';
+export function T({ className, children, ref, style, ...restProps }) {
     const cn = useCn();
-    const { onAction } = useAction({
-        onClick,
-        onPress,
-    });
-    return (_jsx(RNText, { ref: ref, className: cn('leading-relaxed', className), onPress: onAction, ...rest, 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/esm/components/t/t.web.js

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

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+export class ErrorBoundary extends 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 _jsx("h1", { children: "Ocorreu um erro. Por favor, tente novamente mais tarde." });
+        }
+        return this.props.children;
+    }
+}

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

@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { Appearance } from 'react-native';
 import { UniverseContext } from './context';
-export function U({ children, config }) {
+import { ErrorBoundary } from './errorBoundary';
+export function U({ children, config, onError }) {
     const systemColorScheme = Appearance.getColorScheme() ?? 'light';
     const [colorScheme, setColorScheme] = useState(config?.colorScheme ?? 'system');
     const [locale, setLocale] = useState(config?.locale ?? 'en-US');
@@ -14,6 +15,6 @@ export function U({ children, config }) {
         setColorScheme,
         setLocale,
     }), [colorScheme, locale, systemColorScheme]);
-    return (_jsx(UniverseContext.Provider, { value: value, children: children }));
+    return (_jsx(ErrorBoundary, { onError: onError, children: _jsx(UniverseContext.Provider, { value: value, children: children }) }));
 }
 export const Universe = U;

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { UniverseContext } from './context';
-export function U({ children, config }) {
+import { ErrorBoundary } from './errorBoundary';
+export function U({ children, config, onError }) {
     const [colorScheme, setColorScheme] = useState(config?.colorScheme ?? 'system');
     const [locale, setLocale] = useState(config?.locale ?? 'en-US');
     const value = useMemo(() => ({
@@ -11,6 +12,6 @@ export function U({ children, config }) {
         setColorScheme,
         setLocale,
     }), [colorScheme, locale]);
-    return (_jsx(UniverseContext.Provider, { value: value, children: children }));
+    return (_jsx(ErrorBoundary, { onError: onError, children: _jsx(UniverseContext.Provider, { value: value, children: children }) }));
 }
 export const Universe = U;

package/dist/esm/hooks/index.js

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

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

@@ -1,5 +1,6 @@
-export * from './useAction/useAction.native';
 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/esm/hooks/index.web.js

@@ -1,5 +1,6 @@
-export * from './useAction/useAction.web';
 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/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/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/esm/hooks/useInteractiveState/useInteractiveState.native.js

@@ -1,68 +1,66 @@
-import { useEffect, useMemo, useState } from '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),
+import { useRef, useState } from 'react';
+export function useInteractiveState({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const offOn = useRef('off');
+    const [interactiveState, setInteractiveState] = 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',
     };
-}
-export function useInteractiveState(options = {}) {
-    const { disabled = false } = options;
-    const [state, setState] = useState({
-        hovered: false,
-        pressed: false,
-        focused: false,
-        disabled,
-    });
-    useEffect(() => {
-        setState((prev) => ({ ...prev, disabled }));
-    }, [disabled]);
-    const eventHandlers = 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/esm/hooks/useInteractiveState/useInteractiveState.web.js

@@ -1,68 +1,71 @@
-import { useEffect, useMemo, useState } from '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),
+import { useState } from 'react';
+export function useInteractiveState({ disabled, onBlur, onClick, onFocus, onPress, onIn, onOut, } = {}) {
+    const [interactiveState, setInteractiveState] = 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',
     };
-}
-export function useInteractiveState(options = {}) {
-    const { disabled = false } = options;
-    const [state, setState] = useState({
-        hovered: false,
-        pressed: false,
-        focused: false,
-        disabled,
-    });
-    useEffect(() => {
-        setState((prev) => ({ ...prev, disabled }));
-    }, [disabled]);
-    const eventHandlers = 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/esm/hooks/useOnChange.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-export const useOnChange = ({ onChange, onChangeValue }) => {
+export const useOnChange = ({ onChange, onChangeValue, }) => {
     return useMemo(() => ({
         onChange: (event) => {
             if (onChange) {

package/dist/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('');
+};

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

@@ -0,0 +1,38 @@
+import { extractStyles } from './useStyles.helpers';
+const getStyles = ({ disabled, style, }) => {
+    if (!style) {
+        return {};
+    }
+    const { styleBase, styleDisabled, styleFocused, styleHovered, stylePressed } = 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, } = 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 };
+};
+export const useStyles = () => {
+    return {
+        getStyles,
+        getStylesWithInteraction,
+    };
+};