React

import { Button, Dialog, Card } from '@santi020k/lumen-react'
import { useDialog } from '@santi020k/lumen-react'

export function ConfirmDialog() {
  const dialog = useDialog()

  return (
    <>
      <Button {...dialog.triggerProps}>Open dialog</Button>
      <Dialog {...dialog.dialogProps}>
        <Card>
          <h2>Confirm action</h2>
          <p>Are you sure you want to continue?</p>
          <Button {...dialog.closeProps}>Close</Button>
        </Card>
      </Dialog>
    </>
  )
}

import { Button, Popover, PopoverTrigger, PopoverPanel } from '@santi020k/lumen-react'
import { usePopover } from '@santi020k/lumen-react'

export function NotificationsPopover() {
  const popover = usePopover()

  return (
    <Popover {...popover.rootProps}>
      <PopoverTrigger {...popover.triggerProps}>Notifications</PopoverTrigger>
      <PopoverPanel {...popover.panelProps}>
        <p>No new notifications.</p>
      </PopoverPanel>
    </Popover>
  )
}

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@santi020k/lumen-react'

export function ActionsMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem status="Admin">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

import { LanguageToggle } from '@santi020k/lumen-react'

export function LocaleControl() {
  return (
    <LanguageToggle
      defaultValue="en"
      storageKey="site-language"
      locales={[
        { label: 'English', value: 'en' },
        { label: 'Español', value: 'es' }
      ]}
    />
  )
}

import { ContextMenu, useContextMenu } from '@santi020k/lumen-react'

export function ProjectActions() {
  const menu = useContextMenu({ id: 'project-actions' })

  return (
    <>
      <button {...menu.triggerProps}>Project</button>
      <ContextMenu {...menu.menuProps}>
        <button role="menuitem">Duplicate</button>
        <button role="menuitem">Delete</button>
      </ContextMenu>
    </>
  )
}

import { Tabs, TabsList, TabsTrigger, TabsPanel } from '@santi020k/lumen-react'
import { useTabs } from '@santi020k/lumen-react'

export function SettingsTabs() {
  const tabs = useTabs({ defaultValue: 'general' })

  return (
    <Tabs {...tabs.rootProps}>
      <TabsList {...tabs.listProps}>
        <TabsTrigger {...tabs.getTriggerProps('general')}>General</TabsTrigger>
        <TabsTrigger {...tabs.getTriggerProps('security')}>Security</TabsTrigger>
      </TabsList>
      <TabsPanel {...tabs.getPanelProps('general')}>
        <p>General settings content.</p>
      </TabsPanel>
      <TabsPanel {...tabs.getPanelProps('security')}>
        <p>Security settings content.</p>
      </TabsPanel>
    </Tabs>
  )
}

import { Select } from '@santi020k/lumen-react'
import { useSelect } from '@santi020k/lumen-react'

export function CountrySelect() {
  const select = useSelect({
    options: ['United States', 'Canada', 'Mexico'],
    placeholder: 'Choose a country',
    onValueChange: (value) => console.log('Selected:', value)
  })

  return (
    <div {...select.rootProps}>
      <button {...select.triggerProps}>{select.triggerText}</button>
      <select {...select.nativeSelectProps} />
      <div {...select.listProps}>
        {select.options.map(option => (
          <button key={option.value} {...select.getOptionProps(option)}>
            {option.label}
          </button>
        ))}
      </div>
    </div>
  )
}

import { Button, Tooltip, TooltipContent } from '@santi020k/lumen-react'
import { useTooltip } from '@santi020k/lumen-react'

export function SaveButton() {
  const tooltip = useTooltip({ delay: 300 })

  return (
    <Tooltip {...tooltip.rootProps}>
      <Button>Save</Button>
      <TooltipContent {...tooltip.tooltipProps}>Save your changes</TooltipContent>
    </Tooltip>
  )
}

import { Button, ToastProvider } from '@santi020k/lumen-react'
import { useToast } from '@santi020k/lumen-react'

function SaveButton() {
  const toast = useToast()

  return (
    <Button onClick={() => toast.create({
      title: 'Saved',
      description: 'Your changes are live.',
      variant: 'success'
    })}>
      Save
    </Button>
  )
}

// Wrap your app with ToastProvider
export function App() {
  return (
    <ToastProvider placement="bottom-right" maxCount={5}>
      <SaveButton />
    </ToastProvider>
  )
}

import { Button, Field, Input, Label } from '@santi020k/lumen-react'
import { useFormValidation } from '@santi020k/lumen-react'

export function SignupForm() {
  const form = useFormValidation({
    onValid: () => console.log('Form is valid'),
    onInvalid: ({ controls }) =>
      console.log('Invalid fields:', controls?.length)
  })

  return (
    <form {...form.formProps}>
      <Field>
        <Label htmlFor="email">Email</Label>
        <Input
          id="email"
          type="email"
          required
          data-error-required="Please enter your email"
          data-error-type="Enter a valid email address"
        />
      </Field>
      <Button type="submit">Sign up</Button>
    </form>
  )
}

import { Calendar } from '@santi020k/lumen-react'

export function DeliveryDate() {
  return (
    <Calendar
      max="2026-07-31"
      min="2026-07-01"
      month="2026-07"
      name="delivery"
    />
  )
}

import { useDateRangePicker } from '@santi020k/lumen-react'

export function BookingRange() {
  const range = useDateRangePicker()

  return (
    <div className="ui-date-range-picker" {...range.rootProps}>
      <input className="ui-input ui-date-picker" aria-label="Start date" {...range.getStartProps()} />
      <input className="ui-input ui-date-picker" aria-label="End date" {...range.getEndProps()} />
    </div>
  )
}

import { useInputOTP } from '@santi020k/lumen-react'

export function VerificationCode() {
  const otp = useInputOTP({ length: 6, defaultValue: '123456' })

  return (
    <div {...otp.rootProps}>
      <input aria-label="Verification code" name="code" {...otp.getInputProps()} />
      <div {...otp.segmentsProps}>
        {otp.segmentIndexes.map(index => (
          <button key={index} {...otp.getSegmentProps(index)}>
            <span data-ui-input-otp-char>{otp.getSegmentChar(index)}</span>
          </button>
        ))}
      </div>
    </div>
  )
}

import { Button, RichTextEditor } from '@santi020k/lumen-react'
import { useRichTextEditor } from '@santi020k/lumen-react'

export function Editor() {
  const editor = useRichTextEditor()

  return (
    <RichTextEditor {...editor.rootProps}>
      <div role="toolbar" aria-label="Formatting">
        <Button {...editor.getCommandProps('bold')} size="icon">B</Button>
        <Button {...editor.getCommandProps('italic')} size="icon">I</Button>
        <Button {...editor.getCommandProps('insertUnorderedList')} size="icon">•</Button>
      </div>
      <div {...editor.getEditableProps()}>
        <p>Start writing...</p>
      </div>
    </RichTextEditor>
  )
}

import { Schedule, Card } from '@santi020k/lumen-react'
import { useSchedule } from '@santi020k/lumen-react'

export function WeekView() {
  const schedule = useSchedule({
    onChange: ({ eventId, slot }) =>
      console.log('Changed:', eventId, slot)
  })

  return (
    <Schedule {...schedule.rootProps}>
      <section {...schedule.getSlotProps('2025-01-06T09:00')}>
        <Card as="article" {...schedule.getEventProps('meeting-1')}>
          <strong>Team standup</strong>
          <p>9:00 – 9:30</p>
        </Card>
      </section>
    </Schedule>
  )
}

import { Button, Card, KanbanBoard, KanbanColumn, useKanban } from '@santi020k/lumen-react'

export function EditorialBoard() {
  const kanban = useKanban({
    onMoveRequest: ({ itemId, toColumn }) =>
      console.log(`Move ${itemId} to ${toColumn}`)
  })

  return (
    <KanbanBoard {...kanban.rootProps} aria-label="Editorial workflow">
      <KanbanColumn {...kanban.getColumnProps('planned')}>
        <Card as="article" {...kanban.getItemProps('draft')}>
          <Button {...kanban.getHandleProps('draft')} aria-label="Move Draft article">
            Move
          </Button>
          <strong>Draft article</strong>
        </Card>
      </KanbanColumn>
      <KanbanColumn {...kanban.getColumnProps('published')} />
    </KanbanBoard>
  )
}

import { Resizable } from '@santi020k/lumen-react'

export function SplitEditor() {
  return (
    <Resizable defaultSizes={[30, 70]}>
      <aside>Navigation</aside>
      <main>Editor</main>
    </Resizable>
  )
}

import { ThemeBuilder, Card, Button, Slider } from '@santi020k/lumen-react'
import { useThemeBuilder } from '@santi020k/lumen-react'

export function CustomThemeBuilder() {
  const builder = useThemeBuilder({
    defaultHue: 264,
    defaultScheme: 'dark',
    onThemeExport: ({ value, format }) =>
      console.log(`Exported ${format}:`, value)
  })

  return (
    <ThemeBuilder {...builder.rootProps}>
      <div style={builder.previewStyle}>
        <Card glass>
          <label>Brand hue</label>
          <input type="range" {...builder.hueProps} min={0} max={359} />
          <label>Accent hue</label>
          <input type="range" {...builder.accentHueProps} min={0} max={359} />
          <div>
            <Button {...builder.getSchemeProps('light')}>Light</Button>
            <Button {...builder.getSchemeProps('dark')}>Dark</Button>
          </div>
          <textarea {...builder.outputProps} readOnly rows={6} />
          <Button {...builder.exportButtonProps}>Copy CSS</Button>
        </Card>
      </div>
    </ThemeBuilder>
  )
}

import { ThemeToggle, useThemeToggle } from '@santi020k/lumen-react'

export function ThemeControl() {
  const { theme, toggleTheme } = useThemeToggle()

  return (
    <ThemeToggle
      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
      onClick={toggleTheme}
    >
      {theme === 'dark' ? 'Light' : 'Dark'}
    </ThemeToggle>
  )
}