agora-ui-foundation 1.0.0

package/lib/components/state-bar/network-quality.js

@@ -0,0 +1,27 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkQuality = void 0;
+var _useNamespace = require("../../utilities/use-namespace");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var qualityImgMap = {
+  poor: _type.FcrIconType.FCR_V2_SIGNAL_BAD,
+  average: _type.FcrIconType.FCR_V2_SIGNAL_NORMAL,
+  excellent: _type.FcrIconType.FCR_V2_SIGNAL_GOOD
+};
+var NetworkQuality = exports.NetworkQuality = function NetworkQuality(props) {
+  var ns = (0, _useNamespace.useNamespace)('network-quality');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: ns.b(),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: qualityImgMap[props.quality],
+      size: 20
+    })
+  });
+};

package/lib/components/state-bar/view.d.ts

@@ -0,0 +1,5 @@
+import './index.css';
+import { FC, PropsWithChildren } from 'react';
+import { ToolTipProps } from '../tooltip';
+export declare const MyFcrToolTip: FC<PropsWithChildren<ToolTipProps>>;
+export declare const View: (props: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/state-bar/view.js

@@ -0,0 +1,298 @@
+"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.View = exports.MyFcrToolTip = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+require("./index.css");
+var _stateBarLogo = _interopRequireDefault(require("./assets/state-bar-logo.png"));
+var _stepGradient = _interopRequireDefault(require("./assets/step-gradient.svg"));
+var _liveStreaming = _interopRequireDefault(require("./assets/live-streaming.gif"));
+var _networkQuality = require("./network-quality");
+var _layoutConfig = require("./layout-config");
+var _meetingTime = require("./meeting-time");
+var _react = require("react");
+var _useNamespace = require("../../utilities/use-namespace");
+var _tooltip = require("../tooltip");
+var _toast = require("../toast");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _popover = require("../popover");
+var _dropMenu = require("../drop-menu");
+var _i18n = require("../../i18n");
+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 MyFcrToolTip = exports.MyFcrToolTip = function MyFcrToolTip(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: props.content,
+    trigger: "hover",
+    placement: "bottom",
+    mouseEnterDelay: 0,
+    children: props.children
+  });
+};
+function copyText(_x) {
+  return _copyText.apply(this, arguments);
+}
+function _copyText() {
+  _copyText = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(text) {
+    var input;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return navigator.clipboard.writeText(text);
+        case 3:
+          _context.next = 14;
+          break;
+        case 5:
+          _context.prev = 5;
+          _context.t0 = _context["catch"](0);
+          input = document.createElement('input');
+          input.setAttribute('readonly', 'readonly');
+          input.setAttribute('value', text);
+          document.body.appendChild(input);
+          input.select();
+          document.execCommand('copy');
+          document.body.removeChild(input);
+        case 14:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 5]]);
+  }));
+  return _copyText.apply(this, arguments);
+}
+var View = exports.View = function View(props) {
+  var ns = (0, _useNamespace.useNamespace)('state-bar');
+  var t = (0, _i18n.useI18n)();
+  var meetingId = '234 223 223';
+  var isFullScreen = false;
+  var onMeetingIdCopy = function onMeetingIdCopy() {
+    copyText(meetingId).then(function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'info',
+          content: 'copy_meeting_id_succeed'
+        }
+      });
+    })["catch"](function () {
+      _toast.FcrToastApi.open({
+        toastProps: {
+          type: 'warn',
+          content: '.copy_meeting_id_failed'
+        }
+      });
+    });
+  };
+  var textRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hideLiveStreamingInfoOnOverflow = _useState2[0],
+    setHideLiveStreamingInfoOnOverflow = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var _textRef$current, _textRef$current2;
+    var MIN_WIDTH = 84;
+    var textWidth = (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.offsetWidth;
+    var parentWidth = (_textRef$current2 = textRef.current) === null || _textRef$current2 === void 0 || (_textRef$current2 = _textRef$current2.parentNode) === null || _textRef$current2 === void 0 ? void 0 : _textRef$current2.offsetWidth;
+    console.log(textWidth, parentWidth);
+    if (textWidth > parentWidth || parentWidth < MIN_WIDTH) {
+      setHideLiveStreamingInfoOnOverflow(true);
+    } else {
+      setHideLiveStreamingInfoOnOverflow(false);
+    }
+  }, []);
+  var PopoverContent = function PopoverContent() {
+    var options = [{
+      title: t('fmt_statusbar_label_customwating'),
+      key: 'watchTheLiveStreamingOnACustomLiveStreamingServer',
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_SHARE,
+        size: 20,
+        colors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      }),
+      onButtonClick: function onButtonClick() {
+        console.log('Option 1');
+      }
+    }, {
+      title: t('fmt_live_label_copylink'),
+      key: 'copyLiveLink',
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_ATTACH,
+        size: 20,
+        colors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      }),
+      onButtonClick: function onButtonClick() {}
+    }, {
+      title: t('fmt_tips_button_Stopolive'),
+      key: 'stopLiveStreaming',
+      type: 'danger',
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_SCREENSHARING_ON,
+        size: 20,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
+        }
+      }),
+      onButtonClick: function onButtonClick() {
+        console.log('Option 2');
+      }
+    }];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('meeting-info-drop'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+        options: options
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('left-nav'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _stateBarLogo["default"],
+        alt: "logo",
+        className: ns.e('logo')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+        content: t('fmt_uimanager_tips_ilock'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: ns.e('meeting-lock'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_HOME_CODE2,
+            className: ns.e('meeting-lock-icon'),
+            size: 20
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('fmt_information_label_lockmeeting')
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('meeting-info'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+          content: 'Show Network Details',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: ns.e('info-network'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_networkQuality.NetworkQuality, {
+              quality: props.networkQuality
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _stepGradient["default"],
+          alt: "step divider",
+          className: ns.e('step-divider')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+          content: t('fmt_information_options_sharedetail'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: ns.e('info-detail'),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_V2_TANHAO_ALART,
+              className: ns.e('info-detail-icon'),
+              size: 20
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: ns.e('lock-meeting-text'),
+              children: t('fmt_meetingInfo_label')
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+          content: t('fmt_information_label_clicktocopy'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: ns.e('info-meeting-id'),
+            onClick: onMeetingIdCopy,
+            children: meetingId
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverContent, {}),
+        placement: "bottomRight",
+        trigger: "click",
+        overlayInnerStyle: {
+          width: '300px',
+          boxShadow: 'none',
+          border: 'none'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('live-streaming'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+            content: t('fmt_statusbar_tips_onstreaming'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: ns.e('live-streaming-info'),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: ns.e('live-streaming-info-live-icon'),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _liveStreaming["default"],
+                  alt: "live-streaming",
+                  width: 20
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                  type: _type.FcrIconType.FCR_LIVEICON,
+                  size: 39
+                })]
+              }), !hideLiveStreamingInfoOnOverflow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: ns.e('live-streaming-info-text'),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  ref: textRef,
+                  children: t('fmt_live_label_customizedlive')
+                })
+              }), !hideLiveStreamingInfoOnOverflow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                type: _type.FcrIconType.FCR_DROPUP4,
+                className: ns.e('live-streaming-info-icon'),
+                size: 24,
+                colors: {
+                  iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+                }
+              })]
+            })
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('right-nav'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+        content: t('fmt_statusbar_label_durationtime', {
+          reason1: props.total,
+          reason2: t('fmt_statusbar_label_minutes')
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('time'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingTime.MeetingTime, _objectSpread({}, props))
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+        content: t('fmt_statusbar_label_switchlayout'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('layout'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layoutConfig.LayoutConfig, {})
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+        content: isFullScreen ? t('fmt_statusbar_label_exitfullscreen') : t('fmt_statusbar_label_fullscreen'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: ns.e('full-screen'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: isFullScreen ? _type.FcrIconType.FCR_WINDOW_SMALLER : _type.FcrIconType.FCR_WINDOW_BIGGER,
+            className: ns.e('full-screen-icon'),
+            size: 22
+          })
+        })
+      })]
+    })]
+  });
+};

package/lib/components/switch/index.css

@@ -0,0 +1,64 @@
+.fcr-switch {
+  border-color: var(--fcr_ui_scene_input);
+  border-radius: var(--fcr_cornerradius_round);
+  position: relative;
+  border-width: 1px;
+  border-style: solid;
+  display: inline-block;
+  font-size: 12px;
+  line-height: 1;
+  padding: 6px 6px 6px 8px;
+  box-sizing: border-box;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.3s;
+  transform: scale(0.7);
+  transform-origin: top left;
+}
+
+.fcr-switch.fcr-switch--on {
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-switch.fcr-switch--off {
+  background: var(--fcr_mobile_ui_scene_fill3);
+  border-color: var(--fcr_ui_scene_line1);
+  color: var(--fcr_ui_scene_white8);
+}
+
+.fcr-switch__slider {
+  border-radius: var(--fcr_cornerradius_round);
+  top: 3px;
+  position: absolute;
+  width: 24px;
+  height: 18px;
+  box-shadow: -1px 0px 2px rgba(40, 34, 111, 0.295629);
+  transition: all 0.3s;
+  background: var(--fcr_ui_scene_white10);
+}
+
+.fcr-switch--off .fcr-switch__slider {
+  left: 3px;
+}
+
+.fcr-switch--on .fcr-switch__slider {
+  left: calc(100% - 24px - 3px);
+}
+
+.fcr-switch__labels span {
+  display: inline-block;
+  width: 23px;
+  opacity: 1;
+}
+.fcr-switch .fcr-switch__labels span:first-child {
+  text-align: left;
+  
+}
+.fcr-switch .fcr-switch__labels span:last-child {
+  text-align: right;
+}
+.fcr-switch.fcr-switch--off .fcr-switch__labels span:first-child,
+.fcr-switch.fcr-switch--on .fcr-switch__labels span:last-child {
+  opacity: 0;
+}

package/lib/components/switch/index.d.ts

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import './index.css';
+type SwitchProps = {
+    /**
+     * 开关状态的标签
+     * { on: '开', off: '关' }
+     */
+    /** @en
+     * Labels for the switch's states
+     */
+    labels?: Record<'on' | 'off', string>;
+    /**
+     * 开关的值
+     */
+    /** @en
+     * Value of the switch
+     */
+    value?: boolean;
+    /**
+     * 值变更事件
+     * @param value 变更值
+     */
+    /** @en
+     * Change event of the switch's value
+     * @param value changed value
+     */
+    onChange?: (val: boolean) => void;
+};
+export declare const FcrSwitch: FC<SwitchProps>;
+export {};

package/lib/components/switch/index.js

@@ -0,0 +1,49 @@
+"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.FcrSwitch = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrSwitch = exports.FcrSwitch = function FcrSwitch(_ref) {
+  var _labels$on, _labels$off;
+  var labels = _ref.labels,
+    value = _ref.value,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+  var _useState = (0, _react.useState)(value),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    toggle = _useState2[0],
+    setToggle = _useState2[1];
+  var cls = (0, _classnames["default"])('fcr-switch', {
+    'fcr-switch--on': toggle,
+    'fcr-switch--off': !toggle
+  });
+  var handleClick = function handleClick() {
+    setToggle(!toggle);
+    onChange(!toggle);
+  };
+  (0, _react.useEffect)(function () {
+    setToggle(value);
+  }, [value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    onClick: handleClick,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-switch__labels",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: (_labels$on = labels === null || labels === void 0 ? void 0 : labels.on) !== null && _labels$on !== void 0 ? _labels$on : 'ON'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: (_labels$off = labels === null || labels === void 0 ? void 0 : labels.off) !== null && _labels$off !== void 0 ? _labels$off : 'OFF'
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-switch__slider"
+    })]
+  });
+};

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

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

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

@@ -0,0 +1,45 @@
+"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/Switch',
+  tags: ['autodocs'],
+  args: {
+    labels: {
+      on: 'ON',
+      off: 'OFF'
+    }
+  }
+};
+var Basic = exports.Basic = {
+  render: function render(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrSwitch, _objectSpread({}, props))
+    });
+  }
+};
+var _default = exports["default"] = meta;

package/lib/components/tabs/index.css

@@ -0,0 +1,88 @@
+.fcr-tabs {
+  color: var(--fcr_ui_scene_icontext2);
+  border-radius: var(--fcr_cornerradius_l);
+  padding: 4px;
+  font-size: 16px;
+  line-height: 1;
+  display: inline-block;
+  cursor: pointer;
+  --fcr-tabs__nav-item__width: 110px;
+}
+.fcr-tabs:not(.fcr-simple-tabs) {
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block2);
+}
+.fcr-simple-tabs {
+  font-size: 14px;
+}
+
+.fcr-tabs__nav-list {
+  display: flex;
+  position: relative;
+}
+
+.fcr-tabs__nav-item {
+  padding: 4px 0;
+  width: var(--fcr-tabs__nav-item__width);
+  text-align: center;
+  position: relative;
+  z-index: 10;
+  transition: 0.3s all;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.fcr-tabs__nav-item.fcr-tabs__nav-item--active {
+  color: var(--fcr_ui_scene_white10);
+  font-weight: 700;
+  font-size: 14px;
+}
+.fcr-tabs.fcr-fashion-tabs .fcr-tabs__nav-item.fcr-tabs__nav-item--active {
+  color: var(--fcr_ui_scene_icontext1);
+}
+.fcr-tabs__nav-indicator {
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+  color: var(--fcr_ui_scene_icontext1);
+  border-radius: var(--fcr_cornerradius_s);
+  position: absolute;
+  height: 100%;
+  transition: 0.3s all;
+}
+
+.fcr-tabs.fcr-fashion-tabs {
+  border-radius: 0;
+  padding: 3px 3px;
+  font-size: 14px;
+  border-bottom-style: solid;
+  border-bottom-width: 3px;
+  background: unset;
+  border-color: var(--fcr_ui_scene_line1);
+}
+
+.fcr-fashion-tabs .fcr-tabs__nav-item {
+  text-align: left;
+  padding: 0 13px 0 0;
+  width: unset;
+  color: var(--fcr_ui_scene_icontext2);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+}
+.fcr-fashion-tabs .fcr-tabs__nav-item.fcr-tabs__nav-item--active {
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+.fcr-fashion-tabs .fcr-tabs__nav-item:not(:first-child) {
+  padding-left: 13px;
+}
+
+.fcr-fashion-tabs__nav-indicator {
+  position: absolute;
+  height: 100%;
+  transition: 0.3s all;
+}
+
+.fcr-fashion-tabs__nav-indicator path {
+  fill-opacity: 0.8;
+}

package/lib/components/tabs/index.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import './index.css';
+export type TabsProps = {
+    items: {
+        label: string;
+        key: string;
+    }[];
+    activeKey: string;
+    onChange: (key: string) => void;
+    variant?: 'simple';
+};
+export declare const FcrTabs: FC<TabsProps>;
+export declare const FcrFashionTabs: FC<Omit<TabsProps, 'variant'>>;