Form components

import { ActionButton } from '@tetherto/mdk-core-ui'

<ActionButton
  label="Restart service"
  variant="danger"
  confirmation={{
    title: 'Restart service',
    description: 'The service will be unavailable briefly.',
    onConfirm: () => {
      void restartService()
    },
  }}
/>

<ActionButton
  label="Factory reset"
  variant="danger"
  mode="dialog"
  confirmation={{
    title: 'Confirm factory reset',
    description: 'This cannot be undone.',
    onConfirm: () => {
      void factoryReset()
    },
  }}
/>

import { Button } from '@tetherto/mdk-core-ui'

<Button>Default Button</Button>
<Button variant="primary">Primary</Button>
<Button variant="danger">Delete</Button>
<Button variant="outline">Outline</Button>

<Button icon={<PlusIcon />}>Add Item</Button>
<Button icon={<ArrowRightIcon />} iconPosition="right">
  Continue
</Button>

<Button loading>Saving...</Button>
<Button variant="primary" loading disabled>
  Processing
</Button>

import { Cascader } from '@tetherto/mdk-core-ui'

<Cascader
  options={[
    {
      value: 'na',
      label: 'North America',
      children: [
        { value: 'us-east', label: 'US East' },
        { value: 'us-west', label: 'US West' },
      ],
    },
  ]}
  value={value}
  onChange={setValue}
/>

import { Checkbox } from '@tetherto/mdk-core-ui'

<Checkbox checked={checked} onCheckedChange={setChecked} />

<label className="flex items-center gap-2">
  <Checkbox checked={terms} onCheckedChange={setTerms} />
  I agree to the terms
</label>

<Checkbox size="xs" />
<Checkbox size="sm" />
<Checkbox size="md" />
<Checkbox size="lg" color="success" />

import { DatePicker } from '@tetherto/mdk-core-ui'

<DatePicker
  value={date}
  onChange={setDate}
  placeholder="Select date"
/>

import { DateRangePicker } from '@tetherto/mdk-core-ui'
import type { DateRange, PresetItem } from '@tetherto/mdk-core-ui'

const [range, setRange] = useState<DateRange>()

<DateRangePicker
  selected={range}
  onSelect={setRange}
/>

const presets: PresetItem[] = [
  { label: 'This week', value: { from: startOfWeek(new Date()), to: new Date() } },
  { label: 'This month', value: { from: startOfMonth(new Date()), to: new Date() } },
]

<DateRangePicker
  selected={range}
  onSelect={setRange}
  presets={presets}
/>

<DateRangePicker
  selected={range}
  onSelect={setRange}
  allowFutureDates
  showPresets={false}
/>

import { Input } from '@tetherto/mdk-core-ui'

<Input label="Email" placeholder="Enter email" id="email" />
<Input variant="search" placeholder="Search miners..." />

<Input prefix="$" suffix="USD" placeholder="0.00" />
<Input suffix="°C" placeholder="Temperature" />
<Input prefix={<UserIcon />} placeholder="Username" />

<Input
  label="MAC Address"
  error="Invalid MAC address format"
  value={mac}
  onChange={(e) => setMac(e.target.value)}
/>

import { Label } from '@tetherto/mdk-core-ui'

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />

<Label htmlFor="password" required>Password</Label>
<Input id="password" type="password" />

import { Radio, RadioGroup, RadioCard } from '@tetherto/mdk-core-ui'

<RadioGroup value={value} onValueChange={setValue}>
  <Radio value="small">Small</Radio>
  <Radio value="medium">Medium</Radio>
  <Radio value="large">Large</Radio>
</RadioGroup>

<RadioGroup value={value} orientation="horizontal" onValueChange={setValue}>
  <RadioCard value="a" label="Option A" />
  <RadioCard value="b" label="Option B" />
</RadioGroup>

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
} from '@tetherto/mdk-core-ui'

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger size="md">
    <SelectValue placeholder="Select pool" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="us-east">US East</SelectItem>
      <SelectItem value="us-west">US West</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="eu-west">EU West</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger variant="colored" color="#72F59E">
    <SelectValue placeholder="Status" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="active">Active</SelectItem>
    <SelectItem value="inactive">Inactive</SelectItem>
  </SelectContent>
</Select>

import { Switch } from '@tetherto/mdk-core-ui'

<Switch checked={enabled} onCheckedChange={setEnabled} />

<label className="flex items-center gap-2">
  <Switch checked={darkMode} onCheckedChange={setDarkMode} />
  Dark Mode
</label>

<Switch size="sm" />
<Switch size="md" color="primary" />
<Switch size="lg" color="success" />

import { TagInput } from '@tetherto/mdk-core-ui'

<TagInput
  value={tags}
  onChange={setTags}
  placeholder="Add tags..."
/>

import { TextArea } from '@tetherto/mdk-core-ui'

<TextArea
  label="Description"
  placeholder="Enter description"
  rows={4}
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>