@easyv/react-components 0.0.1 → 0.0.3

package/dist/ColorPicker/Points.d.ts

@@ -0,0 +1,2 @@
+import './Points.less';
+export default function Points(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/ColorPicker/Points.js

@@ -0,0 +1,79 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { useRef, useCallback } from 'react';
+import classNames from 'classnames';
+import { useEventListener } from 'ahooks';
+import { getBackgroundAccordingColor, getMiddleColor } from "./utils";
+import "./Points.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Points(props) {
+  var _props$dots = props.dots,
+    dots = _props$dots === void 0 ? [] : _props$dots,
+    active = props.active,
+    setActive = props.setActive,
+    onChange = props.onChange;
+  var mouseDownRef = useRef(false);
+  var containerRect = useRef({});
+  var containerRef = useRef(null);
+  var handleMouseDown = function handleMouseDown(index, e) {
+    e.stopPropagation();
+    mouseDownRef.current = true;
+    containerRect.current = containerRef.current.getBoundingClientRect();
+    setActive(index);
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    e.stopPropagation();
+    if (mouseDownRef.current) {
+      var newOffset = (e.clientX - containerRect.current.x) / containerRect.current.width * 100;
+      newOffset = newOffset > 100 ? 100 : newOffset < 0 ? 0 : newOffset;
+      var newDots = dots.map(function (d, i) {
+        return i === active ? _objectSpread(_objectSpread({}, d), {}, {
+          offset: newOffset
+        }) : d;
+      });
+      onChange(newDots);
+    }
+  };
+  var handleMouseUp = useCallback(function (e) {
+    e.stopPropagation();
+    mouseDownRef.current = false;
+  }, []);
+  useEventListener('mousemove', handleMouseMove);
+  useEventListener('mouseup', handleMouseUp);
+  var handleAddColor = function handleAddColor(e) {
+    if (mouseDownRef.current) {
+      return;
+    }
+    var offset = Math.floor(e.nativeEvent.offsetX / e.target.offsetWidth * 100);
+    var newColor = getMiddleColor(dots, offset);
+    onChange(dots.concat({
+      color: newColor,
+      offset: offset
+    }));
+    setActive(dots.length);
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: 'arco-color-picker-points-bar',
+    style: getBackgroundAccordingColor(dots, 90),
+    onMouseDown: handleAddColor,
+    ref: containerRef,
+    children: dots.map(function (dot, i) {
+      return /*#__PURE__*/_jsx("span", {
+        className: classNames('arco-color-picker-points-dot', {
+          'arco-color-picker-points-dot-active': active === i
+        }),
+        style: {
+          backgroundColor: dot.color,
+          left: "".concat(dot.offset, "%")
+        },
+        onMouseDown: function onMouseDown(e) {
+          return handleMouseDown(i, e);
+        }
+      }, i);
+    })
+  });
+}

package/dist/ColorPicker/Points.less

@@ -0,0 +1,51 @@
+.arco-color-picker-points-bar {
+  position: relative;
+  width: 150px;
+  height: 6px;
+  margin-right: 16px;
+  border-radius: 4px;
+
+  &::before {
+    content: '';
+    position: relative;
+    z-index: -1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    background-image: linear-gradient(
+        45deg,
+        #404040 25%,
+        transparent 0,
+        transparent 75%,
+        #404040 0
+      ),
+      linear-gradient(
+        45deg,
+        #404040 25%,
+        transparent 0,
+        transparent 75%,
+        #404040 0
+      );
+    background-color: #4a4a4a;
+    background-size: 10px 10px;
+    background-position: 0 0, 5px 5px;
+  }
+
+  .arco-color-picker-points-dot {
+    position: absolute;
+    top: -2px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    border: 2px solid #ffffff;
+    cursor: pointer;
+
+    &.arco-color-picker-points-dot-active {
+      width: 12px;
+      height: 12px;
+      box-shadow: 0 0 0 3px rgba(36, 145, 247, 0.6);
+    }
+  }
+}

package/dist/ColorPicker/index.d.ts

@@ -0,0 +1,4 @@
+import 'rc-color-picker/assets/index.css';
+import { ColorPickerProps } from './interface';
+import './index.less';
+export default function ColorPicker({ value, onChange, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ColorPicker/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Panel as ColorPickerPanel } from 'rc-color-picker';
+import 'rc-color-picker/assets/index.css';
+import Color from 'rc-color-picker/lib/helpers/color';
+import { useDebounceFn } from 'ahooks';
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ColorPicker(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 'rgba(255,0,255,0.5)' : _ref$value,
+    onChange = _ref.onChange;
+  var colorObj = new Color(value);
+  console.log('colorObj', colorObj, colorObj.toRgbString());
+  var _useDebounceFn = useDebounceFn(function (_ref2) {
+      var color = _ref2.color,
+        alpha = _ref2.alpha;
+      var newColor;
+      var rgbColor;
+      if (alpha === 100) {
+        newColor = color;
+      } else {
+        rgbColor = new Color(color).RGB;
+        newColor = "RGBA(".concat(rgbColor[0], ",").concat(rgbColor[1], ",").concat(rgbColor[2], ",").concat(alpha / 100, ")");
+      }
+      onChange === null || onChange === void 0 ? void 0 : onChange(newColor);
+    }, {
+      wait: 100,
+      leading: true,
+      trailing: false
+    }),
+    run = _useDebounceFn.run;
+  return /*#__PURE__*/_jsx(ColorPickerPanel, {
+    className: "arco-color-picker",
+    mode: "RGB",
+    color: colorObj.toHexString(),
+    alpha: colorObj.alpha,
+    onChange: run
+  });
+}

package/dist/ColorPicker/index.less

@@ -0,0 +1,160 @@
+.arco-color-picker {
+  border: 1px solid var(--color-border-3);
+  background-color: var(--color-bg-white);
+  width: 238px;
+
+  .rc-color-picker-panel-board {
+    margin: 11px 11px 0;
+  }
+
+  .rc-color-picker-panel-board-hsv {
+    width: 216px;
+  }
+
+  .rc-color-picker-panel-ribbon,
+  .rc-color-picker-panel-alpha {
+    border-radius: 0;
+    box-shadow: none;
+
+    span {
+      width: 12px;
+      height: 12px;
+      border-radius: 6px;
+      border: 2px solid #fff;
+      background-color: transparent;
+      margin-left: -6px;
+      margin-top: -3px;
+    }
+  }
+
+  .rc-color-picker-panel-wrap {
+    margin-top: 16px;
+  }
+
+  // rgb滑块
+  .rc-color-picker-panel-wrap-ribbon {
+    top: 3px;
+    left: 11px;
+    right: 50px;
+    height: 6px;
+    padding: 0 6px;
+    border-radius: 3px;
+    background-image: linear-gradient(
+      to right,
+      #ff0000 0%,
+      #ff9900 10%,
+      #cdff00 20%,
+      #35ff00 30%,
+      #00ff66 40%,
+      #00fffd 50%,
+      #0066ff 60%,
+      #3200ff 70%,
+      #cd00ff 80%,
+      #ff0099 90%,
+      #ff0000 100%
+    );
+  }
+
+  .rc-color-picker-panel-ribbon {
+    background-image: none;
+  }
+
+  // alpha 滑块
+  .rc-color-picker-panel-wrap-alpha {
+    bottom: 3px;
+    left: 11px;
+    right: 50px;
+    height: 6px;
+    padding: 0 6px;
+    border-radius: 3px;
+    background-image: linear-gradient(
+        45deg,
+        #b9b8c1 25%,
+        transparent 0,
+        transparent 75%,
+        #b9b8c1 0
+      ),
+      linear-gradient(
+        45deg,
+        #b9b8c1 25%,
+        transparent 0,
+        transparent 75%,
+        #b9b8c1 0
+      );
+    background-color: #e1e1ea;
+    background-size: 6px 6px;
+    background-position: 0 0, 3px 3px;
+  }
+
+  .rc-color-picker-panel-alpha {
+    width: auto;
+    background-image: none;
+  }
+
+  .rc-color-picker-panel-alpha-bg {
+    width: 177px;
+    border-radius: 3px;
+    margin-left: -6px;
+  }
+
+  .rc-color-picker-panel-params-input {
+    padding: 2px 11px;
+
+    input {
+      outline: none;
+      height: 24px;
+      border-color: var(--color-border-3);
+      background-color: var(--color-bg-white);
+      color: #bfbfbf;
+
+      &[type='number'] {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .rc-color-picker-panel-wrap-preview {
+    right: 11px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    input {
+      display: none;
+    }
+  }
+
+  .rc-color-picker-panel-params-lable {
+    color: var(--easyv-text-color);
+  }
+
+  .rc-color-picker-panel-params-lable-number:hover {
+    border-radius: 0;
+    box-shadow: none;
+    background-color: transparent;
+    cursor: initial;
+  }
+
+  // 颜色板的圈
+  .rc-color-picker-panel-board span {
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    border-width: 2px;
+    margin: -6px 0 0 -6px;
+  }
+
+  .rc-color-picker-panel-params-hex {
+    width: 70px;
+  }
+
+  .rc-color-picker-panel-params-lable-hex {
+    width: 70px;
+  }
+
+  .rc-color-picker-panel-inner {
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+    overflow: hidden;
+  }
+}

package/dist/ColorPicker/interface.d.ts

@@ -0,0 +1,4 @@
+export interface ColorPickerProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}

package/dist/ColorPicker/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/ColorPicker/utils.d.ts

@@ -0,0 +1,13 @@
+export declare function toHex(x: any): string;
+export declare function transformColor(color: string, a: number): any;
+export declare function getBackgroundAccordingColor(color: any, fixedAngle: any): {
+    backgroundImage: string;
+    background?: undefined;
+} | {
+    background: any;
+    backgroundImage?: undefined;
+} | undefined;
+export declare function getMiddleColor(colors: {
+    color: string;
+    offset: number;
+}[], offset: number): string;

package/dist/ColorPicker/utils.js

@@ -0,0 +1,156 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+import Color from 'rc-color-picker/lib/helpers/color';
+export function toHex(x) {
+  return ('0' + parseInt(x).toString(16)).slice(-2);
+}
+export function transformColor(color, a) {
+  var _Color = new Color(color),
+    r = _Color.redValue,
+    g = _Color.greenValue,
+    b = _Color.blueValue,
+    toHexString = _Color.toHexString;
+  return a === 1 ? toHexString() : "RGBA(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
+}
+export function getBackgroundAccordingColor(color, fixedAngle) {
+  if (typeof color === 'string') {
+    return {
+      background: color
+    };
+  } else if (Array.isArray(color)) {
+    var rebaseStops = color.concat();
+    rebaseStops.sort(function (a, b) {
+      return a.offset - b.offset;
+    });
+    var colors = rebaseStops.map(function (item, index) {
+      var _Color2 = new Color(item.color),
+        r = _Color2.r,
+        g = _Color2.g,
+        b = _Color2.b,
+        a = _Color2.a;
+      if (a === 1 || index === rebaseStops.length - 1) {
+        return "".concat(item.color, " ").concat(item.offset, "%");
+      } else {
+        var _Color3 = new Color(rebaseStops[index + 1].color),
+          nextR = _Color3.r,
+          nextG = _Color3.g,
+          nextB = _Color3.b,
+          nextA = _Color3.a;
+        var stepOpacity = (nextA - a) / 5;
+        var stepOffset = (rebaseStops[index + 1].offset - item.offset) / 5;
+        var stepR = (nextR - r) / 5;
+        var stepG = (nextG - g) / 5;
+        var stepB = (nextB - b) / 5;
+        return Array.from({
+          length: 5
+        }).map(function (d, i) {
+          return "".concat(transformColor("rgb(".concat(Math.round(r + stepR * i), ",").concat(Math.round(g + stepG * i), ",").concat(Math.round(b + stepB * i), ")"), a + stepOpacity * i), " ").concat(item.offset + stepOffset * i, "%");
+        }).join(',');
+      }
+    });
+    return {
+      backgroundImage: "linear-gradient(".concat(fixedAngle || 0, "deg, ").concat(colors.join(','), ")")
+    };
+  } else if (_typeof(color) === 'object') {
+    var _color$type = color.type,
+      type = _color$type === void 0 ? 'pure' : _color$type,
+      _color$linear = color.linear,
+      _color$linear2 = _color$linear === void 0 ? {
+        stops: [{
+          offset: 0,
+          color: '#000'
+        }, {
+          offset: 100,
+          color: '#fff'
+        }],
+        angle: 0,
+        opacity: 1
+      } : _color$linear,
+      stops = _color$linear2.stops,
+      angle = _color$linear2.angle,
+      opacity = _color$linear2.opacity,
+      _color$pure = color.pure,
+      pureColor = _color$pure === void 0 ? '#000' : _color$pure;
+    if (type === 'linear') {
+      var _rebaseStops = stops.concat();
+      _rebaseStops.sort(function (a, b) {
+        return a.offset - b.offset;
+      });
+      var _colors = _rebaseStops.map(function (item, index) {
+        var _Color4 = new Color(item.color),
+          r = _Color4.redValue,
+          g = _Color4.greenValue,
+          b = _Color4.blueValue,
+          a = _Color4.alphaValue;
+        if (a === 1 || index === _rebaseStops.length - 1) {
+          return "".concat(transformColor(item.color, a * opacity), " ").concat(item.offset, "%");
+        } else {
+          var _Color5 = new Color(_rebaseStops[index + 1].color),
+            nextR = _Color5.redValue,
+            nextG = _Color5.greenValue,
+            nextB = _Color5.blueValue,
+            nextA = _Color5.alphaValue;
+          var stepOpacity = (nextA - a) / 5;
+          var stepOffset = (_rebaseStops[index + 1].offset - item.offset) / 5;
+          var stepR = (nextR - r) / 5;
+          var stepG = (nextG - g) / 5;
+          var stepB = (nextB - b) / 5;
+          return Array.from({
+            length: 5
+          }).map(function (d, i) {
+            return "".concat(transformColor("rgb(".concat(Math.round(r + stepR * i), ",").concat(Math.round(g + stepG * i), ",").concat(Math.round(b + stepB * i), ")"), (a + stepOpacity * i) * opacity), " ").concat(item.offset + stepOffset * i, "%");
+          }).join(',');
+        }
+      });
+      return {
+        backgroundImage: "linear-gradient(".concat(fixedAngle !== undefined ? fixedAngle : angle, "deg, ").concat(_colors.join(','), ")")
+      };
+    } else {
+      return {
+        background: pureColor
+      };
+    }
+  }
+}
+export function getMiddleColor(colors, offset) {
+  var leftColor;
+  var rightColor;
+  var leftColors = colors.filter(function (d) {
+    return d.offset < offset;
+  });
+  var rightColors = colors.filter(function (d) {
+    return d.offset > offset;
+  });
+  if (leftColors.length) {
+    leftColors.sort(function (a, b) {
+      return b.offset - a.offset;
+    });
+    leftColor = leftColors[0];
+  }
+  if (rightColors.length) {
+    rightColors.sort(function (a, b) {
+      return a.offset - b.offset;
+    });
+    rightColor = rightColors[0];
+  }
+  if (!leftColor) {
+    return rightColor.color;
+  }
+  if (!rightColor) {
+    return leftColor.color;
+  }
+  var _Color6 = new Color(leftColor.color),
+    leftR = _Color6.redValue,
+    leftG = _Color6.greenValue,
+    leftB = _Color6.blueValue,
+    leftA = _Color6.alphaValue;
+  var _Color7 = new Color(rightColor.color),
+    rightR = _Color7.redValue,
+    rightG = _Color7.greenValue,
+    rightB = _Color7.blueValue,
+    rightA = _Color7.alphaValue;
+  var newR = Math.round((rightR - leftR) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftR);
+  var newG = Math.round((rightG - leftG) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftG);
+  var newB = Math.round((rightB - leftB) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftB);
+  var newA = (rightA - leftA) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftA;
+  return newA === 1 ? "#".concat(toHex(newR)).concat(toHex(newG)).concat(toHex(newB)) : "RGBA(".concat(newR, ",").concat(newG, ",").concat(newB, ",").concat(newA, ")");
+}

package/dist/DatePicker/index.d.ts

@@ -1,4 +1,4 @@
-import { DatePickerProps, YearPickerProps, MonthPickerProps, QuarterPickerProps, WeekPickerProps, RangePickerProps } from './interface';
+import type { DatePickerProps, YearPickerProps, MonthPickerProps, QuarterPickerProps, WeekPickerProps, RangePickerProps } from './interface';
 import './index.less';
 declare function XDatePicker({ bordered, className, ...restProps }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace XDatePicker {

package/dist/Divider/index.d.ts

@@ -1,4 +1,4 @@
 import './index.less';
-import { DividerProps } from './interface';
+import type { DividerProps } from './interface';
 export default function XDivider({ plain, className, ...restProps }: DividerProps): import("react/jsx-runtime").JSX.Element;
 export type * from './interface';

package/dist/Input/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Input } from '@arco-design/web-react';
-import { InputProps, InputSearchProps, RefInputType } from './interface';
+import type { InputProps, InputSearchProps, RefInputType } from './interface';
 import './index.less';
 declare type XInputType = React.ForwardRefExoticComponent<InputProps & React.RefAttributes<RefInputType>> & {
     Search: typeof InputSearch;

package/dist/Input/index.js

@@ -12,7 +12,6 @@ import React, { forwardRef } from 'react';
 import { Input } from '@arco-design/web-react';
 import classNames from 'classnames';
 import { SearchCircleOutlined } from '@easyv/react-icons';
-import { InputProps, InputSearchProps, RefInputType } from "./interface";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 var XInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -49,5 +48,4 @@ export default XInput;
 XInput.Search = InputSearch;
 XInput.TextArea = Input.TextArea;
 XInput.Password = Input.Password;
-XInput.Group = Input.Group;
-export { InputProps, InputSearchProps, RefInputType };
+XInput.Group = Input.Group;

package/dist/Layout/index.d.ts

@@ -1,4 +1,4 @@
 import { Layout } from '@arco-design/web-react';
 import './index.less';
 export default Layout;
-export * from './interface';
+export type * from './interface';

package/dist/Layout/index.js

@@ -1,4 +1,3 @@
 import { Layout } from '@arco-design/web-react';
 import "./index.less";
-export default Layout;
-export * from "./interface";
+export default Layout;

package/dist/Radio/index.d.ts

@@ -1,4 +1,4 @@
-import { RadioProps, RadioGroupProps } from './interface';
+import type { RadioProps, RadioGroupProps } from './interface';
 import './index.less';
 declare function XRadio(props: RadioProps): import("react/jsx-runtime").JSX.Element;
 declare namespace XRadio {

package/dist/Select/index.less

@@ -1,10 +1,4 @@
 div.arco-select {
-  &:not(.arco-select-disabled) {
-    .arco-select-view {
-      background-color: transparent;
-    }
-  }
-
   .arco-select-view {
     border-color: var(--color-border-2);
 

package/dist/index.d.ts

@@ -1,133 +1,133 @@
 import './index.css';
 export { default as Affix } from './Affix';
-export type { AffixProps } from './Affix';
+export type { AffixProps } from './Affix/interface';
 export { default as Alert } from './Alert';
-export type { AlertProps } from './Alert';
+export type { AlertProps } from './Alert/interface';
 export { default as Anchor } from './Anchor';
-export type { AnchorProps } from './Anchor';
+export type { AnchorProps } from './Anchor/interface';
 export { default as AutoComplete } from './AutoComplete';
-export type { AutoCompleteProps } from './AutoComplete';
+export type { AutoCompleteProps } from './AutoComplete/interface';
 export { default as Avatar } from './Avatar';
-export type { AvatarProps } from './Avatar';
+export type { AvatarProps } from './Avatar/interface';
 export { default as BackTop } from './BackTop';
-export type { BackTopProps } from './BackTop';
+export type { BackTopProps } from './BackTop/interface';
 export { default as Badge } from './Badge';
-export type { BadgeProps } from './Badge';
+export type { BadgeProps } from './Badge/interface';
 export { default as Breadcrumb } from './Breadcrumb';
-export type { BreadcrumbProps } from './Breadcrumb';
+export type { BreadcrumbProps } from './Breadcrumb/interface';
 export { default as Button } from './Button';
-export type { ButtonProps, ButtonGroupProps } from './Button';
+export type { ButtonProps, ButtonGroupProps } from './Button/interface';
 export { default as Calendar } from './Calendar';
-export type { CalendarProps } from './Calendar';
+export type { CalendarProps } from './Calendar/interface';
 export { default as Card } from './Card';
-export type { CardProps } from './Card';
+export type { CardProps } from './Card/interface';
 export { default as Carousel } from './Carousel';
-export type { CarouselProps } from './Carousel';
+export type { CarouselProps } from './Carousel/interface';
 export { default as Cascader } from './Cascader';
-export type { CascaderProps } from './Cascader';
+export type { CascaderProps } from './Cascader/interface';
 export { default as Checkbox } from './Checkbox';
-export type { CheckboxProps } from './Checkbox';
+export type { CheckboxProps } from './Checkbox/interface';
 export { default as Collapse } from './Collapse';
-export type { CollapseProps } from './Collapse';
+export type { CollapseProps } from './Collapse/interface';
 export { default as Comment } from './Comment';
-export type { CommentProps } from './Comment';
+export type { CommentProps } from './Comment/interface';
 export { default as ConfigProvider } from './ConfigProvider';
-export type { ConfigProviderProps } from './ConfigProvider';
+export type { ConfigProviderProps } from './ConfigProvider/interface';
 export { default as DatePicker } from './DatePicker';
-export type { DatePickerProps, YearPickerProps, MonthPickerProps, QuarterPickerProps, WeekPickerProps, RangePickerProps, } from './DatePicker';
+export type { DatePickerProps, YearPickerProps, MonthPickerProps, QuarterPickerProps, WeekPickerProps, RangePickerProps, } from './DatePicker/interface';
 export { default as Descriptions } from './Descriptions';
-export type { DescriptionsProps } from './Descriptions';
+export type { DescriptionsProps } from './Descriptions/interface';
 export { default as Divider } from './Divider';
-export type { DividerProps } from './Divider';
+export type { DividerProps } from './Divider/interface';
 export { default as Drawer } from './Drawer';
-export type { DrawerProps } from './Drawer';
+export type { DrawerProps } from './Drawer/interface';
 export { default as Dropdown } from './Dropdown';
-export type { DropdownProps } from './Dropdown';
+export type { DropdownProps } from './Dropdown/interface';
 export { default as Empty } from './Empty';
-export type { EmptyProps } from './Empty';
+export type { EmptyProps } from './Empty/interface';
 export { default as Form } from './Form';
-export type { FormInstance, FormItemProps, FormProps } from './Form';
+export type { FormInstance, FormItemProps, FormProps } from './Form/interface';
 export { default as Grid } from './Grid';
-export type { GridProps } from './Grid';
+export type { GridProps } from './Grid/interface';
 export { default as Image } from './Image';
-export type { ImageProps } from './Image';
+export type { ImageProps } from './Image/interface';
 export { default as Input } from './Input';
-export type { InputProps, InputSearchProps, RefInputType } from './Input';
+export type { InputProps, InputSearchProps, RefInputType, } from './Input/interface';
 export { default as InputNumber } from './InputNumber';
-export type { InputNumberProps } from './InputNumber';
+export type { InputNumberProps } from './InputNumber/interface';
 export { default as InputTag } from './InputTag';
-export type { InputTagProps } from './InputTag';
+export type { InputTagProps } from './InputTag/interface';
 export { default as Layout } from './Layout';
-export type { LayoutProps } from './Layout';
+export type { LayoutProps } from './Layout/interface';
 export { default as Link } from './Link';
-export type { LinkProps } from './Link';
+export type { LinkProps } from './Link/interface';
 export { default as List } from './List';
-export type { ListProps } from './List';
+export type { ListProps } from './List/interface';
 export { default as Mentions } from './Mentions';
-export type { MentionsProps } from './Mentions';
+export type { MentionsProps } from './Mentions/interface';
 export { default as Menu } from './Menu';
-export type { MenuProps } from './Menu';
+export type { MenuProps } from './Menu/interface';
 export { default as Notification } from './Notification';
-export type { NotificationProps } from './Notification';
+export type { NotificationProps } from './Notification/interface';
 export { default as PageHeader } from './PageHeader';
-export type { PageHeaderProps } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader/interface';
 export { default as Pagination } from './Pagination';
-export type { PaginationProps } from './Pagination';
+export type { PaginationProps } from './Pagination/interface';
 export { default as Popconfirm } from './Popconfirm';
-export type { PopconfirmProps } from './Popconfirm';
+export type { PopconfirmProps } from './Popconfirm/interface';
 export { default as Popover } from './Popover';
-export type { PopoverProps } from './Popover';
+export type { PopoverProps } from './Popover/interface';
 export { default as Progress } from './Progress';
-export type { ProgressProps } from './Progress';
+export type { ProgressProps } from './Progress/interface';
 export { default as Rate } from './Rate';
-export type { RateProps } from './Rate';
+export type { RateProps } from './Rate/interface';
 export { default as ResizeBox } from './ResizeBox';
-export type { ResizeBoxProps } from './ResizeBox';
+export type { ResizeBoxProps } from './ResizeBox/interface';
 export { default as Result } from './Result';
-export type { ResultProps } from './Result';
+export type { ResultProps } from './Result/interface';
 export { default as Skeleton } from './Skeleton';
-export type { SkeletonProps } from './Skeleton';
+export type { SkeletonProps } from './Skeleton/interface';
 export { default as Slider } from './Slider';
-export type { SliderProps } from './Slider';
+export type { SliderProps } from './Slider/interface';
 export { default as Spin } from './Spin';
-export type { SpinProps } from './Spin';
+export type { SpinProps } from './Spin/interface';
 export { default as Statistic } from './Statistic';
-export type { StatisticProps } from './Statistic';
+export type { StatisticProps } from './Statistic/interface';
 export { default as Steps } from './Steps';
-export type { StepsProps } from './Steps';
+export type { StepsProps } from './Steps/interface';
 export { default as Switch } from './Switch';
-export type { SwitchProps } from './Switch';
+export type { SwitchProps } from './Switch/interface';
 export { default as Table } from './Table';
-export type { TableProps, TableColumnProps } from './Table';
+export type { TableProps, TableColumnProps } from './Table/interface';
 export { default as Tabs } from './Tabs';
-export type { TabsProps } from './Tabs';
+export type { TabsProps } from './Tabs/interface';
 export { default as Timeline } from './Timeline';
-export type { TimelineProps } from './Timeline';
+export type { TimelineProps } from './Timeline/interface';
 export { default as TimePicker } from './TimePicker';
-export type { TimePickerProps } from './TimePicker';
+export type { TimePickerProps } from './TimePicker/interface';
 export { default as Tooltip } from './Tooltip';
-export type { TooltipProps } from './Tooltip';
+export type { TooltipProps } from './Tooltip/interface';
 export { default as Transfer } from './Transfer';
-export type { TransferProps } from './Transfer';
+export type { TransferProps } from './Transfer/interface';
 export { default as Tree } from './Tree';
-export type { TreeProps } from './Tree';
+export type { TreeProps } from './Tree/interface';
 export { default as TreeSelect } from './TreeSelect';
-export type { TreeSelectProps } from './TreeSelect';
+export type { TreeSelectProps } from './TreeSelect/interface';
 export { default as Trigger } from './Trigger';
-export type { TriggerProps } from './Trigger';
+export type { TriggerProps } from './Trigger/interface';
 export { default as Typography } from './Typography';
-export type { TypographyProps } from './Typography';
+export type { TypographyProps } from './Typography/interface';
 export { default as Upload } from './Upload';
-export type { UploadProps, UploadInstance } from './Upload';
+export type { UploadProps, UploadInstance } from './Upload/interface';
 export { default as Message, default as message } from './Message';
-export type { MessageProps } from './Message';
+export type { MessageProps } from './Message/interface';
 export { default as Modal } from './Modal';
-export type { ModalProps } from './Modal';
+export type { ModalProps } from './Modal/interface';
 export { default as Radio } from './Radio';
-export type { RadioProps } from './Radio';
+export type { RadioProps } from './Radio/interface';
 export { default as Select } from './Select';
-export type { SelectProps, SelectOptionProps, SelectOptionGroupProps, SelectHandle, } from './Select';
+export type { SelectProps, SelectOptionProps, SelectOptionGroupProps, SelectHandle, } from './Select/interface';
 export { default as Space } from './Space';
-export type { SpaceProps } from './Space';
+export type { SpaceProps } from './Space/interface';
 export { default as Tag } from './Tag';
-export type { TagProps } from './Tag';
+export type { TagProps } from './Tag/interface';

package/dist/index.js

@@ -64,4 +64,6 @@ export { default as Modal } from "./Modal";
 export { default as Radio } from "./Radio";
 export { default as Select } from "./Select";
 export { default as Space } from "./Space";
-export { default as Tag } from "./Tag";
+export { default as Tag } from "./Tag";
+
+// export { default as ColorPicker } from './ColorPicker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-components",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "a react component library base on arco design",
   "license": "MIT",
   "module": "dist/index.js",
@@ -48,7 +48,9 @@
   },
   "dependencies": {
     "@easyv/react-icons": "4.0.0",
-    "classnames": "^2.3.2"
+    "ahooks": "^3.7.8",
+    "classnames": "^2.3.2",
+    "rc-color-picker": "^1.2.6"
   },
   "devDependencies": {
     "@arco-design/web-react": "2.52.0",