@react-xp/aeiou 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { useCn } from '../../hooks/useCn';
-import { useInteractiveHandlers, useStyles } from '../../index.web';
-export function T({ as = 'span', className, children, 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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-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/types.js

@@ -1 +0,0 @@
-export {};

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +0,0 @@
-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]);
-};

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

@@ -1,59 +0,0 @@
-import React from 'react';
-export const useProps = () => {
-    const handleOmit = React.useCallback((obj = {}, keys = []) => {
-        if (!obj) {
-            return {
-                props: {},
-                restProps: {},
-            };
-        }
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        const result = {};
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        const nonUsedProps = {};
-        for (const key of Object.keys(obj)) {
-            if (!keys.includes(key)) {
-                result[key] = obj[key];
-            }
-            else {
-                nonUsedProps[key] = obj[key];
-            }
-        }
-        return {
-            props: result,
-            restProps: nonUsedProps,
-        };
-    }, []);
-    const handlePick = React.useCallback((obj = {}, keys = []) => {
-        if (!obj) {
-            return {
-                props: {},
-                restProps: {},
-            };
-        }
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        const result = {};
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        const nonUsedProps = {};
-        for (const key of Object.keys(obj)) {
-            if (keys.includes(key)) {
-                result[key] = obj[key];
-            }
-            else {
-                nonUsedProps[key] = obj[key];
-            }
-        }
-        return {
-            props: result /*Pick<
-              TObject,
-              Exclude<keyof TObject, Exclude<keyof TObject, TKeys>>
-            >*/,
-            restProps: nonUsedProps,
-        };
-    }, []);
-    return {
-        getPropKey: (obj = {}) => handlePick(obj, ['key']),
-        omitProps: handleOmit,
-        pickProps: handlePick,
-    };
-};

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

@@ -1,29 +0,0 @@
-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/native/esm/hooks/useStyles/useStyles.native.js

@@ -1,40 +0,0 @@
-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, }) => ({
-    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 composedStyle;
-    },
-});
-export const useStyles = () => {
-    return {
-        getStyles,
-        getStylesWithInteraction,
-    };
-};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,66 +0,0 @@
-import { useId } from 'react';
-import { extractStyles, toCssDecls } from './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);
-};
-export const createInteractiveClass = ({ disabled, id, style, }) => {
-    const className = `ix-${id}`;
-    const { styleBase, styleDisabled, styleFocused, styleHovered, stylePressed } = extractStyles(style);
-    const hoveredClass = styleHovered
-        ? `.${className}:hover{${toCssDecls(styleHovered)}}`
-        : '';
-    const activeClass = stylePressed
-        ? `.${className}:active{${toCssDecls(stylePressed)}}`
-        : '';
-    // focus-visible com fallback para browsers sem suporte
-    const focusVisibleClass = styleFocused
-        ? `
-.${className}:focus-visible{${toCssDecls(styleFocused)}}
-@supports not selector(:focus-visible){
-  .${className}:focus{${toCssDecls(styleFocused)}}
-}
-`
-        : '';
-    const disabledClass = disabled
-        ? `
-.${className}[data-disabled="true"]{${toCssDecls(styleDisabled)}}
-.${className}[data-disabled="true"]:hover{${toCssDecls(styleDisabled)}}
-.${className}[data-disabled="true"]:active{${toCssDecls(styleDisabled)}}
-`
-        : '';
-    const baseClass = `.${className}{${toCssDecls(styleBase)}}`;
-    injectOnce(id, `${baseClass}${hoveredClass}${activeClass}${focusVisibleClass}${disabledClass}`);
-    return className;
-};
-const getStyles = ({ id }) => ({ disabled, style }) => {
-    if (!style) {
-        return {};
-    }
-    const className = createInteractiveClass({ disabled, id, style });
-    return {
-        className,
-        ...(disabled ? { 'aria-disabled': 'true', 'data-disabled': 'true' } : {}),
-    };
-};
-export const useStyles = () => {
-    const id = useId();
-    // TODO: cleanup on unmount
-    // useEffect(() => {
-    //   return () => {
-    //     document.querySelector(`style[data-interactive="${id}"]`)?.remove();
-    //     injected.delete(id);
-    //   };
-    // }, [id]);
-    return {
-        getStyles: getStyles({ id }),
-    };
-};

package/dist/native/esm/index.js

@@ -1,3 +0,0 @@
-export * from './components/index.web';
-export * from './hooks/index.web';
-export * from './types';

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

@@ -1,3 +0,0 @@
-export * from './components/index.native';
-export * from './hooks/index.native';
-export * from './types';

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

@@ -1,3 +0,0 @@
-export * from './components/index.web';
-export * from './hooks/index.web';
-export * from './types';

package/dist/native/esm/types/base.js

@@ -1 +0,0 @@
-export {};

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

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