@react-xp/aeiou 0.1.0-beta.3 → 0.1.0-beta.5

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,13 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useAction } from '../../hooks/index.native';
+import { useCn } from '../../hooks/index.web';
+export function L({ className, children, to, href, onClick, onPress, preventDefault, ref, ...rest }) {
+    const cn = useCn();
+    const { onAction } = useAction({
+        onClick,
+        onPress,
+    });
+    const resolvedHref = href ?? to ?? '#';
+    return (_jsx("a", { ref: ref, href: resolvedHref, className: cn('cursor-pointer', className), onClick: onAction, ...rest, 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/index.native';
+export function O({ className, children, horizontal, ref, ...rest }) {
+    const cn = useCn();
+    return (_jsx(ScrollView, { ref: ref, className: cn(className), horizontal: horizontal, ...rest, children: children }));
+}
+export const Overflow = O;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useCn } from '../../hooks/index.web';
+export function O({ className, children, horizontal, ref, ...rest }) {
+    const cn = useCn();
+    const overflowClass = horizontal ? 'overflow-x-auto' : 'overflow-y-auto';
+    return (_jsx("div", { ref: ref, className: cn(overflowClass, className), ...rest, 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/index.native';
+export function P({ className, src, source, ref, ...rest }) {
+    const cn = useCn();
+    const finalSource = src != null ? { uri: src } : source;
+    return (_jsx(Image, { ref: ref, className: cn(className), source: finalSource, ...rest }));
+}
+export const Picture = P;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useCn } from '../../hooks/index.web';
+export function P({ alt, className, ref, ...rest }) {
+    const cn = useCn();
+    return (
+    // biome-ignore lint/a11y/useAltText: <explanation>
+    _jsx("img", { alt: alt, "aria-label": alt, ref: ref, className: cn('object-cover', className), ...rest }));
+}
+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/index.native';
+export function S({ className, children, ref, ...rest }) {
+    const cn = useCn();
+    return (_jsx(SafeAreaView, { ref: ref, className: cn(className), ...rest, 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,12 @@
+import { jsx as _jsx } from "nativewind/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 }) {
+    const cn = useCn();
+    const { onAction } = useAction({
+        onClick,
+        onPress,
+    });
+    return (_jsx(RNText, { ref: ref, className: cn('leading-relaxed', className), onPress: onAction, ...rest, children: children }));
+}
+export const Text = T;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useAction, useCn } from '../../hooks/index.web';
+export function T({ className, children, as = 'span', onClick, onPress, ref, ...rest }) {
+    const cn = useCn();
+    const { onAction } = useAction({
+        onClick,
+        onPress,
+    });
+    const Comp = as;
+    return (_jsx(Comp, { ref: ref, className: cn('leading-relaxed', className), onClick: onAction, ...rest, 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/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,19 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Appearance } from 'react-native';
+import { UniverseContext } from './context';
+export function U({ children, config }) {
+    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(UniverseContext.Provider, { value: value, children: children }));
+}
+export const Universe = U;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { UniverseContext } from './context';
+export function U({ children, config }) {
+    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(UniverseContext.Provider, { value: value, children: children }));
+}
+export const Universe = U;

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

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

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,5 @@
+export * from './useAction/useAction.web';
+export * from './useCn';
+export * from './useInteractiveState/useInteractiveState.web';
+export * from './useOnChange';
+export * from './useProps';

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+export const useAction = ({ onClick, onPress, }) => {
+    return useMemo(() => ({
+        onAction: (event) => {
+            if (onPress) {
+                onPress(event);
+                return;
+            }
+            if (onClick) {
+                onClick(event);
+            }
+        },
+    }), [onClick, onPress]);
+};

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

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+export const useAction = ({ onClick, onPress, preventDefault, }) => {
+    return useMemo(() => ({
+        onAction: (event) => {
+            if (preventDefault && event && 'preventDefault' in event) {
+                event.preventDefault();
+            }
+            if (onClick) {
+                onClick(event);
+                return;
+            }
+            if (onPress) {
+                onPress(event);
+            }
+        },
+    }), [onClick, onPress, preventDefault]);
+};

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/useInteractiveState/useInteractiveState.native.js

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+export function useInteractiveState(options = {}) {
+    const { disabled } = options;
+    const [pressed, setPressed] = useState(false);
+    const state = disabled
+        ? 'disabled'
+        : pressed
+            ? 'pressed'
+            : 'idle';
+    const dataAttrs = {
+        'data-state': state,
+        'data-pressed': pressed ? 'true' : 'false',
+        'data-disabled': disabled ? 'true' : 'false',
+    };
+    const eventHandlers = {
+        onPressIn: (e) => {
+            if (disabled)
+                return;
+            setPressed(true);
+        },
+        onPressOut: (e) => {
+            if (disabled)
+                return;
+            setPressed(false);
+        },
+    };
+    return { state, dataAttrs, eventHandlers };
+}

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

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

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

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+export function useInteractiveState(options = {}) {
+    const { disabled } = 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';
+    const dataAttrs = {
+        'data-state': state,
+        'data-hovered': hovered ? 'true' : 'false',
+        'data-pressed': pressed ? 'true' : 'false',
+        'data-focused': focused ? 'true' : 'false',
+        'data-disabled': disabled ? 'true' : 'false',
+    };
+    const eventHandlers = {
+        onMouseEnter: () => {
+            if (disabled)
+                return;
+            setHovered(true);
+        },
+        onMouseLeave: () => {
+            if (disabled)
+                return;
+            setHovered(false);
+            setPressed(false);
+        },
+        onMouseDown: (e) => {
+            if (disabled || e.button !== 0)
+                return;
+            setPressed(true);
+        },
+        onMouseUp: () => {
+            if (disabled)
+                return;
+            setPressed(false);
+        },
+        onFocus: () => {
+            if (disabled)
+                return;
+            setFocused(true);
+        },
+        onBlur: () => {
+            if (disabled)
+                return;
+            setFocused(false);
+            setPressed(false);
+            setHovered(false);
+        },
+    };
+    return { state, dataAttrs, eventHandlers };
+}

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]);
+};

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

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

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

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

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

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

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

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

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

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

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