@particle-network/ui-react 0.5.1-beta.1 → 0.5.1-beta.10

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type UXForegroundColor, type UXRadius } from '@particle-network/ui-shared';
+import { type HexColor, type UXComponentColor, type UXRadius } from '@particle-network/ui-shared';
 export interface ProgressWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * 进度 (%)
@@ -24,7 +24,7 @@ export interface ProgressWrapperProps extends React.HTMLAttributes<HTMLDivElemen
     /**
      * 进度条颜色
      */
-    color?: UXForegroundColor | 'transparent' | `#${string}`;
+    color?: UXComponentColor | 'transparent' | HexColor;
     /**
      * 进度条 SVG 样式
      */

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/UXAutocomplete/index.js

@@ -3,10 +3,9 @@ import "react";
 import { Autocomplete, AutocompleteItem, AutocompleteSection } from "@heroui/autocomplete";
 import ChevronDownIcon from "@particle-network/icons/web/ChevronDownIcon";
 const UXAutocomplete = (props)=>{
-    const { fullWidth = false, classNames = {}, radius = 'sm', labelPlacement = 'outside-top', ...restProps } = props;
+    const { classNames = {}, radius = 'sm', labelPlacement = 'outside-top', ...restProps } = props;
     const { base, popoverContent, selectorButton, endContentWrapper, clearButton, listboxWrapper } = classNames;
     return /*#__PURE__*/ jsx(Autocomplete, {
-        fullWidth: fullWidth,
         classNames: {
             base: [
                 'ux-base',

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,
@@ -618,31 +618,67 @@ const button_theme_button = tv({
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'xs',
             class: 'min-w-5 w-5 h-5'
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'sm',
             class: 'min-w-6 w-6 h-6'
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'md',
             class: 'min-w-[30px] w-[30px] h-[30px]'
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'lg',
             class: 'min-w-9 w-9 h-9'
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'xl',
             class: 'min-w-11 w-11 h-11'
         },
         {
             isIconOnly: true,
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
             size: 'auto',
             class: ''
         },

package/dist/components/UXButton/button.js

@@ -5,7 +5,7 @@ import { UXSpinner } from "../UXSpinner/index.js";
 import { useButton } from "./use-button.js";
 const Button = forwardRef((props, ref)=>{
     const { Component, domRef, children, spinnerSize, spinner = /*#__PURE__*/ jsx(UXSpinner, {
-        color: "currentColor",
+        color: "current",
         size: spinnerSize
     }), spinnerPlacement, startContent, endContent, isLoading, disableRipple, getButtonProps, getRippleProps, isIconOnly } = useButton({
         ...props,

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'
@@ -27,34 +27,37 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
         },
         size: {
             sm: {
+                base: 'gap-1.5',
                 wrapper: [
                     'w-3.5 h-3.5 me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.2)]',
                     'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
                 ],
-                label: '!text-body3 font-medium',
-                icon: 'h-2.5'
+                label: '!text-body2 font-medium',
+                icon: 'h-2'
             },
             md: {
+                base: 'gap-2',
                 wrapper: [
                     'w-4 h-4 me-0',
-                    'rounded-[calc(theme(borderRadius.medium)*0.2)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1.5',
-                    'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
+                    'rounded-[calc(theme(borderRadius.medium)*0.3)]',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-secondary before:border-1.5',
+                    'after:rounded-[calc(theme(borderRadius.medium)*0.3)]'
                 ],
                 label: '!text-body2 font-medium',
-                icon: 'h-3'
+                icon: 'h-2.5'
             },
             lg: {
+                base: 'gap-2',
                 wrapper: [
                     'w-[18px] h-[18px] me-0',
-                    'rounded-[calc(theme(borderRadius.medium)*0.3)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-secondary before:border-1.5',
-                    'after:rounded-[calc(theme(borderRadius.medium)*0.3)]'
+                    'rounded-[calc(theme(borderRadius.medium)*0.4)]',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.4)] before:border-secondary before:border-1.5',
+                    'after:rounded-[calc(theme(borderRadius.medium)*0.4)]'
                 ],
                 label: '!text-body1 font-medium',
-                icon: 'h-3.5'
+                icon: 'h-3'
             }
         },
         radius: {
@@ -144,10 +147,10 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
         },
         labelPlacement: {
             left: {
-                base: 'flex-row-reverse gap-2'
+                base: 'flex-row-reverse'
             },
             right: {
-                base: 'flex-row gap-2'
+                base: 'flex-row'
             }
         }
     },

package/dist/components/UXChip/chip.extend.d.ts

@@ -1,7 +1,8 @@
 import type React from 'react';
 import { type ChipProps } from '@heroui/chip';
+import type { HexColor } from '@particle-network/ui-shared';
 type ExtendedChipProps = Omit<ChipProps, 'color'> & {
-    color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'alert' | 'danger' | 'bullish' | 'bearish' | `#${string}`;
+    color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'alert' | 'danger' | 'bullish' | 'bearish' | HexColor;
 };
 declare const ExtendedChip: React.ForwardRefExoticComponent<ExtendedChipProps>;
 export default ExtendedChip;

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

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

package/dist/components/UXColorPicker/color-fields.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ColorFieldsProps } from './types';
+export declare const ColorFields: React.FC<ColorFieldsProps>;

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

@@ -0,0 +1,142 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Switch3Icon } from "@particle-network/icons/web";
+import { Flex, VStack } from "../layout/index.js";
+import { Text } from "../typography/Text.js";
+import { UXButton } from "../UXButton/index.js";
+import { ColorInput } from "./color-input.js";
+const ColorFields = ({ value, defaultValue, onChange })=>{
+    const [format, setFormat] = useState('hex');
+    const handleFormatToggle = useCallback(()=>{
+        const formats = [
+            'hex',
+            'rgb',
+            'hsl'
+        ];
+        const currentIndex = formats.indexOf(format);
+        const nextIndex = (currentIndex + 1) % formats.length;
+        setFormat(formats[nextIndex]);
+    }, [
+        format
+    ]);
+    return /*#__PURE__*/ jsxs(Flex, {
+        gap: "md",
+        children: [
+            'hex' === format && /*#__PURE__*/ jsxs(VStack, {
+                gap: 1,
+                className: "flex-1",
+                children: [
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        className: "w-full",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "HEX"
+                    })
+                ]
+            }),
+            'rgb' === format && /*#__PURE__*/ jsxs("div", {
+                className: "grid flex-1 grid-cols-3 gap-1",
+                children: [
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "red",
+                        className: "w-full",
+                        colorSpace: "rgb",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "green",
+                        className: "w-full",
+                        colorSpace: "rgb",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "blue",
+                        className: "w-full",
+                        colorSpace: "rgb",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "R"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "G"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "B"
+                    })
+                ]
+            }),
+            'hsl' === format && /*#__PURE__*/ jsxs("div", {
+                className: "grid flex-1 grid-cols-3 gap-1",
+                children: [
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "hue",
+                        className: "w-full",
+                        colorSpace: "hsl",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "saturation",
+                        className: "w-full",
+                        colorSpace: "hsl",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(ColorInput, {
+                        channel: "lightness",
+                        className: "w-full",
+                        colorSpace: "hsl",
+                        defaultValue: defaultValue,
+                        value: value,
+                        onChange: onChange
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "H"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "S"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        color: "secondary",
+                        align: "center",
+                        children: "L"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(UXButton, {
+                isIconOnly: true,
+                className: "shrink-0",
+                variant: "light",
+                onPress: handleFormatToggle,
+                children: /*#__PURE__*/ jsx(Switch3Icon, {})
+            })
+        ]
+    });
+};
+ColorFields.displayName = 'ColorInputFields';
+export { ColorFields };

package/dist/components/UXColorPicker/color-input.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type ColorFieldProps } from 'react-aria-components';
+interface ColorInputProps extends ColorFieldProps {
+    inputClassName?: string;
+}
+export declare const ColorInput: React.FC<ColorInputProps>;
+export {};

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

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { ColorField, Input } from "react-aria-components";
+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,
+        children: /*#__PURE__*/ jsx(Input, {
+            className: cn(inputClassName, props.inputClassName)
+        })
+    });
+export { ColorInput };

package/dist/components/UXColorPicker/color-picker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXColorPickerProps } from './types';
+export declare const UXColorPicker: React.FC<UXColorPickerProps>;

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

@@ -0,0 +1,228 @@
+'use client';
+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 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";
+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 colors = useThemeColor();
+    const isControlled = void 0 !== value;
+    const [pickerKey, setPickerKey] = useState(0);
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const getInitialColor = ()=>{
+        if (isControlled && value) return normalizeColor(value);
+        if (defaultValue) return normalizeColor(defaultValue);
+        return parseColor('#000000');
+    };
+    const initialColorRef = useRef(getInitialColor());
+    const [internalColor, setInternalColor] = useState(()=>{
+        if (isControlled) {
+            if (value) return normalizeColor(value);
+        }
+        if (defaultValue) return normalizeColor(defaultValue);
+        return parseColor('#000000');
+    });
+    const currentColor = useMemo(()=>{
+        if (isControlled && value) return normalizeColor(value);
+        return internalColor;
+    }, [
+        value,
+        internalColor,
+        isControlled
+    ]);
+    useEffect(()=>{
+        const initialColor = getInitialColor();
+        initialColorRef.current = initialColor;
+    }, []);
+    useEffect(()=>{
+        if (!isControlled && defaultValue) {
+            const newColor = normalizeColor(defaultValue);
+            setInternalColor(newColor);
+        }
+    }, [
+        defaultValue,
+        isControlled
+    ]);
+    useEffect(()=>{
+        if (isControlled && value) {
+            const newColor = normalizeColor(value);
+            setInternalColor(newColor);
+        }
+    }, [
+        value,
+        isControlled
+    ]);
+    const handleChange = useCallback((color)=>{
+        if (color) {
+            setInternalColor(color);
+            onChange?.(color);
+            onValueChange?.(color.toString('hex'));
+        }
+    }, [
+        onChange,
+        onValueChange,
+        isControlled
+    ]);
+    const handleEyedropper = useCallback(()=>{
+        if ('EyeDropper' in window) {
+            const eyeDropper = new window.EyeDropper();
+            eyeDropper.open().then((result)=>{
+                try {
+                    const newColor = parseColor(result.sRGBHex);
+                    if (newColor) handleChange(newColor);
+                } catch  {}
+            }).catch(()=>{});
+        } else console.warn('EyeDropper API is not supported in this browser');
+    }, [
+        handleChange
+    ]);
+    const handleChangeEnd = useCallback((color)=>{
+        if (color) {
+            onChangeEnd?.(color);
+            onValueChangeEnd?.(color.toString('hex'));
+        }
+    }, [
+        onChangeEnd,
+        onValueChangeEnd
+    ]);
+    const hasChanged = useMemo(()=>{
+        if (void 0 !== isChanged) return isChanged;
+        const initialHex = initialColorRef.current.toString('hex');
+        const currentHex = currentColor.toString('hex');
+        return initialHex !== currentHex;
+    }, [
+        currentColor,
+        isChanged
+    ]);
+    const handleReset = ()=>{
+        if (onReset) return void onReset();
+        const resetColor = initialColorRef.current;
+        if (!isControlled) {
+            setInternalColor(resetColor);
+            setPickerKey((prev)=>prev + 1);
+        }
+        onChange?.(resetColor);
+        onValueChange?.(resetColor.toString('hex'));
+        onChangeEnd?.(resetColor);
+        onValueChangeEnd?.(resetColor.toString('hex'));
+    };
+    const handleColorFieldsChange = useCallback((color)=>{
+        if (!color) return;
+        handleChange(color);
+        handleChangeEnd(color);
+    }, [
+        handleChange,
+        handleChangeEnd
+    ]);
+    return /*#__PURE__*/ jsx(ColorPicker, {
+        value: value,
+        defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
+        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),
+            children: [
+                /*#__PURE__*/ jsxs(UXPopover, {
+                    placement: placement,
+                    children: [
+                        /*#__PURE__*/ jsx(UXPopoverTrigger, {
+                            children: /*#__PURE__*/ jsx(UXButton, {
+                                radius: "none",
+                                size: "auto",
+                                isDisabled: isDisabled,
+                                children: /*#__PURE__*/ jsx(ColorSwatch, {
+                                    className: cn('h-4 w-4 rounded-[4px]', internalColor.toString('hex') === colors.bg200 && 'border-foreground/10 border')
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(UXPopoverContent, {
+                            className: "p-3",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: cn('flex w-[240px] flex-col gap-3'),
+                                children: [
+                                    /*#__PURE__*/ jsx(ColorArea, {
+                                        colorSpace: "hsb",
+                                        xChannel: "saturation",
+                                        yChannel: "brightness",
+                                        className: "aspect-square w-full overflow-hidden rounded-lg",
+                                        onChangeEnd: handleChangeEnd,
+                                        children: /*#__PURE__*/ jsx(ColorThumb, {
+                                            className: "h-4 w-4 rounded-full border-2 border-white shadow-[0_2px_4px_rgba(0,0,0,0.2)]"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs(HStack, {
+                                        gap: "md",
+                                        items: "center",
+                                        children: [
+                                            'EyeDropper' in window && /*#__PURE__*/ jsx(UXButton, {
+                                                isIconOnly: true,
+                                                "aria-label": "Pick color from screen",
+                                                size: "sm",
+                                                variant: "light",
+                                                color: "secondary",
+                                                onPress: handleEyedropper,
+                                                children: /*#__PURE__*/ jsx(ColorPickerIcon, {})
+                                            }),
+                                            /*#__PURE__*/ jsx(ColorSwatch, {
+                                                className: "h-6 w-6 shrink-0 rounded-full"
+                                            }),
+                                            /*#__PURE__*/ jsx(ColorSlider, {
+                                                channel: "hue",
+                                                className: "min-w-0 flex-1",
+                                                colorSpace: "hsl",
+                                                orientation: "horizontal",
+                                                onChangeEnd: handleChangeEnd,
+                                                children: /*#__PURE__*/ jsx(SliderTrack, {
+                                                    className: "h-3 rounded-full",
+                                                    children: /*#__PURE__*/ jsx(ColorThumb, {
+                                                        className: "top-[50%] z-10 h-4 w-4 rounded-full border-2 border-white shadow-[0_2px_4px_rgba(0,0,0,0.2)]"
+                                                    })
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(ColorFields, {
+                                        defaultValue: !isControlled && pickerKey > 0 ? internalColor : defaultValue,
+                                        value: value,
+                                        onChange: handleColorFieldsChange
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(ColorInput, {
+                    isDisabled: isDisabled,
+                    inputClassName: "focus:ring-0 px-0 text-left flex-1 relative bg-transparent",
+                    value: value,
+                    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"
+                })
+            ]
+        })
+    }, isControlled ? void 0 : pickerKey);
+};
+UXColorPicker.displayName = 'UXColorPicker';
+export { UXColorPicker };

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

@@ -0,0 +1,5 @@
+import { parseColor } from 'react-aria-components';
+import type { Color } from 'react-stately';
+export { UXColorPicker } from './color-picker';
+export type * from './types';
+export { type Color, parseColor };

package/dist/components/UXColorPicker/index.js

@@ -0,0 +1,3 @@
+import { parseColor } from "react-aria-components";
+import { UXColorPicker } from "./color-picker.js";
+export { UXColorPicker, parseColor };