import { Button, Input, NavBar } from '@anephenix/ui';
import '@anephenix/ui/dist/index.css';

import { Page } from '@anephenix/ui';

<Page>
    <p>Your content here</p>
</Page>

import { Hero } from '@anephenix/ui';

const ctas = [
    { href: '/get-started', text: 'Get started', buttonClass: 'primary' },
    { href: '/docs', text: 'Documentation', buttonClass: 'secondary' },
];

<Hero
    title="Welcome"
    description="A short description of your product."
    ctas={ctas}
    Link={Link}
/>

import { Footer } from '@anephenix/ui';

<Footer
    leftSection={<span>&copy; 2026 Acme Ltd.</span>}
    rightSection={<a href="/privacy">Privacy</a>}
/>

import { Breadcrumb } from '@anephenix/ui';

<Breadcrumb
    items={[
        { label: 'Home', href: '/' },
        { label: 'Products', href: '/products' },
        { label: 'Laptops' },
    ]}
/>

import { NavBar } from '@anephenix/ui';

const links = [
    {
        id: 'home',
        text: 'Home',
        url: '/',
        hideOnDesktop: false,
        hideOptions: ({ loggedIn }) => true,
    },
];

<NavBar
    logo={<a href="/">My App</a>}
    links={links}
    loggedIn={false}
    Link={Link}
/>

import { Pagination } from '@anephenix/ui';

const [page, setPage] = useState(1);

<Pagination
    currentPage={page}
    totalPages={20}
    onPageChange={setPage}
/>

import { Button } from '@anephenix/ui';

<Button text="Submit" className="button theme-default primary" onClick={handleClick} />

import { Checkbox } from '@anephenix/ui';

<Checkbox name="agree" label="I agree to the terms" defaultValue={false} />

import { Switch } from '@anephenix/ui';

// Uncontrolled
<Switch name="notifications" label="Enable notifications" defaultChecked={false} />

// Controlled
const [enabled, setEnabled] = useState(false);
<Switch
    name="darkMode"
    label="Dark mode"
    checked={enabled}
    onChange={(e) => setEnabled(e.target.checked)}
/>

import { Input } from '@anephenix/ui';

<Input
    name="email"
    type="email"
    placeholder="you@example.com"
    onChange={handleChange}
/>

import { RadioButton } from '@anephenix/ui';

const [selected, setSelected] = useState('');

<RadioButton
    name="colour"
    label="Red"
    value="red"
    checked={selected === 'red'}
    onChange={() => setSelected('red')}
/>

import { Select } from '@anephenix/ui';

const options = [
    { value: 'gb', label: 'United Kingdom' },
    { value: 'us', label: 'United States' },
];

<Select name="country" options={options} onChange={handleChange} />

import { Dropdown } from '@anephenix/ui';

const options = [
    { value: 'js', text: 'JavaScript' },
    { value: 'ts', text: 'TypeScript' },
];

<Dropdown name="language" options={options} />

import { ComboBox } from '@anephenix/ui';

const options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
];

const [selected, setSelected] = useState(null);

<ComboBox
    options={options}
    placeholder="Search fruit..."
    onSelect={(option) => setSelected(option)}
/>

import { Textarea } from '@anephenix/ui';

<Textarea name="message" placeholder="Enter your message..." onChange={handleChange} />

import { FormField, Input } from '@anephenix/ui';

<FormField error="This field is required">
    <Input name="email" type="email" />
</FormField>

import { Accordion } from '@anephenix/ui';

const items = [
    { id: 'q1', title: 'What is this?', content: <p>An answer.</p> },
    { id: 'q2', title: 'How does it work?', content: <p>Another answer.</p> },
];

<Accordion items={items} defaultOpen="q1" />

import { Alert } from '@anephenix/ui';

// Persistent
<Alert variant="success" title="Saved">Your changes have been saved.</Alert>

// Dismissible
<Alert variant="warning" onClose={() => setVisible(false)}>
    Your session will expire in 5 minutes.
</Alert>

import { Divider } from '@anephenix/ui';

// Basic horizontal divider
<Divider />

// With a centred label
<Divider label="or" />

// Dashed variant
<Divider variant="dashed" />

// Vertical (inside a flex container)
<div style={{ display: 'flex', height: '2rem', alignItems: 'center', gap: '1rem' }}>
    <span>Left</span>
    <Divider orientation="vertical" />
    <span>Right</span>
</div>

import { Avatar } from '@anephenix/ui';

// Image
<Avatar src="/photo.jpg" alt="Alice Brown" />

// Initials fallback
<Avatar name="Alice Brown" size="lg" />

// Icon fallback
<Avatar size="md" shape="rounded" />

import { Badge } from '@anephenix/ui';

<Badge variant="success">Active</Badge>
<Badge variant="error" size="sm">99+</Badge>
<Badge variant="default">React</Badge>

import { Card } from '@anephenix/ui';

<Card
    title="Getting started"
    subtitle="Up and running in minutes"
    footer={<Button text="View docs" className="button theme-default primary" />}
>
    <p>Build consistent UIs with a plain-CSS design system.</p>
</Card>

import { Code } from '@anephenix/ui';

const snippet = `const greet = (name) => \`Hello, \${name}!\`;`;

<Code title="greet.js" code={snippet} language="javascript" />

import { Popover } from '@anephenix/ui';

<Popover
    trigger={<Button text="Options" className="button theme-default secondary" />}
    title="Display options"
    content={<p>Popover body content.</p>}
    position="bottom"
/>

import { ProgressBar } from '@anephenix/ui';

<ProgressBar value={75} label="Uploading..." showValue />

<ProgressBar value={100} variant="success" label="Complete" showValue />

<ProgressBar indeterminate label="Processing..." />

import { Skeleton } from '@anephenix/ui';

// Single text line
<Skeleton width="60%" />

// Paragraph
<Skeleton lines={3} />

// Avatar circle
<Skeleton width={48} height={48} borderRadius="50%" />

import { Spinner } from '@anephenix/ui';

<Spinner size="md" label="Loading..." />

import { Table } from '@anephenix/ui';

const columns = [
    { key: 'name', header: 'Name' },
    { key: 'role', header: 'Role' },
    {
        key: 'status',
        header: 'Status',
        render: (value) => <strong>{value}</strong>,
    },
];

const rows = [
    { id: 1, name: 'Alice Chen', role: 'Engineer', status: 'Active' },
    { id: 2, name: 'Bob Smith', role: 'Designer', status: 'Inactive' },
];

<Table columns={columns} rows={rows} caption="Team members" />

import { Tabs } from '@anephenix/ui';

const tabs = [
    { id: 'overview', label: 'Overview', content: <p>Overview content.</p> },
    { id: 'specs', label: 'Specifications', content: <p>Specs here.</p> },
];

<Tabs tabs={tabs} defaultTab="overview" onChange={(id) => console.log(id)} />

import { Terminal } from '@anephenix/ui';

<Terminal title="Install" code="npm i @anephenix/ui" />

import { Tooltip } from '@anephenix/ui';

<Tooltip content="Save your changes" position="top">
    <button type="button">Save</button>
</Tooltip>

import { Modal } from '@anephenix/ui';

const [isOpen, setIsOpen] = useState(false);

<Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    title="Confirm action"
    footer={
        <>
            <Button text="Cancel" className="button theme-default secondary alternate" onClick={() => setIsOpen(false)} />
            <Button text="Confirm" className="button theme-default primary" onClick={() => setIsOpen(false)} />
        </>
    }
>
    <p>Are you sure you want to do this?</p>
</Modal>

import { Toast } from '@anephenix/ui';

const [isVisible, setIsVisible] = useState(false);

<Toast
    isVisible={isVisible}
    title="Saved"
    message="Your changes have been saved."
    variant="success"
    duration={4000}
    onClose={() => setIsVisible(false)}
/>

import { handleErrors } from '@anephenix/ui';

try {
    await api.post('/login', data);
} catch (err) {
    handleErrors(setError, err);
}