@pisell/materials 3.0.62 → 3.0.64

package/es/components/productCard/index.js

@@ -14,6 +14,7 @@ import { Alert } from 'antd';
 import { locales } from '@pisell/utils';
 import CardPro from "../cardPro";
 import Header from "./components/Header";
+import DeleteButton from "./components/Header/DeleteButton";
 import Time from "./components/Time";
 import Packages from "./components/Packages";
 import Sales from "./components/Sales";
@@ -24,10 +25,12 @@ import Action from "./components/Action";
 import UseOpenNote from "./hooks/useOpenNote";
 import localeTexts from "./locales";
 import { defaultValue } from "./status";
+import useEngineContext from "../../hooks/useEngineContext";
 import "./index.less";
-locales.init(localeTexts, localStorage.getItem('umi_locale') || 'en');
 var ProductCard = function ProductCard(props) {
-  var _classNames, _dataSource$items;
+  var _utils$storage, _classNames2, _dataSource$items;
+  var context = useEngineContext();
+  var utils = context.appHelper.utils || {};
   var _props$dataSource = props.dataSource,
     dataSource = _props$dataSource === void 0 ? defaultValue.dataSource : _props$dataSource,
     _props$isShowImage = props.isShowImage,
@@ -47,6 +50,8 @@ var ProductCard = function ProductCard(props) {
     onCard = props.onCard,
     other = _objectWithoutProperties(props, _excluded);
   var useOpenNoteRef = useRef();
+  var locale = (utils === null || utils === void 0 ? void 0 : (_utils$storage = utils.storage) === null || _utils$storage === void 0 ? void 0 : _utils$storage.get('umi_locale')) || localStorage.getItem('umi_locale');
+  locales.init(localeTexts, locale || 'en');
   console.log(dataSource, isShowImage, isShowNote, 'dataSource');
   var image = dataSource.image,
     bundle = dataSource.bundle,
@@ -80,8 +85,16 @@ var ProductCard = function ProductCard(props) {
   var hideDivider = useMemo(function () {
     return (bundle === null || bundle === void 0 ? void 0 : bundle.length) || (relation_products === null || relation_products === void 0 ? void 0 : relation_products.length);
   }, [bundle, relation_products]);
-  return /*#__PURE__*/React.createElement(CardPro, {
-    className: classNames('pisell-lowcode-product-card', (_classNames = {}, _defineProperty(_classNames, 'pisell-lowcode-product-card-image', !showImage), _defineProperty(_classNames, 'pisell-lowcode-normal-product-card', !showImage && isNormalProduct), _classNames)),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-lowcode-product-card-wrap', _defineProperty({}, 'pisell-lowcode-product-card-disabled', dataSource === null || dataSource === void 0 ? void 0 : dataSource.disabled))
+  }, (dataSource === null || dataSource === void 0 ? void 0 : dataSource.disabled) && /*#__PURE__*/React.createElement("div", {
+    className: "delete-btn-wrapper"
+  }, /*#__PURE__*/React.createElement(DeleteButton, {
+    onDelete: function onDelete() {
+      return _onDelete === null || _onDelete === void 0 ? void 0 : _onDelete(dataSource);
+    }
+  })), /*#__PURE__*/React.createElement(CardPro, {
+    className: classNames('pisell-lowcode-product-card', (_classNames2 = {}, _defineProperty(_classNames2, 'pisell-lowcode-product-card-image', !showImage), _defineProperty(_classNames2, 'pisell-lowcode-normal-product-card', !showImage && isNormalProduct), _classNames2)),
     key: _id
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick(e) {
@@ -140,6 +153,6 @@ var ProductCard = function ProductCard(props) {
         note: e || ''
       }));
     }
-  })));
+  }))));
 };
 export default ProductCard;

package/es/components/productCard/index.less

@@ -37,7 +37,7 @@
     width: 6px;
     height: 100%;
     background: var(--Blue-400, #53b1fd);
-    z-index: 0 !important;
+    z-index: 1 !important;
   }
 }
 
@@ -47,8 +47,36 @@
   }
 }
 
+.pisell-lowcode-product-card-wrap {
+  position: relative;
+}
+
+.pisell-lowcode-product-card-disabled {
+  opacity: 1;
+
+  .pisell-lowcode-product-card {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .delete-btn-wrapper {
+    opacity: 1;
+    pointer-events: auto;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    z-index: 10;
+
+    .anticon {
+      color: red;
+      cursor: pointer;
+      opacity: 1;
+    }
+  }
+}
+
 .pisell-lowcode-product-card-error {
   border: none !important;
   margin: 8px -16px -8px;
   border-radius: 0 0 8px 8px;
-}
+}

package/es/components/productCard/status.js

@@ -43,7 +43,9 @@ export var defaultProduct = {
   num: 1,
   image: '',
   isShowNote: true,
-  note: ''
+  note: '',
+  is_show_duration: true,
+  is_show_week: true
 };
 
 /**

package/es/components/productCard/types.d.ts

@@ -54,6 +54,8 @@ export declare type productType = {
     holder_title?: string;
     start_date?: string;
     end_date?: string;
+    is_show_duration?: boolean;
+    is_show_week?: boolean;
 };
 /**
  * 排序总配置

package/es/components/productCard/utils.js

@@ -3,6 +3,7 @@ import { locales } from '@pisell/utils';
 import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/en';
 import 'dayjs/locale/zh-tw';
+import useEngineContext from "../../hooks/useEngineContext";
 
 /**
  * @title: 是否英文
@@ -53,8 +54,11 @@ export var formatMultiDayDate = function formatMultiDayDate(item) {
  * @Date: 2024-04-26 14:04
  */
 export var getServiceTime = function getServiceTime(item, currentDate) {
+  var _utils$storage, _item$format;
   if (!dayjs(currentDate).isValid()) return '';
-  var locale = (item === null || item === void 0 ? void 0 : item.locale) || 'en-US';
+  var context = useEngineContext();
+  var utils = context.appHelper.utils || {};
+  var locale = (item === null || item === void 0 ? void 0 : item.locale) || (utils === null || utils === void 0 ? void 0 : (_utils$storage = utils.storage) === null || _utils$storage === void 0 ? void 0 : _utils$storage.get('umi_locale')) || 'en-US';
   var isEn = locale === 'en-US' || locale === 'en';
   var localeTypes = {
     'en-US': 'en',
@@ -66,6 +70,18 @@ export var getServiceTime = function getServiceTime(item, currentDate) {
   var endDate = dayjs(item === null || item === void 0 ? void 0 : item.end_date);
   var diffInDays = endDate.diff(startDate, 'day');
   var _format = isEn ? 'ddd, DD/MM/YYYY' : 'YYYY-MM-DD，ddd';
+
+  // 是否自定义格式
+  if (item !== null && item !== void 0 && item.hasOwnProperty('format') && (item === null || item === void 0 ? void 0 : (_item$format = item.format) === null || _item$format === void 0 ? void 0 : _item$format.length) > 0) {
+    var _item$format2, _item$format3;
+    _format = isEn ? item === null || item === void 0 ? void 0 : (_item$format2 = item.format) === null || _item$format2 === void 0 ? void 0 : _item$format2[0] : item === null || item === void 0 ? void 0 : (_item$format3 = item.format) === null || _item$format3 === void 0 ? void 0 : _item$format3[1];
+  }
+
+  // 是否显示时间
+  if (item !== null && item !== void 0 && item.show_time) {
+    startDate = dayjs("".concat(item === null || item === void 0 ? void 0 : item.start_date, " ").concat(item === null || item === void 0 ? void 0 : item.start_time));
+    endDate = dayjs("".concat(item === null || item === void 0 ? void 0 : item.end_date, " ").concat(item === null || item === void 0 ? void 0 : item.end_time));
+  }
   var date = "".concat(startDate.format(_format), " ~ ").concat(endDate.format(_format));
   var duration = "".concat(diffInDays, " ").concat(locales.getText('pisell2.product.card.day')(diffInDays));
   return "".concat(date, " (").concat(duration, ")");

package/es/components/section-footers/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface SectionFooterProps {
+    left?: React.ReactNode;
+    middle?: React.ReactNode;
+    right?: React.ReactNode;
+    className?: string;
+}
+declare const SectionFooters: (props: SectionFooterProps) => import("react").JSX.Element;
+export default SectionFooters;

package/es/components/section-footers/index.js

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { Flex } from 'antd';
+var SectionFooters = function SectionFooters(props) {
+  useEffect(function () {
+    document.body.id = 'body';
+  }, []);
+  var left = props.left,
+    middle = props.middle,
+    right = props.right,
+    className = props.className;
+  return /*#__PURE__*/React.createElement(Flex, {
+    gap: "middle",
+    justify: "space-between",
+    className: "pisell-section-footers-wrapper ".concat(className)
+  }, left, middle, right);
+};
+export default SectionFooters;

package/es/components/section-footers/index.less

@@ -0,0 +1,5 @@
+.pisell-section-footers-wrapper {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}

package/es/components/table/Actions/component/ExportImport/utils/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @title: 格式化导出导入接口地址
+ * @description:
+ * @param {string} url
+ * @return {*}
+ * @Author: WangHan
+ * @Date: 2024-09-05 11:39
+ */
+export declare const formatApiUrl: (url: string) => string;

package/es/components/table/Actions/component/ExportImport/utils/index.js

@@ -0,0 +1,11 @@
+/**
+ * @title: 格式化导出导入接口地址
+ * @description: 
+ * @param {string} url
+ * @return {*}
+ * @Author: WangHan
+ * @Date: 2024-09-05 11:39
+ */
+export var formatApiUrl = function formatApiUrl(url) {
+  return url || '/shop/form/data';
+};

package/es/index.d.ts

@@ -108,5 +108,15 @@ export { default as PisellAdjustPrice } from './components/pisellAdjustPrice';
 export { default as PisellAdjustPriceInputNumber } from './components/pisellAdjustPrice/PisellAdjustPriceInputNumber';
 export { default as PisellStatisticList } from './components/pisellStatisticList';
 export { default as PisellFloatingPanel } from './components/pisellFloatingPanel';
+export { default as PisellAvatar } from './components/pisellAvatar';
+export { default as PisellViewGrid } from './components/pisellViewGrid';
+export { default as PisellCustomCheckboxGroup } from './components/pisellCustomCheckboxGroup';
+export { default as PisellDropdown } from './components/pisellDropdown';
+export { default as PisellSectionHeaders } from './components/pisellSectionHeaders';
+export { default as PisellImageCarousels } from './components/pisellImageCarousels';
+export { default as PisellHeaderProgressBar } from './components/pisellHeaderProgressBar';
+export { default as PisellList01 } from './components/pisellList01';
+export { default as PisellAnchor } from './components/pisellAnchor';
+export { default as SectionFooters } from './components/section-footers';
 export { default as ProductCard } from './components/productCard';
 export { default as Collapse } from './components/collapse';

package/es/index.js

@@ -133,5 +133,15 @@ export { default as PisellAdjustPrice } from "./components/pisellAdjustPrice";
 export { default as PisellAdjustPriceInputNumber } from "./components/pisellAdjustPrice/PisellAdjustPriceInputNumber";
 export { default as PisellStatisticList } from "./components/pisellStatisticList";
 export { default as PisellFloatingPanel } from "./components/pisellFloatingPanel";
+export { default as PisellAvatar } from "./components/pisellAvatar";
+export { default as PisellViewGrid } from "./components/pisellViewGrid";
+export { default as PisellCustomCheckboxGroup } from "./components/pisellCustomCheckboxGroup";
+export { default as PisellDropdown } from "./components/pisellDropdown";
+export { default as PisellSectionHeaders } from "./components/pisellSectionHeaders";
+export { default as PisellImageCarousels } from "./components/pisellImageCarousels";
+export { default as PisellHeaderProgressBar } from "./components/pisellHeaderProgressBar";
+export { default as PisellList01 } from "./components/pisellList01";
+export { default as PisellAnchor } from "./components/pisellAnchor";
+export { default as SectionFooters } from "./components/section-footers";
 export { default as ProductCard } from "./components/productCard";
 export { default as Collapse } from "./components/collapse";

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

@@ -5,7 +5,7 @@ export declare const paginationConfig: {
     className: string;
     defaultCurrent: number;
     showTotal: (total: number, range: [number, number]) => string;
-    itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
+    itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
     responsive: boolean;
     size: string;
 };

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+export interface TimeSlot {
+    value: string;
+    label: string;
+    time: string;
+    remainingCount: number;
+    disabled?: boolean;
+}
+export interface TimeResourceSelectorProps {
+    timeSlots?: TimeSlot[];
+    multiple?: boolean;
+    showUnavailable?: boolean;
+    defaultExpanded?: boolean;
+    defaultSelectFirst?: boolean;
+    onChange?: (values: string | string[]) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const TimeResourceSelector: React.FC<TimeResourceSelectorProps>;
+export default TimeResourceSelector;

package/lib/components/TimeResourceSelector/index.js

@@ -0,0 +1,109 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/TimeResourceSelector/index.tsx
+var TimeResourceSelector_exports = {};
+__export(TimeResourceSelector_exports, {
+  default: () => TimeResourceSelector_default
+});
+module.exports = __toCommonJS(TimeResourceSelector_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_PisellCustomCheckboxGroup = __toESM(require("../PisellCustomCheckboxGroup"));
+var import_index = require("./index.less");
+var TimeResourceSelector = ({
+  timeSlots = [],
+  multiple = false,
+  showUnavailable = true,
+  defaultExpanded = true,
+  defaultSelectFirst = true,
+  onChange,
+  className,
+  style
+}) => {
+  const [selectedValues, setSelectedValues] = (0, import_react.useState)([]);
+  const [error, setError] = (0, import_react.useState)("");
+  const filteredTimeSlots = timeSlots.filter(
+    (slot) => showUnavailable ? true : !slot.disabled
+  );
+  (0, import_react.useEffect)(() => {
+    if (defaultSelectFirst && filteredTimeSlots.length > 0 && selectedValues.length === 0) {
+      const firstAvailable = filteredTimeSlots.find((slot) => !slot.disabled);
+      if (firstAvailable) {
+        const value = firstAvailable.value;
+        setSelectedValues([value]);
+        onChange == null ? void 0 : onChange(multiple ? [value] : value);
+      }
+    }
+  }, [filteredTimeSlots, defaultSelectFirst, multiple, onChange]);
+  const renderTimeCard = (item) => {
+    const { time, remainingCount, disabled } = item;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellCard,
+      {
+        className: "time-resource-card",
+        bodyStyle: { padding: "12px" }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "time-slot-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "time-text" }, time), /* @__PURE__ */ import_react.default.createElement("div", { className: "remaining-count" }, "剩余: ", remainingCount))
+    );
+  };
+  const handleChange = (0, import_react.useCallback)(
+    (value) => {
+      if (Array.isArray(value)) {
+        setSelectedValues(value);
+        setError(value.length === 0 ? "Please select a session time" : "");
+      } else {
+        setSelectedValues([value]);
+        setError("");
+      }
+      onChange == null ? void 0 : onChange(value);
+    },
+    [onChange]
+  );
+  const renderContent = () => {
+    if (filteredTimeSlots.length === 0) {
+      return /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { description: "No dates are available" });
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, error && /* @__PURE__ */ import_react.default.createElement("div", { className: "time-resource-error" }, error), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellCustomCheckboxGroup.default,
+      {
+        dataSource: filteredTimeSlots,
+        renderItem: renderTimeCard,
+        value: selectedValues,
+        onChange: handleChange,
+        isMultiple: multiple,
+        columns: 4,
+        horizontalGap: 16,
+        verticalGap: 16
+      }
+    ));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `time-resource-selector ${className || ""}`, style }, /* @__PURE__ */ import_react.default.createElement(import_antd.Collapse, { defaultActiveKey: defaultExpanded ? ["1"] : [] }, /* @__PURE__ */ import_react.default.createElement(import_antd.Collapse.Panel, { header: "选择时间段", key: "1" }, renderContent())));
+};
+var TimeResourceSelector_default = TimeResourceSelector;

package/lib/components/TimeResourceSelector/index.less

@@ -0,0 +1,59 @@
+.time-resource-selector {
+  .time-resource-card {
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .time-slot-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 80px;
+
+    .time-text {
+      font-size: 16px;
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
+
+    .remaining-count {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+
+  // 选中状态
+  .pisell-checkbox-item-selected {
+    .time-resource-card {
+      border-color: #1890ff;
+      background: rgba(24, 144, 255, 0.1);
+    }
+  }
+
+  // 禁用状态
+  .pisell-checkbox-item-disabled {
+    .time-resource-card {
+      cursor: not-allowed;
+      opacity: 0.5;
+
+      &:hover {
+        box-shadow: none;
+      }
+    }
+  }
+
+  // 错误提示
+  .time-resource-error {
+    color: #ff4d4f;
+    padding: 8px 0;
+    text-align: center;
+    background-color: #fff2f0;
+    border-radius: 4px;
+    margin-bottom: 16px;
+  }
+}

package/lib/components/cardPro/index.js

@@ -53,9 +53,6 @@ var CardPro = (props) => {
     coverHeight,
     badge
   } = props;
-  (0, import_react.useEffect)(() => {
-    document.body.id = "body";
-  }, []);
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Card,
     {

package/lib/components/iconfont/index.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(iconfont_exports);
 var import_icons = require("@ant-design/icons");
 var import_react = __toESM(require("react"));
 var MyIcon = (0, import_icons.createFromIconfontCN)({
-  scriptUrl: "https://static.pisellcdn.com/pisell2iconfont.js"
+  scriptUrl: "https://static.pisellcdn.com/pisell2/iconfont_1.0.js"
   // 在 iconfont.cn 上生成
 });
 var IconFont = (props) => {

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './index.less';
+export interface Option {
+    id: string | number;
+    name: React.ReactNode;
+}
+export interface PisellAnchorProps {
+    options?: Option[];
+    tab?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (key: string | number) => void;
+}
+declare const PisellAnchor: React.ForwardRefExoticComponent<PisellAnchorProps & React.RefAttributes<any>>;
+export default PisellAnchor;

package/lib/components/pisellAnchor/index.js

@@ -0,0 +1,120 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellAnchor/index.tsx
+var pisellAnchor_exports = {};
+__export(pisellAnchor_exports, {
+  default: () => pisellAnchor_default
+});
+module.exports = __toCommonJS(pisellAnchor_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_ahooks = require("ahooks");
+var import_ChevronLeft = __toESM(require("@pisell/icon/es/ChevronLeft"));
+var import_ChevronRight = __toESM(require("@pisell/icon/es/ChevronRight"));
+var import_index = require("./index.less");
+var PisellAnchor = (0, import_react.forwardRef)((props, ref) => {
+  const { options = [], tab, className, style, onChange } = props;
+  const contentRef = (0, import_react.useRef)(null);
+  const [isShowButton, setIsShowButton] = (0, import_react.useState)(true);
+  const [leftWidth, setLeftWidth] = (0, import_react.useState)(0);
+  const [rightWidth, setRightWidth] = (0, import_react.useState)(40);
+  const { run: onScroll } = (0, import_ahooks.useDebounceFn)(
+    (e) => {
+      const { scrollLeft, scrollWidth, clientWidth } = e.target;
+      setLeftWidth(scrollLeft > 0 ? 40 : 0);
+      setRightWidth(scrollLeft + clientWidth >= scrollWidth ? 0 : 40);
+    },
+    { wait: 200 }
+  );
+  const setTabScroll = (offsetLeft) => {
+    if (contentRef.current) {
+      contentRef.current.scrollTo({
+        left: offsetLeft,
+        behavior: "smooth"
+      });
+    }
+  };
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    scroll: (tab2) => {
+      if (tab2) {
+        const dom = document.querySelector(`#tab-${tab2}`);
+        if (dom) {
+          setTabScroll(dom.offsetLeft);
+        }
+      }
+    }
+  }));
+  const onPageChange = (type) => {
+    if (contentRef.current) {
+      const { scrollLeft, clientWidth } = contentRef.current;
+      contentRef.current.scrollTo({
+        left: scrollLeft + (type === "left" ? -clientWidth : clientWidth),
+        behavior: "smooth"
+      });
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-tabs", className), style }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-tabs-btn-left",
+      style: { width: leftWidth },
+      onClick: () => onPageChange("left")
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ChevronLeft.default, { className: "pisell-tabs-btn-icon" })
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: contentRef,
+      className: "pisell-tabs-content",
+      id: `tab-${tab}-content`,
+      onScroll
+    },
+    options.map((item) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: item.id,
+        id: `tab-${item.id}`,
+        className: (0, import_classnames.default)("pisell-tabs-tab", {
+          "pisell-tabs-tab-active": tab === item.id
+        }),
+        onClick: () => onChange == null ? void 0 : onChange(item.id)
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-tabs-tab-content" }, item.name)
+    ))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-tabs-btn-right",
+      style: { width: rightWidth },
+      onClick: () => onPageChange("right")
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ChevronRight.default, { className: "pisell-tabs-btn-icon" })
+  ));
+});
+var pisellAnchor_default = PisellAnchor;