hipstersmoothie.com
A design system in a box.
hip-ui.tngl.io/docs/introduction
1import{t as e}from"./jsx-runtime-D-oznMWL.js";import{f as t}from"./button-B3FtKFjE.js";import{t as n}from"./PropDocs-CM9cNaM3.js";import{n as r,t as i}from"./file-drop-zone-DBLr82w0.js";import{t as a}from"./Example-DfDcphuv.js";var o=t(`camera`,[[`path`,{d:`M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z`,key:`18u6gg`}],[`circle`,{cx:`12`,cy:`13`,r:`3`,key:`1vg3eu`}]]),s=e();function c(){return(0,s.jsx)(r,{onDrop:e=>console.log(`Files dropped:`,e),children:`Drop files here or click to upload`})}c.slug=`/examples/file-drop-zone/basic`;function l(){return(0,s.jsxs)(r,{onAddFiles:e=>{console.log(`Files added:`,e)},children:[(0,s.jsx)(o,{}),(0,s.jsx)(i,{})]})}l.slug=`/examples/file-drop-zone/default-trigger`;var u=[{depth:2,value:`Installation`,id:`installation`},{depth:2,value:`Features`,id:`features`,children:[{depth:3,value:`Default Trigger`,id:`default-trigger`}]},{depth:2,value:`Props`,id:`props`},{depth:2,value:`Related Components`,id:`related-components`}];function d(e){let t={a:`a`,code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,span:`span`,ul:`ul`,...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{src:c}),`
2`,(0,s.jsx)(t.h2,{id:`installation`,children:`Installation`}),`
3`,(0,s.jsx)(t.p,{children:`Run the following command to add the file drop zone component to your project.`}),`
4`,(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(t.pre,{className:`shiki shiki-themes github-light github-dark`,style:{backgroundColor:`light-dark(#fff, #24292e)`,"--shiki-light-bg":`#fff`,"--shiki-dark-bg":`#24292e`,color:`light-dark(#24292e, #e1e4e8)`,"--shiki-light":`#24292e`,"--shiki-dark":`#e1e4e8`},tabIndex:`0`,children:(0,s.jsx)(t.code,{className:`language-bash`,children:(0,s.jsxs)(t.span,{className:`line`,children:[(0,s.jsx)(t.span,{style:{color:`light-dark(#6F42C1, #B392F0)`,"--shiki-light":`#6F42C1`,"--shiki-dark":`#B392F0`},children:`pnpm`}),(0,s.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` hip`}),(0,s.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` install`}),(0,s.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` file-drop-zone`})]})})})}),`
5`,(0,s.jsx)(t.h2,{id:`features`,children:`Features`}),`
6`,(0,s.jsx)(t.h3,{id:`default-trigger`,children:`Default Trigger`}),`
7`,(0,s.jsxs)(t.p,{children:[`Use `,(0,s.jsx)(t.code,{children:`FileDropDefaultTrigger`}),` to make the entire drop zone area clickable. The trigger button is positioned absolutely to cover the entire drop zone.`]}),`
8`,(0,s.jsx)(a,{src:l}),`
9`,(0,s.jsx)(t.h2,{id:`props`,children:`Props`}),`
10`,(0,s.jsxs)(t.p,{children:[`This component is built using the `,(0,s.jsx)(t.a,{href:`https://react-spectrum.adobe.com/react-aria/DropZone.html`,children:`React Aria DropZone`}),` and `,(0,s.jsx)(t.a,{href:`https://react-spectrum.adobe.com/react-spectrum/FileTrigger.html#filetrigger`,children:`React Aria FileTrigger`}),`.`]}),`
11`,(0,s.jsx)(n,{components:[`FileDropZone`]}),`
12`,(0,s.jsx)(t.h2,{id:`related-components`,children:`Related Components`}),`
13`,(0,s.jsxs)(t.ul,{children:[`
14`,(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:`/docs/components/buttons/button`,children:`Button`}),` - For file upload triggers`]}),`
15`,(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:`/docs/components/content/card`,children:`Card`}),` - For containing file drop zones`]}),`
16`,(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:`/docs/components/status/badge`,children:`Badge`}),` - For file upload status indicators`]}),`
17`,(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:`/docs/components/content/typography`,children:`Typography`}),` - For file upload instructions`]}),`
18`]})]})}function f(e={}){let{wrapper:t}=e.components||{};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}export{f as default,u as toc};