kwikid-components-react/components/kwikui/inputs/input-number/InputNumber.stories.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithValidation = exports.WithPrefixAndPostfix = exports.ThousandsSeparator = exports.Sizes = exports.Shapes = exports.MinMax = exports.Disabled = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _InputNumber = _interopRequireDefault(require("./InputNumber"));
var _InputNumber2 = require("./InputNumber.constants");
var _InputNumber3 = require("./InputNumber.defaults");
const _excluded = ["value", "min", "max"],
  _excluded2 = ["delimiter"],
  _excluded3 = ["delimiter"],
  _excluded4 = ["delimiter"],
  _excluded5 = ["delimiter"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/**
 * The InputNumber component provides a specialized input field for numeric values.
 * It supports validation, formatting with thousands separators, and constraints like min/max values.
 *
 * ## Usage
 *
 * ```jsx
 * import { KwikUIInputNumber } from 'react-kwikui';
 *
 * const [value, setValue] = useState(0);
 *
 * const handleChange = (id, numValue) => {
 *   setValue(numValue);
 * };
 *
 * <KwikUIInputNumber
 *   id="quantity"
 *   label="Quantity"
 *   min={0}
 *   max={100}
 *   value={value}
 *   onInput={handleChange}
 * />
 * ```
 */
var _default = exports.default = {
  title: "KwikUI/Inputs/Number",
  component: _InputNumber.default,
  parameters: {
    componentSubtitle: "Numeric input field for identity numbers and financial data",
    docs: {
      description: {
        component: "The Number Input component provides a field for users to enter numeric values with formatting and validation features. In the KwikID platform, it's used for capturing Aadhaar numbers, PAN card digits, bank account numbers, mobile numbers, and other numeric identity information required for VideoKYC processes."
      }
    },
    a11y: {
      config: {
        rules: [{
          id: "label-content",
          enabled: true
        }]
      }
    }
  },
  argTypes: {
    min: {
      control: {
        type: "range",
        min: -1000,
        max: 1000,
        step: 1
      },
      description: "Minimum allowed value",
      table: {
        type: {
          summary: "number"
        },
        defaultValue: {
          summary: "undefined"
        }
      }
    },
    max: {
      control: {
        type: "range",
        min: -1000,
        max: 1000,
        step: 1
      },
      description: "Maximum allowed value",
      table: {
        type: {
          summary: "number"
        },
        defaultValue: {
          summary: "undefined"
        }
      }
    },
    shape: {
      control: "radio",
      options: _InputNumber2.KWIKUI_INPUT__SHAPE__OPTIONS,
      description: "The shape of the input field",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.shape
        }
      }
    },
    size: {
      control: "radio",
      options: _InputNumber2.KWIKUI_INPUT__SIZE__OPTIONS,
      description: "The size of the input field",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.size
        }
      }
    },
    updateOn: {
      control: "radio",
      options: _InputNumber2.KWIKUI_INPUT__UPDATE_ON__OPTIONS,
      description: "When to trigger the input event",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.updateOn
        }
      }
    },
    value: {
      control: "number",
      description: "The current value of the input field",
      table: {
        type: {
          summary: "number"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.value
        }
      }
    },
    label: {
      control: "text",
      description: "Label text for the input field",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.label
        }
      }
    },
    placeholder: {
      control: "text",
      description: "Placeholder text for the input field",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.placeholder
        }
      }
    },
    delimiter: {
      control: "text",
      description: "Thousands separator character, e.g., ',' for 1,000 or '.' for 1.000",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
        }
      }
    },
    prefix: {
      control: "object",
      description: "Content to display before the input field",
      table: {
        type: {
          summary: "ReactNode"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.prefix
        }
      }
    },
    postfix: {
      control: "object",
      description: "Content to display after the input field",
      table: {
        type: {
          summary: "ReactNode"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.postfix
        }
      }
    },
    disabled: {
      control: "boolean",
      description: "Whether the input is disabled",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.disabled
        }
      }
    },
    required: {
      control: "boolean",
      description: "Whether the input is required",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.required
        }
      }
    },
    isInputCopyDisabled: {
      control: "boolean",
      description: "Disable copying from the input",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.isInputCopyDisabled
        }
      }
    },
    isInputPasteDisabled: {
      control: "boolean",
      description: "Disable pasting into the input",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.isInputPasteDisabled
        }
      }
    },
    id: {
      control: "text",
      description: "The ID of the input component",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputNumber3.KWIKUI_INPUT__DEFAULTS.id
        }
      }
    },
    customStyles: {
      control: "object",
      description: "Custom styles to apply to different parts of the component",
      table: {
        type: {
          summary: "object"
        },
        defaultValue: {
          summary: "{ wrapper: {}, container: {}, label: {}, input: {}, prefix: {}, postfix: {} }"
        }
      }
    },
    messages: {
      description: "Array of message objects to display (error, info, etc.)",
      table: {
        type: {
          summary: "Array<IKwikUIMessage>"
        },
        defaultValue: {
          summary: "[]"
        }
      }
    },
    onInput: {
      description: "Function called when input value changes",
      table: {
        type: {
          summary: "(id: string, value: number) => void"
        }
      }
    },
    onInputValidate: {
      description: "Function to validate input value",
      table: {
        type: {
          summary: "(id: string, value: number) => { isValid: boolean } | undefined | null"
        }
      }
    },
    onInputCopyDisabled: {
      description: "Function called when copy is attempted while disabled",
      table: {
        type: {
          summary: "() => void"
        }
      }
    },
    onInputPasteDisabled: {
      description: "Function called when paste is attempted while disabled",
      table: {
        type: {
          summary: "() => void"
        }
      }
    }
  }
};
/**
 * Template for rendering the InputNumber component
 */
const Template = args => {
  const {
      value: initialValue,
      min,
      max
    } = args,
    rest = _objectWithoutProperties(args, _excluded);
  const [value, setValue] = _react.default.useState(initialValue || 0);
  const onChangeInput = (id, inputValue) => {
    setValue(inputValue);
  };
  const onChangeInputValidate = (id, inputValue) => {
    if (min !== undefined && inputValue < min) {
      return {
        isValid: false
      };
    }
    if (max !== undefined && inputValue > max) {
      return {
        isValid: false
      };
    }
    return {
      isValid: true
    };
  };
  const onCopyDisabled = () => {
    console.log("Copy is disabled for security compliance");
  };
  const onPasteDisabled = () => {
    console.log("Paste is disabled for security compliance");
  };
  return /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    min: min,
    max: max,
    value: value,
    onInput: onChangeInput,
    onInputValidate: onChangeInputValidate,
    onInputCopyDisabled: onCopyDisabled,
    onInputPasteDisabled: onPasteDisabled
  }));
};

/**
 * Default number input implementation
 */
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _InputNumber3.KWIKUI_INPUT__DEFAULTS), {}, {
  id: "aadhaar-number",
  label: "Aadhaar Number",
  placeholder: "Enter 12-digit Aadhaar number",
  value: 0
});
Default.parameters = {
  docs: {
    description: {
      story: "Default number input used for capturing the 12-digit Aadhaar number during KYC verification. Aadhaar is India's primary identity document and is essential for VideoKYC processes as per UIDAI guidelines."
    }
  }
};

/**
 * Number input with different shapes
 */
const Shapes = args => {
  const {
      delimiter
    } = args,
    rest = _objectWithoutProperties(args, _excluded2);
  const [value1, setValue1] = _react.default.useState(0);
  const [value2, setValue2] = _react.default.useState(0);
  const [value3, setValue3] = _react.default.useState(0);
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: "2rem"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "aadhaar-digits-curved",
    label: "Aadhaar Last 4 Digits (Curved)",
    shape: "curved",
    max: 9999,
    placeholder: "Enter last 4 digits of Aadhaar",
    value: value1,
    onInput: (id, val) => setValue1(val),
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
  })), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "mobile-number-rectangle",
    label: "Mobile Number (Rectangle)",
    shape: "rectangle",
    placeholder: "Enter 10-digit mobile number",
    value: value2,
    onInput: (id, val) => setValue2(val),
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
  })), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "account-number-rounded",
    label: "Bank Account Number (Rounded)",
    shape: "rounded",
    placeholder: "Enter account number",
    value: value3,
    onInput: (id, val) => setValue3(val),
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
  })));
};
exports.Shapes = Shapes;
Shapes.args = {
  delimiter: _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
};
Shapes.parameters = {
  docs: {
    description: {
      story: "Number inputs with different shapes used for capturing various identity numbers during VideoKYC. Each shape variation helps visually distinguish between different types of numeric inputs in the KYC form."
    }
  }
};

/**
 * Number input with different sizes
 */
const Sizes = args => {
  const {
      delimiter
    } = args,
    rest = _objectWithoutProperties(args, _excluded3);
  const [value1, setValue1] = _react.default.useState(0);
  const [value2, setValue2] = _react.default.useState(0);
  const [value3, setValue3] = _react.default.useState(0);
  const [value4, setValue4] = _react.default.useState(0);
  const [value5, setValue5] = _react.default.useState(0);
  const [value6, setValue6] = _react.default.useState(0);
  const [value7, setValue7] = _react.default.useState(0);
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: "2rem"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "number-xxs",
    size: "xxs",
    label: "PIN Code (XXS)",
    placeholder: "Enter 6-digit PIN code",
    value: value1,
    onInput: (id, val) => setValue1(val),
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
  })), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "number-xs",
    size: "xs",
    label: "Age in Years (XS)",
    placeholder: "Enter age (must be 18+)",
    min: 18,
    value: value2,
    onInput: (id, val) => setValue2(val),
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
  })), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "number-s",
    size: "s",
    label: "Last 4 Digits of PAN (S)",
    placeholder: "Enter last 4 digits of PAN",
    value: value3,
    onInput: (id, val) => setValue3(val),
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
  })), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "number-m",
    size: "m",
    label: "Mobile Number (M - Default)",
    placeholder: "Enter 10-digit mobile number",
    value: value4,
    onInput: (id, val) => setValue4(val),
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
  })), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "number-l",
    size: "l",
    label: "Aadhaar Number (L)",
    placeholder: "Enter 12-digit Aadhaar number",
    value: value5,
    onInput: (id, val) => setValue5(val),
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
  })), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "number-xl",
    size: "xl",
    label: "Bank Account Number (XL)",
    placeholder: "Enter bank account number",
    value: value6,
    onInput: (id, val) => setValue6(val),
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
  })), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "number-xxl",
    size: "xxl",
    label: "IFSC Code Digits (XXL)",
    placeholder: "Enter numeric part of IFSC code",
    value: value7,
    onInput: (id, val) => setValue7(val),
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
  })));
};
exports.Sizes = Sizes;
Sizes.args = {
  delimiter: _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
};
Sizes.parameters = {
  docs: {
    description: {
      story: "Number inputs in different sizes for various FinTech applications in the KwikID platform. Size variations accommodate different types of numeric data collected during VideoKYC, from short PIN codes to longer account numbers."
    }
  }
};

/**
 * Number input with minimum and maximum values
 */
const MinMax = exports.MinMax = Template.bind({});
MinMax.args = _objectSpread(_objectSpread({}, _InputNumber3.KWIKUI_INPUT__DEFAULTS), {}, {
  id: "age-verification",
  label: "Age (years)",
  placeholder: "Enter your age (must be 18-100)",
  min: 18,
  max: 100,
  value: 25
});
MinMax.parameters = {
  docs: {
    description: {
      story: "Number input with minimum and maximum constraints for age verification. According to RBI guidelines for VideoKYC, users must be at least 18 years old to complete financial verification. The maximum is set to 100 for practical purposes."
    }
  }
};

/**
 * Number input with thousands separator
 */
const ThousandsSeparator = exports.ThousandsSeparator = Template.bind({});
ThousandsSeparator.args = _objectSpread(_objectSpread({}, _InputNumber3.KWIKUI_INPUT__DEFAULTS), {}, {
  id: "loan-amount",
  label: "Loan Amount (₹)",
  placeholder: "Enter loan amount",
  delimiter: ",",
  value: 100000
});
ThousandsSeparator.parameters = {
  docs: {
    description: {
      story: "Number input with thousands separator (comma) for displaying large financial amounts in Indian Rupees. This format follows Indian numeric notation for improved readability of large financial values during the KYC process."
    }
  }
};

/**
 * Number input with validation
 */
const WithValidation = args => {
  var _validateAadhaarLastD;
  const {
      delimiter
    } = args,
    rest = _objectWithoutProperties(args, _excluded4);
  const [value, setValue] = _react.default.useState(0);
  const currentId = "aadhaar-last-digit-validation";

  // Aadhaar last digit is a checksum calculated using Verhoeff algorithm
  // This is a simplified example validation that checks if the last digit matches a pattern
  const validateAadhaarLastDigit = (id, inputValue) => {
    if (inputValue === undefined || inputValue === null) return null;

    // This is a simplified example - in real implementation, would use proper Verhoeff algorithm
    // For demo purposes, we're just checking if the digit is valid based on a pattern
    // Creating a sequential array from 0 to 9 to avoid magic numbers
    const validLastDigits = Array.from({
      length: 10
    }, (_, i) => i);
    const isValid = validLastDigits.includes(inputValue);
    return {
      isValid
    };
  };
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Enter the last digit of your Aadhaar number for verification. In a real implementation, this would validate the checksum digit using the Verhoeff algorithm."), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: currentId,
    label: "Aadhaar Checksum Digit",
    placeholder: "Enter last digit of Aadhaar",
    value: value,
    min: 0,
    max: 9,
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter,
    onInput: (id, inputValue) => setValue(inputValue),
    onInputValidate: validateAadhaarLastDigit,
    messages: value !== null && value !== undefined ? [(_validateAadhaarLastD = validateAadhaarLastDigit(currentId, value)) !== null && _validateAadhaarLastD !== void 0 && _validateAadhaarLastD.isValid ? {
      type: "success",
      message: "Valid Aadhaar checksum digit"
    } : {
      type: "error",
      message: "Invalid Aadhaar checksum digit"
    }] : []
  })));
};
exports.WithValidation = WithValidation;
WithValidation.args = {
  delimiter: _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
};
WithValidation.parameters = {
  docs: {
    description: {
      story: "Number input with validation for the Aadhaar checksum digit. The last digit of an Aadhaar number is a checksum calculated using the Verhoeff algorithm, which helps detect errors in the number. This example demonstrates a simplified version of the validation used in the KwikID platform."
    }
  }
};

// Constants for commonly used numbers
const MONTHLY_INCOME_DEFAULT = 45000;
const MOBILE_NUMBER_SAMPLE = 9876543210;
const AADHAAR_LAST_DIGITS_SAMPLE = 1234;

/**
 * Disabled number input
 */
const Disabled = exports.Disabled = Template.bind({});
Disabled.args = _objectSpread(_objectSpread({}, _InputNumber3.KWIKUI_INPUT__DEFAULTS), {}, {
  id: "verified-mobile",
  label: "Verified Mobile Number",
  placeholder: "Mobile number",
  value: MOBILE_NUMBER_SAMPLE,
  disabled: true
});
Disabled.parameters = {
  docs: {
    description: {
      story: "Disabled number input for displaying verified mobile numbers during the VideoKYC process. Once a mobile number is OTP-verified as per RBI guidelines, it's displayed in a non-editable state to prevent tampering with verified identity data."
    }
  }
};

/**
 * Number input with prefix and postfix
 */
const WithPrefixAndPostfix = args => {
  const {
      delimiter
    } = args,
    rest = _objectWithoutProperties(args, _excluded5);
  const [value1, setValue1] = _react.default.useState(MONTHLY_INCOME_DEFAULT);
  const [value2, setValue2] = _react.default.useState(MOBILE_NUMBER_SAMPLE);
  const [value3, setValue3] = _react.default.useState(AADHAAR_LAST_DIGITS_SAMPLE);
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: "2rem"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "monthly-income",
    label: "Monthly Income (\u20B9)",
    placeholder: "Enter monthly income",
    delimiter: delimiter || _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter,
    value: value1,
    onInput: (id, val) => setValue1(val),
    prefix: /*#__PURE__*/_react.default.createElement("span", {
      style: {
        padding: "0 0.5rem"
      }
    }, "\u20B9"),
    postfix: /*#__PURE__*/_react.default.createElement("span", {
      style: {
        padding: "0 0.5rem"
      }
    }, "/month")
  })), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "mobile-number-with-code",
    label: "Mobile Number",
    placeholder: "Enter 10-digit number",
    delimiter: "",
    value: value2,
    onInput: (id, val) => setValue2(val),
    prefix: /*#__PURE__*/_react.default.createElement("span", {
      style: {
        padding: "0 0.5rem"
      }
    }, "+91")
  })), /*#__PURE__*/_react.default.createElement(_InputNumber.default, _extends({}, rest, {
    id: "aadhaar-digits",
    label: "Last 4 Digits of Aadhaar",
    placeholder: "Enter last 4 digits",
    delimiter: "",
    value: value3,
    max: 9999,
    onInput: (id, val) => setValue3(val),
    prefix: /*#__PURE__*/_react.default.createElement("span", {
      style: {
        padding: "0 0.5rem"
      }
    }, "XXXX - XXXX -")
  })));
};
exports.WithPrefixAndPostfix = WithPrefixAndPostfix;
WithPrefixAndPostfix.args = {
  delimiter: _InputNumber3.KWIKUI_INPUT__DEFAULTS.delimiter
};
WithPrefixAndPostfix.parameters = {
  docs: {
    description: {
      story: "Number inputs with prefix and postfix elements for financial and identity data. These are used throughout the KwikID platform to provide context for numeric inputs, such as currency symbols (₹), country codes (+91), or partial masks for sensitive numbers."
    }
  }
};