var Component=(()=>{var N=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var _=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),b=(n,l)=>{for(var F in l)c(n,F,{get:l[F],enumerable:!0})},h=(n,l,F,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of g(l))!x.call(n,s)&&s!==F&&c(n,s,{get:()=>l[s],enumerable:!(o=u(l,s))||o.enumerable});return n};var Z=(n,l,F)=>(F=n!=null?N(D(n)):{},h(l||!n||!n.__esModule?c(F,"default",{value:n,enumerable:!0}):F,n)),T=n=>h(c({},"__esModule",{value:!0}),n);var m=_((j,y)=>{y.exports=_jsx_runtime});var R={};b(R,{default:()=>w,frontmatter:()=>S});var e=Z(m()),S={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 f(n){let l=Object.assign({div:"div",pre:"pre",code:"code",span:"span",h2:"h2",a:"a",h3:"h3",p:"p"},n.components),{ComponentPreview:F,Tabs:o,TabsList:s,TabsTrigger:i,TabsContent:t,Steps:p,Step:a,ComponentSource:d}=l;return F||r("ComponentPreview",!0),d||r("ComponentSource",!0),a||r("Step",!0),p||r("Steps",!0),o||r("Tabs",!0),t||r("TabsContent",!0),s||r("TabsList",!0),i||r("TabsTrigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(F,{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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Text "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"DropZoneDemo"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"dropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setDropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"DropZone onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setDropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Text slot"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"dropped "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Successful drop!"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Text "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"DropZoneDemo"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"dropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setDropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"DropZone onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setDropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Text slot"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"dropped "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Successful drop!"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},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)(o,{defaultValue:"manual",children:[(0,e.jsx)(s,{children:(0,e.jsx)(i,{value:"manual",children:"Manual"})}),(0,e.jsx)(t,{value:"manual",children:(0,e.jsxs)(p,{children:[(0,e.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(d,{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:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZone"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZoneProps "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"_DropZone"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"DropZoneProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"DropZone"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"function"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" _DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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 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:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZone"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZoneProps "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"_DropZone"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"DropZoneProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"DropZone"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"function"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" _DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]})]})})})]}),(0,e.jsx)(a,{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)(F,{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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Text "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"DropZoneDemo"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"dropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setDropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"DropZone onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setDropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Text slot"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"dropped "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Successful drop!"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Text "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"DropZoneDemo"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"dropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setDropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"DropZone onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setDropped"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Text slot"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"dropped "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Successful drop!"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},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)(F,{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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FileDropItem"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FileTrigger"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Text "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Button "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"DropZoneFile"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"files"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setFiles"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">()"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"DropZone"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" files "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"items"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"filter"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"kind "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"file"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"FileDropItem"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"[]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" filenames "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" files"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setFiles"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"filenames"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"join"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'", "'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FileTrigger"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" allowsMultiple"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" onSelect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" @ts-ignore"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" files "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Array"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" filenames "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" files"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setFiles"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"filenames"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"join"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'", "'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Button variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"outline"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Select files"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Text slot"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" display"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"block"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"files "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FileDropItem"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FileTrigger"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Text "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Button "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" DropZone "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"DropZoneFile"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"files"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setFiles"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">()"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"DropZone"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" onDrop"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" files "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"items"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"filter"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"kind "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"file"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"FileDropItem"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"[]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" filenames "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" files"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setFiles"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"filenames"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"join"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'", "'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FileTrigger"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" allowsMultiple"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" onSelect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" @ts-ignore"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" files "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Array"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" filenames "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" files"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setFiles"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"filenames"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"join"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'", "'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Button variant"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"outline"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Select files"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Text slot"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"label"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" display"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"block"'}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"files "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"Drop files here"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "})]})})})]})]})}function z(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(f,n)})):f(n)}var w=z;function r(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(R);})(); ;return Component;