Input

import Input from '@/components/ui/Input';

export default function BasicDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <Input placeholder="Workspace name" />
    </div>
  );
}

import Input from '@/components/ui/Input';

export default function SizeDemo() {
  return (
    <div className="mx-auto w-full max-w-md space-y-4">
      <Input size="sm" placeholder="Small input" />
      <Input placeholder="Medium input" />
      <Input size="lg" placeholder="Large input" />
    </div>
  );
}

import Input from '@/components/ui/Input';

export default function DisabledDemo() {
  return (
    <div className="mx-auto grid w-full max-w-md gap-4 sm:grid-cols-2">
      <Input disabled defaultValue="Disabled value" />
      <Input readOnly defaultValue="Read only value" />
    </div>
  );
}

import { PiMagnifyingGlass, PiQuestion } from 'react-icons/pi'
import Input from '@/components/ui/Input';
import Tooltip from '@/components/ui/Tooltip';

export default function AffixDemo() {
  return (
    <div className="mx-auto w-full max-w-md space-y-4">
      <Input
        aria-label="Search customers"
        placeholder="Search customers"
        prefix={<PiMagnifyingGlass className="text-base text-muted-foreground" />}
      />

      <Input
        aria-label="Monthly budget"
        defaultValue="12000"
        prefix="$"
        suffix="USD"
      />

      <Input
        aria-label="Workspace slug"
        placeholder="northwind-sales"
        suffix={
          <Tooltip 
            title="Use lowercase letters, numbers, and dashes."
            tabIndex={0}
            aria-label="Workspace slug help"
          >
            <PiQuestion className="text-base text-muted-foreground cursor-help" />
          </Tooltip>
        }
      />
    </div>
  );
}

import { useState } from 'react';
import { PiEye, PiEyeSlash } from 'react-icons/pi'
import Input from '@/components/ui/Input';

export default function PasswordVisibilityDemo() {
  const [visible, setVisible] = useState(false);

  return (
    <div className="mx-auto w-full max-w-md">
      <Input
        type={visible ? 'text' : 'password'}
        placeholder="Password"
        suffix={
          <button
            type="button"
            aria-label={visible ? 'Hide password' : 'Show password'}
            className="inline-flex cursor-pointer items-center text-muted-foreground transition-colors hover:text-foreground"
            onClick={() => setVisible((current) => !current)}
          >
            {visible ? (
              <PiEyeSlash className="text-base" />
            ) : (
              <PiEye className="text-base" />
            )}
          </button>
        }
      />
    </div>
  );
}

import Input from '@/components/ui/Input';

export default function TextareaDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <Input
        textArea
        rows={4}
        placeholder="Write an internal note"
        defaultValue="Follow up after the onboarding call."
      />
    </div>
  );
}

import { useState } from 'react';
import { PiWarningCircle } from 'react-icons/pi'
import Button from '@/components/ui/Button';
import Form from '@/components/ui/Form';
import Input from '@/components/ui/Input';

export default function InvalidDemo() {
  const [invalid, setInvalid] = useState(true);

  return (
    <Form
      className="mx-auto w-full max-w-md"
      onSubmit={(event) => event.preventDefault()}
    >
      <Form.Field
        label="Invite email"
        htmlFor="invalid-email"
        invalid={invalid}
        errorMessage={invalid ? 'Enter a valid email address.' : undefined}
      >
        <Input
          id="invalid-email"
          name="email"
          type="email"
          invalid={invalid}
          defaultValue="alex@"
          suffix={invalid ? <PiWarningCircle className="text-base" /> : null}
        />
      </Form.Field>

      <div className="flex justify-end gap-2">
        <Button type="button" onClick={() => setInvalid((current) => !current)}>
          Set {invalid ? 'valid' : 'invalid'}
        </Button>
      </div>
    </Form>
  );
}

import { useState } from 'react';
import Input from '@/components/ui/Input';
import type { ChangeEvent } from 'react';

export default function ControlledDemo() {
  const [value, setValue] = useState('northwind-sales');

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  return (
    <div className="mx-auto w-full max-w-md space-y-2">
      <Input
        value={value}
        placeholder="Workspace slug"
        onChange={handleChange}
      />
      <div className="text-xs text-muted-foreground">
        Current value: {value || 'empty'}
      </div>
    </div>
  );
}