{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "file-select",
  "title": "File Select",
  "description": "A customized file selection component.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/flowui/components/file-select/file-select.tsx",
      "content": "\"use client\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Upload } from \"lucide-react\";\r\nimport { useId, useRef } from \"react\";\r\n\r\ntype SlotProps = {\r\n    children?: React.ReactNode;\r\n    className?: string;\r\n};\r\n\r\ntype FileSelectProps = {\r\n    accept?: string;\r\n    multiple?: boolean;\r\n} & SlotProps;\r\n\r\ntype FileSelectTextProps = SlotProps;\r\n\r\nexport const FileSelectLogo = ({ children, className }: SlotProps) => {\r\n    return children ?? <Upload className={cn(className)} />\r\n}\r\n\r\nexport const FileSelectText = ({ children, className }: FileSelectTextProps) => {\r\n    return (\r\n        <div className={cn(\r\n            \"text-sm text-center\",\r\n            className\r\n        )}\r\n        >\r\n            {children}\r\n        </div>\r\n    )\r\n}\r\n\r\nexport const FileSelect = ({\r\n    className,\r\n    children,\r\n    accept,\r\n    multiple\r\n}: FileSelectProps) => {\r\n    const inputId = useId();\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement>) => {\r\n        if (e.key === \"Enter\" || e.key === \" \") {\r\n            e.preventDefault();\r\n            inputRef.current?.click();\r\n        }\r\n    }\r\n    return (\r\n        <>\r\n            <input\r\n                id={inputId}\r\n                ref={inputRef}\r\n                type=\"file\"\r\n                className=\"hidden\"\r\n                accept={accept}\r\n                multiple={multiple}\r\n            />\r\n            <label\r\n                tabIndex={0}\r\n                role=\"button\"\r\n                onKeyDown={handleKeyDown}\r\n                htmlFor={inputId}\r\n                className={cn(\r\n                    \"flex flex-col justify-center items-center size-50 border border-dashed rounded-lg cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors\",\r\n                    className\r\n                )}\r\n            >\r\n                {children}\r\n            </label>\r\n        </>\r\n    )\r\n}",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}