@rc-component/color-picker - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

es/ColorPicker.d.ts

@@ -1,26 +0,13 @@
-import type { BuildInPlacements, TriggerProps } from '@rc-component/trigger';
-import type { CSSProperties, FC } from 'react';
+import type { CSSProperties } from 'react';
 import React from 'react';
-import type { ColorPickerPanelProps } from './ColorPickerPanel';
-import { TriggerPlacement, TriggerType } from './interface';
-export interface ColorPickerProps extends ColorPickerPanelProps {
-    open?: boolean;
-    trigger?: TriggerType;
-    children: React.ReactElement;
-    disabled?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    /** Popup placement */
-    placement?: TriggerPlacement;
-    getPopupContainer?: (node: HTMLElement) => HTMLElement;
-    classNames?: {
-        popup?: string;
-    };
-    styles?: {
-        popup?: CSSProperties;
-    };
-    builtinPlacements?: BuildInPlacements;
-    arrow?: boolean;
-    motion?: TriggerProps['popupMotion'];
+import type { BaseColorPickerProps, ColorGenInput } from './interface';
+export interface ColorPickerProps extends BaseColorPickerProps {
+    value?: ColorGenInput;
+    defaultValue?: ColorGenInput;
+    className?: string;
+    style?: CSSProperties;
+    /** Get panel element  */
+    panelRender?: (panel: React.ReactElement) => React.ReactElement;
 }
-declare const ColorPicker: FC<ColorPickerProps>;
-export default ColorPicker;
+declare const _default: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

es/ColorPicker.js

@@ -1,51 +0,71 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["open", "disabled", "trigger", "children", "onOpenChange", "placement", "classNames", "styles", "prefixCls", "builtinPlacements", "motion"];
-import Trigger from '@rc-component/trigger';
-import useMergedState from "rc-util/es/hooks/useMergedState";
-import React from 'react';
-import ColorPickerPanel from "./ColorPickerPanel";
-import placements from "./components/placements";
-import { ColorPickerPrefixCls } from "./util";
-var ColorPicker = function ColorPicker(props) {
-  var open = props.open,
-    disabled = props.disabled,
-    _props$trigger = props.trigger,
-    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
-    children = props.children,
-    onOpenChange = props.onOpenChange,
-    _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
-    classNames = props.classNames,
-    styles = props.styles,
+import React, { forwardRef, useMemo } from 'react';
+import { ColorPickerPrefixCls, defaultColor, generateColor } from "./util";
+import classNames from 'classnames';
+import ColorBlock from "./components/ColorBlock";
+import Picker from "./components/Picker";
+import Slider from "./components/Slider";
+import useColorState from "./hooks/useColorState";
+var hueColor = ['rgb(255, 0, 0) 0%', 'rgb(255, 255, 0) 17%', 'rgb(0, 255, 0) 33%', 'rgb(0, 255, 255) 50%', 'rgb(0, 0, 255) 67%', 'rgb(255, 0, 255) 83%', 'rgb(255, 0, 0) 100%'];
+export default /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
     _props$prefixCls = props.prefixCls,
     prefixCls = _props$prefixCls === void 0 ? ColorPickerPrefixCls : _props$prefixCls,
-    _props$builtinPlaceme = props.builtinPlacements,
-    builtinPlacements = _props$builtinPlaceme === void 0 ? placements : _props$builtinPlaceme,
-    motion = props.motion,
-    resetProps = _objectWithoutProperties(props, _excluded);
-  var _useMergedState = useMergedState(false, {
-      value: open,
-      postState: function postState(openData) {
-        return !disabled && openData;
-      },
-      onChange: onOpenChange
+    onChange = props.onChange,
+    className = props.className,
+    style = props.style,
+    panelRender = props.panelRender;
+  var _useColorState = useColorState(defaultColor, {
+      value: value,
+      defaultValue: defaultValue
     }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    openValue = _useMergedState2[0],
-    setOpenValue = _useMergedState2[1];
-  return /*#__PURE__*/React.createElement(Trigger, _extends({
-    action: [trigger],
-    popupVisible: openValue,
-    popup: /*#__PURE__*/React.createElement(ColorPickerPanel, props),
-    popupPlacement: placement,
-    onPopupVisibleChange: setOpenValue,
-    popupClassName: classNames === null || classNames === void 0 ? void 0 : classNames.popup,
-    popupStyle: styles === null || styles === void 0 ? void 0 : styles.popup,
-    builtinPlacements: builtinPlacements,
-    popupMotion: motion,
-    prefixCls: prefixCls
-  }, resetProps), children);
-};
-export default ColorPicker;
+    _useColorState2 = _slicedToArray(_useColorState, 2),
+    colorValue = _useColorState2[0],
+    setColorValue = _useColorState2[1];
+  var alphaColor = useMemo(function () {
+    var rgb = generateColor(colorValue.toRgbString());
+    // alpha color need equal 1 for base color
+    rgb.setAlpha(1);
+    return rgb.toRgbString();
+  }, [colorValue]);
+  var mergeCls = classNames("".concat(prefixCls, "-panel"), className);
+  var handleChange = function handleChange(data) {
+    if (!value) {
+      setColorValue(data);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(data);
+  };
+  var panelElement = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Picker, {
+      color: colorValue,
+      onChange: handleChange,
+      prefixCls: prefixCls
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-slider-container")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-slider-group")
+    }, /*#__PURE__*/React.createElement(Slider, {
+      gradientColors: hueColor,
+      prefixCls: prefixCls,
+      color: colorValue,
+      value: "hsl(".concat(colorValue.toHsb().h, ",100%, 50%)"),
+      onChange: handleChange
+    }), /*#__PURE__*/React.createElement(Slider, {
+      type: "alpha",
+      gradientColors: ['rgba(255, 0, 4, 0) 0%', alphaColor],
+      prefixCls: prefixCls,
+      color: colorValue,
+      value: colorValue.toRgbString(),
+      onChange: handleChange
+    })), /*#__PURE__*/React.createElement(ColorBlock, {
+      color: colorValue.toRgbString(),
+      prefixCls: prefixCls
+    })));
+  }, [prefixCls, alphaColor, colorValue, handleChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: mergeCls,
+    style: style,
+    ref: ref
+  }, typeof panelRender === 'function' ? panelRender(panelElement) : panelElement);
+});

es/components/Picker.d.ts

@@ -1,6 +0,5 @@
-import { FC } from 'react';
-import { BaseColorPickerProps } from '../interface';
-export interface PickerProps extends BaseColorPickerProps {
-}
+import type { FC } from 'react';
+import type { BaseColorPickerProps } from '../interface';
+export declare type PickerProps = BaseColorPickerProps;
 declare const Picker: FC<PickerProps>;
 export default Picker;

es/hooks/useColorDrag.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
-import { Color } from '../color';
+import type { Color } from '../color';
 import type { TransformOffset } from '../interface';
@@ -4,0 +3,0 @@ declare type EventType = MouseEvent | React.MouseEvent<Element, MouseEvent> | React.TouchEvent<Element> | TouchEvent;

es/index.d.ts

 import ColorPicker from './ColorPicker';
 export { Color } from './color';
 export type { ColorPickerProps } from './ColorPicker';
-export { default as ColorPickerPanel } from './ColorPickerPanel';
-export type { ColorPickerPanelProps } from './ColorPickerPanel';
 export { default as ColorBlock } from './components/ColorBlock';
@@ -7,0 +5,0 @@ export type { ColorBlockProps } from './components/ColorBlock';

es/index.js

 import ColorPicker from "./ColorPicker";
 export { Color } from "./color";
-export { default as ColorPickerPanel } from "./ColorPickerPanel";
 export { default as ColorBlock } from "./components/ColorBlock";
 export * from "./interface";
 export default ColorPicker;

lib/ColorPicker.d.ts

@@ -1,26 +0,13 @@
-import type { BuildInPlacements, TriggerProps } from '@rc-component/trigger';
-import type { CSSProperties, FC } from 'react';
+import type { CSSProperties } from 'react';
 import React from 'react';
-import type { ColorPickerPanelProps } from './ColorPickerPanel';
-import { TriggerPlacement, TriggerType } from './interface';
-export interface ColorPickerProps extends ColorPickerPanelProps {
-    open?: boolean;
-    trigger?: TriggerType;
-    children: React.ReactElement;
-    disabled?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    /** Popup placement */
-    placement?: TriggerPlacement;
-    getPopupContainer?: (node: HTMLElement) => HTMLElement;
-    classNames?: {
-        popup?: string;
-    };
-    styles?: {
-        popup?: CSSProperties;
-    };
-    builtinPlacements?: BuildInPlacements;
-    arrow?: boolean;
-    motion?: TriggerProps['popupMotion'];
+import type { BaseColorPickerProps, ColorGenInput } from './interface';
+export interface ColorPickerProps extends BaseColorPickerProps {
+    value?: ColorGenInput;
+    defaultValue?: ColorGenInput;
+    className?: string;
+    style?: CSSProperties;
+    /** Get panel element  */
+    panelRender?: (panel: React.ReactElement) => React.ReactElement;
 }
-declare const ColorPicker: FC<ColorPickerProps>;
-export default ColorPicker;
+declare const _default: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

lib/ColorPicker.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -8,53 +9,75 @@ value: true
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _trigger = _interopRequireDefault(require("@rc-component/trigger"));
-var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
-var _react = _interopRequireDefault(require("react"));
-var _ColorPickerPanel = _interopRequireDefault(require("./ColorPickerPanel"));
-var _placements = _interopRequireDefault(require("./components/placements"));
+var _react = _interopRequireWildcard(require("react"));
 var _util = require("./util");
-var _excluded = ["open", "disabled", "trigger", "children", "onOpenChange", "placement", "classNames", "styles", "prefixCls", "builtinPlacements", "motion"];
-var ColorPicker = function ColorPicker(props) {
-  var open = props.open,
-    disabled = props.disabled,
-    _props$trigger = props.trigger,
-    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
-    children = props.children,
-    onOpenChange = props.onOpenChange,
-    _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
-    classNames = props.classNames,
-    styles = props.styles,
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ColorBlock = _interopRequireDefault(require("./components/ColorBlock"));
+var _Picker = _interopRequireDefault(require("./components/Picker"));
+var _Slider = _interopRequireDefault(require("./components/Slider"));
+var _useColorState3 = _interopRequireDefault(require("./hooks/useColorState"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var hueColor = ['rgb(255, 0, 0) 0%', 'rgb(255, 255, 0) 17%', 'rgb(0, 255, 0) 33%', 'rgb(0, 255, 255) 50%', 'rgb(0, 0, 255) 67%', 'rgb(255, 0, 255) 83%', 'rgb(255, 0, 0) 100%'];
+var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
     _props$prefixCls = props.prefixCls,
     prefixCls = _props$prefixCls === void 0 ? _util.ColorPickerPrefixCls : _props$prefixCls,
-    _props$builtinPlaceme = props.builtinPlacements,
-    builtinPlacements = _props$builtinPlaceme === void 0 ? _placements.default : _props$builtinPlaceme,
-    motion = props.motion,
-    resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useMergedState = (0, _useMergedState3.default)(false, {
-      value: open,
-      postState: function postState(openData) {
-        return !disabled && openData;
-      },
-      onChange: onOpenChange
+    onChange = props.onChange,
+    className = props.className,
+    style = props.style,
+    panelRender = props.panelRender;
+  var _useColorState = (0, _useColorState3.default)(_util.defaultColor, {
+      value: value,
+      defaultValue: defaultValue
     }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    openValue = _useMergedState2[0],
-    setOpenValue = _useMergedState2[1];
-  return /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _extends2.default)({
-    action: [trigger],
-    popupVisible: openValue,
-    popup: /*#__PURE__*/_react.default.createElement(_ColorPickerPanel.default, props),
-    popupPlacement: placement,
-    onPopupVisibleChange: setOpenValue,
-    popupClassName: classNames === null || classNames === void 0 ? void 0 : classNames.popup,
-    popupStyle: styles === null || styles === void 0 ? void 0 : styles.popup,
-    builtinPlacements: builtinPlacements,
-    popupMotion: motion,
-    prefixCls: prefixCls
-  }, resetProps), children);
-};
-var _default = ColorPicker;
+    _useColorState2 = (0, _slicedToArray2.default)(_useColorState, 2),
+    colorValue = _useColorState2[0],
+    setColorValue = _useColorState2[1];
+  var alphaColor = (0, _react.useMemo)(function () {
+    var rgb = (0, _util.generateColor)(colorValue.toRgbString());
+    // alpha color need equal 1 for base color
+    rgb.setAlpha(1);
+    return rgb.toRgbString();
+  }, [colorValue]);
+  var mergeCls = (0, _classnames.default)("".concat(prefixCls, "-panel"), className);
+  var handleChange = function handleChange(data) {
+    if (!value) {
+      setColorValue(data);
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(data);
+  };
+  var panelElement = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      color: colorValue,
+      onChange: handleChange,
+      prefixCls: prefixCls
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-slider-container")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-slider-group")
+    }, /*#__PURE__*/_react.default.createElement(_Slider.default, {
+      gradientColors: hueColor,
+      prefixCls: prefixCls,
+      color: colorValue,
+      value: "hsl(".concat(colorValue.toHsb().h, ",100%, 50%)"),
+      onChange: handleChange
+    }), /*#__PURE__*/_react.default.createElement(_Slider.default, {
+      type: "alpha",
+      gradientColors: ['rgba(255, 0, 4, 0) 0%', alphaColor],
+      prefixCls: prefixCls,
+      color: colorValue,
+      value: colorValue.toRgbString(),
+      onChange: handleChange
+    })), /*#__PURE__*/_react.default.createElement(_ColorBlock.default, {
+      color: colorValue.toRgbString(),
+      prefixCls: prefixCls
+    })));
+  }, [prefixCls, alphaColor, colorValue, handleChange]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: mergeCls,
+    style: style,
+    ref: ref
+  }, typeof panelRender === 'function' ? panelRender(panelElement) : panelElement);
+});
 exports.default = _default;

lib/components/Picker.d.ts

@@ -1,6 +0,5 @@
-import { FC } from 'react';
-import { BaseColorPickerProps } from '../interface';
-export interface PickerProps extends BaseColorPickerProps {
-}
+import type { FC } from 'react';
+import type { BaseColorPickerProps } from '../interface';
+export declare type PickerProps = BaseColorPickerProps;
 declare const Picker: FC<PickerProps>;
 export default Picker;

lib/hooks/useColorDrag.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
-import { Color } from '../color';
+import type { Color } from '../color';
 import type { TransformOffset } from '../interface';
@@ -4,0 +3,0 @@ declare type EventType = MouseEvent | React.MouseEvent<Element, MouseEvent> | React.TouchEvent<Element> | TouchEvent;

lib/index.d.ts

 import ColorPicker from './ColorPicker';
 export { Color } from './color';
 export type { ColorPickerProps } from './ColorPicker';
-export { default as ColorPickerPanel } from './ColorPickerPanel';
-export type { ColorPickerPanelProps } from './ColorPickerPanel';
 export { default as ColorBlock } from './components/ColorBlock';
@@ -7,0 +5,0 @@ export type { ColorBlockProps } from './components/ColorBlock';

lib/index.js

@@ -9,3 +9,2 @@ "use strict";
   Color: true,
-  ColorPickerPanel: true,
   ColorBlock: true
@@ -25,12 +24,5 @@ };
 });
-Object.defineProperty(exports, "ColorPickerPanel", {
-  enumerable: true,
-  get: function get() {
-    return _ColorPickerPanel.default;
-  }
-});
 exports.default = void 0;
 var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
 var _color = require("./color");
-var _ColorPickerPanel = _interopRequireDefault(require("./ColorPickerPanel"));
 var _ColorBlock = _interopRequireDefault(require("./components/ColorBlock"));
@@ -37,0 +29,0 @@ var _interface = require("./interface");

package.json

 {
   "name": "@rc-component/color-picker",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "React Color Picker",
@@ -36,3 +36,3 @@ "keywords": [
     "prepare": "husky install",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish --branch=1.0.x",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "postpublish": "npm run gh-pages",
@@ -51,8 +51,8 @@ "start": "dumi dev",
     "@ctrl/tinycolor": "^3.6.0",
-    "@rc-component/context": "^1.3.0",
-    "@rc-component/trigger": "^1.10.2",
-    "classnames": "^2.2.6"
+    "classnames": "^2.2.6",
+    "rc-util": "^5.30.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
+    "@rc-component/trigger": "^1.13.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -59,0 +59,0 @@ "@testing-library/react": "^13.3.0",

README.md

 # @rc-component/color-picker
 
-TODO: Badges
+React Color Picker.
 
-## Screenshots
+[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 
-TODO
+[npm-image]: http://img.shields.io/npm/v/@rc-component/color-picker.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/@rc-component/color-picker
+[github-actions-image]: https://github.com/react-component/color-picker/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/color-picker/actions
+[coveralls-image]: https://img.shields.io/coveralls/react-component/color-picker.svg?style=flat-square
+[coveralls-url]: https://coveralls.io/r/react-component/color-picker?branch=master
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/color-picker/master.svg?style=flat-square
+[codecov-url]: https://codecov.io/gh/react-component/color-picker/branch/master
+[david-url]: https://david-dm.org/react-component/color-picker
+[david-image]: https://david-dm.org/react-component/color-picker/status.svg?style=flat-square
+[david-dev-url]: https://david-dm.org/react-component/color-picker?type=dev
+[david-dev-image]: https://david-dm.org/react-component/color-picker/dev-status.svg?style=flat-square
+[download-image]: https://img.shields.io/npm/dm/@rc-component/color-picker.svg?style=flat-square
+[download-url]: https://npmjs.org/package/@rc-component/color-picker
+[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/color-picker
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/color-picker
 
-## Feature
-
-- support ie9,ie9+,chrome,firefox,safari
-
 ## install
 
-TODO
+[![@rc-component/color-picker](https://nodei.co/npm/@rc-component/color-picker.png)](https://npmjs.org/package/@rc-component/color-picker)
 
-## Usage
-
-TODO
-
-## API
-
-TODO
-
 ## Development
@@ -34,13 +37,38 @@
 
-TODO
+http://localhost:8000
 
-## Test Case
+## Usage
 
+```js
+import ColorPicker from '@rc-component/color-picker';
+
+export default () => <ColorPicker />;
 ```
-npm test
-```
 
-## Coverage
+## API
 
+<!-- prettier-ignore -->
+| Property | Description | Type | Default |
+| :-- | :-- | :-- | :-- |
+| value | Value of color | string \| `Color` | - |
+| defaultValue | Default value of color | string \| `Color` | - |
+| onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - |
+| panelRender | Custom panel render | `(panel: React.ReactElement) => React.ReactElement` | - |
+
+### Color
+
+<!-- prettier-ignore -->
+| Property | Description | Type | Default |
+| :-- | :-- | :-- | :-- |
+| toHexString | Convert to `hex` format color string, like `#ffffff` | `() => string` | - |
+| toHsb | Convert to `hsb` object, like `{ h: 0, s: 0, b: 0, a: 0 }`  | `() => ({ h: number, s: number, b: number, a number })` | - |
+| toHsbString | Convert to `hsb` format color string, like `hsba(0, 0%, 0%, 0)` | `() => string` | - |
+| toRgb | Convert to `rgb` object,  like `{ r: 0, g: 0, b: 0, a: 0 }` | `() => ({ r: number, g: number, b: number, a number })` | - |
+| toRgbString | Convert to `rgb` format color string, like `rgba(0, 0, 0, 0)` | `() => string` | - |
+
+## Test Case
+
 ```
+npm test
+or
 npm run coverage
@@ -47,0 +75,0 @@ ```

No alert changes

Improved metrics

Dependency count

6

decreased by-14.29%

Number of lines in readme file

79

increased by54.9%

Worsened metrics

Total package byte prevSize

71237

decreased by-10.54%

Dev dependency count

23

increased by4.55%

Number of package files

59

decreased by-11.94%

Lines of code

1585

decreased by-17.62%

Dependency changes

• + Addedrc-util@^5.30.0

• + Added@babel/runtime@7.26.7(transitive)

• - Removed@rc-component/context@^1.3.0

• - Removed@rc-component/trigger@^1.10.2

• - Removed@babel/runtime@7.26.9(transitive)

• - Removed@rc-component/context@1.4.0(transitive)

• - Removed@rc-component/portal@1.1.2(transitive)

• - Removed@rc-component/trigger@1.18.3(transitive)

• - Removedrc-motion@2.9.5(transitive)

• - Removedrc-resize-observer@1.4.3(transitive)

• - Removedresize-observer-polyfill@1.5.1(transitive)