@particle-network/ui-react 0.5.1-beta.17 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.5.1-beta.17",
+  "version": "0.5.1-beta.18",
   "type": "module",
   "exports": {
     ".": {
@@ -38,8 +38,8 @@
     "@rslib/core": "^0.12.3",
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
-    "@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",