snapme

1"use client"
2
3import { cn } from "@/lib/utils"
4
5/* DESIGN-SYSTEM §9 dan §10.2: sakelar Gesture Snap di kepala panel. Keadaan
6   selalu disebut teks (Nyala/Mati), bukan hanya warna. GS-07: disembunyikan
7   saat model gagal dimuat. Markup mengikuti docs/ui-reference/capture.html. */
8export function GestureToggle({
9  enabled,
10  onChange,
11  hidden,
12}: {
13  enabled: boolean
14  onChange: (enabled: boolean) => void
15  hidden: boolean
16}) {
17  if (hidden) {
18    return null
19  }
20
21  return (
22    <button
23      type="button"
24      aria-pressed={enabled}
25      onClick={() => onChange(!enabled)}
26      className={cn(
27        "inline-flex min-h-11 items-center gap-2.5 rounded-pill border-2 border-ink bg-paper py-0 pr-2 pl-4 text-[15px] font-bold text-ink",
28        "hover:shadow-hard-sm focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-violet",
29        "transition-transform duration-[120ms] motion-reduce:transition-none"
30      )}
31    >
32      Gesture Snap
33      <span
34        className={cn(
35          "rounded-pill border-2 border-ink px-2.5 py-0.5 font-mono text-xs font-bold tracking-[0.06em] text-ink uppercase",
36          enabled ? "bg-lime" : "bg-cream"
37        )}
38      >
39        {enabled ? "Nyala" : "Mati"}
40      </span>
41    </button>
42  )
43}
44