Dithered form controls for React

npx dithercharts add button

import "@/components/dithercharts/controls.css"
import { Button } from "@/components/dithercharts/button"

<Button>Save</Button>
<Button variant="outline">Cancel</Button>
<Button size="sm">Small</Button>
<Button disabled>Locked</Button>

npx dithercharts add checkbox

import "@/components/dithercharts/controls.css"
import { Checkbox } from "@/components/dithercharts/checkbox"

<Checkbox label="Email me" defaultChecked />
<Checkbox label="Weekly digest" />
<Checkbox label="Some regions" indeterminate />
<Checkbox label="Locked" disabled defaultChecked />

npx dithercharts add radio-group

import "@/components/dithercharts/controls.css"
import { RadioGroup } from "@/components/dithercharts/radio-group"

<RadioGroup
  legend="Range"
  defaultValue="30d"
  options={[
    { value: "7d", label: "7 days" },
    { value: "30d", label: "30 days" },
    { value: "90d", label: "90 days" },
    { value: "1y", label: "1 year", disabled: true },
  ]}
/>

npx dithercharts add progress

import "@/components/dithercharts/controls.css"
import { Progress } from "@/components/dithercharts/progress"

<Progress label="Upload" value={62} />
<Progress label="Import" value={18} />
<Progress label="Syncing" />

npx dithercharts add switch

import "@/components/dithercharts/controls.css"
import { Switch } from "@/components/dithercharts/switch"

<Switch label="Live data" defaultChecked />
<Switch label="Show grid" />
<Switch label="Locked" disabled />

npx dithercharts add slider

import "@/components/dithercharts/controls.css"
import { Slider } from "@/components/dithercharts/slider"

<Slider label="Opacity" defaultValue={40} />
<Slider label="Cell size" min={1} max={8} defaultValue={3} />
<Slider label="Locked" defaultValue={70} disabled />

npx dithercharts add input

import "@/components/dithercharts/controls.css"
import { Input } from "@/components/dithercharts/input"

<Input label="Email" type="email" placeholder="you@example.com" hint="Receipts only, never marketing." />
<Input label="Slug" defaultValue="q3 revenue" error="Use lowercase letters, numbers and dashes." />
<Input label="Plan" defaultValue="Pro" disabled />

npx dithercharts add textarea

import "@/components/dithercharts/controls.css"
import { Textarea } from "@/components/dithercharts/textarea"

<Textarea label="Notes" placeholder="What changed this week?" hint="Shown under the chart as its caption." />

npx dithercharts add number-input

import "@/components/dithercharts/controls.css"
import { NumberInput } from "@/components/dithercharts/number-input"

<NumberInput label="Quantity" defaultValue={3} min={0} max={99} />
<NumberInput label="Price" defaultValue={2.5} min={0} step={0.5} />
<NumberInput label="Seats" defaultValue={5} disabled />

npx dithercharts add select

import "@/components/dithercharts/controls.css"
import { Select } from "@/components/dithercharts/select"

<Select
  label="Chart"
  defaultValue="bar"
  // Keeps the popup clear of a 64px sticky header.
  collisionPadding={{ top: 72 }}
  options={[
    { value: "area", label: "Area" },
    { value: "bar", label: "Bar" },
    { value: "line", label: "Line" },
    { value: "pie", label: "Pie" },
  ]}
/>
<Select
  label="Style"
  options={[
    { value: "bayer", label: "Bayer" },
    { value: "woodcut", label: "Woodcut", disabled: true },
  ]}
/>

npx dithercharts add toggle-group

import "@/components/dithercharts/controls.css"
import { ToggleGroup } from "@/components/dithercharts/toggle-group"

<ToggleGroup
  label="Range"
  defaultValue={["30d"]}
  options={[
    { value: "7d", label: "7D" },
    { value: "30d", label: "30D" },
    { value: "90d", label: "90D" },
    { value: "1y", label: "1Y", disabled: true },
  ]}
/>
<ToggleGroup
  label="Series"
  multiple
  defaultValue={["revenue", "profit"]}
  options={[
    { value: "revenue", label: "Revenue" },
    { value: "costs", label: "Costs" },
    { value: "profit", label: "Profit" },
  ]}
/>

npx dithercharts add color-picker

import "@/components/dithercharts/controls.css"
import { ColorPicker } from "@/components/dithercharts/color-picker"

<ColorPicker label="Ink color" defaultValue="#e23838" />
<ColorPicker label="Locked" defaultValue="#009cdf" disabled />

npx dithercharts add dialog

"use client"

import { useState } from "react"

import "@/components/dithercharts/controls.css"
import { Button } from "@/components/dithercharts/button"
import { Dialog, DialogButton } from "@/components/dithercharts/dialog"

export function AboutDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button variant="outline" aria-haspopup="dialog" onClick={() => setOpen(true)}>
        About this chart
      </Button>
      <Dialog
        title="About This Chart"
        open={open}
        onOpenChange={setOpen}
        actions={
          <>
            <DialogButton onClick={() => setOpen(false)}>Cancel</DialogButton>
            <DialogButton default onClick={() => setOpen(false)}>
              OK
            </DialogButton>
          </>
        }
      >
        <p>Revenue, Jan to Dec, in a Bayer 4x4 dither.</p>
        <p>12 points · 2 series · 1-bit ink</p>
      </Dialog>
    </>
  )
}