{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"keyboard","type":"registry:ui","title":"Keyboard","description":"A realistic compact keyboard whose keycaps sink and glow with backlight when you press the matching physical keys or click them, with a live typing strip and caps-lock LED.","dependencies":[],"registryDependencies":["utils"],"files":[{"path":"registry/ui/keyboard.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { useEffect, useRef, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype KeyDef = {\n code: string;\n label: string;\n /** Shifted legend shown above the label. */\n top?: string;\n /** Width in key units. */\n w?: number;\n /** Character typed (unshifted / shifted). Omit for modifiers. */\n ch?: string;\n sh?: string;\n align?: \"left\" | \"right\";\n};\n\nconst k = (code: string, label: string, ch?: string, sh?: string, top?: string): KeyDef => ({ code, label, ch, sh, top });\nconst letters = (codes: string) => codes.split(\"\").map((c) => k(`Key${c}`, c, c.toLowerCase(), c));\nconst sym = (code: string, ch: string, sh: string): KeyDef => k(code, ch, ch, sh, sh);\n\nconst ROWS: KeyDef[][] = [\n [\n sym(\"Backquote\", \"`\", \"~\"),\n ...[...\"1234567890\"].map((d, i) => sym(`Digit${d}`, d, \"!@#$%^&*()\"[i])),\n sym(\"Minus\", \"-\", \"_\"),\n sym(\"Equal\", \"=\", \"+\"),\n { code: \"Backspace\", label: \"delete\", w: 2, align: \"right\" },\n ],\n [\n { code: \"Tab\", label: \"tab\", w: 1.5, align: \"left\" },\n ...letters(\"QWERTYUIOP\"),\n sym(\"BracketLeft\", \"[\", \"{\"),\n sym(\"BracketRight\", \"]\", \"}\"),\n { ...sym(\"Backslash\", \"\\\\\", \"|\"), w: 1.5 },\n ],\n [\n { code: \"CapsLock\", label: \"caps lock\", w: 1.75, align: \"left\" },\n ...letters(\"ASDFGHJKL\"),\n sym(\"Semicolon\", \";\", \":\"),\n sym(\"Quote\", \"'\", '\"'),\n { code: \"Enter\", label: \"return\", w: 2.25, align: \"right\" },\n ],\n [\n { code: \"ShiftLeft\", label: \"shift\", w: 2.25, align: \"left\" },\n ...letters(\"ZXCVBNM\"),\n sym(\"Comma\", \",\", \"<\"),\n sym(\"Period\", \".\", \">\"),\n sym(\"Slash\", \"/\", \"?\"),\n { code: \"ShiftRight\", label: \"shift\", w: 2.75, align: \"right\" },\n ],\n [\n { code: \"Fn\", label: \"fn\" },\n { code: \"ControlLeft\", label: \"control\" },\n { code: \"AltLeft\", label: \"option\" },\n { code: \"MetaLeft\", label: \"⌘\", w: 1.25 },\n { code: \"Space\", label: \"\", w: 5.5, ch: \" \", sh: \" \" },\n { code: \"MetaRight\", label: \"⌘\", w: 1.25 },\n { code: \"AltRight\", label: \"option\" },\n ],\n];\n\nconst ALL = new Map(ROWS.flat().map((d) => [d.code, d]));\nfor (const [code, label] of [[\"ArrowLeft\", \"◀\"], [\"ArrowRight\", \"▶\"], [\"ArrowUp\", \"▲\"], [\"ArrowDown\", \"▼\"]])\n ALL.set(code, { code, label });\n\nexport interface KeyboardProps {\n /** Key unit in px; the board is 15 units wide. */\n size?: number;\n /** Backlight color of pressed keys. */\n accent?: string;\n /** Keycap finish. */\n variant?: \"graphite\" | \"silver\";\n /** Show the typed-text strip above the keys. */\n showDisplay?: boolean;\n /**\n * Listen to the whole window instead of only while the keyboard has focus.\n * Off by default so the widget never swallows typing elsewhere on the page.\n */\n global?: boolean;\n /** Fired for every key press (physical or clicked) with its KeyboardEvent.code. */\n onKey?: (code: string) => void;\n className?: string;\n}\n\nexport function Keyboard({\n size = 40,\n accent = \"#c6ff3d\",\n variant = \"graphite\",\n showDisplay = true,\n global = false,\n onKey,\n className,\n}: KeyboardProps) {\n const [down, setDown] = useState>(() => new Set());\n const [caps, setCaps] = useState(false);\n const [text, setText] = useState(\"\");\n const [focused, setFocused] = useState(false);\n const shiftRef = useRef(false);\n const capsRef = useRef(caps);\n useEffect(() => {\n capsRef.current = caps;\n }, [caps]);\n const onKeyRef = useRef(onKey);\n useEffect(() => {\n onKeyRef.current = onKey;\n });\n\n const press = (code: string) => {\n if (!ALL.has(code)) return;\n setDown((s) => (s.has(code) ? s : new Set(s).add(code)));\n onKeyRef.current?.(code);\n if (code === \"ShiftLeft\" || code === \"ShiftRight\") shiftRef.current = true;\n if (code === \"CapsLock\") setCaps((c) => !c);\n if (code === \"Backspace\") setText((t) => t.slice(0, -1));\n if (code === \"Enter\") setText(\"\");\n const def = ALL.get(code)!;\n if (def.ch) {\n const letter = /^Key/.test(code);\n const shifted = shiftRef.current !== (letter && capsRef.current);\n const c = shifted ? def.sh! : def.ch;\n setText((t) => (t + c).slice(-48));\n }\n };\n const release = (code: string) => {\n if (code === \"ShiftLeft\" || code === \"ShiftRight\") shiftRef.current = false;\n setDown((s) => {\n if (!s.has(code) && !code.startsWith(\"Meta\")) return s;\n // macOS drops keyup for keys held with ⌘, so releasing ⌘ clears everything.\n if (code.startsWith(\"Meta\")) return new Set();\n const n = new Set(s);\n n.delete(code);\n return n;\n });\n };\n const handlers = useRef({ press, release });\n useEffect(() => {\n handlers.current = { press, release };\n });\n\n useEffect(() => {\n if (!global) return;\n const kd = (e: KeyboardEvent) => !e.repeat && handlers.current.press(e.code);\n const ku = (e: KeyboardEvent) => handlers.current.release(e.code);\n const clear = () => setDown(new Set());\n window.addEventListener(\"keydown\", kd);\n window.addEventListener(\"keyup\", ku);\n window.addEventListener(\"blur\", clear);\n return () => {\n window.removeEventListener(\"keydown\", kd);\n window.removeEventListener(\"keyup\", ku);\n window.removeEventListener(\"blur\", clear);\n };\n }, [global]);\n\n const onKeyDown = (e: ReactKeyboardEvent) => {\n if (global || e.metaKey || e.ctrlKey) return;\n if (e.code !== \"Tab\" && ALL.has(e.code)) e.preventDefault(); // keep Tab so focus can leave\n if (!e.repeat) press(e.code);\n };\n const onKeyUp = (e: ReactKeyboardEvent) => !global && release(e.code);\n\n const gap = Math.round(size * 0.14);\n const silver = variant === \"silver\";\n const vars = {\n \"--u\": `${size}px`,\n \"--g\": `${gap}px`,\n \"--accent\": accent,\n \"--cap\": silver ? \"linear-gradient(#fbfbfa,#e6e6e3)\" : \"linear-gradient(#34353a,#26272b)\",\n \"--cap-edge\": silver ? \"#b9b9b4\" : \"#101113\",\n \"--legend\": silver ? \"#3b3c40\" : \"#c9cbd1\",\n } as CSSProperties;\n\n const cap = (def: KeyDef, extra?: CSSProperties, compact = false) => {\n const on = down.has(def.code);\n const w = def.w ?? 1;\n const isLetter = /^Key/.test(def.code);\n return (\n {\n e.preventDefault();\n (e.currentTarget.closest(\"[data-kb]\") as HTMLElement | null)?.focus({ preventScroll: true });\n press(def.code);\n }}\n onPointerUp={() => release(def.code)}\n onPointerLeave={() => down.has(def.code) && release(def.code)}\n className={cn(\n \"kb-key relative flex cursor-pointer flex-col rounded-[calc(var(--u)*0.16)] px-[calc(var(--u)*0.16)] py-[calc(var(--u)*0.1)] leading-none select-none\",\n def.align === \"right\" ? \"items-end justify-end\" : def.align === \"left\" ? \"items-start justify-end\" : \"items-center justify-center\",\n )}\n style={{\n width: `calc(var(--u) * ${w} + var(--g) * ${w - 1})`,\n height: compact ? \"calc((var(--u) - var(--g) / 2) / 2)\" : \"var(--u)\",\n ...extra,\n }}\n >\n {def.top && {def.top}}\n \n {def.label}\n \n {def.code === \"CapsLock\" && (\n \n )}\n \n );\n };\n\n const arrows = (\n \n {cap(ALL.get(\"ArrowLeft\")!, undefined, true)}\n \n {cap(ALL.get(\"ArrowUp\")!, undefined, true)}\n {cap(ALL.get(\"ArrowDown\")!, undefined, true)}\n \n {cap(ALL.get(\"ArrowRight\")!, undefined, true)}\n \n );\n\n return (\n setFocused(true)}\n onBlur={() => {\n setFocused(false);\n if (!global) setDown(new Set());\n }}\n className={cn(\"relative w-fit rounded-[calc(var(--u)*0.45)] outline-none\", className)}\n style={vars}\n >\n \n\n {/* aluminium plate */}\n \n {showDisplay && (\n \n \n \n {text || {focused || global ? \"Start typing…\" : \"Click here, then type\"}}\n {(focused || global) && (\n \n )}\n \n \n )}\n {ROWS.map((row, i) => (\n
\n {row.map((d) => cap(d))}\n {i === 4 && arrows}\n
\n ))}\n \n \n );\n}\n"}]}