var Component=(()=>{var C=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var g=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),A=(n,l)=>{for(var s in l)a(n,s,{get:l[s],enumerable:!0})},D=(n,l,s,c)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of u(l))!N.call(n,r)&&r!==s&&a(n,r,{get:()=>l[r],enumerable:!(c=f(l,r))||c.enumerable});return n};var x=(n,l,s)=>(s=n!=null?C(B(n)):{},D(l||!n||!n.__esModule?a(s,"default",{value:n,enumerable:!0}):s,n)),_=n=>D(a({},"__esModule",{value:!0}),n);var F=g((z,y)=>{y.exports=_jsx_runtime});var T={};A(T,{default:()=>E,frontmatter:()=>Z});var e=x(F()),Z={title:"Dropzone",description:"A drop zone is an area into which one or multiple objects can be dragged and dropped.",featured:!0,component:!0,links:{doc:"https://react-spectrum.adobe.com/react-aria/DropZone.html"}};function m(n){let l=Object.assign({div:"div",pre:"pre",code:"code",span:"span",h2:"h2",a:"a",p:"p",strong:"strong",h3:"h3"},n.components),{ComponentPreview:s,Tabs:c,TabsList:r,TabsTrigger:i,TabsContent:t,Steps:d,Step:p,ComponentSource:h}=l;return s||o("ComponentPreview",!0),h||o("ComponentSource",!0),p||o("Step",!0),d||o("Steps",!0),c||o("Tabs",!0),t||o("TabsContent",!0),r||o("TabsList",!0),i||o("TabsTrigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(s,{name:"dropzone-demo",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react" import { Text } from "react-aria-components" import { DropZone } from "@/components/ui/dropzone" export function DropZoneDemo() { let [dropped, setDropped] = React.useState(false) return ( setDropped(true)}> {dropped ? "Successful drop!" : "Drop files here"} ) } `,__src__:"registry/default/example/dropzone/dropzone-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Text } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-aria-components"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { DropZone } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/dropzone"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"DropZoneDemo"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" [dropped, setDropped] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"DropZone"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setDropped"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Text"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"dropped "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Successful drop!"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react" import { Text } from "react-aria-components" import { DropZone } from "@/components/ui/dropzone" export function DropZoneDemo() { let [dropped, setDropped] = React.useState(false) return ( setDropped(true)}> {dropped ? "Successful drop!" : "Drop files here"} ) } `,__src__:"registry/new-york/example/dropzone/dropzone-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Text } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-aria-components"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { DropZone } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/dropzone"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"DropZoneDemo"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" [dropped, setDropped] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"DropZone"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setDropped"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Text"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"dropped "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Successful drop!"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(c,{defaultValue:"cli",children:[(0,e.jsxs)(r,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Copy & Paste"})]}),(0,e.jsxs)(t,{value:"cli",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @sly-cli/sly add jolly-ui dropzone `,__npmCommand__:`npx @sly-cli/sly add jolly-ui dropzone `,__yarnCommand__:`npx @sly-cli/sly add jolly-ui dropzone `,__pnpmCommand__:`pnpm dlx @sly-cli/sly add jolly-ui dropzone `,__bunCommand__:`bunx --bun @sly-cli/sly add jolly-ui dropzone `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"@sly-cli/sly"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"add"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"jolly-ui"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"dropzone"})]})})})}),(0,e.jsx)(l.p,{children:(0,e.jsx)(l.strong,{children:"Note: Only the default style can be installed via CLI at the moment"})})]}),(0,e.jsx)(t,{value:"manual",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(p,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(h,{name:"dropzone",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import { DropZone, DropZoneProps } from "react-aria-components" import { cn } from "@/lib/utils" const _DropZone = ({ className, ...props }: DropZoneProps) => ( cn( "flex h-[150px] w-[300px] flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm data-[drop-target]:border-solid data-[drop-target]:border-primary data-[drop-target]:bg-accent", typeof className === "function" ? className(values) : className ) } {...props} /> ) export { _DropZone as DropZone } `,__src__:"registry/default/ui/dropzone.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { DropZone, DropZoneProps } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-aria-components"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/lib/utils"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"_DropZone"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"DropZoneProps"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"DropZone"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex h-[150px] w-[300px] flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm data-[drop-target]:border-solid data-[drop-target]:border-primary data-[drop-target]:bg-accent"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" className "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"function"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(values) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" className"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { _DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" DropZone }"})]})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import { DropZone, DropZoneProps } from "react-aria-components" import { cn } from "@/lib/utils" const _DropZone = ({ className, ...props }: DropZoneProps) => ( cn( "flex h-[150px] w-[300px] flex-col items-center justify-center rounded-md border border-dashed text-sm data-[drop-target]:border-solid data-[drop-target]:border-primary data-[drop-target]:bg-accent", typeof className === "function" ? className(values) : className ) } {...props} /> ) export { _DropZone as DropZone } `,__src__:"registry/new-york/ui/dropzone.tsx",__style__:"new-york",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { DropZone, DropZoneProps } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-aria-components"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/lib/utils"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"_DropZone"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"DropZoneProps"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"DropZone"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex h-[150px] w-[300px] flex-col items-center justify-center rounded-md border border-dashed text-sm data-[drop-target]:border-solid data-[drop-target]:border-primary data-[drop-target]:bg-accent"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" className "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"function"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(values) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" className"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { _DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" DropZone }"})]})]})})})]}),(0,e.jsx)(p,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsxs)(l.h3,{id:"basic",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#basic",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Basic"]}),` `,(0,e.jsxs)(s,{name:"dropzone-demo",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react" import { Text } from "react-aria-components" import { DropZone } from "@/components/ui/dropzone" export function DropZoneDemo() { let [dropped, setDropped] = React.useState(false) return ( setDropped(true)}> {dropped ? "Successful drop!" : "Drop files here"} ) } `,__src__:"registry/default/example/dropzone/dropzone-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Text } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-aria-components"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { DropZone } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/dropzone"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"DropZoneDemo"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" [dropped, setDropped] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"DropZone"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setDropped"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Text"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"dropped "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Successful drop!"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react" import { Text } from "react-aria-components" import { DropZone } from "@/components/ui/dropzone" export function DropZoneDemo() { let [dropped, setDropped] = React.useState(false) return ( setDropped(true)}> {dropped ? "Successful drop!" : "Drop files here"} ) } `,__src__:"registry/new-york/example/dropzone/dropzone-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Text } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-aria-components"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { DropZone } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/dropzone"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"DropZoneDemo"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" [dropped, setDropped] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"DropZone"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setDropped"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Text"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"dropped "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Successful drop!"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "})]})})})]}),` `,(0,e.jsxs)(l.h3,{id:"file",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#file",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"File"]}),` `,(0,e.jsxs)(l.p,{children:["To allow the selection of files from the user's device, pass ",(0,e.jsx)(l.a,{href:"../../../docs/components/file-trigger",children:"FileTrigger"})," as a child of DropZone."]}),` `,(0,e.jsxs)(s,{name:"dropzone-file",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react" import { FileDropItem, FileTrigger, Text } from "react-aria-components" import { Button } from "@/components/ui/button" import { DropZone } from "@/components/ui/dropzone" export function DropZoneFile() { let [files, setFiles] = React.useState() return ( { let files = e.items.filter( (file) => file.kind === "file" ) as FileDropItem[] let filenames = files.map((file) => file.name) setFiles(filenames.join(", ")) }} > { // @ts-ignore let files = Array.from(e) let filenames = files.map((file) => file.name) setFiles(filenames.join(", ")) }} > {files || "Drop files here"} ) } `,__src__:"registry/default/example/dropzone/dropzone-file.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { FileDropItem, FileTrigger, Text } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-aria-components"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { DropZone } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/dropzone"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"DropZoneFile"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" [files, setFiles] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">()"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"DropZone"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" files "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" e.items."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"filter"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" file.kind "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"file"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"FileDropItem"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"[]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" filenames "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" files."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" file.name)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setFiles"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(filenames."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"join"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'", "'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"))"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FileTrigger"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"allowsMultiple"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onSelect"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// @ts-ignore"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" files "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Array."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(e)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" filenames "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" files."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" file.name)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setFiles"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(filenames."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"join"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'", "'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"))"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Select files"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Text"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ display: "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"block"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"files "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react" import { FileDropItem, FileTrigger, Text } from "react-aria-components" import { Button } from "@/components/ui/button" import { DropZone } from "@/components/ui/dropzone" export function DropZoneFile() { let [files, setFiles] = React.useState() return ( { let files = e.items.filter( (file) => file.kind === "file" ) as FileDropItem[] let filenames = files.map((file) => file.name) setFiles(filenames.join(", ")) }} > { // @ts-ignore let files = Array.from(e) let filenames = files.map((file) => file.name) setFiles(filenames.join(", ")) }} > {files || "Drop files here"} ) } `,__src__:"registry/new-york/example/dropzone/dropzone-file.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { FileDropItem, FileTrigger, Text } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react-aria-components"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { DropZone } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/dropzone"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"DropZoneFile"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" [files, setFiles] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" React."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">()"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"DropZone"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" files "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" e.items."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"filter"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" file.kind "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"file"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"FileDropItem"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"[]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" filenames "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" files."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" file.name)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setFiles"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(filenames."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"join"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'", "'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"))"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FileTrigger"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"allowsMultiple"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onSelect"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"// @ts-ignore"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" files "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Array."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(e)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" filenames "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" files."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" file.name)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setFiles"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(filenames."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"join"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'", "'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"))"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Select files"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Text"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"slot"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"{ display: "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"block"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"files "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "})]})})})]})]})}function b(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(m,n)})):m(n)}var E=b;function o(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return _(T);})(); ;return Component;