{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "toggle-lever", "title": "Toggle Lever", "author": "Visant Labs ", "description": "Alavanca de painel sobre chapa escovada: empurrar contra a mola até passar do centro e ela estala para o outro lado, com a lente piloto acendendo.", "dependencies": [ "motion" ], "registryDependencies": [], "files": [ { "path": "registry/visant/ui/toggle-lever.tsx", "content": "\"use client\";\n\n/*\n * TOGGLE: an over-center toggle switch mounted on a brushed plate. Push the\n * knurled bat handle against its spring; cross the center cam and it snaps to\n * the opposite stop, throwing its shadow and specular ridge across the bezel.\n *\n * One normalized position u ∈ [−1, 1] drives the whole piece: bat foreshortening,\n * perspective taper, cast shadow, specular glint, and the pilot lens.\n */\nimport * as React from \"react\";\nimport { motion, useMotionValue, useMotionValueEvent, useReducedMotion, useSpring, useTransform } from \"motion/react\";\n\nconst GRAIN = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E\")`;\nconst clamp = (v: number, a: number, b: number) => Math.max(a, Math.min(b, v));\n\nexport function ToggleLever() {\n const reduce = useReducedMotion();\n const uid = React.useId().replace(/:/g, \"\");\n const [armed, setArmed] = React.useState(false);\n const raw = useMotionValue(-1); // born in SAFE (-1): dragging right throws it over the cam into LIVE (+1)\n const sprung = useSpring(raw, { stiffness: 560, damping: 28 });\n const u = reduce ? raw : sprung;\n const drag = React.useRef<{ x: number; from: number; moved: boolean } | null>(null);\n\n useMotionValueEvent(raw, \"change\", (v) => setArmed(v >= 0));\n\n const tipX = useTransform(u, (v) => v * 32);\n const tipY = useTransform(u, (v) => -4 - (1 - Math.abs(v)) * 8);\n const shadowX = useTransform(u, (v) => 100 - v * 24);\n const glintX = useTransform(u, (v) => -3.2 + v * 2.8);\n const pilotOp = useTransform(u, [-0.15, 0.45], [0.22, 1]);\n const shaft = useTransform(u, (v) => {\n const tx = 100 + v * 32;\n const ty = 80 - (1 - Math.abs(v)) * 8;\n const nx = -ty + 84;\n const ny = tx - 100;\n const len = Math.hypot(nx, ny) || 1;\n const ux = nx / len;\n const uy = ny / len;\n return `M ${(100 - ux * 3.8).toFixed(1)} ${(84 - uy * 3.8).toFixed(1)} L ${(100 + ux * 3.8).toFixed(1)} ${(84 + uy * 3.8).toFixed(1)} L ${(tx + ux * 7.8).toFixed(1)} ${(ty + uy * 7.8).toFixed(1)} L ${(tx - ux * 7.8).toFixed(1)} ${(ty - uy * 7.8).toFixed(1)} Z`;\n });\n const ridge = useTransform(u, (v) => {\n const tx = 100 + v * 32;\n const ty = 80 - (1 - Math.abs(v)) * 8 - 2.2;\n return `M 100 82.5 L ${tx.toFixed(1)} ${ty.toFixed(1)}`;\n });\n\n const snapTo = (next: 1 | -1) => {\n if (reduce) raw.jump(next);\n else raw.set(next);\n navigator.vibrate?.(10);\n };\n\n return (\n {\n if (e.key === \" \" || e.key === \"Enter\") { e.preventDefault(); snapTo(armed ? -1 : 1); }\n if (e.key === \"ArrowRight\") { e.preventDefault(); snapTo(1); }\n if (e.key === \"ArrowLeft\") { e.preventDefault(); snapTo(-1); }\n }}\n onPointerDown={(e) => {\n e.currentTarget.setPointerCapture(e.pointerId);\n drag.current = { x: e.clientX, from: raw.get(), moved: false };\n }}\n onPointerMove={(e) => {\n const d = drag.current;\n if (!d) return;\n const dx = e.clientX - d.x;\n if (Math.abs(dx) > 3) d.moved = true;\n const lin = clamp(d.from + dx / 44, -1, 1);\n const cam = lin + 0.18 * Math.sin(lin * Math.PI);\n if (reduce) raw.jump(clamp(cam, -1, 1));\n else raw.set(clamp(cam, -1, 1));\n }}\n onPointerUp={() => {\n const d = drag.current;\n drag.current = null;\n if (!d) return;\n snapTo(!d.moved ? (armed ? -1 : 1) : raw.get() >= 0 ? 1 : -1);\n }}\n onPointerCancel={() => { drag.current = null; snapTo(raw.get() >= 0 ? 1 : -1); }}\n className=\"relative isolate h-full w-full cursor-grab touch-none select-none overflow-hidden rounded-[var(--r-surface)] bg-muted outline-none focus-visible:[box-shadow:var(--focus)] active:cursor-grabbing\"\n >\n \n

\n safe\n live\n

\n

\n

\n );\n}\n", "type": "registry:ui" } ], "meta": { "uso": { "quando": "Ligar e desligar algo que pede um gesto firme: energia, modo, armar", "evite": "Interruptor discreto numa lista de preferências: glass-switch; painel de aparelho antigo: vintage-toggle" } }, "categories": [ "controles", "alavanca", "interruptor", "ligar", "metal", "painel" ], "type": "registry:ui" }