@particle-network/ui-react 0.3.0-beta.1 → 0.3.0-beta.11

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

@@ -30,5 +30,4 @@ export interface ProgressWrapperProps extends React.HTMLAttributes<HTMLDivElemen
      */
     svgClassName?: string;
 }
-declare const ProgressWrapper: React.FC<ProgressWrapperProps>;
-export default ProgressWrapper;
+export declare const ProgressWrapper: React.FC<ProgressWrapperProps>;

package/dist/components/ProgressWrapper/index.js

@@ -4,7 +4,7 @@ import { useMemo, useRef } from "react";
 import { cn } from "@heroui/theme";
 import { getHexColorFromCSSVariable, radiusMap } from "@particle-network/ui-shared";
 import { useSize } from "ahooks";
-import Center from "../layout/Center.js";
+import { Center } from "../layout/index.js";
 const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{
     const autoLayout = !width && !height;
     const containerRef = useRef(null);
@@ -98,5 +98,4 @@ const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', s
     });
 };
 ProgressWrapper.displayName = 'UX.ProgressWrapper';
-const components_ProgressWrapper = ProgressWrapper;
-export { components_ProgressWrapper as default };
+export { ProgressWrapper };

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

@@ -33,11 +33,11 @@ const button_theme_button = tv({
             text: 'bg-transparent min-w-0 w-auto h-auto px-0'
         },
         size: {
-            xs: 'gap-2 rounded-small !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
-            sm: 'gap-2 rounded-small !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
-            md: 'gap-2 rounded-small text-tiny min-w-min font-medium [&_[aria-label="Loading"]>div]:size-4',
-            lg: 'gap-2 rounded-medium text-medium min-w-min font-medium [&_[aria-label="Loading"]>div]:size-6',
-            auto: 'min-w-min rounded-medium'
+            xs: 'gap-2 rounded-[6px] !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
+            sm: 'gap-2 rounded-[6px] !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
+            md: 'gap-2 rounded-[6px] text-tiny min-w-min font-medium [&_[aria-label="Loading"]>div]:size-4',
+            lg: 'gap-2 rounded-[10px] text-medium min-w-min font-medium [&_[aria-label="Loading"]>div]:size-6',
+            auto: 'min-w-min rounded-[10px]'
         },
         color: {
             default: '',
@@ -52,10 +52,10 @@ const button_theme_button = tv({
         },
         radius: {
             none: 'rounded-none',
-            xs: 'rounded-sm',
-            sm: 'rounded-small',
-            md: 'rounded-medium',
-            lg: 'rounded-large',
+            xs: 'rounded-[4px]',
+            sm: 'rounded-[6px]',
+            md: 'rounded-[10px]',
+            lg: 'rounded-[14px]',
             full: 'rounded-full'
         },
         fullWidth: {

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

@@ -2,10 +2,9 @@ import React from 'react';
 import { type CheckboxGroupProps } from '@heroui/checkbox';
 import ExtendedCheckbox from './checkbox.extend';
 export type UXCheckboxProps = React.ComponentPropsWithRef<typeof ExtendedCheckbox>;
-declare const UXCheckbox: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/checkbox").CheckboxProps, "color"> & {
+export declare const UXCheckbox: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/checkbox").CheckboxProps, "color"> & {
     color?: "primary" | "secondary" | "success" | "warning" | "danger" | "bullish" | "bearish";
     labelPlacement?: "left" | "right";
 }, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default UXCheckbox;
 export declare const UXCheckboxGroup: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", CheckboxGroupProps, never>;
 export type UXCheckboxGroupProps = CheckboxGroupProps;

package/dist/components/UXCheckbox/index.js

@@ -12,6 +12,5 @@ const UXCheckbox = /*#__PURE__*/ forwardRef((props, ref)=>{
     });
 });
 UXCheckbox.displayName = 'UX.Checkbox';
-const components_UXCheckbox = UXCheckbox;
 const UXCheckboxGroup = CheckboxGroup;
-export { UXCheckboxGroup, components_UXCheckbox as default };
+export { UXCheckbox, UXCheckboxGroup };

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import ExtendedChip from './chip.extend';
 export type UXChipProps = React.ComponentPropsWithRef<typeof ExtendedChip>;
-declare const UXChip: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", Omit<import("@heroui/chip").ChipProps, "color"> & {
+export declare const UXChip: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", Omit<import("@heroui/chip").ChipProps, "color"> & {
     color?: "default" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish" | `#${string}`;
 }, never>;
-export default UXChip;

package/dist/components/UXChip/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 import { forwardRef } from "@heroui/system";
 import chip_extend from "./chip.extend.js";
-const UXChip_UXChip = forwardRef((props, ref)=>{
+const UXChip = forwardRef((props, ref)=>{
     const { color, variant, style, ...restProps } = props;
     if ('string' == typeof color && color.startsWith('#')) return /*#__PURE__*/ jsx(chip_extend, {
         ref: ref,
@@ -22,6 +22,5 @@ const UXChip_UXChip = forwardRef((props, ref)=>{
         ...restProps
     });
 });
-UXChip_UXChip.displayName = 'UX.Chip';
-const UXChip = UXChip_UXChip;
-export { UXChip as default };
+UXChip.displayName = 'UX.Chip';
+export { UXChip };

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

@@ -1,4 +1,3 @@
 import type { DividerProps } from '@heroui/divider';
 export type UXDividerProps = DividerProps;
-declare const UXDivider: import("react").ForwardRefExoticComponent<Omit<DividerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export default UXDivider;
+export declare const UXDivider: import("react").ForwardRefExoticComponent<Omit<DividerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/UXDivider/index.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import divider_extend from "./divider.extend.js";
-const UXDivider_UXDivider = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(divider_extend, {
+const UXDivider = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(divider_extend, {
         ref: ref,
         ...props
     }));
-UXDivider_UXDivider.displayName = 'UX.Divider';
-const UXDivider = UXDivider_UXDivider;
-export { UXDivider as default };
+UXDivider.displayName = 'UX.Divider';
+export { UXDivider };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type IconProps } from '../../icons';
-import { type VStackProps } from '../layout/VStack';
+import { type VStackProps } from '../layout';
 export interface UXEmptyProps extends VStackProps {
     iconProps?: IconProps;
     text?: React.ReactNode;

package/dist/components/UXEmpty/index.js

@@ -3,8 +3,8 @@ import "react";
 import { forwardRef } from "@heroui/system";
 import { useI18n } from "../../hooks/useI18n.js";
 import { EmptyIcon } from "../../icons/index.js";
-import VStack from "../layout/VStack.js";
-import Text from "../typography/Text.js";
+import { VStack } from "../layout/index.js";
+import { Text } from "../typography/Text.js";
 const UXEmpty = forwardRef((props, ref)=>{
     const i18n = useI18n();
     const { text = i18n.table.emptyContent, iconProps, ...restProps } = props;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { type UXTooltipProps } from '..';
 export type UXHintProps = UXTooltipProps & {
+    triggerType?: 'hover' | 'click';
     buttonClassName?: string;
     iconClassName?: string;
 };
-declare const UXHint: React.FC<UXHintProps>;
-export default UXHint;
+export declare const UXHint: React.FC<UXHintProps>;

package/dist/components/UXHint/index.js

@@ -1,22 +1,32 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { cn } from "@heroui/theme";
-import { Center, UXTooltip } from "../index.js";
+import { Center, UXPopover, UXPopoverContent, UXPopoverTrigger, UXTooltip } from "../index.js";
 import { CircleQuestionIcon } from "../../icons/index.js";
-const UXHint_UXHint = (props)=>{
-    const { content, children, buttonClassName, iconClassName, ...restProps } = props;
-    return /*#__PURE__*/ jsx(UXTooltip, {
-        content: content || children,
-        ...restProps,
-        children: /*#__PURE__*/ jsx(Center, {
+const UXHint = (props)=>{
+    const { content, children, buttonClassName, iconClassName, triggerType = 'hover', ...restProps } = props;
+    const renderTriggerContent = ()=>/*#__PURE__*/ jsx(Center, {
             className: cn('size-4 cursor-pointer', buttonClassName),
             children: /*#__PURE__*/ jsx(CircleQuestionIcon, {
                 size: 14,
                 className: iconClassName
             })
-        })
+        });
+    if ('hover' === triggerType) return /*#__PURE__*/ jsx(UXTooltip, {
+        content: content || children,
+        ...restProps,
+        children: renderTriggerContent()
+    });
+    return /*#__PURE__*/ jsxs(UXPopover, {
+        children: [
+            /*#__PURE__*/ jsx(UXPopoverTrigger, {
+                children: renderTriggerContent()
+            }),
+            /*#__PURE__*/ jsx(UXPopoverContent, {
+                children: content || children
+            })
+        ]
     });
 };
-UXHint_UXHint.displayName = 'UX.Hint';
-const UXHint = UXHint_UXHint;
-export { UXHint as default };
+UXHint.displayName = 'UX.Hint';
+export { UXHint };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import ExtendedInput from './input.extend';
 export type UXInputProps = React.ComponentPropsWithRef<typeof ExtendedInput>;
-declare const UXInput: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"input", Omit<{
+export declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
     fullWidth?: boolean | undefined;
     ref?: React.Ref<HTMLInputElement> | undefined;
     children?: React.ReactNode;
@@ -342,5 +342,4 @@ declare const UXInput: import("@heroui/system-rsc").InternalForwardRefRenderFunc
     wrapperRef?: React.Ref<HTMLDivElement> | undefined;
     innerWrapperRef?: React.Ref<HTMLDivElement> | undefined;
     textAlign?: "center" | "left" | "right" | undefined;
-}, "ref"> & React.RefAttributes<React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>, never>;
-export default UXInput;
+}, "ref"> & React.RefAttributes<React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/UXInput/index.js

@@ -1,11 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import "react";
-import { forwardRef } from "@heroui/system";
+import { forwardRef } from "react";
 import input_extend from "./input.extend.js";
-const UXInput_UXInput = forwardRef((props, ref)=>/*#__PURE__*/ jsx(input_extend, {
+const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(input_extend, {
         ...props,
         ref: ref
     }));
-UXInput_UXInput.displayName = 'UX.Input';
-const UXInput = UXInput_UXInput;
-export { UXInput as default };
+UXInput.displayName = 'UX.Input';
+export { UXInput };

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

@@ -6,5 +6,4 @@ export type UXModalProps = Omit<ModalProps, 'closeButton'> & {
     tip?: React.ReactNode;
     titleAlign?: 'left' | 'center';
 };
-declare const UXModal: React.ForwardRefExoticComponent<Omit<UXModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default UXModal;
+export declare const UXModal: React.ForwardRefExoticComponent<Omit<UXModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/UXModal/index.js

@@ -87,5 +87,4 @@ const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
     });
 });
 UXModal.displayName = 'UX.Modal';
-const components_UXModal = UXModal;
-export { components_UXModal as default };
+export { UXModal };

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import ExtendedNumberInput from './number-input.extend';
 export type UXNumberInputProps = React.ComponentPropsWithRef<typeof ExtendedNumberInput>;
-declare const UXNumberInput: React.ForwardRefExoticComponent<UXNumberInputProps>;
-export default UXNumberInput;
+export declare const UXNumberInput: React.ForwardRefExoticComponent<UXNumberInputProps>;

package/dist/components/UXNumberInput/index.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import number_input_extend from "./number-input.extend.js";
-const UXNumberInput_UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(number_input_extend, {
+const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(number_input_extend, {
         ...props,
         ref: ref
     }));
-UXNumberInput_UXNumberInput.displayName = 'UX.NumberInput';
-const UXNumberInput = UXNumberInput_UXNumberInput;
-export { UXNumberInput as default };
+UXNumberInput.displayName = 'UX.NumberInput';
+export { UXNumberInput };

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import ExtendedPopover from './popover.extend';
 export type UXPopoverProps = React.ComponentPropsWithRef<typeof ExtendedPopover>;
-declare const UXPopover: React.FC<UXPopoverProps>;
-export default UXPopover;
+export declare const UXPopover: React.FC<UXPopoverProps>;
 export { PopoverContent as UXPopoverContent, PopoverTrigger as UXPopoverTrigger } from '@heroui/popover';

package/dist/components/UXPopover/index.js

@@ -6,5 +6,4 @@ const UXPopover = (props)=>/*#__PURE__*/ jsx(popover_extend, {
         ...props
     });
 UXPopover.displayName = 'UX.Popover';
-const components_UXPopover = UXPopover;
-export { PopoverContent as UXPopoverContent, PopoverTrigger as UXPopoverTrigger, components_UXPopover as default };
+export { UXPopover, PopoverContent as UXPopoverContent, PopoverTrigger as UXPopoverTrigger };

package/dist/components/UXPopover/popover.extend.js

@@ -4,13 +4,13 @@ const ExtendedPopover = extendVariants(Popover, {
     variants: {
         size: {
             sm: {
-                content: '!p-sm max-w-[300px]'
+                content: 'p-1.5 max-w-[300px]'
             },
             md: {
-                content: '!p-md max-w-[300px]'
+                content: 'p-2.5 max-w-[300px]'
             },
             lg: {
-                content: '!p-lg max-w-[300px]'
+                content: 'p-3.5 max-w-[300px]'
             }
         },
         color: {

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

@@ -2,9 +2,8 @@ import React from 'react';
 import { type RadioGroupProps } from '@heroui/radio';
 import ExtendedRadio from './radio.extend';
 export type UXRadioProps = React.ComponentPropsWithRef<typeof ExtendedRadio>;
-declare const UXRadio: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/radio").RadioProps, "color"> & {
+export declare const UXRadio: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/radio").RadioProps, "color"> & {
     color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "bullish" | "bearish";
 }, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default UXRadio;
 export declare const UXRadioGroup: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", RadioGroupProps, never>;
 export type UXRadioGroupProps = RadioGroupProps;

package/dist/components/UXRadio/index.js

@@ -7,6 +7,5 @@ const UXRadio = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(radio_e
         ...props
     }));
 UXRadio.displayName = 'UX.Radio';
-const components_UXRadio = UXRadio;
 const UXRadioGroup = RadioGroup;
-export { UXRadioGroup, components_UXRadio as default };
+export { UXRadio, UXRadioGroup };

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

@@ -1,6 +1,5 @@
 import { type SelectProps } from '@heroui/select';
 type UXSelectProps = SelectProps;
-declare const UXSelect: import("react").ForwardRefExoticComponent<Omit<UXSelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
-export default UXSelect;
+export declare const UXSelect: import("react").ForwardRefExoticComponent<Omit<UXSelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 export { SelectItem as UXSelectItem, SelectSection as UXSelectSection } from '@heroui/select';
 export type { UXSelectProps };

package/dist/components/UXSelect/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Select, SelectItem, SelectSection } from "@heroui/select";
 import { ChevronDownIcon } from "../../icons/index.js";
-const UXSelect_UXSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
+const UXSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { fullWidth = false, classNames = {}, radius = 'sm', ...restProps } = props;
     const { popoverContent, selectorIcon, trigger, value, ...restClassNames } = classNames;
     return /*#__PURE__*/ jsx(Select, {
@@ -46,6 +46,5 @@ const UXSelect_UXSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
         ...restProps
     });
 });
-UXSelect_UXSelect.displayName = 'UX.Select';
-const UXSelect = UXSelect_UXSelect;
-export { SelectItem as UXSelectItem, SelectSection as UXSelectSection, UXSelect as default };
+UXSelect.displayName = 'UX.Select';
+export { UXSelect, SelectItem as UXSelectItem, SelectSection as UXSelectSection };

package/dist/components/UXSpinner/spinner.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type UXForegroundColor } from '@particle-network/ui-shared';
-import { type SquareProps } from '../layout/Square';
+import { type SquareProps } from '../layout';
 export interface UXSpinnerProps extends SquareProps {
     /**
      * 颜色

package/dist/components/UXSpinner/spinner.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@heroui/theme";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-import Square from "../layout/Square.js";
+import { colorToClassName } from "@particle-network/ui-shared";
+import { Square } from "../layout/index.js";
 import { SpinnerIcon } from "./SpinnerIcon.js";
 const UXSpinner = ({ size = 18, color = 'primary', duration = 1000, className, style, ...restProps })=>{
     const [currentIndex, setCurrentIndex] = useState(0);
     const animationRef = useRef(null);
-    const actualColor = 'currentColor' === color ? 'currentColor' : getHexColorFromCSSVariable(color);
+    const iconClassName = 'currentColor' === color ? void 0 : colorToClassName[color];
     useEffect(()=>{
         const stepDuration = duration / 12;
         const animate = ()=>{
@@ -29,9 +29,7 @@ const UXSpinner = ({ size = 18, color = 'primary', duration = 1000, className, s
         children: /*#__PURE__*/ jsx(SpinnerIcon, {
             width: size,
             height: size,
-            style: {
-                color: actualColor
-            },
+            className: iconClassName,
             currentIndex: currentIndex
         })
     });

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import ExtendedSwitch from './switch.extend';
 export type UXSwitchProps = React.ComponentPropsWithRef<typeof ExtendedSwitch>;
-declare const UXSwitch: React.ForwardRefExoticComponent<Omit<Omit<{
+export declare const UXSwitch: React.ForwardRefExoticComponent<Omit<Omit<{
     ref?: React.Ref<HTMLInputElement> | undefined;
     children?: React.ReactNode;
     defaultChecked?: any;
@@ -328,4 +328,3 @@ declare const UXSwitch: React.ForwardRefExoticComponent<Omit<Omit<{
     defaultSelected?: boolean | undefined;
     thumbIcon?: React.ReactNode | ((props: import("@heroui/switch").SwitchThumbIconProps) => React.ReactNode);
 }, "ref"> & React.RefAttributes<React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default UXSwitch;

package/dist/components/UXSwitch/index.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import switch_extend from "./switch.extend.js";
-const UXSwitch_UXSwitch = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(switch_extend, {
+const UXSwitch = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(switch_extend, {
         ...props,
         ref: ref
     }));
-UXSwitch_UXSwitch.displayName = 'UX.Switch';
-const UXSwitch = UXSwitch_UXSwitch;
-export { UXSwitch as default };
+UXSwitch.displayName = 'UX.Switch';
+export { UXSwitch };

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import ExtendedTabs from './tabs.extend';
 export type UXTabsProps = React.ComponentPropsWithRef<typeof ExtendedTabs>;
-declare const UXTabs: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/tabs").TabsProps, "color" | "variant"> & {
+export declare const UXTabs: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/tabs").TabsProps, "color" | "variant"> & {
     variant?: "solid" | "light" | "text" | "switch";
     color?: "default" | "primary" | "success" | "warning" | "danger" | "bullish" | "bearish";
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default UXTabs;
 export { Tab as UXTab } from '@heroui/tabs';

package/dist/components/UXTabs/index.js

@@ -2,10 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import tabs_extend from "./tabs.extend.js";
 import { Tab } from "@heroui/tabs";
-const UXTabs_UXTabs = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(tabs_extend, {
+const UXTabs = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(tabs_extend, {
         ...props,
         ref: ref
     }));
-UXTabs_UXTabs.displayName = 'UX.Tabs';
-const UXTabs = UXTabs_UXTabs;
-export { Tab as UXTab, UXTabs as default };
+UXTabs.displayName = 'UX.Tabs';
+export { Tab as UXTab, UXTabs };

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

@@ -0,0 +1,16 @@
+import type { ToastProps } from '@heroui/toast';
+export type UXToastType = 'success' | 'error' | 'loading';
+export type UXToastProps = Partial<ToastProps> & {
+    type: UXToastType;
+};
+export declare const UXToastProvider: () => import("react/jsx-runtime").JSX.Element;
+export declare const toast: {
+    success: (message: string, props?: Partial<ToastProps>) => string | null;
+    error: (message: string, props?: Partial<ToastProps>) => string | null;
+    loading: (message: string, props?: Partial<ToastProps>) => string | null;
+    show: (props?: Partial<ToastProps> & {
+        type: UXToastType;
+    }) => string | null;
+    closeAll: () => void;
+    close: (key: string) => void;
+};

package/dist/components/UXToast/index.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import { ToastProvider, addToast, closeAll, closeToast } from "@heroui/toast";
+import CircleCheckIcon from "@particle-network/icons/web/CircleCheckIcon";
+import CircleCloseIcon from "@particle-network/icons/web/CircleCloseIcon";
+import CloseIcon from "@particle-network/icons/web/CloseIcon";
+import { UXSpinner } from "../UXSpinner/index.js";
+const UXToastProvider = ()=>/*#__PURE__*/ jsx(ToastProvider, {
+        placement: "top-center",
+        maxVisibleToasts: 5,
+        toastOffset: 40,
+        toastProps: {
+            timeout: 4000
+        }
+    });
+const getIcon = (type)=>{
+    if ('success' === type) return /*#__PURE__*/ jsx(CircleCheckIcon, {
+        size: 18
+    });
+    if ('error' === type) return /*#__PURE__*/ jsx(CircleCloseIcon, {
+        size: 18
+    });
+    if ('loading' === type) return /*#__PURE__*/ jsx(UXSpinner, {
+        size: 18
+    });
+    return null;
+};
+const show = (props)=>{
+    const { type, hideCloseButton, variant, classNames, ...toastProps } = props ?? {};
+    return addToast({
+        classNames: {
+            base: [
+                'bg-tertiary rounded-xl px-3.5 py-3 shadow-none !w-fit max-w-[350px]',
+                !hideCloseButton && 'pr-12',
+                'flat' === variant && 'success' === type && 'bg-[#0E3728]',
+                'flat' === variant && 'error' === type && 'bg-[#501D1D]'
+            ],
+            description: [
+                'text-foreground text-xs font-medium me-0 leading-4',
+                'flat' === variant && 'text-white'
+            ],
+            icon: [
+                'shrink-0 h-5 w-5',
+                'success' === type && 'text-success',
+                'error' === type && 'text-danger',
+                'loading' === type && 'text-primary'
+            ],
+            loadingComponent: [
+                'text-primary h-5 w-5'
+            ],
+            content: [
+                'gap-x-2.5'
+            ],
+            closeButton: [
+                'absolute right-3 top-1/2 -translate-y-1/2',
+                hideCloseButton ? 'opacity-0' : 'opacity-100'
+            ],
+            ...classNames
+        },
+        icon: getIcon(type),
+        closeIcon: /*#__PURE__*/ jsx(CloseIcon, {
+            className: 'flat' === variant ? 'text-white' : 'text-foreground'
+        }),
+        loadingComponent: /*#__PURE__*/ jsx(UXSpinner, {
+            size: 18
+        }),
+        timeout: 'loading' === type ? 1 / 0 : 4000,
+        ...toastProps
+    });
+};
+const toast = {
+    success: (message, props)=>show({
+            type: 'success',
+            description: message,
+            ...props
+        }),
+    error: (message, props)=>show({
+            type: 'error',
+            description: message,
+            ...props
+        }),
+    loading: (message, props)=>show({
+            type: 'loading',
+            description: message,
+            timeout: 1 / 0,
+            ...props
+        }),
+    show,
+    closeAll: closeAll,
+    close: closeToast
+};
+export { UXToastProvider, toast };

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import ExtendedTooltip from './tooltip.extend';
 export type UXTooltipProps = React.ComponentPropsWithRef<typeof ExtendedTooltip>;
-declare const UXTooltip: React.FC<UXTooltipProps>;
-export default UXTooltip;
+export declare const UXTooltip: React.FC<UXTooltipProps>;

package/dist/components/UXTooltip/index.js

@@ -12,13 +12,12 @@ const renderContent = (content)=>{
             x
         ]);
 };
-const UXTooltip_UXTooltip = (props)=>{
+const UXTooltip = (props)=>{
     const { content, ...restProps } = props;
     return /*#__PURE__*/ jsx(tooltip_extend, {
         content: renderContent(content),
         ...restProps
     });
 };
-UXTooltip_UXTooltip.displayName = 'UX.Tooltip';
-const UXTooltip = UXTooltip_UXTooltip;
-export { UXTooltip as default };
+UXTooltip.displayName = 'UX.Tooltip';
+export { UXTooltip };

package/dist/components/UXTooltip/tooltip.extend.js

@@ -4,13 +4,13 @@ const ExtendedTooltip = extendVariants(Tooltip, {
     variants: {
         size: {
             sm: {
-                content: '!p-sm max-w-[300px]'
+                content: 'p-1.5 max-w-[300px]'
             },
             md: {
-                content: '!p-md max-w-[300px]'
+                content: 'p-2.5 max-w-[300px]'
             },
             lg: {
-                content: '!p-lg max-w-[300px]'
+                content: 'p-3.5 max-w-[300px]'
             }
         },
         color: {

package/dist/components/index.d.ts

@@ -1,52 +1,27 @@
-export type { CenterProps } from './layout/Center';
-export { default as Center } from './layout/Center';
-export type { CircleProps } from './layout/Circle';
-export { default as Circle } from './layout/Circle';
-export type { FlexProps } from './layout/Flex';
-export { default as Flex } from './layout/Flex';
-export type { HStackProps } from './layout/HStack';
-export { default as HStack } from './layout/HStack';
-export type { SquareProps } from './layout/Square';
-export { default as Square } from './layout/Square';
-export type { VStackProps } from './layout/VStack';
-export { default as VStack } from './layout/VStack';
-export type { ProgressWrapperProps } from './ProgressWrapper';
-export { default as ProgressWrapper } from './ProgressWrapper';
-export { default as Text } from './typography/Text';
-export type { TextProps } from './typography/Text.type';
+export * from './layout';
+export * from './ProgressWrapper';
+export * from './typography/Text';
 export * from './UXButton';
 export * from './UXCalendar';
-export { default as UXCheckbox } from './UXCheckbox';
 export * from './UXCheckbox';
-export type { UXChipProps } from './UXChip';
-export { default as UXChip } from './UXChip';
+export * from './UXChip';
 export * from './UXDatePicker';
 export * from './UXDateRangePicker';
-export type { UXDividerProps } from './UXDivider';
-export { default as UXDivider } from './UXDivider';
+export * from './UXDivider';
 export * from './UXDropdown';
 export * from './UXEmpty';
-export type { UXHintProps } from './UXHint';
-export { default as UXHint } from './UXHint';
-export { default as UXInput } from './UXInput';
+export * from './UXHint';
 export * from './UXInput';
-export type { UXModalProps } from './UXModal';
-export { default as UXModal } from './UXModal';
-export { default as UXNumberInput } from './UXNumberInput';
+export * from './UXModal';
 export * from './UXNumberInput';
 export * from './UXPagination';
-export { default as UXPopover } from './UXPopover';
 export * from './UXPopover';
-export { default as UXRadio } from './UXRadio';
 export * from './UXRadio';
-export { default as UXSelect } from './UXSelect';
 export * from './UXSelect';
 export * from './UXSpinner';
-export type { UXSwitchProps } from './UXSwitch';
-export { default as UXSwitch } from './UXSwitch';
+export * from './UXSwitch';
 export * from './UXTable';
-export { default as UXTabs } from './UXTabs';
 export * from './UXTabs';
 export * from './UXTextarea';
-export type { UXTooltipProps } from './UXTooltip';
-export { default as UXTooltip } from './UXTooltip';
+export * from './UXToast';
+export * from './UXTooltip';

package/dist/components/index.js

@@ -1,39 +1,27 @@
-import Center from "./layout/Center.js";
-import Circle from "./layout/Circle.js";
-import Flex from "./layout/Flex.js";
-import HStack from "./layout/HStack.js";
-import Square from "./layout/Square.js";
-import VStack from "./layout/VStack.js";
-import ProgressWrapper from "./ProgressWrapper/index.js";
-import Text from "./typography/Text.js";
-import UXCheckbox from "./UXCheckbox/index.js";
-import UXChip from "./UXChip/index.js";
-import UXDivider from "./UXDivider/index.js";
-import UXHint from "./UXHint/index.js";
-import UXInput from "./UXInput/index.js";
-import UXModal from "./UXModal/index.js";
-import UXNumberInput from "./UXNumberInput/index.js";
-import UXPopover from "./UXPopover/index.js";
-import UXRadio from "./UXRadio/index.js";
-import UXSelect from "./UXSelect/index.js";
-import UXSwitch from "./UXSwitch/index.js";
-import UXTabs from "./UXTabs/index.js";
-import UXTooltip from "./UXTooltip/index.js";
+export * from "./layout/index.js";
+export * from "./ProgressWrapper/index.js";
+export * from "./typography/Text.js";
 export * from "./UXButton/index.js";
 export * from "./UXCalendar/index.js";
 export * from "./UXCheckbox/index.js";
+export * from "./UXChip/index.js";
 export * from "./UXDatePicker/index.js";
 export * from "./UXDateRangePicker/index.js";
+export * from "./UXDivider/index.js";
 export * from "./UXDropdown/index.js";
 export * from "./UXEmpty/index.js";
+export * from "./UXHint/index.js";
 export * from "./UXInput/index.js";
+export * from "./UXModal/index.js";
 export * from "./UXNumberInput/index.js";
 export * from "./UXPagination/index.js";
 export * from "./UXPopover/index.js";
 export * from "./UXRadio/index.js";
 export * from "./UXSelect/index.js";
 export * from "./UXSpinner/index.js";
+export * from "./UXSwitch/index.js";
 export * from "./UXTable/index.js";
 export * from "./UXTabs/index.js";
 export * from "./UXTextarea/index.js";
-export { Center, Circle, Flex, HStack, ProgressWrapper, Square, Text, UXCheckbox, UXChip, UXDivider, UXHint, UXInput, UXModal, UXNumberInput, UXPopover, UXRadio, UXSelect, UXSwitch, UXTabs, UXTooltip, VStack };
+export * from "./UXToast/index.js";
+export * from "./UXTooltip/index.js";

package/dist/components/layout/Center.d.ts

@@ -1,4 +1,3 @@
 import { type FlexProps } from './Flex';
 export type CenterProps = Omit<FlexProps, 'justify' | 'align'>;
-declare const Center: import("react").ForwardRefExoticComponent<CenterProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Center;
+export declare const Center: import("react").ForwardRefExoticComponent<CenterProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Center.js

@@ -1,11 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import Flex from "./Flex.js";
-const Center_Center = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Flex, {
+import { Flex } from "./Flex.js";
+const Center = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Flex, {
         ref: ref,
         center: true,
         ...props
     }));
-Center_Center.displayName = 'UX.Center';
-const Center = Center_Center;
-export { Center as default };
+Center.displayName = 'UX.Center';
+export { Center };

package/dist/components/layout/Circle.d.ts

@@ -1,6 +1,5 @@
 import { type SquareProps } from './Square';
 export type CircleProps = SquareProps;
-declare const Circle: import("react").ForwardRefExoticComponent<import("./Center").CenterProps & {
+export declare const Circle: import("react").ForwardRefExoticComponent<import("./Center").CenterProps & {
     size?: number;
 } & import("react").RefAttributes<HTMLDivElement>>;
-export default Circle;

package/dist/components/layout/Circle.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "@heroui/theme";
-import Square from "./Square.js";
+import { Square } from "./Square.js";
 const Circle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Square, {
         ref: ref,
         className: cn('rounded-full', className),
         ...props
     }));
 Circle.displayName = 'UX.Circle';
-const layout_Circle = Circle;
-export { layout_Circle as default };
+export { Circle };

package/dist/components/layout/Flex.d.ts

@@ -25,5 +25,4 @@ export interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
     self?: 'auto' | 'start' | 'end' | 'end-safe' | 'center' | 'center-safe' | 'stretch' | 'baseline' | 'baseline-last';
     children?: React.ReactNode;
 }
-declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
-export default Flex;
+export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Flex.js

@@ -3,7 +3,7 @@ import { forwardRef, useMemo } from "react";
 import { cn } from "@heroui/theme";
 import { spacingMap } from "@particle-network/ui-shared";
 const isNil = (value)=>null == value;
-const Flex_Flex = /*#__PURE__*/ forwardRef(({ fill, fullWidth, direction, center, items, justify, gap, wrap, vertical, grow, shrink, order, self, className, children, ...props }, ref)=>{
+const Flex = /*#__PURE__*/ forwardRef(({ fill, fullWidth, direction, center, items, justify, gap, wrap, vertical, grow, shrink, order, self, className, children, ...props }, ref)=>{
     const gapValue = useMemo(()=>{
         if (!gap) return '';
         if ('number' == typeof gap) return `gap-${gap}`;
@@ -19,6 +19,5 @@ const Flex_Flex = /*#__PURE__*/ forwardRef(({ fill, fullWidth, direction, center
         children: children
     });
 });
-Flex_Flex.displayName = 'UX.Flex';
-const Flex = Flex_Flex;
-export { Flex as default };
+Flex.displayName = 'UX.Flex';
+export { Flex };

package/dist/components/layout/HStack.d.ts

@@ -1,4 +1,3 @@
 import { type FlexProps } from './Flex';
 export type HStackProps = Omit<FlexProps, 'direction' | 'vertical'>;
-declare const HStack: import("react").ForwardRefExoticComponent<HStackProps & import("react").RefAttributes<HTMLDivElement>>;
-export default HStack;
+export declare const HStack: import("react").ForwardRefExoticComponent<HStackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/layout/HStack.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import Flex from "./Flex.js";
-const HStack_HStack = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Flex, {
+import { Flex } from "./Flex.js";
+const HStack = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Flex, {
         ref: ref,
         direction: "row",
         items: "center",
         ...props
     }));
-HStack_HStack.displayName = 'UX.HStack';
-const HStack = HStack_HStack;
-export { HStack as default };
+HStack.displayName = 'UX.HStack';
+export { HStack };

package/dist/components/layout/Square.d.ts

@@ -2,7 +2,6 @@ import { type CenterProps } from './Center';
 export type SquareProps = CenterProps & {
     size?: number;
 };
-declare const Square: import("react").ForwardRefExoticComponent<CenterProps & {
+export declare const Square: import("react").ForwardRefExoticComponent<CenterProps & {
     size?: number;
 } & import("react").RefAttributes<HTMLDivElement>>;
-export default Square;

package/dist/components/layout/Square.js

@@ -1,13 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "@heroui/theme";
-import Center from "./Center.js";
-const Square_Square = /*#__PURE__*/ forwardRef(({ size, className, ...props }, ref)=>/*#__PURE__*/ jsx(Center, {
+import { Center } from "./Center.js";
+const Square = /*#__PURE__*/ forwardRef(({ size, className, ...props }, ref)=>/*#__PURE__*/ jsx(Center, {
         ref: ref,
         shrink: 0,
         className: cn(size && `w-[${size}px] h-[${size}px]`, className),
         ...props
     }));
-Square_Square.displayName = 'UX.Square';
-const Square = Square_Square;
-export { Square as default };
+Square.displayName = 'UX.Square';
+export { Square };

package/dist/components/layout/VStack.d.ts

@@ -1,4 +1,3 @@
 import { type FlexProps } from './Flex';
 export type VStackProps = Omit<FlexProps, 'direction' | 'vertical'>;
-declare const VStack: import("react").ForwardRefExoticComponent<VStackProps & import("react").RefAttributes<HTMLDivElement>>;
-export default VStack;
+export declare const VStack: import("react").ForwardRefExoticComponent<VStackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/layout/VStack.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import Flex from "./Flex.js";
+import { Flex } from "./Flex.js";
 const VStack = /*#__PURE__*/ forwardRef(({ items = 'stretch', ...props }, ref)=>/*#__PURE__*/ jsx(Flex, {
         ref: ref,
         vertical: true,
@@ -8,5 +8,4 @@ const VStack = /*#__PURE__*/ forwardRef(({ items = 'stretch', ...props }, ref)=>
         ...props
     }));
 VStack.displayName = 'UX.VStack';
-const layout_VStack = VStack;
-export { layout_VStack as default };
+export { VStack };

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

@@ -0,0 +1,6 @@
+export * from './Center';
+export * from './Circle';
+export * from './Flex';
+export * from './HStack';
+export * from './Square';
+export * from './VStack';

package/dist/components/layout/index.js

@@ -0,0 +1,6 @@
+export * from "./Center.js";
+export * from "./Circle.js";
+export * from "./Flex.js";
+export * from "./HStack.js";
+export * from "./Square.js";
+export * from "./VStack.js";

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

@@ -1,3 +1,2 @@
 import { type TextProps } from './Text.type';
-declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLSpanElement>>;
-export default Text;
+export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/typography/Text.js

@@ -4,9 +4,11 @@ import { cn } from "@heroui/theme";
 import { textClasses } from "./Text.type.js";
 const Text = /*#__PURE__*/ forwardRef(({ variant = 'body2Bold', fontWeight, color, lineHeight, align, className, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
         ref: ref,
-        className: cn(textClasses.variant[variant], h1 && textClasses.variant.h1, h2 && textClasses.variant.h2, h3 && textClasses.variant.h3, body1 && textClasses.variant.body1, body1Bold && textClasses.variant.body1Bold, body2 && textClasses.variant.body2, body2Bold && textClasses.variant.body2Bold, body3 && textClasses.variant.body3, body3Bold && textClasses.variant.body3Bold, caption1 && textClasses.variant.caption1, caption1Bold && textClasses.variant.caption1Bold, textClasses.fontWeight[fontWeight], textClasses.color[color], textClasses.lineHeight[lineHeight], textClasses.align[align], className),
+        style: {
+            color: color?.startsWith('#') ? color : void 0
+        },
+        className: cn(textClasses.variant[variant], h1 && textClasses.variant.h1, h2 && textClasses.variant.h2, h3 && textClasses.variant.h3, body1 && textClasses.variant.body1, body1Bold && textClasses.variant.body1Bold, body2 && textClasses.variant.body2, body2Bold && textClasses.variant.body2Bold, body3 && textClasses.variant.body3, body3Bold && textClasses.variant.body3Bold, caption1 && textClasses.variant.caption1, caption1Bold && textClasses.variant.caption1Bold, textClasses.fontWeight[fontWeight], !color?.startsWith('#') && textClasses.color[color], textClasses.lineHeight[lineHeight], textClasses.align[align], className),
         ...props
     }));
 Text.displayName = 'UX.Text';
-const typography_Text = Text;
-export { typography_Text as default };
+export { Text };

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

@@ -81,7 +81,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
      * | default    | -         | -         |
      * | foreground | #FFFFFF   | #000000   |
      * | secondary  | #A1A1AA   | #767A80   |
-     * | tertiary   | #4E4E56   | #C0C0C9   |
+     * | tertiary   | #4E4E56   | #D8D8DE   |
      * | primary    | #D745FF   | #000000   |
      * | success    | #45B167   | #2E9F4A   |
      * | danger     | #E84A5A   | #DE4A40   |
@@ -89,7 +89,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
      * | warning    | #FF9821   | #FF9821   |
      * | gold       | #FFB800   | #F38300   |
      */
-    color?: UXForegroundColor;
+    color?: UXForegroundColor | `#${string}`;
     lineHeight?: TextLineHeight;
     align?: TextAlign;
 }

package/dist/utils/input-classes.js

@@ -41,7 +41,7 @@ const inputClasses = {
         color: {
             default: {
                 inputWrapper: 'caret-foreground',
-                input: 'text-foreground-100'
+                input: 'text-foreground'
             },
             primary: {
                 inputWrapper: 'caret-primary',
@@ -49,7 +49,7 @@ const inputClasses = {
             },
             secondary: {
                 inputWrapper: 'caret-foreground',
-                input: 'text-foreground-300'
+                input: 'text-secondary'
             },
             success: {
                 inputWrapper: 'caret-success',
@@ -185,9 +185,9 @@ const inputClasses = {
                 'lg'
             ],
             class: {
-                inputWrapper: 'bg-background-200 text-foreground-100 font-medium',
+                inputWrapper: 'bg-background-200 text-tertiary font-medium',
                 label: 'font-medium',
-                input: '!outline-none placeholder:text-foreground-100 placeholder:font-medium font-medium text-foreground'
+                input: '!outline-none placeholder:text-tertiary dark:placeholder:text-tertiary placeholder:font-medium font-medium text-foreground'
             }
         },
         {
@@ -195,7 +195,7 @@ const inputClasses = {
             color: 'default',
             isInvalid: false,
             class: {
-                inputWrapper: 'group-data-[focus=true]:border-foreground-100'
+                inputWrapper: 'group-data-[focus=true]:border-foreground'
             }
         },
         {
@@ -211,7 +211,7 @@ const inputClasses = {
             color: 'secondary',
             isInvalid: false,
             class: {
-                inputWrapper: 'group-data-[focus=true]:border-foreground-300'
+                inputWrapper: 'group-data-[focus=true]:border-secondary'
             }
         },
         {
@@ -260,9 +260,9 @@ const inputClasses = {
             isInvalid: false,
             class: {
                 inputWrapper: [
-                    'border-foreground-100',
-                    'data-[hover=true]:border-foreground-100',
-                    'group-data-[focus=true]:border-foreground-100'
+                    'border-foreground',
+                    'data-[hover=true]:border-foreground',
+                    'group-data-[focus=true]:border-foreground'
                 ]
             }
         },
@@ -284,9 +284,9 @@ const inputClasses = {
             isInvalid: false,
             class: {
                 inputWrapper: [
-                    'border-foreground-300',
+                    'border-secondary',
                     'data-[hover=true]:bg-background-200/70',
-                    'group-data-[focus=true]:border-foreground-300'
+                    'group-data-[focus=true]:border-secondary'
                 ]
             }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.3.0-beta.1",
+  "version": "0.3.0-beta.11",
   "type": "module",
   "exports": {
     ".": {
@@ -39,8 +39,8 @@
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
     "typescript": "^5.8.3",
-    "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/lintstaged-config": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -48,7 +48,8 @@
   },
   "dependencies": {
     "ahooks": "^3.9.4",
-    "@particle-network/ui-shared": "0.1.1"
+    "@particle-network/ui-shared": "0.2.0-beta.3",
+    "@particle-network/icons": "0.3.0-beta.6"
   },
   "scripts": {
     "build": "rslib build",

package/tailwind-preset.js

@@ -128,14 +128,14 @@ module.exports = {
               DEFAULT: '#FFFFFF',
             },
             background: {
-              200: '#E8E8ED',
-              300: '#F0F0F2',
-              400: '#F8F8FA',
+              200: '#F0F0F2',
+              300: '#F8F8FA',
+              400: '#FFFFFF',
               500: '#FFFFFF',
-              DEFAULT: '#FFFFFF',
+              DEFAULT: '#F8F8FA',
             },
             foreground: {
-              100: '#C0C0C9',
+              100: '#D8D8DE',
               300: '#767A80',
               500: '#000000',
               DEFAULT: '#000000',
@@ -156,7 +156,7 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             tertiary: {
-              DEFAULT: '#C0C0C9',
+              DEFAULT: '#D8D8DE',
               foreground: '#000000',
             },
             success: {
@@ -172,7 +172,7 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             focus: '#D745FF',
-            divider: '#E0E0E6',
+            divider: '#E8E8ED',
             alert: '#E65E16',
             gold: '#F38300',
           },