4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T2c95,"use client" import * as React from "react" import { motion, useAnimationControls, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" export interface ImpossibleCheckboxProps extends Omit< React.InputHTMLAttributes, "checked" | "defaultChecked" | "onChange" | "type" > { onAttempt?: (attempt: number) => void revealAfter?: number angryAfter?: number className?: string } function BearFace({ angry }: { angry: boolean }) { return ( ) } function BearArm() { return ( ) } export const ImpossibleCheckbox = React.forwardRef< HTMLInputElement, ImpossibleCheckboxProps >(function ImpossibleCheckbox( { onAttempt, revealAfter = 2, angryAfter = 5, className, "aria-label": ariaLabel = "Impossible checkbox", "aria-describedby": ariaDescribedBy, disabled, ...inputProps }, forwardedRef ) { const [checked, setChecked] = React.useState(false) const [attempts, setAttempts] = React.useState(0) const [busy, setBusy] = React.useState(false) const [message, setMessage] = React.useState("Off") const generatedId = React.useId() const prefersReducedMotion = useReducedMotion() const bear = useAnimationControls() const armWrap = useAnimationControls() const arm = useAnimationControls() const paw = useAnimationControls() const runRef = React.useRef(0) React.useEffect(() => { return () => { runRef.current += 1 bear.stop() armWrap.stop() arm.stop() paw.stop() } }, [arm, armWrap, bear, paw]) const bearIsVisible = attempts >= revealAfter const bearIsAngry = attempts >= angryAfter const statusId = `${inputProps.id ?? generatedId}-status` async function refuse() { if (busy || disabled) return const run = runRef.current + 1 runRef.current = run const nextAttempt = attempts + 1 const duration = prefersReducedMotion ? 0 : 0.2 setBusy(true) setChecked(true) setMessage("On, briefly") onAttempt?.(nextAttempt) if (!prefersReducedMotion) { await new Promise((resolve) => window.setTimeout(resolve, 180)) if (runRef.current !== run) return if (nextAttempt > revealAfter) { await bear.start({ y: nextAttempt >= angryAfter ? "0%" : "40%", transition: { duration: 0.24 }, }) if (runRef.current !== run) return } await armWrap.start({ x: 32, transition: { duration } }) if (runRef.current !== run) return await Promise.all([ arm.start({ scaleX: 0.7, transition: { duration } }), paw.start({ scaleX: 0.85, transition: { duration: 0.1 } }), ]) if (runRef.current !== run) return } setChecked(false) setMessage("The bear switched it back off") setAttempts(nextAttempt) if (!prefersReducedMotion) { await Promise.all([ paw.start({ scaleX: 0, transition: { duration: 0.1 } }), arm.start({ scaleX: 1, transition: { duration: 0.1 } }), armWrap.start({ x: 0, transition: { duration } }), bear.start({ y: "100%", transition: { duration: 0.24 } }), ]) if (runRef.current !== run) return } setBusy(false) } function peek() { if (!busy && bearIsVisible && !prefersReducedMotion) { void bear.start({ y: "40%", transition: { duration: 0.12 } }) } } function hide() { if (!busy && !prefersReducedMotion) { void bear.start({ y: "100%", transition: { duration: 0.12 } }) } } return (

{bearIsAngry && ( #@$%*! )}

{ariaLabel} void refuse()} className="cursor-inherit absolute inset-0 z-10 m-0 size-full opacity-0" /> {message}

) }) 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion@^13.1.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^13.1.0"}]]}]}]]}],["$","$L4d",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"registry/default/impossible-checkbox/impossible-checkbox.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]