4c: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"] 4d:I[544296,["/_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"],"ItemStyles"] 4e:I[34002,["/_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"],"CodeEditor"] 4f: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"] 50:T94d,"use client"; import * as React from "react"; import { useFlowGroup } from "@/lib/cojeev-motion/use-flow"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { OTPInput, OTPInputContext, REGEXP_ONLY_DIGITS } from "input-otp"; export const inputOTPVariants = cva("v-otp flex gap-[var(--s-2)]"); export type InputOTPProps = React.ComponentProps; export function InputOTP({ containerClassName, className, pattern = REGEXP_ONLY_DIGITS, ...props }: InputOTPProps) { return ( ); } export type InputOTPGroupProps = React.ComponentProps<"div">; export function InputOTPGroup({ className, ref, ...props }: InputOTPGroupProps) { const morphRef = useMorph("inputs", ref); const flowRef = useFlowGroup(morphRef, { kind: "fill", itemSelector: '[data-slot="input-otp-slot"]', activeSelector: '[data-state="active"]', }); return (

); } export type InputOTPSlotProps = React.ComponentProps<"div"> & { index: number }; export function InputOTPSlot({ className, index, ...props }: InputOTPSlotProps) { const context = React.useContext(OTPInputContext); const slot = context.slots[index]; return (

{slot?.char} {slot?.hasFakeCaret && (

); } export type InputOTPSeparatorProps = React.ComponentProps<"div">; export function InputOTPSeparator({ children, ...props }: InputOTPSeparatorProps) { return (

{children ?? "−"}

); } 51:Tafb,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-otp:where([data-slot="input-otp"], [data-slot^="input-otp-"]) { display: flex; gap: var(--s-2); } [data-slot="input-otp-slot"] { width: 44px; height: 52px; text-align: center; font-size: 20px; font-weight: 600; border-radius: var(--r-md); background: var(--v-beige); border: 1.5px solid transparent; } [data-slot="input-otp-slot"][data-active] { outline: 0; border-color: var(--v-pink); } @media (max-width: 640px) { .v-otp:where([data-slot="input-otp"], [data-slot^="input-otp-"]) { gap: 6px; } } @media (max-width: 640px) { [data-slot="input-otp-slot"] { flex: 1 1 0; min-width: 0; width: auto; } } [data-slot="input-otp-slot"] { box-shadow: inset 0 0 0 1px var(--v-edge); } [data-slot="input-otp-slot"][data-active] { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot="input-otp-slot"]:nth-child(3) { margin-right: 12px; } [data-slot="input-otp-slot"] { transition: box-shadow var(--t-micro), background var(--t-micro), transform var(--t-micro) var(--enter); } [data-slot="input-otp-slot"][data-active] { transform: translateY(-2px); } .v-otp:where([data-slot="input-otp"], [data-slot^="input-otp-"]) { box-shadow: none; border: 0; } [data-slot="input-otp-slot"] { border: 1.5px solid var(--v-border); background: var(--input); box-shadow: none; } [data-slot="input-otp-slot"][data-active] { border-color: var(--v-pink); } [data-slot="input-otp-slot"] { border-color: var(--v-edge); } @media (prefers-reduced-motion: reduce) { [data-slot="input-otp"], [data-slot^="input-otp-"], [data-slot="input-otp"]::before, [data-slot="input-otp"]::after, [data-slot^="input-otp-"]::before, [data-slot^="input-otp-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } [data-slot="input-otp-group"] { flex: 0 1 auto; min-width: 0; } [data-slot="input-otp-slot"] { flex-shrink: 0; } [data-slot="input-otp-slot"][data-active] { border-color: var(--v-pink); } [data-slot="input-otp"]:disabled { cursor: not-allowed; } /* Preserve the authored native input inset on the semantic visual slots. */ [data-slot="input-otp-slot"] { padding: 1px 2px; } /* Keep the two groups visually connected while allowing a narrow form to shrink. */ [data-input-otp-container] { width: fit-content; max-width: 100%; align-items: center; } [data-slot="input-otp-group"] { align-items: center; } [data-slot="input-otp-slot"]:nth-child(3) { margin-right: 0; } [data-slot="input-otp-separator"] { flex: none; } @media (max-width: 640px) { [data-slot="input-otp-slot"] { width: 40px; flex: 0 1 40px; } } } 4b:["$","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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","input-otp",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/input-otp","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":"input-otp"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/input-otp.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/input-otp.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/input-otp.css","content":"$51","type":"registry:file","target":"styles/cojeev/input-otp.css"}],"className":"h-[70svh] min-h-80"}]]}]