@particle-network/ui-react 0.5.1-beta.7 → 0.5.1-beta.9

package/dist/components/ProgressWrapper/index.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
-import { cn } from "@heroui/theme";
 import { radiusMap } from "@particle-network/ui-shared";
 import { useSize } from "ahooks";
+import { cn } from "../../utils/index.js";
 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 })=>{

package/dist/components/UXButton/button-theme.js

@@ -381,13 +381,13 @@ const button_theme_button = tv({
             isSelected: true,
             color: 'default',
             variant: 'solid',
-            class: 'bg-tertiary text-tertiary-foreground'
+            class: 'bg-cursor text-cursor-foreground'
         },
         {
             isSelected: true,
             color: 'secondary',
             variant: 'solid',
-            class: 'bg-tertiary text-tertiary-foreground'
+            class: 'bg-cursor text-cursor-foreground'
         },
         {
             isSelected: true,

package/dist/components/UXCheckbox/checkbox.extend.js

@@ -7,7 +7,7 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
                 wrapper: 'after:bg-primary after:text-primary-foreground text-primary-foreground'
             },
             secondary: {
-                wrapper: 'after:bg-tertiary after:text-tertiary-foreground text-tertiary-foreground'
+                wrapper: 'after:bg-cursor after:text-cursor-foreground text-cursor-foreground'
             },
             success: {
                 wrapper: 'after:bg-success after:text-success-foreground text-success-foreground'

package/dist/components/UXColorPicker/color-input.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { ColorField, Input } from "react-aria-components";
-import { cn } from "@heroui/theme";
+import { cn } from "../../utils/index.js";
 const inputClassName = 'w-full h-[30px] rounded-small border-none bg-background-200 px-2.5 text-tiny text-foreground focus:outline-none focus:ring-1 focus:ring-foreground text-center';
 const ColorInput = (props)=>/*#__PURE__*/ jsx(ColorField, {
         ...props,

package/dist/components/UXColorPicker/color-picker.js

@@ -2,9 +2,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ColorArea, ColorPicker, ColorSlider, ColorSwatch, ColorThumb, SliderTrack, parseColor } from "react-aria-components";
-import { cn } from "@heroui/theme";
 import ColorPickerIcon from "@particle-network/icons/web/ColorPickerIcon";
 import RefreshCcwIcon from "@particle-network/icons/web/RefreshCcwIcon";
+import { cn } from "../../utils/index.js";
 import { HStack } from "../layout/index.js";
 import { UXButton } from "../UXButton/index.js";
 import { UXPopover, UXPopoverContent, UXPopoverTrigger } from "../UXPopover/index.js";
@@ -13,7 +13,7 @@ import { ColorFields } from "./color-fields.js";
 import { ColorInput } from "./color-input.js";
 import { normalizeColor } from "./utils.js";
 const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', value, defaultValue, onChange, onChangeEnd, onValueChange, onValueChangeEnd, isChanged, onReset })=>{
-    const { 'bg-200': bg200 } = useThemeColor();
+    const { bg200: bg200 } = useThemeColor();
     const isControlled = void 0 !== value;
     const [pickerKey, setPickerKey] = useState(0);
     const [isInputFocused, setIsInputFocused] = useState(false);

package/dist/components/UXCopy/index.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import react from "react";
-import { cn } from "@heroui/theme";
 import CopyIcon from "@particle-network/icons/web/CopyIcon";
 import copy_to_clipboard from "copy-to-clipboard";
 import { useI18n } from "../../hooks/useI18n.js";
+import { cn } from "../../utils/index.js";
 import { toast } from "../UXToast/index.js";
 import { UXTooltip } from "../UXTooltip/index.js";
 import { shortAddress } from "./utils.js";

package/dist/components/UXEmpty/index.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { forwardRef } from "@heroui/system";
-import { cn } from "@heroui/theme";
 import EmptyIcon from "@particle-network/icons/web/EmptyIcon";
 import { useI18n } from "../../hooks/useI18n.js";
+import { cn } from "../../utils/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 const UXEmpty = forwardRef((props, ref)=>{

package/dist/components/UXHint/index.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { cn } from "@heroui/theme";
 import CircleQuestionIcon from "@particle-network/icons/web/CircleQuestionIcon";
 import { Center, UXPopover, UXPopoverContent, UXPopoverTrigger, UXTooltip } from "../index.js";
+import { cn } from "../../utils/index.js";
 const UXHint = (props)=>{
     const { content, children, buttonClassName, iconClassName, triggerType = 'hover', ...restProps } = props;
     const renderTriggerContent = ()=>/*#__PURE__*/ jsx(Center, {

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

@@ -5,7 +5,7 @@ export declare const UXInput: React.ForwardRefExoticComponent<(Omit<Omit<import(
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | undefined;
     isColorText?: boolean | undefined;
     color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
@@ -21,7 +21,7 @@ export declare const UXInput: React.ForwardRefExoticComponent<(Omit<Omit<import(
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | undefined;
     isColorText?: boolean | undefined;
     color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;

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

@@ -2,7 +2,7 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<(Omit<imp
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | undefined;
     isColorText?: boolean | undefined;
     color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
@@ -18,7 +18,7 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<(Omit<imp
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
     variant?: "flat" | "bordered" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "right" | "left" | "center" | undefined;
     isColorText?: boolean | undefined;
     color?: "secondary" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | "default" | undefined;
     size?: "sm" | "md" | "lg" | undefined;

package/dist/components/UXRadio/radio.extend.js

@@ -40,21 +40,21 @@ const ExtendedRadio = extendVariants(Radio, {
             sm: {
                 wrapper: 'w-2.5 h-2.5 border-small',
                 control: 'w-1.5 h-1.5',
-                labelWrapper: 'ml-sm',
+                labelWrapper: 'ms-1',
                 label: '!text-body3 font-medium',
                 description: 'text-tiny text-foreground-100'
             },
             md: {
                 wrapper: 'w-3 h-3 border-small',
                 control: 'w-1.5 h-1.5',
-                labelWrapper: 'ml-2',
+                labelWrapper: 'ms-1',
                 label: '!text-body2 font-medium',
                 description: 'text-tiny text-foreground-100'
             },
             lg: {
                 wrapper: 'w-[14px] h-[14px] border-small',
                 control: 'w-2 h-2',
-                labelWrapper: 'ml-2',
+                labelWrapper: 'ms-1',
                 label: '!text-body1 font-medium',
                 description: 'text-small text-foreground-100'
             }

package/dist/components/UXSlider/use-slider.js

@@ -2,11 +2,11 @@ import { useCallback, useMemo, useRef } from "react";
 import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
 import { mergeProps, objectToDeps, warn } from "@heroui/shared-utils";
 import { mapPropsVariants, useProviderContext } from "@heroui/system";
-import { cn } from "@heroui/theme";
 import { useLocale, useNumberFormatter } from "@react-aria/i18n";
 import { useHover } from "@react-aria/interactions";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
+import { cn } from "../../utils/index.js";
 import { slider } from "./slider-theme.js";
 function use_slider_useSlider(originalProps) {
     const globalContext = useProviderContext();

package/dist/components/UXSpinner/spinner.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { cn } from "@heroui/theme";
+import { cn } from "../../utils/index.js";
 import { Square } from "../layout/index.js";
 import { SpinnerIcon } from "./SpinnerIcon.js";
 const UXSpinner = ({ size = 18, duration = 400, className, iconClassName, style, ...restProps })=>{

package/dist/components/UXSwitch/switch.extend.js

@@ -48,9 +48,9 @@ const ExtendedSwitch = extendVariants(Switch, {
         },
         size: {
             sm: {
-                wrapper: 'w-5 h-3 px-0.5',
+                wrapper: 'w-5 h-3 px-0.5 bg-cursor',
                 thumb: [
-                    'w-2 h-2 text-tiny',
+                    'w-2 h-2 text-tiny shadow-none',
                     'group-data-[selected=true]:ms-2'
                 ],
                 endContent: 'text-tiny',
@@ -58,9 +58,9 @@ const ExtendedSwitch = extendVariants(Switch, {
                 label: 'text-body3 font-medium ms-sm'
             },
             md: {
-                wrapper: 'w-6 h-3.5 px-[3px]',
+                wrapper: 'w-6 h-3.5 px-[3px] bg-cursor',
                 thumb: [
-                    'w-2.5 h-2.5 text-small',
+                    'w-2.5 h-2.5 text-small shadow-none',
                     'group-data-[selected=true]:ms-2'
                 ],
                 endContent: 'text-small',
@@ -68,9 +68,9 @@ const ExtendedSwitch = extendVariants(Switch, {
                 label: 'text-body3 font-medium ms-sm'
             },
             lg: {
-                wrapper: 'w-[34px] h-5 px-[3px]',
+                wrapper: 'w-[34px] h-5 px-[3px] bg-cursor',
                 thumb: [
-                    'w-3.5 h-3.5 text-medium',
+                    'w-3.5 h-3.5 text-medium shadow-none',
                     'group-data-[selected=true]:ms-3.5'
                 ],
                 endContent: 'text-medium',

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

@@ -16,7 +16,7 @@ export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRen
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "center" | "start" | "end" | undefined;
+    align?: "start" | "end" | "center" | undefined;
 }, "ref"> | Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/table").TableProps<object>> & import("@heroui/table").TableProps<object> & {
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
@@ -32,6 +32,6 @@ export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRen
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "center" | "start" | "end" | undefined;
+    align?: "start" | "end" | "center" | undefined;
 }, "ref">) & React.RefAttributes<HTMLElement>, never>;
 export { TableBody as UXTableBody, TableCell as UXTableCell, TableColumn as UXTableColumn, TableHeader as UXTableHeader, TableRow as UXTableRow, } from '@heroui/table';

package/dist/components/UXTable/table.extend.d.ts

@@ -13,7 +13,7 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<(Omit<imp
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "center" | "start" | "end" | undefined;
+    align?: "start" | "end" | "center" | undefined;
 }, "ref"> | Omit<import("@heroui/system-rsc").OmitCommonProps<Omit<Omit<any, "ref">, never>, keyof import("@heroui/table").TableProps<object>> & import("@heroui/table").TableProps<object> & {
     as?: import("@heroui/system-rsc").As<any> | undefined;
 } & {
@@ -29,6 +29,6 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<(Omit<imp
     isSelectable?: boolean | undefined;
     isMultiSelectable?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    align?: "center" | "start" | "end" | undefined;
+    align?: "start" | "end" | "center" | undefined;
 }, "ref">) & import("react").RefAttributes<HTMLElement>>;
 export default ExtendedTable;

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

@@ -252,9 +252,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-tertiary dark:bg-tertiary'
+                    'bg-cursor dark:bg-cursor'
                 ],
-                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
+                tabContent: 'group-data-[selected=true]:text-cursor-foreground'
             }
         },
         {
@@ -264,9 +264,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-tertiary'
+                    'bg-cursor'
                 ],
-                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
+                tabContent: 'group-data-[selected=true]:text-cursor-foreground'
             }
         },
         {

package/dist/components/UXThemeSwitch/custom-theme-config.js

@@ -17,10 +17,11 @@ const COLOR_CATEGORIES = {
         'bearish'
     ],
     background: [
-        'bg-default',
-        'bg-400',
-        'bg-300',
-        'bg-200',
+        'bgDefault',
+        'bg400',
+        'bg300',
+        'bg200',
+        'cursor',
         'overlay',
         'divider'
     ],
@@ -41,7 +42,8 @@ const COLOR_CATEGORIES = {
         'success',
         'danger',
         'warning',
-        'alert'
+        'alert',
+        'blue'
     ]
 };
 const CustomThemeConfig = ()=>{

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

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { cn } from "@heroui/theme";
 import { useLang } from "../../hooks/index.js";
+import { cn } from "../../utils/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { useTheme } from "./use-theme.js";
@@ -57,7 +57,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                 fill: "currentColor",
                                 className: "text-background",
                                 style: {
-                                    color: 'custom' === id ? customColors['bg-default'] : void 0
+                                    color: 'custom' === id ? customColors.bgDefault : void 0
                                 }
                             })
                         }),
@@ -72,7 +72,7 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
                                 fill: "currentColor",
                                 className: "text-background",
                                 style: {
-                                    color: 'custom' === id ? customColors['bg-default'] : void 0
+                                    color: 'custom' === id ? customColors.bgDefault : void 0
                                 }
                             })
                         }),

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

@@ -1,10 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { cn } from "@heroui/theme";
 import { useDisclosure } from "@heroui/use-disclosure";
 import { ChartColorSwitchIcon, CopyIcon } from "@particle-network/icons/web";
 import { DEFAULT_THEME_ID, themeData } from "@particle-network/ui-shared";
 import { useI18n } from "../../hooks/index.js";
+import { cn } from "../../utils/index.js";
 import { HStack, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { UXButton } from "../UXButton/index.js";

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

@@ -24,7 +24,7 @@ const useThemeStore = create()(persist((set)=>({
             })
     }), {
     name: 'ux-preference-theme',
-    version: 0,
+    version: 2,
     storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
     partialize: (state)=>({
             theme: state.theme,

package/dist/components/UXThemeSwitch/utils.js

@@ -46,32 +46,52 @@ const getCSSProperties = (theme)=>{
             ]
         ],
         warning: generateThemeColor(colorVariables.warning, 'warning', theme.colorScheme).cssVariables,
-        'bg-default': [
+        blue: [
+            [
+                '--heroui-blue',
+                colorVariables.blue
+            ],
+            [
+                '--heroui-blue-foreground',
+                readableColor(colorVariables.blue)
+            ]
+        ],
+        bgDefault: [
             [
                 '--heroui-background',
-                colorVariables['bg-default']
+                colorVariables.bgDefault
             ],
             [
                 '--heroui-background-500',
-                colorVariables['bg-default']
+                colorVariables.bgDefault
             ]
         ],
-        'bg-200': [
+        bg200: [
             [
                 '--heroui-background-200',
-                colorVariables['bg-200']
+                colorVariables.bg200
             ]
         ],
-        'bg-300': [
+        bg300: [
             [
                 '--heroui-background-300',
-                colorVariables['bg-300']
+                colorVariables.bg300
             ]
         ],
-        'bg-400': [
+        bg400: [
             [
                 '--heroui-background-400',
-                colorVariables['bg-400']
+                colorVariables.bg400
+            ]
+        ],
+        cursor: [
+            [
+                '--heroui-cursor',
+                colorVariables.cursor
+            ],
+            [
+                '--heroui-cursor-foreground',
+                readableColor(colorVariables.cursor)
             ]
         ],
         overlay: [

package/dist/components/UXToast/index.js

@@ -37,14 +37,14 @@ const show = (props)=>{
     return addToast({
         classNames: {
             base: [
-                'bg-tertiary rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px] m-0',
+                'bg-cursor rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px] m-0',
                 !hideCloseButton && 'pr-12',
                 'flat' === variant && 'success' === type && 'bg-[#0E3728]',
                 'flat' === variant && 'error' === type && 'bg-[#501D1D]',
                 base
             ],
             description: [
-                'text-tertiary-foreground text-xs font-medium me-0 leading-4 line-clamp-4',
+                'text-cursor-foreground text-xs font-medium me-0 leading-4 line-clamp-4',
                 'flat' === variant && 'text-white',
                 hasLongWord(description) && 'break-all',
                 descriptionClassName
@@ -72,7 +72,7 @@ const show = (props)=>{
         icon: icon ?? getIcon(type),
         hideIcon: !icon && !getIcon(type),
         closeIcon: /*#__PURE__*/ jsx(CloseIcon, {
-            className: 'flat' === variant ? 'text-white' : 'text-tertiary-foreground'
+            className: 'flat' === variant ? 'text-white' : 'text-cursor-foreground'
         }),
         loadingComponent: /*#__PURE__*/ jsx(UXSpinner, {
             size: 18