@particle-network/ui-react 0.5.1-beta.16 → 0.5.1-beta.18

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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 ColorPickerIcon from "@particle-network/icons/web/ColorPickerIcon";
@@ -12,7 +12,7 @@ import { useThemeColor } from "../UXThemeSwitch/index.js";
 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 UXColorPicker = ({ className, isDisabled, isIconOnly, placement = 'bottom-start', value, defaultValue, onChange, onChangeEnd, onValueChange, onValueChangeEnd, isChanged, onReset })=>{
     const colors = useThemeColor();
     const isControlled = void 0 !== value;
     const [pickerKey, setPickerKey] = useState(0);
@@ -134,7 +134,7 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
         onChange: handleChange,
         children: /*#__PURE__*/ jsxs(HStack, {
             gap: 2,
-            className: cn('rounded-small bg-background-200 px-md h-[30px] w-[8.5rem]', isDisabled && 'opacity-disabled', isInputFocused && 'ring-foreground ring-1', className),
+            className: cn(!isIconOnly && 'px-md rounded-small bg-background-200 h-[30px] w-[8.5rem]', isDisabled && 'opacity-disabled', isInputFocused && 'ring-foreground ring-1', className),
             children: [
                 /*#__PURE__*/ jsxs(UXPopover, {
                     placement: placement,
@@ -207,26 +207,30 @@ const UXColorPicker = ({ className, isDisabled, placement = 'bottom-start', valu
                         })
                     ]
                 }),
-                /*#__PURE__*/ jsx(ColorInput, {
-                    isDisabled: isDisabled,
-                    inputClassName: "focus:ring-0 px-0 text-left flex-1 relative bg-transparent",
-                    value: currentColor,
-                    defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
-                    onChange: handleColorFieldsChange,
-                    onFocus: ()=>setIsInputFocused(true),
-                    onBlur: ()=>setIsInputFocused(false)
-                }),
-                hasChanged ? /*#__PURE__*/ jsx(UXButton, {
-                    isIconOnly: true,
-                    "aria-label": "Reset color",
-                    isDisabled: isDisabled,
-                    size: "sm",
-                    variant: "light",
-                    color: "secondary",
-                    onPress: handleReset,
-                    children: /*#__PURE__*/ jsx(RefreshCcwIcon, {})
-                }) : /*#__PURE__*/ jsx("div", {
-                    className: "size-4 shrink-0"
+                !isIconOnly && /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(ColorInput, {
+                            isDisabled: isDisabled,
+                            inputClassName: "focus:ring-0 px-0 text-left flex-1 relative bg-transparent",
+                            value: currentColor,
+                            defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
+                            onChange: handleColorFieldsChange,
+                            onFocus: ()=>setIsInputFocused(true),
+                            onBlur: ()=>setIsInputFocused(false)
+                        }),
+                        hasChanged ? /*#__PURE__*/ jsx(UXButton, {
+                            isIconOnly: true,
+                            "aria-label": "Reset color",
+                            isDisabled: isDisabled,
+                            size: "sm",
+                            variant: "light",
+                            color: "secondary",
+                            onPress: handleReset,
+                            children: /*#__PURE__*/ jsx(RefreshCcwIcon, {})
+                        }) : /*#__PURE__*/ jsx("div", {
+                            className: "size-4 shrink-0"
+                        })
+                    ]
                 })
             ]
         })

package/dist/components/UXColorPicker/types.d.ts

@@ -42,6 +42,10 @@ export interface UXColorPickerProps {
      * Popover 位置
      */
     placement?: UXPopoverProps['placement'];
+    /**
+     * 是否只显示图标
+     */
+    isIconOnly?: boolean;
 }
 export interface ColorFieldsProps extends Pick<UXColorPickerProps, 'value' | 'defaultValue'> {
     /**

package/dist/components/UXToast/index.js

@@ -34,18 +34,24 @@ const getIcon = (type)=>{
 };
 const show = (props)=>{
     const { type = 'info', hideCloseButton, icon, variant, classNames, title, description, ...toastProps } = props ?? {};
-    const { base, description: descriptionClassName, icon: iconClassName, loadingComponent, content, closeButton, ...restClassNames } = classNames ?? {};
+    const { base, title: titleClassName, description: descriptionClassName, icon: iconClassName, loadingComponent, content, closeButton, ...restClassNames } = classNames ?? {};
     return addToast({
         classNames: {
             base: [
-                'bg-cursor rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px] m-0',
+                'dark:bg-cursor bg-white rounded-xl px-3.5 shadow-none min-h-11 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
             ],
+            title: [
+                'text-cursor-foreground text-xs font-medium leading-4 !whitespace-normal me-0 pt-xs line-clamp-2',
+                hasLongWord(title) && 'break-all',
+                'flat' === variant && 'text-white',
+                titleClassName
+            ],
             description: [
-                'text-cursor-foreground text-xs font-medium me-0 leading-4 line-clamp-4',
+                'text-secondary !text-body3 me-0 leading-4',
                 'flat' === variant && 'text-white',
                 hasLongWord(description) && 'break-all',
                 descriptionClassName
@@ -90,22 +96,22 @@ const show = (props)=>{
 const toast = {
     info: (message, props)=>show({
             type: 'info',
-            description: message,
+            title: message,
             ...props
         }),
     success: (message, props)=>show({
             type: 'success',
-            description: message,
+            title: message,
             ...props
         }),
     error: (message, props)=>show({
             type: 'error',
-            description: message,
+            title: message,
             ...props
         }),
     loading: (message, props)=>show({
             type: 'loading',
-            description: message,
+            title: message,
             ...props
         }),
     show,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.5.1-beta.16",
+  "version": "0.5.1-beta.18",
   "type": "module",
   "exports": {
     ".": {
@@ -52,8 +52,8 @@
     "react-aria-components": "^1.14.0",
     "values.js": "^2.1.1",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.5.1-beta.6",
-    "@particle-network/ui-shared": "0.4.1-beta.5"
+    "@particle-network/ui-shared": "0.4.1-beta.5",
+    "@particle-network/icons": "0.5.1-beta.6"
   },
   "scripts": {
     "build": "rslib build",