{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "file-input", "title": "File Input", "description": "A drop zone that wakes up when a file is over it, with new file rows arriving one after another.", "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/file-input.tsx", "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/file-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 {\n FileInputDropzone as FileInputDropzonePart,\n FileInputItem as FileInputItemPart,\n FileInputItemRemove as FileInputItemRemovePart,\n FileInputTrigger as FileInputTriggerPart,\n} from \"@ui-sdk/react/file-input\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/file-input\"\n\n/* While files are over it, the zone lifts toward them on a spring. */\nfunction FileInputDropzone({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction FileInputTrigger({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Cascade: rows rise in out of a blur, each one 32ms after the row above it. Only opacity,\n translate and filter transition here, so the delay never slows anything else. */\nfunction FileInputItem({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction FileInputItemRemove({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { FileInputDropzone, FileInputItem, FileInputItemRemove, FileInputTrigger }\n", "type": "registry:component", "target": "components/keyframery/primitives/file-input.tsx" }, { "path": "registry/components/keyframery/file-input.tsx", "content": "\"use client\"\n\n/* Styled file input: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n FileInput as FileInputRoot,\n FileInputDropzone as FileInputDropzonePart,\n FileInputItem as FileInputItemPart,\n FileInputItemRemove as FileInputItemRemovePart,\n FileInputList as FileInputListPart,\n FileInputTrigger as FileInputTriggerPart,\n createFileInputController,\n formatFileSize,\n relativePath,\n} from \"@/components/keyframery/primitives/file-input\"\nimport { cn } from \"@/lib/utils\"\n\nfunction FileInput({ className, ...props }: React.ComponentProps) {\n return \n}\n\n/* A dashed hairline at rest. While files are over it the line turns solid and the zone\n tints: ring colour when they would be taken, destructive when they would not. */\nfunction FileInputDropzone({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n svg]:size-4\",\n className,\n )}\n {...props}\n />\n )\n}\n\n/* The mark at the top of a drop zone: a small key holding the upload arrow. While files are\n over the zone it rises 8px with a pop, on top of the zone's own lift. Purely visual. */\nfunction FileInputDropzoneIcon({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n \n \n \n \n \n )\n}\n\n/* A key that opens the system picker. */\nfunction FileInputTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* One Tab stop; arrow keys move between rows. */\nfunction FileInputList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* A row; the primitive cascades the rows in. */\nfunction FileInputItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction FileInputItemRemove({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children ?? (\n \n \n \n )}\n \n )\n}\n\nexport {\n FileInput,\n FileInputDropzone,\n FileInputDropzoneIcon,\n FileInputItem,\n FileInputItemRemove,\n FileInputList,\n FileInputTrigger,\n createFileInputController,\n formatFileSize,\n relativePath,\n}\n", "type": "registry:component", "target": "components/keyframery/file-input.tsx" } ], "type": "registry:component" }