@particle-network/ui-react 0.3.2-beta.2 → 0.4.0-beta.0

package/dist/components/UXEmpty/index.js

@@ -11,16 +11,16 @@ const UXEmpty = forwardRef((props, ref)=>{
     return /*#__PURE__*/ jsxs(VStack, {
         ref: ref,
         center: true,
-        gap: 4,
+        gap: 1,
         ...restProps,
         children: [
             /*#__PURE__*/ jsx(EmptyIcon, {
                 color: "secondary",
-                size: 64,
+                size: 48,
                 ...iconProps
             }),
             /*#__PURE__*/ jsx(Text, {
-                h2: true,
+                body1: true,
                 color: "secondary",
                 fontWeight: "normal",
                 children: text

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

@@ -302,7 +302,6 @@ export declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
     key?: React.Key | null | undefined;
     labelPlacement?: "inside" | "outside" | "outside-left" | "outside-top" | undefined;
     label?: React.ReactNode;
-    isInvalid?: boolean | undefined;
     disableAnimation?: boolean | undefined;
     isDisabled?: boolean | undefined;
     pattern?: string | undefined;
@@ -328,6 +327,7 @@ export declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
     classNames?: import("@heroui/theme").SlotsToClasses<"label" | "inputWrapper" | "base" | "input" | "errorMessage" | "helperWrapper" | "description" | "innerWrapper" | "mainWrapper" | "clearButton"> | undefined;
     isReadOnly?: boolean | undefined;
     validationState?: import("@react-types/shared").ValidationState | undefined;
+    isInvalid?: boolean | undefined;
     errorMessage?: React.ReactNode | ((v: import("@react-types/shared").ValidationResult) => React.ReactNode);
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;

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

@@ -299,7 +299,6 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<Omit<{
     key?: import("react").Key | null | undefined;
     labelPlacement?: "inside" | "outside" | "outside-left" | "outside-top" | undefined;
     label?: import("react").ReactNode;
-    isInvalid?: boolean | undefined;
     disableAnimation?: boolean | undefined;
     isDisabled?: boolean | undefined;
     pattern?: string | undefined;
@@ -325,6 +324,7 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<Omit<{
     classNames?: import("@heroui/theme").SlotsToClasses<"label" | "inputWrapper" | "base" | "input" | "errorMessage" | "helperWrapper" | "description" | "innerWrapper" | "mainWrapper" | "clearButton"> | undefined;
     isReadOnly?: boolean | undefined;
     validationState?: import("@react-types/shared").ValidationState | undefined;
+    isInvalid?: boolean | undefined;
     errorMessage?: import("react").ReactNode | ((v: import("@react-types/shared").ValidationResult) => import("react").ReactNode);
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;

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

@@ -0,0 +1,3 @@
+export * from './theme-data';
+export * from './theme-switch';
+export * from './use-theme';

package/dist/components/UXThemeSwitch/index.js

@@ -0,0 +1,3 @@
+export * from "./theme-data.js";
+export * from "./theme-switch.js";
+export * from "./use-theme.js";

package/dist/components/UXThemeSwitch/theme-data.d.ts

@@ -0,0 +1,28 @@
+export type ThemeKey = 'ux-purple-gold-dark' | 'ux-purple-gold-light' | 'ux-green-red-dark' | 'ux-green-red-light' | 'ux-green-red-soft-dark' | 'ux-green-red-soft-light' | 'gmgn-dark' | 'axiom-dark' | 'hyperliquid-dark' | 'phantom-dark' | 'binance-dark' | 'bullx-dark';
+export interface ThemeItemType {
+    key: ThemeKey;
+    zhName: string;
+    enName: string;
+    colorScheme: 'dark' | 'light';
+    colorVariables: {
+        foreground: string;
+        secondary: string;
+        tertiary: string;
+        primary: string;
+        success: string;
+        danger: string;
+        alert: string;
+        warning: string;
+        gold: string;
+        background: string;
+        'background-200': string;
+        'background-300': string;
+        'background-400': string;
+        overlay: string;
+        divider: string;
+        bullish: string;
+        bearish: string;
+    };
+}
+export declare const themeData: ThemeItemType[];
+export declare const themeKeys: ThemeKey[];

package/dist/components/UXThemeSwitch/theme-data.js

@@ -0,0 +1,304 @@
+const themeData = [
+    {
+        key: 'ux-purple-gold-dark',
+        zhName: 'UX 紫金 Dark',
+        enName: 'UX Purple/Gold Dark',
+        colorScheme: 'dark',
+        colorVariables: {
+            foreground: '#FFFFFF',
+            secondary: '#A1A1AA',
+            tertiary: '#4E4E56',
+            primary: '#D745FF',
+            success: '#45B167',
+            danger: '#E84A5A',
+            alert: '#F57733',
+            warning: '#FF9821',
+            gold: '#FFB800',
+            background: '#000000',
+            'background-200': '#1F1F23',
+            'background-300': '#17171C',
+            'background-400': '#0F0F0F',
+            overlay: '#17171C',
+            divider: '#282828',
+            bullish: '#D745FF',
+            bearish: '#FFAC34'
+        }
+    },
+    {
+        key: 'ux-purple-gold-light',
+        zhName: 'UX 紫金 Light',
+        enName: 'UX Purple/Gold Light',
+        colorScheme: 'light',
+        colorVariables: {
+            foreground: '#000000',
+            secondary: '#767A80',
+            tertiary: '#D8D8DE',
+            primary: '#D745FF',
+            success: '#2E9F4A',
+            danger: '#DE4A40',
+            alert: '#E65E16',
+            warning: '#FF9821',
+            gold: '#F38300',
+            background: '#F8F8FA',
+            'background-200': '#F0F0F2',
+            'background-300': '#F8F8FA',
+            'background-400': '#FFFFFF',
+            overlay: '#FFFFFF',
+            divider: '#E8E8ED',
+            bullish: '#D745FF',
+            bearish: '#F9A01E'
+        }
+    },
+    {
+        key: 'ux-green-red-dark',
+        zhName: 'UX 绿红 Dark',
+        enName: 'UX Green/Red Dark',
+        colorScheme: 'dark',
+        colorVariables: {
+            foreground: '#FFFFFF',
+            secondary: '#A1A1AA',
+            tertiary: '#4E4E56',
+            primary: '#D745FF',
+            success: '#45B167',
+            danger: '#E84A5A',
+            alert: '#F57733',
+            warning: '#FF9821',
+            gold: '#FFB800',
+            background: '#000000',
+            'background-200': '#1F1F23',
+            'background-300': '#17171C',
+            'background-400': '#0F0F0F',
+            overlay: '#17171C',
+            divider: '#282828',
+            bullish: '#45B167',
+            bearish: '#E84A5A'
+        }
+    },
+    {
+        key: 'ux-green-red-light',
+        zhName: 'UX 绿红 Light',
+        enName: 'UX Green/Red Light',
+        colorScheme: 'light',
+        colorVariables: {
+            foreground: '#000000',
+            secondary: '#767A80',
+            tertiary: '#D8D8DE',
+            primary: '#D745FF',
+            success: '#2E9F4A',
+            danger: '#DE4A40',
+            alert: '#E65E16',
+            warning: '#FF9821',
+            gold: '#F38300',
+            background: '#F8F8FA',
+            'background-200': '#F0F0F2',
+            'background-300': '#F8F8FA',
+            'background-400': '#FFFFFF',
+            overlay: '#FFFFFF',
+            divider: '#E8E8ED',
+            bullish: '#45B167',
+            bearish: '#E84A5A'
+        }
+    },
+    {
+        key: 'ux-green-red-soft-dark',
+        zhName: 'UX 柔和 Dark',
+        enName: 'UX Soft Dark',
+        colorScheme: 'dark',
+        colorVariables: {
+            foreground: '#FDFDFE',
+            secondary: '#BBBBC4',
+            tertiary: '#70707C',
+            primary: '#D745FF',
+            success: '#73D090',
+            danger: '#F46271',
+            alert: '#F37A39',
+            warning: '#F8BF63',
+            gold: '#FFB800',
+            background: '#100E11',
+            'background-200': '#2A2A30',
+            'background-300': '#17171C',
+            'background-400': '#19161B',
+            overlay: '#17171C',
+            divider: '#282828',
+            bullish: '#73D090',
+            bearish: '#F46271'
+        }
+    },
+    {
+        key: 'ux-green-red-soft-light',
+        zhName: 'UX 柔和 Light',
+        enName: 'UX Soft Light',
+        colorScheme: 'light',
+        colorVariables: {
+            foreground: '#0C0C0F',
+            secondary: '#363538',
+            tertiary: '#7B7B85',
+            primary: '#D745FF',
+            success: '#19AB5E',
+            danger: '#FF5868',
+            alert: '#F07939',
+            warning: '#F6932B',
+            gold: '#FFB800',
+            background: '#F6F6F6',
+            'background-200': '#E9E7EE',
+            'background-300': '#F6F6F6',
+            'background-400': '#FFFFFF',
+            overlay: '#FFFFFF',
+            divider: '#DAD7E0',
+            bullish: '#19AB5E',
+            bearish: '#FF5868'
+        }
+    },
+    {
+        key: 'gmgn-dark',
+        zhName: 'GMGN',
+        enName: 'GMGN',
+        colorScheme: 'dark',
+        colorVariables: {
+            foreground: '#F0F5F5',
+            secondary: '#C4CCCC',
+            tertiary: '#757E80',
+            primary: '#86D99F',
+            success: '#86D99F',
+            danger: '#F26682',
+            alert: '#F55832',
+            warning: '#EDB951',
+            gold: '#F5DA54',
+            background: '#0C0C0F',
+            'background-200': '#282A2E',
+            'background-300': '#1A1B1F',
+            'background-400': '#111214',
+            overlay: '#1A1B1F',
+            divider: '#282828',
+            bullish: '#1DB069',
+            bearish: '#DE4E52'
+        }
+    },
+    {
+        key: 'axiom-dark',
+        zhName: 'AXIOM',
+        enName: 'AXIOM',
+        colorScheme: 'dark',
+        colorVariables: {
+            foreground: '#FCFCFC',
+            secondary: '#C8C9D1',
+            tertiary: '#777A8C',
+            primary: '#526FFF',
+            success: '#2FE3AC',
+            danger: '#EC397A',
+            alert: '#F57733',
+            warning: '#F7931A',
+            gold: '#F7931A',
+            background: '#0C0C0F',
+            'background-200': '#333542',
+            'background-300': '#18181A',
+            'background-400': '#101114',
+            overlay: '#18181A',
+            divider: '#333542',
+            bullish: '#0B9981',
+            bearish: '#F23646'
+        }
+    },
+    {
+        key: 'hyperliquid-dark',
+        zhName: 'Hyperliquid',
+        enName: 'Hyperliquid',
+        colorScheme: 'dark',
+        colorVariables: {
+            foreground: '#F6FEFD',
+            secondary: '#D1D4DC',
+            tertiary: '#949E9C',
+            primary: '#50D2C1',
+            success: '#1FA67D',
+            danger: '#ED7088',
+            alert: '#EF8F50',
+            warning: '#FFB648',
+            gold: '#FFB648',
+            background: '#0F1A1F',
+            'background-200': '#273035',
+            'background-300': '#1B2429',
+            'background-400': '#0F1A1F',
+            overlay: '#1B2429',
+            divider: '#444651',
+            bullish: '#51D2C1',
+            bearish: '#D45B71'
+        }
+    },
+    {
+        key: 'phantom-dark',
+        zhName: 'Phantom',
+        enName: 'Phantom',
+        colorScheme: 'dark',
+        colorVariables: {
+            foreground: '#FFFFFF',
+            secondary: '#999999',
+            tertiary: '#757E80',
+            primary: '#AB9FF2',
+            success: '#2EC08B',
+            danger: '#F7525F',
+            alert: '#FF9C3F',
+            warning: '#FFD13F',
+            gold: '#FFD13F',
+            background: '#13121A',
+            'background-200': '#222222',
+            'background-300': '#272735',
+            'background-400': '#22212A',
+            overlay: '#272735',
+            divider: '#323232',
+            bullish: '#2EC08B',
+            bearish: '#FF7243'
+        }
+    },
+    {
+        key: 'binance-dark',
+        zhName: 'Binance',
+        enName: 'Binance',
+        colorScheme: 'dark',
+        colorVariables: {
+            foreground: '#EAECEF',
+            secondary: '#929AA5',
+            tertiary: '#707A8A',
+            primary: '#FCD535',
+            success: '#2EBD85',
+            danger: '#F6465D',
+            alert: '#FF693D',
+            warning: '#F0B90B',
+            gold: '#2DBD85',
+            background: '#0B0E11',
+            'background-200': '#29313D',
+            'background-300': '#202630',
+            'background-400': '#181A20',
+            overlay: '#202630',
+            divider: '#343B47',
+            bullish: '#2EBD85',
+            bearish: '#F6465D'
+        }
+    },
+    {
+        key: 'bullx-dark',
+        zhName: "Bullx's",
+        enName: "Bullx's",
+        colorScheme: 'dark',
+        colorVariables: {
+            foreground: '#E9E9E9',
+            secondary: '#98989B',
+            tertiary: '#686a6d',
+            primary: '#61DC9B',
+            success: '#459C6E',
+            danger: '#A13C45',
+            alert: '#E9BF52',
+            warning: '#DCC161',
+            gold: '#E9BF52',
+            background: '#09090B',
+            'background-200': '#1B1D22',
+            'background-300': '#0D0D10',
+            'background-400': '#0F0F0F',
+            overlay: '#0D0D10',
+            divider: '#1E2025',
+            bullish: '#459C6E',
+            bearish: '#A13C45'
+        }
+    }
+];
+const themeKeys = themeData.map((theme)=>theme.key);
+export { themeData, themeKeys };

package/dist/components/UXThemeSwitch/theme-item.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ThemeItemType } from './theme-data';
+export interface ThemeItemProps extends Pick<ThemeItemType, 'zhName' | 'enName' | 'colorVariables'> {
+    isSelected: boolean;
+    onClick: () => void;
+}
+export declare const ThemeItem: React.FC<ThemeItemProps>;

package/dist/components/UXThemeSwitch/theme-item.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { useLang } from "../../hooks/index.js";
+import { VStack } from "../layout/index.js";
+import { Text } from "../typography/Text.js";
+const ThemeItem = ({ zhName, enName, colorVariables, isSelected, onClick })=>{
+    const lang = useLang();
+    return /*#__PURE__*/ jsxs(VStack, {
+        center: true,
+        className: "cursor-pointer hover:scale-105 transition-all duration-300",
+        onClick: onClick,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "rounded-small border-1.5",
+                style: {
+                    borderColor: isSelected ? colorVariables.primary : 'transparent'
+                },
+                children: /*#__PURE__*/ jsxs("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "180",
+                    height: "106.5",
+                    viewBox: "0 0 120 71",
+                    fill: "none",
+                    children: [
+                        /*#__PURE__*/ jsx("rect", {
+                            opacity: "0.5",
+                            x: "1.9043",
+                            y: "2",
+                            width: "116.19",
+                            height: "67",
+                            rx: "5",
+                            fill: colorVariables.primary
+                        }),
+                        /*#__PURE__*/ jsx("mask", {
+                            id: "mask0_40928_218196",
+                            style: {
+                                maskType: 'alpha'
+                            },
+                            maskUnits: "userSpaceOnUse",
+                            x: "1",
+                            y: "2",
+                            width: "118",
+                            height: "67",
+                            children: /*#__PURE__*/ jsx("rect", {
+                                x: "1.9043",
+                                y: "2",
+                                width: "116.19",
+                                height: "67",
+                                rx: "5",
+                                fill: colorVariables.background
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("g", {
+                            mask: "url(#mask0_40928_218196)",
+                            children: /*#__PURE__*/ jsx("rect", {
+                                x: "17.1426",
+                                y: "18",
+                                width: "116.19",
+                                height: "67",
+                                rx: "6",
+                                fill: colorVariables.background
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "18.0957",
+                            y: "31",
+                            width: "100",
+                            height: "1",
+                            fill: colorVariables.divider
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "54.082",
+                            y: "41.2568",
+                            width: "30.0917",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: colorVariables.foreground
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "54.082",
+                            y: "53.2939",
+                            width: "19.5596",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: colorVariables.bullish
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "75.8994",
+                            y: "53.2939",
+                            width: "19.5596",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: colorVariables.bearish
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "86.4316",
+                            y: "41.2568",
+                            width: "6.01835",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: colorVariables.secondary
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "94.707",
+                            y: "41.2568",
+                            width: "6.01835",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: colorVariables.secondary
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "102.981",
+                            y: "41.2568",
+                            width: "6.01835",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: colorVariables.secondary
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "27",
+                            y: "39",
+                            width: "22.5688",
+                            height: "22.5688",
+                            rx: "11.2844",
+                            fill: colorVariables.primary
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                children: 'zh' === lang ? zhName : enName
+            })
+        ]
+    });
+};
+export { ThemeItem };

package/dist/components/UXThemeSwitch/theme-switch.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface UXThemeSwitchProps {
+    children?: (onOpen: () => void) => React.ReactNode;
+}
+export declare const UXThemeSwitch: React.FC<UXThemeSwitchProps>;

package/dist/components/UXThemeSwitch/theme-switch.js

@@ -0,0 +1,121 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from "@heroui/drawer";
+import { useDisclosure } from "@heroui/use-disclosure";
+import ThemeSwitchIcon from "@particle-network/icons/web/ThemeSwitchIcon";
+import { useI18n } from "../../hooks/index.js";
+import { Flex, HStack, VStack } from "../layout/index.js";
+import { Text } from "../typography/Text.js";
+import { UXButton } from "../UXButton/index.js";
+import { UXDivider } from "../UXDivider/index.js";
+import { UXInput } from "../UXInput/index.js";
+import { themeData } from "./theme-data.js";
+import { ThemeItem } from "./theme-item.js";
+import { useTheme } from "./use-theme.js";
+const UXThemeSwitch = ({ children })=>{
+    const i18n = useI18n();
+    const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
+    const { selectedTheme, setSelectedTheme, savedTheme, setSavedTheme, selectedFontLink, setSelectedFontLink, savedFontLink, setSavedFontLink } = useTheme();
+    const handleOpenChange = (_isOpen)=>{
+        onOpenChange();
+        if (!_isOpen) {
+            setSelectedTheme(savedTheme);
+            setSelectedFontLink(savedFontLink);
+        }
+    };
+    const handleApplyTheme = ()=>{
+        setSavedTheme(selectedTheme);
+        setSavedFontLink(selectedFontLink);
+        onClose();
+    };
+    const handleReset = ()=>{
+        setSelectedTheme(savedTheme);
+        setSelectedFontLink(savedFontLink);
+    };
+    const renderChildren = ()=>{
+        if (children) return children(onOpen);
+        return /*#__PURE__*/ jsx(UXButton, {
+            isIconOnly: true,
+            variant: "light",
+            onPress: onOpen,
+            children: /*#__PURE__*/ jsx(ThemeSwitchIcon, {})
+        });
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            renderChildren(),
+            /*#__PURE__*/ jsx(Drawer, {
+                isOpen: isOpen,
+                backdrop: "transparent",
+                onOpenChange: handleOpenChange,
+                children: /*#__PURE__*/ jsxs(DrawerContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(DrawerHeader, {
+                            className: "flex flex-col gap-1",
+                            children: i18n.theme.title
+                        }),
+                        /*#__PURE__*/ jsxs(DrawerBody, {
+                            children: [
+                                /*#__PURE__*/ jsx(Flex, {
+                                    wrap: true,
+                                    justify: "between",
+                                    className: "gap-y-5",
+                                    children: themeData.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
+                                            isSelected: selectedTheme.key === theme.key,
+                                            zhName: theme.zhName,
+                                            enName: theme.enName,
+                                            colorVariables: theme.colorVariables,
+                                            onClick: ()=>setSelectedTheme(theme)
+                                        }, theme.key))
+                                }),
+                                /*#__PURE__*/ jsx(UXDivider, {
+                                    className: "my-lg"
+                                }),
+                                /*#__PURE__*/ jsxs(VStack, {
+                                    gap: "md",
+                                    className: "w-full",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            className: "text-sm font-medium",
+                                            children: i18n.theme.font.title
+                                        }),
+                                        /*#__PURE__*/ jsx(UXInput, {
+                                            isClearable: true,
+                                            className: "w-full",
+                                            placeholder: i18n.theme.font.placeholder,
+                                            value: selectedFontLink,
+                                            onValueChange: setSelectedFontLink
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(DrawerFooter, {
+                            className: "mb-8",
+                            children: /*#__PURE__*/ jsxs(HStack, {
+                                fullWidth: true,
+                                gap: "lg",
+                                children: [
+                                    /*#__PURE__*/ jsx(UXButton, {
+                                        fullWidth: true,
+                                        size: "lg",
+                                        onPress: handleReset,
+                                        children: i18n.theme.reset
+                                    }),
+                                    /*#__PURE__*/ jsx(UXButton, {
+                                        fullWidth: true,
+                                        size: "lg",
+                                        color: "primary",
+                                        onPress: handleApplyTheme,
+                                        children: i18n.theme.apply
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+export { UXThemeSwitch };