{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "input", "title": "Input", "description": "The focus ring closes in around the field on a spring.", "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/input.tsx", "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/input`: same parts, same props. Swap the import and keep your code.\n This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport {\n Input as InputPart,\n InputClear as InputClearPart,\n InputGroup as InputGroupPart,\n} from \"@ui-sdk/react/input\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/input\"\n\n/* The focus ring is the outline. It starts 10px out and 0px wide and closes in onto the field\n on a spring, easing from its resting colour to its focus colour as it lands, while the hairline\n (a box-shadow) changes colour on a short clock of its own. On blur it lets go fast. Give the\n outline a strong colour at rest and a soft one on focus: `outline-ring focus-visible:outline-[3px] focus-visible:outline-ring/30`. */\nconst ringMotion =\n \"outline-offset-[10px] \" +\n \"[transition:outline-offset_calc(160ms*var(--kf-speed,1))_var(--ease-house),outline-width_calc(160ms*var(--kf-speed,1))_var(--ease-house),outline-color_0s_linear_calc(160ms*var(--kf-speed,1)),box-shadow_calc(150ms*var(--kf-speed,1))_var(--ease-house),background-color_calc(150ms*var(--kf-speed,1))_var(--ease-house)] \" +\n \"motion-reduce:[transition:none]!\"\n\nfunction Input({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* In a group the ring belongs to the group and follows the input's focus. */\nfunction InputGroup({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Only in the page while there is text to clear: it pops in, and presses with a pop release. */\nfunction InputClear({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Input, InputClear, InputGroup }\n", "type": "registry:component", "target": "components/keyframery/primitives/input.tsx" }, { "path": "registry/components/keyframery/input.tsx", "content": "\"use client\"\n\n/* Styled input: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n Input as InputPrimitive,\n InputClear as InputClearPrimitive,\n InputGroup as InputGroupPrimitive,\n createInputController,\n} from \"@/components/keyframery/primitives/input\"\nimport { cn } from \"@/lib/utils\"\n\n/* The field look: a hairline and a small drop shadow. The hairline's colour is one\n variable, so hover, focus and invalid each change a single value. The focus ring is the\n outline; the primitive makes it close in on a spring. */\nconst fieldBox =\n \"rounded-[10px] bg-background text-[13px] \" +\n \"outline-0 outline-ring aria-invalid:outline-destructive \" +\n \"[--field-line:rgb(0_0_0/0.09)] dark:[--field-line:rgb(255_255_255/0.1)] \" +\n \"shadow-[0_0_0_1px_var(--field-line),0_1px_2px_rgb(0_0_0/0.05)] dark:shadow-[0_0_0_1px_var(--field-line)] \" +\n \"hover:[--field-line:rgb(0_0_0/0.16)] dark:hover:[--field-line:rgb(255_255_255/0.18)]\"\n\nfunction Input({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* The group is the field: text, icons and buttons sit around the input inside one box,\n and the input gives up its own. The ring follows the input's focus, not a button's. */\nfunction InputGroup({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction InputClear({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? (\n \n \n \n )}\n \n )\n}\n\nexport { Input, InputClear, InputGroup, createInputController }\n", "type": "registry:component", "target": "components/keyframery/input.tsx" } ], "type": "registry:component" }