@particle-network/ui-native 0.0.2

package/dist/components/UXButton/button.styles.d.ts

@@ -0,0 +1,53 @@
+import type { UXButtonProps } from './button.types';
+export declare const sizeMap: {
+    readonly sm: number;
+    readonly md: number;
+    readonly lg: number;
+    readonly auto: undefined;
+};
+export declare const fontSizeMap: {
+    readonly sm: number;
+    readonly md: number;
+    readonly lg: number;
+    readonly auto: number;
+};
+export declare const radiusMap: {
+    readonly sm: "sm";
+    readonly md: "sm";
+    readonly lg: "md";
+    readonly auto: "sm";
+};
+export declare const useStyles: ({ size, radius, color, variant, isDisabled, isLoading, width, fullWidth, fill, isIconOnly, }: UXButtonProps) => {
+    styles: {
+        button: {
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+            gap: number;
+            paddingVertical: number;
+            height: number | undefined;
+            width: number | "100%" | undefined;
+            flexGrow: number | undefined;
+            paddingHorizontal: number;
+            backgroundColor: string | undefined;
+            borderRadius: number | undefined;
+            borderWidth: number;
+            borderStyle: "solid";
+            borderColor: string | undefined;
+            opacity: number;
+        };
+        buttonPressed: {
+            opacity: number;
+            transform: {
+                scale: number;
+            }[];
+        };
+        title: {
+            fontWeight: "500" | "600";
+            fontSize: number;
+            lineHeight: number;
+            color: string | undefined;
+        };
+    };
+    textColor: string | undefined;
+};

package/dist/components/UXButton/button.styles.js

@@ -0,0 +1,157 @@
+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 sizeMap = {
+    sm: ms(24),
+    md: ms(30),
+    lg: ms(44),
+    auto: void 0
+};
+const fontSizeMap = {
+    sm: ms(10),
+    md: ms(12),
+    lg: ms(16),
+    auto: ms(12)
+};
+const radiusMap = {
+    sm: 'sm',
+    md: 'sm',
+    lg: 'md',
+    auto: 'sm'
+};
+const paddingMap = {
+    sm: ms(2),
+    md: ms(2),
+    lg: ms(4)
+};
+const useStyles = ({ size = 'md', radius, color = 'default', variant = 'solid', isDisabled, isLoading, width, fullWidth, fill, isIconOnly })=>{
+    const { getColor } = useColors();
+    const { getRadius } = useRadius();
+    const height = useMemo(()=>{
+        if ('text' === variant || 'auto' === size) return;
+        return sizeMap[size];
+    }, [
+        size,
+        variant
+    ]);
+    const widthStyle = useMemo(()=>{
+        if (isIconOnly) return height;
+        if (fullWidth) return '100%';
+        return width;
+    }, [
+        fullWidth,
+        height,
+        isIconOnly,
+        width
+    ]);
+    const fontSize = useMemo(()=>fontSizeMap[size], [
+        size
+    ]);
+    const borderRadius = useMemo(()=>getRadius(radius ?? radiusMap[size]), [
+        radius,
+        size
+    ]);
+    const paddingHorizontal = useMemo(()=>{
+        if (isIconOnly || 'auto' === size || 'text' === variant) return 0;
+        return paddingMap[size];
+    }, [
+        size,
+        isIconOnly,
+        variant
+    ]);
+    const textColor = useMemo(()=>{
+        if ('default' === color) return getColor('default');
+        if ('secondary' === color) return getColor('secondary');
+        if ('contrast' === color) return getColor('bg-default');
+        if ('solid' === variant) return getColor('white');
+        return getColor(color);
+    }, [
+        color,
+        getColor,
+        variant
+    ]);
+    const backgroundColor = useMemo(()=>{
+        if ('solid' === variant) {
+            if ([
+                'default',
+                'secondary'
+            ].includes(color)) return getColor('bg-300');
+            if ('contrast' === color) return getColor('foreground');
+            return getColor(color);
+        }
+        if ('flat' === variant) {
+            if ([
+                'default',
+                'secondary'
+            ].includes(color)) return `${getColor('bg-300')}40`;
+            if ('contrast' === color) return `${getColor('foreground')}40`;
+            return `${getColor(color)}20`;
+        }
+        return 'transparent';
+    }, [
+        color,
+        getColor,
+        variant
+    ]);
+    const borderColor = useMemo(()=>{
+        if ('bordered' === variant) {
+            if ([
+                'default',
+                'secondary'
+            ].includes(color)) return getColor('secondary');
+            if ('contrast' === color) return getColor('bg-default');
+            return getColor(color);
+        }
+        return 'transparent';
+    }, [
+        color,
+        getColor,
+        variant
+    ]);
+    const fontWeight = useMemo(()=>{
+        if ('lg' === size) return '600';
+        return '500';
+    }, [
+        size
+    ]);
+    const styles = StyleSheet.create({
+        button: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: ms(8),
+            paddingVertical: 0,
+            height,
+            width: widthStyle,
+            flexGrow: fill ? 1 : void 0,
+            paddingHorizontal,
+            backgroundColor,
+            borderRadius,
+            borderWidth: 'bordered' === variant ? 1 : 0,
+            borderStyle: 'solid',
+            borderColor,
+            opacity: isDisabled || isLoading ? disabledOpacity : 1
+        },
+        buttonPressed: {
+            opacity: 0.8,
+            transform: [
+                {
+                    scale: 0.98
+                }
+            ]
+        },
+        title: {
+            fontWeight,
+            fontSize,
+            lineHeight: fontSize + ms(4),
+            color: textColor
+        }
+    });
+    return {
+        styles,
+        textColor
+    };
+};
+export { fontSizeMap, radiusMap, sizeMap, useStyles };

package/dist/components/UXButton/button.types.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { UXRadius } from '@particle-network/ui-shared';
+export interface UXButtonProps extends Omit<PressableProps, 'style'> {
+    style?: StyleProp<ViewStyle>;
+    color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'bullish' | 'bearish' | 'contrast';
+    size?: 'sm' | 'md' | 'lg' | 'auto';
+    variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'text';
+    radius?: UXRadius;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    startContent?: React.ReactNode;
+    endContent?: React.ReactNode;
+    isIconOnly?: boolean;
+    fullWidth?: boolean;
+    width?: number;
+    fill?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export * from './button';
+export type * from './button.types';

package/dist/components/UXButton/index.js

@@ -0,0 +1 @@
+export * from "./button.js";

package/dist/components/UXCheckbox/checkbox-group.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type FlexProps } from '..';
+import type { UXCheckboxCommonProps } from './types';
+export type UXCheckboxGroupProps = UXCheckboxCommonProps & FlexProps & {
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+export declare const UXCheckboxGroup: React.FC<UXCheckboxGroupProps>;

package/dist/components/UXCheckbox/checkbox-group.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Flex } from "../index.js";
+import { CheckboxGroupContext } from "./context.js";
+const UXCheckboxGroup = ({ size, isDisabled, color, children, gap = 8, value = [], onValueChange, ...props })=>{
+    const handleValueChange = (checkboxValue, selected)=>{
+        if (selected) onValueChange?.([
+            ...value,
+            checkboxValue
+        ]);
+        else onValueChange?.(value.filter((v)=>v !== checkboxValue));
+    };
+    return /*#__PURE__*/ jsx(CheckboxGroupContext.Provider, {
+        value: {
+            size,
+            isDisabled,
+            color,
+            selectedValues: value,
+            onValueChange: handleValueChange
+        },
+        children: /*#__PURE__*/ jsx(Flex, {
+            direction: "col",
+            gap: gap,
+            ...props,
+            children: children
+        })
+    });
+};
+UXCheckboxGroup.displayName = 'UXCheckboxGroup';
+export { UXCheckboxGroup };

package/dist/components/UXCheckbox/checkbox.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type FlexProps } from '..';
+import type { UXCheckboxCommonProps } from './types';
+export type UXCheckboxProps = UXCheckboxCommonProps & FlexProps & {
+    defaultSelected?: boolean;
+    isSelected?: boolean;
+    value?: string;
+    onValueChange?: (selected: boolean) => void;
+};
+export declare const UXCheckbox: React.FC<UXCheckboxProps>;

package/dist/components/UXCheckbox/checkbox.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { ms } from "react-native-size-matters";
+import { Flex, Text, UXPressable } from "../index.js";
+import CheckboxOffIcon from "../../icons/CheckboxOffIcon.js";
+import CheckboxOnIcon from "../../icons/CheckboxOnIcon.js";
+import { disabledOpacity } from "../../theme/index.js";
+import { useCheckboxGroup } from "./context.js";
+const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children, value, onValueChange, isDisabled, ...props })=>{
+    const [internalSelected, setInternalSelected] = useState(defaultSelected ?? isSelected);
+    const groupContext = useCheckboxGroup();
+    const isInGroup = null !== groupContext;
+    useEffect(()=>{
+        if (isInGroup) setInternalSelected(groupContext.selectedValues.includes(value));
+        else void 0 !== isSelected ? setInternalSelected(isSelected) : setInternalSelected(defaultSelected);
+    }, [
+        isSelected,
+        groupContext,
+        defaultSelected
+    ]);
+    const checkboxColor = color || groupContext?.color || 'primary';
+    const checkboxIsDisabled = isDisabled || groupContext?.isDisabled;
+    const checkboxSize = size || groupContext?.size || 'md';
+    const handleSelectChange = ()=>{
+        if (isInGroup) groupContext.onValueChange(value, !internalSelected);
+        else {
+            onValueChange?.(!internalSelected);
+            setInternalSelected(!internalSelected);
+        }
+    };
+    const iconSize = useMemo(()=>{
+        if ('sm' === checkboxSize) return ms(14);
+        if ('lg' === checkboxSize) return ms(20);
+        return ms(16);
+    }, [
+        checkboxSize
+    ]);
+    const labelVariant = useMemo(()=>{
+        if ('sm' === checkboxSize) return 'body3Bold';
+        if ('lg' === checkboxSize) return 'body1Bold';
+        return 'body2Bold';
+    }, [
+        checkboxSize
+    ]);
+    const gap = useMemo(()=>{
+        if ('sm' === checkboxSize) return 6;
+        return 8;
+    }, [
+        checkboxSize
+    ]);
+    return /*#__PURE__*/ jsx(UXPressable, {
+        disabled: checkboxIsDisabled,
+        style: {
+            opacity: checkboxIsDisabled ? disabledOpacity : 1
+        },
+        onPress: handleSelectChange,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            gap: gap,
+            items: "center",
+            ...props,
+            children: [
+                internalSelected ? /*#__PURE__*/ jsx(CheckboxOnIcon, {
+                    color: checkboxColor,
+                    size: iconSize
+                }) : /*#__PURE__*/ jsx(CheckboxOffIcon, {
+                    color: "secondary",
+                    size: iconSize
+                }),
+                'string' == typeof children ? /*#__PURE__*/ jsx(Text, {
+                    variant: labelVariant,
+                    children: children
+                }) : children
+            ]
+        })
+    });
+};
+UXCheckbox.displayName = 'UXCheckbox';
+export { UXCheckbox };

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

@@ -0,0 +1,8 @@
+import type { UXCheckboxCommonProps } from './types';
+type CheckboxGroupContextType = UXCheckboxCommonProps & {
+    selectedValues: string[];
+    onValueChange: (value: string, selected: boolean) => void;
+};
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextType | null>;
+export declare const useCheckboxGroup: () => CheckboxGroupContextType | null;
+export {};

package/dist/components/UXCheckbox/context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+const CheckboxGroupContext = createContext(null);
+const useCheckboxGroup = ()=>{
+    const context = useContext(CheckboxGroupContext);
+    if (!context) return null;
+    return context;
+};
+export { CheckboxGroupContext, useCheckboxGroup };

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

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

package/dist/components/UXCheckbox/index.js

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

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

@@ -0,0 +1,6 @@
+import type { UXForegroundColor } from '@particle-network/ui-shared';
+export interface UXCheckboxCommonProps {
+    color?: UXForegroundColor;
+    size?: 'sm' | 'md' | 'lg';
+    isDisabled?: boolean;
+}

package/dist/components/UXChip/chip.d.ts

@@ -0,0 +1,3 @@
+import type { View } from 'react-native';
+import type { UXChipProps } from './types';
+export declare const UXChip: import("react").ForwardRefExoticComponent<UXChipProps & import("react").RefAttributes<View>>;

package/dist/components/UXChip/chip.js

@@ -0,0 +1,48 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { HStack, Text } from "../index.js";
+import { useStyles } from "./styles.js";
+const UXChip = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { style, size, gap = 2, radius = 4, color, variant, isDisabled, startContent, endContent, children, ...restProps } = props;
+    const styles = useStyles({
+        size,
+        color,
+        variant,
+        isDisabled
+    });
+    const content = useMemo(async ()=>{
+        if ('string' == typeof children || 'number' == typeof children) return /*#__PURE__*/ jsx(Text, {
+            style: styles.title,
+            children: children.toString()
+        });
+        return children;
+    }, [
+        children,
+        styles.title
+    ]);
+    const renderChildren = useMemo(()=>/*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                startContent,
+                content,
+                endContent
+            ]
+        }), [
+        content,
+        startContent,
+        endContent
+    ]);
+    return /*#__PURE__*/ jsx(HStack, {
+        ref: ref,
+        gap: gap,
+        ph: 4,
+        radius: radius,
+        style: [
+            styles.button,
+            style
+        ],
+        ...restProps,
+        children: renderChildren
+    });
+});
+UXChip.displayName = 'UXChip';
+export { UXChip };

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

@@ -0,0 +1,2 @@
+export * from './chip';
+export type * from './types';

package/dist/components/UXChip/index.js

@@ -0,0 +1 @@
+export * from "./chip.js";

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

@@ -0,0 +1,24 @@
+import type { UXChipProps } from './types';
+export declare const sizeMap: {
+    readonly sm: number;
+    readonly md: number;
+    readonly lg: number;
+};
+export declare const fontSizeMap: {
+    readonly sm: number;
+    readonly md: number;
+    readonly lg: number;
+};
+export declare const useStyles: ({ size, color, variant, isDisabled }: UXChipProps) => {
+    button: {
+        height: number;
+        backgroundColor: string | undefined;
+        opacity: number;
+    };
+    title: {
+        fontWeight: 400;
+        fontSize: number;
+        lineHeight: number;
+        color: string | undefined;
+    };
+};

package/dist/components/UXChip/styles.js

@@ -0,0 +1,70 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { ms } from "react-native-size-matters";
+import { useColors } from "../../hooks/index.js";
+import { disabledOpacity } from "../../theme/index.js";
+const sizeMap = {
+    sm: ms(14),
+    md: ms(16),
+    lg: ms(18)
+};
+const fontSizeMap = {
+    sm: ms(11),
+    md: ms(12),
+    lg: ms(14)
+};
+const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisabled })=>{
+    const { getColor } = useColors();
+    const height = useMemo(()=>sizeMap[size], [
+        size
+    ]);
+    const fontSize = useMemo(()=>fontSizeMap[size], [
+        size
+    ]);
+    const textColor = useMemo(()=>{
+        if ('default' === color) return getColor('default');
+        if ('secondary' === color) return getColor('secondary');
+        if ('solid' === variant) return getColor('white');
+        return getColor(color);
+    }, [
+        color,
+        getColor,
+        variant
+    ]);
+    const backgroundColor = useMemo(()=>{
+        if ('solid' === variant) {
+            if ([
+                'default',
+                'secondary'
+            ].includes(color)) return getColor('bg-300');
+            return getColor(color);
+        }
+        if ('flat' === variant) {
+            if ([
+                'default',
+                'secondary'
+            ].includes(color)) return getColor('bg-300');
+            return `${getColor(color)}20`;
+        }
+        return 'transparent';
+    }, [
+        color,
+        getColor,
+        variant
+    ]);
+    const styles = StyleSheet.create({
+        button: {
+            height,
+            backgroundColor,
+            opacity: isDisabled ? disabledOpacity : 1
+        },
+        title: {
+            fontWeight: 400,
+            fontSize,
+            lineHeight: fontSize + 2,
+            color: textColor
+        }
+    });
+    return styles;
+};
+export { fontSizeMap, sizeMap, useStyles };

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

@@ -0,0 +1,11 @@
+import type React from 'react';
+import type { UXForegroundColor } from '@particle-network/ui-shared';
+import type { HStackProps } from '..';
+export interface UXChipProps extends HStackProps {
+    color?: UXForegroundColor;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'solid' | 'flat';
+    isDisabled?: boolean;
+    startContent?: React.ReactNode;
+    endContent?: React.ReactNode;
+}

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

@@ -0,0 +1,8 @@
+import type { View } from 'react-native';
+import { type BoxProps } from '..';
+export interface UXDividerProps extends Omit<BoxProps, 'w' | 'h'> {
+    w?: number;
+    h?: number;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const UXDivider: import("react").ForwardRefExoticComponent<UXDividerProps & import("react").RefAttributes<View>>;

package/dist/components/UXDivider/index.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { Box } from "../index.js";
+const UXDivider = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { w, h, orientation = 'horizontal', style, ...restProps } = props;
+    const width = useMemo(()=>{
+        if (w) return w;
+        return 'vertical' === orientation ? 1 : '100%';
+    }, [
+        w,
+        orientation
+    ]);
+    const height = useMemo(()=>{
+        if (h) return h;
+        return 'horizontal' === orientation ? 1 : '100%';
+    }, [
+        h,
+        orientation
+    ]);
+    return /*#__PURE__*/ jsx(Box, {
+        ref: ref,
+        bg: "divider",
+        style: [
+            {
+                width,
+                height
+            },
+            style
+        ],
+        ...restProps
+    });
+});
+UXDivider.displayName = 'UXDivider';
+export { UXDivider };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type UXTooltipProps } from '..';
+import type { IconProps } from '../../icons/types';
+export type UXHintProps = UXTooltipProps & {
+    iconStyle?: IconProps['style'];
+};
+export declare const UXHint: React.FC<UXHintProps>;

package/dist/components/UXHint/index.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { ms } from "react-native-size-matters";
+import { UXTooltip } from "../index.js";
+import QuestionIcon from "../../icons/QuestionIcon.js";
+const UXHint = (props)=>{
+    const { content, children, iconStyle, ...restProps } = props;
+    return /*#__PURE__*/ jsx(UXTooltip, {
+        content: content || children,
+        ...restProps,
+        children: /*#__PURE__*/ jsx(QuestionIcon, {
+            color: "secondary",
+            size: ms(12),
+            style: iconStyle
+        })
+    });
+};
+UXHint.displayName = 'UXHint';
+export { UXHint };