kwikui-react/components/Forms.stories.js

KwikID's UI Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.RegistrationForm = exports.LoginForm = exports.KYCForm = exports.DateFilterForm = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Button = _interopRequireDefault(require("./button/Button"));
var _InputCheckbox = _interopRequireDefault(require("./inputs/input-checkbox/InputCheckbox"));
var _InputNumber = _interopRequireDefault(require("./inputs/input-number/InputNumber"));
var _InputPassword = _interopRequireDefault(require("./inputs/input-password/InputPassword"));
var _InputRadio = _interopRequireDefault(require("./inputs/input-radio/InputRadio"));
var _InputSelect = _interopRequireDefault(require("./inputs/input-select/InputSelect"));
var _InputText = _interopRequireDefault(require("./inputs/input-text/InputText"));
var _Textarea = _interopRequireDefault(require("./inputs/textarea/Textarea"));
var _Shape = require("../shared/definitions/Shape");
var _InputCheckbox2 = require("./inputs/input-checkbox/InputCheckbox.definition");
var _InputDateTime = _interopRequireDefault(require("./inputs/input-datetime/InputDateTime"));
var _InputDateTime2 = require("./inputs/input-datetime/InputDateTime.definition");
var _InputRadio2 = require("./inputs/input-radio/InputRadio.definition");
var _InputSelect2 = require("./inputs/input-select/InputSelect.definition");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// Import all form-related components

// Import shape constants

// Constants for form steps
const FORM_STEP = {
  PERSONAL_INFO: 1,
  CONTACT_INFO: 2,
  CONSENTS: 3
};

// Constants for progress bar percentages
const PROGRESS_PERCENTAGE = {
  STEP_1: "0%",
  STEP_2: "50%",
  STEP_3: "100%"
};

// Date range constants
const DATE_RANGE = {
  DAYS_IN_WEEK: 7,
  DAYS_IN_MONTH: 30
};

// Timeout constants
const LOGIN_SIMULATION_TIMEOUT = 1500;

/**
 * KwikUI Form Components Demo
 *
 * This story showcases how all form components look when used together in a complete form.
 */
var _default = exports.default = {
  title: "Forms/Complete Forms",
  parameters: {
    docs: {
      description: {
        component: `
## KwikUI Form Components

This page demonstrates how different KwikUI form components work together to create complete, cohesive forms.
Each story presents a different type of form to showcase various component combinations and layouts.

### Included Components
- Text inputs
- Number inputs
- Password inputs
- Checkboxes
- Radio buttons
- Select dropdowns
- Date pickers
- Textareas
- Form actions (buttons)

### Layout Variations
- Linear Vertical Stack (Registration Form)
- Mixed Horizontal and Vertical (KYC Form)
- Compact Horizontal (Date Filter Form)
`
      }
    }
  }
};
/**
 * Registration Form
 */
const RegistrationForm = () => {
  const [formData, setFormData] = (0, _react.useState)({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    password: "",
    confirmPassword: "",
    dateOfBirth: "",
    gender: "",
    address: "",
    city: "",
    country: "",
    employmentStatus: "",
    income: 0,
    agreeTerms: false,
    marketingConsent: false
  });
  const [errors, setErrors] = (0, _react.useState)({});
  const [submitted, setSubmitted] = (0, _react.useState)(false);
  const [showSuccessMessage, setShowSuccessMessage] = (0, _react.useState)(false);
  const handleChange = (id, value) => {
    setFormData(prev => ({
      ...prev,
      [id]: value
    }));

    // Clear error when field is changed
    if (errors[id]) {
      setErrors(prev => {
        const newErrors = {
          ...prev
        };
        delete newErrors[id];
        return newErrors;
      });
    }
  };
  const validateForm = () => {
    const newErrors = {};
    if (!formData.firstName) newErrors.firstName = "First name is required";
    if (!formData.lastName) newErrors.lastName = "Last name is required";
    if (!formData.email) {
      newErrors.email = "Email is required";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid";
    }
    const MIN_PASSWORD_LENGTH = 8;
    if (!formData.password) {
      newErrors.password = "Password is required";
    } else if (formData.password.length < MIN_PASSWORD_LENGTH) {
      newErrors.password = `Password must be at least ${MIN_PASSWORD_LENGTH} characters`;
    }
    if (!formData.confirmPassword) {
      newErrors.confirmPassword = "Please confirm your password";
    } else if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Passwords do not match";
    }
    if (!formData.dateOfBirth) newErrors.dateOfBirth = "Date of birth is required";
    if (!formData.gender) newErrors.gender = "Gender is required";
    if (!formData.country) newErrors.country = "Country is required";
    if (!formData.agreeTerms) {
      newErrors.agreeTerms = "You must agree to the terms and conditions";
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  const handleSubmit = () => {
    setSubmitted(true);
    const isValid = validateForm();
    if (isValid) {
      console.log("Form submitted:", formData);
      setShowSuccessMessage(true);
      // In a real app, you would send the data to your API here
    }
  };

  // Memoize the options arrays to prevent recreating them on each render
  const countryOptions = (0, _react.useMemo)(() => [{
    value: "in",
    label: "India"
  }, {
    value: "us",
    label: "United States"
  }, {
    value: "uk",
    label: "United Kingdom"
  }, {
    value: "ca",
    label: "Canada"
  }, {
    value: "au",
    label: "Australia"
  }], []);
  const genderOptions = (0, _react.useMemo)(() => [{
    id: "male",
    value: "male",
    label: "Male"
  }, {
    id: "female",
    value: "female",
    label: "Female"
  }, {
    id: "other",
    value: "other",
    label: "Other"
  }, {
    id: "prefer-not-to-say",
    value: "prefer-not-to-say",
    label: "Prefer not to say"
  }], []);
  const employmentOptions = (0, _react.useMemo)(() => [{
    value: "employed",
    label: "Employed"
  }, {
    value: "self-employed",
    label: "Self-employed"
  }, {
    value: "unemployed",
    label: "Unemployed"
  }, {
    value: "student",
    label: "Student"
  }, {
    value: "retired",
    label: "Retired"
  }], []);
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      maxWidth: "600px",
      margin: "0 auto",
      padding: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement("h2", {
    style: {
      color: "var(--kwikui-color-primary)",
      marginBottom: "24px"
    }
  }, "KwikID User Registration (Vertical Layout)"), showSuccessMessage ? /*#__PURE__*/_react.default.createElement("div", {
    style: {
      padding: "20px",
      backgroundColor: "#e8f5e9",
      borderRadius: "8px",
      marginBottom: "20px",
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    }
  }, /*#__PURE__*/_react.default.createElement("h3", {
    style: {
      color: "#2e7d32",
      marginBottom: "10px"
    }
  }, "Registration Successful!"), /*#__PURE__*/_react.default.createElement("p", null, "Thank you for registering with KwikID. Your account has been created successfully."), /*#__PURE__*/_react.default.createElement(_Button.default, {
    appearance: "primary",
    onClick: () => {
      setShowSuccessMessage(false);
      setFormData({
        firstName: "",
        lastName: "",
        email: "",
        phone: "",
        password: "",
        confirmPassword: "",
        dateOfBirth: "",
        gender: "",
        address: "",
        city: "",
        country: "",
        employmentStatus: "",
        income: 0,
        agreeTerms: false,
        marketingConsent: false
      });
      setSubmitted(false);
    },
    customStyles: {
      marginTop: "16px"
    }
  }, "Register Another User")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "24px"
    }
  }, /*#__PURE__*/_react.default.createElement("p", {
    style: {
      color: "#666"
    }
  }, "Please fill out all required fields to complete your registration.")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "firstName",
    label: "First Name",
    placeholder: "Enter your first name",
    required: true,
    value: formData.firstName,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.firstName ? [{
      type: "error",
      message: errors.firstName
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "lastName",
    label: "Last Name",
    placeholder: "Enter your last name",
    required: true,
    value: formData.lastName,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.lastName ? [{
      type: "error",
      message: errors.lastName
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "email",
    label: "Email Address",
    placeholder: "Enter your email address",
    required: true,
    value: formData.email,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.email ? [{
      type: "error",
      message: errors.email
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "phone",
    label: "Phone Number",
    placeholder: "Enter your phone number",
    value: formData.phone,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "password",
    label: "Password",
    placeholder: "Create a password",
    required: true,
    value: formData.password,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.password ? [{
      type: "error",
      message: errors.password
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "confirmPassword",
    label: "Confirm Password",
    placeholder: "Confirm your password",
    required: true,
    value: formData.confirmPassword,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.confirmPassword ? [{
      type: "error",
      message: errors.confirmPassword
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputDateTime.default, {
    id: "dateOfBirth",
    variant: _InputDateTime2.IKwikUIInputDateTimeVariant.DATE,
    label: "Date of Birth",
    placeholder: "Select your date of birth",
    required: true,
    value: formData.dateOfBirth,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.dateOfBirth ? [{
      type: "error",
      message: errors.dateOfBirth
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputRadio.default, {
    id: "gender",
    label: "Gender",
    required: true,
    options: genderOptions,
    orientation: "horizontal",
    value: formData.gender,
    onInput: handleChange,
    shape: _InputRadio2.IKwikUIInputRadioShape.CURVED,
    messages: submitted && errors.gender ? [{
      type: "error",
      message: errors.gender
    }] : [],
    isClearable: false,
    isSearchable: false
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_Textarea.default, {
    id: "address",
    label: "Address",
    placeholder: "Enter your address",
    value: formData.address,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    textCase: "default"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "city",
    label: "City",
    placeholder: "Enter your city",
    value: formData.city,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
    id: "country",
    label: "Country",
    placeholder: "Select your country",
    required: true,
    options: countryOptions,
    value: formData.country,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.country ? [{
      type: "error",
      message: errors.country
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
    id: "employmentStatus",
    label: "Employment Status",
    placeholder: "Select your employment status",
    options: employmentOptions,
    value: formData.employmentStatus,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputNumber.default, {
    id: "income",
    label: "Annual Income",
    placeholder: "Enter your annual income",
    value: formData.income,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    delimiter: ","
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, {
    id: "agreeTerms",
    placeholder: "I agree to the Terms of Service and Privacy Policy",
    required: true,
    value: formData.agreeTerms,
    onInput: handleChange,
    shape: _InputCheckbox2.IKwikUIInputCheckboxShape.CURVED,
    messages: submitted && errors.agreeTerms ? [{
      type: "error",
      message: errors.agreeTerms
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "24px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, {
    id: "marketingConsent",
    placeholder: "I would like to receive updates and marketing communications from KwikID",
    required: false,
    value: formData.marketingConsent,
    onInput: handleChange,
    shape: _InputCheckbox2.IKwikUIInputCheckboxShape.CURVED
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      justifyContent: "center",
      marginTop: "32px",
      gap: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    appearance: "secondary",
    onClick: () => {
      setFormData({
        firstName: "",
        lastName: "",
        email: "",
        phone: "",
        password: "",
        confirmPassword: "",
        dateOfBirth: "",
        gender: "",
        address: "",
        city: "",
        country: "",
        employmentStatus: "",
        income: 0,
        agreeTerms: false,
        marketingConsent: false
      });
      setErrors({});
      setSubmitted(false);
    }
  }, "Reset Form"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    appearance: "primary",
    onClick: handleSubmit
  }, "Register"))));
};
exports.RegistrationForm = RegistrationForm;
RegistrationForm.parameters = {
  docs: {
    description: {
      story: "A comprehensive registration form with all form components arranged in a linear vertical stack layout."
    }
  }
};

/**
 * KYC Form
 */
const KYCForm = () => {
  const [formData, setFormData] = (0, _react.useState)({
    fullName: "",
    idType: "",
    idNumber: "",
    dateOfBirth: "",
    address: "",
    phone: "",
    email: "",
    occupation: "",
    photoConsent: false,
    termsConsent: false,
    privacyConsent: false
  });
  const [errors, setErrors] = (0, _react.useState)({});
  const [submitted, setSubmitted] = (0, _react.useState)(false);
  const [showSuccessMessage, setShowSuccessMessage] = (0, _react.useState)(false);
  const [currentStep, setCurrentStep] = (0, _react.useState)(1);
  const handleChange = (id, value) => {
    setFormData(prev => ({
      ...prev,
      [id]: value
    }));

    // Clear error when field is changed
    if (errors[id]) {
      setErrors(prev => {
        const newErrors = {
          ...prev
        };
        delete newErrors[id];
        return newErrors;
      });
    }
  };
  const validateStep = step => {
    const newErrors = {};
    if (step === FORM_STEP.PERSONAL_INFO) {
      if (!formData.fullName) newErrors.fullName = "Full name is required";
      if (!formData.idType) newErrors.idType = "ID type is required";
      if (!formData.idNumber) newErrors.idNumber = "ID number is required";
      if (!formData.dateOfBirth) newErrors.dateOfBirth = "Date of birth is required";
    } else if (step === FORM_STEP.CONTACT_INFO) {
      if (!formData.address) newErrors.address = "Address is required";
      if (!formData.phone) newErrors.phone = "Phone number is required";
      if (!formData.email) {
        newErrors.email = "Email is required";
      } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
        newErrors.email = "Email is invalid";
      }
      if (!formData.occupation) newErrors.occupation = "Occupation is required";
    } else if (step === FORM_STEP.CONSENTS) {
      if (!formData.photoConsent) newErrors.photoConsent = "Photo consent is required";
      if (!formData.termsConsent) newErrors.termsConsent = "You must agree to the terms and conditions";
      if (!formData.privacyConsent) newErrors.privacyConsent = "You must agree to the privacy policy";
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  const handleNext = () => {
    setSubmitted(true);
    const isValid = validateStep(currentStep);
    if (isValid && currentStep < FORM_STEP.CONSENTS) {
      setCurrentStep(prev => prev + 1);
      setSubmitted(false);
    } else if (isValid && currentStep === FORM_STEP.CONSENTS) {
      setShowSuccessMessage(true);
    }
  };
  const handleBack = () => {
    if (currentStep > 1) {
      setCurrentStep(prev => prev - 1);
      setSubmitted(false);
    }
  };

  // Memoize the options array to prevent recreating it on each render
  const idTypeOptions = (0, _react.useMemo)(() => [{
    value: "passport",
    label: "Passport"
  }, {
    value: "driving_license",
    label: "Driving License"
  }, {
    value: "aadhar",
    label: "Aadhar Card"
  }, {
    value: "pan",
    label: "PAN Card"
  }, {
    value: "voter_id",
    label: "Voter ID"
  }], []);
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      maxWidth: "800px",
      margin: "0 auto",
      padding: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement("h2", {
    style: {
      color: "var(--kwikui-color-primary)",
      marginBottom: "24px"
    }
  }, "KwikID KYC Verification"), showSuccessMessage ? /*#__PURE__*/_react.default.createElement("div", {
    style: {
      padding: "20px",
      backgroundColor: "#e8f5e9",
      borderRadius: "8px",
      marginBottom: "20px",
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    }
  }, /*#__PURE__*/_react.default.createElement("h3", {
    style: {
      color: "#2e7d32",
      marginBottom: "10px"
    }
  }, "KYC Verification Submitted!"), /*#__PURE__*/_react.default.createElement("p", null, "Thank you for completing your KYC verification. Your information has been submitted successfully and is under review."), /*#__PURE__*/_react.default.createElement(_Button.default, {
    appearance: "primary",
    onClick: () => {
      setShowSuccessMessage(false);
      setFormData({
        fullName: "",
        idType: "",
        idNumber: "",
        dateOfBirth: "",
        address: "",
        phone: "",
        email: "",
        occupation: "",
        photoConsent: false,
        termsConsent: false,
        privacyConsent: false
      });
      setCurrentStep(1);
      setSubmitted(false);
    },
    customStyles: {
      marginTop: "16px"
    }
  }, "Start New Verification")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "32px"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      position: "relative"
    }
  }, Object.values(FORM_STEP).map(step => /*#__PURE__*/_react.default.createElement("div", {
    key: step,
    style: {
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      zIndex: 1,
      position: "relative"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: "40px",
      height: "40px",
      borderRadius: "50%",
      backgroundColor: currentStep >= step ? "var(--kwikui-color-primary)" : "#e0e0e0",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      color: "white",
      marginBottom: "8px"
    }
  }, step), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      fontSize: "14px",
      color: currentStep >= step ? "var(--kwikui-color-primary)" : "#757575",
      fontWeight: currentStep === step ? "bold" : "normal"
    }
  }, step === FORM_STEP.PERSONAL_INFO ? "Personal Info" : step === FORM_STEP.CONTACT_INFO ? "Contact Info" : "Consents"))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      position: "absolute",
      top: "20px",
      left: "70px",
      right: "70px",
      height: "2px",
      backgroundColor: "#e0e0e0",
      zIndex: 0
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: currentStep === FORM_STEP.PERSONAL_INFO ? PROGRESS_PERCENTAGE.STEP_1 : currentStep === FORM_STEP.CONTACT_INFO ? PROGRESS_PERCENTAGE.STEP_2 : PROGRESS_PERCENTAGE.STEP_3,
      height: "100%",
      backgroundColor: "var(--kwikui-color-primary)",
      transition: "width 0.3s ease"
    }
  })))), currentStep === FORM_STEP.PERSONAL_INFO && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "fullName",
    label: "Full Name",
    placeholder: "Enter your full name as in ID",
    required: true,
    value: formData.fullName,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.fullName ? [{
      type: "error",
      message: errors.fullName
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
    id: "idType",
    label: "ID Type",
    placeholder: "Select your ID type",
    required: true,
    options: idTypeOptions,
    value: formData.idType,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.idType ? [{
      type: "error",
      message: errors.idType
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "idNumber",
    label: "ID Number",
    placeholder: "Enter your ID number",
    required: true,
    value: formData.idNumber,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.idNumber ? [{
      type: "error",
      message: errors.idNumber
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputDateTime.default, {
    id: "dateOfBirth",
    variant: "date",
    label: "Date of Birth",
    placeholder: "Select your date of birth",
    required: true,
    value: formData.dateOfBirth,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.dateOfBirth ? [{
      type: "error",
      message: errors.dateOfBirth
    }] : []
  }))), currentStep === FORM_STEP.CONTACT_INFO && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_Textarea.default, {
    id: "address",
    label: "Current Address",
    placeholder: "Enter your current residential address",
    required: true,
    value: formData.address,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    textCase: "default",
    messages: submitted && errors.address ? [{
      type: "error",
      message: errors.address
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "phone",
    label: "Phone Number",
    placeholder: "Enter your mobile number",
    required: true,
    value: formData.phone,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.phone ? [{
      type: "error",
      message: errors.phone
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "email",
    label: "Email Address",
    placeholder: "Enter your email address",
    required: true,
    value: formData.email,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.email ? [{
      type: "error",
      message: errors.email
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "occupation",
    label: "Occupation",
    placeholder: "Enter your current occupation",
    required: true,
    value: formData.occupation,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.occupation ? [{
      type: "error",
      message: errors.occupation
    }] : []
  }))), currentStep === FORM_STEP.CONSENTS && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "24px",
      padding: "16px",
      backgroundColor: "#f5f5f5",
      borderRadius: "8px"
    }
  }, /*#__PURE__*/_react.default.createElement("h3", {
    style: {
      marginBottom: "16px",
      color: "var(--kwikui-color-primary)"
    }
  }, "Consents and Declarations"), /*#__PURE__*/_react.default.createElement("p", {
    style: {
      marginBottom: "16px",
      fontSize: "14px",
      color: "#666"
    }
  }, "Please review the following declarations carefully and provide your consent.")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, {
    id: "photoConsent",
    placeholder: "I consent to the use of my photo and video for identity verification purposes",
    required: true,
    value: formData.photoConsent,
    onInput: handleChange,
    shape: _InputCheckbox2.IKwikUIInputCheckboxShape.CURVED,
    messages: submitted && errors.photoConsent ? [{
      type: "error",
      message: errors.photoConsent
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, {
    id: "termsConsent",
    placeholder: "I have read and agree to the Terms and Conditions of KwikID KYC Verification",
    required: true,
    value: formData.termsConsent,
    onInput: handleChange,
    shape: _InputCheckbox2.IKwikUIInputCheckboxShape.CURVED,
    messages: submitted && errors.termsConsent ? [{
      type: "error",
      message: errors.termsConsent
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, {
    id: "privacyConsent",
    placeholder: "I acknowledge that my information will be processed as described in the Privacy Policy",
    required: true,
    value: formData.privacyConsent,
    onInput: handleChange,
    shape: _InputCheckbox2.IKwikUIInputCheckboxShape.CURVED,
    messages: submitted && errors.privacyConsent ? [{
      type: "error",
      message: errors.privacyConsent
    }] : []
  }))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      justifyContent: "space-between",
      marginTop: "32px"
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    appearance: "secondary",
    onClick: handleBack,
    disabled: currentStep === FORM_STEP.PERSONAL_INFO
  }, "Back"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    appearance: "primary",
    onClick: handleNext
  }, currentStep === FORM_STEP.CONSENTS ? "Submit" : "Next"))));
};
exports.KYCForm = KYCForm;
KYCForm.parameters = {
  docs: {
    description: {
      story: "A multi-step KYC verification form that demonstrates form progression and validation."
    }
  }
};

/**
 * Login Form
 */
const LoginForm = () => {
  const [formData, setFormData] = (0, _react.useState)({
    email: "",
    password: "",
    rememberMe: false
  });
  const [errors, setErrors] = (0, _react.useState)({});
  const [submitted, setSubmitted] = (0, _react.useState)(false);
  const [loading, setLoading] = (0, _react.useState)(false);
  const handleChange = (id, value) => {
    setFormData(prev => ({
      ...prev,
      [id]: value
    }));

    // Clear error when field is changed
    if (errors[id]) {
      setErrors(prev => {
        const newErrors = {
          ...prev
        };
        delete newErrors[id];
        return newErrors;
      });
    }
  };
  const validateForm = () => {
    const newErrors = {};
    if (!formData.email) {
      newErrors.email = "Email is required";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid";
    }
    if (!formData.password) {
      newErrors.password = "Password is required";
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  const handleSubmit = () => {
    setSubmitted(true);
    const isValid = validateForm();
    if (isValid) {
      setLoading(true);
      // Simulate API call
      setTimeout(() => {
        setLoading(false);
        // In a real app, you would handle the login response here
        console.log("Login submitted:", formData);
      }, LOGIN_SIMULATION_TIMEOUT);
    }
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      maxWidth: "400px",
      margin: "0 auto",
      padding: "20px",
      borderRadius: "8px",
      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      textAlign: "center",
      marginBottom: "24px"
    }
  }, /*#__PURE__*/_react.default.createElement("h2", {
    style: {
      color: "var(--kwikui-color-primary)",
      marginBottom: "8px"
    }
  }, "Welcome to KwikID"), /*#__PURE__*/_react.default.createElement("p", {
    style: {
      color: "#666"
    }
  }, "Log in to access your account")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputText.default, {
    id: "email",
    label: "Email Address",
    placeholder: "Enter your email address",
    required: true,
    value: formData.email,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.email ? [{
      type: "error",
      message: errors.email
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "password",
    label: "Password",
    placeholder: "Enter your password",
    required: true,
    value: formData.password,
    onInput: handleChange,
    shape: _Shape.IKwikUIShape.CURVED,
    messages: submitted && errors.password ? [{
      type: "error",
      message: errors.password
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "24px",
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, {
    id: "rememberMe",
    placeholder: "Remember me",
    required: false,
    value: formData.rememberMe,
    onInput: handleChange,
    shape: _InputCheckbox2.IKwikUIInputCheckboxShape.CURVED
  }), /*#__PURE__*/_react.default.createElement("a", {
    href: "/#/",
    style: {
      color: "var(--kwikui-color-primary)",
      textDecoration: "none",
      fontSize: "14px"
    }
  }, "Forgot password?")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    appearance: "primary",
    onClick: handleSubmit,
    disabled: loading,
    customStyles: {
      width: "100%",
      justifyContent: "center"
    }
  }, loading ? "Logging in..." : "Log In")), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      textAlign: "center",
      marginTop: "16px",
      fontSize: "14px",
      color: "#666"
    }
  }, "Don't have an account?\xA0", /*#__PURE__*/_react.default.createElement("a", {
    href: "/#/",
    style: {
      color: "var(--kwikui-color-primary)",
      textDecoration: "none"
    }
  }, "Sign up")));
};
exports.LoginForm = LoginForm;
LoginForm.parameters = {
  docs: {
    description: {
      story: "A simple login form showcasing essential form controls in a compact layout."
    }
  }
};

/**
 * Date Filter Form - Horizontal Layout
 */
const DateFilterForm = () => {
  const [startDate, setStartDate] = (0, _react.useState)("");
  const [endDate, setEndDate] = (0, _react.useState)("");
  const [filterType, setFilterType] = (0, _react.useState)("Custom Date Range");
  const [submitted, setSubmitted] = (0, _react.useState)(false);
  const [errors, setErrors] = (0, _react.useState)({});
  const handleStartDateChange = (_id, value) => {
    setStartDate(value);
    if (errors.startDate) {
      setErrors(prev => {
        const newErrors = {
          ...prev
        };
        delete newErrors.startDate;
        return newErrors;
      });
    }
  };
  const handleEndDateChange = (_id, value) => {
    setEndDate(value);
    if (errors.endDate) {
      setErrors(prev => {
        const newErrors = {
          ...prev
        };
        delete newErrors.endDate;
        return newErrors;
      });
    }
  };
  const handleFilterTypeChange = (_id, value) => {
    // Ensure we're getting the string value whether it's passed directly or as an object
    const filterValue = typeof value === "object" && value !== null ? value.label : value;
    console.log("Filter type changed to:", filterValue);
    setFilterType(filterValue);

    // Pre-set date ranges based on filter type
    const today = new Date();
    if (filterValue === "Today") {
      const formattedDate = today.toISOString().split("T")[0];
      setStartDate(formattedDate);
      setEndDate(formattedDate);
    } else if (filterValue === "Last 7 Days") {
      const lastWeek = new Date(today);
      lastWeek.setDate(today.getDate() - DATE_RANGE.DAYS_IN_WEEK);
      setStartDate(lastWeek.toISOString().split("T")[0]);
      setEndDate(today.toISOString().split("T")[0]);
    } else if (filterValue === "Last 30 Days") {
      const lastMonth = new Date(today);
      lastMonth.setDate(today.getDate() - DATE_RANGE.DAYS_IN_MONTH);
      setStartDate(lastMonth.toISOString().split("T")[0]);
      setEndDate(today.toISOString().split("T")[0]);
    }
    // For custom, do not automatically set dates
  };
  const validateDates = () => {
    const newErrors = {};
    if (!startDate) {
      newErrors.startDate = "Start date is required";
    }
    if (!endDate) {
      newErrors.endDate = "End date is required";
    } else if (startDate && endDate && new Date(startDate) > new Date(endDate)) {
      newErrors.endDate = "End date must be after start date";
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  const handleApplyFilter = () => {
    setSubmitted(true);
    const isValid = validateDates();
    if (isValid) {
      console.log("Applying date filter:", {
        startDate,
        endDate,
        filterType
      });
      // In a real app, you would apply the filter to your data here
    }
  };

  // Memoize the filter type options
  const filterTypeOptions = (0, _react.useMemo)(() => ["Custom Date Range", "Today", "Last 7 Days", "Last 30 Days"], []);

  // For debugging
  console.log("Current filterType:", filterType);
  const isCustom = filterType === "Custom Date Range";
  console.log("Is custom filter:", isCustom);
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", {
    style: {
      color: "var(--kwikui-color-primary)",
      marginBottom: "24px"
    }
  }, "Transaction Date Filter (Horizontal Layout)"), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      alignItems: "flex-end",
      gap: "16px",
      flexWrap: "wrap",
      backgroundColor: "#f5f5f5",
      padding: "20px",
      borderRadius: "8px"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      minWidth: "200px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
    id: "filterType",
    label: "Date Range",
    placeholder: "Select date range",
    options: filterTypeOptions,
    size: "xxl",
    variant: _InputSelect2.IKwikUIInputSelectVariant.DROPDOWN,
    value: filterType,
    onInput: handleFilterTypeChange,
    shape: _Shape.IKwikUIShape.CURVED
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      minWidth: "200px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputDateTime.default, {
    id: "startDate",
    variant: _InputDateTime2.IKwikUIInputDateTimeVariant.DATE,
    label: "Start Date",
    placeholder: "Select start date",
    value: startDate,
    onInput: handleStartDateChange,
    size: "xxl",
    shape: _Shape.IKwikUIShape.CURVED,
    disabled: filterType !== "Custom Date Range",
    messages: submitted && errors.startDate ? [{
      type: "error",
      message: errors.startDate
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      minWidth: "200px"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputDateTime.default, {
    id: "endDate",
    variant: _InputDateTime2.IKwikUIInputDateTimeVariant.DATE,
    label: "End Date",
    placeholder: "Select end date",
    value: endDate,
    size: "xxl",
    onInput: handleEndDateChange,
    shape: _Shape.IKwikUIShape.CURVED,
    disabled: filterType !== "Custom Date Range",
    messages: submitted && errors.endDate ? [{
      type: "error",
      message: errors.endDate
    }] : []
  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
    appearance: "primary",
    onClick: handleApplyFilter
  }, "Apply Filter"))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginTop: "20px"
    }
  }, /*#__PURE__*/_react.default.createElement("p", null, "Selected date range:", " ", startDate ? new Date(startDate).toLocaleDateString() : "Not set", " to ", endDate ? new Date(endDate).toLocaleDateString() : "Not set")));
};
exports.DateFilterForm = DateFilterForm;
DateFilterForm.parameters = {
  docs: {
    description: {
      story: "A compact date filter form with all components arranged horizontally, ideal for filtering data by date range."
    }
  }
};