├── .prettierignore
├── content
    └── docs
    │   ├── meta.json
    │   └── index.mdx
├── app
    ├── favicon.ico
    ├── fonts
    │   ├── GeistVF.woff
    │   └── GeistMonoVF.woff
    ├── (home)
    │   ├── page.tsx
    │   ├── layout.tsx
    │   └── _
    │   │   ├── demo.tsx
    │   │   └── controls.tsx
    ├── source.ts
    ├── api
    │   └── search
    │   │   └── route.ts
    ├── layout.config.ts
    ├── docs
    │   ├── layout.tsx
    │   └── [[...slug]]
    │   │   └── page.tsx
    ├── layout.tsx
    └── globals.css
├── .prettierrc
├── source.config.ts
├── postcss.config.mjs
├── lib
    ├── utils.ts
    └── hooks.ts
├── .eslintrc.json
├── next.config.mjs
├── components.json
├── README.md
├── .gitignore
├── tsconfig.json
├── components
    ├── ui
    │   ├── label.tsx
    │   ├── input.tsx
    │   ├── checkbox.tsx
    │   ├── switch.tsx
    │   ├── popover.tsx
    │   ├── avatar.tsx
    │   ├── toggle.tsx
    │   ├── button.tsx
    │   ├── accordion.tsx
    │   ├── drawer.tsx
    │   └── form.tsx
    ├── labeled-checkbox.tsx
    ├── labeled-input.tsx
    ├── examples
    │   ├── single-file.tsx
    │   ├── multi-images.tsx
    │   └── multi-file.tsx
    ├── labeled-switch.tsx
    └── dropzone.tsx
├── LICENSE.md
├── package.json
├── scripts
    └── build.ts
├── tailwind.config.ts
└── public
    └── dropzone.json


/.prettierignore:
--------------------------------------------------------------------------------
1 | pnpm-lock.yaml


--------------------------------------------------------------------------------
/content/docs/meta.json:
--------------------------------------------------------------------------------
1 | {
2 |   "pages": ["Hello"]
3 | }
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/janglad/shadcn-dropzone/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/janglad/shadcn-dropzone/HEAD/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
3 | }
4 | 


--------------------------------------------------------------------------------
/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/janglad/shadcn-dropzone/HEAD/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/app/(home)/page.tsx:
--------------------------------------------------------------------------------
1 | import { Demo } from "./_/demo";
2 | 
3 | export default function HomePage() {
4 |   return <Demo />;
5 | }
6 | 


--------------------------------------------------------------------------------
/source.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, defineDocs } from "fumadocs-mdx/config";
2 | 
3 | export const { docs, meta } = defineDocs();
4 | 
5 | export default defineConfig();
6 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/app/source.ts:
--------------------------------------------------------------------------------
1 | import { docs, meta } from "@/.source";
2 | import { loader } from "fumadocs-core/source";
3 | import { createMDXSource } from "fumadocs-mdx";
4 | 
5 | export const source = loader({
6 |   baseUrl: "/docs",
7 |   source: createMDXSource(docs, meta),
8 | });
9 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { clsx, type ClassValue } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs));
 6 | }
 7 | 
 8 | export const roundUpTo = (num: number, decimals: number) => {
 9 |   return Math.ceil(num * 10 ** decimals) / 10 ** decimals;
10 | };
11 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "next/core-web-vitals",
 4 |     "next/typescript",
 5 |     "plugin:tailwindcss/recommended",
 6 |     "plugin:jsx-a11y/strict"
 7 |   ],
 8 |   "plugins": ["react-compiler"],
 9 |   "rules": {
10 |     "react-compiler/react-compiler": "error"
11 |   },
12 |   "ignorePatterns": ["**/components/ui/**"]
13 | }
14 | 


--------------------------------------------------------------------------------
/app/(home)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactNode } from "react";
 2 | import { HomeLayout } from "fumadocs-ui/layouts/home"
 3 | import { baseOptions } from "../layout.config";
 4 | 
 5 | export default function Layout({
 6 |   children,
 7 | }: {
 8 |   children: ReactNode;
 9 | }): React.ReactElement {
10 |   return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
11 | }
12 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | import { createMDX } from "fumadocs-mdx/next";
 2 | 
 3 | const withMDX = createMDX();
 4 | 
 5 | /** @type {import('next').NextConfig} */
 6 | const nextConfig = {
 7 |   redirects: async () => [
 8 |     {
 9 |       source: "/",
10 |       destination: "/docs",
11 |       permanent: false,
12 |     },
13 |   ],
14 | };
15 | 
16 | export default withMDX(nextConfig);
17 | 


--------------------------------------------------------------------------------
/app/api/search/route.ts:
--------------------------------------------------------------------------------
 1 | import { source } from '@/app/source';
 2 | import { createSearchAPI } from 'fumadocs-core/search/server';
 3 | 
 4 | export const { GET } = createSearchAPI('advanced', {
 5 |   indexes: source.getPages().map((page) => ({
 6 |     title: page.data.title,
 7 |     structuredData: page.data.structuredData,
 8 |     id: page.url,
 9 |     url: page.url,
10 |   })),
11 | });
12 | 


--------------------------------------------------------------------------------
/app/layout.config.ts:
--------------------------------------------------------------------------------
 1 | import { type BaseLayoutProps } from "fumadocs-ui/layouts/shared";
 2 | 
 3 | /**
 4 |  * Shared layout configuration
 5 |  *
 6 |  * you cna configure layouts individually from:
 7 |  * Home Layout:
 8 |  */
 9 | export const baseOptions: BaseLayoutProps = {
10 |   nav: {
11 |     title: "Dropzone",
12 |   },
13 |   githubUrl: "https://github.com/janglad/shadcn-dropzone",
14 | };
15 | 


--------------------------------------------------------------------------------
/app/docs/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { source } from "@/app/source";
 2 | import { DocsLayout } from "fumadocs-ui/layouts/docs";
 3 | import type { ReactNode } from "react";
 4 | import { baseOptions } from "../layout.config";
 5 | 
 6 | export default function Layout({ children }: { children: ReactNode }) {
 7 |   return (
 8 |     <DocsLayout tree={source.pageTree} {...baseOptions}>
 9 |       {children}
10 |     </DocsLayout>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/lib/hooks.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | export const useIsMobile = () => {
 4 |   const [isMobile, setIsMobile] = useState(false);
 5 | 
 6 |   const handleResize = () => {
 7 |     setIsMobile(window.innerWidth <= 768);
 8 |   };
 9 | 
10 |   useEffect(() => {
11 |     handleResize();
12 |     window.addEventListener("resize", handleResize);
13 | 
14 |     return () => {
15 |       window.removeEventListener("resize", handleResize);
16 |     };
17 |   }, []);
18 | 
19 |   return isMobile;
20 | };
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ShadCn style Dropzone
 2 | 
 3 | A dropzone component built in the style of ShadCn. Uses the `useDropzone` hook from react-dropzone, builds on ShadCn primitives and aims to be fully accessible.
 4 | 
 5 | ## Todo
 6 | 
 7 | - [ ] Integrate with React Hook Form
 8 | 
 9 | ## Installation
10 | 
11 | Make sure you have ShadCn set up in your project and run `pnpx shadcn@latest add 'https://shadcn-dropzone.vercel.app/dropzone.json'`.
12 | 
13 | Or copy [this file](/components/dropzone.tsx) and update imports as needed.
14 | 
15 | ## Usage
16 | 
17 | Check out the[docs](https://shadcn-dropzone.vercel.app/).
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 
38 | #From Fumadocs
39 | # generated content
40 | .contentlayer
41 | .content-collections
42 | .source
43 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as LabelPrimitive from "@radix-ui/react-label";
 4 | import { cva, type VariantProps } from "class-variance-authority";
 5 | import * as React from "react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
11 | );
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 | 
26 | export { Label };
27 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className,
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     );
21 |   },
22 | );
23 | Input.displayName = "Input";
24 | 
25 | export { Input };
26 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { RootProvider } from "fumadocs-ui/provider";
 2 | import type { Metadata } from "next";
 3 | import localFont from "next/font/local";
 4 | import "./globals.css";
 5 | 
 6 | const geistSans = localFont({
 7 |   src: "./fonts/GeistVF.woff",
 8 |   variable: "--font-geist-sans",
 9 |   weight: "100 900",
10 | });
11 | const geistMono = localFont({
12 |   src: "./fonts/GeistMonoVF.woff",
13 |   variable: "--font-geist-mono",
14 |   weight: "100 900",
15 | });
16 | 
17 | export const metadata: Metadata = {
18 |   title: "Shadcn/ui Dropzone",
19 |   description:
20 |     "Dropzone component created in the style of shadcn/ui using React Dropzone.",
21 | };
22 | 
23 | export default function RootLayout({
24 |   children,
25 | }: Readonly<{
26 |   children: React.ReactNode;
27 | }>) {
28 |   return (
29 |     <html lang="en">
30 |       <body
31 |         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
32 |       >
33 |         <RootProvider>{children}</RootProvider>
34 |       </body>
35 |     </html>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 janglad
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 4 | import { Check } from "lucide-react";
 5 | import * as React from "react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const Checkbox = React.forwardRef<
10 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
12 | >(({ className, ...props }, ref) => (
13 |   <CheckboxPrimitive.Root
14 |     ref={ref}
15 |     className={cn(
16 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
17 |       className,
18 |     )}
19 |     {...props}
20 |   >
21 |     <CheckboxPrimitive.Indicator
22 |       className={cn("flex items-center justify-center text-current")}
23 |     >
24 |       <Check className="h-4 w-4" />
25 |     </CheckboxPrimitive.Indicator>
26 |   </CheckboxPrimitive.Root>
27 | ));
28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName;
29 | 
30 | export { Checkbox };
31 | 


--------------------------------------------------------------------------------
/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as SwitchPrimitives from "@radix-ui/react-switch";
 4 | import * as React from "react";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
15 |       className,
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ));
27 | Switch.displayName = SwitchPrimitives.Root.displayName;
28 | 
29 | export { Switch };
30 | 


--------------------------------------------------------------------------------
/app/docs/[[...slug]]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { source } from "@/app/source";
 2 | import defaultMdxComponents from "fumadocs-ui/mdx";
 3 | import {
 4 |   DocsBody,
 5 |   DocsDescription,
 6 |   DocsPage,
 7 |   DocsTitle,
 8 | } from "fumadocs-ui/page";
 9 | import type { Metadata } from "next";
10 | import { notFound } from "next/navigation";
11 | 
12 | export default async function Page({
13 |   params,
14 | }: {
15 |   params: { slug?: string[] };
16 | }) {
17 |   const page = source.getPage(params.slug);
18 |   if (!page) notFound();
19 | 
20 |   const MDX = page.data.body;
21 | 
22 |   return (
23 |     <DocsPage toc={page.data.toc} full={page.data.full}>
24 |       <DocsTitle>{page.data.title}</DocsTitle>
25 |       <DocsDescription>{page.data.description}</DocsDescription>
26 |       <DocsBody>
27 |         <MDX
28 |           components={{
29 |             ...defaultMdxComponents,
30 |           }}
31 |         />
32 |       </DocsBody>
33 |     </DocsPage>
34 |   );
35 | }
36 | 
37 | export async function generateStaticParams() {
38 |   return source.generateParams();
39 | }
40 | 
41 | export function generateMetadata({ params }: { params: { slug?: string[] } }) {
42 |   const page = source.getPage(params.slug);
43 |   if (!page) notFound();
44 | 
45 |   return {
46 |     title: page.data.title,
47 |     description: page.data.description,
48 |   } satisfies Metadata;
49 | }
50 | 


--------------------------------------------------------------------------------
/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as PopoverPrimitive from "@radix-ui/react-popover";
 4 | import * as React from "react";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Popover = PopoverPrimitive.Root;
 9 | 
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 | 
12 | const PopoverContent = React.forwardRef<
13 |   React.ElementRef<typeof PopoverPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <PopoverPrimitive.Portal>
17 |     <PopoverPrimitive.Content
18 |       ref={ref}
19 |       align={align}
20 |       sideOffset={sideOffset}
21 |       className={cn(
22 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |         className,
24 |       )}
25 |       {...props}
26 |     />
27 |   </PopoverPrimitive.Portal>
28 | ));
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
30 | 
31 | export { Popover, PopoverContent, PopoverTrigger };
32 | 


--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as TogglePrimitive from "@radix-ui/react-toggle";
 4 | import { cva, type VariantProps } from "class-variance-authority";
 5 | import * as React from "react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const toggleVariants = cva(
10 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
11 |   {
12 |     variants: {
13 |       variant: {
14 |         default: "bg-transparent",
15 |         outline:
16 |           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
17 |       },
18 |       size: {
19 |         default: "h-10 px-3",
20 |         sm: "h-9 px-2.5",
21 |         lg: "h-11 px-5",
22 |       },
23 |     },
24 |     defaultVariants: {
25 |       variant: "default",
26 |       size: "default",
27 |     },
28 |   },
29 | );
30 | 
31 | const Toggle = React.forwardRef<
32 |   React.ElementRef<typeof TogglePrimitive.Root>,
33 |   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
34 |     VariantProps<typeof toggleVariants>
35 | >(({ className, variant, size, ...props }, ref) => (
36 |   <TogglePrimitive.Root
37 |     ref={ref}
38 |     className={cn(toggleVariants({ variant, size, className }))}
39 |     {...props}
40 |   />
41 | ));
42 | 
43 | Toggle.displayName = TogglePrimitive.Root.displayName;
44 | 
45 | export { Toggle, toggleVariants };
46 | 


--------------------------------------------------------------------------------
/components/labeled-checkbox.tsx:
--------------------------------------------------------------------------------
 1 | import { Checkbox } from "@/components/ui/checkbox";
 2 | import {
 3 |   FormControl,
 4 |   FormField,
 5 |   FormItem,
 6 |   FormLabel,
 7 |   FormMessage,
 8 | } from "@/components/ui/form";
 9 | import type {
10 |   Control,
11 |   ControllerRenderProps,
12 |   FieldValues,
13 |   UseControllerProps,
14 | } from "react-hook-form";
15 | 
16 | interface LabeledCheckboxProps<TFieldValues extends FieldValues>
17 |   extends UseControllerProps<TFieldValues> {
18 |   // Optional in default type
19 |   control: Control<TFieldValues>;
20 |   label?: string;
21 |   inputProps?: Omit<
22 |     React.ComponentProps<typeof Checkbox>,
23 |     keyof ControllerRenderProps
24 |   >;
25 | }
26 | 
27 | export function LabeledCheckbox<TFieldValues extends FieldValues>(
28 |   props: LabeledCheckboxProps<TFieldValues>,
29 | ) {
30 |   const { inputProps, ...restProps } = props;
31 |   const isInvalid = props.control.getFieldState(props.name).invalid;
32 | 
33 |   return (
34 |     <FormField
35 |       {...restProps}
36 |       render={({ field }) => (
37 |         <FormItem className="flex flex-col gap-1 space-y-0">
38 |           <div className="flex justify-between">
39 |             {props.label === undefined ? null : (
40 |               <FormLabel className="leading-normal">{props.label}</FormLabel>
41 |             )}
42 |             <FormMessage />
43 |           </div>
44 | 
45 |           <FormControl>
46 |             <Checkbox
47 |               {...inputProps}
48 |               {...field}
49 |               checked={field.value}
50 |               onCheckedChange={field.onChange}
51 |               aria-invalid={isInvalid}
52 |             />
53 |           </FormControl>
54 |         </FormItem>
55 |       )}
56 |     />
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/components/labeled-input.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   FormControl,
 3 |   FormDescription,
 4 |   FormField,
 5 |   FormItem,
 6 |   FormLabel,
 7 |   FormMessage,
 8 | } from "@/components/ui/form";
 9 | import { Input } from "@/components/ui/input";
10 | import { cn } from "@/lib/utils";
11 | import type {
12 |   Control,
13 |   ControllerRenderProps,
14 |   FieldValues,
15 |   UseControllerProps,
16 | } from "react-hook-form";
17 | 
18 | interface LabeledInputProps<TFieldValues extends FieldValues>
19 |   extends UseControllerProps<TFieldValues> {
20 |   className?: string;
21 |   // Optional in default type
22 |   control: Control<TFieldValues>;
23 |   description?: string;
24 |   label?: string;
25 |   inputProps?: Omit<
26 |     React.ComponentProps<typeof Input>,
27 |     keyof ControllerRenderProps
28 |   >;
29 | }
30 | 
31 | export function LabeledInput<TFieldValues extends FieldValues>(
32 |   props: LabeledInputProps<TFieldValues>,
33 | ) {
34 |   const { inputProps, ...restProps } = props;
35 |   const isInvalid = props.control.getFieldState(props.name).invalid;
36 | 
37 |   return (
38 |     <FormField
39 |       {...restProps}
40 |       render={({ field }) => (
41 |         <FormItem
42 |           className={cn("flex flex-col gap-1 space-y-0", props.className)}
43 |         >
44 |           <div className="flex justify-between">
45 |             {props.label === undefined ? null : (
46 |               <FormLabel className="leading-normal">{props.label}</FormLabel>
47 |             )}
48 |             <FormMessage />
49 |           </div>
50 | 
51 |           <FormControl>
52 |             <Input {...inputProps} {...field} aria-invalid={isInvalid} />
53 |           </FormControl>
54 |           {props.description === undefined ? null : (
55 |             <FormDescription>{props.description}</FormDescription>
56 |           )}
57 |         </FormItem>
58 |       )}
59 |     />
60 |   );
61 | }
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shadcn-dropzone",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbo",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@hookform/resolvers": "^3.9.0",
13 |     "@radix-ui/react-accordion": "^1.2.1",
14 |     "@radix-ui/react-avatar": "^1.1.1",
15 |     "@radix-ui/react-checkbox": "^1.1.2",
16 |     "@radix-ui/react-dialog": "^1.1.2",
17 |     "@radix-ui/react-label": "^2.1.0",
18 |     "@radix-ui/react-popover": "^1.1.2",
19 |     "@radix-ui/react-slot": "^1.1.0",
20 |     "@radix-ui/react-switch": "^1.1.1",
21 |     "@radix-ui/react-toggle": "^1.1.0",
22 |     "class-variance-authority": "^0.7.0",
23 |     "clsx": "^2.1.1",
24 |     "fumadocs-core": "^14.2.0",
25 |     "fumadocs-mdx": "^11.1.1",
26 |     "fumadocs-ui": "^14.2.0",
27 |     "lucide-react": "^0.452.0",
28 |     "neverthrow": "^8.0.0",
29 |     "next": "14.2.15",
30 |     "react": "^18",
31 |     "react-dom": "^18",
32 |     "react-dropzone": "^14.2.9",
33 |     "react-hook-form": "^7.53.0",
34 |     "tailwind-merge": "^2.5.3",
35 |     "tailwindcss-animate": "^1.0.7",
36 |     "vaul": "^1.1.0",
37 |     "zod": "^3.23.8"
38 |   },
39 |   "devDependencies": {
40 |     "@types/mdx": "^2.0.13",
41 |     "@types/node": "^20",
42 |     "@types/react": "^18",
43 |     "@types/react-dom": "^18",
44 |     "eslint": "^8",
45 |     "eslint-config-next": "14.2.15",
46 |     "eslint-plugin-jsx-a11y": "^6.10.0",
47 |     "eslint-plugin-react-compiler": "0.0.0-experimental-07a2ff2-20241017",
48 |     "eslint-plugin-tailwindcss": "^3.17.5",
49 |     "postcss": "^8",
50 |     "prettier": "^3.3.3",
51 |     "prettier-plugin-organize-imports": "^4.1.0",
52 |     "prettier-plugin-tailwindcss": "^0.6.8",
53 |     "tailwindcss": "^3.4.1",
54 |     "typescript": "^5"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/components/examples/single-file.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import {
 3 |   Dropzone,
 4 |   DropZoneArea,
 5 |   DropzoneMessage,
 6 |   DropzoneTrigger,
 7 |   useDropzone,
 8 | } from "@/components/dropzone";
 9 | import { cn } from "@/lib/utils";
10 | import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
11 | 
12 | export function SingleFile() {
13 |   const dropzone = useDropzone({
14 |     onDropFile: async (file: File) => {
15 |       await new Promise((resolve) => setTimeout(resolve, 1000));
16 |       return {
17 |         status: "success",
18 |         result: URL.createObjectURL(file),
19 |       };
20 |     },
21 |     validation: {
22 |       accept: {
23 |         "image/*": [".png", ".jpg", ".jpeg"],
24 |       },
25 |       maxSize: 10 * 1024 * 1024,
26 |       maxFiles: 1,
27 |     },
28 |     shiftOnMaxFiles: true,
29 |   });
30 | 
31 |   const avatarSrc = dropzone.fileStatuses[0]?.result;
32 |   const isPending = dropzone.fileStatuses[0]?.status === "pending";
33 | 
34 |   return (
35 |     <div className="not-prose">
36 |       <Dropzone {...dropzone}>
37 |         <div className="flex justify-between">
38 |           <DropzoneMessage />
39 |         </div>
40 |         <DropZoneArea>
41 |           <DropzoneTrigger className="flex gap-8 bg-transparent text-sm">
42 |             <Avatar className={cn(isPending && "animate-pulse")}>
43 |               <AvatarImage className="object-cover" src={avatarSrc} />
44 |               <AvatarFallback>JG</AvatarFallback>
45 |             </Avatar>
46 |             <div className="flex flex-col gap-1 font-semibold">
47 |               <p>Upload a new avatar</p>
48 |               <p className="text-xs text-muted-foreground">
49 |                 Please select an image smaller than 10MB
50 |               </p>
51 |             </div>
52 |           </DropzoneTrigger>
53 |         </DropZoneArea>
54 |       </Dropzone>
55 |     </div>
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import { Slot } from "@radix-ui/react-slot";
 2 | import { cva, type VariantProps } from "class-variance-authority";
 3 | import * as React from "react";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   },
34 | );
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean;
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button";
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     );
52 |   },
53 | );
54 | Button.displayName = "Button";
55 | 
56 | export { Button, buttonVariants };
57 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |   font-family: Arial, Helvetica, sans-serif;
 7 | }
 8 | 
 9 | @layer utilities {
10 |   .text-balance {
11 |     text-wrap: balance;
12 |   }
13 | }
14 | 
15 | @layer base {
16 |   :root {
17 |     --background: 0 0% 100%;
18 |     --foreground: 0 0% 3.9%;
19 |     --card: 0 0% 100%;
20 |     --card-foreground: 0 0% 3.9%;
21 |     --popover: 0 0% 100%;
22 |     --popover-foreground: 0 0% 3.9%;
23 |     --primary: 0 0% 9%;
24 |     --primary-foreground: 0 0% 98%;
25 |     --secondary: 0 0% 96.1%;
26 |     --secondary-foreground: 0 0% 9%;
27 |     --muted: 0 0% 96.1%;
28 |     --muted-foreground: 0 0% 45.1%;
29 |     --accent: 0 0% 96.1%;
30 |     --accent-foreground: 0 0% 9%;
31 |     --destructive: 0 84.2% 60.2%;
32 |     --destructive-foreground: 0 0% 98%;
33 |     --border: 0 0% 89.8%;
34 |     --input: 0 0% 89.8%;
35 |     --ring: 0 0% 3.9%;
36 |     --chart-1: 12 76% 61%;
37 |     --chart-2: 173 58% 39%;
38 |     --chart-3: 197 37% 24%;
39 |     --chart-4: 43 74% 66%;
40 |     --chart-5: 27 87% 67%;
41 |     --radius: 0.5rem;
42 |   }
43 |   .dark {
44 |     --background: 0 0% 3.9%;
45 |     --foreground: 0 0% 98%;
46 |     --card: 0 0% 3.9%;
47 |     --card-foreground: 0 0% 98%;
48 |     --popover: 0 0% 3.9%;
49 |     --popover-foreground: 0 0% 98%;
50 |     --primary: 0 0% 98%;
51 |     --primary-foreground: 0 0% 9%;
52 |     --secondary: 0 0% 14.9%;
53 |     --secondary-foreground: 0 0% 98%;
54 |     --muted: 0 0% 14.9%;
55 |     --muted-foreground: 0 0% 63.9%;
56 |     --accent: 0 0% 14.9%;
57 |     --accent-foreground: 0 0% 98%;
58 |     --destructive: 0 62.8% 30.6%;
59 |     --destructive-foreground: 0 0% 98%;
60 |     --border: 0 0% 14.9%;
61 |     --input: 0 0% 14.9%;
62 |     --ring: 0 0% 83.1%;
63 |     --chart-1: 220 70% 50%;
64 |     --chart-2: 160 60% 45%;
65 |     --chart-3: 30 80% 55%;
66 |     --chart-4: 280 65% 60%;
67 |     --chart-5: 340 75% 55%;
68 |   }
69 | }
70 | 
71 | @layer base {
72 |   * {
73 |     @apply border-border;
74 |   }
75 |   body {
76 |     @apply bg-background text-foreground;
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/components/labeled-switch.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   FormControl,
 3 |   FormDescription,
 4 |   FormField,
 5 |   FormItem,
 6 |   FormLabel,
 7 |   FormMessage,
 8 | } from "@/components/ui/form";
 9 | import { Switch } from "@/components/ui/switch";
10 | import { cn } from "@/lib/utils";
11 | import type {
12 |   Control,
13 |   ControllerRenderProps,
14 |   FieldValues,
15 |   UseControllerProps,
16 | } from "react-hook-form";
17 | 
18 | interface LabeledSwitchProps<TFieldValues extends FieldValues>
19 |   extends UseControllerProps<TFieldValues> {
20 |   // Optional in default type
21 |   control: Control<TFieldValues>;
22 |   className?: string;
23 |   label?: string;
24 |   description?: string;
25 |   inputProps?: Omit<
26 |     React.ComponentProps<typeof Switch>,
27 |     keyof ControllerRenderProps
28 |   >;
29 | }
30 | 
31 | export function LabeledSwitch<TFieldValues extends FieldValues>(
32 |   props: LabeledSwitchProps<TFieldValues>,
33 | ) {
34 |   const { inputProps, ...restProps } = props;
35 |   const isInvalid = props.control.getFieldState(props.name).invalid;
36 | 
37 |   return (
38 |     <FormField
39 |       {...restProps}
40 |       render={({ field }) => (
41 |         <FormItem
42 |           className={cn(
43 |             "flex items-center justify-between space-y-0",
44 |             props.className,
45 |           )}
46 |         >
47 |           <div className="flex flex-col justify-between">
48 |             {props.label === undefined ? null : (
49 |               <FormLabel className="leading-normal">{props.label}</FormLabel>
50 |             )}
51 |             {props.description === undefined ? null : (
52 |               <FormDescription>{props.description}</FormDescription>
53 |             )}
54 |             <FormMessage />
55 |           </div>
56 | 
57 |           <FormControl>
58 |             <Switch
59 |               {...inputProps}
60 |               {...field}
61 |               checked={field.value}
62 |               onCheckedChange={field.onChange}
63 |               aria-invalid={isInvalid}
64 |             />
65 |           </FormControl>
66 |         </FormItem>
67 |       )}
68 |     />
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as AccordionPrimitive from "@radix-ui/react-accordion";
 4 | import { ChevronDown } from "lucide-react";
 5 | import * as React from "react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const Accordion = AccordionPrimitive.Root;
10 | 
11 | const AccordionItem = React.forwardRef<
12 |   React.ElementRef<typeof AccordionPrimitive.Item>,
13 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14 | >(({ className, ...props }, ref) => (
15 |   <AccordionPrimitive.Item
16 |     ref={ref}
17 |     className={cn("border-b", className)}
18 |     {...props}
19 |   />
20 | ));
21 | AccordionItem.displayName = "AccordionItem";
22 | 
23 | const AccordionTrigger = React.forwardRef<
24 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26 | >(({ className, children, ...props }, ref) => (
27 |   <AccordionPrimitive.Header className="flex">
28 |     <AccordionPrimitive.Trigger
29 |       ref={ref}
30 |       className={cn(
31 |         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32 |         className,
33 |       )}
34 |       {...props}
35 |     >
36 |       {children}
37 |       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38 |     </AccordionPrimitive.Trigger>
39 |   </AccordionPrimitive.Header>
40 | ));
41 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
42 | 
43 | const AccordionContent = React.forwardRef<
44 |   React.ElementRef<typeof AccordionPrimitive.Content>,
45 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46 | >(({ className, children, ...props }, ref) => (
47 |   <AccordionPrimitive.Content
48 |     ref={ref}
49 |     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50 |     {...props}
51 |   >
52 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
53 |   </AccordionPrimitive.Content>
54 | ));
55 | 
56 | AccordionContent.displayName = AccordionPrimitive.Content.displayName;
57 | 
58 | export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
59 | 


--------------------------------------------------------------------------------
/scripts/build.ts:
--------------------------------------------------------------------------------
 1 | // Adopted from https://niels.foo/post/publishing-custom-shadcn-ui-components
 2 | import * as fs from "fs";
 3 | import * as path from "path";
 4 | 
 5 | export interface Schema {
 6 |   name: string;
 7 |   type: "registry:ui";
 8 |   registryDependencies: string[];
 9 |   dependencies: string[];
10 |   devDependencies: string[];
11 |   tailwind: {
12 |     config?: Record<string, object>;
13 |   };
14 |   cssVars: {
15 |     light: Record<string, string>;
16 |     dark: Record<string, string>;
17 |   };
18 |   files: Array<{
19 |     path: string;
20 |     content: string;
21 |     type: "registry:ui";
22 |   }>;
23 | }
24 | 
25 | type ComponentDefinition = Partial<
26 |   Pick<
27 |     Schema,
28 |     | "dependencies"
29 |     | "devDependencies"
30 |     | "registryDependencies"
31 |     | "cssVars"
32 |     | "tailwind"
33 |   >
34 | > & {
35 |   name: string;
36 |   path: string;
37 | };
38 | 
39 | // Define the components and their dependencies that should be registered
40 | const components: ComponentDefinition[] = [
41 |   {
42 |     name: "dropzone",
43 |     path: path.join(__dirname, "../components/dropzone.tsx"),
44 |     registryDependencies: ["button"],
45 |     dependencies: ["react-dropzone"],
46 |   },
47 | ];
48 | 
49 | // Create the registry directory if it doesn't exist
50 | const registry = path.join(__dirname, "../public");
51 | if (!fs.existsSync(registry)) {
52 |   fs.mkdirSync(registry);
53 | }
54 | 
55 | // Create the registry files
56 | for (const component of components) {
57 |   const content = fs.readFileSync(component.path, "utf8");
58 | 
59 |   const schema = {
60 |     name: component.name,
61 |     type: "registry:ui",
62 |     registryDependencies: component.registryDependencies || [],
63 |     dependencies: component.dependencies || [],
64 |     devDependencies: component.devDependencies || [],
65 |     tailwind: component.tailwind || {},
66 |     cssVars: component.cssVars || {
67 |       light: {},
68 |       dark: {},
69 |     },
70 |     files: [
71 |       {
72 |         path: `${component.name}.tsx`,
73 |         content,
74 |         type: "registry:ui",
75 |       },
76 |     ],
77 |   } satisfies Schema;
78 | 
79 |   fs.writeFileSync(
80 |     path.join(registry, `${component.name}.json`),
81 |     JSON.stringify(schema, null, 2),
82 |   );
83 | }
84 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
  1 | import { createPreset } from "fumadocs-ui/tailwind-plugin";
  2 | import type { Config } from "tailwindcss";
  3 | 
  4 | const config: Config = {
  5 |   darkMode: ["class"],
  6 |   content: [
  7 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  8 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
  9 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 10 |     "./mdx-components.{ts,tsx}",
 11 |     "./node_modules/fumadocs-ui/dist/**/*.js",
 12 |   ],
 13 |   theme: {
 14 |     extend: {
 15 |       container: {
 16 |         center: true,
 17 |         padding: "1rem",
 18 |       },
 19 |       colors: {
 20 |         background: "hsl(var(--background))",
 21 |         foreground: "hsl(var(--foreground))",
 22 |         card: {
 23 |           DEFAULT: "hsl(var(--card))",
 24 |           foreground: "hsl(var(--card-foreground))",
 25 |         },
 26 |         popover: {
 27 |           DEFAULT: "hsl(var(--popover))",
 28 |           foreground: "hsl(var(--popover-foreground))",
 29 |         },
 30 |         primary: {
 31 |           DEFAULT: "hsl(var(--primary))",
 32 |           foreground: "hsl(var(--primary-foreground))",
 33 |         },
 34 |         secondary: {
 35 |           DEFAULT: "hsl(var(--secondary))",
 36 |           foreground: "hsl(var(--secondary-foreground))",
 37 |         },
 38 |         muted: {
 39 |           DEFAULT: "hsl(var(--muted))",
 40 |           foreground: "hsl(var(--muted-foreground))",
 41 |         },
 42 |         accent: {
 43 |           DEFAULT: "hsl(var(--accent))",
 44 |           foreground: "hsl(var(--accent-foreground))",
 45 |         },
 46 |         destructive: {
 47 |           DEFAULT: "hsl(var(--destructive))",
 48 |           foreground: "hsl(var(--destructive-foreground))",
 49 |         },
 50 |         border: "hsl(var(--border))",
 51 |         input: "hsl(var(--input))",
 52 |         ring: "hsl(var(--ring))",
 53 |         chart: {
 54 |           "1": "hsl(var(--chart-1))",
 55 |           "2": "hsl(var(--chart-2))",
 56 |           "3": "hsl(var(--chart-3))",
 57 |           "4": "hsl(var(--chart-4))",
 58 |           "5": "hsl(var(--chart-5))",
 59 |         },
 60 |       },
 61 |       borderRadius: {
 62 |         lg: "var(--radius)",
 63 |         md: "calc(var(--radius) - 2px)",
 64 |         sm: "calc(var(--radius) - 4px)",
 65 |       },
 66 |       keyframes: {
 67 |         "accordion-down": {
 68 |           from: {
 69 |             height: "0",
 70 |           },
 71 |           to: {
 72 |             height: "var(--radix-accordion-content-height)",
 73 |           },
 74 |         },
 75 |         "accordion-up": {
 76 |           from: {
 77 |             height: "var(--radix-accordion-content-height)",
 78 |           },
 79 |           to: {
 80 |             height: "0",
 81 |           },
 82 |         },
 83 |         "infinite-progress": {
 84 |           "0%": {
 85 |             transform: "translateX(-100%)",
 86 |           },
 87 |           "100%": {
 88 |             transform: "translateX(100%)",
 89 |           },
 90 |         },
 91 |       },
 92 |       animation: {
 93 |         "accordion-down": "accordion-down 0.2s ease-out",
 94 |         "accordion-up": "accordion-up 0.2s ease-out",
 95 |         "infinite-progress":
 96 |           "infinite-progress 3s cubic-bezier(0.37, 0, 0.63, 1) infinite",
 97 |       },
 98 |     },
 99 |   },
100 |   plugins: [require("tailwindcss-animate")],
101 |   presets: [createPreset()],
102 | };
103 | export default config;
104 | 


--------------------------------------------------------------------------------
/components/examples/multi-images.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import {
 3 |   Dropzone,
 4 |   DropZoneArea,
 5 |   DropzoneDescription,
 6 |   DropzoneFileList,
 7 |   DropzoneFileListItem,
 8 |   DropzoneMessage,
 9 |   DropzoneRemoveFile,
10 |   DropzoneTrigger,
11 |   useDropzone,
12 | } from "@/components/dropzone";
13 | import { CloudUploadIcon, Trash2Icon } from "lucide-react";
14 | 
15 | export function MultiImages() {
16 |   const dropzone = useDropzone({
17 |     onDropFile: async (file: File) => {
18 |       await new Promise((resolve) => setTimeout(resolve, 1000));
19 |       return {
20 |         status: "success",
21 |         result: URL.createObjectURL(file),
22 |       };
23 |     },
24 |     validation: {
25 |       accept: {
26 |         "image/*": [".png", ".jpg", ".jpeg"],
27 |       },
28 |       maxSize: 10 * 1024 * 1024,
29 |       maxFiles: 10,
30 |     },
31 |   });
32 | 
33 |   return (
34 |     <div className="not-prose flex flex-col gap-4">
35 |       <Dropzone {...dropzone}>
36 |         <div>
37 |           <div className="flex justify-between">
38 |             <DropzoneDescription>
39 |               Please select up to 10 images
40 |             </DropzoneDescription>
41 |             <DropzoneMessage />
42 |           </div>
43 |           <DropZoneArea>
44 |             <DropzoneTrigger className="flex flex-col items-center gap-4 bg-transparent p-10 text-center text-sm">
45 |               <CloudUploadIcon className="size-8" />
46 |               <div>
47 |                 <p className="font-semibold">Upload images</p>
48 |                 <p className="text-sm text-muted-foreground">
49 |                   Click here or drag and drop to upload
50 |                 </p>
51 |               </div>
52 |             </DropzoneTrigger>
53 |           </DropZoneArea>
54 |         </div>
55 | 
56 |         <DropzoneFileList className="grid gap-3 p-0 md:grid-cols-2 lg:grid-cols-3">
57 |           {dropzone.fileStatuses.map((file) => (
58 |             <DropzoneFileListItem
59 |               className="overflow-hidden rounded-md bg-secondary p-0 shadow-sm"
60 |               key={file.id}
61 |               file={file}
62 |             >
63 |               {file.status === "pending" && (
64 |                 <div className="aspect-video animate-pulse bg-black/20" />
65 |               )}
66 |               {file.status === "success" && (
67 |                 // eslint-disable-next-line @next/next/no-img-element
68 |                 <img
69 |                   src={file.result}
70 |                   alt={`uploaded-${file.fileName}`}
71 |                   className="aspect-video object-cover"
72 |                 />
73 |               )}
74 |               <div className="flex items-center justify-between p-2 pl-4">
75 |                 <div className="min-w-0">
76 |                   <p className="truncate text-sm">{file.fileName}</p>
77 |                   <p className="text-xs text-muted-foreground">
78 |                     {(file.file.size / (1024 * 1024)).toFixed(2)} MB
79 |                   </p>
80 |                 </div>
81 |                 <DropzoneRemoveFile
82 |                   variant="ghost"
83 |                   className="shrink-0 hover:outline"
84 |                 >
85 |                   <Trash2Icon className="size-4" />
86 |                 </DropzoneRemoveFile>
87 |               </div>
88 |             </DropzoneFileListItem>
89 |           ))}
90 |         </DropzoneFileList>
91 |       </Dropzone>
92 |     </div>
93 |   );
94 | }
95 | 


--------------------------------------------------------------------------------
/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import { Drawer as DrawerPrimitive } from "vaul";
  5 | 
  6 | import { cn } from "@/lib/utils";
  7 | 
  8 | const Drawer = ({
  9 |   shouldScaleBackground = true,
 10 |   ...props
 11 | }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
 12 |   <DrawerPrimitive.Root
 13 |     shouldScaleBackground={shouldScaleBackground}
 14 |     {...props}
 15 |   />
 16 | );
 17 | Drawer.displayName = "Drawer";
 18 | 
 19 | const DrawerTrigger = DrawerPrimitive.Trigger;
 20 | 
 21 | const DrawerPortal = DrawerPrimitive.Portal;
 22 | 
 23 | const DrawerClose = DrawerPrimitive.Close;
 24 | 
 25 | const DrawerOverlay = React.forwardRef<
 26 |   React.ElementRef<typeof DrawerPrimitive.Overlay>,
 27 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 28 | >(({ className, ...props }, ref) => (
 29 |   <DrawerPrimitive.Overlay
 30 |     ref={ref}
 31 |     className={cn("fixed inset-0 z-50 bg-black/80", className)}
 32 |     {...props}
 33 |   />
 34 | ));
 35 | DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 36 | 
 37 | const DrawerContent = React.forwardRef<
 38 |   React.ElementRef<typeof DrawerPrimitive.Content>,
 39 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 40 | >(({ className, children, ...props }, ref) => (
 41 |   <DrawerPortal>
 42 |     <DrawerOverlay />
 43 |     <DrawerPrimitive.Content
 44 |       ref={ref}
 45 |       className={cn(
 46 |         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
 47 |         className,
 48 |       )}
 49 |       {...props}
 50 |     >
 51 |       <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
 52 |       {children}
 53 |     </DrawerPrimitive.Content>
 54 |   </DrawerPortal>
 55 | ));
 56 | DrawerContent.displayName = "DrawerContent";
 57 | 
 58 | const DrawerHeader = ({
 59 |   className,
 60 |   ...props
 61 | }: React.HTMLAttributes<HTMLDivElement>) => (
 62 |   <div
 63 |     className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
 64 |     {...props}
 65 |   />
 66 | );
 67 | DrawerHeader.displayName = "DrawerHeader";
 68 | 
 69 | const DrawerFooter = ({
 70 |   className,
 71 |   ...props
 72 | }: React.HTMLAttributes<HTMLDivElement>) => (
 73 |   <div
 74 |     className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 75 |     {...props}
 76 |   />
 77 | );
 78 | DrawerFooter.displayName = "DrawerFooter";
 79 | 
 80 | const DrawerTitle = React.forwardRef<
 81 |   React.ElementRef<typeof DrawerPrimitive.Title>,
 82 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 83 | >(({ className, ...props }, ref) => (
 84 |   <DrawerPrimitive.Title
 85 |     ref={ref}
 86 |     className={cn(
 87 |       "text-lg font-semibold leading-none tracking-tight",
 88 |       className,
 89 |     )}
 90 |     {...props}
 91 |   />
 92 | ));
 93 | DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 94 | 
 95 | const DrawerDescription = React.forwardRef<
 96 |   React.ElementRef<typeof DrawerPrimitive.Description>,
 97 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 98 | >(({ className, ...props }, ref) => (
 99 |   <DrawerPrimitive.Description
100 |     ref={ref}
101 |     className={cn("text-sm text-muted-foreground", className)}
102 |     {...props}
103 |   />
104 | ));
105 | DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
106 | 
107 | export {
108 |   Drawer,
109 |   DrawerClose,
110 |   DrawerContent,
111 |   DrawerDescription,
112 |   DrawerFooter,
113 |   DrawerHeader,
114 |   DrawerOverlay,
115 |   DrawerPortal,
116 |   DrawerTitle,
117 |   DrawerTrigger,
118 | };
119 | 


--------------------------------------------------------------------------------
/components/examples/multi-file.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import {
  3 |   Dropzone,
  4 |   DropZoneArea,
  5 |   DropzoneDescription,
  6 |   DropzoneFileList,
  7 |   DropzoneFileListItem,
  8 |   DropzoneFileMessage,
  9 |   DropzoneMessage,
 10 |   DropzoneRemoveFile,
 11 |   DropzoneRetryFile,
 12 |   DropzoneTrigger,
 13 |   InfiniteProgress,
 14 |   useDropzone,
 15 | } from "@/components/dropzone";
 16 | import {
 17 |   CloudUploadIcon,
 18 |   FileIcon,
 19 |   RotateCcwIcon,
 20 |   Trash2Icon,
 21 | } from "lucide-react";
 22 | 
 23 | export function MultiFiles() {
 24 |   const dropzone = useDropzone({
 25 |     onDropFile: async () => {
 26 |       await new Promise((resolve) =>
 27 |         setTimeout(resolve, Math.random() * 500 + 1000),
 28 |       );
 29 | 
 30 |       if (Math.random() > 0.8) {
 31 |         return {
 32 |           status: "error",
 33 |           error: "Failed to upload file",
 34 |         };
 35 |       }
 36 |       return {
 37 |         status: "success",
 38 |         result: undefined,
 39 |       };
 40 |     },
 41 |     validation: {
 42 |       maxFiles: 10,
 43 |     },
 44 |   });
 45 | 
 46 |   return (
 47 |     <div className="not-prose flex flex-col gap-4">
 48 |       <Dropzone {...dropzone}>
 49 |         <div>
 50 |           <div className="flex justify-between">
 51 |             <DropzoneDescription>
 52 |               Please select up to 10 files
 53 |             </DropzoneDescription>
 54 |             <DropzoneMessage />
 55 |           </div>
 56 |           <DropZoneArea>
 57 |             <DropzoneTrigger className="flex flex-col items-center gap-4 bg-transparent p-10 text-center text-sm">
 58 |               <CloudUploadIcon className="size-8" />
 59 |               <div>
 60 |                 <p className="font-semibold">Upload files</p>
 61 |                 <p className="text-sm text-muted-foreground">
 62 |                   Click here or drag and drop to upload
 63 |                 </p>
 64 |               </div>
 65 |             </DropzoneTrigger>
 66 |           </DropZoneArea>
 67 |         </div>
 68 | 
 69 |         <DropzoneFileList className="flex flex-col gap-3">
 70 |           {dropzone.fileStatuses.map((file) => (
 71 |             <DropzoneFileListItem
 72 |               className="flex flex-col gap-3"
 73 |               key={file.id}
 74 |               file={file}
 75 |             >
 76 |               <div className="flex justify-between">
 77 |                 <div className="flex min-w-0 items-center gap-2 font-bold">
 78 |                   <FileIcon className="size-5 text-muted-foreground" />
 79 |                   <p className="truncate">{file.fileName}</p>
 80 |                 </div>
 81 |                 <div className="flex items-center gap-1">
 82 |                   {file.status === "error" && (
 83 |                     <DropzoneRetryFile
 84 |                       variant="ghost"
 85 |                       className="hover:border"
 86 |                       type="button"
 87 |                       size="icon"
 88 |                     >
 89 |                       <RotateCcwIcon className="size-4" />
 90 |                     </DropzoneRetryFile>
 91 |                   )}
 92 | 
 93 |                   <DropzoneRemoveFile
 94 |                     variant="ghost"
 95 |                     className="hover:border"
 96 |                     type="button"
 97 |                     size="icon"
 98 |                   >
 99 |                     <Trash2Icon className="size-4" />
100 |                   </DropzoneRemoveFile>
101 |                 </div>
102 |               </div>
103 |               <InfiniteProgress status={file.status} />
104 |               <div className="flex justify-between text-sm text-muted-foreground">
105 |                 <p>{(file.file.size / (1024 * 1024)).toFixed(2)} MB</p>
106 |                 <DropzoneFileMessage />
107 |               </div>
108 |             </DropzoneFileListItem>
109 |           ))}
110 |         </DropzoneFileList>
111 |       </Dropzone>
112 |     </div>
113 |   );
114 | }
115 | 


--------------------------------------------------------------------------------
/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as LabelPrimitive from "@radix-ui/react-label";
  4 | import { Slot } from "@radix-ui/react-slot";
  5 | import * as React from "react";
  6 | import {
  7 |   Controller,
  8 |   ControllerProps,
  9 |   FieldPath,
 10 |   FieldValues,
 11 |   FormProvider,
 12 |   useFormContext,
 13 | } from "react-hook-form";
 14 | 
 15 | import { Label } from "@/components/ui/label";
 16 | import { cn } from "@/lib/utils";
 17 | 
 18 | const Form = FormProvider;
 19 | 
 20 | type FormFieldContextValue<
 21 |   TFieldValues extends FieldValues = FieldValues,
 22 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 23 | > = {
 24 |   name: TName;
 25 | };
 26 | 
 27 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 28 |   {} as FormFieldContextValue,
 29 | );
 30 | 
 31 | const FormField = <
 32 |   TFieldValues extends FieldValues = FieldValues,
 33 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 34 | >({
 35 |   ...props
 36 | }: ControllerProps<TFieldValues, TName>) => {
 37 |   return (
 38 |     <FormFieldContext.Provider value={{ name: props.name }}>
 39 |       <Controller {...props} />
 40 |     </FormFieldContext.Provider>
 41 |   );
 42 | };
 43 | 
 44 | const useFormField = () => {
 45 |   const fieldContext = React.useContext(FormFieldContext);
 46 |   const itemContext = React.useContext(FormItemContext);
 47 |   const { getFieldState, formState } = useFormContext();
 48 | 
 49 |   const fieldState = getFieldState(fieldContext.name, formState);
 50 | 
 51 |   if (!fieldContext) {
 52 |     throw new Error("useFormField should be used within <FormField>");
 53 |   }
 54 | 
 55 |   const { id } = itemContext;
 56 | 
 57 |   return {
 58 |     id,
 59 |     name: fieldContext.name,
 60 |     formItemId: `${id}-form-item`,
 61 |     formDescriptionId: `${id}-form-item-description`,
 62 |     formMessageId: `${id}-form-item-message`,
 63 |     ...fieldState,
 64 |   };
 65 | };
 66 | 
 67 | type FormItemContextValue = {
 68 |   id: string;
 69 | };
 70 | 
 71 | const FormItemContext = React.createContext<FormItemContextValue>(
 72 |   {} as FormItemContextValue,
 73 | );
 74 | 
 75 | const FormItem = React.forwardRef<
 76 |   HTMLDivElement,
 77 |   React.HTMLAttributes<HTMLDivElement>
 78 | >(({ className, ...props }, ref) => {
 79 |   const id = React.useId();
 80 | 
 81 |   return (
 82 |     <FormItemContext.Provider value={{ id }}>
 83 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 84 |     </FormItemContext.Provider>
 85 |   );
 86 | });
 87 | FormItem.displayName = "FormItem";
 88 | 
 89 | const FormLabel = React.forwardRef<
 90 |   React.ElementRef<typeof LabelPrimitive.Root>,
 91 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 92 | >(({ className, ...props }, ref) => {
 93 |   const { error, formItemId } = useFormField();
 94 | 
 95 |   return (
 96 |     <Label
 97 |       ref={ref}
 98 |       className={cn(error && "text-destructive", className)}
 99 |       htmlFor={formItemId}
100 |       {...props}
101 |     />
102 |   );
103 | });
104 | FormLabel.displayName = "FormLabel";
105 | 
106 | const FormControl = React.forwardRef<
107 |   React.ElementRef<typeof Slot>,
108 |   React.ComponentPropsWithoutRef<typeof Slot>
109 | >(({ ...props }, ref) => {
110 |   const { error, formItemId, formDescriptionId, formMessageId } =
111 |     useFormField();
112 | 
113 |   return (
114 |     <Slot
115 |       ref={ref}
116 |       id={formItemId}
117 |       aria-describedby={
118 |         !error
119 |           ? `${formDescriptionId}`
120 |           : `${formDescriptionId} ${formMessageId}`
121 |       }
122 |       aria-invalid={!!error}
123 |       {...props}
124 |     />
125 |   );
126 | });
127 | FormControl.displayName = "FormControl";
128 | 
129 | const FormDescription = React.forwardRef<
130 |   HTMLParagraphElement,
131 |   React.HTMLAttributes<HTMLParagraphElement>
132 | >(({ className, ...props }, ref) => {
133 |   const { formDescriptionId } = useFormField();
134 | 
135 |   return (
136 |     <p
137 |       ref={ref}
138 |       id={formDescriptionId}
139 |       className={cn("text-sm text-muted-foreground", className)}
140 |       {...props}
141 |     />
142 |   );
143 | });
144 | FormDescription.displayName = "FormDescription";
145 | 
146 | const FormMessage = React.forwardRef<
147 |   HTMLParagraphElement,
148 |   React.HTMLAttributes<HTMLParagraphElement>
149 | >(({ className, children, ...props }, ref) => {
150 |   const { error, formMessageId } = useFormField();
151 |   const body = error ? String(error?.message) : children;
152 | 
153 |   if (!body) {
154 |     return null;
155 |   }
156 | 
157 |   return (
158 |     <p
159 |       ref={ref}
160 |       id={formMessageId}
161 |       className={cn("text-sm font-medium text-destructive", className)}
162 |       {...props}
163 |     >
164 |       {body}
165 |     </p>
166 |   );
167 | });
168 | FormMessage.displayName = "FormMessage";
169 | 
170 | export {
171 |   Form,
172 |   FormControl,
173 |   FormDescription,
174 |   FormField,
175 |   FormItem,
176 |   FormLabel,
177 |   FormMessage,
178 |   useFormField,
179 | };
180 | 


--------------------------------------------------------------------------------
/app/(home)/_/demo.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import {
  4 |   Dropzone,
  5 |   DropZoneArea,
  6 |   DropzoneDescription,
  7 |   DropzoneFileList,
  8 |   DropzoneFileListItem,
  9 |   DropzoneFileMessage,
 10 |   DropzoneMessage,
 11 |   DropzoneRemoveFile,
 12 |   DropzoneRetryFile,
 13 |   DropzoneTrigger,
 14 |   InfiniteProgress,
 15 |   useDropzone,
 16 | } from "@/components/dropzone";
 17 | import { FileIcon, RotateCcwIcon, Trash2Icon, Upload } from "lucide-react";
 18 | import { PlaygroundForm, usePlaygroundForm } from "./controls";
 19 | 
 20 | export function Demo() {
 21 |   const form = usePlaygroundForm();
 22 | 
 23 |   const values = form.watch();
 24 | 
 25 |   const dropzone = useDropzone({
 26 |     onDropFile: async () => {
 27 |       await new Promise((resolve) => setTimeout(resolve, 1000));
 28 |       console.log(values.successRate);
 29 |       if (values.successRate > Math.random() * 100) {
 30 |         return {
 31 |           status: "success",
 32 |           result: "success",
 33 |         };
 34 |       }
 35 |       return {
 36 |         status: "error",
 37 |         error: {
 38 |           message: "Failed to upload file",
 39 |         },
 40 |       };
 41 |     },
 42 |     shapeUploadError: (error) => {
 43 |       return error.message;
 44 |     },
 45 |     maxRetryCount: values.maxRetryCount,
 46 |     autoRetry: values.autoRetry,
 47 |     validation: {
 48 |       maxFiles: values.maxFiles,
 49 |       maxSize: values.maxFileSize * 1024 * 1024,
 50 |       accept: values.onlyImage
 51 |         ? {
 52 |             "image/png": [".png"],
 53 |             "image/jpeg": [".jpg", ".jpeg"],
 54 |             "image/webp": [".webp"],
 55 |           }
 56 |         : undefined,
 57 |     },
 58 |     onFileUploaded: (result) => {
 59 |       console.log("file uploaded", result);
 60 |     },
 61 |     onAllUploaded: () => {
 62 |       console.log("all uploaded");
 63 |     },
 64 |     onRootError: (error) => {
 65 |       console.log("root error", error);
 66 |     },
 67 |     onFileUploadError: (error) => {
 68 |       console.log("file upload error", error);
 69 |     },
 70 |   });
 71 | 
 72 |   return (
 73 |     <main className="container min-h-dvh pb-20 pt-80">
 74 |       <PlaygroundForm form={form} />
 75 |       <Dropzone {...dropzone}>
 76 |         <div className="flex justify-between">
 77 |           <DropzoneDescription>
 78 |             A tester for shadcn-dropzone.
 79 |           </DropzoneDescription>
 80 |           <DropzoneMessage className="text-right" />
 81 |         </div>
 82 |         <DropZoneArea className="flex flex-col items-center gap-2 pt-10">
 83 |           <DropzoneTrigger className="flex flex-col items-center gap-4 rounded-md px-6 py-4">
 84 |             <Upload />
 85 |             Click here or drag and drop files to upload them
 86 |           </DropzoneTrigger>
 87 |           <DropzoneFileList
 88 |             style={{
 89 |               height: `${
 90 |                 dropzone.fileStatuses.length * 112 +
 91 |                 (dropzone.fileStatuses.length - 1) * 8 +
 92 |                 16
 93 |               }px`,
 94 |               gap: "8px",
 95 |               paddingTop: "8px",
 96 |               paddingBottom: "8px",
 97 |             }}
 98 |             className="w-full overflow-hidden transition-all duration-300"
 99 |           >
100 |             {dropzone.fileStatuses.map((file) => (
101 |               <DropzoneFileListItem
102 |                 key={file.id}
103 |                 file={file}
104 |                 className="h-[112px] shrink-0"
105 |               >
106 |                 <div className="flex justify-between">
107 |                   <div className="flex min-w-0 items-center gap-2 font-bold">
108 |                     <FileIcon className="size-5 text-muted-foreground" />
109 |                     <p className="truncate">{file.fileName}</p>
110 |                   </div>
111 |                   <div className="flex items-center gap-2">
112 |                     {file.status === "error" && (
113 |                       <DropzoneRetryFile
114 |                         variant="ghost"
115 |                         className="hover:border"
116 |                         type="button"
117 |                         size="icon"
118 |                       >
119 |                         <RotateCcwIcon className="size-4" />
120 |                       </DropzoneRetryFile>
121 |                     )}
122 | 
123 |                     <DropzoneRemoveFile
124 |                       variant="ghost"
125 |                       className="hover:border"
126 |                       type="button"
127 |                       size="icon"
128 |                     >
129 |                       <Trash2Icon className="size-4" />
130 |                     </DropzoneRemoveFile>
131 |                   </div>
132 |                 </div>
133 |                 <InfiniteProgress status={file.status} />
134 |                 <div className="flex justify-between">
135 |                   <p>{(file.file.size / (1024 * 1024)).toFixed(2)} MB</p>
136 |                   <DropzoneFileMessage />
137 |                 </div>
138 |               </DropzoneFileListItem>
139 |             ))}
140 |           </DropzoneFileList>
141 |         </DropZoneArea>
142 |       </Dropzone>
143 |     </main>
144 |   );
145 | }
146 | 


--------------------------------------------------------------------------------
/app/(home)/_/controls.tsx:
--------------------------------------------------------------------------------
  1 | import { LabeledInput } from "@/components/labeled-input";
  2 | import { LabeledSwitch } from "@/components/labeled-switch";
  3 | import { Button } from "@/components/ui/button";
  4 | import {
  5 |   Drawer,
  6 |   DrawerClose,
  7 |   DrawerContent,
  8 |   DrawerDescription,
  9 |   DrawerTitle,
 10 |   DrawerTrigger,
 11 | } from "@/components/ui/drawer";
 12 | import { Form } from "@/components/ui/form";
 13 | import {
 14 |   Popover,
 15 |   PopoverContent,
 16 |   PopoverTrigger,
 17 | } from "@/components/ui/popover";
 18 | import { useIsMobile } from "@/lib/hooks";
 19 | import { zodResolver } from "@hookform/resolvers/zod";
 20 | import { CogIcon } from "lucide-react";
 21 | import { useForm } from "react-hook-form";
 22 | import { z } from "zod";
 23 | 
 24 | export const playgroundFormSchema = z.object({
 25 |   successRate: z.coerce.number().min(0).max(100),
 26 |   maxFiles: z.coerce.number().min(1),
 27 |   maxFileSize: z.coerce.number().min(1),
 28 |   autoRetry: z.boolean(),
 29 |   maxRetryCount: z.coerce.number(),
 30 |   onlyImage: z.boolean(),
 31 | });
 32 | 
 33 | type PlaygroundFormInput = z.input<typeof playgroundFormSchema>;
 34 | type PlaygroundFormOutput = z.output<typeof playgroundFormSchema>;
 35 | 
 36 | const playgroundFormDefaultValues: PlaygroundFormInput = {
 37 |   successRate: 50,
 38 |   maxFiles: 2,
 39 |   maxFileSize: 10,
 40 |   autoRetry: false,
 41 |   maxRetryCount: 3,
 42 |   onlyImage: false,
 43 | };
 44 | 
 45 | export const usePlaygroundForm = () => {
 46 |   const form = useForm<PlaygroundFormInput, unknown, PlaygroundFormOutput>({
 47 |     resolver: zodResolver(playgroundFormSchema),
 48 |     defaultValues: playgroundFormDefaultValues,
 49 |     mode: "onChange",
 50 |     reValidateMode: "onChange",
 51 |   });
 52 | 
 53 |   return form;
 54 | };
 55 | 
 56 | export function PlaygroundForm(props: {
 57 |   form: ReturnType<typeof usePlaygroundForm>;
 58 | }) {
 59 |   const isMobile = useIsMobile();
 60 | 
 61 |   return isMobile ? (
 62 |     <PlaygroundFormMobile {...props} />
 63 |   ) : (
 64 |     <PlaygroundFormDesktop {...props} />
 65 |   );
 66 | }
 67 | 
 68 | export function PlaygroundFormMobile(props: {
 69 |   form: ReturnType<typeof usePlaygroundForm>;
 70 | }) {
 71 |   return (
 72 |     <Drawer>
 73 |       <DrawerTrigger asChild className="fixed right-10 top-10">
 74 |         <Button size="icon">
 75 |           <CogIcon />
 76 |           <span className="sr-only">Settings</span>
 77 |         </Button>
 78 |       </DrawerTrigger>
 79 |       <DrawerContent className="overflow-y-auto px-8 pb-8">
 80 |         <DrawerTitle>Settings</DrawerTitle>
 81 |         <DrawerDescription>
 82 |           Configure the behavior of the fake uploader
 83 |         </DrawerDescription>
 84 |         <Form {...props.form}>
 85 |           <form className="flex flex-col gap-4">
 86 |             <LabeledInput
 87 |               control={props.form.control}
 88 |               name="successRate"
 89 |               label="Success Rate"
 90 |               inputProps={{ type: "number" }}
 91 |               description="Success rate of the fake upload, between 0 and 100"
 92 |             />
 93 |             <LabeledInput
 94 |               control={props.form.control}
 95 |               name="maxFiles"
 96 |               label="Max Files"
 97 |               inputProps={{ type: "number" }}
 98 |               description="Maximum number of files to upload"
 99 |             />
100 |             <LabeledInput
101 |               control={props.form.control}
102 |               name="maxFileSize"
103 |               label="Max File Size"
104 |               inputProps={{ type: "number" }}
105 |               description="Maximum size of a file to upload in MB"
106 |             />
107 |             <LabeledSwitch
108 |               className="rounded-md border p-4"
109 |               control={props.form.control}
110 |               name="autoRetry"
111 |               label="Auto Retry"
112 |               description="Automatically retry failed uploads"
113 |             />
114 |             <LabeledSwitch
115 |               className="rounded-md border p-4"
116 |               control={props.form.control}
117 |               name="onlyImage"
118 |               label="Only Images"
119 |               description="Only allow images. You can pass exact file/mime types, but don't want to make an input for this lol"
120 |             />
121 |             <DrawerClose asChild>
122 |               <Button type="button">Close</Button>
123 |             </DrawerClose>
124 |           </form>
125 |         </Form>
126 |       </DrawerContent>
127 |     </Drawer>
128 |   );
129 | }
130 | 
131 | function PlaygroundFormDesktop(props: {
132 |   form: ReturnType<typeof usePlaygroundForm>;
133 | }) {
134 |   return (
135 |     <Popover>
136 |       <PopoverTrigger asChild className="fixed right-10 top-10">
137 |         <Button size="icon">
138 |           <CogIcon />
139 |           <span className="sr-only">Settings</span>
140 |         </Button>
141 |       </PopoverTrigger>
142 |       <PopoverContent>
143 |         <Form {...props.form}>
144 |           <form className="flex flex-col gap-4">
145 |             <LabeledInput
146 |               control={props.form.control}
147 |               name="successRate"
148 |               label="Success Rate"
149 |               inputProps={{ type: "number" }}
150 |               description="Success rate of the fake upload, between 0 and 100"
151 |             />
152 |             <LabeledInput
153 |               control={props.form.control}
154 |               name="maxFiles"
155 |               label="Max Files"
156 |               inputProps={{ type: "number" }}
157 |               description="Maximum number of files to upload"
158 |             />
159 |             <LabeledInput
160 |               control={props.form.control}
161 |               name="maxFileSize"
162 |               label="Max File Size"
163 |               inputProps={{ type: "number" }}
164 |               description="Maximum size of a file to upload in MB"
165 |             />
166 |             <LabeledSwitch
167 |               className="rounded-md border p-4"
168 |               control={props.form.control}
169 |               name="autoRetry"
170 |               label="Auto Retry"
171 |               description="Automatically retry failed uploads"
172 |             />
173 |             <LabeledSwitch
174 |               className="rounded-md border p-4"
175 |               control={props.form.control}
176 |               name="onlyImage"
177 |               label="Only Images"
178 |               description="Only allow images. You can pass exact file/mime types, but don't want to make an input for this lol"
179 |             />
180 |           </form>
181 |         </Form>
182 |       </PopoverContent>
183 |     </Popover>
184 |   );
185 | }
186 | 


--------------------------------------------------------------------------------
/content/docs/index.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Dropzone
  3 | description: A Shadcn/UI style component for file uploads.
  4 | ---
  5 | 
  6 | import { Tab, Tabs } from "fumadocs-ui/components/tabs";
  7 | import { SingleFile } from "@/components/examples/single-file";
  8 | import { MultiImages } from "@/components/examples/multi-images";
  9 | import { MultiFiles } from "@/components/examples/multi-file";
 10 | 
 11 | {/* Preview/code switcher */}
 12 | 
 13 | ## Installation
 14 | 
 15 | This is assuming you have Shadcnn/UI set up in your project. If you haven't, [follow this guide](https://ui.shadcn.com/docs/installation).
 16 | 
 17 | <Tabs items={["npm", "pnpm", "yarn", "bun"]}>
 18 |   <Tab value="npm">
 19 |     ```bash
 20 |     npx shadcn@latest add 'https://shadcn-dropzone.vercel.app/dropzone.json';
 21 |     ```
 22 | 
 23 |   </Tab>
 24 |   
 25 |   <Tab value="pnpm">
 26 |     ```bash 
 27 |     pnpm dlx shadcn@latest add button 'https://shadcn-dropzone.vercel.app/dropzone.json';
 28 |     ```
 29 | 
 30 |   </Tab>
 31 |   <Tab value="yarn">
 32 |     ```bash 
 33 |     npx dlx shadcn@latest add button 'https://shadcn-dropzone.vercel.app/dropzone.json';
 34 |     ```
 35 | 
 36 |   </Tab>
 37 |   <Tab value="bun">
 38 |     ```bash 
 39 |     bunx --bun shadcn@latest add button 'https://shadcn-dropzone.vercel.app/dropzone.json';
 40 |     ```
 41 |   </Tab>
 42 | </Tabs>
 43 | 
 44 | ## Usage
 45 | 
 46 | ```tsx
 47 | import {
 48 |   Dropzone,
 49 |   DropZoneArea,
 50 |   DropzoneDescription,
 51 |   DropzoneFileList,
 52 |   DropzoneFileListItem,
 53 |   DropzoneFileMessage,
 54 |   DropzoneTrigger,
 55 |   DropzoneMessage,
 56 |   DropzoneRemoveFile,
 57 |   DropzoneRetryFile,
 58 |   InfiniteProgress,
 59 |   useDropzone,
 60 | } from "@/components/dropzone";
 61 | ```
 62 | 
 63 | ```tsx
 64 | const dropzone = useDropzone();
 65 | 
 66 | return (
 67 |   <Dropzone {...dropzone}>
 68 |     <DropzoneDescription>
 69 |       These will be uploaded to the server.
 70 |     </DropzoneDescription>
 71 |     <DropzoneMessage />
 72 |     <DropZoneArea>
 73 |       <DropzoneTrigger>
 74 |         Click here or drag and drop files to upload them
 75 |       </DropzoneTrigger>
 76 |       <DropzoneFileList>
 77 |         {dropzone.fileStatuses.map((file) => (
 78 |           <DropzoneFileListItem key={file.id} file={file}>
 79 |             <DropzoneRetryFile>Retry</DropzoneRetryFile>
 80 |             <DropzoneRemoveFile>Remove</DropzoneRemoveFile>
 81 |             <DropzoneFileMessage />
 82 |             <InfiniteProgress status={file.status} />
 83 |           </DropzoneFileListItem>
 84 |         ))}
 85 |       </DropzoneFileList>
 86 |     </DropZoneArea>
 87 |   </Dropzone>
 88 | );
 89 | ```
 90 | 
 91 | ## Examples
 92 | 
 93 | (None of the below examples actually upload files to a server, don't worry!)
 94 | 
 95 | ### Single File
 96 | 
 97 | <Tabs items={["preview", "code"]}>
 98 |   <Tab value="preview">
 99 |     <SingleFile />
100 |   </Tab>
101 |   <Tab value="code">
102 |     ```tsx
103 |     "use client";
104 |     
105 |     import {
106 |       Dropzone,
107 |       DropZoneArea,
108 |       DropzoneDescription,
109 |       DropzoneFileList,
110 |       DropzoneFileListItem,
111 |       DropzoneFileMessage,
112 |       DropzoneTrigger,
113 |       DropzoneMessage,
114 |       DropzoneRemoveFile,
115 |       DropzoneRetryFile,
116 |       InfiniteProgress,
117 |       useDropzone,
118 |     } from "@/components/dropzone";
119 | 
120 |     export function SingleFile() {
121 |       const dropzone = useDropzone({
122 |         onDropFile: async (file: File) => {
123 |           await new Promise((resolve) => setTimeout(resolve, 1000));
124 |           return {
125 |             status: "success",
126 |             result: URL.createObjectURL(file),
127 |           };
128 |         },
129 |         validation: {
130 |           accept: {
131 |             "image/*": [".png", ".jpg", ".jpeg"],
132 |           },
133 |           maxSize: 10 * 1024 * 1024,
134 |           maxFiles: 1,
135 |         },
136 |         shiftOnMaxFiles: true,
137 |       });
138 | 
139 |       const avatarSrc = dropzone.fileStatuses[0]?.result;
140 |       const isPending = dropzone.fileStatuses[0]?.status === "pending";
141 |       return (
142 |         <Dropzone {...dropzone}>
143 |           <div className="flex justify-between">
144 |             <DropzoneMessage />
145 |           </div>
146 |           <DropZoneArea>
147 |             <DropzoneTrigger className="flex gap-8 bg-transparent text-sm">
148 |               <Avatar className={cn(isPending && "animate-pulse")}>
149 |                 <AvatarImage className="object-cover" src={avatarSrc} />
150 |                 <AvatarFallback>JG</AvatarFallback>
151 |               </Avatar>
152 |               <div className="flex flex-col gap-1 font-semibold">
153 |                 <p>Upload a new avatar</p>
154 |                 <p className="text-xs text-muted-foreground">
155 |                   Please select an image smaller than 10MB
156 |                 </p>
157 |               </div>
158 |             </DropzoneTrigger>
159 |           </DropZoneArea>
160 |         </Dropzone>
161 |       );
162 |     }
163 |     ```
164 | 
165 |   </Tab>
166 | </Tabs>
167 | ### With image previews
168 | 
169 | <Tabs items={["preview", "code"]}>
170 |   <Tab value="preview">
171 |     <MultiImages />
172 |   </Tab>
173 |   <Tab value="code">
174 |     ```tsx
175 |     "use client";
176 |     import {
177 |       Dropzone,
178 |       DropZoneArea,
179 |       DropzoneDescription,
180 |       DropzoneFileList,
181 |       DropzoneFileListItem,
182 |       DropzoneMessage,
183 |       DropzoneRemoveFile,
184 |       DropzoneTrigger,
185 |       useDropzone,
186 |     } from "@/components/dropzone";
187 |     import { CloudUploadIcon, Trash2Icon } from "lucide-react";
188 | 
189 |     export function MultiImages() {
190 |       const dropzone = useDropzone({
191 |         onDropFile: async (file: File) => {
192 |           await new Promise((resolve) => setTimeout(resolve, 1000));
193 |           return {
194 |             status: "success",
195 |             result: URL.createObjectURL(file),
196 |           };
197 |         },
198 |         validation: {
199 |           accept: {
200 |             "image/*": [".png", ".jpg", ".jpeg"],
201 |           },
202 |           maxSize: 10 * 1024 * 1024,
203 |           maxFiles: 10,
204 |         },
205 |       });
206 | 
207 |       return (
208 |         <div className="not-prose flex flex-col gap-4">
209 |           <Dropzone {...dropzone}>
210 |             <div>
211 |               <div className="flex justify-between">
212 |                 <DropzoneDescription>
213 |                   Please select up to 10 images
214 |                 </DropzoneDescription>
215 |                 <DropzoneMessage />
216 |               </div>
217 |               <DropZoneArea>
218 |                 <DropzoneTrigger className="flex flex-col items-center gap-4 bg-transparent p-10 text-center text-sm">
219 |                   <CloudUploadIcon className="size-8" />
220 |                   <div>
221 |                     <p className="font-semibold">Upload listing images</p>
222 |                     <p className="text-sm text-muted-foreground">
223 |                       Click here or drag and drop to upload
224 |                     </p>
225 |                   </div>
226 |                 </DropzoneTrigger>
227 |               </DropZoneArea>
228 |             </div>
229 | 
230 |             <DropzoneFileList className="grid grid-cols-3 gap-3 p-0">
231 |               {dropzone.fileStatuses.map((file) => (
232 |                 <DropzoneFileListItem
233 |                   className="overflow-hidden rounded-md bg-secondary p-0 shadow-sm"
234 |                   key={file.id}
235 |                   file={file}
236 |                 >
237 |                   {file.status === "pending" && (
238 |                     <div className="aspect-video animate-pulse bg-black/20" />
239 |                   )}
240 |                   {file.status === "success" && (
241 |                     // eslint-disable-next-line @next/next/no-img-element
242 |                     <img
243 |                       src={file.result}
244 |                       alt={`uploaded-${file.fileName}`}
245 |                       className="aspect-video object-cover"
246 |                     />
247 |                   )}
248 |                   <div className="flex items-center justify-between p-2 pl-4">
249 |                     <div className="min-w-0">
250 |                       <p className="truncate text-sm">{file.fileName}</p>
251 |                       <p className="text-xs text-muted-foreground">
252 |                         {(file.file.size / (1024 * 1024)).toFixed(2)} MB
253 |                       </p>
254 |                     </div>
255 |                     <DropzoneRemoveFile
256 |                       variant="ghost"
257 |                       className="shrink-0 hover:outline"
258 |                     >
259 |                       <Trash2Icon className="size-4" />
260 |                     </DropzoneRemoveFile>
261 |                   </div>
262 |                 </DropzoneFileListItem>
263 |               ))}
264 |             </DropzoneFileList>
265 |           </Dropzone>
266 |         </div>
267 |       );
268 |     }
269 |     ```
270 | 
271 |   </Tab>
272 | </Tabs>
273 | 
274 | ### Multiple files
275 | 
276 | <Tabs items={["preview", "code"]}>
277 |   <Tab value="preview">
278 |     <MultiFiles />
279 |   </Tab>
280 |   <Tab value="code">
281 |     ```tsx
282 |       "use client";
283 |       import {
284 |         Dropzone,
285 |         DropZoneArea,
286 |         DropzoneDescription,
287 |         DropzoneFileList,
288 |         DropzoneFileListItem,
289 |         DropzoneMessage,
290 |         DropzoneRemoveFile,
291 |         DropzoneTrigger,
292 |         useDropzone,
293 |       } from "@/components/dropzone";
294 |       import { CloudUploadIcon, Trash2Icon } from "lucide-react";
295 | 
296 |       export function MultiImages() {
297 |         const dropzone = useDropzone({
298 |           onDropFile: async (file: File) => {
299 |             await new Promise((resolve) => setTimeout(resolve, 1000));
300 |             return {
301 |               status: "success",
302 |               result: URL.createObjectURL(file),
303 |             };
304 |           },
305 |           validation: {
306 |             accept: {
307 |               "image/*": [".png", ".jpg", ".jpeg"],
308 |             },
309 |             maxSize: 10 * 1024 * 1024,
310 |             maxFiles: 10,
311 |           },
312 |         });
313 | 
314 |         return (
315 |           <div className="not-prose flex flex-col gap-4">
316 |             <Dropzone {...dropzone}>
317 |               <div>
318 |                 <div className="flex justify-between">
319 |                   <DropzoneDescription>
320 |                     Please select up to 10 images
321 |                   </DropzoneDescription>
322 |                   <DropzoneMessage />
323 |                 </div>
324 |                 <DropZoneArea>
325 |                   <DropzoneTrigger className="flex flex-col items-center gap-4 bg-transparent p-10 text-center text-sm">
326 |                     <CloudUploadIcon className="size-8" />
327 |                     <div>
328 |                       <p className="font-semibold">Upload images</p>
329 |                       <p className="text-sm text-muted-foreground">
330 |                         Click here or drag and drop to upload
331 |                       </p>
332 |                     </div>
333 |                   </DropzoneTrigger>
334 |                 </DropZoneArea>
335 |               </div>
336 | 
337 |               <DropzoneFileList className="grid gap-3 p-0 md:grid-cols-2 lg:grid-cols-3">
338 |                 {dropzone.fileStatuses.map((file) => (
339 |                   <DropzoneFileListItem
340 |                     className="overflow-hidden rounded-md bg-secondary p-0 shadow-sm"
341 |                     key={file.id}
342 |                     file={file}
343 |                   >
344 |                     {file.status === "pending" && (
345 |                       <div className="aspect-video animate-pulse bg-black/20" />
346 |                     )}
347 |                     {file.status === "success" && (
348 |                       // eslint-disable-next-line @next/next/no-img-element
349 |                       <img
350 |                         src={file.result}
351 |                         alt={`uploaded-${file.fileName}`}
352 |                         className="aspect-video object-cover"
353 |                       />
354 |                     )}
355 |                     <div className="flex items-center justify-between p-2 pl-4">
356 |                       <div className="min-w-0">
357 |                         <p className="truncate text-sm">{file.fileName}</p>
358 |                         <p className="text-xs text-muted-foreground">
359 |                           {(file.file.size / (1024 * 1024)).toFixed(2)} MB
360 |                         </p>
361 |                       </div>
362 |                       <DropzoneRemoveFile
363 |                         variant="ghost"
364 |                         className="shrink-0 hover:outline"
365 |                       >
366 |                         <Trash2Icon className="size-4" />
367 |                       </DropzoneRemoveFile>
368 |                     </div>
369 |                   </DropzoneFileListItem>
370 |                 ))}
371 |               </DropzoneFileList>
372 |             </Dropzone>
373 |           </div>
374 |         );
375 |       }
376 | 
377 |     ```
378 | 
379 |   </Tab>
380 | </Tabs>
381 | 


--------------------------------------------------------------------------------
/public/dropzone.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dropzone",
 3 |   "type": "registry:ui",
 4 |   "registryDependencies": [
 5 |     "button"
 6 |   ],
 7 |   "dependencies": [
 8 |     "react-dropzone"
 9 |   ],
10 |   "devDependencies": [],
11 |   "tailwind": {},
12 |   "cssVars": {
13 |     "light": {},
14 |     "dark": {}
15 |   },
16 |   "files": [
17 |     {
18 |       "path": "dropzone.tsx",
19 |       "content": "/* eslint-disable @typescript-eslint/no-empty-object-type */\nimport { cn } from \"@/lib/utils\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useReducer,\n  useState,\n} from \"react\";\nimport {\n  Accept,\n  FileRejection,\n  useDropzone as rootUseDropzone,\n} from \"react-dropzone\";\nimport { Button, ButtonProps } from \"./ui/button\";\n\ntype DropzoneResult<TUploadRes, TUploadError> =\n  | {\n      status: \"pending\";\n    }\n  | {\n      status: \"error\";\n      error: TUploadError;\n    }\n  | {\n      status: \"success\";\n      result: TUploadRes;\n    };\n\nexport type FileStatus<TUploadRes, TUploadError> = {\n  id: string;\n  fileName: string;\n  file: File;\n  tries: number;\n} & (\n  | {\n      status: \"pending\";\n      result?: undefined;\n      error?: undefined;\n    }\n  | {\n      status: \"error\";\n      error: TUploadError;\n      result?: undefined;\n    }\n  | {\n      status: \"success\";\n      result: TUploadRes;\n      error?: undefined;\n    }\n);\n\nconst fileStatusReducer = <TUploadRes, TUploadError>(\n  state: FileStatus<TUploadRes, TUploadError>[],\n  action:\n    | {\n        type: \"add\";\n        id: string;\n        fileName: string;\n        file: File;\n      }\n    | {\n        type: \"remove\";\n        id: string;\n      }\n    | ({\n        type: \"update-status\";\n        id: string;\n      } & DropzoneResult<TUploadRes, TUploadError>),\n): FileStatus<TUploadRes, TUploadError>[] => {\n  switch (action.type) {\n    case \"add\":\n      return [\n        ...state,\n        {\n          id: action.id,\n          fileName: action.fileName,\n          file: action.file,\n          status: \"pending\",\n          tries: 1,\n        },\n      ];\n    case \"remove\":\n      return state.filter((fileStatus) => fileStatus.id !== action.id);\n    case \"update-status\":\n      return state.map((fileStatus) => {\n        if (fileStatus.id === action.id) {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { id, type, ...rest } = action;\n          return {\n            ...fileStatus,\n            ...rest,\n            tries:\n              action.status === \"pending\"\n                ? fileStatus.tries + 1\n                : fileStatus.tries,\n          } as FileStatus<TUploadRes, TUploadError>;\n        }\n        return fileStatus;\n      });\n  }\n};\ntype DropZoneErrorCode = (typeof dropZoneErrorCodes)[number];\nconst dropZoneErrorCodes = [\n  \"file-invalid-type\",\n  \"file-too-large\",\n  \"file-too-small\",\n  \"too-many-files\",\n] as const;\n\nconst getDropZoneErrorCodes = (fileRejections: FileRejection[]) => {\n  const errors = fileRejections.map((rejection) => {\n    return rejection.errors\n      .filter((error) =>\n        dropZoneErrorCodes.includes(error.code as DropZoneErrorCode),\n      )\n      .map((error) => error.code) as DropZoneErrorCode[];\n  });\n  return Array.from(new Set(errors.flat()));\n};\n\nconst getRootError = (\n  errorCodes: DropZoneErrorCode[],\n  limits: {\n    accept?: Accept;\n    maxSize?: number;\n    minSize?: number;\n    maxFiles?: number;\n  },\n) => {\n  const errors = errorCodes.map((error) => {\n    switch (error) {\n      case \"file-invalid-type\":\n        const acceptedTypes = Object.values(limits.accept ?? {})\n          .flat()\n          .join(\", \");\n        return `only ${acceptedTypes} are allowed`;\n      case \"file-too-large\":\n        const maxMb = limits.maxSize\n          ? (limits.maxSize / (1024 * 1024)).toFixed(2)\n          : \"infinite?\";\n        return `max size is ${maxMb}MB`;\n      case \"file-too-small\":\n        const roundedMinSize = limits.minSize\n          ? (limits.minSize / (1024 * 1024)).toFixed(2)\n          : \"negative?\";\n        return `min size is ${roundedMinSize}MB`;\n      case \"too-many-files\":\n        return `max ${limits.maxFiles} files`;\n    }\n  });\n  const joinedErrors = errors.join(\", \");\n  return joinedErrors.charAt(0).toUpperCase() + joinedErrors.slice(1);\n};\n\ntype UseDropzoneProps<TUploadRes, TUploadError> = {\n  onDropFile: (\n    file: File,\n  ) => Promise<\n    Exclude<DropzoneResult<TUploadRes, TUploadError>, { status: \"pending\" }>\n  >;\n  onRemoveFile?: (id: string) => void | Promise<void>;\n  onFileUploaded?: (result: TUploadRes) => void;\n  onFileUploadError?: (error: TUploadError) => void;\n  onAllUploaded?: () => void;\n  onRootError?: (error: string | undefined) => void;\n  maxRetryCount?: number;\n  autoRetry?: boolean;\n  validation?: {\n    accept?: Accept;\n    minSize?: number;\n    maxSize?: number;\n    maxFiles?: number;\n  };\n  shiftOnMaxFiles?: boolean;\n} & (TUploadError extends string\n  ? {\n      shapeUploadError?: (error: TUploadError) => string | void;\n    }\n  : {\n      shapeUploadError: (error: TUploadError) => string | void;\n    });\n\ninterface UseDropzoneReturn<TUploadRes, TUploadError> {\n  getRootProps: ReturnType<typeof rootUseDropzone>[\"getRootProps\"];\n  getInputProps: ReturnType<typeof rootUseDropzone>[\"getInputProps\"];\n  onRemoveFile: (id: string) => Promise<void>;\n  onRetry: (id: string) => Promise<void>;\n  canRetry: (id: string) => boolean;\n  fileStatuses: FileStatus<TUploadRes, TUploadError>[];\n  isInvalid: boolean;\n  isDragActive: boolean;\n  rootError: string | undefined;\n  inputId: string;\n  rootMessageId: string;\n  rootDescriptionId: string;\n  getFileMessageId: (id: string) => string;\n}\n\nconst useDropzone = <TUploadRes, TUploadError = string>(\n  props: UseDropzoneProps<TUploadRes, TUploadError>,\n): UseDropzoneReturn<TUploadRes, TUploadError> => {\n  const {\n    onDropFile: pOnDropFile,\n    onRemoveFile: pOnRemoveFile,\n    shapeUploadError: pShapeUploadError,\n    onFileUploaded: pOnFileUploaded,\n    onFileUploadError: pOnFileUploadError,\n    onAllUploaded: pOnAllUploaded,\n    onRootError: pOnRootError,\n    maxRetryCount,\n    autoRetry,\n    validation,\n    shiftOnMaxFiles,\n  } = props;\n\n  const inputId = useId();\n  const rootMessageId = `${inputId}-root-message`;\n  const rootDescriptionId = `${inputId}-description`;\n  const [rootError, _setRootError] = useState<string | undefined>(undefined);\n\n  const setRootError = useCallback(\n    (error: string | undefined) => {\n      _setRootError(error);\n      if (pOnRootError !== undefined) {\n        pOnRootError(error);\n      }\n    },\n    [pOnRootError, _setRootError],\n  );\n\n  const [fileStatuses, dispatch] = useReducer(fileStatusReducer, []);\n\n  const isInvalid = useMemo(() => {\n    return (\n      fileStatuses.filter((file) => file.status === \"error\").length > 0 ||\n      rootError !== undefined\n    );\n  }, [fileStatuses, rootError]);\n\n  const _uploadFile = useCallback(\n    async (file: File, id: string, tries = 0) => {\n      const result = await pOnDropFile(file);\n\n      if (result.status === \"error\") {\n        if (autoRetry === true && tries < (maxRetryCount ?? Infinity)) {\n          dispatch({ type: \"update-status\", id, status: \"pending\" });\n          return _uploadFile(file, id, tries + 1);\n        }\n\n        dispatch({\n          type: \"update-status\",\n          id,\n          status: \"error\",\n          error:\n            pShapeUploadError !== undefined\n              ? pShapeUploadError(result.error)\n              : result.error,\n        });\n        if (pOnFileUploadError !== undefined) {\n          pOnFileUploadError(result.error);\n        }\n        return;\n      }\n      if (pOnFileUploaded !== undefined) {\n        pOnFileUploaded(result.result);\n      }\n      dispatch({\n        type: \"update-status\",\n        id,\n        ...result,\n      });\n    },\n    [\n      autoRetry,\n      maxRetryCount,\n      pOnDropFile,\n      pShapeUploadError,\n      pOnFileUploadError,\n      pOnFileUploaded,\n    ],\n  );\n\n  const onRemoveFile = useCallback(\n    async (id: string) => {\n      await pOnRemoveFile?.(id);\n      dispatch({ type: \"remove\", id });\n    },\n    [pOnRemoveFile],\n  );\n\n  const canRetry = useCallback(\n    (id: string) => {\n      const fileStatus = fileStatuses.find((file) => file.id === id);\n      return (\n        fileStatus?.status === \"error\" &&\n        fileStatus.tries < (maxRetryCount ?? Infinity)\n      );\n    },\n    [fileStatuses, maxRetryCount],\n  );\n\n  const onRetry = useCallback(\n    async (id: string) => {\n      if (!canRetry(id)) {\n        return;\n      }\n      dispatch({ type: \"update-status\", id, status: \"pending\" });\n      const fileStatus = fileStatuses.find((file) => file.id === id);\n      if (!fileStatus || fileStatus.status !== \"error\") {\n        return;\n      }\n      await _uploadFile(fileStatus.file, id);\n    },\n    [canRetry, fileStatuses, _uploadFile],\n  );\n\n  const getFileMessageId = (id: string) => `${inputId}-${id}-message`;\n\n  const dropzone = rootUseDropzone({\n    accept: validation?.accept,\n    minSize: validation?.minSize,\n    maxSize: validation?.maxSize,\n    onDropAccepted: async (newFiles) => {\n      setRootError(undefined);\n\n      // useDropzone hook only checks max file count per group of uploaded files, allows going over if in multiple batches\n      const fileCount = fileStatuses.length;\n      const maxNewFiles =\n        validation?.maxFiles === undefined\n          ? Infinity\n          : validation?.maxFiles - fileCount;\n\n      if (maxNewFiles < newFiles.length) {\n        if (shiftOnMaxFiles === true) {\n        } else {\n          setRootError(getRootError([\"too-many-files\"], validation ?? {}));\n        }\n      }\n\n      const slicedNewFiles =\n        shiftOnMaxFiles === true ? newFiles : newFiles.slice(0, maxNewFiles);\n\n      const onDropFilePromises = slicedNewFiles.map(async (file, index) => {\n        if (fileCount + 1 > maxNewFiles) {\n          await onRemoveFile(fileStatuses[index].id);\n        }\n\n        const id = crypto.randomUUID();\n        dispatch({ type: \"add\", fileName: file.name, file, id });\n        await _uploadFile(file, id);\n      });\n\n      await Promise.all(onDropFilePromises);\n      if (pOnAllUploaded !== undefined) {\n        pOnAllUploaded();\n      }\n    },\n    onDropRejected: (fileRejections) => {\n      const errorMessage = getRootError(\n        getDropZoneErrorCodes(fileRejections),\n        validation ?? {},\n      );\n      setRootError(errorMessage);\n    },\n  });\n\n  return {\n    getRootProps: dropzone.getRootProps,\n    getInputProps: dropzone.getInputProps,\n    inputId,\n    rootMessageId,\n    rootDescriptionId,\n    getFileMessageId,\n    onRemoveFile,\n    onRetry,\n    canRetry,\n    fileStatuses: fileStatuses as FileStatus<TUploadRes, TUploadError>[],\n    isInvalid,\n    rootError,\n    isDragActive: dropzone.isDragActive,\n  };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst DropZoneContext = createContext<UseDropzoneReturn<any, any>>({\n  getRootProps: () => ({}) as never,\n  getInputProps: () => ({}) as never,\n  onRemoveFile: async () => {},\n  onRetry: async () => {},\n  canRetry: () => false,\n  fileStatuses: [],\n  isInvalid: false,\n  isDragActive: false,\n  rootError: undefined,\n  inputId: \"\",\n  rootMessageId: \"\",\n  rootDescriptionId: \"\",\n  getFileMessageId: () => \"\",\n});\n\nconst useDropzoneContext = <TUploadRes, TUploadError>() => {\n  return useContext(DropZoneContext) as UseDropzoneReturn<\n    TUploadRes,\n    TUploadError\n  >;\n};\n\ninterface DropzoneProps<TUploadRes, TUploadError>\n  extends UseDropzoneReturn<TUploadRes, TUploadError> {\n  children: React.ReactNode;\n}\nconst Dropzone = <TUploadRes, TUploadError>(\n  props: DropzoneProps<TUploadRes, TUploadError>,\n) => {\n  const { children, ...rest } = props;\n  return (\n    <DropZoneContext.Provider value={rest}>{children}</DropZoneContext.Provider>\n  );\n};\nDropzone.displayName = \"Dropzone\";\n\ninterface DropZoneAreaProps extends React.HTMLAttributes<HTMLDivElement> {}\nconst DropZoneArea = forwardRef<HTMLDivElement, DropZoneAreaProps>(\n  ({ className, children, ...props }, forwardedRef) => {\n    const context = useDropzoneContext();\n\n    if (!context) {\n      throw new Error(\"DropzoneArea must be used within a Dropzone\");\n    }\n\n    const { onFocus, onBlur, onDragEnter, onDragLeave, onDrop, ref } =\n      context.getRootProps();\n\n    return (\n      // A11y behavior is handled through Trigger. All of these are only relevant to drag and drop which means this should be fine?\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n      <div\n        ref={(instance) => {\n          // TODO: test if this actually works?\n          ref.current = instance;\n          if (typeof forwardedRef === \"function\") {\n            forwardedRef(instance);\n          } else if (forwardedRef) {\n            forwardedRef.current = instance;\n          }\n        }}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onDragEnter={onDragEnter}\n        onDragLeave={onDragLeave}\n        onDrop={onDrop}\n        {...props}\n        aria-label=\"dropzone\"\n        className={cn(\n          \"flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n          context.isDragActive && \"animate-pulse bg-black/5\",\n          context.isInvalid && \"border-destructive\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nDropZoneArea.displayName = \"DropZoneArea\";\n\nexport interface DropzoneDescriptionProps\n  extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst DropzoneDescription = forwardRef<\n  HTMLParagraphElement,\n  DropzoneDescriptionProps\n>((props, ref) => {\n  const { className, ...rest } = props;\n  const context = useDropzoneContext();\n  if (!context) {\n    throw new Error(\"DropzoneDescription must be used within a Dropzone\");\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={context.rootDescriptionId}\n      {...rest}\n      className={cn(\"pb-1 text-sm text-muted-foreground\", className)}\n    />\n  );\n});\nDropzoneDescription.displayName = \"DropzoneDescription\";\n\ninterface DropzoneFileListContext<TUploadRes, TUploadError> {\n  onRemoveFile: () => Promise<void>;\n  onRetry: () => Promise<void>;\n  fileStatus: FileStatus<TUploadRes, TUploadError>;\n  canRetry: boolean;\n  dropzoneId: string;\n  messageId: string;\n}\n\nconst DropzoneFileListContext = createContext<\n  DropzoneFileListContext<unknown, unknown>\n>({\n  onRemoveFile: async () => {},\n  onRetry: async () => {},\n  fileStatus: {} as FileStatus<unknown, unknown>,\n  canRetry: false,\n  dropzoneId: \"\",\n  messageId: \"\",\n});\n\nconst useDropzoneFileListContext = () => {\n  return useContext(DropzoneFileListContext);\n};\n\ninterface DropZoneFileListProps\n  extends React.OlHTMLAttributes<HTMLOListElement> {}\n\nconst DropzoneFileList = forwardRef<HTMLOListElement, DropZoneFileListProps>(\n  (props, ref) => {\n    const context = useDropzoneContext();\n    if (!context) {\n      throw new Error(\"DropzoneFileList must be used within a Dropzone\");\n    }\n    return (\n      <ol\n        ref={ref}\n        aria-label=\"dropzone-file-list\"\n        {...props}\n        className={cn(\"flex flex-col gap-4\", props.className)}\n      >\n        {props.children}\n      </ol>\n    );\n  },\n);\nDropzoneFileList.displayName = \"DropzoneFileList\";\n\ninterface DropzoneFileListItemProps<TUploadRes, TUploadError>\n  extends React.LiHTMLAttributes<HTMLLIElement> {\n  file: FileStatus<TUploadRes, TUploadError>;\n}\n\nconst DropzoneFileListItem = forwardRef<\n  HTMLLIElement,\n  DropzoneFileListItemProps<unknown, unknown>\n>(({ className, ...props }, ref) => {\n  const fileId = props.file.id;\n  const {\n    onRemoveFile: cOnRemoveFile,\n    onRetry: cOnRetry,\n    getFileMessageId: cGetFileMessageId,\n    canRetry: cCanRetry,\n    inputId: cInputId,\n  } = useDropzoneContext();\n\n  const onRemoveFile = useCallback(\n    () => cOnRemoveFile(fileId),\n    [fileId, cOnRemoveFile],\n  );\n  const onRetry = useCallback(() => cOnRetry(fileId), [fileId, cOnRetry]);\n  const messageId = cGetFileMessageId(fileId);\n  const isInvalid = props.file.status === \"error\";\n  const canRetry = useMemo(() => cCanRetry(fileId), [fileId, cCanRetry]);\n  return (\n    <DropzoneFileListContext.Provider\n      value={{\n        onRemoveFile,\n        onRetry,\n        fileStatus: props.file,\n        canRetry,\n        dropzoneId: cInputId,\n        messageId,\n      }}\n    >\n      <li\n        ref={ref}\n        aria-label=\"dropzone-file-list-item\"\n        aria-describedby={isInvalid ? messageId : undefined}\n        className={cn(\n          \"flex flex-col justify-center gap-2 rounded-md bg-muted/40 px-4 py-2\",\n          className,\n        )}\n      >\n        {props.children}\n      </li>\n    </DropzoneFileListContext.Provider>\n  );\n});\nDropzoneFileListItem.displayName = \"DropzoneFileListItem\";\n\ninterface DropzoneFileMessageProps\n  extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst DropzoneFileMessage = forwardRef<\n  HTMLParagraphElement,\n  DropzoneFileMessageProps\n>((props, ref) => {\n  const { children, ...rest } = props;\n  const context = useDropzoneFileListContext();\n  if (!context) {\n    throw new Error(\n      \"DropzoneFileMessage must be used within a DropzoneFileListItem\",\n    );\n  }\n\n  const body =\n    context.fileStatus.status === \"error\"\n      ? String(context.fileStatus.error)\n      : children;\n  return (\n    <p\n      ref={ref}\n      id={context.messageId}\n      {...rest}\n      className={cn(\n        \"h-5 text-[0.8rem] font-medium text-destructive\",\n        rest.className,\n      )}\n    >\n      {body}\n    </p>\n  );\n});\nDropzoneFileMessage.displayName = \"DropzoneFileMessage\";\ninterface DropzoneMessageProps\n  extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst DropzoneMessage = forwardRef<HTMLParagraphElement, DropzoneMessageProps>(\n  (props, ref) => {\n    const { children, ...rest } = props;\n    const context = useDropzoneContext();\n    if (!context) {\n      throw new Error(\"DropzoneRootMessage must be used within a Dropzone\");\n    }\n\n    const body = context.rootError ? String(context.rootError) : children;\n    return (\n      <p\n        ref={ref}\n        id={context.rootMessageId}\n        {...rest}\n        className={cn(\n          \"h-5 text-[0.8rem] font-medium text-destructive\",\n          rest.className,\n        )}\n      >\n        {body}\n      </p>\n    );\n  },\n);\nDropzoneMessage.displayName = \"DropzoneMessage\";\n\ninterface DropzoneRemoveFileProps extends ButtonProps {}\n\nconst DropzoneRemoveFile = forwardRef<\n  HTMLButtonElement,\n  DropzoneRemoveFileProps\n>(({ className, ...props }, ref) => {\n  const context = useDropzoneFileListContext();\n  if (!context) {\n    throw new Error(\n      \"DropzoneRemoveFile must be used within a DropzoneFileListItem\",\n    );\n  }\n  return (\n    <Button\n      ref={ref}\n      onClick={context.onRemoveFile}\n      type=\"button\"\n      size=\"icon\"\n      {...props}\n      className={cn(\n        \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n        className,\n      )}\n    >\n      {props.children}\n      <span className=\"sr-only\">Remove file</span>\n    </Button>\n  );\n});\nDropzoneRemoveFile.displayName = \"DropzoneRemoveFile\";\n\ninterface DropzoneRetryFileProps extends ButtonProps {}\n\nconst DropzoneRetryFile = forwardRef<HTMLButtonElement, DropzoneRetryFileProps>(\n  ({ className, ...props }, ref) => {\n    const context = useDropzoneFileListContext();\n\n    if (!context) {\n      throw new Error(\n        \"DropzoneRetryFile must be used within a DropzoneFileListItem\",\n      );\n    }\n\n    const canRetry = context.canRetry;\n\n    return (\n      <Button\n        ref={ref}\n        aria-disabled={!canRetry}\n        aria-label=\"retry\"\n        onClick={context.onRetry}\n        type=\"button\"\n        size=\"icon\"\n        {...props}\n        className={cn(\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n          className,\n        )}\n      >\n        {props.children}\n        <span className=\"sr-only\">Retry</span>\n      </Button>\n    );\n  },\n);\nDropzoneRetryFile.displayName = \"DropzoneRetryFile\";\n\ninterface DropzoneTriggerProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {}\n\nconst DropzoneTrigger = forwardRef<HTMLLabelElement, DropzoneTriggerProps>(\n  ({ className, children, ...props }, ref) => {\n    const context = useDropzoneContext();\n    if (!context) {\n      throw new Error(\"DropzoneTrigger must be used within a Dropzone\");\n    }\n\n    const { fileStatuses, getFileMessageId } = context;\n\n    const fileMessageIds = useMemo(\n      () =>\n        fileStatuses\n          .filter((file) => file.status === \"error\")\n          .map((file) => getFileMessageId(file.id)),\n      [fileStatuses, getFileMessageId],\n    );\n\n    return (\n      <label\n        ref={ref}\n        {...props}\n        className={cn(\n          \"cursor-pointer rounded-sm bg-secondary px-4 py-2 font-medium ring-offset-background transition-colors focus-within:outline-none hover:bg-secondary/80 has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring has-[input:focus-visible]:ring-offset-2\",\n          className,\n        )}\n      >\n        {children}\n        <input\n          {...context.getInputProps({\n            style: {\n              display: undefined,\n            },\n            className: \"sr-only\",\n            tabIndex: undefined,\n          })}\n          aria-describedby={\n            context.isInvalid\n              ? [context.rootMessageId, ...fileMessageIds].join(\" \")\n              : undefined\n          }\n          aria-invalid={context.isInvalid}\n        />\n      </label>\n    );\n  },\n);\nDropzoneTrigger.displayName = \"DropzoneTrigger\";\n\ninterface InfiniteProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  status: \"pending\" | \"success\" | \"error\";\n}\n\nconst valueTextMap = {\n  pending: \"indeterminate\",\n  success: \"100%\",\n  error: \"error\",\n};\n\nconst InfiniteProgress = forwardRef<HTMLDivElement, InfiniteProgressProps>(\n  ({ className, ...props }, ref) => {\n    const done = props.status === \"success\" || props.status === \"error\";\n    const error = props.status === \"error\";\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuetext={valueTextMap[props.status]}\n        {...props}\n        className={cn(\n          \"relative h-2 w-full overflow-hidden rounded-full bg-muted\",\n          className,\n        )}\n      >\n        <div\n          //   TODO: add proper done transition\n          className={cn(\n            \"h-full w-full rounded-full bg-primary\",\n            done ? \"translate-x-0\" : \"animate-infinite-progress\",\n            error && \"bg-destructive\",\n          )}\n        />\n      </div>\n    );\n  },\n);\nInfiniteProgress.displayName = \"InfiniteProgress\";\n\nexport {\n  Dropzone,\n  DropZoneArea,\n  DropzoneDescription,\n  DropzoneFileList,\n  DropzoneFileListItem,\n  DropzoneFileMessage,\n  DropzoneMessage,\n  DropzoneRemoveFile,\n  DropzoneRetryFile,\n  DropzoneTrigger,\n  InfiniteProgress,\n  useDropzone,\n};\n",
20 |       "type": "registry:ui"
21 |     }
22 |   ]
23 | }


--------------------------------------------------------------------------------
/components/dropzone.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @typescript-eslint/no-empty-object-type */
  2 | import { cn } from "@/lib/utils";
  3 | import {
  4 |   createContext,
  5 |   forwardRef,
  6 |   useCallback,
  7 |   useContext,
  8 |   useId,
  9 |   useMemo,
 10 |   useReducer,
 11 |   useState,
 12 | } from "react";
 13 | import {
 14 |   Accept,
 15 |   FileRejection,
 16 |   useDropzone as rootUseDropzone,
 17 | } from "react-dropzone";
 18 | import { Button, ButtonProps } from "./ui/button";
 19 | 
 20 | type DropzoneResult<TUploadRes, TUploadError> =
 21 |   | {
 22 |       status: "pending";
 23 |     }
 24 |   | {
 25 |       status: "error";
 26 |       error: TUploadError;
 27 |     }
 28 |   | {
 29 |       status: "success";
 30 |       result: TUploadRes;
 31 |     };
 32 | 
 33 | export type FileStatus<TUploadRes, TUploadError> = {
 34 |   id: string;
 35 |   fileName: string;
 36 |   file: File;
 37 |   tries: number;
 38 | } & (
 39 |   | {
 40 |       status: "pending";
 41 |       result?: undefined;
 42 |       error?: undefined;
 43 |     }
 44 |   | {
 45 |       status: "error";
 46 |       error: TUploadError;
 47 |       result?: undefined;
 48 |     }
 49 |   | {
 50 |       status: "success";
 51 |       result: TUploadRes;
 52 |       error?: undefined;
 53 |     }
 54 | );
 55 | 
 56 | const fileStatusReducer = <TUploadRes, TUploadError>(
 57 |   state: FileStatus<TUploadRes, TUploadError>[],
 58 |   action:
 59 |     | {
 60 |         type: "add";
 61 |         id: string;
 62 |         fileName: string;
 63 |         file: File;
 64 |       }
 65 |     | {
 66 |         type: "remove";
 67 |         id: string;
 68 |       }
 69 |     | ({
 70 |         type: "update-status";
 71 |         id: string;
 72 |       } & DropzoneResult<TUploadRes, TUploadError>),
 73 | ): FileStatus<TUploadRes, TUploadError>[] => {
 74 |   switch (action.type) {
 75 |     case "add":
 76 |       return [
 77 |         ...state,
 78 |         {
 79 |           id: action.id,
 80 |           fileName: action.fileName,
 81 |           file: action.file,
 82 |           status: "pending",
 83 |           tries: 1,
 84 |         },
 85 |       ];
 86 |     case "remove":
 87 |       return state.filter((fileStatus) => fileStatus.id !== action.id);
 88 |     case "update-status":
 89 |       return state.map((fileStatus) => {
 90 |         if (fileStatus.id === action.id) {
 91 |           // eslint-disable-next-line @typescript-eslint/no-unused-vars
 92 |           const { id, type, ...rest } = action;
 93 |           return {
 94 |             ...fileStatus,
 95 |             ...rest,
 96 |             tries:
 97 |               action.status === "pending"
 98 |                 ? fileStatus.tries + 1
 99 |                 : fileStatus.tries,
100 |           } as FileStatus<TUploadRes, TUploadError>;
101 |         }
102 |         return fileStatus;
103 |       });
104 |   }
105 | };
106 | type DropZoneErrorCode = (typeof dropZoneErrorCodes)[number];
107 | const dropZoneErrorCodes = [
108 |   "file-invalid-type",
109 |   "file-too-large",
110 |   "file-too-small",
111 |   "too-many-files",
112 | ] as const;
113 | 
114 | const getDropZoneErrorCodes = (fileRejections: FileRejection[]) => {
115 |   const errors = fileRejections.map((rejection) => {
116 |     return rejection.errors
117 |       .filter((error) =>
118 |         dropZoneErrorCodes.includes(error.code as DropZoneErrorCode),
119 |       )
120 |       .map((error) => error.code) as DropZoneErrorCode[];
121 |   });
122 |   return Array.from(new Set(errors.flat()));
123 | };
124 | 
125 | const getRootError = (
126 |   errorCodes: DropZoneErrorCode[],
127 |   limits: {
128 |     accept?: Accept;
129 |     maxSize?: number;
130 |     minSize?: number;
131 |     maxFiles?: number;
132 |   },
133 | ) => {
134 |   const errors = errorCodes.map((error) => {
135 |     switch (error) {
136 |       case "file-invalid-type":
137 |         const acceptedTypes = Object.values(limits.accept ?? {})
138 |           .flat()
139 |           .join(", ");
140 |         return `only ${acceptedTypes} are allowed`;
141 |       case "file-too-large":
142 |         const maxMb = limits.maxSize
143 |           ? (limits.maxSize / (1024 * 1024)).toFixed(2)
144 |           : "infinite?";
145 |         return `max size is ${maxMb}MB`;
146 |       case "file-too-small":
147 |         const roundedMinSize = limits.minSize
148 |           ? (limits.minSize / (1024 * 1024)).toFixed(2)
149 |           : "negative?";
150 |         return `min size is ${roundedMinSize}MB`;
151 |       case "too-many-files":
152 |         return `max ${limits.maxFiles} files`;
153 |     }
154 |   });
155 |   const joinedErrors = errors.join(", ");
156 |   return joinedErrors.charAt(0).toUpperCase() + joinedErrors.slice(1);
157 | };
158 | 
159 | type UseDropzoneProps<TUploadRes, TUploadError> = {
160 |   onDropFile: (
161 |     file: File,
162 |   ) => Promise<
163 |     Exclude<DropzoneResult<TUploadRes, TUploadError>, { status: "pending" }>
164 |   >;
165 |   onRemoveFile?: (id: string) => void | Promise<void>;
166 |   onFileUploaded?: (result: TUploadRes) => void;
167 |   onFileUploadError?: (error: TUploadError) => void;
168 |   onAllUploaded?: () => void;
169 |   onRootError?: (error: string | undefined) => void;
170 |   maxRetryCount?: number;
171 |   autoRetry?: boolean;
172 |   validation?: {
173 |     accept?: Accept;
174 |     minSize?: number;
175 |     maxSize?: number;
176 |     maxFiles?: number;
177 |   };
178 |   shiftOnMaxFiles?: boolean;
179 | } & (TUploadError extends string
180 |   ? {
181 |       shapeUploadError?: (error: TUploadError) => string | void;
182 |     }
183 |   : {
184 |       shapeUploadError: (error: TUploadError) => string | void;
185 |     });
186 | 
187 | interface UseDropzoneReturn<TUploadRes, TUploadError> {
188 |   getRootProps: ReturnType<typeof rootUseDropzone>["getRootProps"];
189 |   getInputProps: ReturnType<typeof rootUseDropzone>["getInputProps"];
190 |   onRemoveFile: (id: string) => Promise<void>;
191 |   onRetry: (id: string) => Promise<void>;
192 |   canRetry: (id: string) => boolean;
193 |   fileStatuses: FileStatus<TUploadRes, TUploadError>[];
194 |   isInvalid: boolean;
195 |   isDragActive: boolean;
196 |   rootError: string | undefined;
197 |   inputId: string;
198 |   rootMessageId: string;
199 |   rootDescriptionId: string;
200 |   getFileMessageId: (id: string) => string;
201 | }
202 | 
203 | const useDropzone = <TUploadRes, TUploadError = string>(
204 |   props: UseDropzoneProps<TUploadRes, TUploadError>,
205 | ): UseDropzoneReturn<TUploadRes, TUploadError> => {
206 |   const {
207 |     onDropFile: pOnDropFile,
208 |     onRemoveFile: pOnRemoveFile,
209 |     shapeUploadError: pShapeUploadError,
210 |     onFileUploaded: pOnFileUploaded,
211 |     onFileUploadError: pOnFileUploadError,
212 |     onAllUploaded: pOnAllUploaded,
213 |     onRootError: pOnRootError,
214 |     maxRetryCount,
215 |     autoRetry,
216 |     validation,
217 |     shiftOnMaxFiles,
218 |   } = props;
219 | 
220 |   const inputId = useId();
221 |   const rootMessageId = `${inputId}-root-message`;
222 |   const rootDescriptionId = `${inputId}-description`;
223 |   const [rootError, _setRootError] = useState<string | undefined>(undefined);
224 | 
225 |   const setRootError = useCallback(
226 |     (error: string | undefined) => {
227 |       _setRootError(error);
228 |       if (pOnRootError !== undefined) {
229 |         pOnRootError(error);
230 |       }
231 |     },
232 |     [pOnRootError, _setRootError],
233 |   );
234 | 
235 |   const [fileStatuses, dispatch] = useReducer(fileStatusReducer, []);
236 | 
237 |   const isInvalid = useMemo(() => {
238 |     return (
239 |       fileStatuses.filter((file) => file.status === "error").length > 0 ||
240 |       rootError !== undefined
241 |     );
242 |   }, [fileStatuses, rootError]);
243 | 
244 |   const _uploadFile = useCallback(
245 |     async (file: File, id: string, tries = 0) => {
246 |       const result = await pOnDropFile(file);
247 | 
248 |       if (result.status === "error") {
249 |         if (autoRetry === true && tries < (maxRetryCount ?? Infinity)) {
250 |           dispatch({ type: "update-status", id, status: "pending" });
251 |           return _uploadFile(file, id, tries + 1);
252 |         }
253 | 
254 |         dispatch({
255 |           type: "update-status",
256 |           id,
257 |           status: "error",
258 |           error:
259 |             pShapeUploadError !== undefined
260 |               ? pShapeUploadError(result.error)
261 |               : result.error,
262 |         });
263 |         if (pOnFileUploadError !== undefined) {
264 |           pOnFileUploadError(result.error);
265 |         }
266 |         return;
267 |       }
268 |       if (pOnFileUploaded !== undefined) {
269 |         pOnFileUploaded(result.result);
270 |       }
271 |       dispatch({
272 |         type: "update-status",
273 |         id,
274 |         ...result,
275 |       });
276 |     },
277 |     [
278 |       autoRetry,
279 |       maxRetryCount,
280 |       pOnDropFile,
281 |       pShapeUploadError,
282 |       pOnFileUploadError,
283 |       pOnFileUploaded,
284 |     ],
285 |   );
286 | 
287 |   const onRemoveFile = useCallback(
288 |     async (id: string) => {
289 |       await pOnRemoveFile?.(id);
290 |       dispatch({ type: "remove", id });
291 |     },
292 |     [pOnRemoveFile],
293 |   );
294 | 
295 |   const canRetry = useCallback(
296 |     (id: string) => {
297 |       const fileStatus = fileStatuses.find((file) => file.id === id);
298 |       return (
299 |         fileStatus?.status === "error" &&
300 |         fileStatus.tries < (maxRetryCount ?? Infinity)
301 |       );
302 |     },
303 |     [fileStatuses, maxRetryCount],
304 |   );
305 | 
306 |   const onRetry = useCallback(
307 |     async (id: string) => {
308 |       if (!canRetry(id)) {
309 |         return;
310 |       }
311 |       dispatch({ type: "update-status", id, status: "pending" });
312 |       const fileStatus = fileStatuses.find((file) => file.id === id);
313 |       if (!fileStatus || fileStatus.status !== "error") {
314 |         return;
315 |       }
316 |       await _uploadFile(fileStatus.file, id);
317 |     },
318 |     [canRetry, fileStatuses, _uploadFile],
319 |   );
320 | 
321 |   const getFileMessageId = (id: string) => `${inputId}-${id}-message`;
322 | 
323 |   const dropzone = rootUseDropzone({
324 |     accept: validation?.accept,
325 |     minSize: validation?.minSize,
326 |     maxSize: validation?.maxSize,
327 |     onDropAccepted: async (newFiles) => {
328 |       setRootError(undefined);
329 | 
330 |       // useDropzone hook only checks max file count per group of uploaded files, allows going over if in multiple batches
331 |       const fileCount = fileStatuses.length;
332 |       const maxNewFiles =
333 |         validation?.maxFiles === undefined
334 |           ? Infinity
335 |           : validation?.maxFiles - fileCount;
336 | 
337 |       if (maxNewFiles < newFiles.length) {
338 |         if (shiftOnMaxFiles === true) {
339 |         } else {
340 |           setRootError(getRootError(["too-many-files"], validation ?? {}));
341 |         }
342 |       }
343 | 
344 |       const slicedNewFiles =
345 |         shiftOnMaxFiles === true ? newFiles : newFiles.slice(0, maxNewFiles);
346 | 
347 |       const onDropFilePromises = slicedNewFiles.map(async (file, index) => {
348 |         if (fileCount + 1 > maxNewFiles) {
349 |           await onRemoveFile(fileStatuses[index].id);
350 |         }
351 | 
352 |         const id = crypto.randomUUID();
353 |         dispatch({ type: "add", fileName: file.name, file, id });
354 |         await _uploadFile(file, id);
355 |       });
356 | 
357 |       await Promise.all(onDropFilePromises);
358 |       if (pOnAllUploaded !== undefined) {
359 |         pOnAllUploaded();
360 |       }
361 |     },
362 |     onDropRejected: (fileRejections) => {
363 |       const errorMessage = getRootError(
364 |         getDropZoneErrorCodes(fileRejections),
365 |         validation ?? {},
366 |       );
367 |       setRootError(errorMessage);
368 |     },
369 |   });
370 | 
371 |   return {
372 |     getRootProps: dropzone.getRootProps,
373 |     getInputProps: dropzone.getInputProps,
374 |     inputId,
375 |     rootMessageId,
376 |     rootDescriptionId,
377 |     getFileMessageId,
378 |     onRemoveFile,
379 |     onRetry,
380 |     canRetry,
381 |     fileStatuses: fileStatuses as FileStatus<TUploadRes, TUploadError>[],
382 |     isInvalid,
383 |     rootError,
384 |     isDragActive: dropzone.isDragActive,
385 |   };
386 | };
387 | 
388 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
389 | const DropZoneContext = createContext<UseDropzoneReturn<any, any>>({
390 |   getRootProps: () => ({}) as never,
391 |   getInputProps: () => ({}) as never,
392 |   onRemoveFile: async () => {},
393 |   onRetry: async () => {},
394 |   canRetry: () => false,
395 |   fileStatuses: [],
396 |   isInvalid: false,
397 |   isDragActive: false,
398 |   rootError: undefined,
399 |   inputId: "",
400 |   rootMessageId: "",
401 |   rootDescriptionId: "",
402 |   getFileMessageId: () => "",
403 | });
404 | 
405 | const useDropzoneContext = <TUploadRes, TUploadError>() => {
406 |   return useContext(DropZoneContext) as UseDropzoneReturn<
407 |     TUploadRes,
408 |     TUploadError
409 |   >;
410 | };
411 | 
412 | interface DropzoneProps<TUploadRes, TUploadError>
413 |   extends UseDropzoneReturn<TUploadRes, TUploadError> {
414 |   children: React.ReactNode;
415 | }
416 | const Dropzone = <TUploadRes, TUploadError>(
417 |   props: DropzoneProps<TUploadRes, TUploadError>,
418 | ) => {
419 |   const { children, ...rest } = props;
420 |   return (
421 |     <DropZoneContext.Provider value={rest}>{children}</DropZoneContext.Provider>
422 |   );
423 | };
424 | Dropzone.displayName = "Dropzone";
425 | 
426 | interface DropZoneAreaProps extends React.HTMLAttributes<HTMLDivElement> {}
427 | const DropZoneArea = forwardRef<HTMLDivElement, DropZoneAreaProps>(
428 |   ({ className, children, ...props }, forwardedRef) => {
429 |     const context = useDropzoneContext();
430 | 
431 |     if (!context) {
432 |       throw new Error("DropzoneArea must be used within a Dropzone");
433 |     }
434 | 
435 |     const { onFocus, onBlur, onDragEnter, onDragLeave, onDrop, ref } =
436 |       context.getRootProps();
437 | 
438 |     return (
439 |       // A11y behavior is handled through Trigger. All of these are only relevant to drag and drop which means this should be fine?
440 |       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
441 |       <div
442 |         ref={(instance) => {
443 |           // TODO: test if this actually works?
444 |           ref.current = instance;
445 |           if (typeof forwardedRef === "function") {
446 |             forwardedRef(instance);
447 |           } else if (forwardedRef) {
448 |             forwardedRef.current = instance;
449 |           }
450 |         }}
451 |         onFocus={onFocus}
452 |         onBlur={onBlur}
453 |         onDragEnter={onDragEnter}
454 |         onDragLeave={onDragLeave}
455 |         onDrop={onDrop}
456 |         {...props}
457 |         aria-label="dropzone"
458 |         className={cn(
459 |           "flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
460 |           context.isDragActive && "animate-pulse bg-black/5",
461 |           context.isInvalid && "border-destructive",
462 |           className,
463 |         )}
464 |       >
465 |         {children}
466 |       </div>
467 |     );
468 |   },
469 | );
470 | DropZoneArea.displayName = "DropZoneArea";
471 | 
472 | export interface DropzoneDescriptionProps
473 |   extends React.HTMLAttributes<HTMLParagraphElement> {}
474 | 
475 | const DropzoneDescription = forwardRef<
476 |   HTMLParagraphElement,
477 |   DropzoneDescriptionProps
478 | >((props, ref) => {
479 |   const { className, ...rest } = props;
480 |   const context = useDropzoneContext();
481 |   if (!context) {
482 |     throw new Error("DropzoneDescription must be used within a Dropzone");
483 |   }
484 | 
485 |   return (
486 |     <p
487 |       ref={ref}
488 |       id={context.rootDescriptionId}
489 |       {...rest}
490 |       className={cn("pb-1 text-sm text-muted-foreground", className)}
491 |     />
492 |   );
493 | });
494 | DropzoneDescription.displayName = "DropzoneDescription";
495 | 
496 | interface DropzoneFileListContext<TUploadRes, TUploadError> {
497 |   onRemoveFile: () => Promise<void>;
498 |   onRetry: () => Promise<void>;
499 |   fileStatus: FileStatus<TUploadRes, TUploadError>;
500 |   canRetry: boolean;
501 |   dropzoneId: string;
502 |   messageId: string;
503 | }
504 | 
505 | const DropzoneFileListContext = createContext<
506 |   DropzoneFileListContext<unknown, unknown>
507 | >({
508 |   onRemoveFile: async () => {},
509 |   onRetry: async () => {},
510 |   fileStatus: {} as FileStatus<unknown, unknown>,
511 |   canRetry: false,
512 |   dropzoneId: "",
513 |   messageId: "",
514 | });
515 | 
516 | const useDropzoneFileListContext = () => {
517 |   return useContext(DropzoneFileListContext);
518 | };
519 | 
520 | interface DropZoneFileListProps
521 |   extends React.OlHTMLAttributes<HTMLOListElement> {}
522 | 
523 | const DropzoneFileList = forwardRef<HTMLOListElement, DropZoneFileListProps>(
524 |   (props, ref) => {
525 |     const context = useDropzoneContext();
526 |     if (!context) {
527 |       throw new Error("DropzoneFileList must be used within a Dropzone");
528 |     }
529 |     return (
530 |       <ol
531 |         ref={ref}
532 |         aria-label="dropzone-file-list"
533 |         {...props}
534 |         className={cn("flex flex-col gap-4", props.className)}
535 |       >
536 |         {props.children}
537 |       </ol>
538 |     );
539 |   },
540 | );
541 | DropzoneFileList.displayName = "DropzoneFileList";
542 | 
543 | interface DropzoneFileListItemProps<TUploadRes, TUploadError>
544 |   extends React.LiHTMLAttributes<HTMLLIElement> {
545 |   file: FileStatus<TUploadRes, TUploadError>;
546 | }
547 | 
548 | const DropzoneFileListItem = forwardRef<
549 |   HTMLLIElement,
550 |   DropzoneFileListItemProps<unknown, unknown>
551 | >(({ className, ...props }, ref) => {
552 |   const fileId = props.file.id;
553 |   const {
554 |     onRemoveFile: cOnRemoveFile,
555 |     onRetry: cOnRetry,
556 |     getFileMessageId: cGetFileMessageId,
557 |     canRetry: cCanRetry,
558 |     inputId: cInputId,
559 |   } = useDropzoneContext();
560 | 
561 |   const onRemoveFile = useCallback(
562 |     () => cOnRemoveFile(fileId),
563 |     [fileId, cOnRemoveFile],
564 |   );
565 |   const onRetry = useCallback(() => cOnRetry(fileId), [fileId, cOnRetry]);
566 |   const messageId = cGetFileMessageId(fileId);
567 |   const isInvalid = props.file.status === "error";
568 |   const canRetry = useMemo(() => cCanRetry(fileId), [fileId, cCanRetry]);
569 |   return (
570 |     <DropzoneFileListContext.Provider
571 |       value={{
572 |         onRemoveFile,
573 |         onRetry,
574 |         fileStatus: props.file,
575 |         canRetry,
576 |         dropzoneId: cInputId,
577 |         messageId,
578 |       }}
579 |     >
580 |       <li
581 |         ref={ref}
582 |         aria-label="dropzone-file-list-item"
583 |         aria-describedby={isInvalid ? messageId : undefined}
584 |         className={cn(
585 |           "flex flex-col justify-center gap-2 rounded-md bg-muted/40 px-4 py-2",
586 |           className,
587 |         )}
588 |       >
589 |         {props.children}
590 |       </li>
591 |     </DropzoneFileListContext.Provider>
592 |   );
593 | });
594 | DropzoneFileListItem.displayName = "DropzoneFileListItem";
595 | 
596 | interface DropzoneFileMessageProps
597 |   extends React.HTMLAttributes<HTMLParagraphElement> {}
598 | 
599 | const DropzoneFileMessage = forwardRef<
600 |   HTMLParagraphElement,
601 |   DropzoneFileMessageProps
602 | >((props, ref) => {
603 |   const { children, ...rest } = props;
604 |   const context = useDropzoneFileListContext();
605 |   if (!context) {
606 |     throw new Error(
607 |       "DropzoneFileMessage must be used within a DropzoneFileListItem",
608 |     );
609 |   }
610 | 
611 |   const body =
612 |     context.fileStatus.status === "error"
613 |       ? String(context.fileStatus.error)
614 |       : children;
615 |   return (
616 |     <p
617 |       ref={ref}
618 |       id={context.messageId}
619 |       {...rest}
620 |       className={cn(
621 |         "h-5 text-[0.8rem] font-medium text-destructive",
622 |         rest.className,
623 |       )}
624 |     >
625 |       {body}
626 |     </p>
627 |   );
628 | });
629 | DropzoneFileMessage.displayName = "DropzoneFileMessage";
630 | interface DropzoneMessageProps
631 |   extends React.HTMLAttributes<HTMLParagraphElement> {}
632 | 
633 | const DropzoneMessage = forwardRef<HTMLParagraphElement, DropzoneMessageProps>(
634 |   (props, ref) => {
635 |     const { children, ...rest } = props;
636 |     const context = useDropzoneContext();
637 |     if (!context) {
638 |       throw new Error("DropzoneRootMessage must be used within a Dropzone");
639 |     }
640 | 
641 |     const body = context.rootError ? String(context.rootError) : children;
642 |     return (
643 |       <p
644 |         ref={ref}
645 |         id={context.rootMessageId}
646 |         {...rest}
647 |         className={cn(
648 |           "h-5 text-[0.8rem] font-medium text-destructive",
649 |           rest.className,
650 |         )}
651 |       >
652 |         {body}
653 |       </p>
654 |     );
655 |   },
656 | );
657 | DropzoneMessage.displayName = "DropzoneMessage";
658 | 
659 | interface DropzoneRemoveFileProps extends ButtonProps {}
660 | 
661 | const DropzoneRemoveFile = forwardRef<
662 |   HTMLButtonElement,
663 |   DropzoneRemoveFileProps
664 | >(({ className, ...props }, ref) => {
665 |   const context = useDropzoneFileListContext();
666 |   if (!context) {
667 |     throw new Error(
668 |       "DropzoneRemoveFile must be used within a DropzoneFileListItem",
669 |     );
670 |   }
671 |   return (
672 |     <Button
673 |       ref={ref}
674 |       onClick={context.onRemoveFile}
675 |       type="button"
676 |       size="icon"
677 |       {...props}
678 |       className={cn(
679 |         "aria-disabled:pointer-events-none aria-disabled:opacity-50",
680 |         className,
681 |       )}
682 |     >
683 |       {props.children}
684 |       <span className="sr-only">Remove file</span>
685 |     </Button>
686 |   );
687 | });
688 | DropzoneRemoveFile.displayName = "DropzoneRemoveFile";
689 | 
690 | interface DropzoneRetryFileProps extends ButtonProps {}
691 | 
692 | const DropzoneRetryFile = forwardRef<HTMLButtonElement, DropzoneRetryFileProps>(
693 |   ({ className, ...props }, ref) => {
694 |     const context = useDropzoneFileListContext();
695 | 
696 |     if (!context) {
697 |       throw new Error(
698 |         "DropzoneRetryFile must be used within a DropzoneFileListItem",
699 |       );
700 |     }
701 | 
702 |     const canRetry = context.canRetry;
703 | 
704 |     return (
705 |       <Button
706 |         ref={ref}
707 |         aria-disabled={!canRetry}
708 |         aria-label="retry"
709 |         onClick={context.onRetry}
710 |         type="button"
711 |         size="icon"
712 |         {...props}
713 |         className={cn(
714 |           "aria-disabled:pointer-events-none aria-disabled:opacity-50",
715 |           className,
716 |         )}
717 |       >
718 |         {props.children}
719 |         <span className="sr-only">Retry</span>
720 |       </Button>
721 |     );
722 |   },
723 | );
724 | DropzoneRetryFile.displayName = "DropzoneRetryFile";
725 | 
726 | interface DropzoneTriggerProps
727 |   extends React.LabelHTMLAttributes<HTMLLabelElement> {}
728 | 
729 | const DropzoneTrigger = forwardRef<HTMLLabelElement, DropzoneTriggerProps>(
730 |   ({ className, children, ...props }, ref) => {
731 |     const context = useDropzoneContext();
732 |     if (!context) {
733 |       throw new Error("DropzoneTrigger must be used within a Dropzone");
734 |     }
735 | 
736 |     const { fileStatuses, getFileMessageId } = context;
737 | 
738 |     const fileMessageIds = useMemo(
739 |       () =>
740 |         fileStatuses
741 |           .filter((file) => file.status === "error")
742 |           .map((file) => getFileMessageId(file.id)),
743 |       [fileStatuses, getFileMessageId],
744 |     );
745 | 
746 |     return (
747 |       <label
748 |         ref={ref}
749 |         {...props}
750 |         className={cn(
751 |           "cursor-pointer rounded-sm bg-secondary px-4 py-2 font-medium ring-offset-background transition-colors focus-within:outline-none hover:bg-secondary/80 has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring has-[input:focus-visible]:ring-offset-2",
752 |           className,
753 |         )}
754 |       >
755 |         {children}
756 |         <input
757 |           {...context.getInputProps({
758 |             style: {
759 |               display: undefined,
760 |             },
761 |             className: "sr-only",
762 |             tabIndex: undefined,
763 |           })}
764 |           aria-describedby={
765 |             context.isInvalid
766 |               ? [context.rootMessageId, ...fileMessageIds].join(" ")
767 |               : undefined
768 |           }
769 |           aria-invalid={context.isInvalid}
770 |         />
771 |       </label>
772 |     );
773 |   },
774 | );
775 | DropzoneTrigger.displayName = "DropzoneTrigger";
776 | 
777 | interface InfiniteProgressProps extends React.HTMLAttributes<HTMLDivElement> {
778 |   status: "pending" | "success" | "error";
779 | }
780 | 
781 | const valueTextMap = {
782 |   pending: "indeterminate",
783 |   success: "100%",
784 |   error: "error",
785 | };
786 | 
787 | const InfiniteProgress = forwardRef<HTMLDivElement, InfiniteProgressProps>(
788 |   ({ className, ...props }, ref) => {
789 |     const done = props.status === "success" || props.status === "error";
790 |     const error = props.status === "error";
791 |     return (
792 |       <div
793 |         ref={ref}
794 |         role="progressbar"
795 |         aria-valuemin={0}
796 |         aria-valuemax={100}
797 |         aria-valuetext={valueTextMap[props.status]}
798 |         {...props}
799 |         className={cn(
800 |           "relative h-2 w-full overflow-hidden rounded-full bg-muted",
801 |           className,
802 |         )}
803 |       >
804 |         <div
805 |           //   TODO: add proper done transition
806 |           className={cn(
807 |             "h-full w-full rounded-full bg-primary",
808 |             done ? "translate-x-0" : "animate-infinite-progress",
809 |             error && "bg-destructive",
810 |           )}
811 |         />
812 |       </div>
813 |     );
814 |   },
815 | );
816 | InfiniteProgress.displayName = "InfiniteProgress";
817 | 
818 | export {
819 |   Dropzone,
820 |   DropZoneArea,
821 |   DropzoneDescription,
822 |   DropzoneFileList,
823 |   DropzoneFileListItem,
824 |   DropzoneFileMessage,
825 |   DropzoneMessage,
826 |   DropzoneRemoveFile,
827 |   DropzoneRetryFile,
828 |   DropzoneTrigger,
829 |   InfiniteProgress,
830 |   useDropzone,
831 | };
832 | 


--------------------------------------------------------------------------------