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/pro/Selector/demo.tsx
var demo_exports = {};
__export(demo_exports, {
  default: () => demo_default
});
module.exports = __toCommonJS(demo_exports);
var import_react = __toESM(require("react"));
var import_index = __toESM(require("./index"));
var import_icons = require("@ant-design/icons");
var import_antd = require("antd");
var { Title, Paragraph, Text } = import_antd.Typography;
var SelectorDemo = () => {
  const [presetDefault1, setPresetDefault1] = (0, import_react.useState)(1);
  const [presetDefault2, setPresetDefault2] = (0, import_react.useState)(1);
  const [presetDefault3, setPresetDefault3] = (0, import_react.useState)(1);
  const [presetDefault4, setPresetDefault4] = (0, import_react.useState)(1);
  const [presetCard1, setPresetCard1] = (0, import_react.useState)(1);
  const [presetCard2, setPresetCard2] = (0, import_react.useState)(1);
  const [presetCard3, setPresetCard3] = (0, import_react.useState)(1);
  const [presetCard4, setPresetCard4] = (0, import_react.useState)(1);
  const [presetCard5, setPresetCard5] = (0, import_react.useState)(1);
  const [presetMedia1, setPresetMedia1] = (0, import_react.useState)([1]);
  const [presetMedia2, setPresetMedia2] = (0, import_react.useState)([1]);
  const [comparePreset, setComparePreset] = (0, import_react.useState)(1);
  const [compareManual, setCompareManual] = (0, import_react.useState)(1);
  const [productSpec, setProductSpec] = (0, import_react.useState)({
    value: 2,
    quantity: 1
  });
  const [paymentMethod, setPaymentMethod] = (0, import_react.useState)("alipay");
  const [serviceOptions, setServiceOptions] = (0, import_react.useState)([1, 2]);
  const [width, setWidth] = (0, import_react.useState)("100%");
  const simpleDataSource = [
    { id: 1, title: "选项A" },
    { id: 2, title: "选项B" },
    { id: 3, title: "选项C" },
    { id: 4, title: "选项D" },
    { id: 5, title: "选项E" },
    { id: 6, title: "选项F" }
  ];
  const cardDataSource = [
    {
      id: 1,
      title: "基础版",
      price: "¥99/月",
      desc: "适合个人用户",
      features: ["5GB 存储", "基础功能"]
    },
    {
      id: 2,
      title: "专业版",
      price: "¥299/月",
      desc: "适合小团队",
      features: ["50GB 存储", "高级功能"],
      ruleConfig: { min: 6, max: 5 }
    },
    {
      id: 3,
      title: "企业版",
      price: "¥999/月",
      desc: "适合大型企业",
      features: ["无限存储", "全部功能"]
    }
  ];
  const mediaDataSource = [
    {
      id: 1,
      label: "风景",
      value: "landscape",
      cover: "https://picsum.photos/seed/landscape/300/200"
    },
    {
      id: 2,
      label: "人物",
      value: "portrait",
      cover: "https://picsum.photos/seed/portrait/300/200"
    },
    {
      id: 3,
      label: "建筑",
      value: "architecture",
      cover: "https://picsum.photos/seed/architecture/300/200"
    },
    {
      id: 4,
      label: "美食",
      value: "food",
      cover: "https://picsum.photos/seed/food/300/200"
    }
  ];
  const productSpecs = [
    {
      id: 1,
      title: "128GB 黑色",
      price: "¥5999",
      stock: 156,
      ruleConfig: { min: 1, max: 3 }
    },
    {
      id: 2,
      title: "256GB 白色",
      price: "¥6999",
      stock: 89,
      ruleConfig: { min: 1, max: 5 }
    },
    {
      id: 3,
      title: "512GB 蓝色",
      price: "¥7999",
      stock: 23,
      ruleConfig: { min: 1, max: 2 }
    }
  ];
  const paymentMethods = [
    { id: 1, value: "alipay", title: "支付宝", icon: "💳" },
    { id: 2, value: "wechat", title: "微信支付", icon: "💚" },
    { id: 3, value: "card", title: "银行卡", icon: "🏦" }
  ];
  const serviceOptionsList = [
    { id: 1, title: "7天无理由退换", price: "免费" },
    { id: 2, title: "延保服务", price: "+¥199" },
    { id: 3, title: "碎屏险", price: "+¥299" },
    { id: 4, title: "上门安装", price: "+¥99" }
  ];
  const renderValueDisplay = (value) => /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      style: {
        marginTop: 12,
        padding: 12,
        background: "#f0f2f5",
        borderRadius: 6,
        fontSize: 13
      }
    },
    /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "当前值："),
    /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: "4px 0 0", fontSize: 12 } }, JSON.stringify(value, null, 2))
  );
  const DemoSection = ({ title, description, children }) => /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 48 } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(Title, { level: 4, style: { marginBottom: 4 } }, title), /* @__PURE__ */ import_react.default.createElement(Paragraph, { type: "secondary", style: { marginBottom: 0, fontSize: 14 } }, description)), children);
  return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: width + "px", margin: "0 auto" } }, /* @__PURE__ */ import_react.default.createElement("input", { type: "text", value: width, onChange: (e) => setWidth(e.target.value) }), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 48 } }, /* @__PURE__ */ import_react.default.createElement(Title, { level: 1 }, "Selector 组件 - Preset 能力演示"), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 16, color: "#666" } }, "通过 ", /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "preset"), " ", "属性快速配置选择器样式，无需手动设置复杂的 grid 和 indicator 配置。", /* @__PURE__ */ import_react.default.createElement("br", null), "每个 variant 支持多种预设布局，让低代码配置更加简单直观。")), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
    Title,
    {
      level: 2,
      style: { borderLeft: "4px solid #1890ff", paddingLeft: 16 }
    },
    "一、Preset 快速入门"
  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "使用 ", /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "preset"), " 属性即可快速应用预设样式，无需关心底层的 grid 布局配置。 只需指定 ", /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "variant"), " 值（'1' | '2' | '3' | '4' | '5'），系统自动应用对应的布局和样式。"), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "✨ 快速开始 - 一行配置搞定",
      description: "使用 preset={{ variant: '1' }} 即可应用预设布局，无需任何 grid 配置"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: simpleDataSource,
        mode: "multiple",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: presetDefault1,
        onChange: setPresetDefault1,
        variant: "select",
        preset: { variant: "1" }
      }
    ),
    renderValueDisplay(presetDefault1),
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        style: {
          marginTop: 12,
          padding: 12,
          background: "#e6f7ff",
          borderRadius: 6
        }
      },
      /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "💡 代码示例："),
      /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: "8px 0 0", fontSize: 12, color: "#1890ff" } }, `<Selector
  preset={{ variant: '1' }}  // 仅需这一行配置
  variant="default"
  // ... 其他基础配置
/>`)
    )
  )), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
    Title,
    {
      level: 2,
      style: { borderLeft: "4px solid #52c41a", paddingLeft: 16 }
    },
    "二、Default Variant - 预设样式展示"
  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "Default 变体支持 4 种预设布局（variant: '1' | '2' | '3' | '4'）， 适用于常规的选项选择场景。"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 32 } }, /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 1 - 单列布局",
      description: "preset={{ variant: '1' }} → 100% 宽度，垂直排列（适合长文本选项）"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: simpleDataSource,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: presetDefault1,
        onChange: setPresetDefault1,
        variant: "default",
        preset: { variant: "1" }
      }
    ),
    renderValueDisplay(presetDefault1)
  ), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 2 - 自适应宽度",
      description: "preset={{ variant: '2' }} → Flex 布局，选项宽度自动适应内容"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: simpleDataSource,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: presetDefault2,
        onChange: setPresetDefault2,
        variant: "default",
        preset: { variant: "2" }
      }
    ),
    renderValueDisplay(presetDefault2)
  ), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 3 - 单列布局（变体）",
      description: "preset={{ variant: '3' }} → 100% 宽度，另一种单列布局样式"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: simpleDataSource,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: presetDefault3,
        onChange: setPresetDefault3,
        variant: "default",
        preset: { variant: "3" },
        renderItem: (option) => {
          return /* @__PURE__ */ import_react.default.createElement(import_index.default.Item, { ...option }, /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                height: 60,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: "#dfdfdf"
              }
            },
            "container"
          ));
        }
      }
    ),
    renderValueDisplay(presetDefault3)
  ), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 4 - 自适应宽度（变体）",
      description: "preset={{ variant: '4' }} → 另一种 Flex 自适应布局"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: simpleDataSource,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: presetDefault4,
        onChange: setPresetDefault4,
        variant: "default",
        preset: { variant: "4" },
        renderItem: (option) => {
          return /* @__PURE__ */ import_react.default.createElement(import_index.default.Item, { ...option }, /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                height: 60,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: "#dfdfdf"
              }
            },
            "container".repeat(1 + Math.floor(Math.random() * 10))
          ));
        }
      }
    ),
    renderValueDisplay(presetDefault4)
  ))), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
    Title,
    {
      level: 2,
      style: { borderLeft: "4px solid #fa8c16", paddingLeft: 16 }
    },
    "三、Card Variant - 预设样式展示"
  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "Card 变体支持 5 种预设布局（variant: '1' | '2' | '3' | '4' | '5'）， 适用于卡片式、套餐式的选项展示。"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 32 } }, /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 1 - 固定宽度网格（209px）",
      description: "preset={{ variant: '1' }} → CSS Grid 布局，每列固定 209px"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: cardDataSource,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: presetCard1,
        onChange: setPresetCard1,
        variant: "card",
        preset: { variant: "1" }
      }
    ),
    renderValueDisplay(presetCard1)
  ), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 2 - 固定宽度网格 + Filled 指示器",
      description: "preset={{ variant: '2' }} → 209px Grid 布局，自动应用 filled 风格的 indicator"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: cardDataSource,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: presetCard2,
        onChange: setPresetCard2,
        variant: "card",
        preset: { variant: "2" }
      }
    ),
    renderValueDisplay(presetCard2)
  ), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 3 - 单列卡片布局",
      description: "preset={{ variant: '3' }} → 100% 宽度，适合横向卡片"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: cardDataSource,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: presetCard3,
        onChange: setPresetCard3,
        variant: "card",
        preset: { variant: "2" },
        itemProps: {
          layout: "vertical",
          indicatorPosition: "right",
          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 16, fontWeight: 600 } }, option.dataSource.title), /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                color: "#ff4d4f",
                fontSize: 18,
                margin: "4px 0"
              }
            },
            option.dataSource.price
          ), /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#999", fontSize: 13 } }, option.dataSource.desc))
        }
      }
    ),
    renderValueDisplay(presetCard3)
  ), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 4 - 大尺寸网格（325px）",
      description: "preset={{ variant: '4' }} → CSS Grid 布局，每列固定 325px（适合内容丰富的卡片）"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: cardDataSource,
        mode: "single",
        valueType: "object",
        fieldNames: { value: "id", label: "title" },
        value: presetCard4,
        onChange: setPresetCard4,
        variant: "card",
        preset: { variant: "4" },
        itemProps: {
          renderContent: (option) => {
            var _a;
            return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  fontSize: 20,
                  fontWeight: 600,
                  marginBottom: 12
                }
              },
              option.dataSource.title
            ), /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  color: "#ff4d4f",
                  fontSize: 24,
                  marginBottom: 12
                }
              },
              option.dataSource.price
            ), /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: { color: "#666", fontSize: 14, marginBottom: 16 }
              },
              option.dataSource.desc
            ), /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: { fontSize: 13, color: "#333", lineHeight: 1.8 }
              },
              (_a = option.dataSource.features) == null ? void 0 : _a.map(
                (f, i) => /* @__PURE__ */ import_react.default.createElement("div", { key: i }, "✓ ", f)
              )
            ));
          }
        }
      }
    ),
    renderValueDisplay(presetCard4)
  ), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 5 - 单列大卡片",
      description: "preset={{ variant: '5' }} → 100% 宽度，适合详细信息展示"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: cardDataSource,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: presetCard5,
        onChange: setPresetCard5,
        variant: "card",
        preset: { variant: "5" },
        itemProps: {
          layout: "horizontal",
          indicatorPosition: "right",
          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: { display: "flex", alignItems: "center", gap: 16 }
            },
            /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  fontSize: 18,
                  fontWeight: 600,
                  marginBottom: 4
                }
              },
              option.dataSource.title
            ), /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#999", fontSize: 14 } }, option.dataSource.desc)),
            /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  color: "#ff4d4f",
                  fontSize: 24,
                  fontWeight: 600
                }
              },
              option.dataSource.price
            )
          ))
        }
      }
    ),
    renderValueDisplay(presetCard5)
  ))), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
    Title,
    {
      level: 2,
      style: { borderLeft: "4px solid #722ed1", paddingLeft: 16 }
    },
    "四、Media Variant - 预设样式展示"
  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "Media 变体支持 2 种预设布局（variant: '1' | '2'）， 适用于图片、视频等媒体内容的选择场景。自动应用 filled 风格的指示器。"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 32 } }, /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 1 - 自适应媒体网格",
      description: "preset={{ variant: '1' }} → Flex 布局，自动应用 filled 指示器"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: mediaDataSource,
        mode: "multiple",
        valueType: "primitive",
        fieldNames: { value: "value", label: "label", cover: "cover" },
        value: presetMedia1,
        onChange: setPresetMedia1,
        variant: "media",
        preset: { variant: "1" }
      }
    ),
    renderValueDisplay(presetMedia1)
  ), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "Preset 2 - 自适应媒体网格（变体）",
      description: "preset={{ variant: '2' }} → 另一种 Flex 媒体布局"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: mediaDataSource,
        mode: "single",
        valueType: "object",
        fieldNames: { value: "value", label: "label", cover: "cover" },
        value: presetMedia2,
        onChange: setPresetMedia2,
        variant: "media",
        preset: { variant: "2" }
      }
    ),
    renderValueDisplay(presetMedia2)
  ))), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
    Title,
    {
      level: 2,
      style: { borderLeft: "4px solid #eb2f96", paddingLeft: 16 }
    },
    "五、Preset vs 手动配置"
  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "对比使用 preset 和手动配置 grid 的区别，展示 preset 的便捷性。"), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "使用 Preset - 简洁配置",
      description: "只需一行 preset 配置，自动应用布局和样式"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: cardDataSource,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: comparePreset,
        onChange: setComparePreset,
        variant: "card",
        preset: { variant: "1" },
        itemProps: {
          layout: "vertical",
          indicatorPosition: "topRight",
          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 16, fontWeight: 600 } }, option.dataSource.title), /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: { color: "#ff4d4f", fontSize: 18, margin: "8px 0" }
            },
            option.dataSource.price
          ))
        }
      }
    ),
    renderValueDisplay(comparePreset),
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        style: {
          marginTop: 12,
          padding: 12,
          background: "#f6ffed",
          borderRadius: 6
        }
      },
      /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, style: { color: "#52c41a" } }, "✓ 使用 Preset 的代码："),
      /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: "8px 0 0", fontSize: 12 } }, `<Selector
  preset={{ variant: '1' }}  // ✨ 仅需这一行
  variant="card"
  // ... 其他配置
/>`)
    )
  ), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, null), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "手动配置 Grid - 复杂配置",
      description: "需要手动配置 grid 的 layoutType、baseWidth 等多个参数"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        dataSource: cardDataSource,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: compareManual,
        onChange: setCompareManual,
        variant: "card",
        layout: {
          containerStyle: {
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(min(209px, 100%), 1fr))"
          }
        },
        itemProps: {
          layout: "vertical",
          indicatorPosition: "topRight",
          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 16, fontWeight: 600 } }, option.dataSource.title), /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: { color: "#ff4d4f", fontSize: 18, margin: "8px 0" }
            },
            option.dataSource.price
          ))
        }
      }
    ),
    renderValueDisplay(compareManual),
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        style: {
          marginTop: 12,
          padding: 12,
          background: "#fff7e6",
          borderRadius: 6
        }
      },
      /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, style: { color: "#fa8c16" } }, "⚠ 手动配置的代码："),
      /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: "8px 0 0", fontSize: 12 } }, `<Selector
  grid={{                    // 需要详细配置
    layoutType: 'grid',
    baseWidth: '209px',
    wrap: true,
  }}
  variant="card"
  // ... 其他配置
/>`)
    )
  )), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
    Title,
    {
      level: 2,
      style: { borderLeft: "4px solid #13c2c2", paddingLeft: 16 }
    },
    "六、实际应用场景"
  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "展示 Preset 在真实业务场景中的应用，如电商选规格、支付方式选择等。"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 48 } }, /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "场景1：电商商品规格选择",
      description: "使用 preset={{ variant: '1' }} + card variant，配合数量选择器"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        title: "选择商品规格",
        dataSource: productSpecs,
        mode: "single",
        valueType: "object",
        fieldNames: { value: "id", label: "title" },
        value: productSpec,
        onChange: setProductSpec,
        variant: "card",
        preset: { variant: "1" },
        itemProps: {
          layout: "vertical",
          indicatorPosition: "topRight",
          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: { fontSize: 16, fontWeight: 600, marginBottom: 6 }
            },
            option.dataSource.title
          ), /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                color: "#ff4d4f",
                fontSize: 20,
                fontWeight: 600,
                marginBottom: 6
              }
            },
            option.dataSource.price
          ), /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#999", fontSize: 13 } }, "库存：", option.dataSource.stock, " 件"))
        },
        titleProps: {
          visible: true,
          icon: {
            visible: true,
            icon: /* @__PURE__ */ import_react.default.createElement(import_icons.StarOutlined, { style: { color: "#faad14" } })
          }
        }
      }
    ),
    renderValueDisplay(productSpec)
  ), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "场景2：支付方式选择",
      description: "使用 preset={{ variant: '3' }} + card variant，单列横向布局"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        title: "选择支付方式",
        dataSource: paymentMethods,
        mode: "single",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: paymentMethod,
        onChange: setPaymentMethod,
        variant: "card",
        preset: { variant: "3" },
        itemProps: {
          layout: "horizontal",
          indicatorPosition: "right",
          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                display: "flex",
                alignItems: "center",
                gap: 12,
                flex: 1
              }
            },
            /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 32 } }, option.dataSource.icon),
            /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 16, fontWeight: 500 } }, option.dataSource.title)
          )
        }
      }
    ),
    renderValueDisplay(paymentMethod)
  ), /* @__PURE__ */ import_react.default.createElement(
    DemoSection,
    {
      title: "场景3：增值服务选择",
      description: "使用 preset={{ variant: '3' }} + 多选模式，选择多个增值服务"
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.default,
      {
        title: "增值服务（可选）",
        dataSource: serviceOptionsList,
        mode: "multiple",
        valueType: "primitive",
        fieldNames: { value: "id", label: "title" },
        value: serviceOptions,
        onChange: setServiceOptions,
        variant: "card",
        preset: { variant: "3" },
        ruleConfig: {
          max: 3
        },
        itemProps: {
          layout: "horizontal",
          indicatorPosition: "left",
          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                flex: 1
              }
            },
            /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 15 } }, option.dataSource.title),
            /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  color: "#ff4d4f",
                  fontSize: 15,
                  fontWeight: 600
                }
              },
              option.dataSource.price
            )
          )
        },
        titleProps: {
          visible: true,
          tip: {
            visible: true,
            text: "最多选择3项"
          }
        }
      }
    ),
    renderValueDisplay(serviceOptions)
  ))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement(
    Title,
    {
      level: 2,
      style: { borderLeft: "4px solid #595959", paddingLeft: 16 }
    },
    "七、Preset 使用总结"
  ), /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      style: {
        marginTop: 24,
        padding: 24,
        background: "#fafafa",
        borderRadius: 8
      }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 16 } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, style: { fontSize: 15 } }, "🎯 Preset 的优势："), /* @__PURE__ */ import_react.default.createElement("ul", { style: { marginTop: 8, paddingLeft: 20 } }, /* @__PURE__ */ import_react.default.createElement("li", null, "✓ ", /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "简化配置"), "：无需手动设置复杂的 grid 布局参数"), /* @__PURE__ */ import_react.default.createElement("li", null, "✓ ", /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "快速应用"), "：一行代码即可应用预设样式"), /* @__PURE__ */ import_react.default.createElement("li", null, "✓ ", /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "响应式布局"), "：预设已优化好响应式效果"), /* @__PURE__ */ import_react.default.createElement("li", null, "✓ ", /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "低代码友好"), "：适合在低代码平台中快速配置"))), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: "8px 0" } }), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, style: { fontSize: 15 } }, "📋 支持的 Preset Variant："), /* @__PURE__ */ import_react.default.createElement("ul", { style: { marginTop: 8, paddingLeft: 20 } }, /* @__PURE__ */ import_react.default.createElement("li", null, /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "default"), ": 支持 variant '1', '2', '3', '4'"), /* @__PURE__ */ import_react.default.createElement("li", null, /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "card"), ": 支持 variant '1', '2', '3', '4', '5'"), /* @__PURE__ */ import_react.default.createElement("li", null, /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "media"), ": 支持 variant '1', '2'（自动应用 filled 指示器）"), /* @__PURE__ */ import_react.default.createElement("li", null, /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "select"), ": 仅支持 variant '1'（下拉选择器）"))), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: "8px 0" } }), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, style: { fontSize: 15 } }, "🔧 高级用法："), /* @__PURE__ */ import_react.default.createElement("ul", { style: { marginTop: 8, paddingLeft: 20 } }, /* @__PURE__ */ import_react.default.createElement("li", null, "• Preset 和手动 grid 配置可共存，手动配置优先级更高"), /* @__PURE__ */ import_react.default.createElement("li", null, "• indicatorProps 会根据 preset 自动调整（如 media/card-2 自动应用 filled）"), /* @__PURE__ */ import_react.default.createElement("li", null, "• 可通过 itemProps 进一步定制选项内容的渲染"))))
  )));
};
var demo_default = SelectorDemo;
