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/PisellSteps/PisellSteps.stories.tsx
var PisellSteps_stories_exports = {};
__export(PisellSteps_stories_exports, {
  Clickable: () => Clickable,
  CustomIcon: () => CustomIcon,
  CustomItemGap: () => CustomItemGap,
  CustomMobileBreakpoint: () => CustomMobileBreakpoint,
  CustomProgressDot: () => CustomProgressDot,
  CustomStatus: () => CustomStatus,
  Default: () => Default,
  DisabledStep: () => DisabledStep,
  DisallowClickFinished: () => DisallowClickFinished,
  Dot: () => Dot,
  ErrorStatus: () => ErrorStatus,
  FinishIcon: () => FinishIcon,
  FullFeature: () => FullFeature,
  GridLayout: () => GridLayout,
  HiddenStep: () => HiddenStep,
  InitialIndex: () => InitialIndex,
  InteractionTest: () => InteractionTest,
  LabelVertical: () => LabelVertical,
  Large: () => Large,
  ManySteps: () => ManySteps,
  MobileModeAuto: () => MobileModeAuto,
  MobileModeCurrent: () => MobileModeCurrent,
  MobileModeFull: () => MobileModeFull,
  Navigation: () => Navigation,
  RenderTest: () => RenderTest,
  Responsive: () => Responsive,
  ShoppingFlow: () => ShoppingFlow,
  Small: () => Small,
  Uncontrolled: () => Uncontrolled,
  Vertical: () => Vertical,
  WithSubTitle: () => WithSubTitle,
  default: () => PisellSteps_stories_default
});
module.exports = __toCommonJS(PisellSteps_stories_exports);
var import_test = require("@storybook/test");
var import_react = __toESM(require("react"));
var import_icons = require("@ant-design/icons");
var import_PisellSteps = __toESM(require("./PisellSteps"));
var meta = {
  title: "Components/PisellSteps",
  component: import_PisellSteps.default,
  parameters: {
    layout: "padded",
    docs: {
      description: {
        component: "步骤条组件，用于展示流程进度和引导用户完成操作步骤。"
      }
    }
  },
  tags: ["autodocs"],
  argTypes: {
    type: {
      control: "select",
      options: ["default", "navigation"],
      description: "步骤条类型"
    },
    direction: {
      control: "select",
      options: ["horizontal", "vertical"],
      description: "步骤条方向"
    },
    size: {
      control: "select",
      options: ["small", "default", "large"],
      description: "步骤条尺寸"
    },
    status: {
      control: "select",
      options: ["wait", "process", "finish", "error"],
      description: "当前步骤状态"
    },
    labelPlacement: {
      control: "select",
      options: ["horizontal", "vertical"],
      description: "标签放置位置"
    },
    mobileMode: {
      control: "select",
      options: ["full", "current", "auto"],
      description: "移动端显示模式"
    },
    clickable: {
      control: "boolean",
      description: "是否可点击"
    },
    responsive: {
      control: "boolean",
      description: "是否响应式"
    },
    progressDot: {
      control: "boolean",
      description: "是否使用点状步骤条"
    },
    gridLayout: {
      control: "boolean",
      description: "是否启用栅格布局"
    },
    enableAnchor: {
      control: "boolean",
      description: "是否启用锚链接"
    }
  }
};
var PisellSteps_stories_default = meta;
var Default = {
  args: {
    items: [
      { title: "步骤一", description: "这是第一步的描述" },
      { title: "步骤二", description: "这是第二步的描述" },
      { title: "步骤三", description: "这是第三步的描述" }
    ],
    current: 1
  }
};
var Uncontrolled = {
  args: {
    items: [
      { title: "步骤一" },
      { title: "步骤二" },
      { title: "步骤三" }
    ],
    defaultCurrent: 1,
    clickable: true
  }
};
var Vertical = {
  args: {
    direction: "vertical",
    items: [
      { title: "步骤一", description: "这是第一步的描述" },
      { title: "步骤二", description: "这是第二步的描述" },
      { title: "步骤三", description: "这是第三步的描述" }
    ],
    current: 1
  }
};
var Dot = {
  args: {
    progressDot: true,
    items: [
      { title: "已完成", description: "这是第一步" },
      { title: "进行中", description: "这是第二步" },
      { title: "等待中", description: "这是第三步" }
    ],
    current: 1
  }
};
var CustomProgressDot = {
  args: {
    progressDot: (dot, { index, status }) => /* @__PURE__ */ import_react.default.createElement(
      "span",
      {
        style: {
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          width: 24,
          height: 24,
          borderRadius: "50%",
          background: status === "finish" ? "#52c41a" : status === "process" ? "#1890ff" : "#d9d9d9",
          color: "#fff",
          fontSize: 12
        }
      },
      status === "finish" ? "✓" : index + 1
    ),
    items: [
      { title: "步骤一" },
      { title: "步骤二" },
      { title: "步骤三" }
    ],
    current: 1
  }
};
var Navigation = {
  args: {
    type: "navigation",
    items: [
      { title: "步骤一" },
      { title: "步骤二" },
      { title: "步骤三" }
    ],
    current: 1
  }
};
var Small = {
  args: {
    size: "small",
    items: [
      { title: "步骤一" },
      { title: "步骤二" },
      { title: "步骤三" }
    ],
    current: 1
  }
};
var Large = {
  args: {
    size: "large",
    items: [
      { title: "步骤一", description: "这是第一步的描述" },
      { title: "步骤二", description: "这是第二步的描述" },
      { title: "步骤三", description: "这是第三步的描述" }
    ],
    current: 1
  }
};
var LabelVertical = {
  args: {
    labelPlacement: "vertical",
    items: [
      { title: "步骤一", description: "这是第一步的描述" },
      { title: "步骤二", description: "这是第二步的描述" },
      { title: "步骤三", description: "这是第三步的描述" }
    ],
    current: 1
  }
};
var ErrorStatus = {
  args: {
    items: [
      { title: "步骤一", status: "finish" },
      { title: "步骤二", status: "error" },
      { title: "步骤三" }
    ],
    current: 1,
    status: "error"
  }
};
var CustomStatus = {
  args: {
    items: [
      { title: "步骤一", status: "finish", description: "已完成" },
      { title: "步骤二", status: "process", description: "进行中" },
      { title: "步骤三", status: "wait", description: "等待中" },
      { title: "步骤四", status: "error", description: "出错了" }
    ],
    current: 1
  }
};
var Clickable = {
  args: {
    clickable: true,
    items: [
      { title: "步骤一" },
      { title: "步骤二" },
      { title: "步骤三" }
    ],
    current: 1,
    onChange: (current) => console.log("点击了步骤:", current)
  }
};
var DisallowClickFinished = {
  args: {
    clickable: true,
    allowClickFinished: false,
    items: [
      { title: "步骤一", description: "不可点击回去" },
      { title: "步骤二", description: "当前步骤" },
      { title: "步骤三", description: "点击前进" }
    ],
    current: 1,
    onChange: (current) => console.log("点击了步骤:", current)
  }
};
var DisabledStep = {
  args: {
    clickable: true,
    items: [
      { title: "步骤一" },
      { title: "步骤二", disabled: true },
      { title: "步骤三" }
    ],
    current: 0,
    onChange: (current) => console.log("点击了步骤:", current)
  }
};
var CustomIcon = {
  args: {
    items: [
      { title: "登录", icon: import_react.default.createElement(import_icons.UserOutlined) },
      { title: "验证", icon: import_react.default.createElement(import_icons.SolutionOutlined) },
      { title: "付款", icon: import_react.default.createElement(import_icons.LoadingOutlined) },
      { title: "完成", icon: import_react.default.createElement(import_icons.SmileOutlined) }
    ],
    current: 2
  }
};
var FinishIcon = {
  args: {
    items: [
      { title: "步骤一", icon: import_react.default.createElement(import_icons.CheckCircleOutlined, { style: { color: "#52c41a" } }) },
      { title: "步骤二", icon: "2" },
      { title: "步骤三", icon: "3" }
    ],
    current: 1
  }
};
var GridLayout = {
  args: {
    gridLayout: true,
    gridColumns: 4,
    items: [
      { title: "步骤一", description: "描述" },
      { title: "步骤二", description: "描述" },
      { title: "步骤三", description: "描述" },
      { title: "步骤四", description: "描述" }
    ],
    current: 1
  }
};
var CustomItemGap = {
  args: {
    itemGap: 16,
    items: [
      { title: "步骤一", description: "描述文本" },
      { title: "步骤二", description: "描述文本" },
      { title: "步骤三", description: "描述文本" }
    ],
    current: 1
  }
};
var MobileModeFull = {
  args: {
    mobileMode: "full",
    items: [
      { title: "步骤一", description: "第一步描述" },
      { title: "步骤二", description: "第二步描述" },
      { title: "步骤三", description: "第三步描述" }
    ],
    current: 1
  },
  parameters: {
    viewport: {
      defaultViewport: "mobile1"
    }
  }
};
var MobileModeCurrent = {
  args: {
    mobileMode: "current",
    items: [
      { title: "步骤一", description: "第一步描述" },
      { title: "步骤二", description: "第二步描述" },
      { title: "步骤三", description: "第三步描述" }
    ],
    current: 1
  }
};
var MobileModeAuto = {
  args: {
    mobileMode: "auto",
    mobileBreakpoint: 744,
    items: [
      { title: "步骤一", description: "第一步描述" },
      { title: "步骤二", description: "第二步描述" },
      { title: "步骤三", description: "第三步描述" }
    ],
    current: 1
  }
};
var CustomMobileBreakpoint = {
  args: {
    mobileMode: "auto",
    mobileBreakpoint: 500,
    items: [
      { title: "步骤一", description: "第一步描述" },
      { title: "步骤二", description: "第二步描述" },
      { title: "步骤三", description: "第三步描述" }
    ],
    current: 1
  }
};
var InitialIndex = {
  args: {
    initial: 1,
    current: 2,
    items: [
      { title: "步骤 1" },
      { title: "步骤 2" },
      { title: "步骤 3" }
    ]
  }
};
var HiddenStep = {
  args: {
    items: [
      { title: "步骤一" },
      { title: "步骤二（隐藏）", hidden: true },
      { title: "步骤三" }
    ],
    current: 1
  }
};
var WithSubTitle = {
  args: {
    items: [
      { title: "已完成", subTitle: "00:00:05", description: "这是第一步" },
      { title: "进行中", subTitle: "剩余 00:00:08", description: "这是第二步" },
      { title: "等待中", subTitle: "", description: "这是第三步" }
    ],
    current: 1
  }
};
var Responsive = {
  args: {
    responsive: true,
    items: [
      { title: "步骤一", description: "这是第一步的描述" },
      { title: "步骤二", description: "这是第二步的描述" },
      { title: "步骤三", description: "这是第三步的描述" }
    ],
    current: 1
  }
};
var FullFeature = {
  args: {
    clickable: true,
    responsive: true,
    labelPlacement: "vertical",
    items: [
      {
        title: "创建账户",
        description: "填写基本信息",
        icon: import_react.default.createElement(import_icons.UserOutlined)
      },
      {
        title: "身份验证",
        description: "验证您的身份",
        icon: import_react.default.createElement(import_icons.SolutionOutlined)
      },
      {
        title: "完成注册",
        description: "设置完成",
        icon: import_react.default.createElement(import_icons.SmileOutlined)
      }
    ],
    current: 1,
    onChange: (current) => console.log("当前步骤:", current)
  }
};
var ManySteps = {
  args: {
    size: "small",
    items: [
      { title: "步骤 1" },
      { title: "步骤 2" },
      { title: "步骤 3" },
      { title: "步骤 4" },
      { title: "步骤 5" },
      { title: "步骤 6" }
    ],
    current: 3
  }
};
var ShoppingFlow = {
  args: {
    type: "navigation",
    items: [
      { title: "购物车", description: "已选 3 件商品" },
      { title: "填写订单", description: "收货信息" },
      { title: "支付", description: "选择支付方式" },
      { title: "完成", description: "订单完成" }
    ],
    current: 1,
    clickable: true,
    allowClickFinished: true
  }
};
var InteractionTest = {
  args: {
    clickable: true,
    items: [
      { title: "步骤一" },
      { title: "步骤二" },
      { title: "步骤三" }
    ],
    current: 1
  },
  play: async ({ canvasElement }) => {
    const canvas = (0, import_test.within)(canvasElement);
    const step1 = canvas.getByText("步骤一");
    await (0, import_test.expect)(step1).toBeInTheDocument();
    await import_test.userEvent.click(step1);
  }
};
var RenderTest = {
  args: {
    items: [
      { title: "步骤一", description: "描述一" },
      { title: "步骤二", description: "描述二" },
      { title: "步骤三", description: "描述三" }
    ],
    current: 0
  },
  play: async ({ canvasElement }) => {
    const canvas = (0, import_test.within)(canvasElement);
    await (0, import_test.expect)(canvas.getByText("步骤一")).toBeInTheDocument();
    await (0, import_test.expect)(canvas.getByText("步骤二")).toBeInTheDocument();
    await (0, import_test.expect)(canvas.getByText("步骤三")).toBeInTheDocument();
    await (0, import_test.expect)(canvas.getByText("描述一")).toBeInTheDocument();
    await (0, import_test.expect)(canvas.getByText("描述二")).toBeInTheDocument();
    await (0, import_test.expect)(canvas.getByText("描述三")).toBeInTheDocument();
  }
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Clickable,
  CustomIcon,
  CustomItemGap,
  CustomMobileBreakpoint,
  CustomProgressDot,
  CustomStatus,
  Default,
  DisabledStep,
  DisallowClickFinished,
  Dot,
  ErrorStatus,
  FinishIcon,
  FullFeature,
  GridLayout,
  HiddenStep,
  InitialIndex,
  InteractionTest,
  LabelVertical,
  Large,
  ManySteps,
  MobileModeAuto,
  MobileModeCurrent,
  MobileModeFull,
  Navigation,
  RenderTest,
  Responsive,
  ShoppingFlow,
  Small,
  Uncontrolled,
  Vertical,
  WithSubTitle
});
