@pisell/materials 3.3.82 → 3.3.83

package/lib/components/pisellEmail/PisellEmail.stories.d.ts

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellEmail } from './PisellEmail';
+/**
+ * PisellEmail 是一个邮箱地址输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 邮箱格式校验（标准/严格）
+ * - 域名智能补全
+ * - mailto 邮件发送
+ * - 域名隐藏/脱敏
+ * - 白名单/黑名单域名限制
+ */
+declare const meta: Meta<typeof PisellEmail>;
+export default meta;
+declare type Story = StoryObj<typeof PisellEmail>;
+/**
+ * 基础编辑态
+ */
+export declare const Basic: Story;
+/**
+ * 域名智能补全
+ */
+export declare const WithAutoComplete: Story;
+/**
+ * 自定义补全域名
+ */
+export declare const CustomDomains: Story;
+/**
+ * 只读态 - 可发邮件
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 带邮件图标
+ */
+export declare const ReadModeWithIcon: Story;
+/**
+ * 只读态 - 域名部分隐藏
+ */
+export declare const ReadModePartialMask: Story;
+/**
+ * 只读态 - 域名完全隐藏
+ */
+export declare const ReadModeFullMask: Story;
+/**
+ * 禁用态（编辑）
+ */
+export declare const DisabledEdit: Story;
+/**
+ * 禁用态（只读）
+ */
+export declare const DisabledRead: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 格式校验（实时）
+ */
+export declare const FormatValidation: Story;
+/**
+ * 严格格式校验
+ */
+export declare const StrictValidation: Story;
+/**
+ * 白名单域名限制
+ */
+export declare const AllowedDomains: Story;
+/**
+ * 黑名单域名限制
+ */
+export declare const BlockedDomains: Story;
+/**
+ * 显示清空按钮
+ */
+export declare const WithClearButton: Story;
+/**
+ * 自动聚焦
+ */
+export declare const WithAutoFocus: Story;
+/**
+ * 自定义样式（只读态）
+ */
+export declare const CustomStyle: Story;
+/**
+ * 脱敏模式对比
+ */
+export declare const MaskingComparison: Story;
+/**
+ * 校验时机对比
+ */
+export declare const ValidateTriggerComparison: Story;
+/**
+ * 完整功能示例
+ */
+export declare const CompleteExample: Story;
+/**
+ * 域名补全演示
+ */
+export declare const AutoCompleteDemo: Story;
+/**
+ * mailto 功能演示
+ */
+export declare const MailtoDemo: Story;
+/**
+ * 白名单/黑名单演示
+ */
+export declare const DomainRestrictionDemo: Story;
+/**
+ * 所有状态展示
+ */
+export declare const AllStates: Story;
+/**
+ * 完整交互示例
+ */
+export declare const InteractiveExample: Story;

package/lib/components/pisellEmail/PisellEmail.stories.js

@@ -0,0 +1,532 @@
+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/pisellEmail/PisellEmail.stories.tsx
+var PisellEmail_stories_exports = {};
+__export(PisellEmail_stories_exports, {
+  AllStates: () => AllStates,
+  AllowedDomains: () => AllowedDomains,
+  AutoCompleteDemo: () => AutoCompleteDemo,
+  Basic: () => Basic,
+  BlockedDomains: () => BlockedDomains,
+  CompleteExample: () => CompleteExample,
+  CustomDomains: () => CustomDomains,
+  CustomStyle: () => CustomStyle,
+  DisabledEdit: () => DisabledEdit,
+  DisabledRead: () => DisabledRead,
+  DomainRestrictionDemo: () => DomainRestrictionDemo,
+  FormatValidation: () => FormatValidation,
+  InteractiveExample: () => InteractiveExample,
+  MailtoDemo: () => MailtoDemo,
+  MaskingComparison: () => MaskingComparison,
+  ReadMode: () => ReadMode,
+  ReadModeFullMask: () => ReadModeFullMask,
+  ReadModePartialMask: () => ReadModePartialMask,
+  ReadModeWithIcon: () => ReadModeWithIcon,
+  Required: () => Required,
+  StrictValidation: () => StrictValidation,
+  ValidateTriggerComparison: () => ValidateTriggerComparison,
+  WithAutoComplete: () => WithAutoComplete,
+  WithAutoFocus: () => WithAutoFocus,
+  WithClearButton: () => WithClearButton,
+  default: () => PisellEmail_stories_default
+});
+module.exports = __toCommonJS(PisellEmail_stories_exports);
+var import_PisellEmail = require("./PisellEmail");
+var import_react = __toESM(require("react"));
+var meta = {
+  title: "表单/PisellEmail",
+  component: import_PisellEmail.PisellEmail,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "邮箱地址输入/展示组件，支持格式校验、域名补全和 mailto 发送。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    mode: {
+      control: "radio",
+      options: ["read", "edit"],
+      description: "状态模式"
+    },
+    disabled: {
+      control: "boolean",
+      description: "是否禁用"
+    },
+    strictValidation: {
+      control: "boolean",
+      description: "是否使用严格校验（RFC 5322）"
+    },
+    enableAutoComplete: {
+      control: "boolean",
+      description: "启用域名补全"
+    },
+    enableMailto: {
+      control: "boolean",
+      description: "启用 mailto（只读态）"
+    },
+    hideDomain: {
+      control: "boolean",
+      description: "隐藏域名（只读态）"
+    },
+    displayAsLink: {
+      control: "boolean",
+      description: "显示为链接（只读态）"
+    },
+    showEmailIcon: {
+      control: "boolean",
+      description: "显示邮件图标"
+    }
+  }
+};
+var PisellEmail_stories_default = meta;
+var Basic = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入邮箱地址"
+  }
+};
+var WithAutoComplete = {
+  args: {
+    mode: "edit",
+    enableAutoComplete: true,
+    placeholder: "输入@后自动提示域名"
+  }
+};
+var CustomDomains = {
+  args: {
+    mode: "edit",
+    enableAutoComplete: true,
+    autoCompleteDomains: ["gmail.com", "company.com", "custom.com"],
+    placeholder: "输入@查看自定义域名"
+  }
+};
+var ReadMode = {
+  args: {
+    mode: "read",
+    value: "support@example.com",
+    enableMailto: true,
+    displayAsLink: true
+  }
+};
+var ReadModeWithIcon = {
+  args: {
+    mode: "read",
+    value: "support@example.com",
+    enableMailto: true,
+    showEmailIcon: true,
+    displayAsLink: true
+  }
+};
+var ReadModePartialMask = {
+  args: {
+    mode: "read",
+    value: "user@gmail.com",
+    hideDomain: true,
+    maskPattern: "partial"
+  }
+};
+var ReadModeFullMask = {
+  args: {
+    mode: "read",
+    value: "user@gmail.com",
+    hideDomain: true,
+    maskPattern: "full"
+  }
+};
+var DisabledEdit = {
+  args: {
+    mode: "edit",
+    value: "user@example.com",
+    disabled: true
+  }
+};
+var DisabledRead = {
+  args: {
+    mode: "read",
+    value: "user@example.com",
+    disabled: true
+  }
+};
+var Required = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入邮箱地址（必填）",
+    required: true,
+    validateTrigger: "onBlur"
+  }
+};
+var FormatValidation = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入邮箱地址",
+    validateTrigger: "onChange"
+  }
+};
+var StrictValidation = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入邮箱地址",
+    strictValidation: true,
+    validateTrigger: "onBlur"
+  }
+};
+var AllowedDomains = {
+  args: {
+    mode: "edit",
+    placeholder: "请使用公司邮箱",
+    allowedDomains: ["company.com", "partner.com"],
+    errorMessage: "只允许使用公司邮箱或合作伙伴邮箱",
+    validateTrigger: "onBlur"
+  }
+};
+var BlockedDomains = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入邮箱地址",
+    blockedDomains: ["tempmail.com", "10minutemail.com"],
+    errorMessage: "不支持临时邮箱",
+    validateTrigger: "onBlur"
+  }
+};
+var WithClearButton = {
+  args: {
+    mode: "edit",
+    defaultValue: "user@example.com",
+    allowClear: true,
+    placeholder: "请输入邮箱地址"
+  }
+};
+var WithAutoFocus = {
+  args: {
+    mode: "edit",
+    autoFocus: true,
+    placeholder: "自动获得焦点"
+  }
+};
+var CustomStyle = {
+  args: {
+    mode: "read",
+    value: "user@example.com",
+    fontSize: 18,
+    fontWeight: 600,
+    linkColor: "#FF5722"
+  }
+};
+var MaskingComparison = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "400px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "不脱敏:"), /* @__PURE__ */ import_react.default.createElement(import_PisellEmail.PisellEmail, { mode: "read", value: "user@gmail.com", hideDomain: false })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "部分隐藏 (u***@gmail.com):"), /* @__PURE__ */ import_react.default.createElement(import_PisellEmail.PisellEmail, { mode: "read", value: "user@gmail.com", hideDomain: true, maskPattern: "partial" })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "完全隐藏 (user@***):"), /* @__PURE__ */ import_react.default.createElement(import_PisellEmail.PisellEmail, { mode: "read", value: "user@gmail.com", hideDomain: true, maskPattern: "full" })))
+};
+var ValidateTriggerComparison = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "20px", width: "400px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "输入时校验（onChange）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      placeholder: "输入时即时校验",
+      required: true,
+      validateTrigger: "onChange"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "失焦时校验（onBlur）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      placeholder: "失焦后校验",
+      required: true,
+      validateTrigger: "onBlur"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "两者都校验（both）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      placeholder: "输入和失焦都校验",
+      required: true,
+      validateTrigger: "both"
+    }
+  )))
+};
+var CompleteExample = {
+  render: () => {
+    const [value, setValue] = import_react.default.useState("");
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "600px", display: "flex", flexDirection: "column", gap: "24px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "编辑态 - 完整功能"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellEmail.PisellEmail,
+      {
+        value,
+        onChange: (val) => {
+          setValue(val);
+          console.log("邮箱变化:", val);
+        },
+        placeholder: "请输入邮箱地址",
+        enableAutoComplete: true,
+        autoCompleteDomains: ["gmail.com", "qq.com", "company.com"],
+        required: true,
+        validateTrigger: "both",
+        allowClear: true,
+        onSelect: (email) => {
+          console.log("选择补全:", email);
+        },
+        onValidate: (isValid, errors) => {
+          console.log("校验结果:", isValid, errors);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { marginTop: "8px", color: "#667085", fontSize: "12px" } }, "当前值：", value || "（未输入）")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - 可发邮件"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellEmail.PisellEmail,
+      {
+        mode: "read",
+        value: value || "support@example.com",
+        enableMailto: true,
+        displayAsLink: true,
+        showEmailIcon: true,
+        mailtoOptions: {
+          subject: "产品咨询",
+          body: "您好，我想咨询关于..."
+        },
+        onMailto: (email) => {
+          console.log("发送邮件至:", email);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - 域名隐藏"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellEmail.PisellEmail,
+      {
+        mode: "read",
+        value: value || "user@gmail.com",
+        hideDomain: true,
+        maskPattern: "partial",
+        enableMailto: true
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "禁用态"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellEmail.PisellEmail,
+      {
+        mode: "edit",
+        value: value || "user@example.com",
+        disabled: true
+      }
+    )));
+  }
+};
+var AutoCompleteDemo = {
+  render: () => {
+    const [value, setValue] = import_react.default.useState("");
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "500px" } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "域名补全演示"), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "14px", marginBottom: "16px" } }, "输入 @ 后会自动显示常用邮箱域名建议，支持键盘上下键选择"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellEmail.PisellEmail,
+      {
+        value,
+        onChange: setValue,
+        enableAutoComplete: true,
+        placeholder: "试试输入 user@ 看看效果",
+        onSelect: (email) => {
+          console.log("选择了:", email);
+          alert(`选择了: ${email}`);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { marginTop: "8px", color: "#667085", fontSize: "12px" } }, "当前输入：", value || "（未输入）"));
+  }
+};
+var MailtoDemo = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "500px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "基础 mailto"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      mode: "read",
+      value: "support@example.com",
+      enableMailto: true,
+      displayAsLink: true
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "点击邮箱地址唤起邮件客户端")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "带预设参数的 mailto"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      mode: "read",
+      value: "sales@company.com",
+      enableMailto: true,
+      displayAsLink: true,
+      showEmailIcon: true,
+      mailtoOptions: {
+        subject: "产品咨询",
+        body: "您好，我想咨询关于贵公司的产品..."
+      },
+      onMailto: (email) => {
+        console.log("发送邮件至:", email);
+      }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "点击后邮件客户端会预填主题和正文")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "不启用 mailto"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      mode: "read",
+      value: "readonly@example.com",
+      enableMailto: false
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "仅展示，不可点击")))
+};
+var DomainRestrictionDemo = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "500px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "白名单限制（仅允许公司邮箱）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      mode: "edit",
+      placeholder: "请使用公司邮箱",
+      allowedDomains: ["company.com", "partner.com"],
+      validateTrigger: "onBlur",
+      defaultValue: ""
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "只允许 @company.com 或 @partner.com")), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "黑名单限制（禁止临时邮箱）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      mode: "edit",
+      placeholder: "请输入邮箱地址",
+      blockedDomains: ["tempmail.com", "10minutemail.com", "guerrillamail.com"],
+      errorMessage: "不支持临时邮箱",
+      validateTrigger: "onBlur",
+      defaultValue: ""
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "禁止使用临时邮箱域名")))
+};
+var AllStates = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "500px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "编辑态"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      mode: "edit",
+      defaultValue: "user@example.com",
+      placeholder: "请输入邮箱地址",
+      allowClear: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      mode: "read",
+      value: "user@example.com",
+      enableMailto: true,
+      displayAsLink: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "禁用态（编辑）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      mode: "edit",
+      value: "user@example.com",
+      disabled: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "禁用态（只读）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellEmail.PisellEmail,
+    {
+      mode: "read",
+      value: "user@example.com",
+      disabled: true
+    }
+  )))
+};
+var InteractiveExample = {
+  render: () => {
+    const [email, setEmail] = import_react.default.useState("");
+    const [isValid, setIsValid] = import_react.default.useState(true);
+    const [errors, setErrors] = import_react.default.useState([]);
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "600px" } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "PisellEmail 完整功能演示"), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: "24px" } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "编辑态 - 域名补全 + 格式校验"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellEmail.PisellEmail,
+      {
+        value: email,
+        onChange: setEmail,
+        placeholder: "试试输入 user@ 看看域名补全效果",
+        enableAutoComplete: true,
+        autoCompleteDomains: ["gmail.com", "qq.com", "163.com", "company.com"],
+        required: true,
+        validateTrigger: "both",
+        allowClear: true,
+        onSelect: (val) => {
+          console.log("选择了补全建议:", val);
+        },
+        onValidate: (valid, errs) => {
+          setIsValid(valid);
+          setErrors(errs);
+          console.log("校验结果:", { valid, errs });
+        },
+        onBlur: (val) => {
+          console.log("失焦，当前值:", val);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: "16px", padding: "12px", background: "#f5f5f5", borderRadius: "4px" } }, /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "4px 0", fontSize: "14px" } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "当前值:"), " ", email || "（未输入）"), /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "4px 0", fontSize: "14px" } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "校验状态:"), " ", isValid ? "✅ 通过" : "❌ 未通过"), !isValid && errors.length > 0 && /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "4px 0", fontSize: "14px", color: "#ff4d4f" } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "错误信息:"), " ", errors.join(", ")))), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: "32px" } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - mailto 发送"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellEmail.PisellEmail,
+      {
+        mode: "read",
+        value: email || "support@example.com",
+        enableMailto: true,
+        displayAsLink: true,
+        showEmailIcon: true,
+        mailtoOptions: {
+          subject: "来自 Pisell 的咨询",
+          body: `您好，
+
+我想咨询关于...
+
+发件人: ${email || "support@example.com"}`
+        },
+        onMailto: (val) => {
+          console.log("准备发送邮件至:", val);
+          alert(`准备发送邮件至: ${val}`);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", fontSize: "12px", marginTop: "8px" } }, "点击邮箱地址或图标唤起邮件客户端")), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: "32px" } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - 域名隐藏"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "24px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react.default.createElement("p", { style: { fontSize: "14px", marginBottom: "8px" } }, "部分隐藏:"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellEmail.PisellEmail,
+      {
+        mode: "read",
+        value: email || "user@gmail.com",
+        hideDomain: true,
+        maskPattern: "partial"
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react.default.createElement("p", { style: { fontSize: "14px", marginBottom: "8px" } }, "完全隐藏:"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellEmail.PisellEmail,
+      {
+        mode: "read",
+        value: email || "user@gmail.com",
+        hideDomain: true,
+        maskPattern: "full"
+      }
+    )))));
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AllStates,
+  AllowedDomains,
+  AutoCompleteDemo,
+  Basic,
+  BlockedDomains,
+  CompleteExample,
+  CustomDomains,
+  CustomStyle,
+  DisabledEdit,
+  DisabledRead,
+  DomainRestrictionDemo,
+  FormatValidation,
+  InteractiveExample,
+  MailtoDemo,
+  MaskingComparison,
+  ReadMode,
+  ReadModeFullMask,
+  ReadModePartialMask,
+  ReadModeWithIcon,
+  Required,
+  StrictValidation,
+  ValidateTriggerComparison,
+  WithAutoComplete,
+  WithAutoFocus,
+  WithClearButton
+});

package/lib/components/pisellEmail/components/DisabledView.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { PisellEmailProps } from '../types';
+/**
+ * PisellEmail 禁用态视图组件
+ *
+ * 职责：
+ * - 渲染禁用状态的邮箱组件
+ * - 根据原始 mode 选择渲染 ReadOnlyView 或 EditView
+ * - 应用禁用样式（透明度 40%）
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellEmailProps>;
+export default DisabledView;