agora-ui-foundation 1.0.0

package/lib/components/input-number/index.js

@@ -0,0 +1,196 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrInputNumber = void 0;
+require("core-js/modules/es.parse-int.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.string.trim.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
+require("./index.css");
+var _useClickAnywhere = require("../../hooks/use-click-anywhere");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var FcrInputNumber = exports.FcrInputNumber = function FcrInputNumber(_ref) {
+  var _lastValidNum$current3, _lastValidNum$current4;
+  var placeholder = _ref.placeholder,
+    value = _ref.value,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    min = _ref.min,
+    max = _ref.max,
+    disabled = _ref.disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    innerVal = _useState4[0],
+    setInnerVal = _useState4[1];
+  var lastValidNum = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if ((0, _isNumber["default"])(value)) {
+      setInnerVal("".concat(value));
+      lastValidNum.current = value;
+    }
+  }, [value]);
+  var getValidNumber = function getValidNumber(n) {
+    if ((0, _isNumber["default"])(max)) {
+      n = Math.min(max, n);
+    }
+    if ((0, _isNumber["default"])(min)) {
+      n = Math.max(min, n);
+    }
+    return n;
+  };
+  var handleFocus = function handleFocus() {
+    setFocused(true);
+  };
+  var handleBlur = function handleBlur() {
+    setFocused(false);
+    if (!(0, _isNumber["default"])(lastValidNum.current)) {
+      setInnerVal('');
+      return;
+    }
+    if (/^-?\d+$/.test(innerVal)) {
+      var n = parseInt(innerVal, 10);
+      var vn = getValidNumber(n);
+      if (vn !== n) {
+        setInnerVal("".concat(vn));
+        lastValidNum.current = vn;
+        onChange(vn);
+      }
+    } else {
+      setInnerVal("".concat(lastValidNum.current));
+    }
+  };
+  var handleChange = function handleChange(e) {
+    var s = e.target.value.trim();
+    setInnerVal(e.target.value);
+    if (!s && lastValidNum.current !== null) {
+      lastValidNum.current = null;
+      onChange(null);
+    }
+    if (/^-?\d+$/.test(s)) {
+      var n = parseInt(e.target.value, 10);
+      var vn = getValidNumber(n);
+      if (n === vn) {
+        lastValidNum.current = vn;
+        onChange(vn);
+      }
+    }
+  };
+  var handleClick = function handleClick() {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  var cls = (0, _classnames["default"])('fcr-input-number', {
+    'fcr-input-number--focused': focused,
+    'fcr-input-number-l': size === 'large',
+    'fcr-input-number-m': size === 'medium',
+    'fcr-input-number-s': size === 'small',
+    'fcr-input-number--disabled': disabled
+  });
+  var handleAdd = function handleAdd(e) {
+    var _lastValidNum$current;
+    if (disabled) {
+      return;
+    }
+    e.stopPropagation();
+    setFocused(true);
+    var n = ((_lastValidNum$current = lastValidNum.current) !== null && _lastValidNum$current !== void 0 ? _lastValidNum$current : 0) + step;
+    if ((0, _isNumber["default"])(max)) {
+      n = Math.min(max, n);
+    }
+    setInnerVal("".concat(n));
+    lastValidNum.current = n;
+    onChange(n);
+  };
+  var handleSubtract = function handleSubtract(e) {
+    var _lastValidNum$current2;
+    if (disabled) {
+      return;
+    }
+    e.stopPropagation();
+    setFocused(true);
+    var n = ((_lastValidNum$current2 = lastValidNum.current) !== null && _lastValidNum$current2 !== void 0 ? _lastValidNum$current2 : 0) - step;
+    if ((0, _isNumber["default"])(min)) {
+      n = Math.max(min, n);
+    }
+    setInnerVal("".concat(n));
+    lastValidNum.current = n;
+    onChange(n);
+  };
+  var ref = (0, _useClickAnywhere.useClickAnywhere)(function () {
+    setFocused(false);
+  });
+  var addCls = (0, _classnames["default"])('fcr-input-number__button', {
+    'fcr-input-number__button--disabled': disabled || (0, _isNumber["default"])(max) && ((_lastValidNum$current3 = lastValidNum.current) !== null && _lastValidNum$current3 !== void 0 ? _lastValidNum$current3 : 0) >= max
+  });
+  var subCls = (0, _classnames["default"])('fcr-input-number__button', {
+    'fcr-input-number__button--disabled': disabled || (0, _isNumber["default"])(min) && ((_lastValidNum$current4 = lastValidNum.current) !== null && _lastValidNum$current4 !== void 0 ? _lastValidNum$current4 : 0) <= min
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    onClick: handleClick,
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      ref: inputRef,
+      placeholder: placeholder,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      value: innerVal,
+      disabled: disabled,
+      onChange: handleChange
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-input-number__button-group",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: addCls,
+        onClick: handleAdd,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_ORDER_UP,
+          size: 10,
+          colors: {
+            iconPrimary: 'currentColor'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-input-number__divider"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: subCls,
+        onClick: handleSubtract,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_ORDER_DOWN,
+          size: 10,
+          colors: {
+            iconPrimary: 'currentColor'
+          }
+        })
+      })]
+    })]
+  });
+};

package/lib/components/input-number/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FcrInputNumber } from '.';
+declare const meta: Meta<typeof FcrInputNumber>;
+type InputNumberStory = StoryObj<typeof FcrInputNumber>;
+export declare const Basic: InputNumberStory;
+export default meta;

package/lib/components/input-number/index.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Basic = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ = require(".");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var meta = {
+  title: 'Components/InputNumber',
+  tags: ['autodocs'],
+  args: {
+    placeholder: 'please set number',
+    min: -5,
+    max: 130,
+    value: 120
+  }
+};
+var Basic = exports.Basic = {
+  render: function render(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 200,
+          marginBottom: 50
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrInputNumber, _objectSpread(_objectSpread({}, props), {}, {
+          size: "large"
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 200,
+          marginBottom: 50
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrInputNumber, _objectSpread(_objectSpread({}, props), {}, {
+          size: "medium"
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 46,
+          marginBottom: 50
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrInputNumber, _objectSpread(_objectSpread({}, props), {}, {
+          size: "small"
+        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: 46,
+          marginBottom: 50
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrInputNumber, _objectSpread(_objectSpread({}, props), {}, {
+          size: "small",
+          disabled: true
+        }))
+      })]
+    });
+  }
+};
+var _default = exports["default"] = meta;

package/lib/components/latest-button/index.css

@@ -0,0 +1,17 @@
+.fcr-latest-btn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  position: absolute;
+  right: 0px;
+}
+
+.fcr-latest-btn--top {
+  top: 10px;
+}
+
+.fcr-latest-btn--bottom {
+  bottom: 10px;
+  align-self: flex-end;
+}

package/lib/components/latest-button/index.d.ts

@@ -0,0 +1,14 @@
+import React, { CSSProperties } from 'react';
+import './index.css';
+export interface LatestButtonProps {
+    txt: string;
+    styles?: CSSProperties;
+    iconTransform?: boolean;
+    direction?: 'top' | 'bottom';
+    onClick?: () => void;
+}
+export declare const LatestButton: React.ForwardRefExoticComponent<LatestButtonProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<{
+    dom: HTMLDivElement | null;
+}>>;

package/lib/components/latest-button/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LatestButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _textBubble = require("../text-bubble");
+var _iconText = require("../icon-text");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var LatestButton = exports.LatestButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var styles = _ref.styles,
+    txt = _ref.txt,
+    iconTransform = _ref.iconTransform,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'bottom' : _ref$direction,
+    onClick = _ref.onClick;
+  var divRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: divRef.current
+    };
+  });
+  var cls = (0, _classnames["default"])('fcr-latest-btn', {
+    'fcr-latest-btn--top': direction === 'top',
+    'fcr-latest-btn--bottom': direction === 'bottom'
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: divRef,
+    className: cls,
+    style: _objectSpread({}, styles),
+    onClick: onClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
+      styles: {
+        borderRight: 0,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        padding: '8px 10px 8px 15px',
+        cursor: 'pointer'
+      },
+      txt: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconText.IconText, {
+        fontSize: "small",
+        icon: _type.FcrIconType.FCR_V2_CHEVRON_DOWN2,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+        },
+        txt: txt,
+        iconTransform: iconTransform
+      }),
+      type: "purple",
+      lineHeight: "large"
+    })
+  });
+});

package/lib/components/latest-button/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { LatestButton, LatestButtonProps } from '.';
+declare const meta: Meta<typeof LatestButton>;
+export declare const Doc: (props: LatestButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;

package/lib/components/latest-button/index.stories.js

@@ -0,0 +1,107 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Doc = void 0;
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _ = require(".");
+var _jsxRuntime = require("react/jsx-runtime");
+var meta = {
+  title: 'Components/LatestButton',
+  tags: ['autodocs'],
+  component: _.LatestButton,
+  args: {
+    styles: {
+      display: 'flex'
+    }
+  },
+  argTypes: {}
+};
+var Doc = exports.Doc = function Doc(props) {
+  var styles = props.styles;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    basicVisible = _useState2[0],
+    setBasicVisible = _useState2[1];
+  var handleChange = function handleChange(val) {
+    if (!val) {
+      setBasicVisible(false);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (!basicVisible) {
+      var timerId = setTimeout(function () {
+        setBasicVisible(true);
+        clearTimeout(timerId);
+      }, 2 * 1000);
+    }
+  }, [basicVisible]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      padding: 50,
+      border: 'solid 0.5px #e5e7eb'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: "Basic: \u9876\u90E8"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50,
+        minHeight: 100,
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        border: '1px solid gray'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LatestButton, {
+        txt: "32 New Message(s)",
+        iconTransform: true,
+        direction: "top"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        height: 30
+      },
+      children: "Basic: \u5E95\u90E8"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 200,
+        minHeight: 100,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column',
+        border: '1px solid gray',
+        position: 'relative'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LatestButton, {
+        txt: "32 New Message(s)"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        height: 30
+      },
+      children: "Basic: \u5E95\u90E8"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 200,
+        minHeight: 100,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column',
+        border: '1px solid gray',
+        position: 'relative'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LatestButton, {
+        txt: "\u56DE\u5230\u6700\u65B0\u4F4D\u7F6E"
+      })
+    })]
+  });
+};
+var _default = exports["default"] = meta;

package/lib/components/line-copy-button/index.css

@@ -0,0 +1,106 @@
+.fcr-line-copy-wrapper {
+  position: absolute;
+
+  display: flex;
+  flex-direction: column;
+
+  z-index: 999;
+}
+
+.fcr-copy__direction-left {
+  align-items: flex-start;
+}
+
+.fcr-copy__direction-right {
+  align-items: flex-end;
+}
+
+.fcr-line-copy {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  border-radius: var(--fcr_cornerradius_s);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  box-shadow: 0px 0px 15px 0px #97979740;
+  color: var(--fcr_ui_scene_line1);
+  cursor: pointer;
+
+  height: 26px;
+  width: 26px;
+}
+
+.fcr-line-copy-margin {
+  margin-bottom: calc(4px);
+}
+
+.fcr-line-copy-wrapper:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-copy-btn {
+  display: flex;
+  border-radius: 8px;
+  flex-direction: column;
+  box-shadow: 0px 0px 15px 0px #97979740;
+}
+
+.fcr-copy-btn button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 65px;
+  height: 35px;
+  border-radius: 8px;
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+}
+
+.fcr-copy-btn > button:not(:first-child) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  padding-bottom: 4px;
+  border-top: 0;
+}
+
+.fcr-copy-btn > button:not(:first-child) > .fcr-btn-text:hover {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.fcr-copy-btn > button:not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 0;
+  padding-top: 4px;
+}
+
+.fcr-copy-btn > button:not(:last-child) > .fcr-btn-text:hover {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.fcr-copy-btn button:focus {
+  outline: none;
+}
+
+.fcr-btn-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 55px;
+  height: 30px;
+  border-radius: 4px;
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 13px;
+}
+
+.fcr-copy-btn .fcr-btn-text:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-single-btn button {
+  height: 40px;
+}

package/lib/components/line-copy-button/index.d.ts

@@ -0,0 +1,24 @@
+import React, { CSSProperties } from 'react';
+import './index.css';
+export interface LineCopyButtonProps {
+    styles?: CSSProperties;
+    direction?: 'left' | 'right';
+    btnText?: string;
+    onCopy?: (type: 'singling' | 'multiple') => void;
+    margins?: {
+        parentMarginR?: number;
+        grandParentMarginR?: number;
+        parentMarginL?: number;
+        grandParentMarginL?: number;
+    };
+    onPrivate?: () => void;
+    showPrivate?: boolean;
+}
+export declare const LineCopyButton: React.ForwardRefExoticComponent<LineCopyButtonProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<{
+    dom: HTMLDivElement | null;
+}>>;
+export declare const PrivateButton: React.FC<{
+    onPrivate?: () => void;
+}>;