@particle-network/ui-native 0.0.2

package/dist/components/UXSwitch/types.d.ts

@@ -0,0 +1,11 @@
+import type { UXForegroundColor, UXSize } from '@particle-network/ui-shared';
+import type { FlexProps } from '..';
+export type UXSwitchProps = FlexProps & {
+    color?: UXForegroundColor;
+    size?: UXSize;
+    isSelected?: boolean;
+    onValueChange?: (isSelected: boolean) => void;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    defaultSelected?: boolean;
+};

package/dist/components/UXTabs/context.d.ts

@@ -0,0 +1,5 @@
+import type { UXTabsProps } from './types';
+type TabsContextType = Pick<UXTabsProps, 'selectedKey' | 'onSelectionChange' | 'size' | 'color' | 'variant' | 'radius' | 'isDisabled'>;
+export declare const TabsContext: import("react").Context<TabsContextType>;
+export declare const useTabsContext: () => TabsContextType;
+export {};

package/dist/components/UXTabs/context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+const TabsContext = createContext({});
+const useTabsContext = ()=>{
+    const context = useContext(TabsContext);
+    if (!context) throw new Error('useTabsContext must be used within a UXTabs');
+    return context;
+};
+export { TabsContext, useTabsContext };

package/dist/components/UXTabs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './context';
+export * from './tab';
+export * from './tabs';
+export type * from './types';

package/dist/components/UXTabs/index.js

@@ -0,0 +1,3 @@
+export * from "./context.js";
+export * from "./tab.js";
+export * from "./tabs.js";

package/dist/components/UXTabs/styles.d.ts

@@ -0,0 +1,30 @@
+import type { UXTabsProps } from './types';
+export declare const useStyles: (props: Partial<UXTabsProps> & {
+    isSelected?: boolean;
+}) => {
+    tabsWrapper: {
+        backgroundColor: string | undefined;
+        gap: import("@particle-network/ui-shared").SpacingType;
+        flex: number;
+        justifyContent: "flex-start" | "space-between";
+        borderRadius: number | undefined;
+        height: number;
+        padding: number;
+        opacity: number;
+    };
+    tab: {
+        flexGrow: number;
+        height: "100%";
+        alignItems: "center";
+        justifyContent: "center";
+        paddingHorizontal: number;
+        borderRadius: number | undefined;
+        backgroundColor: string | undefined;
+    };
+    tabText: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "500";
+        color: string | undefined;
+    };
+};

package/dist/components/UXTabs/styles.js

@@ -0,0 +1,191 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { ms } from "react-native-size-matters";
+import { useColors, useRadius } from "../../hooks/index.js";
+import { disabledOpacity } from "../../theme/index.js";
+const useStyles = (props)=>{
+    const { size = 'md', radius, fullWidth, variant = 'solid', color = 'default', isDisabled, isSelected, w, gap } = props;
+    const { getColor } = useColors();
+    const { getRadius } = useRadius();
+    const height = useMemo(()=>{
+        if ('text' === variant) switch(size){
+            case 'sm':
+                return ms(16);
+            case 'lg':
+                return ms(20);
+            default:
+                return ms(18);
+        }
+        if ('solid' === variant) switch(size){
+            case 'sm':
+                return ms(24);
+            case 'lg':
+                return ms(40);
+            default:
+                return ms(30);
+        }
+        switch(size){
+            case 'sm':
+                return ms(24);
+            case 'lg':
+                return ms(34);
+            default:
+                return ms(30);
+        }
+    }, [
+        size,
+        variant
+    ]);
+    const fontSize = useMemo(()=>{
+        switch(size){
+            case 'sm':
+                return ms(12);
+            case 'lg':
+                return ms(16);
+            default:
+                return ms(14);
+        }
+    }, [
+        size
+    ]);
+    const paddingHorizontal = useMemo(()=>{
+        if ('text' === variant) return 0;
+        switch(size){
+            case 'sm':
+                return ms(8);
+            case 'lg':
+                return ms(12);
+            default:
+                return ms(10);
+        }
+    }, [
+        size,
+        variant
+    ]);
+    const gapValue = useMemo(()=>{
+        if (gap) return gap;
+        if ('text' === variant) switch(size){
+            case 'sm':
+                return ms(14);
+            case 'lg':
+                return ms(24);
+            default:
+                return ms(20);
+        }
+        if ('light' === variant) return ms(10);
+        return 0;
+    }, [
+        variant,
+        size,
+        gap
+    ]);
+    const wrapperBackgroundColor = useMemo(()=>{
+        if ('switch' === variant) return getColor('bg-200');
+        if ('solid' === variant) return getColor('bg-400');
+        return 'transparent';
+    }, [
+        variant,
+        getColor
+    ]);
+    const wrapperBorderRadius = useMemo(()=>{
+        if ('solid' === variant || 'switch' === variant) {
+            if (radius) return getRadius(radius);
+            if ('lg' === size) return ms(10);
+            return ms(6);
+        }
+        return 0;
+    }, [
+        variant,
+        size,
+        radius
+    ]);
+    const wrapperPadding = useMemo(()=>{
+        if ('solid' === variant) {
+            if ('lg' === size) return ms(4);
+            return ms(2);
+        }
+        return 0;
+    }, [
+        variant,
+        size
+    ]);
+    const tabBorderRadius = useMemo(()=>{
+        if (radius) return getRadius(radius);
+        return ms(6);
+    }, [
+        variant,
+        radius
+    ]);
+    const tabBg = useMemo(()=>{
+        if (!isSelected) return 'transparent';
+        if ('text' === variant) return 'transparent';
+        if ('default' === color) {
+            if ('switch' === variant) return getColor('tertiary');
+            return getColor('bg-200');
+        }
+        return getColor(color);
+    }, [
+        variant,
+        color,
+        getColor,
+        isSelected
+    ]);
+    const tabTextColor = useMemo(()=>{
+        if (!isSelected) return getColor('secondary');
+        if ('text' === variant) {
+            if ('default' === color) return getColor('foreground');
+            return getColor(color);
+        }
+        if ('default' === color) return getColor('foreground');
+        return 'white';
+    }, [
+        variant,
+        color,
+        getColor,
+        isSelected
+    ]);
+    const styles = useMemo(()=>StyleSheet.create({
+            tabsWrapper: {
+                backgroundColor: wrapperBackgroundColor,
+                gap: gapValue,
+                flex: fullWidth || w ? 1 : 0,
+                justifyContent: fullWidth || w ? 'space-between' : 'flex-start',
+                borderRadius: wrapperBorderRadius,
+                height,
+                padding: wrapperPadding,
+                opacity: isDisabled ? disabledOpacity : 1
+            },
+            tab: {
+                flexGrow: 'text' === variant || 'light' === variant ? 0 : 1,
+                height: '100%',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingHorizontal,
+                borderRadius: tabBorderRadius,
+                backgroundColor: tabBg
+            },
+            tabText: {
+                fontSize,
+                lineHeight: fontSize + ms(4),
+                fontWeight: '500',
+                color: tabTextColor
+            }
+        }), [
+        variant,
+        height,
+        paddingHorizontal,
+        fontSize,
+        gapValue,
+        wrapperBackgroundColor,
+        wrapperBorderRadius,
+        tabBorderRadius,
+        wrapperPadding,
+        tabBg,
+        isDisabled,
+        tabTextColor,
+        fullWidth,
+        w
+    ]);
+    return styles;
+};
+export { useStyles };

package/dist/components/UXTabs/tab.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXTabProps } from './types';
+export declare const UXTab: React.FC<UXTabProps>;

package/dist/components/UXTabs/tab.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { HStack, Text, UXTouchableOpacity } from "../index.js";
+import DotIcon from "../../icons/DotIcon.js";
+import { useTabsContext } from "./context.js";
+import { useStyles } from "./styles.js";
+const UXTab = ({ tabKey = '', title, icon, style, notification })=>{
+    const { selectedKey, onSelectionChange, size, color, variant, radius, isDisabled } = useTabsContext();
+    const isSelected = selectedKey === tabKey;
+    const handlePress = useCallback(()=>{
+        if (!isDisabled && tabKey) onSelectionChange?.(tabKey);
+    }, [
+        isDisabled,
+        onSelectionChange,
+        tabKey
+    ]);
+    const styles = useStyles({
+        variant,
+        color,
+        size,
+        radius,
+        isSelected
+    });
+    return /*#__PURE__*/ jsx(UXTouchableOpacity, {
+        activeOpacity: 0.7,
+        disabled: isDisabled,
+        style: [
+            styles.tab,
+            style
+        ],
+        onPress: handlePress,
+        children: /*#__PURE__*/ jsxs(HStack, {
+            gap: 4,
+            position: "relative",
+            children: [
+                'function' == typeof icon ? icon(isSelected) : icon,
+                'function' == typeof title ? title(isSelected) : /*#__PURE__*/ jsx(Text, {
+                    style: styles.tabText,
+                    children: title
+                }),
+                notification ? /*#__PURE__*/ jsx(DotIcon, {
+                    color: "danger",
+                    size: 5,
+                    style: {
+                        position: 'absolute',
+                        right: -4,
+                        top: 0
+                    }
+                }) : null
+            ]
+        })
+    });
+};
+UXTab.displayName = 'UXTab';
+export { UXTab };

package/dist/components/UXTabs/tabs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXTabsProps } from './types';
+export declare const UXTabs: React.FC<UXTabsProps>;

package/dist/components/UXTabs/tabs.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useState } from "react";
+import useUpdateEffect from "ahooks/es/useUpdateEffect";
+import { HStack, VStack } from "../index.js";
+import { disabledOpacity } from "../../theme/index.js";
+import { TabsContext } from "./context.js";
+import { useStyles } from "./styles.js";
+const UXTabs = (props)=>{
+    const { style, tabStyle, color, size, variant, radius, selectedKey: selectedKeyProp, defaultSelectedKey, onSelectionChange, isDisabled, children, ...restProps } = props;
+    const firstTabKey = Children.toArray(children).find((child)=>{
+        if (/*#__PURE__*/ isValidElement(child) && child.key) return true;
+        return false;
+    });
+    const [selectedKey, setSelectedKey] = useState(selectedKeyProp || defaultSelectedKey || firstTabKey?.key || '');
+    useUpdateEffect(()=>{
+        if (void 0 !== selectedKeyProp) setSelectedKey(selectedKeyProp);
+    }, [
+        selectedKeyProp
+    ]);
+    const styles = useStyles(props);
+    const handleSelectionChange = (key)=>{
+        if (!isDisabled) {
+            setSelectedKey(key);
+            onSelectionChange?.(key);
+        }
+    };
+    const tabs = Children.map(children, async (child)=>{
+        if (/*#__PURE__*/ isValidElement(child) && child.key) return /*#__PURE__*/ cloneElement(child, {
+            tabKey: String(child.key),
+            style: tabStyle
+        });
+        return child;
+    });
+    const renderSelectedTabContent = ()=>Children.map(children, async (child)=>{
+            if (/*#__PURE__*/ isValidElement(child) && child.key === selectedKey) return child.props.children;
+            return null;
+        });
+    return /*#__PURE__*/ jsx(TabsContext.Provider, {
+        value: {
+            selectedKey,
+            onSelectionChange: handleSelectionChange,
+            size,
+            color,
+            variant,
+            radius,
+            isDisabled
+        },
+        children: /*#__PURE__*/ jsxs(VStack, {
+            gap: "md",
+            children: [
+                /*#__PURE__*/ jsx(HStack, {
+                    opacity: isDisabled ? disabledOpacity : 1,
+                    style: [
+                        styles.tabsWrapper,
+                        style
+                    ],
+                    ...restProps,
+                    children: tabs
+                }),
+                renderSelectedTabContent()
+            ]
+        })
+    });
+};
+UXTabs.displayName = 'UXTabs';
+export { UXTabs };

package/dist/components/UXTabs/types.d.ts

@@ -0,0 +1,23 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { UXForegroundColor, UXSize } from '@particle-network/ui-shared';
+import type { HStackProps } from '..';
+export interface UXTabsProps extends HStackProps {
+    color?: UXForegroundColor;
+    size?: UXSize;
+    variant?: 'solid' | 'light' | 'text' | 'switch';
+    selectedKey?: string;
+    defaultSelectedKey?: string;
+    onSelectionChange?: (key: string) => void;
+    isDisabled?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    tabStyle?: StyleProp<ViewStyle>;
+}
+export interface UXTabProps {
+    style?: StyleProp<ViewStyle>;
+    tabKey?: string;
+    title?: string | ((isSelected: boolean) => React.ReactNode);
+    icon?: React.ReactNode | ((isSelected: boolean) => React.ReactNode);
+    notification?: boolean;
+    children?: React.ReactNode;
+}

package/dist/components/UXTooltip/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type UXModalProps } from '..';
+export type UXTooltipProps = Partial<Omit<UXModalProps, 'isOpen' | 'onClose'>> & {
+    content: React.ReactNode;
+};
+export declare const UXTooltip: React.FC<UXTooltipProps>;

package/dist/components/UXTooltip/index.js

@@ -0,0 +1,32 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Text, UXModal, UXPressable } from "../index.js";
+const UXTooltip = (props)=>{
+    const { content, children, ...restProps } = props;
+    const [isShow, setIsShow] = useState(false);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(UXPressable, {
+                onPress: ()=>{
+                    setIsShow(true);
+                },
+                children: children
+            }),
+            /*#__PURE__*/ jsx(UXModal, {
+                wrapPortal: true,
+                isOpen: isShow,
+                onClose: ()=>{
+                    setIsShow(false);
+                },
+                ...restProps,
+                children: 'string' == typeof content ? /*#__PURE__*/ jsx(Text, {
+                    body2: true,
+                    lineHeight: "1.4",
+                    children: content
+                }) : content
+            })
+        ]
+    });
+};
+UXTooltip.displayName = 'UXTooltip';
+export { UXTooltip };

package/dist/components/UXTouchableOpacity/index.d.ts

@@ -0,0 +1,4 @@
+import { type TouchableOpacityProps, type View } from 'react-native';
+import { type UseBoxProps, type UseFlexProps } from '..';
+export type UXTouchableOpacityProps = TouchableOpacityProps & UseBoxProps & UseFlexProps;
+export declare const UXTouchableOpacity: import("react").ForwardRefExoticComponent<TouchableOpacityProps & UseBoxProps & UseFlexProps & import("react").RefAttributes<View>>;

package/dist/components/UXTouchableOpacity/index.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TouchableOpacity } from "react-native";
+import useDebounceFn from "ahooks/es/useDebounceFn";
+import { useFlexBoxStyle } from "../index.js";
+const UXTouchableOpacity = /*#__PURE__*/ forwardRef(({ onPress, style, ...props }, ref)=>{
+    const { run } = useDebounceFn(onPress || (()=>null), {
+        wait: 300,
+        leading: true,
+        trailing: false
+    });
+    const boxFlexStyle = useFlexBoxStyle(props);
+    return /*#__PURE__*/ jsx(TouchableOpacity, {
+        ref: ref,
+        style: [
+            boxFlexStyle,
+            style
+        ],
+        onPress: run,
+        ...props
+    });
+});
+UXTouchableOpacity.displayName = 'UXTouchableOpacity';
+export { UXTouchableOpacity };

package/dist/components/index.d.ts

@@ -0,0 +1,22 @@
+export * from './input';
+export * from './layout/Box';
+export * from './layout/Center';
+export * from './layout/Circle';
+export * from './layout/Flex';
+export * from './layout/HStack';
+export * from './layout/Square';
+export * from './layout/VStack';
+export * from './ProgressWrapper';
+export * from './Text';
+export * from './UXButton';
+export * from './UXCheckbox';
+export * from './UXChip';
+export * from './UXDivider';
+export * from './UXHint';
+export * from './UXModal';
+export * from './UXPressable';
+export * from './UXRadio';
+export * from './UXSwitch';
+export * from './UXTabs';
+export * from './UXTooltip';
+export * from './UXTouchableOpacity';

package/dist/components/index.js

@@ -0,0 +1,22 @@
+export * from "./input/index.js";
+export * from "./layout/Box/index.js";
+export * from "./layout/Center.js";
+export * from "./layout/Circle.js";
+export * from "./layout/Flex/index.js";
+export * from "./layout/HStack.js";
+export * from "./layout/Square.js";
+export * from "./layout/VStack.js";
+export * from "./ProgressWrapper/index.js";
+export * from "./Text/index.js";
+export * from "./UXButton/index.js";
+export * from "./UXCheckbox/index.js";
+export * from "./UXChip/index.js";
+export * from "./UXDivider/index.js";
+export * from "./UXHint/index.js";
+export * from "./UXModal/index.js";
+export * from "./UXPressable/index.js";
+export * from "./UXRadio/index.js";
+export * from "./UXSwitch/index.js";
+export * from "./UXTabs/index.js";
+export * from "./UXTooltip/index.js";
+export * from "./UXTouchableOpacity/index.js";

package/dist/components/input/index.d.ts

@@ -0,0 +1,3 @@
+export * from './input';
+export * from './number-input';
+export type * from './types';

package/dist/components/input/index.js

@@ -0,0 +1,2 @@
+export * from "./input.js";
+export * from "./number-input.js";

package/dist/components/input/input.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXInputProps, UXInputRef } from './types';
+export declare const UXInput: React.ForwardRefExoticComponent<UXInputProps & React.RefAttributes<UXInputRef>>;