@better-s3/ui 3.1045.0 → 3.1045.1

package/dist/index.js

@@ -1,2 +1,1042 @@
-import {XIcon,CheckCircleIcon,AlertCircleIcon,UploadIcon,LoaderIcon,DownloadIcon,Trash2Icon,CheckCircle2Icon}from'lucide-react';import {formatFileSize,useUploadControls,useDownload,useFetchDownload,useDelete}from'@better-s3/react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {Button}from'@base-ui/react/button';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';import {Tooltip}from'@base-ui/react/tooltip';import {Progress}from'@base-ui/react/progress';import {useRef,useEffect}from'react';import {toast}from'sonner';import {AlertDialog}from'@base-ui/react/alert-dialog';function a(...e){return twMerge(clsx(e))}var Ue=cva("group/button cursor-pointer inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/80",outline:"border-border hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",ghost:"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",destructive:"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",xs:"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-2.5",sm:"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",lg:"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-4",icon:"size-7 [&_svg:not([class*='size-'])]:size-3.5","icon-xs":"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5","icon-sm":"size-6 [&_svg:not([class*='size-'])]:size-3","icon-lg":"size-8 [&_svg:not([class*='size-'])]:size-4"}},defaultVariants:{variant:"default",size:"default"}});function c({className:e,variant:t="default",size:o="default",...r}){return jsx(Button,{"data-slot":"button",className:a(Ue({variant:t,size:o,className:e})),...r})}function B({delay:e=0,...t}){return jsx(Tooltip.Provider,{"data-slot":"tooltip-provider",delay:e,...t})}function S({...e}){return jsx(Tooltip.Root,{"data-slot":"tooltip",...e})}function I({...e}){return jsx(Tooltip.Trigger,{"data-slot":"tooltip-trigger",...e})}function $({className:e,side:t="top",sideOffset:o=4,align:r="center",alignOffset:l=0,children:n,...i}){return jsx(Tooltip.Portal,{children:jsx(Tooltip.Positioner,{align:r,alignOffset:l,side:t,sideOffset:o,className:"isolate z-50",children:jsxs(Tooltip.Popup,{"data-slot":"tooltip-content",className:a("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",e),...i,children:[n,jsx(Tooltip.Arrow,{className:"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-start-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-end-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5"})]})})})}function W({percent:e,size:t=20,strokeWidth:o=2.5}){let r=(t-o)/2,l=2*Math.PI*r,n=l-e/100*l;return jsxs("svg",{width:t,height:t,className:"shrink-0 -rotate-90",children:[jsx("circle",{cx:t/2,cy:t/2,r,fill:"none",stroke:"currentColor",strokeWidth:o,className:"text-muted-foreground/20"}),jsx("circle",{cx:t/2,cy:t/2,r,fill:"none",stroke:"currentColor",strokeWidth:o,strokeDasharray:l,strokeDashoffset:n,strokeLinecap:"round",className:"text-primary transition-[stroke-dashoffset] duration-200"})]})}function O({phase:e,progress:t,error:o,fileInfo:r,onCancel:l}){return e==="idle"?null:e==="uploading"&&r?jsxs("div",{className:"flex w-full items-center gap-1.5 text-xs",children:[jsx(W,{percent:t.percent,size:14,strokeWidth:2}),jsx("span",{className:"max-w-32 min-w-16 truncate sm:max-w-48",children:r.name}),jsxs("span",{className:"shrink-0 text-muted-foreground",children:[formatFileSize(t.loaded)," / ",formatFileSize(r.size)," (",t.percent,"%)"]}),jsx(c,{variant:"ghost",size:"icon",className:"ml-auto size-6 shrink-0",onClick:n=>{n.stopPropagation(),l?.();},children:jsx(XIcon,{className:"size-3.5"})})]}):e==="success"&&r?jsxs("div",{className:"flex items-center gap-1.5 text-xs",children:[jsx(CheckCircleIcon,{className:"size-3.5 shrink-0 text-green-600"}),jsx("span",{className:"[overflow-wrap:anywhere] max-w-32 min-w-16 truncate sm:max-w-48",children:r.name}),jsx("span",{className:"shrink-0 text-muted-foreground",children:formatFileSize(r.size)})]}):e==="error"?jsxs("div",{className:"flex min-w-0 items-start gap-1.5 text-xs",children:[jsx(AlertCircleIcon,{className:"mt-0.5 size-3.5 shrink-0 text-destructive"}),jsx("p",{className:"min-w-0 [overflow-wrap:anywhere] text-destructive",children:o??"Upload failed"})]}):e==="validating"||e==="presigning"?jsx("span",{className:"text-xs text-muted-foreground",children:"Preparing\u2026"}):null}function ne({className:e,children:t,value:o,...r}){return jsxs(Progress.Root,{value:o,"data-slot":"progress",className:a("flex flex-wrap gap-3",e),...r,children:[t,jsx(Me,{children:jsx(Fe,{})})]})}function Me({className:e,...t}){return jsx(Progress.Track,{className:a("relative flex h-1 w-full items-center overflow-x-hidden rounded-md bg-muted",e),"data-slot":"progress-track",...t})}function Fe({className:e,...t}){return jsx(Progress.Indicator,{"data-slot":"progress-indicator",className:a("h-full bg-primary transition-all",e),...t})}function le({className:e,...t}){return jsx(Progress.Label,{className:a("text-xs/relaxed font-medium",e),"data-slot":"progress-label",...t})}function de({className:e,...t}){return jsx(Progress.Value,{className:a("ms-auto text-xs/relaxed text-muted-foreground tabular-nums",e),"data-slot":"progress-value",...t})}function H({phase:e,files:t,totalProgress:o,error:r,onCancel:l}){return e==="idle"?null:e==="uploading"?jsxs("div",{className:"flex w-full flex-col gap-2",children:[jsxs("div",{className:"flex w-full items-center gap-1.5",children:[jsxs(ne,{value:o.percent,className:"flex-1",children:[jsxs(le,{children:[t.filter(n=>n.status==="success").length,"/",t.length," files"]}),jsx(de,{})]}),jsx(c,{variant:"ghost",size:"icon",className:"size-7 shrink-0",onClick:n=>{n.stopPropagation(),l?.();},children:jsx(XIcon,{className:"size-4"})})]}),jsx(ae,{files:t})]}):e==="success"?jsxs("div",{className:"flex w-full flex-col gap-1",children:[jsxs("span",{className:"text-xs text-green-600",children:["All ",t.length," file(s) uploaded"]}),jsx(ae,{files:t})]}):e==="error"?jsxs("div",{className:"flex w-full flex-col gap-1",children:[jsx("span",{className:"text-xs text-destructive",children:r??"Upload failed"}),t.length>0&&jsx(ae,{files:t})]}):e==="validating"?jsx("span",{className:"text-xs text-muted-foreground",children:"Validating\u2026"}):null}function ae({files:e}){return jsx("ul",{className:"flex flex-col gap-1",children:e.map(t=>jsxs("li",{className:"flex flex-col gap-0.5 text-xs",children:[jsxs("div",{className:"flex items-center gap-1.5",children:[t.status==="success"&&jsx(CheckCircleIcon,{className:"size-3.5 shrink-0 text-green-600"}),t.status==="error"&&jsx(AlertCircleIcon,{className:"size-3.5 shrink-0 text-destructive"}),(t.status==="pending"||t.status==="uploading")&&jsx(W,{percent:t.status==="uploading"?t.progress.percent:0,size:14,strokeWidth:2}),jsx("span",{className:"[overflow-wrap:anywhere] max-w-32 min-w-16 truncate sm:max-w-48",children:t.fileName}),t.status==="uploading"?jsxs("span",{className:"shrink-0 text-muted-foreground",children:[formatFileSize(t.progress.loaded)," /"," ",formatFileSize(t.fileSize)," (",t.progress.percent,"%)"]}):jsx("span",{className:"shrink-0 text-muted-foreground",children:formatFileSize(t.fileSize)})]}),t.status==="error"&&t.error&&jsx("span",{className:"truncate [overflow-wrap:anywhere] pl-5 text-destructive",children:t.error})]},t.id))})}var Ee=(e,t=100)=>e.length>t?e.slice(0,t)+"\u2026":e;function G(e,t){let o=useRef(null),r=e.mode==="multi",l=useRef(e.phase);if(l.current!==e.phase&&(l.current=e.phase,t&&(e.phase==="idle"&&o.current&&(toast.dismiss(o.current),o.current=null),e.phase==="success"&&(o.current&&toast.dismiss(o.current),r?toast.success(`${e.files.length} file(s) uploaded`,{description:formatFileSize(e.totalProgress.total)}):e.fileInfo&&toast.success("Upload complete",{description:formatFileSize(e.fileInfo.size)}),o.current=null),e.phase==="error"))){if(o.current&&toast.dismiss(o.current),r&&e.files.length>0){let n=e.files.filter(s=>s.status==="success").length,i=e.files.filter(s=>s.status==="error").length;toast.error("Upload finished with errors",{description:`${n} succeeded, ${i} failed`});}else toast.error("Upload failed",{description:Ee(e.error??"Unknown error")});o.current=null;}useEffect(()=>{if(!t||e.phase!=="uploading")return;let n=o.current??`upload-${Date.now()}`;if(o.current=n,r){let i=e.files.filter(s=>s.status==="success").length;toast.loading(`Uploading\u2026 ${i}/${e.files.length}`,{id:n,description:`${formatFileSize(e.totalProgress.loaded)} / ${formatFileSize(e.totalProgress.total)} (${e.totalProgress.percent}%)`,cancel:{label:"Cancel",onClick:()=>e.cancel()}});}else e.fileInfo&&toast.loading("Uploading\u2026",{id:n,description:`${formatFileSize(e.progress.loaded)} / ${formatFileSize(e.fileInfo.size)} (${e.progress.percent}%)`,cancel:{label:"Cancel",onClick:()=>e.cancel()}});},[t,e.phase,r,e.progress.loaded,e.progress.percent,e.totalProgress.loaded,e.totalProgress.total,e.totalProgress.percent,e.fileInfo,e.files,e.cancel]);}function Xe({className:e,label:t,disabled:o,tooltipText:r,toast:l=true,showStatus:n=true,...i}){let s=useUploadControls(i),d=s.mode==="multi",g=o||s.isUploading;G(s,l);let D=n?d?jsx(H,{phase:s.phase,files:s.files,totalProgress:s.totalProgress,error:s.error,onCancel:s.cancel}):jsx(O,{phase:s.phase,progress:s.progress,error:s.error,fileInfo:s.fileInfo,onCancel:s.cancel}):null;return jsxs("div",{className:a("inline-flex flex-col gap-2",e),children:[jsxs("div",{className:"inline-flex items-center gap-2",children:[jsx("input",{...s.inputProps}),jsx(B,{children:jsxs(S,{children:[jsxs(I,{render:jsx(c,{size:"default",disabled:g,onClick:s.openFilePicker}),children:[jsx(UploadIcon,{"data-icon":"inline-start"}),t??(d?"Upload files":"Upload file")]}),jsx($,{children:r??(d?"Upload files":"Upload file")})]})})]}),D]})}function Qe({className:e,label:t,disabled:o,toast:r=true,showStatus:l=true,...n}){let i=useUploadControls(n),s=i.mode==="multi",d=o||i.isUploading;G(i,r);let g=l?s?jsx(H,{phase:i.phase,files:i.files,totalProgress:i.totalProgress,error:i.error,onCancel:i.cancel}):jsx(O,{phase:i.phase,progress:i.progress,error:i.error,fileInfo:i.fileInfo,onCancel:i.cancel}):null;return jsxs("div",{className:a("flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-6 text-center transition-colors",d?"cursor-not-allowed border-muted-foreground/25":"cursor-pointer border-muted-foreground/25 hover:border-primary/50",e),onClick:d?void 0:i.openFilePicker,...d?{}:i.dropHandlers,children:[jsx("input",{...i.inputProps}),jsx(UploadIcon,{className:a("size-6 text-muted-foreground",d&&"opacity-50")}),jsx("p",{className:a("text-sm text-muted-foreground",d&&"opacity-50"),children:t??(s?"Click or drag & drop files to upload":"Click or drag & drop to upload")}),g&&jsx("div",{className:"w-full text-left",children:g})]})}var tt=(e,t=100)=>e.length>t?e.slice(0,t)+"\u2026":e;function ot({api:e,objectKey:t,fileName:o,label:r,className:l,disabled:n,toast:i=true,showStatus:s=true}){let d=useDownload({api:e,onInitiated:()=>{i&&toast.success("Download started");},onError:(D,U)=>{i&&toast.error("Download failed",{description:tt(U instanceof Error?U.message:"Unknown error")});}}),g=d.phase==="presigning";return jsxs("div",{className:a("inline-flex flex-col gap-1.5",l),children:[jsx(c,{size:"default",variant:"outline",disabled:n||g,onClick:()=>d.download(t,o),children:jsxs("span",{className:"inline-flex items-center gap-1",children:[g?jsx(LoaderIcon,{className:"animate-spin","data-icon":"inline-start"}):jsx(DownloadIcon,{"data-icon":"inline-start"}),r??"Download"]})}),s&&d.phase==="error"&&jsxs("div",{className:"flex min-w-0 items-start gap-1.5 text-xs",children:[jsx(AlertCircleIcon,{className:"mt-0.5 size-3.5 shrink-0 text-destructive"}),jsx("p",{className:"min-w-0 [overflow-wrap:anywhere] text-destructive",children:d.error??"Download failed"})]})]})}var st=(e,t=100)=>e.length>t?e.slice(0,t)+"\u2026":e;function nt({api:e,objectKey:t,fileName:o,fileSize:r,bucket:l,label:n,className:i,fillClassName:s,disabled:d,tooltipText:g="Download file",toast:D=true,showStatus:U=true,beforeDownload:Q,onDownloadStart:Y,onProgress:Z,onSuccess:K,onError:j,onCancel:V}){let x=o??t.split("/").pop()??t,f=useFetchDownload({api:e,bucket:l,beforeDownload:Q,onDownloadStart:Y,onProgress:Z,onSuccess:(v,P)=>{D&&(toast.dismiss(`dl-${t}`),toast.success("Download complete",{description:`${P}${r!=null?` \xB7 ${formatFileSize(r)}`:""}`})),K?.(v,P);},onError:(v,P,te)=>{D&&(toast.dismiss(`dl-${t}`),toast.error("Download failed",{description:st(P instanceof Error?P.message:"Unknown error")})),j?.(v,P,te);},onCancel:v=>{D&&(toast.dismiss(`dl-${t}`),toast.info("Download cancelled",{description:x})),V?.(v);}}),k=f.phase==="downloading"||f.phase==="presigning",ee=()=>{if(k){f.cancel();return}f.download(t,o);};return jsxs("div",{className:a("inline-flex flex-col gap-1.5",i),children:[jsx(B,{children:jsxs(S,{children:[jsxs(I,{render:jsx(c,{size:"default",variant:"outline",disabled:d,className:a("relative min-w-24 overflow-hidden"),onClick:ee}),children:[k&&jsx("span",{className:a("absolute inset-0 bg-primary/15 transition-[width] duration-200",s),style:{width:`${f.progress.percent}%`}}),jsxs("span",{className:"relative z-10 inline-flex items-center gap-1",children:[jsx(DownloadIcon,{"data-icon":"inline-start"}),k?formatFileSize(f.progress.loaded):n??"Download"]})]}),jsx($,{children:k?"Cancel download":g})]})}),U&&f.phase==="error"&&jsxs("div",{className:"flex min-w-0 items-start gap-1.5 text-xs",children:[jsx(AlertCircleIcon,{className:"mt-0.5 size-3.5 shrink-0 text-destructive"}),jsx("p",{className:"min-w-0 [overflow-wrap:anywhere] text-destructive",children:f.error??"Download failed"})]})]})}function me({...e}){return jsx(AlertDialog.Root,{"data-slot":"alert-dialog",...e})}function ge({...e}){return jsx(AlertDialog.Trigger,{"data-slot":"alert-dialog-trigger",...e})}function lt({...e}){return jsx(AlertDialog.Portal,{"data-slot":"alert-dialog-portal",...e})}function dt({className:e,...t}){return jsx(AlertDialog.Backdrop,{"data-slot":"alert-dialog-overlay",className:a("fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",e),...t})}function fe({className:e,size:t="default",...o}){return jsxs(lt,{children:[jsx(dt,{}),jsx(AlertDialog.Popup,{"data-slot":"alert-dialog-content","data-size":t,className:a("group/alert-dialog-content fixed top-1/2 start-1/2 z-50 grid w-full -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-3 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",e),...o})]})}function ve({className:e,...t}){return jsx("div",{"data-slot":"alert-dialog-header",className:a("grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",e),...t})}function xe({className:e,...t}){return jsx("div",{"data-slot":"alert-dialog-footer",className:a("flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",e),...t})}function Pe({className:e,...t}){return jsx("div",{"data-slot":"alert-dialog-media",className:a("mb-2 inline-flex size-8 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4",e),...t})}function he({className:e,...t}){return jsx(AlertDialog.Title,{"data-slot":"alert-dialog-title",className:a("font-heading text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",e),...t})}function be({className:e,...t}){return jsx(AlertDialog.Description,{"data-slot":"alert-dialog-description",className:a("text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",e),...t})}function we({className:e,...t}){return jsx(c,{"data-slot":"alert-dialog-action",className:a(e),...t})}function De({className:e,variant:t="outline",size:o="default",...r}){return jsx(AlertDialog.Close,{"data-slot":"alert-dialog-cancel",className:a(e),render:jsx(c,{variant:t,size:o}),...r})}var vt=(e,t=100)=>e.length>t?e.slice(0,t)+"\u2026":e;function xt({api:e,objectKey:t,fileName:o,fileSize:r,bucket:l,label:n,className:i,disabled:s,tooltipText:d="Delete file",toast:g=true,showStatus:D=true,confirmTitle:U="Delete file?",confirmDescription:Q,beforeDelete:Y,onDeleteStart:Z,onSuccess:K,onError:j}){let V=o??t.split("/").pop()??t,x=useDelete({api:e,bucket:l,beforeDelete:Y,onDeleteStart:Z,onSuccess:v=>{g&&toast.success("File deleted",{description:V}),K?.(v);},onError:(v,P,te)=>{g&&toast.error("Delete failed",{description:vt(P instanceof Error?P.message:"Unknown error")}),j?.(v,P,te);}}),f=x.phase==="deleting",k=s||f,ee=Q??`Are you sure you want to delete "${V}"${r!=null?` (${formatFileSize(r)})`:""}? This action cannot be undone.`;return jsxs("div",{className:a("inline-flex flex-col gap-1.5",i),children:[jsx("div",{className:"inline-flex items-center gap-2",children:jsxs(me,{open:x.phase==="confirming",onOpenChange:v=>{v||x.cancelDelete();},children:[jsx(B,{children:jsxs(S,{children:[jsxs(I,{render:jsx(ge,{disabled:k,onClick:()=>x.requestDelete(t),render:jsx(c,{size:"default",variant:"destructive",disabled:k})}),children:[f?jsx(LoaderIcon,{className:"animate-spin","data-icon":"inline-start"}):jsx(Trash2Icon,{"data-icon":"inline-start"}),n??"Delete"]}),jsx($,{children:d})]})}),jsxs(fe,{children:[jsxs(ve,{children:[jsx(Pe,{children:jsx(Trash2Icon,{})}),jsx(he,{children:U}),jsx(be,{className:"[overflow-wrap:anywhere]",children:ee})]}),jsxs(xe,{children:[jsx(De,{children:"Cancel"}),jsx(we,{variant:"destructive",onClick:()=>x.confirmDelete(),children:"Delete"})]})]})]})}),D&&x.phase==="success"&&jsxs("div",{className:"flex min-w-0 items-center gap-1.5 text-xs",children:[jsx(CheckCircle2Icon,{className:"size-3.5 shrink-0 text-green-600"}),jsxs("p",{className:"min-w-0 [overflow-wrap:anywhere] text-green-600",children:["\u201C",jsx("span",{className:"inline-block max-w-[14ch] truncate align-bottom",children:V}),"\u201D deleted"]})]}),D&&x.phase==="error"&&jsxs("div",{className:"flex min-w-0 items-start gap-1.5 text-xs",children:[jsx(AlertCircleIcon,{className:"mt-0.5 size-3.5 shrink-0 text-destructive"}),jsx("p",{className:"min-w-0 [overflow-wrap:anywhere] text-destructive",children:x.error??"Delete failed"})]})]})}export{xt as DeleteButton,ot as DownloadButton,H as MultiUploadStatus,nt as ProgressDownloadButton,Xe as UploadButton,Qe as UploadDropzone,O as UploadStatus};//# sourceMappingURL=index.js.map
+import { XIcon, CheckCircleIcon, AlertCircleIcon, UploadIcon, LoaderIcon, DownloadIcon, Trash2Icon, CheckCircle2Icon } from 'lucide-react';
+import { formatFileSize, useUploadControls, useDownload, useFetchDownload, useDelete } from '@better-s3/react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import { Progress as Progress$1 } from '@base-ui/react/progress';
+import { useRef, useEffect } from 'react';
+import { toast } from 'sonner';
+import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "group/button cursor-pointer inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-2.5",
+        sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-4",
+        icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
+        "icon-xs": "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
+        "icon-sm": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-lg": "size-8 [&_svg:not([class*='size-'])]:size-4"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function TooltipProvider({
+  delay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+    Tooltip$1.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs(
+        Tooltip$1.Popup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-start-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-end-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
+          ]
+        }
+      )
+    }
+  ) });
+}
+function CircleProgress({
+  percent,
+  size = 20,
+  strokeWidth = 2.5
+}) {
+  const r = (size - strokeWidth) / 2;
+  const c = 2 * Math.PI * r;
+  const offset = c - percent / 100 * c;
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, className: "shrink-0 -rotate-90", children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: size / 2,
+        cy: size / 2,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth,
+        className: "text-muted-foreground/20"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: size / 2,
+        cy: size / 2,
+        r,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeDasharray: c,
+        strokeDashoffset: offset,
+        strokeLinecap: "round",
+        className: "text-primary transition-[stroke-dashoffset] duration-200"
+      }
+    )
+  ] });
+}
+function UploadStatus({
+  phase,
+  progress,
+  error,
+  fileInfo,
+  onCancel
+}) {
+  if (phase === "idle") return null;
+  if (phase === "uploading" && fileInfo) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx(CircleProgress, { percent: progress.percent, size: 14, strokeWidth: 2 }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-32 min-w-16 truncate sm:max-w-48", children: fileInfo.name }),
+      /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-muted-foreground", children: [
+        formatFileSize(progress.loaded),
+        " / ",
+        formatFileSize(fileInfo.size),
+        " (",
+        progress.percent,
+        "%)"
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "ml-auto size-6 shrink-0",
+          onClick: (e) => {
+            e.stopPropagation();
+            onCancel?.();
+          },
+          children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+        }
+      )
+    ] });
+  }
+  if (phase === "success" && fileInfo) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-3.5 shrink-0 text-green-600" }),
+      /* @__PURE__ */ jsx("span", { className: "[overflow-wrap:anywhere] max-w-32 min-w-16 truncate sm:max-w-48", children: fileInfo.name }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: formatFileSize(fileInfo.size) })
+    ] });
+  }
+  if (phase === "error") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0 text-destructive" }),
+      /* @__PURE__ */ jsx("p", { className: "min-w-0 [overflow-wrap:anywhere] text-destructive", children: error ?? "Upload failed" })
+    ] });
+  }
+  if (phase === "validating" || phase === "presigning") {
+    return /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Preparing\u2026" });
+  }
+  return null;
+}
+function Progress({
+  className,
+  children,
+  value,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Progress$1.Root,
+    {
+      value,
+      "data-slot": "progress",
+      className: cn("flex flex-wrap gap-3", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })
+      ]
+    }
+  );
+}
+function ProgressTrack({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Progress$1.Track,
+    {
+      className: cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-md bg-muted",
+        className
+      ),
+      "data-slot": "progress-track",
+      ...props
+    }
+  );
+}
+function ProgressIndicator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Progress$1.Indicator,
+    {
+      "data-slot": "progress-indicator",
+      className: cn("h-full bg-primary transition-all", className),
+      ...props
+    }
+  );
+}
+function ProgressLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Progress$1.Label,
+    {
+      className: cn("text-xs/relaxed font-medium", className),
+      "data-slot": "progress-label",
+      ...props
+    }
+  );
+}
+function ProgressValue({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Progress$1.Value,
+    {
+      className: cn(
+        "ms-auto text-xs/relaxed text-muted-foreground tabular-nums",
+        className
+      ),
+      "data-slot": "progress-value",
+      ...props
+    }
+  );
+}
+function MultiUploadStatus({
+  phase,
+  files,
+  totalProgress,
+  error,
+  onCancel
+}) {
+  if (phase === "idle") return null;
+  if (phase === "uploading") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs(Progress, { value: totalProgress.percent, className: "flex-1", children: [
+          /* @__PURE__ */ jsxs(ProgressLabel, { children: [
+            files.filter((f) => f.status === "success").length,
+            "/",
+            files.length,
+            " files"
+          ] }),
+          /* @__PURE__ */ jsx(ProgressValue, {})
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "size-7 shrink-0",
+            onClick: (e) => {
+              e.stopPropagation();
+              onCancel?.();
+            },
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(FileList, { files })
+    ] });
+  }
+  if (phase === "success") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-green-600", children: [
+        "All ",
+        files.length,
+        " file(s) uploaded"
+      ] }),
+      /* @__PURE__ */ jsx(FileList, { files })
+    ] });
+  }
+  if (phase === "error") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-destructive", children: error ?? "Upload failed" }),
+      files.length > 0 && /* @__PURE__ */ jsx(FileList, { files })
+    ] });
+  }
+  if (phase === "validating") {
+    return /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Validating\u2026" });
+  }
+  return null;
+}
+function FileList({ files }) {
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: files.map((f) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-0.5 text-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      f.status === "success" && /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-3.5 shrink-0 text-green-600" }),
+      f.status === "error" && /* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-3.5 shrink-0 text-destructive" }),
+      (f.status === "pending" || f.status === "uploading") && /* @__PURE__ */ jsx(
+        CircleProgress,
+        {
+          percent: f.status === "uploading" ? f.progress.percent : 0,
+          size: 14,
+          strokeWidth: 2
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "[overflow-wrap:anywhere] max-w-32 min-w-16 truncate sm:max-w-48", children: f.fileName }),
+      f.status === "uploading" ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-muted-foreground", children: [
+        formatFileSize(f.progress.loaded),
+        " /",
+        " ",
+        formatFileSize(f.fileSize),
+        " (",
+        f.progress.percent,
+        "%)"
+      ] }) : /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: formatFileSize(f.fileSize) })
+    ] }),
+    f.status === "error" && f.error && /* @__PURE__ */ jsx("span", { className: "truncate [overflow-wrap:anywhere] pl-5 text-destructive", children: f.error })
+  ] }, f.id)) });
+}
+
+// ../../registry/registry/better-s3-ui/lib/truncate-msg.ts
+function truncateMsg(msg, max = 100) {
+  return msg.length > max ? msg.slice(0, max) + "..." : msg;
+}
+
+// ../../registry/registry/better-s3-ui/hooks/use-upload-toast.ts
+function useUploadToast(ctrl, enabled) {
+  const toastIdRef = useRef(null);
+  const isMulti = ctrl.mode === "multi";
+  const prevPhaseRef = useRef(ctrl.phase);
+  if (prevPhaseRef.current !== ctrl.phase) {
+    prevPhaseRef.current = ctrl.phase;
+    if (enabled) {
+      if (ctrl.phase === "idle" && toastIdRef.current) {
+        toast.dismiss(toastIdRef.current);
+        toastIdRef.current = null;
+      }
+      if (ctrl.phase === "success") {
+        if (toastIdRef.current) toast.dismiss(toastIdRef.current);
+        if (isMulti) {
+          toast.success(`${ctrl.files.length} file(s) uploaded`, {
+            description: formatFileSize(ctrl.totalProgress.total)
+          });
+        } else if (ctrl.fileInfo) {
+          toast.success("Upload complete", {
+            description: formatFileSize(ctrl.fileInfo.size)
+          });
+        }
+        toastIdRef.current = null;
+      }
+      if (ctrl.phase === "error") {
+        if (toastIdRef.current) toast.dismiss(toastIdRef.current);
+        if (isMulti && ctrl.files.length > 0) {
+          const succeeded = ctrl.files.filter(
+            (f) => f.status === "success"
+          ).length;
+          const failed = ctrl.files.filter((f) => f.status === "error").length;
+          toast.error("Upload finished with errors", {
+            description: `${succeeded} succeeded, ${failed} failed`
+          });
+        } else {
+          toast.error("Upload failed", {
+            description: truncateMsg(ctrl.error ?? "Unknown error")
+          });
+        }
+        toastIdRef.current = null;
+      }
+    }
+  }
+  useEffect(() => {
+    if (!enabled || ctrl.phase !== "uploading") return;
+    const id = toastIdRef.current ?? `upload-${Date.now()}`;
+    toastIdRef.current = id;
+    if (isMulti) {
+      const done = ctrl.files.filter((f) => f.status === "success").length;
+      toast.loading(`Uploading... ${done}/${ctrl.files.length}`, {
+        id,
+        description: `${formatFileSize(ctrl.totalProgress.loaded)} / ${formatFileSize(ctrl.totalProgress.total)} (${ctrl.totalProgress.percent}%)`,
+        cancel: { label: "Cancel", onClick: () => ctrl.cancel() }
+      });
+    } else if (ctrl.fileInfo) {
+      toast.loading("Uploading...", {
+        id,
+        description: `${formatFileSize(ctrl.progress.loaded)} / ${formatFileSize(ctrl.fileInfo.size)} (${ctrl.progress.percent}%)`,
+        cancel: { label: "Cancel", onClick: () => ctrl.cancel() }
+      });
+    }
+  }, [
+    enabled,
+    ctrl.phase,
+    isMulti,
+    ctrl.progress.loaded,
+    ctrl.progress.percent,
+    ctrl.totalProgress.loaded,
+    ctrl.totalProgress.total,
+    ctrl.totalProgress.percent,
+    ctrl.fileInfo,
+    ctrl.files,
+    ctrl.cancel
+  ]);
+}
+function UploadButton({
+  className,
+  label,
+  disabled,
+  tooltipText,
+  toast: enableToast = true,
+  showStatus = true,
+  ...options
+}) {
+  const ctrl = useUploadControls(options);
+  const isMulti = ctrl.mode === "multi";
+  const isDisabled = disabled || ctrl.isUploading;
+  useUploadToast(ctrl, enableToast);
+  const status = showStatus ? isMulti ? /* @__PURE__ */ jsx(
+    MultiUploadStatus,
+    {
+      phase: ctrl.phase,
+      files: ctrl.files,
+      totalProgress: ctrl.totalProgress,
+      error: ctrl.error,
+      onCancel: ctrl.cancel
+    }
+  ) : /* @__PURE__ */ jsx(
+    UploadStatus,
+    {
+      phase: ctrl.phase,
+      progress: ctrl.progress,
+      error: ctrl.error,
+      fileInfo: ctrl.fileInfo,
+      onCancel: ctrl.cancel
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("input", { ...ctrl.inputProps }),
+      /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxs(
+          TooltipTrigger,
+          {
+            render: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "default",
+                disabled: isDisabled,
+                onClick: ctrl.openFilePicker
+              }
+            ),
+            children: [
+              /* @__PURE__ */ jsx(UploadIcon, { "data-icon": "inline-start" }),
+              label ?? (isMulti ? "Upload files" : "Upload file")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(TooltipContent, { children: tooltipText ?? (isMulti ? "Upload files" : "Upload file") })
+      ] }) })
+    ] }),
+    status
+  ] });
+}
+function UploadDropzone({
+  className,
+  label,
+  disabled,
+  toast: enableToast = true,
+  showStatus = true,
+  ...options
+}) {
+  const ctrl = useUploadControls(options);
+  const isMulti = ctrl.mode === "multi";
+  const isDisabled = disabled || ctrl.isUploading;
+  useUploadToast(ctrl, enableToast);
+  const status = showStatus ? isMulti ? /* @__PURE__ */ jsx(
+    MultiUploadStatus,
+    {
+      phase: ctrl.phase,
+      files: ctrl.files,
+      totalProgress: ctrl.totalProgress,
+      error: ctrl.error,
+      onCancel: ctrl.cancel
+    }
+  ) : /* @__PURE__ */ jsx(
+    UploadStatus,
+    {
+      phase: ctrl.phase,
+      progress: ctrl.progress,
+      error: ctrl.error,
+      fileInfo: ctrl.fileInfo,
+      onCancel: ctrl.cancel
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-6 text-center transition-colors",
+        isDisabled ? "cursor-not-allowed border-muted-foreground/25" : "cursor-pointer border-muted-foreground/25 hover:border-primary/50",
+        className
+      ),
+      onClick: isDisabled ? void 0 : ctrl.openFilePicker,
+      ...isDisabled ? {} : ctrl.dropHandlers,
+      children: [
+        /* @__PURE__ */ jsx("input", { ...ctrl.inputProps }),
+        /* @__PURE__ */ jsx(
+          UploadIcon,
+          {
+            className: cn(
+              "size-6 text-muted-foreground",
+              isDisabled && "opacity-50"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "text-sm text-muted-foreground",
+              isDisabled && "opacity-50"
+            ),
+            children: label ?? (isMulti ? "Click or drag & drop files to upload" : "Click or drag & drop to upload")
+          }
+        ),
+        status && /* @__PURE__ */ jsx("div", { className: "w-full text-left", children: status })
+      ]
+    }
+  );
+}
+function useDownloadToast({
+  enabled = true,
+  objectKey,
+  fileName,
+  fileSize
+}) {
+  const buildErrorDescription = (error) => truncateMsg(error instanceof Error ? error.message : "Unknown error");
+  const displayName = truncateMsg(
+    fileName ?? objectKey.split("/").pop() ?? objectKey,
+    60
+  );
+  const onInitiated = () => {
+    if (enabled) toast.success("Download started");
+  };
+  const onSuccess = (_key, actualFileName) => {
+    if (!enabled) return;
+    toast.dismiss(`dl-${objectKey}`);
+    const safeFileName = truncateMsg(actualFileName, 60);
+    toast.success("Download complete", {
+      description: `${safeFileName}${fileSize != null ? ` \xB7 ${formatFileSize(fileSize)}` : ""}`
+    });
+  };
+  const onError = (_key, error) => {
+    if (!enabled) return;
+    toast.dismiss(`dl-${objectKey}`);
+    toast.error("Download failed", {
+      description: buildErrorDescription(error)
+    });
+  };
+  const onErrorWithPhase = (_key, error, _phase) => {
+    if (!enabled) return;
+    toast.dismiss(`dl-${objectKey}`);
+    toast.error("Download failed", {
+      description: buildErrorDescription(error)
+    });
+  };
+  const onCancel = (_key) => {
+    if (!enabled) return;
+    toast.dismiss(`dl-${objectKey}`);
+    toast.info("Download cancelled", { description: displayName });
+  };
+  return { onInitiated, onSuccess, onError, onErrorWithPhase, onCancel };
+}
+function DownloadButton({
+  api,
+  objectKey,
+  fileName,
+  label,
+  className,
+  disabled,
+  toast: enableToast = true,
+  showStatus = true
+}) {
+  const toastHandlers = useDownloadToast({
+    enabled: enableToast,
+    objectKey,
+    fileName
+  });
+  const dl = useDownload({
+    api,
+    onInitiated: () => {
+      toastHandlers.onInitiated();
+    },
+    onError: (key, error) => {
+      toastHandlers.onError(key, error);
+    }
+  });
+  const isPending = dl.phase === "presigning";
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "default",
+        variant: "outline",
+        disabled: disabled || isPending,
+        onClick: () => dl.download(objectKey, fileName),
+        children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+          isPending ? /* @__PURE__ */ jsx(LoaderIcon, { className: "animate-spin", "data-icon": "inline-start" }) : /* @__PURE__ */ jsx(DownloadIcon, { "data-icon": "inline-start" }),
+          label ?? "Download"
+        ] })
+      }
+    ),
+    showStatus && dl.phase === "error" && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0 text-destructive" }),
+      /* @__PURE__ */ jsx("p", { className: "min-w-0 [overflow-wrap:anywhere] text-destructive", children: dl.error ?? "Download failed" })
+    ] })
+  ] });
+}
+function ProgressDownloadButton({
+  api,
+  objectKey,
+  fileName,
+  fileSize,
+  bucket,
+  label,
+  className,
+  fillClassName,
+  disabled,
+  tooltipText = "Download file",
+  toast: enableToast = true,
+  showStatus = true,
+  beforeDownload,
+  onDownloadStart,
+  onProgress,
+  onSuccess,
+  onError,
+  onCancel
+}) {
+  const toastHandlers = useDownloadToast({
+    enabled: enableToast,
+    objectKey,
+    fileName,
+    fileSize
+  });
+  const dl = useFetchDownload({
+    api,
+    bucket,
+    beforeDownload,
+    onDownloadStart,
+    onProgress,
+    onSuccess: (key, actualFileName) => {
+      toastHandlers.onSuccess(key, actualFileName);
+      onSuccess?.(key, actualFileName);
+    },
+    onError: (key, error, phase) => {
+      toastHandlers.onErrorWithPhase(key, error, phase);
+      onError?.(key, error, phase);
+    },
+    onCancel: (key) => {
+      toastHandlers.onCancel(key);
+      onCancel?.(key);
+    }
+  });
+  const isDownloading = dl.phase === "downloading" || dl.phase === "presigning";
+  const handleClick = () => {
+    if (isDownloading) {
+      dl.cancel();
+      return;
+    }
+    dl.download(objectKey, fileName);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxs(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "default",
+              variant: "outline",
+              disabled,
+              className: cn("relative min-w-24 overflow-hidden"),
+              onClick: handleClick
+            }
+          ),
+          children: [
+            isDownloading && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "absolute inset-0 bg-primary/15 transition-[width] duration-200",
+                  fillClassName
+                ),
+                style: { width: `${dl.progress.percent}%` }
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "relative z-10 inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(DownloadIcon, { "data-icon": "inline-start" }),
+              isDownloading ? formatFileSize(dl.progress.loaded) : label ?? "Download"
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipContent, { children: isDownloading ? "Cancel download" : tooltipText })
+    ] }) }),
+    showStatus && dl.phase === "error" && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0 text-destructive" }),
+      /* @__PURE__ */ jsx("p", { className: "min-w-0 [overflow-wrap:anywhere] text-destructive", children: dl.error ?? "Download failed" })
+    ] })
+  ] });
+}
+function AlertDialog({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Backdrop,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialog$1.Popup,
+      {
+        "data-slot": "alert-dialog-content",
+        "data-size": size,
+        className: cn(
+          "group/alert-dialog-content fixed top-1/2 start-1/2 z-50 grid w-full -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-3 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogMedia({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-media",
+      className: cn(
+        "mb-2 inline-flex size-8 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn(
+        "font-heading text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn(
+        "text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "alert-dialog-action",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Close,
+    {
+      "data-slot": "alert-dialog-cancel",
+      className: cn(className),
+      render: /* @__PURE__ */ jsx(Button, { variant, size }),
+      ...props
+    }
+  );
+}
+function useDeleteToast({ enabled = true, displayName }) {
+  const safeDisplayName = truncateMsg(displayName, 60);
+  const onSuccess = (_key) => {
+    if (!enabled) return;
+    toast.success("File deleted", { description: safeDisplayName });
+  };
+  const onError = (_key, error) => {
+    if (!enabled) return;
+    toast.error("Delete failed", {
+      description: truncateMsg(
+        error instanceof Error ? error.message : "Unknown error"
+      )
+    });
+  };
+  return { onSuccess, onError };
+}
+function DeleteButton({
+  api,
+  objectKey,
+  fileName,
+  fileSize,
+  bucket,
+  label,
+  className,
+  disabled,
+  tooltipText = "Delete file",
+  toast: enableToast = true,
+  showStatus = true,
+  confirmTitle = "Delete file?",
+  confirmDescription,
+  beforeDelete,
+  onDeleteStart,
+  onSuccess,
+  onError
+}) {
+  const displayName = fileName ?? objectKey.split("/").pop() ?? objectKey;
+  const toastHandlers = useDeleteToast({
+    enabled: enableToast,
+    displayName
+  });
+  const del = useDelete({
+    api,
+    bucket,
+    beforeDelete,
+    onDeleteStart,
+    onSuccess: (key) => {
+      toastHandlers.onSuccess(key);
+      onSuccess?.(key);
+    },
+    onError: (key, error, phase) => {
+      toastHandlers.onError(key, error);
+      onError?.(key, error, phase);
+    }
+  });
+  const isDeleting = del.phase === "deleting";
+  const isDisabled = disabled || isDeleting;
+  const description = confirmDescription ?? `Are you sure you want to delete "${displayName}"${fileSize != null ? ` (${formatFileSize(fileSize)})` : ""}? This action cannot be undone.`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-2", children: /* @__PURE__ */ jsxs(
+      AlertDialog,
+      {
+        open: del.phase === "confirming",
+        onOpenChange: (open) => {
+          if (!open) del.cancelDelete();
+        },
+        children: [
+          /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxs(
+              TooltipTrigger,
+              {
+                render: /* @__PURE__ */ jsx(
+                  AlertDialogTrigger,
+                  {
+                    disabled: isDisabled,
+                    onClick: () => del.requestDelete(objectKey),
+                    render: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "default",
+                        variant: "destructive",
+                        disabled: isDisabled
+                      }
+                    )
+                  }
+                ),
+                children: [
+                  isDeleting ? /* @__PURE__ */ jsx(
+                    LoaderIcon,
+                    {
+                      className: "animate-spin",
+                      "data-icon": "inline-start"
+                    }
+                  ) : /* @__PURE__ */ jsx(Trash2Icon, { "data-icon": "inline-start" }),
+                  label ?? "Delete"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(TooltipContent, { children: tooltipText })
+          ] }) }),
+          /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+            /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+              /* @__PURE__ */ jsx(AlertDialogMedia, { children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
+              /* @__PURE__ */ jsx(AlertDialogTitle, { children: confirmTitle }),
+              /* @__PURE__ */ jsx(AlertDialogDescription, { className: "[overflow-wrap:anywhere]", children: description })
+            ] }),
+            /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+              /* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }),
+              /* @__PURE__ */ jsx(
+                AlertDialogAction,
+                {
+                  variant: "destructive",
+                  onClick: () => del.confirmDelete(),
+                  children: "Delete"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) }),
+    showStatus && del.phase === "success" && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "size-3.5 shrink-0 text-green-600" }),
+      /* @__PURE__ */ jsxs("p", { className: "min-w-0 [overflow-wrap:anywhere] text-green-600", children: [
+        "\u201C",
+        /* @__PURE__ */ jsx("span", { className: "inline-block max-w-[14ch] truncate align-bottom", children: displayName }),
+        "\u201D deleted"
+      ] })
+    ] }),
+    showStatus && del.phase === "error" && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-3.5 shrink-0 text-destructive" }),
+      /* @__PURE__ */ jsx("p", { className: "min-w-0 [overflow-wrap:anywhere] text-destructive", children: del.error ?? "Delete failed" })
+    ] })
+  ] });
+}
+
+export { DeleteButton, DownloadButton, MultiUploadStatus, ProgressDownloadButton, UploadButton, UploadDropzone, UploadStatus };
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map