init

studio/src/components/ui/Toggle.tsx

@@ -0,0 +1,29 @@
+interface ToggleProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  label?: string
+  description?: string
+}
+
+export function Toggle({ checked, onChange, label, description }: ToggleProps) {
+  return (
+    <label className="flex items-start gap-3 cursor-pointer">
+      <div className="relative mt-0.5">
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={e => onChange(e.target.checked)}
+          className="sr-only peer"
+        />
+        <div className="w-10 h-6 bg-border rounded-full peer-checked:bg-accent transition-colors" />
+        <div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full shadow transition-transform peer-checked:translate-x-4" />
+      </div>
+      <div className="flex-1">
+        <div className="text-sm font-medium text-text">{label || ""}</div>
+        {description && (
+          <div className="text-xs text-muted mt-0.5">{description}</div>
+        )}
+      </div>
+    </label>
+  )
+}