Input

import { useState } from "react";
import { Input } from "@peppermint-design/devreadykit-custom";

export default function InputExample() {
  const [value, setValue] = useState('');

  return (
    <div className="flex min-w-[230px] flex-col gap-4">
      <Input
        value={value}
        onChange={(nextValue) => setValue(String(nextValue))}
        label="Full name"
        placeholder="e.g., Ada Lovelace"
        supportText="Use your legal name as on your ID."
      />
    </div>
  );
}

import { useState } from "react";
import Input from "@peppermint-design/devreadykit-custom";

export default function InputTypes() {
    const [numberValue, setNumberValue] = useState<number | string>("");
    const [password, setPassword] = useState<string>("");

    return (
        <div className="flex items-center flex-col gap-4 w-full">
            <div className="w-full flex flex-col gap-6">
                <Input
                    type="text"
                    placeholder="Enter your name"
                    label="Full Name"
                />

                <Input
                    type="number"
                    placeholder="0"
                    label="Quantity"
                    value={numberValue}
                    onChange={setNumberValue}
                />

                <Input
                    type="password"
                    placeholder="Enter password"
                    label="Password"
                    value={password}
                    onChange={(value) => setPassword(String(value))}
                />
            </div>
        </div>
    );
}

 import { useState } from "react";
 import Input from "@peppermint-design/devreadykit-custom";

export default function InputWithLabels() {
    const [email, setEmail] = useState<string>("");
    const [required, setRequired] = useState<string>("");

    return (
        <div className="flex items-center flex-col gap-4 w-full">
            <div className="w-full flex flex-col gap-6">
                <Input
                    label="Email Address"
                    placeholder="user@example.com"
                    supportText="We'll never share your email"
                    value={email}
                    onChange={(value) => setEmail(String(value))}
                />

                <Input
                    label="Required Field"
                    placeholder="This field is required"
                    required
                    value={required}
                    onChange={(value) => setRequired(String(value))}
                />
            </div>
        </div>
    );
}

import Input from "@peppermint-design/devreadykit-custom";
import { Circle } from "@/assets/icons/circle.tsx";

export default function InputWithIcons() {
  return (
    <div className="flex items-center flex-col gap-4 w-full">
        <Input
          placeholder="Amount"
          type="number"
          label="Amount"
          startIcon={<Circle />}
        />
    </div>
  );
}

<Input 
  placeholder="Enter email"
  label="Email"
  errorMessage="Please enter a valid email address"
  value="invalid-email"
/>

import Input from "@peppermint-design/devreadykit-custom";

export default function InputStates() {
  return (
    <div className="flex items-center flex-col gap-4 w-full">
      <div className="w-full flex flex-col gap-6">
        <Input
          placeholder="Disabled input"
          label="Disabled Field"
          value="Cannot edit this"
          disabled
        />

        <Input
          placeholder="Read only input"
          label="Read Only Field"
          value="Cannot edit this"
          readOnly
        />
      </div>
    </div>
  );
}

import { Input, Button } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

function ContactFormExample() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
     console.log('Form submitted!');
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
      <Input
        label="Full Name"
        placeholder="John Doe"
        value={formData.name}
        onChange={(value) => setFormData(prev => ({ ...prev, name: value }))}
        required
      />
      
      <Input
        type="text"
        label="Email"
        placeholder="john@example.com"
        value={formData.email}
        onChange={(value) => setFormData(prev => ({ ...prev, email: value }))}
        required
      />
      
      <Input
        type="text"
        label="Phone"
        placeholder="+123 456-7890"
        value={formData.phone}
        onChange={(value) =>
          setFormData((prev) => ({ ...prev, phone: String(value) }))
        }
      />
      
      <Button type="submit" variant="filled" color="primary">
        Submit Form
      </Button>
    </form>
  );
}