Components

Button

Interactive button component.

Usage
Props

import { Button } from './components/Button';

<Button>Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Danger</Button>
<Button disabled>Disabled</Button>

Prop	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'secondary' \| 'danger'`	`'default'`	Button style
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size
`disabled`	`boolean`	`false`	Disable button
`onClick`	`function`	-	Click handler

Input

Text input field.

import { Input } from './components/Input';

<Input placeholder="Enter text..." />
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input disabled value="Disabled input" />

Props:

Prop	Type	Default
`type`	`string`	`'text'`
`placeholder`	`string`	`''`
`value`	`string`	`''`
`onChange`	`function`	-
`disabled`	`boolean`	`false`

Card

Container for content.

import { Card, CardHeader, CardBody, CardFooter } from './components/Card';

<Card>
  <CardHeader>
    <h3>Card Title</h3>
  </CardHeader>
  <CardBody>
    <p>Card content goes here.</p>
  </CardBody>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Dialog overlay.

import { Modal, useModal } from './components/Modal';

function Example() {
  const { isOpen, open, close } = useModal();

  return (
    <>
      <Button onClick={open}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={close}>
        <h2>Modal Title</h2>
        <p>Modal content here.</p>
      </Modal>
    </>
  );
}