import { Input } from 'ui-lab-components';
 
export const metadata = {
  title: 'Basic Input',
  description: 'A simple text input field with default styling. Use this as the standard input element for collecting user text input.',
};
 
export default function Example() {
  return <Input placeholder="Enter text..." />;
}
 

import { Input, Label } from 'ui-lab-components';
import { FaCircleCheck, FaCircleExclamation } from 'react-icons/fa6';
 
export const metadata = {
  title: 'Validation States',
  description: 'Input fields with error and success validation states, including helper text for user feedback.',
};
 
export default function Example() {
  return (
    <div className="flex flex-col gap-6 w-full max-w-sm">
      <div className="flex flex-col gap-1.5">
        <Label error helperText="Please enter a valid email address" helperTextError>
          Email
        </Label>
        <Input
          type="email"
          placeholder="Enter your email"
          error
          defaultValue="invalid-email"
          icon={{ suffix: <FaCircleExclamation className="text-danger-600" size={14} /> }}
        />
      </div>
 
      <div className="flex flex-col gap-1.5">
        <Label helperText="Email address is available">
          Email
        </Label>
        <Input
          type="email"
          placeholder="Enter your email"
          defaultValue="user@example.com"
          icon={{ suffix: <FaCircleCheck className="text-success-600" size={14} /> }}
          className="border-success-600 focus:border-success-600"
        />
      </div>
 
      <div className="flex flex-col gap-1.5">
        <Label required helperText="We'll never share your email with anyone else.">
          Email
        </Label>
        <Input type="email" placeholder="Enter your email" />
      </div>
    </div>
  );
}
 

"use client";
 
import { useState } from 'react';
import { Button, Flex, Input } from 'ui-lab-components';
import { FaEnvelope, FaEye, FaEyeSlash, FaLock } from 'react-icons/fa6';
 
export const metadata = {
  title: 'Sign In Form',
  description: 'Email and password fields with a password visibility toggle — a common authentication pattern.',
};
 
export default function Example() {
  const [showPassword, setShowPassword] = useState(false);
 
  return (
    <Flex direction="column" gap="sm" style={{ width: 320 }}>
      <Input
        type="email"
        icon={<FaEnvelope className="w-3.5 h-3.5 text-foreground-400" />}
        placeholder="Email address"
        autoComplete="email"
      />
      <Input
        type={showPassword ? 'text' : 'password'}
        icon={<FaLock className="w-3.5 h-3.5 text-foreground-400" />}
        placeholder="Password"
        autoComplete="current-password"
        actions={[
          {
            icon: showPassword
              ? <FaEyeSlash className="w-3.5 h-3.5" />
              : <FaEye className="w-3.5 h-3.5" />,
            title: showPassword ? 'Hide password' : 'Show password',
            onClick: () => setShowPassword((value) => !value),
          },
        ]}
      />
      <Button variant="primary" className="w-full mt-1">Sign in</Button>
    </Flex>
  );
}
 

"use client";
 
import { useState } from 'react';
import { Flex, Input } from 'ui-lab-components';
import { FaAt, FaCheck, FaCopy } from 'react-icons/fa6';
 
export const metadata = {
  title: 'User Handle',
  description: 'Editable username field with an inline copy action.',
};
 
export default function Example() {
  const [handle, setHandle] = useState('kyza');
  const [copied, setCopied] = useState(false);
 
  const handleCopy = () => {
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };
 
  return (
    <Flex direction="column" gap="sm" style={{ width: 320 }}>
      <Input
        icon={<FaAt className="w-3.5 h-3.5 text-foreground-400" />}
        placeholder="username"
        value={handle}
        onChange={(event) => setHandle(event.target.value)}
        actions={[
          {
            icon: copied
              ? <FaCheck className="w-3.5 h-3.5 text-green-500" />
              : <FaCopy className="w-3.5 h-3.5" />,
            title: copied ? 'Copied!' : 'Copy handle',
            onClick: handleCopy,
          },
        ]}
      />
    </Flex>
  );
}
 

"use client";
 
import { useState } from 'react';
import { Flex, Input } from 'ui-lab-components';
import { FaCheck, FaCopy, FaEye, FaEyeSlash, FaKey } from 'react-icons/fa6';
 
export const metadata = {
  title: 'API Key',
  description: 'Read-only secret field with reveal and copy actions — suitable for credentials and tokens.',
};
 
export default function Example() {
  const [revealed, setRevealed] = useState(false);
  const [copied, setCopied] = useState(false);
  const key = 'sk-proj-a8f2c1d9e4b7';
 
  const handleCopy = () => {
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };
 
  return (
    <Flex direction="column" gap="sm" style={{ width: 360 }}>
      <Input
        type={revealed ? 'text' : 'password'}
        icon={<FaKey className="w-3.5 h-3.5 text-foreground-400" />}
        value={key}
        readOnly
        actions={[
          {
            icon: revealed
              ? <FaEyeSlash className="w-3.5 h-3.5" />
              : <FaEye className="w-3.5 h-3.5" />,
            title: revealed ? 'Hide key' : 'Reveal key',
            onClick: () => setRevealed((value) => !value),
          },
          {
            icon: copied
              ? <FaCheck className="w-3.5 h-3.5 text-green-500" />
              : <FaCopy className="w-3.5 h-3.5" />,
            title: copied ? 'Copied!' : 'Copy key',
            onClick: handleCopy,
          },
        ]}
      />
    </Flex>
  );
}
 

"use client";
 
import { useState } from 'react';
import { Flex, Input } from 'ui-lab-components';
import { FaCheck, FaCircleExclamation, FaLink } from 'react-icons/fa6';
 
export const metadata = {
  title: 'URL with Validation',
  description: 'URL field that shows a success or error icon in the suffix slot based on the input value.',
};
 
export default function Example() {
  const [url, setUrl] = useState('');
 
  const isValid = url.length === 0 || /^https?:\/\/.+\..+/.test(url);
  const showError = url.length > 0 && !isValid;
 
  return (
    <Flex direction="column" gap="sm" style={{ width: 340 }}>
      <Input
        placeholder="https://example.com"
        value={url}
        onChange={(event) => setUrl(event.target.value)}
        error={showError}
        icon={{
          prefix: <FaLink className="w-3.5 h-3.5 text-foreground-400" />,
          suffix: showError
            ? <FaCircleExclamation className="w-3.5 h-3.5 text-red-500" />
            : url.length > 0
              ? <FaCheck className="w-3.5 h-3.5 text-green-500" />
              : undefined,
        }}
      />
    </Flex>
  );
}
 

"use client";
 
import { useState } from 'react';
import { Flex, Input } from 'ui-lab-components';
 
export const metadata = {
  title: 'Quantity',
  description: 'Number input with native spin controls for selecting a bounded quantity.',
};
 
export default function Example() {
  const [qty, setQty] = useState(1);
 
  return (
    <Flex direction="column" gap="sm" style={{ width: 200 }}>
      <Input
        type="number"
        placeholder="Qty"
        value={qty}
        min={1}
        max={99}
        onChange={(event) => setQty(Number(event.target.value))}
      />
    </Flex>
  );
}