useThemeBuilder

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

export function CustomThemeBuilder() {
  const builder = useThemeBuilder({ defaultHue: 264, defaultScheme: 'dark' })

  return (
    <ThemeBuilder {...builder.rootProps}>
      <div style={builder.previewStyle}>
        <Card glass>
          <Label htmlFor="theme-brand-hue">Brand hue</Label>
          <Slider {...builder.hueProps} id="theme-brand-hue" min={0} max={359} />
          <Label htmlFor="theme-accent-hue">Accent hue</Label>
          <Slider {...builder.accentHueProps} id="theme-accent-hue" min={0} max={359} />
          <div>
            <Button {...builder.getSchemeProps('light')}>Light</Button>
            <Button {...builder.getSchemeProps('dark')}>Dark</Button>
          </div>
          <Label htmlFor="theme-output">Generated theme CSS</Label>
          <Textarea {...builder.outputProps} aria-label="Generated theme CSS" id="theme-output" readOnly rows={6} />
          <Button {...builder.exportButtonProps}>Copy CSS</Button>
        </Card>
      </div>
    </ThemeBuilder>
  )
}