@pisell/materials 3.0.61 → 3.0.63

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/Table/utils.d.ts

@@ -155,7 +155,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
+}) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

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/collapse/index.js

@@ -34,7 +34,28 @@ __export(collapse_exports, {
 module.exports = __toCommonJS(collapse_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_styled_components = __toESM(require("styled-components"));
 var import_index = require("./index.less");
+var CustomCollapse = (0, import_styled_components.default)(import_antd.Collapse)`
+  &.custom-collapse {
+    background-color: ${(props) => props.panelBackground || "#ffffff"};
+  }
+
+  // .ant-collapse-item {
+  //   background-color: ${(props) => props.panelBackground || "#ffffff"};
+  //   margin-bottom: ${(props) => props.panelMarginBottom || "0"};
+  //   border-radius: ${(props) => props.panelBorderRadius || "0"};
+  // }
+
+  // .pisell-lowcode-collapse-header {
+  //   background-color: ${(props) => props.panelBackground || "#ffffff"};
+  //   border-radius: ${(props) => props.panelBorderRadius || "0"} !important;
+  // }
+
+  .pisell-lowcode-collapse-content {
+    background-color: ${(props) => props.panelBackground || "#ffffff"};
+  }
+`;
 var Collapse = (props) => {
   const {
     panelBackground,
@@ -66,16 +87,21 @@ var Collapse = (props) => {
           },
           item == null ? void 0 : item.label
         ) : null,
-        style: panelStyle
+        children: item.children,
+        className: "custom-collapse-panel"
       };
     });
-  }, [items, headerColor, showHeader, headerFontSize, panelStyle]);
+  }, [items, headerColor, showHeader, headerFontSize]);
   return /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Collapse,
+    CustomCollapse,
     {
       ...rest,
       expandIcon: expandIcon ? () => expandIcon : void 0,
-      items: itemsMap
+      items: itemsMap,
+      className: "custom-collapse",
+      panelBackground,
+      panelMarginBottom,
+      panelBorderRadius
     }
   );
 };

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;

package/lib/components/pisellAnchor/index.less

@@ -0,0 +1,177 @@
+.pisell-anchor-containers {
+  // display: flex;
+  // align-items: center;
+  // background-color: #fff;
+  // height: 40px;
+  .pisell-lowcode-anchor-wrapper {
+    &::before {
+      content: '';
+      display: none;
+    }
+    .pisell-lowcode-anchor {
+      height: 40px;
+      border-bottom: none !important;
+      background-color: #fff;
+
+      .pisell-lowcode-anchor-ink {
+        display: none;
+      }
+
+      .pisell-lowcode-anchor-link {
+        height: 100%;
+        padding: 0 16px;
+        display: flex;
+        align-items: center;
+
+        &-title {
+          color: var(--Gray-900, #101828);
+          font-family: Inter;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 40px;
+        }
+      }
+
+      .pisell-lowcode-anchor-link-active {
+        border-radius: 100px;
+        background: var(--theme-color, #7f56d9);
+        height: 40px;
+
+        .pisell-lowcode-anchor-link-title {
+          color: var(--White, #fff);
+          line-height: 40px;
+        }
+      }
+    }
+  }
+  .pisell-anchor-scroll {
+    height: 40px;
+    flex: 1;
+    overflow-x: auto;
+
+    // 隐藏滚动条 - Firefox
+    scrollbar-width: none;
+
+    // 隐藏滚动条 - IE and Edge
+    -ms-overflow-style: none;
+
+    // 隐藏滚动条 - Chrome, Safari, Opera
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .pisell-anchor-buttons {
+    display: flex;
+    gap: 8px;
+    margin-left: 16px;
+
+    .scroll-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      background: white;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover:not(.disabled) {
+        color: #1890ff;
+        border-color: #1890ff;
+      }
+
+      &.disabled {
+        color: #d9d9d9;
+        cursor: not-allowed;
+        background: #f5f5f5;
+      }
+    }
+  }
+}
+
+.pisell-tabs {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 17px;
+  font-weight: 400;
+  color: #0d1619;
+  cursor: default;
+  position: relative;
+
+  .pisell-tabs-btn-left,
+  .pisell-tabs-btn-right {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0.8) 100%);
+    cursor: pointer;
+    transition: width 300ms ease;
+    user-select: none;
+
+    .pisell-tabs-btn-icon {
+      width: 24px;
+      height: 24px;
+      background: #f1f1f1;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #262626;
+      font-size: 20px;
+    }
+  }
+
+  .pisell-tabs-btn-left {
+    left: 0;
+    background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
+  }
+
+  .pisell-tabs-btn-right {
+    right: 0;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
+  }
+
+  .pisell-tabs-content {
+    flex: 1;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    padding: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .pisell-tabs-tab {
+      flex: 0 0 auto;
+      padding: 8px 16px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all 0.3s;
+
+      &:hover {
+        color: #1677ff;
+      }
+
+      &.pisell-tabs-tab-active {
+        color: #1677ff;
+        font-weight: 600;
+      }
+    }
+  }
+}