{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropzone-button",
  "type": "registry:ui",
  "title": "Dropzone Button",
  "description": "Drag-and-drop file input with explicit accept, reject and picker behavior.",
  "dependencies": [
    "@mantine/core@^9",
    "@mantine/dropzone@^9",
    "@tabler/icons-react@^3"
  ],
  "docs": "Adapted from Mantine UI DropzoneButton at ffbf61c559f374a7ea28fcf00355e84dcbe9a908; drop/reject callbacks, constraints and user-facing text are configurable.",
  "css": {
    "@import \"@mantine/dropzone/styles.css\"": {}
  },
  "registryDependencies": [
    "@house/mantine-ui-license"
  ],
  "files": [
    {
      "path": "registry/mantine-ui/dropzone-button/dropzone-button.tsx",
      "type": "registry:ui",
      "content": "/**\n * Adapted from Mantine UI's DropzoneButton at\n * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see\n * LICENSES/MANTINE-UI.txt after installation.\n */\n\nimport { Button, Group, Text, useMantineTheme } from \"@mantine/core\";\nimport { Dropzone, type FileRejection, MIME_TYPES } from \"@mantine/dropzone\";\nimport { IconCloudUpload, IconDownload, IconX } from \"@tabler/icons-react\";\nimport { useRef } from \"react\";\n\nimport classes from \"./dropzone-button.module.css\";\n\nexport interface DropzoneButtonProps {\n  onDrop: (files: File[]) => void;\n  onReject?: (rejections: FileRejection[]) => void;\n  accept?: string[];\n  maxSize?: number;\n  multiple?: boolean;\n  disabled?: boolean;\n  idleLabel?: string;\n  acceptLabel?: string;\n  rejectLabel?: string;\n  description?: string;\n  buttonLabel?: string;\n}\n\nexport function DropzoneButton({\n  onDrop,\n  onReject,\n  accept = [MIME_TYPES.pdf],\n  maxSize = 30 * 1024 ** 2,\n  multiple = true,\n  disabled = false,\n  idleLabel = \"Upload files\",\n  acceptLabel = \"Drop files here\",\n  rejectLabel = \"These files cannot be accepted\",\n  description = \"Drag and drop files here, or use the file picker.\",\n  buttonLabel = \"Select files\",\n}: DropzoneButtonProps) {\n  const theme = useMantineTheme();\n  const openRef = useRef<() => void>(null);\n\n  return (\n    <div className={classes.wrapper}>\n      <Dropzone\n        openRef={openRef}\n        onDrop={onDrop}\n        onReject={onReject}\n        className={classes.dropzone}\n        radius=\"md\"\n        accept={accept}\n        maxSize={maxSize}\n        multiple={multiple}\n        disabled={disabled}\n        inputProps={{ \"aria-label\": idleLabel }}\n      >\n        <div style={{ pointerEvents: \"none\" }}>\n          <Group justify=\"center\">\n            <Dropzone.Accept>\n              <IconDownload size={50} color={theme.colors.blue[6]} stroke={1.5} />\n            </Dropzone.Accept>\n            <Dropzone.Reject>\n              <IconX size={50} color={theme.colors.red[6]} stroke={1.5} />\n            </Dropzone.Reject>\n            <Dropzone.Idle>\n              <IconCloudUpload size={50} stroke={1.5} className={classes.icon} />\n            </Dropzone.Idle>\n          </Group>\n\n          <Text ta=\"center\" fw={700} fz=\"lg\" mt=\"xl\">\n            <Dropzone.Accept>{acceptLabel}</Dropzone.Accept>\n            <Dropzone.Reject>{rejectLabel}</Dropzone.Reject>\n            <Dropzone.Idle>{idleLabel}</Dropzone.Idle>\n          </Text>\n\n          <Text className={classes.description}>{description}</Text>\n        </div>\n      </Dropzone>\n\n      <Button\n        className={classes.control}\n        size=\"md\"\n        radius=\"xl\"\n        color=\"blue.8\"\n        disabled={disabled}\n        onClick={() => openRef.current?.()}\n      >\n        {buttonLabel}\n      </Button>\n    </div>\n  );\n}\n"
    },
    {
      "path": "registry/mantine-ui/dropzone-button/dropzone-button.module.css",
      "type": "registry:file",
      "target": "@ui/dropzone-button.module.css",
      "content": "/*\n * Adapted from Mantine UI's DropzoneButton at\n * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see\n * LICENSES/MANTINE-UI.txt after installation.\n */\n.wrapper {\n  position: relative;\n  margin-bottom: 30px;\n}\n\n.dropzone {\n  padding-bottom: 50px;\n  color: var(--mantine-color-bright);\n  border-width: 1px;\n}\n\n.icon {\n  color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-white));\n}\n\n.control {\n  position: absolute;\n  bottom: -20px;\n  left: calc(50% - 125px);\n  width: 250px;\n}\n\n.description {\n  margin-top: var(--mantine-spacing-xs);\n  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-4));\n  font-size: var(--mantine-font-size-sm);\n  text-align: center;\n}\n"
    }
  ],
  "meta": {
    "mantine": {
      "requires": ">=9",
      "provider": "MantineProvider",
      "props": {
        "DropzoneButton": [
          {
            "name": "onDrop",
            "type": "(files: File[]) => void",
            "required": true,
            "description": "Called with the accepted files when a valid drop or file-picker selection completes."
          },
          {
            "name": "onReject",
            "type": "(rejections: FileRejection[]) => void",
            "required": false,
            "description": "Called with the rejected files when a drop fails validation (type or size)."
          },
          {
            "name": "accept",
            "type": "string[]",
            "required": false,
            "default": "[MIME_TYPES.pdf]",
            "description": "Restricts accepted uploads to the given MIME types."
          },
          {
            "name": "maxSize",
            "type": "number",
            "required": false,
            "default": "30 * 1024 ** 2",
            "description": "Sets the maximum accepted file size in bytes."
          },
          {
            "name": "multiple",
            "type": "boolean",
            "required": false,
            "default": "true",
            "description": "Allows selecting or dropping more than one file at a time."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "required": false,
            "default": "false",
            "description": "Disables both the dropzone and the trigger button."
          },
          {
            "name": "idleLabel",
            "type": "string",
            "required": false,
            "default": "\"Upload files\"",
            "description": "Sets the heading text shown while the dropzone is idle, and doubles as its accessible label."
          },
          {
            "name": "acceptLabel",
            "type": "string",
            "required": false,
            "default": "\"Drop files here\"",
            "description": "Sets the heading text shown while a dragged file is being validated as acceptable."
          },
          {
            "name": "rejectLabel",
            "type": "string",
            "required": false,
            "default": "\"These files cannot be accepted\"",
            "description": "Sets the heading text shown while a dragged file would be rejected."
          },
          {
            "name": "description",
            "type": "string",
            "required": false,
            "default": "\"Drag and drop files here, or use the file picker.\"",
            "description": "Renders supporting text below the heading describing how to use the dropzone."
          },
          {
            "name": "buttonLabel",
            "type": "string",
            "required": false,
            "default": "\"Select files\"",
            "description": "Sets the label of the button that opens the native file picker."
          }
        ]
      },
      "usage": {
        "path": "registry/mantine-ui/dropzone-button/dropzone-button.usage.tsx",
        "content": "import { DropzoneButton } from \"@/components/ui/dropzone-button\";\n\nexport function ResumeUpload() {\n  return (\n    <DropzoneButton\n      onDrop={(files) => console.log(\"accepted files\", files)}\n      onReject={(rejections) => console.log(\"rejected files\", rejections)}\n      idleLabel=\"Upload your resume\"\n      acceptLabel=\"Drop your resume here\"\n      rejectLabel=\"PDF files only, up to 30MB\"\n      description=\"Drag and drop a PDF here, or click the button to browse your files.\"\n      buttonLabel=\"Select file\"\n    />\n  );\n}\n"
      }
    }
  }
}