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

package/dist/components/UXEmpty/index.js

@@ -11,7 +11,7 @@ const UXEmpty = forwardRef((props, ref)=>{
     return /*#__PURE__*/ jsxs(VStack, {
         ref: ref,
         center: true,
-        gap: "sm",
+        gap: 1,
         ...restProps,
         children: [
             /*#__PURE__*/ jsx(EmptyIcon, {

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,6 @@
+export * from './theme-data';
+export * from './theme-switch';
+export * from './use-color-scheme';
+export * from './use-quote-color';
+export * from './use-theme';
+export * from './use-theme-color';

package/dist/components/UXThemeSwitch/index.js

@@ -0,0 +1,6 @@
+export * from "./theme-data.js";
+export * from "./theme-switch.js";
+export * from "./use-color-scheme.js";
+export * from "./use-quote-color.js";
+export * from "./use-theme.js";
+export * from "./use-theme-color.js";

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

@@ -0,0 +1,28 @@
+export type ThemeId = '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 {
+    id: ThemeId;
+    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: ThemeId[];

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

@@ -0,0 +1,304 @@
+const themeData = [
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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'
+        }
+    },
+    {
+        id: '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.id);
+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 ThemeItemType {
+    isSelected: boolean;
+    onClick: () => void;
+}
+export declare const ThemeItem: React.FC<ThemeItemProps>;

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

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { cn } from "@heroui/theme";
+import { useLang } from "../../hooks/index.js";
+import { VStack } from "../layout/index.js";
+import { Text } from "../typography/Text.js";
+const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
+    const lang = useLang();
+    return /*#__PURE__*/ jsxs(VStack, {
+        center: true,
+        className: cn('cursor-pointer hover:scale-105 transition-all duration-300', id),
+        onClick: onClick,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: cn('rounded-small border-1.5', isSelected ? 'border-primary' : 'border-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: "currentColor",
+                            className: "text-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: "currentColor",
+                                className: "text-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: "currentColor",
+                                className: "text-background"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "18.0957",
+                            y: "31",
+                            width: "100",
+                            height: "1",
+                            fill: "currentColor",
+                            className: "text-divider"
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "54.082",
+                            y: "41.2568",
+                            width: "30.0917",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: "currentColor",
+                            className: "text-foreground"
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "54.082",
+                            y: "53.2939",
+                            width: "19.5596",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: "currentColor",
+                            className: "text-bullish"
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "75.8994",
+                            y: "53.2939",
+                            width: "19.5596",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: "currentColor",
+                            className: "text-bearish"
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "86.4316",
+                            y: "41.2568",
+                            width: "6.01835",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: "currentColor",
+                            className: "text-secondary"
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "94.707",
+                            y: "41.2568",
+                            width: "6.01835",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: "currentColor",
+                            className: "text-secondary"
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "102.981",
+                            y: "41.2568",
+                            width: "6.01835",
+                            height: "6.01835",
+                            rx: "3.00917",
+                            fill: "currentColor",
+                            className: "text-secondary"
+                        }),
+                        /*#__PURE__*/ jsx("rect", {
+                            x: "27",
+                            y: "39",
+                            width: "22.5688",
+                            height: "22.5688",
+                            rx: "11.2844",
+                            fill: "currentColor",
+                            className: "text-primary"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                children: 'zh' === lang ? zhName : enName
+            })
+        ]
+    });
+};
+export { ThemeItem };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DrawerProps } from '@heroui/drawer';
+export type UXThemeSwitchDrawerProps = Omit<DrawerProps, 'children'>;
+export declare const UXThemeSwitchDrawer: React.FC<UXThemeSwitchDrawerProps>;
+export interface UXThemeSwitchProps {
+    children?: (onOpen: () => void) => React.ReactNode;
+}
+export declare const UXThemeSwitch: React.FC<UXThemeSwitchProps>;