4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T35a3,// Knock Codes Template v1.0.0 "use client"; import { useEffect, useRef, useState, type KeyboardEvent, type ClipboardEvent, type ReactNode } from "react"; import { useKnockCodes } from "./useKnockCodes.ts"; import { DEFAULT_LABELS, type KnockCodesConfig, type KnockCodesLabels } from "./types.ts"; import { cx } from "./cx.ts"; // Shake on a failed attempt, fade+slide on unlock — inlined via a plain // `

Access granted

); return theme === "dark" ?

{successPanel}

: successPanel; } /** * A complete, single-drop-in "restricted access" screen — full-page dark * backdrop, centered card, segmented code entry, support link, and footer * help text, all in one file. Built on the same `useKnockCodes` * session/verification contract as every other block, just with a * different presentation (segmented boxes instead of a masked text field — * for that, use `` + `` instead). */ export function KnockCodesTemplate({ children, logo, labels, codeLength = 8, groupSize = 4, supportHref, onContactSupport, fullPage = true, theme, remember, autoFocus = true, className, ...config }: KnockCodesTemplateProps) { const merged = { ...TEMPLATE_LABELS, ...labels }; const { state, error, submit } = useKnockCodes({ ...config, storage: remember === "session" ? "sessionStorage" : config.storage, }); const [digits, setDigits] = useState(() => Array(codeLength).fill("")); const inputRefs = useRef>([]); const [shakeSeed, setShakeSeed] = useState(0); const [showChildren, setShowChildren] = useState(false); useEffect(() => { if (state === "idle" && error && autoFocus) inputRefs.current[0]?.focus(); }, [error, state, autoFocus]); useEffect(() => { if (error) setShakeSeed((seed) => seed + 1); }, [error]); // Holds the unlock screen visible for a beat so success has a visible // transition instead of an instant swap to `children`. useEffect(() => { if (state !== "unlocked") { setShowChildren(false); return; } const timer = setTimeout(() => setShowChildren(true), 550); return () => clearTimeout(timer); }, [state]); if (state === "unlocked") { if (!showChildren) { return ; } return (

{children}

); } const code = digits.join(""); const filled = code.length === codeLength && digits.every((d) => d !== ""); const setDigit = (index: number, value: string) => { setDigits((current) => { const next = [...current]; next[index] = value; return next; }); }; const handleSubmit = async () => { if (!filled || state === "submitting") return; await submit(code); setDigits(Array(codeLength).fill("")); inputRefs.current[0]?.focus(); }; const handleChange = (index: number, value: string) => { const char = value.slice(-1); setDigit(index, char); if (char && index < codeLength - 1) inputRefs.current[index + 1]?.focus(); }; const handleKeyDown = (index: number, event: KeyboardEvent) => { if (event.key === "Backspace" && !digits[index] && index > 0) { inputRefs.current[index - 1]?.focus(); setDigit(index - 1, ""); } else if (event.key === "ArrowLeft" && index > 0) { inputRefs.current[index - 1]?.focus(); } else if (event.key === "ArrowRight" && index < codeLength - 1) { inputRefs.current[index + 1]?.focus(); } else if (event.key === "Enter") { void handleSubmit(); } }; const handlePaste = (event: ClipboardEvent) => { const pasted = event.clipboardData.getData("text").trim().slice(0, codeLength); if (!pasted) return; event.preventDefault(); const next = Array(codeLength).fill(""); for (let i = 0; i < pasted.length; i++) next[i] = pasted[i]; setDigits(next); inputRefs.current[Math.min(pasted.length, codeLength - 1)]?.focus(); }; const errorMessage = error ? (error.reason === "network" ? merged.networkErrorMessage : merged.invalidErrorMessage) : null; // Tailwind's `dark:` utilities only activate for descendants of a ".dark" // ancestor — never for the element carrying that class itself — so // forcing a theme needs this extra wrapper, not just a class on the root // below. Omitting `theme` renders exactly as before (whatever ambient // ".dark" ancestor happens to exist, or none). const content = (

{logo &&

{logo}

}

{merged.heading}

{merged.description}

{merged.accessCodeLabel}

0 && "animate-[knock-codes-shake_0.4s_ease-in-out]")} > {Array.from({ length: codeLength }, (_, index) => (

{index > 0 && index % groupSize === 0 && –} { inputRefs.current[index] = el; }} value={digits[index]} onChange={(event) => handleChange(index, event.target.value)} onKeyDown={(event) => handleKeyDown(index, event)} onPaste={handlePaste} disabled={state === "submitting"} autoFocus={autoFocus && index === 0} maxLength={1} autoComplete="one-time-code" inputMode="text" aria-label={`${merged.accessCodeLabel} character ${index + 1} of ${codeLength}`} aria-invalid={error ? true : undefined} className="h-11 w-full min-w-0 max-w-10 rounded-[var(--ag-radius,0.5rem)] border border-[var(--ag-border,#d1d5db)] text-center text-sm font-medium text-gray-900 focus:border-[var(--ag-primary,#3b82f6)] focus:ring-2 focus:ring-[var(--ag-primary,#3b82f6)]/30 focus:outline-none disabled:opacity-60 dark:border-[var(--ag-border-dark,#374151)] dark:bg-[var(--ag-card-dark,#111827)] dark:text-gray-50" />

))}

{state === "submitting" ? merged.submittingLabel : (errorMessage ?? "")}

{(supportHref || onContactSupport) && (

{onContactSupport ? ( ) : ( {merged.supportLabel} )}

)}

{merged.footerText}

); // A plain sized wrapper, not `display: contents` — `contents` has // cross-browser quirks around passing percentage sizing through to // children, which broke the fill-the-canvas behavior above. return theme === "dark" ?

{content}

: content; } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["https://knock.codes/r/react/knock-codes-hook.json","https://knock.codes/r/react/cx-util.json"]}]]}],["$","$L50",null,{"sourceUrl":"https://knock.codes/r/react/knock-codes-template.json","proxyUrl":"https://shadcnregistry.com/r/knock-codes/knock-codes-template","itemId":"@knock-codes/knock-codes-template"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"packages/react/KnockCodesTemplate.tsx","content":"$52","type":"registry:file","target":"components/knock-codes/react/KnockCodesTemplate.tsx"}]}]]}],"$L53"]}]

Knock Codes Template

Installation

Files

components

Styles