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

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

@@ -0,0 +1,67 @@
+const setWhenUndefined = (value, defaultValue) => {
+    return value === undefined ? defaultValue : value;
+};
+const treatTypeModeAndKeyboardType = ({ inputMode, keyboardType, type, }) => {
+    let masterInputKeyboardType = keyboardType;
+    let masterInputMode = inputMode;
+    let masterInputType = type;
+    // set values according to inputMode first
+    if (masterInputMode === 'numeric' || masterInputMode === 'decimal') {
+        masterInputKeyboardType = setWhenUndefined(masterInputKeyboardType, 'numeric');
+        masterInputType = setWhenUndefined(masterInputType, 'number');
+    }
+    else if (masterInputMode === 'email') {
+        masterInputKeyboardType = setWhenUndefined(masterInputKeyboardType, 'email-address');
+        masterInputType = setWhenUndefined(masterInputType, 'email');
+    }
+    else if (masterInputMode === 'search') {
+        masterInputKeyboardType = setWhenUndefined(masterInputKeyboardType, 'default');
+        masterInputType = setWhenUndefined(masterInputType, 'search');
+    }
+    else if (masterInputMode === 'tel') {
+        masterInputKeyboardType = setWhenUndefined(masterInputKeyboardType, 'phone-pad');
+        masterInputType = setWhenUndefined(masterInputType, 'tel');
+    }
+    else if (masterInputMode === 'url') {
+        masterInputKeyboardType = setWhenUndefined(masterInputKeyboardType, 'url');
+        masterInputType = setWhenUndefined(masterInputType, 'url');
+    }
+    else if (masterInputType === 'text') {
+        masterInputKeyboardType = setWhenUndefined(masterInputKeyboardType, 'default');
+        masterInputType = setWhenUndefined(masterInputType, 'text');
+    }
+    // set values according to keyboardType second
+    if (masterInputKeyboardType === 'email-address') {
+        masterInputMode = setWhenUndefined(masterInputMode, 'email');
+        masterInputType = setWhenUndefined(masterInputType, 'email');
+    }
+    else if (masterInputKeyboardType === 'numeric' ||
+        masterInputKeyboardType === 'decimal-pad') {
+        masterInputMode = setWhenUndefined(masterInputMode, 'numeric');
+        masterInputType = setWhenUndefined(masterInputType, 'number');
+    }
+    else if (masterInputKeyboardType === 'phone-pad') {
+        masterInputMode = setWhenUndefined(masterInputMode, 'tel');
+        masterInputType = setWhenUndefined(masterInputType, 'tel');
+    }
+    else if (masterInputKeyboardType === 'url') {
+        masterInputMode = setWhenUndefined(masterInputMode, 'url');
+        masterInputType = setWhenUndefined(masterInputType, 'url');
+    }
+    else if (masterInputKeyboardType === 'default') {
+        masterInputMode = setWhenUndefined(masterInputMode, 'text');
+        masterInputType = setWhenUndefined(masterInputType, 'text');
+    }
+    // finally, set default type if still undefined
+    masterInputType = setWhenUndefined(masterInputType, 'text');
+    return {
+        masterInputKeyboardType,
+        masterInputMode,
+        masterInputType,
+    };
+};
+export const useIUtils = () => {
+    return {
+        treatTypeModeAndKeyboardType,
+    };
+};

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

@@ -0,0 +1,10 @@
+export * from './a/index.web';
+export * from './d/index.web';
+export * from './e/index.web';
+export * from './i/index.web';
+export * from './l/index.web';
+export * from './o/index.web';
+export * from './p/index.web';
+export * from './s/index.web';
+export * from './t/index.web';
+export * from './u/index.web';

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

@@ -0,0 +1,10 @@
+export * from './a/index.native';
+export * from './d/index.native';
+export * from './e/index.native';
+export * from './i/index.native';
+export * from './l/index.native';
+export * from './o/index.native';
+export * from './p/index.native';
+export * from './s/index.native';
+export * from './t/index.native';
+export * from './u/index.native';

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

@@ -0,0 +1,10 @@
+export * from './a/index.web';
+export * from './d/index.web';
+export * from './e/index.web';
+export * from './i/index.web';
+export * from './l/index.web';
+export * from './o/index.web';
+export * from './p/index.web';
+export * from './s/index.web';
+export * from './t/index.web';
+export * from './u/index.web';

package/dist/native/esm/components/l/index.native.js

@@ -0,0 +1 @@
+export * from './l.native';

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

@@ -0,0 +1 @@
+export * from './l.web';

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { A } from '../a/index.native';
+export function L(props) {
+    return _jsx(A, { ...props });
+}
+export const Link = L;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+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 { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
+    const resolvedHref = href ?? to ?? '#';
+    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/index.native.js

@@ -0,0 +1 @@
+export * from './o.native';

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

@@ -0,0 +1 @@
+export * from './o.web';

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { ScrollView } from 'react-native';
+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, ...restProps, children: children }));
+}
+export const Overflow = O;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+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), ...restProps, ...eventHandlers, ...getStyles({ disabled, style }), children: children }));
+}
+export const Overflow = O;

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

@@ -0,0 +1 @@
+export * from './p.native';

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

@@ -0,0 +1 @@
+export * from './p.web';

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { Image } from 'react-native';
+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, ...restProps }));
+}
+export const Picture = P;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+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), src: src ?? source, ...restProps, ...eventHandlers, ...getStyles({ disabled, style }) }));
+}
+export const Picture = P;

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

@@ -0,0 +1 @@
+export * from './s.native';

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

@@ -0,0 +1 @@
+export * from './s.web';

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { E } from '../e/index.web';
+export function S(props) {
+    return _jsx(E, { ...props });
+}
+export const Safe = S;

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

@@ -0,0 +1 @@
+export * from './t.native';

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

@@ -0,0 +1 @@
+export * from './t.web';

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { Text as RNText } from 'react-native';
+import { useCn } from '../../hooks/useCn';
+import { useInteractiveHandlers, useStyles } from '../../index.native';
+export function T({ className, children, ref, style, ...restProps }) {
+    const cn = useCn();
+    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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+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 { disabled, eventHandlers } = useInteractiveHandlers(restProps);
+    const { getStyles } = useStyles();
+    const Comp = as;
+    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/components/u/context.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+const defaultValue = {
+    colorScheme: 'system',
+    locale: 'en-US',
+    platform: 'web',
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setColorScheme: () => { },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setLocale: () => { },
+};
+export const UniverseContext = createContext(defaultValue);

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "nativewind/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/native/esm/components/u/index.native.js

@@ -0,0 +1,3 @@
+export * from './provider.native';
+export * from './types';
+export * from './useUniverse';

package/dist/native/esm/components/u/index.web.js

@@ -0,0 +1,3 @@
+export * from './provider.web';
+export * from './types';
+export * from './useUniverse';

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Appearance } from 'react-native';
+import { UniverseContext } from './context';
+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');
+    const value = useMemo(() => ({
+        colorScheme,
+        locale,
+        platform: 'native',
+        systemColorScheme,
+        setColorScheme,
+        setLocale,
+    }), [colorScheme, locale, systemColorScheme]);
+    return (_jsx(ErrorBoundary, { onError: onError, children: _jsx(UniverseContext.Provider, { value: value, children: children }) }));
+}
+export const Universe = U;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { UniverseContext } from './context';
+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(() => ({
+        colorScheme,
+        locale,
+        platform: 'web',
+        setColorScheme,
+        setLocale,
+    }), [colorScheme, locale]);
+    return (_jsx(ErrorBoundary, { onError: onError, children: _jsx(UniverseContext.Provider, { value: value, children: children }) }));
+}
+export const Universe = U;

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

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { UniverseContext } from './context';
+export function useUniverse() {
+    return useContext(UniverseContext);
+}

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

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

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

@@ -0,0 +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

@@ -0,0 +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/useCn.js

@@ -0,0 +1,8 @@
+import clsx, {} from 'clsx';
+import { useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
+export const useCn = () => {
+    return useMemo(() => (...inputs) => {
+        return twMerge(clsx(inputs));
+    }, []);
+};

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

@@ -0,0 +1,66 @@
+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',
+    };
+    const eventHandlers = {
+        onBlur: (e) => {
+            if (disabled) {
+                return;
+            }
+            onBlur?.(e);
+            setInteractiveState('idle');
+        },
+        onFocus: (e) => {
+            if (disabled) {
+                return;
+            }
+            onFocus?.(e);
+            setInteractiveState('focused');
+        },
+        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);
+        },
+        onPressIn: (e) => {
+            if (disabled) {
+                return;
+            }
+            onIn?.(e);
+            setInteractiveState('pressed');
+        },
+        onPressOut: (e) => {
+            if (disabled) {
+                return;
+            }
+            onOut?.(e);
+            setInteractiveState('idle');
+        },
+    };
+    return {
+        dataAttrs,
+        disabled,
+        eventHandlers,
+        interactiveState,
+    };
+}

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

@@ -0,0 +1,71 @@
+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',
+    };
+    const eventHandlers = {
+        onBlur: (e) => {
+            if (disabled) {
+                return;
+            }
+            onBlur?.(e);
+            setInteractiveState('idle');
+        },
+        onClick: (e) => {
+            if (disabled) {
+                return;
+            }
+            if (onClick) {
+                onClick?.(e);
+                return;
+            }
+            onPress?.(e);
+        },
+        onFocus: (e) => {
+            if (disabled) {
+                return;
+            }
+            onFocus?.(e);
+            setInteractiveState('focused');
+        },
+        onMouseDown: (e) => {
+            if (disabled) {
+                return;
+            }
+            setInteractiveState('pressed');
+        },
+        onMouseEnter: (e) => {
+            if (disabled) {
+                return;
+            }
+            onIn?.(e);
+            setInteractiveState('hovered');
+        },
+        onMouseLeave: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onMouseLeave', typeof onOut, e);
+            onOut?.(e);
+            setInteractiveState('idle');
+        },
+        onMouseUp: (e) => {
+            if (disabled) {
+                return;
+            }
+            console.log('[DEBUG] onMouseUp', e);
+            setInteractiveState('idle');
+        },
+    };
+    return {
+        dataAttrs,
+        disabled,
+        eventHandlers,
+        interactiveState,
+    };
+}

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

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+export const useOnChange = ({ onChange, onChangeValue, }) => {
+    return useMemo(() => ({
+        onChange: (event) => {
+            if (onChange) {
+                onChange(event);
+                return;
+            }
+            if (onChangeValue) {
+                onChangeValue(event?.target?.value);
+            }
+        },
+    }), [onChange, onChangeValue]);
+};