@particle-network/ui-react 0.4.3 → 0.4.5-beta.0

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

@@ -5,6 +5,8 @@ interface CommonProps {
     toastText?: string;
     withTooltip?: boolean;
     tooltipContent?: string;
+    withoutToast?: boolean;
+    onCopy?: () => void;
 }
 interface UXCopyProps extends CommonProps {
     children: React.ReactElement;

package/dist/components/UXCopy/index.js

@@ -7,14 +7,15 @@ import { useI18n } from "../../hooks/useI18n.js";
 import { toast } from "../UXToast/index.js";
 import { UXTooltip } from "../UXTooltip/index.js";
 import { shortAddress } from "./utils.js";
-const UXCopy = ({ className, copyText, toastText, withTooltip, tooltipContent, children })=>{
+const UXCopy = ({ className, copyText, toastText, withTooltip, tooltipContent, children, withoutToast, onCopy })=>{
     const i18n = useI18n();
     const handleCopy = ()=>{
         try {
             copy_to_clipboard(String(copyText));
-            toast.success(toastText || i18n.copy.success);
+            if (!withoutToast) toast.success(toastText || i18n.copy.success);
+            onCopy?.();
         } catch (error) {
-            toast.error(`${i18n.copy.error}${error instanceof Error ? error.message : String(error)}`);
+            if (!withoutToast) toast.error(`${i18n.copy.error}${error instanceof Error ? error.message : String(error)}`);
         }
     };
     const childrenWithProps = /*#__PURE__*/ react.cloneElement(children, {

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

@@ -1,8 +1,10 @@
 import React from 'react';
-import { type UXModalProps } from '../UXModal';
-export type UXThemeSwitchModalProps = Omit<UXModalProps, 'children'>;
+import type { UXModalProps } from '../UXModal';
+export interface UXThemeSwitchModalProps extends Pick<UXModalProps, 'isOpen' | 'onClose' | 'onOpenChange' | 'backdrop'> {
+    as?: 'modal' | 'drawer';
+}
 export declare const UXThemeSwitchModal: React.FC<UXThemeSwitchModalProps>;
-export interface UXThemeSwitchProps {
+export interface UXThemeSwitchProps extends Pick<UXThemeSwitchModalProps, 'as' | 'backdrop'> {
     children?: (onOpen: () => void) => React.ReactNode;
 }
 export declare const UXThemeSwitch: React.FC<UXThemeSwitchProps>;

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

@@ -10,6 +10,7 @@ import { 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 { UXDrawer } from "../UXDrawer/index.js";
 import { UXInput } from "../UXInput/index.js";
 import { UXModal } from "../UXModal/index.js";
 import { UXSpinner } from "../UXSpinner/index.js";
@@ -29,16 +30,18 @@ const FONT_EXAMPLES = [
         url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'
     }
 ];
-const UXThemeSwitchModal = ({ isOpen, onClose, onOpenChange, ...props })=>{
+const UXThemeSwitchModal = ({ as = 'modal', backdrop, isOpen, onClose, onOpenChange })=>{
     const i18n = useI18n();
     const { theme: selectedTheme, setTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
     const [isFontExampleOpen, setIsFontExampleOpen] = useState(false);
-    return /*#__PURE__*/ jsx(UXModal, {
+    const Component = 'modal' === as ? UXModal : UXDrawer;
+    return /*#__PURE__*/ jsx(Component, {
         isOpen: isOpen,
         classNames: {
-            base: 'md:max-h-[800px]'
+            base: 'modal' === as ? 'md:max-h-[800px]' : ''
         },
         title: i18n.theme.title,
+        backdrop: backdrop,
         footer: /*#__PURE__*/ jsx(UXButton, {
             fullWidth: true,
             size: "lg",
@@ -47,7 +50,6 @@ const UXThemeSwitchModal = ({ isOpen, onClose, onOpenChange, ...props })=>{
             children: i18n.theme.done
         }),
         onOpenChange: onOpenChange,
-        ...props,
         children: /*#__PURE__*/ jsxs(VStack, {
             gap: "lg",
             children: [
@@ -157,7 +159,7 @@ const UXThemeSwitchModal = ({ isOpen, onClose, onOpenChange, ...props })=>{
         })
     });
 };
-const UXThemeSwitch = ({ children })=>{
+const UXThemeSwitch = ({ as = 'modal', backdrop, children })=>{
     const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
     const renderChildren = ()=>{
         if (children) return children(onOpen);
@@ -172,6 +174,8 @@ const UXThemeSwitch = ({ children })=>{
         children: [
             renderChildren(),
             /*#__PURE__*/ jsx(UXThemeSwitchModal, {
+                as: as,
+                backdrop: backdrop,
                 isOpen: isOpen,
                 onClose: onClose,
                 onOpenChange: onOpenChange

package/dist/components/UXThemeSwitch/use-theme-color.d.ts

@@ -1 +1,22 @@
-export declare const useThemeColor: () => Record<import("@particle-network/ui-shared").UXColor, string>;
+export declare const useThemeColor: () => {
+    transparent: string;
+    white: string;
+    default: string;
+    alert: string;
+    success: string;
+    foreground: string;
+    secondary: string;
+    tertiary: string;
+    primary: string;
+    danger: string;
+    warning: string;
+    gold: string;
+    bullish: string;
+    bearish: string;
+    "bg-default": string;
+    "bg-300": string;
+    "bg-200": string;
+    "bg-400": string;
+    divider: string;
+    overlay: string;
+};

package/dist/components/UXThemeSwitch/use-theme-color.js

@@ -1,6 +1,10 @@
 import { useTheme } from "./use-theme.js";
 const useThemeColor = ()=>{
     const { theme } = useTheme();
-    return theme.colorVariables;
+    return {
+        ...theme.colorVariables,
+        transparent: 'transparent',
+        white: '#FFFFFF'
+    };
 };
 export { useThemeColor };

package/dist/components/typography/Text.type.d.ts

@@ -75,20 +75,6 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
      * | extrabold | 800         |
      */
     fontWeight?: TextWeight;
-    /**
-     * | color      | dark      | light     |
-     * | :--------- | :-------- | :-------- |
-     * | default    | -         | -         |
-     * | foreground | #FFFFFF   | #000000   |
-     * | secondary  | #A1A1AA   | #767A80   |
-     * | tertiary   | #4E4E56   | #D8D8DE   |
-     * | primary    | #D745FF   | #000000   |
-     * | success    | #45B167   | #2E9F4A   |
-     * | danger     | #E84A5A   | #DE4A40   |
-     * | alert      | #F57733   | #E65E16   |
-     * | warning    | #FF9821   | #FF9821   |
-     * | gold       | #FFB800   | #F38300   |
-     */
     color?: UXForegroundColor | `#${string}`;
     lineHeight?: TextLineHeight;
     align?: TextAlign;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.4.3",
+  "version": "0.4.5-beta.0",
   "type": "module",
   "exports": {
     ".": {
@@ -49,8 +49,8 @@
     "ahooks": "^3.9.4",
     "copy-to-clipboard": "^3.3.3",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.4.1",
-    "@particle-network/ui-shared": "0.3.1"
+    "@particle-network/icons": "0.4.2-beta.0",
+    "@particle-network/ui-shared": "0.3.2-beta.0"
   },
   "scripts": {
     "build": "rslib build",

package/tailwind-preset.js

@@ -201,7 +201,7 @@ module.exports = {
             },
             foreground: {
               100: '#D8D8DE',
-              300: '#767A80',
+              300: '#61656B',
               500: '#0C0C0F',
               DEFAULT: '#0C0C0F',
             },
@@ -223,7 +223,7 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             secondary: {
-              DEFAULT: '#767A80',
+              DEFAULT: '#61656B',
               foreground: '#FFFFFF',
             },
             tertiary: {
@@ -480,16 +480,16 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             success: {
-              DEFAULT: '#73D090',
-              foreground: '#000000',
+              DEFAULT: '#19AB5E',
+              foreground: '#FFFFFF',
             },
             danger: {
-              DEFAULT: '#F46271',
-              foreground: '#000000',
+              DEFAULT: '#FF5868',
+              foreground: '#FFFFFF',
             },
             warning: {
               DEFAULT: '#F8BF63',
-              foreground: '#000000',
+              foreground: '#FFFFFF',
             },
             divider: {
               DEFAULT: '#26272D',
@@ -497,19 +497,19 @@ module.exports = {
             },
             alert: {
               DEFAULT: '#F37A39',
-              foreground: '#000000',
+              foreground: '#FFFFFF',
             },
             gold: {
               DEFAULT: '#FFB800',
-              foreground: '#000000',
+              foreground: '#FFFFFF',
             },
             bullish: {
-              DEFAULT: '#73D090',
-              foreground: '#000000',
+              DEFAULT: '#19AB5E',
+              foreground: '#FFFFFF',
             },
             bearish: {
-              DEFAULT: '#F46271',
-              foreground: '#000000',
+              DEFAULT: '#FF5868',
+              foreground: '#FFFFFF',
             },
           },
         },
@@ -533,7 +533,7 @@ module.exports = {
             },
             foreground: {
               100: '#CFCFD7',
-              300: '#3D3C3F',
+              300: '#55585C',
               500: '#000000',
               DEFAULT: '#000000',
             },
@@ -555,7 +555,7 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             secondary: {
-              DEFAULT: '#3D3C3F',
+              DEFAULT: '#55585C',
               foreground: '#FFFFFF',
             },
             tertiary: {
@@ -809,7 +809,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#5D6466',
-              foreground: '#000000',
+              foreground: '#FFFFFF',
             },
             success: {
               DEFAULT: '#1FA67D',
@@ -1040,16 +1040,16 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             primary: {
-              100: '#EFF6F3',
-              200: '#D2E9DE',
-              300: '#B0E1C9',
-              400: '#8BDCB3',
-              500: '#61DC9B',
-              600: '#34CD79',
-              700: '#2A9B5A',
-              800: '#1F693E',
-              900: '#133A22',
-              DEFAULT: '#61DC9B',
+              100: '#F0F4F2',
+              200: '#C8DBD2',
+              300: '#9CC6B2',
+              400: '#6DB590',
+              500: '#459C6E',
+              600: '#3B805B',
+              700: '#316648',
+              800: '#264B35',
+              900: '#1A3224',
+              DEFAULT: '#459C6E',
               foreground: '#000000',
             },
             secondary: {
@@ -1094,6 +1094,85 @@ module.exports = {
             },
           },
         },
+        custom: {
+          extend: 'dark',
+          colors: {
+            default: {
+              DEFAULT: '#1F2025',
+              foreground: '#FFFFFF',
+            },
+            secondary: {
+              DEFAULT: '#BBBBC4',
+              foreground: '#000000',
+            },
+            tertiary: {
+              DEFAULT: '#4E4E56',
+              foreground: '#FFFFFF',
+            },
+            primary: {
+              100: '#EEF6F3',
+              200: '#BAE2D0',
+              300: '#7ED6AB',
+              400: '#39D385',
+              500: '#19AB5E',
+              600: '#188E4D',
+              700: '#16723E',
+              800: '#14572F',
+              900: '#0F3D21',
+              DEFAULT: '#19AB5E',
+              foreground: '#000000',
+            },
+            success: {
+              DEFAULT: '#19AB5E',
+              foreground: '#000000',
+            },
+            danger: {
+              DEFAULT: '#FF5868',
+              foreground: '#000000',
+            },
+            alert: {
+              DEFAULT: '#F37A39',
+              foreground: '#000000',
+            },
+            warning: {
+              DEFAULT: '#F8BF63',
+              foreground: '#000000',
+            },
+            gold: {
+              DEFAULT: '#FFB800',
+              foreground: '#000000',
+            },
+            overlay: {
+              DEFAULT: '#1F2025',
+              foreground: '#FFFFFF',
+            },
+            divider: {
+              DEFAULT: '#26272D',
+              foreground: '#FFFFFF',
+            },
+            bullish: {
+              DEFAULT: '#19AB5E',
+              foreground: '#000000',
+            },
+            bearish: {
+              DEFAULT: '#FF5868',
+              foreground: '#000000',
+            },
+            background: {
+              200: '#2A2A30',
+              300: '#1F2025',
+              400: '#171517',
+              500: '#100E11',
+              DEFAULT: '#100E11',
+            },
+            foreground: {
+              100: '#4E4E56',
+              300: '#BBBBC4',
+              500: '#FDFDFE',
+              DEFAULT: '#FDFDFE',
+            },
+          },
+        },
       },
       function({ addVariant, addComponents }) {
         addVariant('child', '& > *');