Color Picker

import * as React from 'react'
import { ColorPicker } from '@hamur/react/color-picker'

export default function ColorPickerInlineExample() {
  const [committed, setCommitted] = React.useState<string | null>('#6699cc')
  return (
    <div className="stack">
      <ColorPicker.Root
        className="color-picker"
        aria-label="Background"
        defaultValue="#6699cc"
        onValueCommitted={(value) => setCommitted(value)}
      >
        <ColorPicker.Area className="color-picker-area">
          <ColorPicker.AreaThumb className="color-picker-thumb" />
        </ColorPicker.Area>
        <ColorPicker.ChannelSlider channel="hue" className="color-picker-slider">
          <ColorPicker.ChannelSliderThumb className="color-picker-thumb" />
        </ColorPicker.ChannelSlider>
        <div className="color-picker-row">
          <ColorPicker.Swatch className="color-swatch" />
          <ColorPicker.Input className="input color-picker-input" />
          <ColorPicker.EyeDropper className="button color-picker-eye-dropper">
            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
              <path d="M10.5 2.5l3 3M9 4l3 3-6.5 6.5H3v-3z" />
            </svg>
          </ColorPicker.EyeDropper>
        </div>
      </ColorPicker.Root>
      <p className="muted">Committed: {committed ?? 'none'}</p>
    </div>
  )
}

import { ColorPicker } from '@hamur/react/color-picker'

export default function ColorPickerOklchExample() {
  return (
    <ColorPicker.Root
      className="color-picker"
      aria-label="Brand green"
      colorSpace="oklch"
      gamut="display-p3"
      format="oklch"
      defaultValue="oklch(70% 0.15 150)"
    >
      <ColorPicker.Area className="color-picker-area">
        <ColorPicker.AreaThumb className="color-picker-thumb" />
      </ColorPicker.Area>
      <ColorPicker.ChannelSlider channel="hue" className="color-picker-slider">
        <ColorPicker.ChannelSliderThumb className="color-picker-thumb" />
      </ColorPicker.ChannelSlider>
      <dl className="color-picker-values">
        <dt>OKLCH</dt>
        <dd>
          <ColorPicker.Value className="color-picker-value" />
        </dd>
        <dt>Display P3</dt>
        <dd>
          <ColorPicker.Value className="color-picker-value" format="display-p3" />
        </dd>
      </dl>
    </ColorPicker.Root>
  )
}

import { ColorPicker } from '@hamur/react/color-picker'

export default function ColorPickerWheelExample() {
  return (
    <ColorPicker.Root className="color-picker" aria-label="Highlight" defaultValue="#6699cc">
      <ColorPicker.Wheel className="color-picker-wheel">
        <ColorPicker.WheelThumb className="color-picker-thumb color-picker-wheel-thumb" />
      </ColorPicker.Wheel>
      <div className="color-picker-row">
        <ColorPicker.Swatch className="color-swatch" />
        <ColorPicker.Value className="color-picker-value" />
      </div>
    </ColorPicker.Root>
  )
}

import * as React from 'react'
import { ColorPicker } from '@hamur/react/color-picker'
import { Toggle } from '@hamur/react/toggle'
import { ToggleGroup } from '@hamur/react/toggle-group'

type Format = 'hex' | 'rgb' | 'hsl'

const channels = [
  { channel: 'red', short: 'R' },
  { channel: 'green', short: 'G' },
  { channel: 'blue', short: 'B' },
] as const

export default function ColorPickerChannelsExample() {
  const [format, setFormat] = React.useState<Format>('hex')
  return (
    <ColorPicker.Root
      className="color-picker"
      aria-label="Text color"
      defaultValue="#6699cc"
      format={format}
    >
      <ToggleGroup
        className="toggle-group"
        aria-label="Format"
        value={[format]}
        onValueChange={(next) => setFormat((next[0] as Format | undefined) ?? format)}
      >
        <Toggle className="toggle" value="hex">
          Hex
        </Toggle>
        <Toggle className="toggle" value="rgb">
          RGB
        </Toggle>
        <Toggle className="toggle" value="hsl">
          HSL
        </Toggle>
      </ToggleGroup>
      <div className="color-picker-channels">
        {channels.map(({ channel, short }) => (
          <div key={channel} className="color-picker-channel">
            <span aria-hidden="true">{short}</span>
            <ColorPicker.ChannelInput channel={channel} className="input" />
          </div>
        ))}
      </div>
      <div className="color-picker-row">
        <ColorPicker.Swatch className="color-swatch" />
        <ColorPicker.Input className="input color-picker-input" />
      </div>
    </ColorPicker.Root>
  )
}

import * as React from 'react'
import { ColorPicker } from '@hamur/react/color-picker'
import { ColorSwatchPicker } from '@hamur/react/color-swatch-picker'
import { Field } from '@hamur/react/field'
import { Form } from '@hamur/react/form'

const presets = ['#e5484d', '#f76b15', '#ffc53d', '#46a758', '#0090ff', '#8e4ec6']

export default function ColorPickerFormExample() {
  const [submitted, setSubmitted] = React.useState('')
  return (
    <Form
      className="stack"
      onFormSubmit={(_values, details) => {
        const form = details.event.target as HTMLFormElement
        setSubmitted([...new FormData(form)].map(([key, value]) => `${key}=${value}`).join('&'))
      }}
    >
      <Field.Root name="brand" className="field">
        <Field.Label>Brand color</Field.Label>
        <ColorPicker.Root className="color-picker" required>
          <ColorPicker.Input className="input color-picker-input" placeholder="#rrggbb" />
          <ColorSwatchPicker.Root className="color-swatch-picker" aria-label="Presets">
            {presets.map((color) => (
              <ColorSwatchPicker.Item
                key={color}
                value={color}
                className="color-swatch-picker-item"
              />
            ))}
          </ColorSwatchPicker.Root>
        </ColorPicker.Root>
        <Field.Description className="muted">Type a color or pick a preset.</Field.Description>
        <Field.Error className="error" match="valueMissing">
          Choose a brand color before you send.
        </Field.Error>
      </Field.Root>
      <button className="button" type="submit">
        Send
      </button>
      {submitted ? <pre className="output">{submitted}</pre> : null}
    </Form>
  )
}