import * as React from "react"; import { motion, useReducedMotion, type Transition } from "framer-motion"; type IoKnobProps = { checked: boolean; onCheckedChange: (next: boolean) => void; disabled?: boolean; /** Optional sizing (defaults tuned to match the IO Knob look) */ width?: number; // e.g. 64 height?: number; // e.g. 34 /** Show the little “I” glyph on the left like the Framer preview */ showGlyph?: boolean; /** Optional: plays a click sound on toggle (e.g. "/sounds/switch-click.mp3"). Set to "" to disable. */ soundSrc?: string; /** Optional aria label */ ariaLabel?: string; className?: string; }; const SPRING: Transition = { type: "spring", stiffness: 650, damping: 40, mass: 0.7, }; function IoKnob({ checked, onCheckedChange, disabled = false, width = 64, height = 34, showGlyph = true, soundSrc = "/sounds/switch-click.mp3", ariaLabel = "Toggle", className, }: IoKnobProps) { const reduceMotion = useReducedMotion(); // geometry const pad = Math.max(3, Math.round(height * 0.12)); const knobSize = height - pad * 2; const xOff = pad; const xOn = width - pad - knobSize; // audio const audioRef = React.useRef(null); React.useEffect(() => { if (!soundSrc) return; audioRef.current = new Audio(soundSrc); audioRef.current.volume = 0.35; }, [soundSrc]); const playClick = React.useCallback(() => { if (!soundSrc) return; const a = audioRef.current; if (!a) return; try { a.currentTime = 0; void a.play(); } catch { // ignore autoplay restrictions } }, [soundSrc]); const toggle = React.useCallback(() => { if (disabled) return; playClick(); onCheckedChange(!checked); }, [checked, disabled, onCheckedChange, playClick]); const onKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (disabled) return; if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); } if (e.key === "ArrowLeft") { e.preventDefault(); if (checked) toggle(); } if (e.key === "ArrowRight") { e.preventDefault(); if (!checked) toggle(); } }, [checked, disabled, toggle] ); // visuals const trackOn = "linear-gradient(180deg, #FF6A3D 0%, #FF4D2E 100%)"; const trackOff = "linear-gradient(180deg, #F3F3F4 0%, #E7E7EA 100%)"; const baseShadowOff = "0 10px 24px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.08)"; const baseShadowOn = "0 12px 28px rgba(0,0,0,0.16), 0 4px 10px rgba(0,0,0,0.10)"; const knobShadow = "0 10px 18px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10)"; const insetHi = "inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(0,0,0,0.06)"; return ( {/* TRACK */} {/* inset highlight */}

{/* left “I” glyph */} {showGlyph && ( )} {/* KNOB */} {/* knob gloss */}

{/* ON glow */} ); } /** Example render component (same file) */ export default function IoKnobExample() { const [on, setOn] = React.useState(true); const [disabled, setDisabled] = React.useState(false); return (

State: {on ? "On" : "Off"}

Click or press Space/Enter · Arrow keys work

); }

Toggles

Io Knob

Toggle Knob 2