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

// Variants
<Button size="sm" variant="primary">Primary</Button>
<Button size="sm" variant="secondary">Secondary</Button>
<Button size="sm" variant="ghost">Ghost</Button>
<Button size="sm" disabled>Disabled</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

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

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>

// In context
<Badge variant="secondary">New</Badge>
<Badge variant="outline">v0.0.1</Badge>
<Badge>MIT</Badge>
<Badge variant="secondary">TypeScript</Badge>

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

// Sizes
<Avatar initials="SM" size="sm" />
<Avatar initials="MD" size="md" />
<Avatar initials="LG" size="lg" />

// Colors
<Avatar initials="Dk" color="dark" />
<Avatar initials="Md" color="medium" />
<Avatar initials="Lt" color="light" />

// Stacked group
<div className="flex -space-x-2">
  <Avatar initials="A" size="sm" color="dark" />
  <Avatar initials="B" size="sm" color="medium" />
  <Avatar initials="+3" size="sm" color="light" />
</div>

import { Input } from '@gusvega/ui';
import { Label } from '@gusvega/ui';

<Label htmlFor="project-name">Project name</Label>
<Input id="project-name" placeholder="Default input" />

// Error state
<Label htmlFor="project-slug">Project slug</Label>
<Input
  id="project-slug"
  placeholder="With error state"
  error="This field is required"
/>

// Disabled
<Label htmlFor="disabled-input">Disabled field</Label>
<Input id="disabled-input" placeholder="Disabled" disabled />

import { Label } from '@gusvega/ui';

<Label htmlFor="email">Standard label</Label>
<Label htmlFor="name" required>Required label</Label>

// With input
<Label htmlFor="input" className="mb-1.5">With input</Label>
<Input id="input" placeholder="Value..." />

import { Textarea } from '@gusvega/ui';
import { Label } from '@gusvega/ui';

<Label htmlFor="message">Message</Label>
<Textarea id="message" placeholder="Write your message here..." rows={3} />

// Disabled
<Label htmlFor="readonly-notes">Notes</Label>
<Textarea id="readonly-notes" placeholder="Disabled textarea" disabled rows={2} />

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

const [v, setV] = useState({
  email: true,
  marketing: false,
  auth: true,
});

<Checkbox
  checked={v.email}
  onChange={(x) => setV(p => ({ ...p, email: x }))}
  label="Email notifications"
/>
<Checkbox
  checked={v.marketing}
  onChange={(x) => setV(p => ({ ...p, marketing: x }))}
  label="Marketing emails"
/>
<Checkbox
  checked={v.auth}
  onChange={(x) => setV(p => ({ ...p, auth: x }))}
  label="Two-factor auth"
/>
<Checkbox
  checked={false}
  onChange={() => {}}
  label="Disabled option"
  disabled
/>

import { Radio } from '@gusvega/ui';

const [plan, setPlan] = useState('pro');

<Radio name="plan" value="free"
  label="Free — $0/mo"
  checked={plan === 'free'} onChange={setPlan} />

<Radio name="plan" value="pro"
  label="Pro — $12/mo"
  checked={plan === 'pro'} onChange={setPlan} />

<Radio name="plan" value="team"
  label="Team — $49/mo"
  checked={plan === 'team'} onChange={setPlan} />

<Radio name="plan" value="enterprise"
  label="Enterprise (contact us)"
  checked={plan === 'enterprise'} onChange={setPlan}
  disabled />

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

const [v, setV] = useState({
  notifs: true,
  marketing: false,
  updates: true,
});

<Switch
  checked={v.notifs}
  onChange={(x) => setV(p => ({ ...p, notifs: x }))}
  label="Push notifications"
/>
<Switch
  checked={v.marketing}
  onChange={(x) => setV(p => ({ ...p, marketing: x }))}
  label="Marketing emails"
/>
<Switch
  checked={v.updates}
  onChange={(x) => setV(p => ({ ...p, updates: x }))}
  label="Product updates"
/>
<Switch checked={false} onChange={() => {}}
  label="Disabled" disabled />

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

<Select
  aria-label="Framework"
  placeholder="Choose a framework..."
  options={[
    { value: 'next',  label: 'Next.js'  },
    { value: 'remix', label: 'Remix'    },
    { value: 'vite',  label: 'Vite'     },
    { value: 'astro', label: 'Astro', disabled: true },
  ]}
  onChange={(value) => console.log(value)}
/>

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

// With hint
<FormField
  label="Username"
  htmlFor="ff-1"
  hint="Only letters and numbers."
>
  <Input id="ff-1" placeholder="gus_vega" />
</FormField>

// With error
<FormField
  label="Email"
  htmlFor="ff-2"
  required
  error="Invalid email address."
>
  <Input id="ff-2" type="email" placeholder="you@example.com" />
</FormField>

import { Tag } from '@gusvega/ui';

<Tag>Default</Tag>
<Tag variant="default">Dark</Tag>
<Tag variant="outline">Outline</Tag>

// Removable
<Tag onRemove={() => {}}>TypeScript</Tag>
<Tag onRemove={() => {}}>React</Tag>
<Tag onRemove={() => {}}>Tailwind</Tag>

import { Stat } from '@gusvega/ui';

<Stat label="Total Users" value="12,345"
  change="+8.2% this month" trend="up" />

<Stat label="Revenue" value="$84.2k"
  change="+12.5% this month" trend="up" />

<Stat label="Churn Rate" value="2.4%"
  change="-0.3% this month" trend="down" />

<Stat label="Uptime" value="99.9%" />

import { Code, Kbd } from '@gusvega/ui';

// Inline
<p>Run <Code>npm install @gusvega/ui</Code> to get started.</p>

// Block
<Code block>
  {"import { Button } from '@gusvega/ui';"}
</Code>

// Keyboard shortcuts
<div className="flex items-center gap-1.5">
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
  <span className="text-xs text-neutral-500">Command palette</span>
</div>
<div className="flex items-center gap-1.5">
  <Kbd>⌘</Kbd>
  <Kbd>S</Kbd>
  <span className="text-xs text-neutral-500">Save</span>
</div>

import { Progress } from '@gusvega/ui';

<Progress value={72} />

// With labels
<div>
  <div className="flex justify-between mb-2">
    <span>Storage</span>
    <span>72%</span>
  </div>
  <Progress value={72} />
</div>

<div>
  <div className="flex justify-between mb-2">
    <span>Bandwidth</span>
    <span>45%</span>
  </div>
  <Progress value={45} />
</div>

<div>
  <div className="flex justify-between mb-2">
    <span>Memory</span>
    <span>91%</span>
  </div>
  <Progress value={91} />
</div>

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

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

// With button
<Button disabled>
  <Spinner size="sm" className="mr-2" />
  Loading...
</Button>

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

<Alert variant="default" title="Heads up">
  Your free trial ends in 3 days. Upgrade to keep access.
</Alert>

<Alert variant="outline" title="Action required">
  Please verify your email address to continue.
</Alert>

<Alert variant="filled" title="Deployed successfully">
  Version 1.2.0 is now live in production.
</Alert>

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

// Text lines
<Skeleton variant="text" />
<Skeleton variant="text" width="60%" />

// Circular (avatar placeholder)
<Skeleton variant="circular" width={40} height={40} />

// Rectangular (image / card placeholder)
<Skeleton variant="rectangular" width={200} height={120} />

import { Breadcrumb, BreadcrumbItem } from '@gusvega/ui';

<Breadcrumb>
  <BreadcrumbItem href="#overview">Home</BreadcrumbItem>
  <BreadcrumbItem href="#components">Components</BreadcrumbItem>
  <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
</Breadcrumb>

// Longer breadcrumb
<Breadcrumb>
  <BreadcrumbItem href="#get-started">Docs</BreadcrumbItem>
  <BreadcrumbItem href="#components">Navigation</BreadcrumbItem>
  <BreadcrumbItem href="#comp-breadcrumb">Breadcrumb</BreadcrumbItem>
  <BreadcrumbItem>Examples</BreadcrumbItem>
</Breadcrumb>

import { Link } from '@gusvega/ui';

<Link href="#get-started">Default link</Link>
<Link href="#components" variant="muted">Muted link</Link>
<Link href="#tokens" variant="underline">Underline link</Link>

// In prose
<p>
  Read the <Link href="#get-started">documentation</Link> or view the{' '}
  <Link href="https://github.com/gusvega-dev/gus-ui-library" variant="muted">source on GitHub</Link>.
</p>

import {
  Card, CardHeader, CardContent, CardFooter,
  Avatar, Badge, Button
} from '@gusvega/ui';

<Card className="w-full">
  <CardHeader>
    <div className="flex items-center gap-3">
      <Avatar initials="GU" size="md" />
      <div>
        <p className="font-semibold">Gus Vega</p>
        <p className="text-xs text-neutral-500">Design Systems Engineer</p>
      </div>
    </div>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-neutral-500 leading-relaxed">
      Building the GUS UI design system — tokens, components, and documentation.
    </p>
    <div className="flex gap-2 mt-3">
      <Badge variant="secondary">Design</Badge>
      <Badge variant="outline">TypeScript</Badge>
      <Badge variant="outline">React</Badge>
    </div>
  </CardContent>
  <CardFooter className="flex justify-end gap-2">
    <Button variant="ghost" size="sm">Message</Button>
    <Button size="sm">Follow</Button>
  </CardFooter>
</Card>

import { Separator } from '@gusvega/ui';

// Horizontal (default)
<Separator />

// Vertical (set a fixed height on parent)
<div className="flex items-center gap-4 h-8">
  <span>Tokens</span>
  <Separator orientation="vertical" />
  <span>Library</span>
  <Separator orientation="vertical" />
  <span>Refapp</span>
</div>

import { Stack, Badge, Button } from '@gusvega/ui';

// Row
<Stack direction="row" gap={2} align="center">
  <Badge>Row</Badge>
  <Badge variant="secondary">Item 2</Badge>
  <Badge variant="outline">Item 3</Badge>
</Stack>

// Column
<Stack direction="col" gap={2}>
  <Button size="sm">First</Button>
  <Button size="sm" variant="secondary">Second</Button>
  <Button size="sm" variant="ghost">Third</Button>
</Stack>

// Space between
<Stack direction="row" justify="between" align="center"
  className="border border-neutral-100 rounded-lg p-3">
  <span className="font-medium">Dashboard</span>
  <div className="flex gap-2">
    <Button size="sm" variant="ghost">Cancel</Button>
    <Button size="sm">Save</Button>
  </div>
</Stack>

import { Container } from '@gusvega/ui';

// Default (div)
<Container>
  <h1>Page content</h1>
</Container>

// As section
<Container as="section">
  <h2>Section title</h2>
</Container>

// With custom className
<Container className="py-12">
  Content with padding
</Container>

import { PageIntro } from '@gusvega/ui';

<PageIntro
  eyebrow="Welcome"
  title="Build Amazing Interfaces"
>
  <p>With a composable component library.</p>
</PageIntro>

// Centered variant
<PageIntro
  eyebrow="Features"
  title="What's Included"
  centered
>
  <Stack direction="row" gap={4}>
    <div>Feature 1</div>
    <div>Feature 2</div>
  </Stack>
</PageIntro>

import { SectionIntro } from '@gusvega/ui';

// Standard
<SectionIntro
  eyebrow="Our Team"
  title="Meet the experts"
/>

// Smaller variant
<SectionIntro
  eyebrow="Process"
  title="How we work"
  smaller
/>

import { List, ListItem } from '@gusvega/ui';

<List>
  <ListItem title="Beautiful design system">
    Consistent components and tokens across projects
  </ListItem>
  <ListItem title="Type-safe components">
    Full TypeScript support with proper type inference
  </ListItem>
  <ListItem title="CSS compiled">
    Pre-compiled CSS bundle with Tailwind CSS
  </ListItem>
</List>

import { Blockquote } from '@gusvega/ui';

<Blockquote author={{ name: 'Design Team', role: 'Gus UI' }}>
  Great design systems save time and improve consistency.
</Blockquote>

// With different author
<Blockquote author={{ name: 'Contributors', role: 'Open Source' }}>
  Components should be composable and flexible.
</Blockquote>

import { Modal, Button } from '@gusvega/ui';
import { useState } from 'react';

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open Modal</Button>

<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="Confirm Action"
  description="Are you sure?"
  footer={
    <>
      <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>Cancel</Button>
      <Button size="sm">Confirm</Button>
    </>
  }
>
  <p>This action cannot be undone.</p>
</Modal>

import { Drawer, Button } from '@gusvega/ui';
import { useState } from 'react';

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open Drawer</Button>

<Drawer open={open} onClose={() => setOpen(false)} title="Navigation">
  <nav className="space-y-2">
    <a href="#overview" className="block text-sm hover:text-neutral-900">Home</a>
    <a href="#components" className="block text-sm hover:text-neutral-900">Components</a>
    <a href="#get-started" className="block text-sm hover:text-neutral-900">Docs</a>
  </nav>
</Drawer>

import { Tooltip, Button } from '@gusvega/ui';

<Tooltip text="Click to save" side="top">
  <Button>Save</Button>
</Tooltip>

<Tooltip text="Delete this item" side="bottom">
  <Button variant="ghost">Delete</Button>
</Tooltip>

import { Popover, Button } from '@gusvega/ui';

<Popover trigger={<Button>Options</Button>} side="bottom">
  <div className="space-y-2">
    <button className="block text-sm hover:text-neutral-900">Edit</button>
    <button className="block text-sm hover:text-neutral-900">Share</button>
    <button className="block text-sm hover:text-neutral-900">Delete</button>
  </div>
</Popover>

import { Accordion, AccordionItem } from '@gusvega/ui';

<Accordion>
  <AccordionItem title="What is Gus UI?">
    A design system for React with tokens and pre-built components.
  </AccordionItem>
  <AccordionItem title="How do I use it?">
    Import components and styles, then build your UI.
  </AccordionItem>
  <AccordionItem title="Is it free?">
    Yes, Gus UI is open source and free to use.
  </AccordionItem>
</Accordion>

import { Stepper } from '@gusvega/ui';

<Stepper
  steps={['Personal Info', 'Billing', 'Confirm']}
  currentStep={1}
/>

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

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

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

import { Timeline } from '@gusvega/ui';

<Timeline events={[
  { title: 'v1.0.0 Released', date: 'Jan 15, 2024' },
  { title: 'v1.1.0 Released', date: 'Feb 10, 2024', description: 'Added new components' },
  { title: 'v1.2.0 Released', date: 'Mar 20, 2024' },
]} />

import { Rating } from '@gusvega/ui';

const [rate, setRate] = useState(4);

<Rating value={rate} onChange={setRate} />

// Readonly
<Rating value={5} readonly />

import { ToggleGroup } from '@gusvega/ui';

<ToggleGroup
  options={[
    { value: 'left', label: 'Left' },
    { value: 'center', label: 'Center' },
    { value: 'right', label: 'Right' },
  ]}
  onChange={(value) => console.log(value)}
/>

import { Chip } from '@gusvega/ui';

<Chip label="Design" variant="secondary" />
<Chip label="React" variant="outline" />
<Chip label="Remove me" onRemove={() => {}} />

import { CopyButton } from '@gusvega/ui';

<CopyButton text="npm install @gusvega/ui" />

<CopyButton
  text="git clone https://github.com/..."
  label="Copy URL"
  variant="secondary"
/>

import { EmptyState, Button } from '@gusvega/ui';

<EmptyState
  title="No results found"
  description="Try adjusting your search or filters"
  action={<Button size="sm">Clear filters</Button>}
/>

import { HoverCard, Avatar } from '@gusvega/ui';

<HoverCard trigger={<Avatar initials="GV" size="md" />}>
  <div>
    <p className="font-semibold">Gus Vega</p>
    <p className="text-xs text-neutral-500">Designer</p>
  </div>
</HoverCard>

import { Toast, Button } from '@gusvega/ui';
import { useState } from 'react';

const [showToast, setShowToast] = useState(false);

<Button onClick={() => setShowToast(true)}>Show Toast</Button>

{showToast && (
  <Toast
    message="Operation completed successfully!"
    type="success"
    onClose={() => setShowToast(false)}
  />
)}

import { Combobox } from '@gusvega/ui';

<Combobox
  options={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'svelte', label: 'Svelte' },
  ]}
  placeholder="Search frameworks..."
  onChange={(value) => console.log(value)}
/>

import { MultiSelect } from '@gusvega/ui';

<MultiSelect
  options={[
    { value: 'ts', label: 'TypeScript' },
    { value: 'react', label: 'React' },
    { value: 'tailwind', label: 'Tailwind' },
  ]}
  onChange={(values) => console.log(values)}
/>

import { Menu, Button } from '@gusvega/ui';

<Menu
  trigger={<Button size="sm">Actions</Button>}
  options={[
    { label: 'Edit', value: 'edit' },
    { label: 'Share', value: 'share' },
    { label: 'Delete', value: 'delete', divider: true },
  ]}
/>

import { Slider } from '@gusvega/ui';
import { useState } from 'react';

const [value, setValue] = useState(50);

<Slider
  min={0}
  max={100}
  step={1}
  value={value}
  onChange={setValue}
/>

import { DatePicker } from '@gusvega/ui';

// Basic
<DatePicker label="Start Date" hint="Select your travel date" />

// With constraints
<DatePicker label="Deadline" required min="2024-01-01" max="2026-12-31" />

// Error state
<DatePicker label="Expiry" error="This field is required" />

import { TimePicker } from '@gusvega/ui';

// With range constraint
<TimePicker label="Meeting Time" min="09:00" max="18:00" hint="Business hours only" />

// 15-minute intervals
<TimePicker label="Reminder" step={900} hint="15-minute intervals" />

// Error state
<TimePicker label="Deadline" error="Please select a valid time" />

import { FileUpload } from '@gusvega/ui';

<FileUpload
  multiple
  accept=".pdf,.doc,.docx,.png,.jpg"
  maxSize={5 * 1024 * 1024}
  maxFiles={5}
  onFileSelect={(files) => console.log(files)}
/>

import { SearchBox } from '@gusvega/ui';
import { useState } from 'react';

const [search, setSearch] = useState('');

<SearchBox value={search} onChange={setSearch} placeholder="Search..." />

import { InputGroup } from '@gusvega/ui';

<InputGroup prefix="$" suffix=".00" placeholder="0" />

import { FormGroup, Input } from '@gusvega/ui';

<FormGroup legend="Preferences" description="Customize your settings">
  <Input placeholder="Enter value" />
</FormGroup>

import { NavigationMenu } from '@gusvega/ui';

<NavigationMenu items={[
  { label: 'Home', href: '#overview' },
  { label: 'Products', href: '#components', submenu: [
    { label: 'Product 1', href: '#components' },
  ]},
]} />

import { Collapsible } from '@gusvega/ui';

<Collapsible title="Advanced Options">
  <div>Hidden content here</div>
</Collapsible>

import { ButtonGroup } from '@gusvega/ui';

<ButtonGroup
  buttons={[
    { label: 'List', onClick: () => {} },
    { label: 'Grid', onClick: () => {}, active: true },
  ]}
/>

import { SplitButton } from '@gusvega/ui';

<SplitButton
  label="Save"
  onClick={() => {}}
  options={[
    { label: 'Save as Draft', onClick: () => {} },
    { label: 'Schedule', onClick: () => {} },
  ]}
/>

import { IconButton } from '@gusvega/ui';

<div className="flex gap-2">
  <IconButton icon="🔍" size="sm" />
  <IconButton icon="🗑️" size="md" variant="secondary" />
  <IconButton icon="⚙️" size="lg" variant="ghost" />
</div>

import { SegmentedControl } from '@gusvega/ui';
import { useState } from 'react';

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

<SegmentedControl
  options={[
    { value: 'day', label: 'Day' },
    { value: 'week', label: 'Week' },
    { value: 'month', label: 'Month' },
  ]}
  value={selected}
  onChange={setSelected}
/>

import { Tree } from '@gusvega/ui';

const data = {
  label: 'Root',
  children: [
    { label: 'Child 1' },
    { label: 'Child 2', children: [{ label: 'Grandchild' }] },
  ],
};

<Tree node={data} />

import { DataGrid } from '@gusvega/ui';

<DataGrid
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'Email' },
  ]}
  rows={[
    { name: 'John', email: 'john@example.com' },
  ]}
/>

import { Carousel } from '@gusvega/ui';

<Carousel>
  <div className="bg-blue-100 h-32 flex items-center justify-center">Slide 1</div>
  <div className="bg-green-100 h-32 flex items-center justify-center">Slide 2</div>
  <div className="bg-red-100 h-32 flex items-center justify-center">Slide 3</div>
</Carousel>

import { BadgeCounter } from '@gusvega/ui';

<div className="flex gap-4">
  <BadgeCounter count={5} />
  <BadgeCounter count={99} />
  <BadgeCounter count={150} />
</div>

import { AlertDialog, Button } from '@gusvega/ui';
import { useState } from 'react';

const [open, setOpen] = useState(false);

<Button size="sm" onClick={() => setOpen(true)}>Open Dialog</Button>

<AlertDialog
  open={open}
  title="Confirm Action"
  description="Are you sure? This cannot be undone."
  onConfirm={() => setOpen(false)}
  onCancel={() => setOpen(false)}
/>

import { DropZone } from '@gusvega/ui';

<DropZone
  multiple
  accept="image/*"
  maxSize={2 * 1024 * 1024}
  label="Drop images here"
  onDrop={(files) => console.log(files)}
/>

import { LoadingOverlay } from '@gusvega/ui';

<LoadingOverlay isVisible={true} message="Loading..." />

import { CommandPalette } from '@gusvega/ui';
import { useState } from 'react';

const COMMANDS = [
  { id: 'new-file',  label: 'New File',    shortcut: '⌘+N', group: 'File',    action: () => {} },
  { id: 'save',      label: 'Save',         shortcut: '⌘+S', group: 'File',    action: () => {} },
  { id: 'find',      label: 'Find in Files', shortcut: '⌘+⇧+F', group: 'Edit', action: () => {} },
  { id: 'dark-mode', label: 'Toggle Dark Mode',               group: 'View',   action: () => {} },
];

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open Palette</Button>
<CommandPalette
  commands={COMMANDS}
  open={open}
  onClose={() => setOpen(false)}
/>

import { InfoBox } from '@gusvega/ui';

<InfoBox
  title="Pro Tip"
  message="You can use keyboard shortcuts for faster workflow."
  type="tip"
/>

import { IconTabs } from '@gusvega/ui';

<IconTabs tabs={[
  { id: 'home', label: 'Home', icon: '🏠', content: <div>Home content</div> },
  { id: 'settings', label: 'Settings', icon: '⚙️', content: <div>Settings content</div> },
]} />

import { CodeBlockAdvanced } from '@gusvega/ui';

<CodeBlockAdvanced
  language="javascript"
  code="const hello = () => console.log('world');"
/>

import { AdvancedBadge } from '@gusvega/ui';

<div className="flex gap-2 flex-wrap">
  <AdvancedBadge label="React" onRemove={() => {}} />
  <AdvancedBadge label="TypeScript" variant="success" onRemove={() => {}} />
  <AdvancedBadge label="Tailwind" variant="warning" />
</div>

import { Menu, Button } from '@gusvega/ui';

<Menu
  trigger={<Button size="sm">Actions</Button>}
  options={[
    { label: 'Edit', value: 'edit' },
    { label: 'Share', value: 'share' },
    { label: 'Delete', value: 'delete', divider: true },
  ]}
/>