"use client"; import type { ButtonHTMLAttributes, MouseEvent } from "react"; import { useId, useState } from "react"; export type ToggleSwitchProps = Omit, "value"> & { label: string; description?: string; checked?: boolean; defaultChecked?: boolean; onCheckedChange?: (checked: boolean) => void; size?: "sm" | "md"; /** Class names for the outer row. className is applied to the switch itself. */ rowClassName?: string; /** Removes the thumb transition. */ reducedMotion?: boolean; }; const sizes = { sm: { track: "h-5 w-9", thumb: "size-4", on: "translate-x-4" }, md: { track: "h-6 w-11", thumb: "size-5", on: "translate-x-5" }, }; export function ToggleSwitch({ label, description, checked, defaultChecked = false, onCheckedChange, size = "md", rowClassName = "", reducedMotion = false, disabled, className = "", onClick, id, ...props }: ToggleSwitchProps) { const autoId = useId(); const switchId = id ?? autoId + "-switch"; const labelId = autoId + "-label"; const descriptionId = autoId + "-description"; const [internal, setInternal] = useState(defaultChecked); const isOn = checked !== undefined ? checked : internal; const dimensions = sizes[size]; function handleClick(event: MouseEvent) { onClick?.(event); if (event.defaultPrevented) return; const next = !isOn; if (checked === undefined) setInternal(next); onCheckedChange?.(next); } return (

{label} {description ? (

{description}

) : null}

); }