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

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

@@ -24,7 +24,7 @@ export interface ProgressWrapperProps extends React.HTMLAttributes<HTMLDivElemen
     /**
      * 进度条颜色
      */
-    color?: UXForegroundColor | 'transparent';
+    color?: UXForegroundColor | 'transparent' | `#${string}`;
     /**
      * 进度条 SVG 样式
      */

package/dist/components/ProgressWrapper/index.js

@@ -2,10 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
 import { cn } from "@heroui/theme";
-import { getHexColorFromCSSVariable, radiusMap } from "@particle-network/ui-shared";
+import { radiusMap } from "@particle-network/ui-shared";
 import { useSize } from "ahooks";
 import { Center } from "../layout/index.js";
+import { useThemeColor } from "../UXThemeSwitch/use-theme-color.js";
 const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{
+    const uxColors = useThemeColor();
     const autoLayout = !width && !height;
     const containerRef = useRef(null);
     const { width: childWidth, height: childHeight } = useSize(containerRef) ?? {
@@ -34,8 +36,21 @@ const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', s
     const rectXY = strokeWidth / 2;
     const perimeter = 2 * (rectWidth + rectHeight);
     const strokeDashoffset = perimeter * (1 - clampedProgress / 100);
-    const colorValue = 'transparent' === color ? 'transparent' : getHexColorFromCSSVariable(color);
-    const trackColor = 'transparent' === color ? 'transparent' : `${colorValue}40`;
+    const colorValue = useMemo(()=>{
+        if ('transparent' === color) return 'transparent';
+        if (color.startsWith('#')) return color;
+        return uxColors[color];
+    }, [
+        color,
+        uxColors
+    ]);
+    const trackColor = useMemo(()=>{
+        if ('transparent' === color) return 'transparent';
+        return `${colorValue}40`;
+    }, [
+        color,
+        colorValue
+    ]);
     const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
     const createPathData = (x, y, w, h, r)=>{
         if (0 === r) return `

package/dist/components/UXDropdown/dropdown-item.js

@@ -177,7 +177,7 @@ const classes = {
             variant: 'flat',
             color: 'default',
             class: {
-                base: 'data-[hover=true]:bg-background-200 data-[hover=true]:text-default-foreground'
+                base: 'data-[hover=true]:bg-background-200 data-[focus-visible=true]:bg-background-200 data-[focus-visible=true]:dark:bg-background-200 data-[hover=true]:text-default-foreground data-[selectable=true]:focus:!bg-background-200 data-[selectable=true]:focus:dark:!bg-background-200'
             }
         },
         {

package/dist/components/UXSelect/index.js

@@ -18,7 +18,7 @@ const UXSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
                 selectorIcon
             ],
             trigger: [
-                'h-[30px] min-h-[30px] px-md bg-background-200',
+                'h-[30px] min-h-[30px] px-md bg-background-200 data-[hover=true]:bg-background-200 data-[hover=true]:opacity-hover',
                 trigger
             ],
             value: [
@@ -34,7 +34,7 @@ const UXSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
                 list: 'gap-0 [&_[data-slot="heading"]]:text-small [&_[data-slot="heading"]]:font-medium'
             },
             itemClasses: {
-                base: '!outline-none min-h-8 px-md rounded-small text-foreground-300 !outline-none data-[hover=true]:bg-background-200 data-[selected=true]:text-foreground gap-1',
+                base: '!outline-none min-h-8 px-md rounded-small text-foreground-300 !outline-none data-[hover=true]:bg-background-200 data-[focus-visible=true]:bg-background-200 data-[focus-visible=true]:dark:bg-background-200 data-[hover=true]:text-default-foreground data-[selectable=true]:focus:!bg-background-200 data-[selectable=true]:focus:dark:!bg-background-200 gap-1',
                 title: 'text-tiny font-medium antialiased',
                 selectedIcon: '[&>svg>polyline]:stroke-[2.5]'
             }

package/dist/components/UXTabs/tabs.classes.js

@@ -3,7 +3,7 @@ const tabsClasses = {
     variants: {
         variant: {
             solid: {
-                tabList: 'gap-0 bg-background-400',
+                tabList: 'gap-0 bg-background-200',
                 tab: 'py-0 !outline-none',
                 cursor: 'shadow-none inset-0',
                 tabContent: 'text-foreground-300 font-medium'
@@ -252,9 +252,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-background-200'
+                    '!bg-tertiary'
                 ],
-                tabContent: 'group-data-[selected=true]:text-default-foreground'
+                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
             }
         },
         {
@@ -264,9 +264,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-foreground-100'
+                    '!bg-tertiary'
                 ],
-                tabContent: 'group-data-[selected=true]:text-default-foreground'
+                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
             }
         },
         {
@@ -276,9 +276,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-background-300'
+                    '!bg-tertiary'
                 ],
-                tabContent: 'group-data-[selected=true]:text-default-foreground'
+                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
             }
         },
         {

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

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

package/dist/components/UXThemeSwitch/index.js

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

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

@@ -1,28 +1,12 @@
-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';
+import type { UXColor } from '@particle-network/ui-shared';
+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 type ColorScheme = 'dark' | 'light';
 export interface ThemeItemType {
-    key: ThemeKey;
+    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;
-    };
+    colorScheme: ColorScheme;
+    colorVariables: Record<UXColor, string>;
 }
 export declare const themeData: ThemeItemType[];
-export declare const themeKeys: ThemeKey[];
+export declare const themeKeys: ThemeId[];

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

@@ -1,10 +1,13 @@
 const themeData = [
     {
-        key: 'ux-purple-gold-dark',
+        id: 'ux-purple-gold-dark',
         zhName: 'UX 紫金 Dark',
         enName: 'UX Purple/Gold Dark',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#FFFFFF',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#FFFFFF',
             secondary: '#A1A1AA',
             tertiary: '#4E4E56',
@@ -14,10 +17,10 @@ const themeData = [
             alert: '#F57733',
             warning: '#FF9821',
             gold: '#FFB800',
-            background: '#000000',
-            'background-200': '#1F1F23',
-            'background-300': '#17171C',
-            'background-400': '#0F0F0F',
+            'bg-default': '#000000',
+            'bg-200': '#1F1F23',
+            'bg-300': '#17171C',
+            'bg-400': '#0F0F0F',
             overlay: '#17171C',
             divider: '#282828',
             bullish: '#D745FF',
@@ -25,11 +28,14 @@ const themeData = [
         }
     },
     {
-        key: 'ux-purple-gold-light',
+        id: 'ux-purple-gold-light',
         zhName: 'UX 紫金 Light',
         enName: 'UX Purple/Gold Light',
         colorScheme: 'light',
         colorVariables: {
+            default: '#000000',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#000000',
             secondary: '#767A80',
             tertiary: '#D8D8DE',
@@ -39,10 +45,10 @@ const themeData = [
             alert: '#E65E16',
             warning: '#FF9821',
             gold: '#F38300',
-            background: '#F8F8FA',
-            'background-200': '#F0F0F2',
-            'background-300': '#F8F8FA',
-            'background-400': '#FFFFFF',
+            'bg-default': '#F8F8FA',
+            'bg-200': '#F0F0F2',
+            'bg-300': '#F8F8FA',
+            'bg-400': '#FFFFFF',
             overlay: '#FFFFFF',
             divider: '#E8E8ED',
             bullish: '#D745FF',
@@ -50,11 +56,14 @@ const themeData = [
         }
     },
     {
-        key: 'ux-green-red-dark',
+        id: 'ux-green-red-dark',
         zhName: 'UX 绿红 Dark',
         enName: 'UX Green/Red Dark',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#FFFFFF',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#FFFFFF',
             secondary: '#A1A1AA',
             tertiary: '#4E4E56',
@@ -64,10 +73,10 @@ const themeData = [
             alert: '#F57733',
             warning: '#FF9821',
             gold: '#FFB800',
-            background: '#000000',
-            'background-200': '#1F1F23',
-            'background-300': '#17171C',
-            'background-400': '#0F0F0F',
+            'bg-default': '#000000',
+            'bg-200': '#1F1F23',
+            'bg-300': '#17171C',
+            'bg-400': '#0F0F0F',
             overlay: '#17171C',
             divider: '#282828',
             bullish: '#45B167',
@@ -75,11 +84,14 @@ const themeData = [
         }
     },
     {
-        key: 'ux-green-red-light',
+        id: 'ux-green-red-light',
         zhName: 'UX 绿红 Light',
         enName: 'UX Green/Red Light',
         colorScheme: 'light',
         colorVariables: {
+            default: '#000000',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#000000',
             secondary: '#767A80',
             tertiary: '#D8D8DE',
@@ -89,10 +101,10 @@ const themeData = [
             alert: '#E65E16',
             warning: '#FF9821',
             gold: '#F38300',
-            background: '#F8F8FA',
-            'background-200': '#F0F0F2',
-            'background-300': '#F8F8FA',
-            'background-400': '#FFFFFF',
+            'bg-default': '#F8F8FA',
+            'bg-200': '#F0F0F2',
+            'bg-300': '#F8F8FA',
+            'bg-400': '#FFFFFF',
             overlay: '#FFFFFF',
             divider: '#E8E8ED',
             bullish: '#45B167',
@@ -100,11 +112,14 @@ const themeData = [
         }
     },
     {
-        key: 'ux-green-red-soft-dark',
+        id: 'ux-green-red-soft-dark',
         zhName: 'UX 柔和 Dark',
         enName: 'UX Soft Dark',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#FDFDFE',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#FDFDFE',
             secondary: '#BBBBC4',
             tertiary: '#70707C',
@@ -114,10 +129,10 @@ const themeData = [
             alert: '#F37A39',
             warning: '#F8BF63',
             gold: '#FFB800',
-            background: '#100E11',
-            'background-200': '#2A2A30',
-            'background-300': '#17171C',
-            'background-400': '#19161B',
+            'bg-default': '#100E11',
+            'bg-200': '#2A2A30',
+            'bg-300': '#17171C',
+            'bg-400': '#19161B',
             overlay: '#17171C',
             divider: '#282828',
             bullish: '#73D090',
@@ -125,11 +140,14 @@ const themeData = [
         }
     },
     {
-        key: 'ux-green-red-soft-light',
+        id: 'ux-green-red-soft-light',
         zhName: 'UX 柔和 Light',
         enName: 'UX Soft Light',
         colorScheme: 'light',
         colorVariables: {
+            default: '#0C0C0F',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#0C0C0F',
             secondary: '#363538',
             tertiary: '#7B7B85',
@@ -139,10 +157,10 @@ const themeData = [
             alert: '#F07939',
             warning: '#F6932B',
             gold: '#FFB800',
-            background: '#F6F6F6',
-            'background-200': '#E9E7EE',
-            'background-300': '#F6F6F6',
-            'background-400': '#FFFFFF',
+            'bg-default': '#F6F6F6',
+            'bg-200': '#E9E7EE',
+            'bg-300': '#F6F6F6',
+            'bg-400': '#FFFFFF',
             overlay: '#FFFFFF',
             divider: '#DAD7E0',
             bullish: '#19AB5E',
@@ -150,11 +168,14 @@ const themeData = [
         }
     },
     {
-        key: 'gmgn-dark',
+        id: 'gmgn-dark',
         zhName: 'GMGN',
         enName: 'GMGN',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#F0F5F5',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#F0F5F5',
             secondary: '#C4CCCC',
             tertiary: '#757E80',
@@ -164,10 +185,10 @@ const themeData = [
             alert: '#F55832',
             warning: '#EDB951',
             gold: '#F5DA54',
-            background: '#0C0C0F',
-            'background-200': '#282A2E',
-            'background-300': '#1A1B1F',
-            'background-400': '#111214',
+            'bg-default': '#0C0C0F',
+            'bg-200': '#282A2E',
+            'bg-300': '#1A1B1F',
+            'bg-400': '#111214',
             overlay: '#1A1B1F',
             divider: '#282828',
             bullish: '#1DB069',
@@ -175,11 +196,14 @@ const themeData = [
         }
     },
     {
-        key: 'axiom-dark',
+        id: 'axiom-dark',
         zhName: 'AXIOM',
         enName: 'AXIOM',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#FCFCFC',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#FCFCFC',
             secondary: '#C8C9D1',
             tertiary: '#777A8C',
@@ -189,10 +213,10 @@ const themeData = [
             alert: '#F57733',
             warning: '#F7931A',
             gold: '#F7931A',
-            background: '#0C0C0F',
-            'background-200': '#333542',
-            'background-300': '#18181A',
-            'background-400': '#101114',
+            'bg-default': '#0C0C0F',
+            'bg-200': '#333542',
+            'bg-300': '#18181A',
+            'bg-400': '#101114',
             overlay: '#18181A',
             divider: '#333542',
             bullish: '#0B9981',
@@ -200,11 +224,14 @@ const themeData = [
         }
     },
     {
-        key: 'hyperliquid-dark',
+        id: 'hyperliquid-dark',
         zhName: 'Hyperliquid',
         enName: 'Hyperliquid',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#F6FEFD',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#F6FEFD',
             secondary: '#D1D4DC',
             tertiary: '#949E9C',
@@ -214,10 +241,10 @@ const themeData = [
             alert: '#EF8F50',
             warning: '#FFB648',
             gold: '#FFB648',
-            background: '#0F1A1F',
-            'background-200': '#273035',
-            'background-300': '#1B2429',
-            'background-400': '#0F1A1F',
+            'bg-default': '#0F1A1F',
+            'bg-200': '#273035',
+            'bg-300': '#1B2429',
+            'bg-400': '#0F1A1F',
             overlay: '#1B2429',
             divider: '#444651',
             bullish: '#51D2C1',
@@ -225,11 +252,14 @@ const themeData = [
         }
     },
     {
-        key: 'phantom-dark',
+        id: 'phantom-dark',
         zhName: 'Phantom',
         enName: 'Phantom',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#FFFFFF',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#FFFFFF',
             secondary: '#999999',
             tertiary: '#757E80',
@@ -239,10 +269,10 @@ const themeData = [
             alert: '#FF9C3F',
             warning: '#FFD13F',
             gold: '#FFD13F',
-            background: '#13121A',
-            'background-200': '#222222',
-            'background-300': '#272735',
-            'background-400': '#22212A',
+            'bg-default': '#13121A',
+            'bg-200': '#222222',
+            'bg-300': '#272735',
+            'bg-400': '#22212A',
             overlay: '#272735',
             divider: '#323232',
             bullish: '#2EC08B',
@@ -250,11 +280,14 @@ const themeData = [
         }
     },
     {
-        key: 'binance-dark',
+        id: 'binance-dark',
         zhName: 'Binance',
         enName: 'Binance',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#EAECEF',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#EAECEF',
             secondary: '#929AA5',
             tertiary: '#707A8A',
@@ -264,10 +297,10 @@ const themeData = [
             alert: '#FF693D',
             warning: '#F0B90B',
             gold: '#2DBD85',
-            background: '#0B0E11',
-            'background-200': '#29313D',
-            'background-300': '#202630',
-            'background-400': '#181A20',
+            'bg-default': '#0B0E11',
+            'bg-200': '#29313D',
+            'bg-300': '#202630',
+            'bg-400': '#181A20',
             overlay: '#202630',
             divider: '#343B47',
             bullish: '#2EBD85',
@@ -275,11 +308,14 @@ const themeData = [
         }
     },
     {
-        key: 'bullx-dark',
+        id: 'bullx-dark',
         zhName: "Bullx's",
         enName: "Bullx's",
         colorScheme: 'dark',
         colorVariables: {
+            default: '#E9E9E9',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#E9E9E9',
             secondary: '#98989B',
             tertiary: '#686a6d',
@@ -289,10 +325,10 @@ const themeData = [
             alert: '#E9BF52',
             warning: '#DCC161',
             gold: '#E9BF52',
-            background: '#09090B',
-            'background-200': '#1B1D22',
-            'background-300': '#0D0D10',
-            'background-400': '#0F0F0F',
+            'bg-default': '#09090B',
+            'bg-200': '#1B1D22',
+            'bg-300': '#0D0D10',
+            'bg-400': '#0F0F0F',
             overlay: '#0D0D10',
             divider: '#1E2025',
             bullish: '#459C6E',
@@ -300,5 +336,5 @@ const themeData = [
         }
     }
 ];
-const themeKeys = themeData.map((theme)=>theme.key);
+const themeKeys = themeData.map((theme)=>theme.id);
 export { themeData, themeKeys };

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

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