agora-ui-foundation 1.0.0

package/lib/components/tooltip/index.js

@@ -0,0 +1,110 @@
+"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.FcrToolTip = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _rcTooltip = _interopRequireDefault(require("rc-tooltip"));
+require("./index.css");
+require("./arrow.css");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["content", "children", "trigger", "placement", "arrowContent", "overlayInnerStyle", "overlayClassName", "showArrow", "onVisibleChange", "motion", "getTooltipContainer", "mouseEnterDelay", "mouseLeaveDelay", "overlayOffset", "afterVisibleChange"];
+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 calcOverlayOffset = function calcOverlayOffset(placement, offset) {
+  if (placement.includes('top')) {
+    return [0, -offset];
+  }
+  if (placement.includes('bottom')) {
+    return [0, offset];
+  }
+  if (placement.includes('left')) {
+    return [-offset, 0];
+  }
+  if (placement.includes('right')) {
+    return [offset, 0];
+  }
+};
+var FcrToolTip = exports.FcrToolTip = function FcrToolTip(props) {
+  var content = props.content,
+    children = props.children,
+    trigger = props.trigger,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'top' : _props$placement,
+    arrowContent = props.arrowContent,
+    overlayInnerStyle = props.overlayInnerStyle,
+    overlayClassName = props.overlayClassName,
+    _props$showArrow = props.showArrow,
+    showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
+    onVisibleChange = props.onVisibleChange,
+    motion = props.motion,
+    getTooltipContainer = props.getTooltipContainer,
+    mouseEnterDelay = props.mouseEnterDelay,
+    mouseLeaveDelay = props.mouseLeaveDelay,
+    _props$overlayOffset = props.overlayOffset,
+    overlayOffset = _props$overlayOffset === void 0 ? 12 : _props$overlayOffset,
+    afterVisibleChange = props.afterVisibleChange,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var defaultOverlayInnerStyle = {
+    padding: '7px 10px',
+    background: "var(--fcr_ui_scene_inverse2)",
+    border: "1px solid var(--fcr_ui_scene_inverse2)",
+    fontStyle: 'normal',
+    fontWeight: 'var(--fcr_font_weight_s)',
+    fontSize: '14px',
+    lineHeight: '130%',
+    color: "var(--fcr_ui_scene_inverse)",
+    borderRadius: "var(--fcr_cornerradius_l)",
+    boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
+    textAlign: 'center'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcTooltip["default"], _objectSpread(_objectSpread({
+    destroyTooltipOnHide: true,
+    afterVisibleChange: afterVisibleChange,
+    mouseLeaveDelay: mouseLeaveDelay,
+    mouseEnterDelay: mouseEnterDelay !== null && mouseEnterDelay !== void 0 ? mouseEnterDelay : 1,
+    getTooltipContainer: getTooltipContainer,
+    onVisibleChange: onVisibleChange,
+    prefixCls: "fcr-tooltip",
+    overlayClassName: overlayClassName,
+    arrowContent: showArrow === false ? null : arrowContent || /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_inverse2)'
+      },
+      type: _type.FcrIconType.FCR_TOOLTIP_ARROW,
+      size: 16
+    }),
+    align: {
+      offset: calcOverlayOffset(placement, overlayOffset)
+    },
+    trigger: trigger,
+    placement: placement,
+    overlay: content,
+    overlayInnerStyle: _objectSpread(_objectSpread({}, defaultOverlayInnerStyle), overlayInnerStyle),
+    motion: motion || {
+      motionAppear: true,
+      motionName: 'fcr-tooltip-anim'
+    }
+  }, others), {}, {
+    children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})
+  }));
+};

package/lib/components/tooltip/index.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { ToolTipProps } from '.';
+import { GuideToolTipProps } from './guide';
+import { DialogToolTipProps } from './dialog';
+declare const meta: Meta;
+type TooltipStory = StoryObj<ToolTipProps>;
+export declare const Basic: TooltipStory;
+type GuideTooltipStory = StoryObj<GuideToolTipProps>;
+export declare const Guide: GuideTooltipStory;
+type InfoTooltipStory = StoryObj<ToolTipProps>;
+export declare const Info: InfoTooltipStory;
+type DialogTooltipStory = StoryObj<DialogToolTipProps>;
+export declare const Dialog: DialogTooltipStory;
+export default meta;

package/lib/components/tooltip/index.stories.js

@@ -0,0 +1,99 @@
+"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.Info = exports.Guide = exports.Dialog = exports.Basic = void 0;
+require("core-js/modules/es.array.map.js");
+var _ = require(".");
+var _guide = require("./guide");
+var _info = require("./info");
+var _dialog = require("./dialog");
+var _react = _interopRequireDefault(require("react"));
+var _button = require("../button");
+var _jsxRuntime = require("react/jsx-runtime");
+var placementMap = ['left', 'top', 'bottom', 'right', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
+var meta = {
+  title: 'Components/ToolTip',
+  argTypes: {
+    trigger: {
+      control: 'radio',
+      options: ['hover', 'click'],
+      defaultValue: 'hover'
+    }
+  }
+};
+var Basic = exports.Basic = {
+  render: function render(_ref) {
+    var trigger = _ref.trigger;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+          gap: 30,
+          padding: 50
+        },
+        children: placementMap.map(function (placement) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrToolTip, {
+            trigger: trigger,
+            placement: placement,
+            content: placement,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+              children: placement
+            })
+          }, placement);
+        })
+      })
+    });
+  }
+};
+var Guide = exports.Guide = {
+  render: function render(_ref2) {
+    var trigger = _ref2.trigger;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_guide.FcrGuideToolTip, {
+      onClose: function onClose() {
+        console.log('onClose');
+      },
+      trigger: trigger,
+      placement: 'top',
+      content: '解除禁言',
+      closable: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        children: "guide"
+      })
+    });
+  }
+};
+var Info = exports.Info = {
+  render: function render(_ref3) {
+    var trigger = _ref3.trigger;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_info.FcrInfoToolTip, {
+      trigger: trigger,
+      placement: 'top',
+      content: '🙋 有1人举手，请点击查看',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        children: "info"
+      })
+    });
+  }
+};
+var Dialog = exports.Dialog = {
+  render: function render(_ref4) {
+    var trigger = _ref4.trigger;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.FcrDialogToolTip, {
+      trigger: trigger,
+      placement: 'top',
+      content: '🙋 有1人举手，请点击查看',
+      onClose: function onClose() {
+        console.log('onClose');
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        children: "dialog"
+      })
+    });
+  }
+};
+var _default = exports["default"] = meta;

package/lib/components/tooltip/info.d.ts

@@ -0,0 +1,6 @@
+import 'rc-tooltip/assets/bootstrap_white.css';
+import { FC } from 'react';
+import './index.css';
+import './arrow.css';
+import { ToolTipProps } from '.';
+export declare const FcrInfoToolTip: FC<ToolTipProps>;

package/lib/components/tooltip/info.js

@@ -0,0 +1,59 @@
+"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.FcrInfoToolTip = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("rc-tooltip/assets/bootstrap_white.css");
+require("./index.css");
+require("./arrow.css");
+var _ = require(".");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["content"];
+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 FcrInfoToolTip = exports.FcrInfoToolTip = function FcrInfoToolTip(props) {
+  var content = props.content,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var defaultInfoOverlayInnerStyle = {
+    padding: '0 12px',
+    background: "var(--fcr_mobile_ui_scene_color_popup_fill1)",
+    border: "2px solid var(--fcr_ui_scene_line2)",
+    fontSize: '13px',
+    lineHeight: '50px',
+    color: "var(--fcr_ui_scene_icontext1)",
+    borderRadius: "var(--fcr_cornerradius_xs)",
+    minWidth: '180px',
+    textAlign: 'center',
+    boxShadow: 'none'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrToolTip, _objectSpread({
+    overlayClassName: "fcr-tooltip-border-width-2",
+    arrowContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_TOOLTIP_ARROW_2,
+      colors: {
+        iconPrimary: 'var(--fcr_mobile_ui_scene_color_popup_fill1)',
+        iconSecondary: 'var(--fcr_ui_scene_line2)'
+      },
+      size: 20
+    }),
+    content: content,
+    overlayInnerStyle: _objectSpread(_objectSpread({}, defaultInfoOverlayInnerStyle), props.overlayInnerStyle)
+  }, others));
+};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { PathOptions } from '../icon/svg-dict';
+import { FcrIconType } from '../icon/type';
+import './tooltip-button.css';
+interface FrcTooltipButtonToolTipProps {
+    icon?: {
+        type: FcrIconType;
+        colors: Partial<PathOptions>;
+        size: number;
+    };
+    trigger?: 'hover' | 'click';
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    content?: React.ReactNode;
+}
+interface FrcTooltipButtonPopoverProps extends FrcTooltipButtonToolTipProps {
+    onPopoverOptionClick?: () => void;
+    onVisibleChange?: (visible: boolean) => void;
+    visible?: boolean;
+}
+export interface FrcTooltipButtonProps {
+    classNames?: {
+        container?: string;
+        button?: string;
+        tooltip?: string;
+        popover?: string;
+    };
+    tooltip: FrcTooltipButtonToolTipProps;
+    withPopover?: boolean;
+    popover?: FrcTooltipButtonPopoverProps;
+    children?: React.ReactNode;
+    onTooltipButtonClick?: () => void;
+}
+export declare const FrcTooltipButton: (props: FrcTooltipButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,111 @@
+"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.FrcTooltipButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _popover = require("../popover");
+var _tooltip = require("../tooltip");
+require("./tooltip-button.css");
+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 FrcTooltipButton = exports.FrcTooltipButton = function FrcTooltipButton(props) {
+  var withPopover = props.withPopover,
+    classNames = props.classNames,
+    _props$tooltip = props.tooltip,
+    tooltipIcon = _props$tooltip.icon,
+    _props$tooltip$trigge = _props$tooltip.trigger,
+    tooltipTrigger = _props$tooltip$trigge === void 0 ? 'hover' : _props$tooltip$trigge,
+    _props$tooltip$placem = _props$tooltip.placement,
+    tooltipPlacement = _props$tooltip$placem === void 0 ? 'top' : _props$tooltip$placem,
+    tooltipContent = _props$tooltip.content,
+    _props$popover = props.popover,
+    _props$popover2 = _props$popover === void 0 ? {} : _props$popover,
+    popoverIcon = _props$popover2.icon,
+    _props$popover2$trigg = _props$popover2.trigger,
+    popoverTrigger = _props$popover2$trigg === void 0 ? 'click' : _props$popover2$trigg,
+    _props$popover2$place = _props$popover2.placement,
+    popoverPlacement = _props$popover2$place === void 0 ? 'top' : _props$popover2$place,
+    popoverContent = _props$popover2.content,
+    onVisibleChange = _props$popover2.onVisibleChange,
+    _props$onTooltipButto = props.onTooltipButtonClick,
+    onTooltipButtonClick = _props$onTooltipButto === void 0 ? function () {} : _props$onTooltipButto,
+    children = props.children;
+  var _React$useState = _react["default"].useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    popoverVisible = _React$useState2[0],
+    setVisible = _React$useState2[1];
+  var handlerVisibleChange = function handlerVisibleChange(visible) {
+    setVisible(visible);
+  };
+  (0, _react.useEffect)(function () {
+    function handleBlur(event) {
+      setVisible(false);
+    }
+    window.addEventListener('blur', handleBlur);
+    return function () {
+      window.removeEventListener('blur', handleBlur);
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "frc-tooltip-button ".concat(classNames === null || classNames === void 0 ? void 0 : classNames.container),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: tooltipContent,
+      trigger: tooltipTrigger,
+      placement: tooltipPlacement,
+      overlayInnerStyle: {
+        border: 0,
+        boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
+        borderRadius: 'var(--fcr_cornerradius_l)',
+        padding: 10
+      },
+      mouseEnterDelay: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "tooltip-button ".concat(withPopover ? '' : 'tooltip-single-button'),
+        onClick: onTooltipButtonClick,
+        children: [(tooltipIcon === null || tooltipIcon === void 0 ? void 0 : tooltipIcon.type) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: tooltipIcon.type,
+          size: tooltipIcon.size,
+          colors: tooltipIcon.colors
+        }), children]
+      })
+    }), withPopover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      trigger: popoverTrigger,
+      overlayClassName: "frc-tooltip-button__popover ".concat(classNames === null || classNames === void 0 ? void 0 : classNames.container),
+      placement: popoverPlacement,
+      mouseEnterDelay: 0,
+      onVisibleChange: handlerVisibleChange,
+      visible: popoverVisible,
+      overlayInnerStyle: {
+        border: 0,
+        boxShadow: 'none',
+        borderRadius: 0
+      },
+      content: popoverContent,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "popover-button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_DROPUP4,
+          size: 24,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+          }
+        })
+      })
+    })]
+  });
+};

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

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

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

@@ -0,0 +1,57 @@
+"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 _index = require("./index");
+var _type = require("../icon/type");
+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/TooltipButton',
+  tags: ['autodocs'],
+  argTypes: {
+    tooltip: {
+      control: {
+        type: 'object'
+      }
+    }
+  }
+};
+var Basic = exports.Basic = {
+  args: {
+    tooltip: {
+      icon: {
+        type: _type.FcrIconType.FCR_MUTE,
+        colors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        },
+        size: 32
+      },
+      content: 'Microphone'
+    },
+    withPopover: true,
+    popover: {
+      content: 'Microphone'
+    }
+  },
+  render: function render(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.FrcTooltipButton, _objectSpread({}, props));
+  }
+};
+var _default = exports["default"] = meta;

package/lib/components/tooltips-button/tooltip-button.css

@@ -0,0 +1,58 @@
+.frc-tooltip-button {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  border-radius: var(--fcr_cornerradius_xs);
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+  -webkit-app-region: no-drag;
+}
+
+.frc-tooltip-button:hover {
+  background-color: var(--fcr_ui_scene_line1);
+}
+
+
+.tooltip-button,
+.popover-button {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.tooltip-button:hover,
+.popover-button:hover {
+  background-color: var(--fcr_web_ui_scene_hover2);
+
+}
+
+
+.frc-tooltip-button__popover {
+  color: var(--fcr_ui_scene_icontext1);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  box-shadow: 0px 0px 15px var(--fcr_web_light_dropup_m);
+  border-radius: var(--fcr_cornerradius_l);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  overflow: hidden;
+}
+.frc-tooltip-button__popover  .fcr-tooltip-inner{
+  border: 0;
+  box-shadow: 0px 0px 15px var(--fcr_web_light_dropup_m);
+  border-radius: var(--fcr_cornerradius_l);
+  color: var(--fcr_ui_scene_icontext1);
+  padding: 10px;
+}
+
+.tooltip-single-button {
+  width: 46px;
+}
+.fcr-screen-share-button{
+  display: flex;
+  align-items: center;
+}
+

package/lib/components/volume-indicator/index.css

@@ -0,0 +1,17 @@
+.fcr-volume-indicator {
+  height: 10px;
+  display: flex;
+  column-gap: 4px;
+}
+
+.fcr-volume-indicator__point {
+  flex-grow: 1;
+  border-radius: var(--fcr_cornerradius_xxl);
+  height: 100%;
+  background: var(--fcr_ui_scene_ramp_brand2);
+  transition: background 0.15s ease;
+}
+
+.fcr-volume-indicator__point.is-active {
+  background: var(--fcr_ui_scene_ramp_brand6);
+}

package/lib/components/volume-indicator/index.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import './index.css';
+type VolumeIndicatorProps = {
+    /**
+     * 0-1 之间。
+     */
+    /** @en
+     * between 0 and 1
+     */
+    value: number;
+    /**
+     * 级别数量
+     */
+    /** @en
+     * levels block count
+     */
+    barCount?: number;
+};
+export declare const FcrVolumeIndicator: FC<VolumeIndicatorProps>;
+export {};

package/lib/components/volume-indicator/index.js

@@ -0,0 +1,33 @@
+"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.FcrVolumeIndicator = void 0;
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.date.to-string.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _range = _interopRequireDefault(require("lodash/range"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrVolumeIndicator = exports.FcrVolumeIndicator = function FcrVolumeIndicator(_ref) {
+  var value = _ref.value,
+    _ref$barCount = _ref.barCount,
+    barCount = _ref$barCount === void 0 ? 8 : _ref$barCount;
+  var power = value * barCount;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-volume-indicator",
+    children: (0, _range["default"])(0, barCount).map(function (i) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('fcr-volume-indicator__point', {
+          'is-active': power > 0 && i <= power
+        })
+      }, i.toString());
+    })
+  });
+};

package/lib/components/volume-indicator/index.stories.d.ts

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