@pisell/materials 2.2.13 → 2.2.14

package/lib/components/pisellInformationEntry/index.js

@@ -0,0 +1,162 @@
+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/pisellInformationEntry/index.tsx
+var pisellInformationEntry_exports = {};
+__export(pisellInformationEntry_exports, {
+  default: () => pisellInformationEntry_default
+});
+module.exports = __toCommonJS(pisellInformationEntry_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_usePisellConfig = __toESM(require("../pisell-config-provider/hooks/usePisellConfig"));
+var import_pisellCard = __toESM(require("../pisellCard"));
+var import_iconfont = __toESM(require("../iconfont"));
+var import_constants = require("./constants");
+var import_Scan = __toESM(require("./Scan"));
+var import_button = __toESM(require("../button"));
+var import_Input = __toESM(require("./Input"));
+var import_utils = require("./utils");
+var import_index = require("./index.less");
+var CardButton = (props) => {
+  const { icon, children, ...others } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_pisellCard.default, { ...others }, /* @__PURE__ */ import_react.default.createElement("div", null, icon), /* @__PURE__ */ import_react.default.createElement("div", null, children));
+};
+var PisellInformationEntry = (props) => {
+  const {
+    platform: propsPlatform,
+    title,
+    entryModes = [],
+    searchDescribe,
+    onChange
+  } = props;
+  const config = (0, import_usePisellConfig.default)();
+  const { platform } = config;
+  const [currentType, setCurrentType] = (0, import_react.useState)(
+    null
+  );
+  const [availableEntryModes, setAvailableEntryModes] = (0, import_react.useState)(entryModes);
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const getEntryModes = async () => {
+      let available = entryModes;
+      if (!await (0, import_utils.hasCamera)()) {
+        available = entryModes.filter((item) => item.type !== "scanCode");
+      }
+      if (available.length === 1) {
+        setCurrentType(available[0].type);
+      }
+      setAvailableEntryModes(available);
+    };
+    getEntryModes();
+  }, [entryModes]);
+  const handleChange = (val) => {
+    onChange == null ? void 0 : onChange(val);
+  };
+  const handleEntryClick = (type) => {
+    if (import_constants.passiveModeType.includes(type)) {
+      return;
+    }
+    setCurrentType(type);
+  };
+  const { isHasInput, isHasNfc, isHasScanner, isHasScanCode } = (0, import_react.useMemo)(() => {
+    let isHasScanCode2 = false;
+    let isHasInput2 = false;
+    let isHasScanner2 = false;
+    let isHasNfc2 = false;
+    availableEntryModes.forEach((item) => {
+      if (item.type === "scanCode") {
+        isHasScanCode2 = true;
+      }
+      if (item.type === "input") {
+        isHasInput2 = true;
+      }
+      if (item.type === "scanner") {
+        isHasScanner2 = true;
+      }
+      if (item.type === "nfc") {
+        isHasNfc2 = true;
+      }
+    });
+    return {
+      isHasScanCode: isHasScanCode2,
+      isHasInput: isHasInput2,
+      isHasScanner: isHasScanner2,
+      isHasNfc: isHasNfc2
+    };
+  }, [availableEntryModes]);
+  const isShowEntryModes = (0, import_react.useMemo)(() => {
+    if (!currentType) {
+      return true;
+    }
+    if (availableEntryModes.length === 1 && import_constants.passiveModeType.includes(availableEntryModes[0].type)) {
+      return true;
+    }
+    return false;
+  }, [currentType, availableEntryModes]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-information-entry-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-information-entry-title" }, /* @__PURE__ */ import_react.default.createElement("span", null, title), currentType && isHasScanCode && isHasInput && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-information-entry-title-action-wrap" }, isHasScanCode && /* @__PURE__ */ import_react.default.createElement(
+    import_button.default,
+    {
+      size: "large",
+      type: currentType === "scanCode" ? "primary" : "default",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: import_constants.entryModeTextIcon["scanCode"].icon }),
+      onClick: () => handleEntryClick("scanCode")
+    }
+  ), isHasInput && /* @__PURE__ */ import_react.default.createElement(
+    import_button.default,
+    {
+      size: "large",
+      type: currentType === "input" ? "primary" : "default",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: import_constants.entryModeTextIcon["input"].icon }),
+      onClick: () => handleEntryClick("input")
+    }
+  ))), isShowEntryModes && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-information-entry-modes" }, availableEntryModes.map((item) => {
+    const detail = import_constants.entryModeTextIcon[item.type];
+    return /* @__PURE__ */ import_react.default.createElement(
+      CardButton,
+      {
+        bordered: !import_constants.passiveModeType.includes(item.type),
+        icon: /* @__PURE__ */ import_react.default.createElement(
+          import_iconfont.default,
+          {
+            type: detail.icon,
+            className: "pisell-card-button-icon"
+          }
+        ),
+        className: (0, import_classnames.default)("pisell-information-entry-item", {
+          ["pisell-entry-ready"]: import_constants.passiveModeType.includes(item.type)
+        }),
+        onClick: () => handleEntryClick(item.type)
+      },
+      item.name || detail.text
+    );
+  })), /* @__PURE__ */ import_react.default.createElement("div", null, currentType === "scanCode" && /* @__PURE__ */ import_react.default.createElement(import_Scan.default, { onChange: handleChange, onCancel: () => setCurrentType(null) }), currentType === "input" && /* @__PURE__ */ import_react.default.createElement(import_Input.default, { onChange: handleChange, searchDescribe })));
+};
+var pisellInformationEntry_default = PisellInformationEntry;

package/lib/components/pisellInformationEntry/index.less

@@ -0,0 +1,40 @@
+.pisell-information-entry-wrap {
+  .pisell-information-entry-title {
+    color: var(--Gray-900, #101828);
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px; /* 155.556% */
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+    .pisell-information-entry-title-action-wrap {
+      display: flex;
+      gap: 10px;
+    }
+  }
+  .pisell-information-entry-modes {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    .pisell-information-entry-item {
+      flex: 1;
+      text-align: center;
+      cursor: pointer;
+      min-width: 165px;
+      .pisell-card-button-icon {
+        height: 48px;
+        font-size: 36px;
+      }
+    }
+    .pisell-entry-ready {
+      background: var(--Gray-50, #f9fafb);
+      cursor: inherit;
+      .pisell-card-button-icon {
+        font-size: 60px;
+      }
+    }
+  }
+}

package/lib/components/pisellInformationEntry/utils.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 判断设备是否包含摄像头
+ */
+export declare const hasCamera: () => Promise<boolean>;

package/lib/components/pisellInformationEntry/utils.js

@@ -0,0 +1,40 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellInformationEntry/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  hasCamera: () => hasCamera
+});
+module.exports = __toCommonJS(utils_exports);
+var hasCamera = async () => {
+  try {
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const hasVideoInput = devices.some(
+      (device) => device.kind === "videoinput"
+    );
+    return hasVideoInput;
+  } catch (error) {
+    console.error("Error accessing media devices:", error);
+    return false;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  hasCamera
+});

package/lib/components/pisellInput/components/BankCard/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InputProps } from 'antd';
+import { PisellContextType } from "../../../pisell-config-provider/context";
+import './index.less';
+export declare type BankCardProps = InputProps & {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    onChange?: (val: string) => void;
+};
+declare const BankCard: (props: BankCardProps) => React.JSX.Element;
+export default BankCard;

package/lib/components/pisellInput/components/BankCard/index.js

@@ -0,0 +1,98 @@
+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/pisellInput/components/BankCard/index.tsx
+var BankCard_exports = {};
+__export(BankCard_exports, {
+  default: () => BankCard_default
+});
+module.exports = __toCommonJS(BankCard_exports);
+var import_react = __toESM(require("react"));
+var import_input = __toESM(require("../../../input"));
+var import_utils = require("./utils");
+var import_index = require("./index.less");
+var bankCardMaxLength = (str) => {
+  return str.slice(0, 19);
+};
+var BankCard = (props) => {
+  const { onChange, value: propsValue, ...others } = props;
+  const inputRef = (0, import_react.useRef)(null);
+  const [_value, setValue] = (0, import_react.useState)(propsValue || "");
+  const [currentBankType, setCurrentBankType] = (0, import_react.useState)();
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
+  (0, import_react.useEffect)(() => {
+    setValue(bankCardMaxLength(formatBankCardNumber(`${propsValue || ""}`)));
+  }, [propsValue]);
+  const formatBankCardNumber = (value) => {
+    const cleanValue = value.replace(/\D/g, "");
+    const formattedValue = cleanValue.replace(/(.{4})/g, "$1 ").trim();
+    return formattedValue;
+  };
+  const handleChange = (e) => {
+    var _a, _b;
+    const { value } = e.target;
+    setCurrentBankType((0, import_utils.getCardType)(value));
+    const formattedValue = formatBankCardNumber(value);
+    let start = ((_b = (_a = inputRef.current) == null ? void 0 : _a.input) == null ? void 0 : _b.selectionStart) || 0;
+    const val = bankCardMaxLength(formattedValue);
+    setValue(val);
+    onChange == null ? void 0 : onChange(val.replace(/\s/g, ""));
+    if (formattedValue.length > 19 || formattedValue.length < _value.length) {
+      if ([4, 9, 14, 19].includes(start)) {
+        start = start + 1;
+      }
+      setTimeout(() => {
+        var _a2;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.setSelectionRange(start, start);
+      });
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_input.default,
+    {
+      ...others,
+      suffix: currentBankType ? /* @__PURE__ */ import_react.default.createElement(
+        "img",
+        {
+          className: "pisell-input-bank-card-suffix",
+          src: import_utils.bankTypeMap[currentBankType],
+          alt: currentBankType
+        }
+      ) : /* @__PURE__ */ import_react.default.createElement("span", null),
+      type: "tel",
+      placeholder: "1234 1234 1234 1234",
+      size: "large",
+      ref: inputRef,
+      value: _value,
+      onChange: handleChange
+    }
+  );
+};
+var BankCard_default = BankCard;

package/lib/components/pisellInput/components/BankCard/index.less

@@ -0,0 +1,4 @@
+.pisell-input-bank-card-suffix {
+  width: 34px;
+  height: 24px;
+}

package/lib/components/pisellInput/components/BankCard/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const getCardType: (str: string) => "jcb" | "amex" | "visa" | "masterCard" | "unionPay" | "discover" | undefined;
+export declare const bankTypeMap: {
+    jcb: any;
+    amex: any;
+    masterCard: any;
+    visa: any;
+    unionPay: any;
+    discover: any;
+};
+export declare const getCardImgByType: (type: keyof typeof bankTypeMap) => any;
+export declare const getBankCardTypeImg: (val: number | string) => any;

package/lib/components/pisellInput/components/BankCard/utils.js

@@ -0,0 +1,103 @@
+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/pisellInput/components/BankCard/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  bankTypeMap: () => bankTypeMap,
+  getBankCardTypeImg: () => getBankCardTypeImg,
+  getCardImgByType: () => getCardImgByType,
+  getCardType: () => getCardType
+});
+module.exports = __toCommonJS(utils_exports);
+var import_JCB = __toESM(require("./cardPng/JCB.png"));
+var import_AMEX = __toESM(require("./cardPng/AMEX.png"));
+var import_MasterCard = __toESM(require("./cardPng/MasterCard.png"));
+var import_VISA = __toESM(require("./cardPng/VISA.png"));
+var import_UnionPay = __toESM(require("./cardPng/UnionPay.png"));
+var import_Discover = __toESM(require("./cardPng/Discover.png"));
+var isJcb = (str) => {
+  return str.startsWith("35");
+};
+var isAmex = (str) => {
+  return str.startsWith("34") || str.startsWith("37");
+};
+var isMasterCard = (str) => {
+  return str.startsWith("51") || str.startsWith("52") || str.startsWith("53") || str.startsWith("54") || str.startsWith("55") || str.startsWith("22") || str.startsWith("23") || str.startsWith("24") || str.startsWith("25") || str.startsWith("26") || str.startsWith("27");
+};
+var isVisa = (str) => {
+  return str.startsWith("4");
+};
+var isUnionPay = (str) => {
+  return str.startsWith("62") || str.startsWith("81");
+};
+var isDiscover = (str) => {
+  return str.startsWith("60") || str.startsWith("64") || str.startsWith("65");
+};
+var getCardType = (str) => {
+  if (isJcb(str)) {
+    return "jcb";
+  }
+  if (isAmex(str)) {
+    return "amex";
+  }
+  if (isVisa(str)) {
+    return "visa";
+  }
+  if (isMasterCard(str)) {
+    return "masterCard";
+  }
+  if (isUnionPay(str)) {
+    return "unionPay";
+  }
+  if (isDiscover(str)) {
+    return "discover";
+  }
+};
+var bankTypeMap = {
+  jcb: import_JCB.default,
+  amex: import_AMEX.default,
+  masterCard: import_MasterCard.default,
+  visa: import_VISA.default,
+  unionPay: import_UnionPay.default,
+  discover: import_Discover.default
+};
+var getCardImgByType = (type) => {
+  return bankTypeMap[type] || "";
+};
+var getBankCardTypeImg = (val) => {
+  const type = getCardType(`${val || ""}`);
+  return type ? bankTypeMap[type] : null;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  bankTypeMap,
+  getBankCardTypeImg,
+  getCardImgByType,
+  getCardType
+});

package/lib/components/pisellInput/components/Copy/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InputProps, ButtonProps } from 'antd';
+import { PisellContextType } from "../../../pisell-config-provider/context";
+export interface CopyProps extends InputProps {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    /** 后缀button的透传配置 */
+    buttonProps?: ButtonProps;
+}
+declare const Copy: (props: CopyProps) => React.JSX.Element;
+export default Copy;

package/lib/components/pisellInput/components/Copy/index.js

@@ -0,0 +1,61 @@
+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/pisellInput/components/Copy/index.tsx
+var Copy_exports = {};
+__export(Copy_exports, {
+  default: () => Copy_default
+});
+module.exports = __toCommonJS(Copy_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_input = __toESM(require("../../../input"));
+var import_icon = __toESM(require("../../../icon"));
+var import_locales = require("../../../../locales");
+var Copy = (props) => {
+  const { buttonProps } = props;
+  const inputRef = (0, import_react.useRef)(null);
+  const handleCopyClick = async (e) => {
+    var _a, _b, _c;
+    (_a = buttonProps == null ? void 0 : buttonProps.onClick) == null ? void 0 : _a.call(buttonProps, e);
+    await (0, import_utils.copyToClipboard)(((_c = (_b = inputRef.current) == null ? void 0 : _b.input) == null ? void 0 : _c.value) || "");
+    import_antd.message.success((0, import_locales.getText)("pisell-input-copy-success"));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Space.Compact, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_input.default, { ...props, ref: inputRef, disabled: props.disabled ?? true, size: "large" }), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      size: "large",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icon.default, { type: "pisell2-copy-03" }),
+      ...buttonProps,
+      onClick: handleCopyClick,
+      children: (buttonProps == null ? void 0 : buttonProps.children) || (0, import_locales.getText)("pisell-input-copy")
+    }
+  ));
+};
+var Copy_default = Copy;

package/lib/components/pisellInput/components/SecurityCode/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { InputProps } from 'antd';
+import './index.less';
+import { PisellContextType } from "../../../pisell-config-provider/context";
+export interface SecurityCodeProps extends Omit<InputProps, 'onChange'> {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    onChange?: (val: string) => void;
+    showCVCIcon?: boolean;
+}
+declare const SecurityCode: (props: SecurityCodeProps) => React.JSX.Element;
+export default SecurityCode;

package/lib/components/pisellInput/components/SecurityCode/index.js

@@ -0,0 +1,74 @@
+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/pisellInput/components/SecurityCode/index.tsx
+var SecurityCode_exports = {};
+__export(SecurityCode_exports, {
+  default: () => SecurityCode_default
+});
+module.exports = __toCommonJS(SecurityCode_exports);
+var import_react = __toESM(require("react"));
+var import_ahooks = require("ahooks");
+var import_input = __toESM(require("../../../input"));
+var import_card = __toESM(require("./card.png"));
+var import_index = require("./index.less");
+var SecurityCode = (props) => {
+  const { maxLength, showCVCIcon = true } = props;
+  const [state, setState] = (0, import_ahooks.useControllableValue)(props, {
+    defaultValue: ""
+  });
+  const handleChange = (e) => {
+    const { value } = e.target;
+    let numberValue = value.replace(/\D/g, "");
+    if (maxLength) {
+      numberValue = numberValue.slice(0, maxLength);
+    }
+    setState == null ? void 0 : setState(numberValue);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_input.default,
+    {
+      ...props,
+      value: state,
+      onChange: handleChange,
+      maxLength,
+      size: "large",
+      placeholder: "CVC",
+      type: "number",
+      suffix: showCVCIcon && /* @__PURE__ */ import_react.default.createElement(
+        "img",
+        {
+          className: "pisell-security-code-suffix",
+          src: import_card.default,
+          alt: "security code img"
+        }
+      )
+    }
+  );
+};
+var SecurityCode_default = SecurityCode;

package/lib/components/pisellInput/components/SecurityCode/index.less

@@ -0,0 +1,4 @@
+.pisell-security-code-suffix {
+  width: 34px;
+  height: 24px;
+}