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/list/examples/GroupedListExample.tsx
var GroupedListExample_exports = {};
__export(GroupedListExample_exports, {
  default: () => GroupedListExample_default
});
module.exports = __toCommonJS(GroupedListExample_exports);
var import_react = __toESM(require("react"));
var import__ = require("../index");
var GroupedListExample = () => {
  const mockTicketData = [
    {
      id: "1",
      title: "2hrs upgrade Unlimited",
      description: "Adult Day",
      price: 90,
      duration: "2 h",
      ticketType: "all-access",
      category: "Adult Day Pass"
    },
    {
      id: "2",
      title: "2hrs upgrade Unlimited",
      description: "Kid Day",
      price: 90,
      duration: "2 h",
      ticketType: "all-access",
      category: "Kids Day Pass"
    },
    {
      id: "3",
      title: "2hrs upgrade Unlimited",
      description: "Family Package",
      price: 90,
      duration: "2 h",
      ticketType: "all-access",
      category: "Family Pass"
    },
    {
      id: "4",
      title: "Child Ticket - Morning",
      description: "Special price for children",
      price: 45,
      duration: "4 h",
      ticketType: "child",
      category: "Morning Session"
    },
    {
      id: "5",
      title: "Child Ticket - Afternoon",
      description: "Afternoon activities",
      price: 45,
      duration: "4 h",
      ticketType: "child",
      category: "Afternoon Session"
    },
    {
      id: "6",
      title: "Adult Standard",
      description: "Standard adult admission",
      price: 70,
      duration: "6 h",
      ticketType: "adult",
      category: "Standard Admission"
    },
    {
      id: "7",
      title: "Adult Premium",
      description: "Premium experience",
      price: 120,
      duration: "8 h",
      ticketType: "adult",
      category: "Premium Experience"
    },
    {
      id: "8",
      title: "Special Event",
      description: "Limited time offer",
      price: 150,
      duration: "3 h",
      ticketType: "category5",
      category: "Special Event"
    }
  ];
  const tabItems = [
    {
      key: "all-access",
      label: `All-Access Ticket (${mockTicketData.filter((item) => item.ticketType === "all-access").length})`,
      group: "all-access"
    },
    {
      key: "child",
      label: `Child Ticket (${mockTicketData.filter((item) => item.ticketType === "child").length})`,
      group: "child"
    },
    {
      key: "adult",
      label: `Adult Ticket (${mockTicketData.filter((item) => item.ticketType === "adult").length})`,
      group: "adult"
    },
    {
      key: "category5",
      label: `Category 5 (${mockTicketData.filter((item) => item.ticketType === "category5").length})`,
      group: "category5"
    }
  ];
  const [currentData] = (0, import_react.useState)(mockTicketData);
  const [loading] = (0, import_react.useState)(false);
  const renderTicketItem = (item, index) => /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      key: item.id,
      style: {
        background: "#FFF",
        borderRadius: "12px",
        padding: "16px",
        border: "1px solid #E4E7EC",
        boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)",
        height: "160px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between"
      }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { style: {
      height: "60px",
      background: `linear-gradient(135deg, ${item.ticketType === "all-access" ? "#8157D5, #B794F6" : item.ticketType === "child" ? "#F56565, #FC8181" : item.ticketType === "adult" ? "#4299E1, #63B3ED" : "#ED8936, #F6AD55"})`,
      borderRadius: "8px",
      marginBottom: "12px",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: "white",
      fontWeight: "bold",
      fontSize: "18px"
    } }, item.description),
    /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", { style: {
      fontSize: "16px",
      fontWeight: "600",
      margin: "0 0 4px 0",
      color: "#101828"
    } }, item.title), /* @__PURE__ */ import_react.default.createElement("p", { style: {
      fontSize: "14px",
      color: "#667085",
      margin: "0 0 8px 0"
    } }, item.duration), /* @__PURE__ */ import_react.default.createElement("p", { style: {
      fontSize: "18px",
      fontWeight: "700",
      color: "#101828",
      margin: 0
    } }, "A$ ", item.price))
  );
  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "20px", maxWidth: "1200px", margin: "0 auto" } }, /* @__PURE__ */ import_react.default.createElement("h1", { style: { marginBottom: "20px", color: "#101828" } }, "门票分组展示示例"), /* @__PURE__ */ import_react.default.createElement(
    import__.List,
    {
      data: currentData,
      tabData: tabItems,
      tabGroup: "ticketType",
      tabStyle: "anchor",
      displayStyle: "grid",
      layoutDirection: "vertical",
      columns: 2,
      rows: 2,
      columnGap: 16,
      rowGap: 16,
      height: "600px",
      renderItem: renderTicketItem,
      loading,
      emptyConfig: {
        show: true,
        text: "暂无门票数据",
        description: "请稍后再试"
      },
      className: "ticket-list-example"
    }
  ), /* @__PURE__ */ import_react.default.createElement("div", { style: {
    marginTop: "20px",
    padding: "16px",
    background: "#F8F9FA",
    borderRadius: "8px"
  } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "使用说明："), /* @__PURE__ */ import_react.default.createElement("ul", null, /* @__PURE__ */ import_react.default.createElement("li", null, "通过 ", /* @__PURE__ */ import_react.default.createElement("code", null, 'tabGroup="ticketType"'), " 指定使用数据项的 ticketType 字段进行分组"), /* @__PURE__ */ import_react.default.createElement("li", null, "Tab的 group 属性值对应数据项中 ticketType 字段的值"), /* @__PURE__ */ import_react.default.createElement("li", null, "点击不同的标签页可以查看不同分组的门票"), /* @__PURE__ */ import_react.default.createElement("li", null, "数据会根据选择的分组自动过滤"), /* @__PURE__ */ import_react.default.createElement("li", null, "每个标签页显示对应分组的数量"), /* @__PURE__ */ import_react.default.createElement("li", null, "支持所有现有的List组件布局和分页模式"))));
};
var GroupedListExample_default = GroupedListExample;
