vdl 0.1.6 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

export function Field({ label, hint, children }) {
  return (
    <label className="flex flex-col gap-1.5">
      <span className="text-xs font-semibold uppercase tracking-[0.16em] text-ink-faint">{label}</span>
      {children}
      {hint && <span className="text-xs text-ink-faint">{hint}</span>}
    </label>
  );
}

const inputClasses =
  'w-full rounded-xl border border-line bg-card px-3.5 py-2.5 text-sm text-ink placeholder:text-ink-faint outline-none transition focus:border-coral focus:ring-2 focus:ring-coral/15';

export function TextInput(props) {
  return <input {...props} className={`${inputClasses} ${props.className || ''}`} />;
}

export function Select({ options, placeholder, ...props }) {
  return (
    <select {...props} className={`${inputClasses} ${props.className || ''}`}>
      {placeholder && <option value="">{placeholder}</option>}
      {options.map((opt) => (
        <option key={opt} value={opt}>
          {opt}
        </option>
      ))}
    </select>
  );
}

export function Toggle({ checked, onChange, label, sub, disabled }) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={`flex items-center gap-3 rounded-2xl border px-4 py-3 text-left transition ${
        checked ? 'border-coral/40 bg-coral-soft' : 'border-line bg-card'
      } ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:border-ink/20'}`}
    >
      <span
        className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition ${
          checked ? 'bg-coral' : 'bg-line'
        }`}
      >
        <span
          className={`inline-block h-4.5 w-4.5 transform rounded-full bg-white shadow transition ${
            checked ? 'translate-x-6' : 'translate-x-1'
          }`}
        />
      </span>
      <span>
        <span className="block text-sm font-medium text-ink">{label}</span>
        {sub && <span className="block text-xs text-ink-faint">{sub}</span>}
      </span>
    </button>
  );
}