{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "otp-input", "title": "OTP Input", "description": "One ring glides from slot to slot, digits pop into place and the slots pulse when the code is complete.", "dependencies": [ "@ui-sdk/core@0.1.0-beta.2", "@ui-sdk/react@0.1.0-beta.2" ], "registryDependencies": [ "@keyframery/motion" ], "files": [ { "path": "registry/components/keyframery/primitives/otp-input.tsx", "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/otp-input`: same parts, same props. Swap the import and keep\n your code. This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport { OTPInput as OTPInputRoot, OTPInputSlot as OTPInputSlotPart } from \"@ui-sdk/react/otp-input\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/otp-input\"\n\nconst keyframes =\n \"@keyframes kf-otp-wave{0%{translate:0 0;scale:1}35%{translate:0 -5px;scale:1.07}100%{translate:0 0;scale:1}}\"\n\n/* Glide: one ring, drawn by the root, glides from slot to slot under CSS anchors instead of\n each slot lighting up. Its default look is neutral and follows the text colour; restyle it\n with `before:` classes (radius, shadow). It fades out when the input loses focus. */\nfunction OTPInput({ className, ...props }: React.ComponentProps) {\n return (\n <>\n \n \n \n )\n}\n\n/* Each typed character rises 12px into place from half size on `ease-pop`. When the code is\n complete, the slots pulse once, left to right. */\nfunction OTPInputSlot({\n className,\n children,\n index,\n style,\n ...props\n}: React.ComponentProps) {\n const order = { \"--kf-i\": index } as React.CSSProperties\n return (\n ({ ...order, ...style(state) }) : { ...order, ...style }}\n className={cn(\n \"data-active:[anchor-name:--kf-otp]\",\n \"group-data-complete/kf-otp:animate-[kf-otp-wave_calc(560ms*var(--kf-speed,1))_var(--ease-house)_calc(var(--kf-i)*calc(60ms*var(--kf-speed,1)))_both]\",\n \"motion-reduce:animate-none!\",\n className,\n )}\n {...props}\n >\n {children ??\n ((state) =>\n state.char ? (\n \n {state.char}\n \n ) : null)}\n \n )\n}\n\nexport { OTPInput, OTPInputSlot }\n", "type": "registry:component", "target": "components/keyframery/primitives/otp-input.tsx" }, { "path": "registry/components/keyframery/otp-input.tsx", "content": "\"use client\"\n\n/* Styled OTP input: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n OTPInput as OTPInputPrimitive,\n OTPInputGroup as OTPInputGroupPart,\n OTPInputSeparator as OTPInputSeparatorPart,\n OTPInputSlot as OTPInputSlotPrimitive,\n createOTPInputController,\n} from \"@/components/keyframery/primitives/otp-input\"\nimport { cn } from \"@/lib/utils\"\n\n/* One invisible native input spans the root and takes every key, paste and autofill.\n The slots only draw it. The focus ring is the primitive's gliding ring, given the\n field's ring look here; it turns destructive while the code is invalid. */\nfunction OTPInput({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction OTPInputGroup({ className, ...props }: React.ComponentProps) {\n return \n}\n\n/* Each slot is a small well; the active one brightens under the gliding ring, and an empty\n active slot shows a soft neutral caret. */\nfunction OTPInputSlot({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction OTPInputSeparator({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? (\n \n \n \n )}\n \n )\n}\n\nexport { OTPInput, OTPInputGroup, OTPInputSeparator, OTPInputSlot, createOTPInputController }\n", "type": "registry:component", "target": "components/keyframery/otp-input.tsx" } ], "type": "registry:component" }