@pisell/private-materials 6.6.2 → 6.6.4

package/lib/components/walletList/index.js

@@ -104,8 +104,48 @@ var DEFAULT_WALLET_CARD = {
       en: "Level"
     },
     metadata: {
-      barcodetype: "barCode",
-      showcaseWalletPass: ["rechargeable", "piont", "voucher", "discount"],
+      showcaseWalletPassNew: [
+        {
+          type: "rechargeable",
+          display: 1,
+          custom_title: {
+            original: "Balance",
+            "zh-CN": "充值卡",
+            "zh-HK": "充值卡",
+            en: "Balance"
+          }
+        },
+        {
+          type: "point",
+          display: 1,
+          custom_title: {
+            original: "Points",
+            "zh-CN": "积分卡",
+            "zh-HK": "積分卡",
+            en: "Points"
+          }
+        },
+        {
+          type: "voucher",
+          display: 1,
+          custom_title: {
+            original: "Voucher",
+            "zh-CN": "代金券",
+            "zh-HK": "代金券",
+            en: "Voucher"
+          }
+        },
+        {
+          type: "discount",
+          display: 1,
+          custom_title: {
+            original: "Discount",
+            "zh-CN": "折扣卡",
+            "zh-HK": "折扣卡",
+            en: "Discount"
+          }
+        }
+      ],
       coverImage: "",
       icon: ""
     }
@@ -171,7 +211,7 @@ var WalletList = (0, import_model.Provider)((props) => {
       if (isMountedRef.current) {
         setState({
           list: [DEFAULT_WALLET_CARD],
-          balance: DEFAULT_BALANCE,
+          balance: [],
           hasAttempted: true,
           isLoggedIn: false
         });
@@ -269,7 +309,7 @@ var WalletList = (0, import_model.Provider)((props) => {
     if (!isUserLoggedIn) {
       setState({
         list: [DEFAULT_WALLET_CARD],
-        balance: DEFAULT_BALANCE,
+        balance: [],
         hasAttempted: true,
         isLoggedIn: false
       });
@@ -281,6 +321,14 @@ var WalletList = (0, import_model.Provider)((props) => {
     try {
       cachedList = getFromLocalStorage(STORAGE_KEY);
       cachedBalance = getFromLocalStorage(STORAGE_KEY_BALANCE);
+      if (!Array.isArray(cachedBalance) || !cachedBalance.some(
+        (item) => {
+          var _a3;
+          return (_a3 = item.hasOwnProperty) == null ? void 0 : _a3.call(item, "gift_card_balance");
+        }
+      )) {
+        cachedBalance = null;
+      }
     } catch (e) {
       console.error("Error fetching from localStorage:", e);
     }
@@ -293,10 +341,10 @@ var WalletList = (0, import_model.Provider)((props) => {
     }
     try {
       if (!isMountedRef.current) return;
-      const [walletListData, walletBalanceData] = await Promise.all([
-        (0, import_serve.getWalletList)(),
-        (0, import_serve.getWalletBalance)()
-      ]);
+      const walletListData = await (0, import_serve.getWalletList)();
+      const walletBalanceData = await (0, import_serve.batchGetWalletBalance)(
+        walletListData.map((item) => item.wallet_id)
+      );
       if (!isMountedRef.current || requestIdRef.current !== requestId) return;
       if (walletListData) {
         try {
@@ -319,8 +367,20 @@ var WalletList = (0, import_model.Provider)((props) => {
           try {
             let retryBalanceData = walletBalanceData;
             let retryListData = walletListData;
+            if (Array.isArray(walletListData) && walletListData.length === 0) {
+              retryListData = await (0, import_serve.getWalletList)();
+              if (retryListData && retryListData.length > 0) {
+                try {
+                  saveToLocalStorage(STORAGE_KEY, retryListData);
+                } catch (e) {
+                  console.error("Error saving retry list to localStorage:", e);
+                }
+              }
+            }
             if (!walletBalanceData) {
-              retryBalanceData = await (0, import_serve.getWalletBalance)();
+              retryBalanceData = await (0, import_serve.batchGetWalletBalance)(
+                retryListData.map((item) => item.wallet_id)
+              );
               if (retryBalanceData) {
                 try {
                   saveToLocalStorage(STORAGE_KEY_BALANCE, retryBalanceData);
@@ -332,16 +392,6 @@ var WalletList = (0, import_model.Provider)((props) => {
                 }
               }
             }
-            if (Array.isArray(walletListData) && walletListData.length === 0) {
-              retryListData = await (0, import_serve.getWalletList)({});
-              if (retryListData && retryListData.length > 0) {
-                try {
-                  saveToLocalStorage(STORAGE_KEY, retryListData);
-                } catch (e) {
-                  console.error("Error saving retry list to localStorage:", e);
-                }
-              }
-            }
             setState({
               list: retryListData || [],
               balance: retryBalanceData,
@@ -385,50 +435,41 @@ var WalletList = (0, import_model.Provider)((props) => {
     const { code, shop, wallet, id } = item;
     const { metadata, name } = wallet || {};
     const {
-      barcodetype = "barCode",
-      showcaseWalletPass = [],
+      showcaseWalletPassNew = [],
       coverImage = "",
       icon = ""
     } = metadata || {};
     const { name: shopName } = shop;
-    const { balance } = state;
-    const balanceKeyMap = {
-      gift_card_balance: "rechargeable",
-      point_card_balance: "piont",
-      voucher_count: "voucher",
-      discount_card_count: "discount"
+    const { balance = [] } = state;
+    const balanceItem = balance.find((bi) => bi.wallet_id == item.wallet_id) || DEFAULT_BALANCE;
+    const _balanceKeyMap = {
+      rechargeable: "gift_card_balance",
+      point: "point_card_balance",
+      voucher: "voucher_count",
+      discount: "discount_card_count"
     };
-    const cardItems = (showcaseWalletPass || []).map(
-      (key) => {
-        var _a3;
-        const balanceKey = (_a3 = Object.entries(balanceKeyMap).find(
-          ([_, value2]) => value2 === key
-        )) == null ? void 0 : _a3[0];
-        let value = balanceKey ? balance[balanceKey] || 0 : 0;
-        if (balanceKey === "voucher_count") {
-          value += balance.good_pass_count;
-        }
-        return {
-          key,
-          label: key,
-          hidden: false,
-          value
-        };
-      }
-    );
+    const cardItems = showcaseWalletPassNew.map((showCaseItem) => {
+      const balanceKey = _balanceKeyMap[showCaseItem.type];
+      let value = balanceKey ? balanceItem[balanceKey] || 0 : 0;
+      return {
+        ...showCaseItem,
+        value
+      };
+    });
     const cardProps = {
       // 先应用默认配置
       ...import_types.DEFAULT_CARD_CONFIG,
       // 再应用globalState作为兜底
       ...globalState,
       // 最后应用API返回的数据，这些拥有最高优先级
+      id: wallet.id,
       iconImg: icon,
       symbol,
       cardNo: code,
       walletName: getLocalizedName(name, (_a2 = dvaStore == null ? void 0 : dvaStore.core) == null ? void 0 : _a2.translateLocale),
       shopName,
-      codeType: barcodetype,
-      items: cardItems,
+      // codeType: barcodetype,
+      items: cardItems.slice(0, 4),
       customBackgroundImage: coverImage,
       isLogin: isUserLoggedIn
       // 添加登录状态

package/lib/components/walletList/serve.d.ts

@@ -10,6 +10,10 @@ export declare const getWalletList: () => Promise<WalletPass[]>;
  * @returns
  */
 export declare const getWalletBalance: () => Promise<WalletBalance | null>;
+/**
+ * 批量获取钱包余额信息
+ */
+export declare const batchGetWalletBalance: (walletIds: string[]) => Promise<Record<string, WalletBalance> | null>;
 /**
  * @title: 获取钱包店铺列表
  * @description:

package/lib/components/walletList/serve.js

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/walletList/serve.ts
 var serve_exports = {};
 __export(serve_exports, {
+  batchGetWalletBalance: () => batchGetWalletBalance,
   getWalletBalance: () => getWalletBalance,
   getWalletList: () => getWalletList,
   getWalletShopList: () => getWalletShopList
@@ -41,6 +42,16 @@ var getWalletBalance = async () => {
     return null;
   }
 };
+var batchGetWalletBalance = async (walletIds) => {
+  try {
+    const { data } = await import_utils.request.getRequest().get("/h5/wallet/wallet-pass/balance/batch", {
+      wallet_id: walletIds
+    });
+    return data || {};
+  } catch (error) {
+    return {};
+  }
+};
 var getWalletShopList = async (params) => {
   try {
     const { data } = await import_utils.request.getRequest().get("/h5/wallet/shop/list", params || {}, {
@@ -54,6 +65,7 @@ var getWalletShopList = async (params) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  batchGetWalletBalance,
   getWalletBalance,
   getWalletList,
   getWalletShopList

package/lib/components/walletList/types/index.d.ts

@@ -6,14 +6,18 @@ export interface MultiLanguageName {
     en: string;
     [key: string]: string;
 }
+declare type WalletPassType = 'rechargeable' | 'point' | 'voucher' | 'discount';
 export interface WalletMetadata {
     name: MultiLanguageName;
     welcomeText?: string | MultiLanguageName;
     customerName?: string;
     coverImage?: string;
     icon?: string;
-    barcodetype: 'barCode' | 'orCode';
-    showcaseWalletPass?: ('rechargeable' | 'piont' | 'voucher' | 'discount')[];
+    showcaseWalletPassNew?: Array<{
+        type: WalletPassType;
+        custom_title?: string | MultiLanguageName;
+        display?: 0 | 1;
+    }>;
 }
 export interface Shop {
     id: number;
@@ -56,15 +60,10 @@ export interface WalletBalance {
     voucher_count: number;
     discount_card_count: number;
 }
-export interface WalletBalanceItem {
-    key: string;
-    label: string;
-    value: number;
-}
 export interface WalletCardItem {
-    key: string;
-    label: string;
-    hidden: boolean;
+    type: WalletPassType;
+    custom_title?: string | MultiLanguageName;
+    display: 0 | 1;
     value?: number;
 }
 export interface State {
@@ -106,7 +105,7 @@ export interface WalletListProps {
         platform?: 'pc' | 'h5' | 'ipad';
         mode?: 'dark' | 'light';
         cardStyle?: 'normal' | 'full';
-        codeType?: 'barCode' | 'orCode';
+        codeType?: 'barCode' | 'qrCode';
         codeDirection?: 'bottom' | 'top';
         shopName?: boolean;
         showWalletName?: boolean;
@@ -131,7 +130,7 @@ export interface WalletCardProps {
     platform?: 'pc' | 'h5' | 'ipad';
     mode?: 'dark' | 'light';
     cardStyle?: 'normal' | 'full';
-    codeType?: 'barCode' | 'orCode';
+    codeType?: 'barCode' | 'qrCode';
     codeDirection?: 'bottom' | 'top';
     shopName?: boolean;
     showIcon?: boolean;
@@ -192,3 +191,4 @@ export interface CarouselSettings {
         };
     }>;
 }
+export {};

package/lib/components/workSpaceList/components/Modal/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Modal as AntModal, ModalFuncProps as AntModalFuncProps, ModalProps as AntModalProps } from 'antd';
 import './index.less';
 interface ModalProps extends AntModalProps {

package/lib/hooks/usePaymentLogger.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface LogData {
     key: string;
     value: any;

package/lib/index.d.ts

@@ -23,7 +23,6 @@ export { default as EftposPay } from './components/eftposPay';
 export { default as ToCPay } from './components/pay/toC';
 export { default as ToBPay } from './components/pay/toB';
 export { default as Eftpos } from './components/eftpos';
-export { default as Wallet } from './components/wallet';
 export { default as WalletList } from './components/walletList';
 export { default as BookingDashboard } from './components/booking/dashboard';
 export { default as PisellSelectCustomerModal } from './components/pisellSelectCustomerModal';
@@ -63,7 +62,13 @@ export { default as SkuCard } from './plus/productSelect/ProductCard/SkuCard';
 export { default as PinModal } from './components/pinModal';
 export { default as PinVerifyModal } from './components/pinVerifyModal';
 export { ResponsiveList as SkuList } from './components/list';
+export { OAuthConfig, SaaSAdminAuth, OrgAdminAuth, CustomerAuth, CustomerOAuthConfig, DeviceAuth, POSOperatorAuth, OnlineShopAuth, SaaSManagermentAuth } from './components/authentication/admin';
+export type { SaaSAdminAuthProps, OrgAdminAuthProps, DeviceAuthProps, POSOperatorAuthProps, CustomerOAuthConfigProps } from './components/authentication/admin';
 export { default as ContactInfo } from './plus/contactInfo';
 export { default as ContactInfoModal } from './plus/contactInfoModal';
 export { default as SelectHolder } from './plus/selectHolder';
 export { default as HolderList } from './plus/selectHolder/components/HolderList';
+export { Login2, Register2, AuthModal } from './pro/Login2.0';
+export { default as WalletEditor } from './plus/walletEditor';
+export { default as WalletPassGallery } from './plus/walletPassGallery';
+export { default as WalletPassDetail } from './plus/walletPassGallery/components/passDetail';

package/lib/index.js

@@ -31,6 +31,7 @@ var src_exports = {};
 __export(src_exports, {
   AppointmentBooking: () => import_appointmentBooking.default,
   AppointmentDeposit: () => import_deposit2.default,
+  AuthModal: () => import_Login2.AuthModal,
   Booking: () => import_booking.default,
   BookingAddons: () => import_addons.default,
   BookingContacts: () => import_contacts.default,
@@ -48,6 +49,9 @@ __export(src_exports, {
   ComprehensiveSearch: () => import_comprehensiveSearch.default,
   ContactInfo: () => import_contactInfo.default,
   ContactInfoModal: () => import_contactInfoModal.default,
+  CustomerAuth: () => import_admin.CustomerAuth,
+  CustomerOAuthConfig: () => import_admin.CustomerOAuthConfig,
+  DeviceAuth: () => import_admin.DeviceAuth,
   EditBookingModal: () => import_editBookingModal.default,
   Eftpos: () => import_eftpos.default,
   EftposPay: () => import_eftposPay.default,
@@ -65,7 +69,12 @@ __export(src_exports, {
   EventTimeResourceSelector: () => import_timeResourceSelector.default,
   HolderList: () => import_HolderList.default,
   Login: () => import_login.default,
+  Login2: () => import_Login2.Login2,
   NoteModal: () => import_noteModal.default,
+  OAuthConfig: () => import_admin.OAuthConfig,
+  OnlineShopAuth: () => import_admin.OnlineShopAuth,
+  OrgAdminAuth: () => import_admin.OrgAdminAuth,
+  POSOperatorAuth: () => import_admin.POSOperatorAuth,
   PinModal: () => import_pinModal.default,
   PinVerifyModal: () => import_pinVerifyModal.default,
   PisellSelectCustomerModal: () => import_pisellSelectCustomerModal.default,
@@ -76,7 +85,10 @@ __export(src_exports, {
   ProPriceRadio: () => import_pisellPriceRadio.default,
   ProSkuDetailModal: () => import_skuDetailModal.default,
   ProductExtension: () => import_productExtension.default,
+  Register2: () => import_Login2.Register2,
   RuleSetting: () => import_ruleSetting.default,
+  SaaSAdminAuth: () => import_admin.SaaSAdminAuth,
+  SaaSManagermentAuth: () => import_admin.SaaSManagermentAuth,
   SaasCreateOrganization: () => import_saasCreateOrganization.default,
   SaasLogin: () => import_saasLogin.default,
   SaasRegister: () => import_saasRegister.default,
@@ -93,8 +105,10 @@ __export(src_exports, {
   ToCPay: () => import_toC.default,
   VerticalAddService: () => import_addServiceVariant.default,
   VerticalClient: () => import_clientVariant.VerticalClient,
-  Wallet: () => import_wallet.default,
+  WalletEditor: () => import_walletEditor.default,
   WalletList: () => import_walletList.default,
+  WalletPassDetail: () => import_passDetail.default,
+  WalletPassGallery: () => import_walletPassGallery.default,
   WorkspaceList: () => import_workSpaceList.default,
   WorkspaceListDetail: () => import_workSpaceListDetail.default
 });
@@ -126,7 +140,6 @@ var import_eftposPay = __toESM(require("./components/eftposPay"));
 var import_toC = __toESM(require("./components/pay/toC"));
 var import_toB = __toESM(require("./components/pay/toB"));
 var import_eftpos = __toESM(require("./components/eftpos"));
-var import_wallet = __toESM(require("./components/wallet"));
 var import_walletList = __toESM(require("./components/walletList"));
 var import_dashboard = __toESM(require("./components/booking/dashboard"));
 var import_pisellSelectCustomerModal = __toESM(require("./components/pisellSelectCustomerModal"));
@@ -166,16 +179,22 @@ var import_SkuCard = __toESM(require("./plus/productSelect/ProductCard/SkuCard")
 var import_pinModal = __toESM(require("./components/pinModal"));
 var import_pinVerifyModal = __toESM(require("./components/pinVerifyModal"));
 var import_list = require("./components/list");
+var import_admin = require("./components/authentication/admin");
 var import_contactInfo = __toESM(require("./plus/contactInfo"));
 var import_contactInfoModal = __toESM(require("./plus/contactInfoModal"));
 var import_selectHolder2 = __toESM(require("./plus/selectHolder"));
 var import_HolderList = __toESM(require("./plus/selectHolder/components/HolderList"));
+var import_Login2 = require("./pro/Login2.0");
+var import_walletEditor = __toESM(require("./plus/walletEditor"));
+var import_walletPassGallery = __toESM(require("./plus/walletPassGallery"));
+var import_passDetail = __toESM(require("./plus/walletPassGallery/components/passDetail"));
 import_dayjs.default.extend(import_weekday.default);
 import_dayjs.default.extend(import_localeData.default);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppointmentBooking,
   AppointmentDeposit,
+  AuthModal,
   Booking,
   BookingAddons,
   BookingContacts,
@@ -193,6 +212,9 @@ import_dayjs.default.extend(import_localeData.default);
   ComprehensiveSearch,
   ContactInfo,
   ContactInfoModal,
+  CustomerAuth,
+  CustomerOAuthConfig,
+  DeviceAuth,
   EditBookingModal,
   Eftpos,
   EftposPay,
@@ -210,7 +232,12 @@ import_dayjs.default.extend(import_localeData.default);
   EventTimeResourceSelector,
   HolderList,
   Login,
+  Login2,
   NoteModal,
+  OAuthConfig,
+  OnlineShopAuth,
+  OrgAdminAuth,
+  POSOperatorAuth,
   PinModal,
   PinVerifyModal,
   PisellSelectCustomerModal,
@@ -221,7 +248,10 @@ import_dayjs.default.extend(import_localeData.default);
   ProPriceRadio,
   ProSkuDetailModal,
   ProductExtension,
+  Register2,
   RuleSetting,
+  SaaSAdminAuth,
+  SaaSManagermentAuth,
   SaasCreateOrganization,
   SaasLogin,
   SaasRegister,
@@ -238,8 +268,10 @@ import_dayjs.default.extend(import_localeData.default);
   ToCPay,
   VerticalAddService,
   VerticalClient,
-  Wallet,
+  WalletEditor,
   WalletList,
+  WalletPassDetail,
+  WalletPassGallery,
   WorkspaceList,
   WorkspaceListDetail
 });

package/lib/plus/clientName/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 import { IClientNameProps } from './type';
 declare const ClientName: ({ className, dataSource, style }: IClientNameProps) => JSX.Element | null;

package/lib/plus/productSelect/CategoryTabs/index.d.ts

@@ -7,11 +7,13 @@ declare type TabItem = {
     icon?: React.ReactNode;
 };
 interface IProps {
+    className?: string;
     items: TabItem[];
     activeKey: string;
     onChange: (key: string) => void;
     loading?: boolean;
     skeleton?: React.ReactNode;
+    style?: React.CSSProperties;
 }
 declare const CategoryTabs: React.ForwardRefExoticComponent<IProps & React.RefAttributes<unknown>>;
 export default CategoryTabs;

package/lib/plus/productSelect/CategoryTabs/index.js

@@ -40,7 +40,15 @@ var import_TabsStructure2 = require("../components/TabsStructure/TabsStructure.l
 var import_CategorySkeleton = __toESM(require("./CategorySkeleton"));
 var import__ = require("../index");
 var CategoryTabs = (0, import_react.forwardRef)((props, ref) => {
-  const { items, activeKey, onChange, loading = false, skeleton } = props;
+  const {
+    className,
+    items,
+    activeKey,
+    onChange,
+    loading = false,
+    skeleton,
+    style
+  } = props;
   const railRef = (0, import_react.useRef)(null);
   const [isAtStart, setIsAtStart] = (0, import_react.useState)(true);
   const [isAtEnd, setIsAtEnd] = (0, import_react.useState)(false);
@@ -100,83 +108,90 @@ var CategoryTabs = (0, import_react.forwardRef)((props, ref) => {
   if (loading && skeleton) {
     return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, skeleton);
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_IntersectionObserver.default, null, items.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__tabs-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
-    import_TabsStructure.TabsStructure,
+  return /* @__PURE__ */ import_react.default.createElement(import_IntersectionObserver.default, null, items.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+    "div",
     {
-      variant: "pill",
-      backgroundVariant: "onPage",
-      selectedTab: activeKey
+      className: `${import__.PREFIX}__tabs-wrapper ${className || ""}`,
+      style
     },
-    needsScrollButtons && /* @__PURE__ */ import_react.default.createElement(
-      import_TabsStructure.TabsStructure.ChevronButton,
+    /* @__PURE__ */ import_react.default.createElement(
+      import_TabsStructure.TabsStructure,
       {
-        direction: "prev",
-        disabled: isAtStart,
-        onClick: scrollLeft,
-        style: { marginRight: "8px" }
-      }
-    ),
-    /* @__PURE__ */ import_react.default.createElement(import_TabsStructure.TabsStructure.Rail, { ref: railRef }, /* @__PURE__ */ import_react.default.createElement(
-      import_IntersectionObserver.IntersectionTrigger,
-      {
-        onShow: () => {
-          console.log("is start");
-          setIsAtStart(true);
-        },
-        onHide: () => {
-          console.log("is start false");
-          setIsAtStart(false);
-        },
-        style: {
-          width: 1,
-          height: 1,
-          flexShrink: 0,
-          background: "rgba(0,0,0,0)",
-          transform: "translateX(1px)"
-        },
-        className: "visibility-detector start-detector"
-      }
-    ), /* @__PURE__ */ import_react.default.createElement(import_TabsStructure.TabsStructure.SelectionIndicator, { ...selectionIndicatorProps }), /* @__PURE__ */ import_react.default.createElement(import_TabsStructure.TabsStructure.ListContainer, { ...listContainerProps }, items.map((item) => /* @__PURE__ */ import_react.default.createElement(
-      import_TabsStructure.TabsStructure.Item,
-      {
-        key: item.key,
-        tabId: item.key,
-        "aria-selected": activeKey === item.key,
-        onClick: () => onChange(item.key),
-        className: "tab-item"
+        variant: "pill",
+        backgroundVariant: "onPage",
+        selectedTab: activeKey
       },
-      item.label
-    ))), /* @__PURE__ */ import_react.default.createElement(
-      import_IntersectionObserver.IntersectionTrigger,
-      {
-        className: "visibility-detector end-detector",
-        onShow: () => {
-          console.log("is end");
-          setIsAtEnd(true);
-        },
-        onHide: () => {
-          console.log("is end false");
-          setIsAtEnd(false);
+      needsScrollButtons && /* @__PURE__ */ import_react.default.createElement(
+        import_TabsStructure.TabsStructure.ChevronButton,
+        {
+          direction: "prev",
+          disabled: isAtStart,
+          onClick: scrollLeft,
+          style: { marginRight: "8px" }
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(import_TabsStructure.TabsStructure.Rail, { ref: railRef }, /* @__PURE__ */ import_react.default.createElement(
+        import_IntersectionObserver.IntersectionTrigger,
+        {
+          onShow: () => {
+            console.log("is start");
+            setIsAtStart(true);
+          },
+          onHide: () => {
+            console.log("is start false");
+            setIsAtStart(false);
+          },
+          style: {
+            width: 1,
+            height: 1,
+            flexShrink: 0,
+            background: "rgba(0,0,0,0)",
+            transform: "translateX(1px)"
+          },
+          className: "visibility-detector start-detector"
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(import_TabsStructure.TabsStructure.SelectionIndicator, { ...selectionIndicatorProps }), /* @__PURE__ */ import_react.default.createElement(import_TabsStructure.TabsStructure.ListContainer, { ...listContainerProps }, items.map((item) => /* @__PURE__ */ import_react.default.createElement(
+        import_TabsStructure.TabsStructure.Item,
+        {
+          key: item.key,
+          tabId: item.key,
+          "aria-selected": activeKey === item.key,
+          onClick: () => onChange(item.key),
+          className: "tab-item"
         },
-        style: {
-          width: 1,
-          height: 1,
-          flexShrink: 0,
-          background: "rgba(0,0,0,0)",
-          transform: "translateX(-1px)"
+        item.label
+      ))), /* @__PURE__ */ import_react.default.createElement(
+        import_IntersectionObserver.IntersectionTrigger,
+        {
+          className: "visibility-detector end-detector",
+          onShow: () => {
+            console.log("is end");
+            setIsAtEnd(true);
+          },
+          onHide: () => {
+            console.log("is end false");
+            setIsAtEnd(false);
+          },
+          style: {
+            width: 1,
+            height: 1,
+            flexShrink: 0,
+            background: "rgba(0,0,0,0)",
+            transform: "translateX(-1px)"
+          }
         }
-      }
-    )),
-    needsScrollButtons && /* @__PURE__ */ import_react.default.createElement(
-      import_TabsStructure.TabsStructure.ChevronButton,
-      {
-        direction: "next",
-        disabled: isAtEnd,
-        onClick: scrollRight,
-        style: { marginLeft: "8px" }
-      }
+      )),
+      needsScrollButtons && /* @__PURE__ */ import_react.default.createElement(
+        import_TabsStructure.TabsStructure.ChevronButton,
+        {
+          direction: "next",
+          disabled: isAtEnd,
+          onClick: scrollRight,
+          style: { marginLeft: "8px" }
+        }
+      )
     )
-  )));
+  ));
 });
 var CategoryTabs_default = CategoryTabs;
 // Annotate the CommonJS export names for ESM import in node: