Tactile Toggle

"use client";

import { useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

// ─── Geometry ─────────────────────────────────────────────────────────────────
const TRACK_W = 44;
const TRACK_H = 26;
const PAD = 2;
const KNOB = TRACK_H - PAD * 2;
// Pointer travel before a press counts as a drag rather than a tap.
const DRAG_SLOP = 3;

const SPRING = { type: "spring", stiffness: 520, damping: 34, mass: 0.7 } as const;
const INSTANT = { duration: 0 } as const;
// Off track: a tint of the text colour, so it reads in light and dark alike.
const TRACK_OFF = "color-mix(in srgb, var(--foreground) 14%, transparent)";

export type TactileToggleProps = {
  /** Controlled state. Leave out to let the toggle keep its own. */
  checked?: boolean;
  /** Starting state when uncontrolled. */
  defaultChecked?: boolean;