tembro 2.0.5 → 2.1.0

package/dist/components/ui/tooltip/index.js

@@ -1,25 +1,46 @@
 import { cn as e } from "../../../lib/utils.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Tooltip as i } from "@base-ui/react/tooltip";
 //#region src/components/ui/tooltip/index.tsx
-var r = {
-	top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
-	bottom: "left-1/2 top-full mt-2 -translate-x-1/2",
-	left: "right-full top-1/2 mr-2 -translate-y-1/2",
-	right: "left-full top-1/2 ml-2 -translate-y-1/2"
-};
-function i({ content: i, side: a = "top", disabled: o = !1, className: s, children: c, ...l }) {
-	return /* @__PURE__ */ n("span", {
-		"data-slot": "tooltip",
-		className: e("group/tooltip relative inline-flex", s),
-		...l,
-		children: [c, !o && /* @__PURE__ */ t("span", {
-			"data-slot": "tooltip-content",
-			role: "tooltip",
-			className: e("pointer-events-none absolute z-50 hidden max-w-64 whitespace-nowrap rounded-xl border border-border/75 bg-popover/98 px-2.5 py-1.5 text-[11px] font-medium text-popover-foreground shadow-[0_16px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] backdrop-blur group-hover/tooltip:block group-focus-within/tooltip:block", r[a]),
-			children: i
-		})]
+function a(e) {
+	return typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(a).join("") : t.isValidElement(e) ? a(e.props.children) : "";
+}
+function o({ content: o, side: s = "top", align: c = "center", sideOffset: l = 8, alignOffset: u = 0, collisionPadding: d = 8, delay: f = 500, closeDelay: p = 0, disabled: m = !1, className: h, children: g, ..._ }) {
+	let v = t.isValidElement(g) ? g : /* @__PURE__ */ n("span", {
+		className: "inline-flex",
+		children: g
+	}), y = a(o), b = !m && y.length > 0 && !a(g).includes(y);
+	return /* @__PURE__ */ r(i.Root, {
+		disabled: m,
+		children: [/* @__PURE__ */ r(i.Trigger, {
+			"data-slot": "tooltip-trigger",
+			delay: f,
+			closeDelay: p,
+			disabled: m,
+			render: /* @__PURE__ */ n("span", {
+				"data-slot": "tooltip",
+				className: e("inline-flex", h),
+				..._
+			}),
+			children: [v, b ? /* @__PURE__ */ n("span", {
+				className: "sr-only",
+				children: o
+			}) : null]
+		}), /* @__PURE__ */ n(i.Portal, { children: /* @__PURE__ */ n(i.Positioner, {
+			className: "isolate z-50",
+			side: s,
+			align: c,
+			sideOffset: l,
+			alignOffset: u,
+			collisionPadding: d,
+			children: /* @__PURE__ */ n(i.Popup, {
+				"data-slot": "tooltip-content",
+				className: "z-50 max-w-64 origin-(--transform-origin) rounded-[var(--radius-lg)] border border-border/75 bg-popover/98 px-2.5 py-1.5 text-[11px] font-medium leading-4 text-popover-foreground shadow-[0_16px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] outline-hidden backdrop-blur duration-100 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",
+				children: o
+			})
+		}) })]
 	});
 }
 //#endregion
-export { i as Tooltip };
+export { o as Tooltip };

package/dist/components/upload/file-upload.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e){if(e===0)return`0 B`;let t=[`B`,`KB`,`MB`,`GB`],n=Math.min(Math.floor(Math.log(e)/Math.log(1024)),t.length-1),r=e/1024**n;return`${r.toFixed(r>=10||n===0?0:1)} ${t[n]}`}function s(e){return e?.split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean)??[]}function c(e,t){let n=s(t);if(n.length===0)return!0;let r=e.name.toLowerCase(),i=e.type.toLowerCase();return n.some(e=>e.startsWith(`.`)?r.endsWith(e):e.endsWith(`/*`)?i.startsWith(e.slice(0,-1)):i===e)}function l(e){return`${e.name}-${e.size}-${e.lastModified}`}function u(e,t){return typeof e==`number`?e:e?.[l(t)]??e?.[t.name]}function d(e,t,n){let r=n?.[e],i={...t,reason:e};if(typeof r==`function`)return r(i);if(typeof r==`string`)return r;switch(e){case`max-files`:return`Maximum ${t.maxFiles} file${t.maxFiles===1?``:`s`} allowed.`;case`max-size`:return`File is larger than ${o(t.maxSize??0)}.`;case`type`:return t.accept?`File type is not allowed. Expected: ${t.accept}.`:`File type is not allowed.`}}function f({currentFiles:e,incomingFiles:t,accept:n,maxFiles:r,maxSize:i,appendFiles:a,rejectionMessages:o}){let s=[],l=[],u=a?e:[],f=r??(a?void 0:t.length);for(let e of t){if(f!==void 0&&u.length+s.length>=f){l.push({file:e,reason:`max-files`,message:d(`max-files`,{file:e,maxFiles:f,maxSize:i,accept:n},o)});continue}if(i!==void 0&&e.size>i){l.push({file:e,reason:`max-size`,message:d(`max-size`,{file:e,maxFiles:f,maxSize:i,accept:n},o)});continue}if(!c(e,n)){l.push({file:e,reason:`type`,message:d(`type`,{file:e,maxFiles:f,maxSize:i,accept:n},o)});continue}s.push(e)}return{accepted:s,rejected:l,nextFiles:a?[...e,...s]:s}}function p({file:e,progress:r,remove:s,removeLabel:c=`Remove file`}){return(0,a.jsxs)(`div`,{className:`flex min-w-0 items-center gap-3`,children:[(0,a.jsx)(`span`,{className:`flex size-9 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/90 shadow-sm`,children:(0,a.jsx)(i.FileIcon,{className:`size-4 text-muted-foreground`})}),(0,a.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,a.jsx)(`div`,{className:`truncate text-sm font-medium text-foreground`,children:e.name}),(0,a.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:o(e.size)}),typeof r==`number`&&(0,a.jsx)(`div`,{className:`mt-2 h-1.5 overflow-hidden rounded-full bg-muted/80`,children:(0,a.jsx)(`div`,{className:`h-full rounded-full bg-primary shadow-[0_8px_18px_color-mix(in_oklch,var(--primary),transparent_82%)]`,style:{width:`${Math.min(Math.max(r,0),100)}%`}})})]}),(0,a.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`icon-xs`,className:`rounded-full`,onClick:e=>{t.stopInteractivePropagation(e),s()},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:[(0,a.jsx)(i.XIcon,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:c})]})]})}function m({files:e=[],onFilesChange:s,rejectedFiles:c,onRejectedFilesChange:l,buttonLabel:d=`Choose files`,dropzoneLabel:m=`Drop files here or click to upload`,dropzoneDescription:h,dragActiveLabel:g=`Drop files to upload`,helperText:_,clearLabel:v=`Clear all`,removeLabel:ee=`Remove file`,dropzoneAriaLabel:y,rejectionMessages:b,maxFiles:x,maxSize:S,appendFiles:C=!0,showFileList:w=!0,showClearButton:T=!0,loading:te=!1,progress:ne,renderFile:re,renderRejectedFile:ie,renderActions:ae,className:oe,inputClassName:E,dropzoneClassName:D,fileListClassName:O,fileItemClassName:k,rejectedListClassName:A,accept:j,multiple:M,disabled:N,onDragEnter:P,onDragLeave:F,onDragOver:I,onDrop:L,...R}){let z=r.useRef(null),B=r.useRef(0),[V,H]=r.useState(!1),[U,W]=r.useState([]),G=c??U,K=N||te,q=M??x!==1;r.useEffect(()=>{K&&(B.current=0,H(!1))},[K]);let J=r.useCallback(e=>{c===void 0&&W(e),l?.(e)},[l,c]),Y=r.useCallback(()=>{K||z.current?.click()},[K]),X=r.useCallback(()=>{s?.([]),J([])},[s,J]),Z=r.useCallback(t=>{let n=f({currentFiles:e,incomingFiles:t,accept:j,maxFiles:x,maxSize:S,appendFiles:C,rejectionMessages:b});s?.(n.nextFiles),J(n.rejected)},[j,C,e,x,S,s,b,J]),se=r.useCallback(t=>{s?.(e.filter((e,n)=>n!==t))},[e,s]),ce=e=>{K||(Z(Array.from(e.target.files??[])),e.target.value=``)},Q=e=>K?(e.preventDefault(),t.stopInteractivePropagation(e),!0):!1,le=e=>{P?.(e),!(e.defaultPrevented||Q(e))&&(e.preventDefault(),B.current+=1,H(!0))},$=e=>{F?.(e),!(e.defaultPrevented||Q(e))&&(B.current=Math.max(B.current-1,0),B.current===0&&H(!1))},ue=e=>{I?.(e),!(e.defaultPrevented||Q(e))&&e.preventDefault()},de=e=>{L?.(e),!(e.defaultPrevented||Q(e))&&(e.preventDefault(),B.current=0,H(!1),Z(Array.from(e.dataTransfer.files??[])))};return(0,a.jsxs)(`div`,{"data-slot":`file-upload`,className:t.cn(`grid gap-3`,oe),children:[(0,a.jsx)(`input`,{ref:z,type:`file`,className:t.cn(`sr-only`,E),disabled:K,accept:j,multiple:q,onChange:ce,...R}),(0,a.jsxs)(`div`,{"data-slot":`file-upload-dropzone`,"data-dragging":V||void 0,"data-disabled":K||void 0,role:`button`,"aria-disabled":K||void 0,"aria-label":y,tabIndex:K?-1:0,className:t.cn(`grid cursor-pointer gap-4 rounded-[var(--radius-2xl)] border border-dashed border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_12%),var(--card))] p-6 text-center shadow-sm ring-1 ring-foreground/5 outline-none transition-[background-color,border-color,box-shadow,transform] hover:-translate-y-px hover:border-primary/35 hover:bg-muted/25 hover:shadow-[0_14px_36px_rgba(15,23,42,0.08)] focus-visible:ring-2 focus-visible:ring-ring data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/6 data-[dragging=true]:shadow-[0_18px_50px_color-mix(in_oklch,var(--primary),transparent_84%)] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60`,D),onClick:Y,onKeyDown:e=>{K||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),Y())},onDragEnter:le,onDragLeave:$,onDragOver:ue,onDrop:de,children:[(0,a.jsx)(`div`,{className:`mx-auto flex size-13 items-center justify-center rounded-full border border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_14%),var(--background))] text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.12),0_10px_24px_rgba(15,23,42,0.06)]`,children:(0,a.jsx)(i.UploadCloudIcon,{className:`size-5`})}),(0,a.jsxs)(`div`,{className:`grid gap-1`,children:[(0,a.jsx)(`div`,{className:`text-sm font-semibold text-foreground`,children:V?g:m}),h&&(0,a.jsx)(`div`,{className:`text-sm leading-6 text-muted-foreground`,children:h}),(j||S||x||_)&&(0,a.jsx)(`div`,{className:`text-xs leading-5 text-muted-foreground`,children:_??[j?`Types: ${j}`:null,S?`Max size: ${o(S)}`:null,x?`Max files: ${x}`:null].filter(Boolean).join(` • `)})]}),ae?.({openFileDialog:Y,clearFiles:X,files:e})??(0,a.jsxs)(`div`,{className:`flex justify-center gap-2`,children:[(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,disabled:K,onClick:e=>{t.stopInteractivePropagation(e),Y()},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:d}),T&&e.length>0&&(0,a.jsx)(n.Button,{type:`button`,variant:`ghost`,size:`sm`,disabled:K,onClick:e=>{t.stopInteractivePropagation(e),X()},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:v})]})]}),w&&e.length>0&&(0,a.jsx)(`div`,{"data-slot":`file-upload-list`,className:t.cn(`grid gap-2`,O),children:e.map((e,n)=>{let r={file:e,index:n,progress:u(ne,e),remove:()=>se(n),removeLabel:ee};return(0,a.jsx)(`div`,{"data-slot":`file-upload-item`,className:t.cn(`rounded-[min(var(--radius-xl),18px)] border border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_10%),var(--card))] p-3.5 shadow-sm ring-1 ring-foreground/5`,k),children:re?.(r)??p(r)},`${e.name}-${e.lastModified}-${n}`)})}),G.length>0&&(0,a.jsx)(`div`,{"data-slot":`file-upload-rejected-list`,className:t.cn(`grid gap-2`,A),children:G.map((e,t)=>(0,a.jsx)(`div`,{className:`rounded-[min(var(--radius-lg),12px)] border border-destructive/22 bg-destructive/8 px-3 py-2.5 text-xs leading-5 text-destructive shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]`,children:ie?.({rejectedFile:e,index:t})??(0,a.jsxs)(`span`,{children:[e.file.name,`: `,e.message]})},`${e.file.name}-${t}`))})]})}exports.FileUpload=m,exports.fileMatchesAccept=c,exports.formatBytes=o,exports.getFileKey=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e){if(e===0)return`0 B`;let t=[`B`,`KB`,`MB`,`GB`],n=Math.min(Math.floor(Math.log(e)/Math.log(1024)),t.length-1),r=e/1024**n;return`${r.toFixed(r>=10||n===0?0:1)} ${t[n]}`}function s(e){return e?.split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean)??[]}function c(e,t){let n=s(t);if(n.length===0)return!0;let r=e.name.toLowerCase(),i=e.type.toLowerCase();return n.some(e=>e.startsWith(`.`)?r.endsWith(e):e.endsWith(`/*`)?i.startsWith(e.slice(0,-1)):i===e)}function l(e){return`${e.name}-${e.size}-${e.lastModified}`}function u(e,t){return typeof e==`number`?e:e?.[l(t)]??e?.[t.name]}function d(e,t){return typeof e==`string`?e:e?.[l(t)]??e?.[t.name]??`idle`}function f(e,t,n){let r=n?.[e],i={...t,reason:e};if(typeof r==`function`)return r(i);if(typeof r==`string`)return r;switch(e){case`max-files`:return`Maximum ${t.maxFiles} file${t.maxFiles===1?``:`s`} allowed.`;case`max-size`:return`File is larger than ${o(t.maxSize??0)}.`;case`type`:return t.accept?`File type is not allowed. Expected: ${t.accept}.`:`File type is not allowed.`}}function p({currentFiles:e,incomingFiles:t,accept:n,maxFiles:r,maxSize:i,appendFiles:a,rejectionMessages:o,validateFile:s}){let l=[],u=[],d=a?e:[],p=r??(a?void 0:t.length);for(let e of t){if(p!==void 0&&d.length+l.length>=p){u.push({file:e,reason:`max-files`,message:f(`max-files`,{file:e,maxFiles:p,maxSize:i,accept:n},o)});continue}if(i!==void 0&&e.size>i){u.push({file:e,reason:`max-size`,message:f(`max-size`,{file:e,maxFiles:p,maxSize:i,accept:n},o)});continue}if(!c(e,n)){u.push({file:e,reason:`type`,message:f(`type`,{file:e,maxFiles:p,maxSize:i,accept:n},o)});continue}let t=s?.(e);if(typeof t==`string`&&t){u.push({file:e,reason:`type`,message:t});continue}l.push(e)}return{accepted:l,rejected:u,nextFiles:a?[...e,...l]:l}}function m({file:e,progress:r,status:s,remove:c,retry:l,removeLabel:u=`Remove file`}){return(0,a.jsxs)(`div`,{className:`flex min-w-0 items-center gap-3`,children:[(0,a.jsx)(`span`,{className:`flex size-9 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/90 shadow-sm`,children:(0,a.jsx)(i.FileIcon,{className:`size-4 text-muted-foreground`})}),(0,a.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(`div`,{className:`truncate text-sm font-medium text-foreground`,children:e.name}),(0,a.jsx)(`span`,{className:t.cn(`rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em]`,s===`uploading`&&`bg-primary/10 text-primary`,s===`success`&&`bg-emerald-500/10 text-emerald-600 dark:text-emerald-400`,s===`error`&&`bg-destructive/10 text-destructive`,s===`idle`&&`bg-muted text-muted-foreground`),children:s})]}),(0,a.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:o(e.size)}),typeof r==`number`&&(0,a.jsx)(`div`,{className:`mt-2 h-1.5 overflow-hidden rounded-full bg-muted/80`,children:(0,a.jsx)(`div`,{className:`h-full rounded-full bg-primary shadow-[0_8px_18px_color-mix(in_oklch,var(--primary),transparent_82%)]`,style:{width:`${Math.min(Math.max(r,0),100)}%`}})})]}),s===`error`&&l?(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,className:`rounded-full`,onClick:l,children:`Retry`}):null,(0,a.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`icon-xs`,className:`rounded-full`,onClick:e=>{t.stopInteractivePropagation(e),c()},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:[(0,a.jsx)(i.XIcon,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:u})]})]})}function h({files:e=[],onFilesChange:s,rejectedFiles:c,onRejectedFilesChange:l,buttonLabel:f=`Choose files`,dropzoneLabel:h=`Drop files here or click to upload`,dropzoneDescription:g,dragActiveLabel:_=`Drop files to upload`,helperText:v,clearLabel:ee=`Clear all`,removeLabel:te=`Remove file`,dropzoneAriaLabel:ne,rejectionMessages:y,maxFiles:b,maxSize:x,appendFiles:S=!0,showFileList:C=!0,showClearButton:re=!0,loading:ie=!1,progress:w,status:T,validateFile:E,onRetryFile:D,fileTriggerLabel:O=`Open file picker`,renderFile:ae,renderRejectedFile:oe,renderActions:se,className:ce,inputClassName:k,dropzoneClassName:A,fileListClassName:j,fileItemClassName:M,rejectedListClassName:N,accept:P,multiple:F,disabled:I,onDragEnter:L,onDragLeave:R,onDragOver:z,onDrop:B,...V}){let H=r.useRef(null),U=r.useRef(0),[W,G]=r.useState(!1),[le,ue]=r.useState([]),K=c??le,q=I||ie,de=F??b!==1;r.useEffect(()=>{q&&(U.current=0,G(!1))},[q]);let J=r.useCallback(e=>{c===void 0&&ue(e),l?.(e)},[l,c]),Y=r.useCallback(()=>{q||H.current?.click()},[q]),X=r.useCallback(()=>{s?.([]),J([])},[s,J]),Z=r.useCallback(t=>{let n=p({currentFiles:e,incomingFiles:t,accept:P,maxFiles:b,maxSize:x,appendFiles:S,rejectionMessages:y,validateFile:E});s?.(n.nextFiles),J(n.rejected)},[P,S,e,b,x,s,y,J,E]),fe=r.useCallback(t=>{s?.(e.filter((e,n)=>n!==t))},[e,s]),Q=e=>{q||(Z(Array.from(e.target.files??[])),e.target.value=``)},$=e=>q?(e.preventDefault(),t.stopInteractivePropagation(e),!0):!1,pe=e=>{L?.(e),!(e.defaultPrevented||$(e))&&(e.preventDefault(),U.current+=1,G(!0))},me=e=>{R?.(e),!(e.defaultPrevented||$(e))&&(U.current=Math.max(U.current-1,0),U.current===0&&G(!1))},he=e=>{z?.(e),!(e.defaultPrevented||$(e))&&e.preventDefault()},ge=e=>{B?.(e),!(e.defaultPrevented||$(e))&&(e.preventDefault(),U.current=0,G(!1),Z(Array.from(e.dataTransfer.files??[])))};return(0,a.jsxs)(`div`,{"data-slot":`file-upload`,className:t.cn(`grid gap-3`,ce),children:[(0,a.jsx)(`input`,{ref:H,type:`file`,className:t.cn(`sr-only`,k),disabled:q,accept:P,multiple:de,onChange:Q,...V}),(0,a.jsxs)(`div`,{"data-slot":`file-upload-dropzone`,"data-dragging":W||void 0,"data-disabled":q||void 0,role:`button`,"aria-disabled":q||void 0,"aria-label":ne??O,tabIndex:q?-1:0,className:t.cn(`grid cursor-pointer gap-4 rounded-[var(--radius-2xl)] border border-dashed border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_12%),var(--card))] p-6 text-center shadow-sm ring-1 ring-foreground/5 outline-none transition-[background-color,border-color,box-shadow,transform] hover:-translate-y-px hover:border-primary/35 hover:bg-muted/25 hover:shadow-[0_14px_36px_rgba(15,23,42,0.08)] focus-visible:ring-2 focus-visible:ring-ring data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/6 data-[dragging=true]:shadow-[0_18px_50px_color-mix(in_oklch,var(--primary),transparent_84%)] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60`,A),onClick:Y,onKeyDown:e=>{q||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),Y())},onDragEnter:pe,onDragLeave:me,onDragOver:he,onDrop:ge,children:[(0,a.jsx)(`div`,{className:`mx-auto flex size-13 items-center justify-center rounded-full border border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_14%),var(--background))] text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.12),0_10px_24px_rgba(15,23,42,0.06)]`,children:(0,a.jsx)(i.UploadCloudIcon,{className:`size-5`})}),(0,a.jsxs)(`div`,{className:`grid gap-1`,children:[(0,a.jsx)(`div`,{className:`text-sm font-semibold text-foreground`,children:W?_:h}),g&&(0,a.jsx)(`div`,{className:`text-sm leading-6 text-muted-foreground`,children:g}),(P||x||b||v)&&(0,a.jsx)(`div`,{className:`text-xs leading-5 text-muted-foreground`,children:v??[P?`Types: ${P}`:null,x?`Max size: ${o(x)}`:null,b?`Max files: ${b}`:null].filter(Boolean).join(` • `)})]}),se?.({openFileDialog:Y,clearFiles:X,files:e})??(0,a.jsxs)(`div`,{className:`flex justify-center gap-2`,children:[(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,disabled:q,"aria-label":typeof f==`string`?f:O,onClick:e=>{t.stopInteractivePropagation(e),Y()},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:f}),re&&e.length>0&&(0,a.jsx)(n.Button,{type:`button`,variant:`ghost`,size:`sm`,disabled:q,onClick:e=>{t.stopInteractivePropagation(e),X()},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:ee})]})]}),C&&e.length>0&&(0,a.jsx)(`div`,{"data-slot":`file-upload-list`,className:t.cn(`grid gap-2`,j),children:e.map((e,n)=>{let r={file:e,index:n,progress:u(w,e),status:d(T,e),remove:()=>fe(n),retry:D?()=>D(e,n):void 0,removeLabel:te};return(0,a.jsx)(`div`,{"data-slot":`file-upload-item`,"data-status":r.status,className:t.cn(`rounded-[min(var(--radius-xl),18px)] border border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_10%),var(--card))] p-3.5 shadow-sm ring-1 ring-foreground/5`,M),children:ae?.(r)??m(r)},`${e.name}-${e.lastModified}-${n}`)})}),K.length>0&&(0,a.jsx)(`div`,{"data-slot":`file-upload-rejected-list`,className:t.cn(`grid gap-2`,N),children:K.map((e,t)=>(0,a.jsx)(`div`,{className:`rounded-[min(var(--radius-lg),12px)] border border-destructive/22 bg-destructive/8 px-3 py-2.5 text-xs leading-5 text-destructive shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]`,children:oe?.({rejectedFile:e,index:t})??(0,a.jsxs)(`span`,{children:[e.file.name,`: `,e.message]})},`${e.file.name}-${t}`))})]})}exports.FileUpload=h,exports.fileMatchesAccept=c,exports.formatBytes=o,exports.getFileKey=l;

package/dist/components/upload/file-upload.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 export type FileUploadRejectReason = "max-files" | "max-size" | "type";
+export type FileUploadItemStatus = "idle" | "uploading" | "success" | "error";
 export type FileUploadRejectedFile = {
     file: File;
     reason: FileUploadRejectReason;
@@ -17,7 +18,9 @@ export type FileUploadRenderFileState = {
     file: File;
     index: number;
     progress?: number;
+    status: FileUploadItemStatus;
     remove: () => void;
+    retry?: () => void;
     removeLabel?: string;
 };
 export type FileUploadRenderRejectedFileState = {
@@ -50,6 +53,10 @@ export type FileUploadProps = NativeFileInputProps & {
     showClearButton?: boolean;
     loading?: boolean;
     progress?: number | Record<string, number>;
+    status?: FileUploadItemStatus | Record<string, FileUploadItemStatus>;
+    validateFile?: (file: File) => string | null | Promise<string | null>;
+    onRetryFile?: (file: File, index: number) => void;
+    fileTriggerLabel?: string;
     renderFile?: (state: FileUploadRenderFileState) => React.ReactNode;
     renderRejectedFile?: (state: FileUploadRenderRejectedFileState) => React.ReactNode;
     renderActions?: (state: {
@@ -67,5 +74,5 @@ export type FileUploadProps = NativeFileInputProps & {
 declare function formatBytes(bytes: number): string;
 declare function fileMatchesAccept(file: File, accept?: string): boolean;
 declare function getFileKey(file: File): string;
-declare function FileUpload({ files, onFilesChange, rejectedFiles, onRejectedFilesChange, buttonLabel, dropzoneLabel, dropzoneDescription, dragActiveLabel, helperText, clearLabel, removeLabel, dropzoneAriaLabel, rejectionMessages, maxFiles, maxSize, appendFiles, showFileList, showClearButton, loading, progress, renderFile, renderRejectedFile, renderActions, className, inputClassName, dropzoneClassName, fileListClassName, fileItemClassName, rejectedListClassName, accept, multiple, disabled, onDragEnter, onDragLeave, onDragOver, onDrop, ...props }: FileUploadProps): React.JSX.Element;
+declare function FileUpload({ files, onFilesChange, rejectedFiles, onRejectedFilesChange, buttonLabel, dropzoneLabel, dropzoneDescription, dragActiveLabel, helperText, clearLabel, removeLabel, dropzoneAriaLabel, rejectionMessages, maxFiles, maxSize, appendFiles, showFileList, showClearButton, loading, progress, status, validateFile, onRetryFile, fileTriggerLabel, renderFile, renderRejectedFile, renderActions, className, inputClassName, dropzoneClassName, fileListClassName, fileItemClassName, rejectedListClassName, accept, multiple, disabled, onDragEnter, onDragLeave, onDragOver, onDrop, ...props }: FileUploadProps): React.JSX.Element;
 export { FileUpload, fileMatchesAccept, formatBytes, getFileKey };

package/dist/components/upload/file-upload.js

@@ -29,6 +29,9 @@ function f(e) {
 function p(e, t) {
 	return typeof e == "number" ? e : e?.[f(t)] ?? e?.[t.name];
 }
+function ee(e, t) {
+	return typeof e == "string" ? e : e?.[f(t)] ?? e?.[t.name] ?? "idle";
+}
 function m(e, t, n) {
 	let r = n?.[e], i = {
 		...t,
@@ -42,16 +45,16 @@ function m(e, t, n) {
 		case "type": return t.accept ? `File type is not allowed. Expected: ${t.accept}.` : "File type is not allowed.";
 	}
 }
-function ee({ currentFiles: e, incomingFiles: t, accept: n, maxFiles: r, maxSize: i, appendFiles: a, rejectionMessages: o }) {
-	let s = [], c = [], l = a ? e : [], u = r ?? (a ? void 0 : t.length);
+function te({ currentFiles: e, incomingFiles: t, accept: n, maxFiles: r, maxSize: i, appendFiles: a, rejectionMessages: o, validateFile: s }) {
+	let c = [], l = [], u = a ? e : [], f = r ?? (a ? void 0 : t.length);
 	for (let e of t) {
-		if (u !== void 0 && l.length + s.length >= u) {
-			c.push({
+		if (f !== void 0 && u.length + c.length >= f) {
+			l.push({
 				file: e,
 				reason: "max-files",
 				message: m("max-files", {
 					file: e,
-					maxFiles: u,
+					maxFiles: f,
 					maxSize: i,
 					accept: n
 				}, o)
@@ -59,12 +62,12 @@ function ee({ currentFiles: e, incomingFiles: t, accept: n, maxFiles: r, maxSize
 			continue;
 		}
 		if (i !== void 0 && e.size > i) {
-			c.push({
+			l.push({
 				file: e,
 				reason: "max-size",
 				message: m("max-size", {
 					file: e,
-					maxFiles: u,
+					maxFiles: f,
 					maxSize: i,
 					accept: n
 				}, o)
@@ -72,27 +75,36 @@ function ee({ currentFiles: e, incomingFiles: t, accept: n, maxFiles: r, maxSize
 			continue;
 		}
 		if (!d(e, n)) {
-			c.push({
+			l.push({
 				file: e,
 				reason: "type",
 				message: m("type", {
 					file: e,
-					maxFiles: u,
+					maxFiles: f,
 					maxSize: i,
 					accept: n
 				}, o)
 			});
 			continue;
 		}
-		s.push(e);
+		let t = s?.(e);
+		if (typeof t == "string" && t) {
+			l.push({
+				file: e,
+				reason: "type",
+				message: t
+			});
+			continue;
+		}
+		c.push(e);
 	}
 	return {
-		accepted: s,
-		rejected: c,
-		nextFiles: a ? [...e, ...s] : s
+		accepted: c,
+		rejected: l,
+		nextFiles: a ? [...e, ...c] : c
 	};
 }
-function h({ file: e, progress: r, remove: a, removeLabel: u = "Remove file" }) {
+function h({ file: r, progress: a, status: u, remove: d, retry: f, removeLabel: p = "Remove file" }) {
 	return /* @__PURE__ */ c("div", {
 		className: "flex min-w-0 items-center gap-3",
 		children: [
@@ -103,116 +115,132 @@ function h({ file: e, progress: r, remove: a, removeLabel: u = "Remove file" })
 			/* @__PURE__ */ c("div", {
 				className: "min-w-0 flex-1",
 				children: [
-					/* @__PURE__ */ s("div", {
-						className: "truncate text-sm font-medium text-foreground",
-						children: e.name
+					/* @__PURE__ */ c("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ s("div", {
+							className: "truncate text-sm font-medium text-foreground",
+							children: r.name
+						}), /* @__PURE__ */ s("span", {
+							className: e("rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em]", u === "uploading" && "bg-primary/10 text-primary", u === "success" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", u === "error" && "bg-destructive/10 text-destructive", u === "idle" && "bg-muted text-muted-foreground"),
+							children: u
+						})]
 					}),
 					/* @__PURE__ */ s("div", {
 						className: "text-xs text-muted-foreground",
-						children: l(e.size)
+						children: l(r.size)
 					}),
-					typeof r == "number" && /* @__PURE__ */ s("div", {
+					typeof a == "number" && /* @__PURE__ */ s("div", {
 						className: "mt-2 h-1.5 overflow-hidden rounded-full bg-muted/80",
 						children: /* @__PURE__ */ s("div", {
 							className: "h-full rounded-full bg-primary shadow-[0_8px_18px_color-mix(in_oklch,var(--primary),transparent_82%)]",
-							style: { width: `${Math.min(Math.max(r, 0), 100)}%` }
+							style: { width: `${Math.min(Math.max(a, 0), 100)}%` }
 						})
 					})
 				]
 			}),
+			u === "error" && f ? /* @__PURE__ */ s(n, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				className: "rounded-full",
+				onClick: f,
+				children: "Retry"
+			}) : null,
 			/* @__PURE__ */ c(n, {
 				type: "button",
 				variant: "ghost",
 				size: "icon-xs",
 				className: "rounded-full",
 				onClick: (e) => {
-					t(e), a();
+					t(e), d();
 				},
 				onMouseDown: t,
 				onDoubleClick: t,
 				children: [/* @__PURE__ */ s(o, {}), /* @__PURE__ */ s("span", {
 					className: "sr-only",
-					children: u
+					children: p
 				})]
 			})
 		]
 	});
 }
-function g({ files: i = [], onFilesChange: o, rejectedFiles: u, onRejectedFilesChange: d, buttonLabel: f = "Choose files", dropzoneLabel: m = "Drop files here or click to upload", dropzoneDescription: g, dragActiveLabel: te = "Drop files to upload", helperText: _, clearLabel: ne = "Clear all", removeLabel: re = "Remove file", dropzoneAriaLabel: ie, rejectionMessages: v, maxFiles: y, maxSize: b, appendFiles: x = !0, showFileList: S = !0, showClearButton: C = !0, loading: w = !1, progress: T, renderFile: ae, renderRejectedFile: oe, renderActions: E, className: D, inputClassName: O, dropzoneClassName: k, fileListClassName: A, fileItemClassName: j, rejectedListClassName: M, accept: N, multiple: P, disabled: F, onDragEnter: I, onDragLeave: L, onDragOver: R, onDrop: z, ...B }) {
-	let V = r.useRef(null), H = r.useRef(0), [U, W] = r.useState(!1), [G, K] = r.useState([]), q = u ?? G, J = F || w, se = P ?? y !== 1;
+function g({ files: i = [], onFilesChange: o, rejectedFiles: u, onRejectedFilesChange: d, buttonLabel: f = "Choose files", dropzoneLabel: m = "Drop files here or click to upload", dropzoneDescription: g, dragActiveLabel: _ = "Drop files to upload", helperText: v, clearLabel: ne = "Clear all", removeLabel: re = "Remove file", dropzoneAriaLabel: ie, rejectionMessages: y, maxFiles: b, maxSize: x, appendFiles: S = !0, showFileList: ae = !0, showClearButton: oe = !0, loading: se = !1, progress: ce, status: le, validateFile: C, onRetryFile: w, fileTriggerLabel: T = "Open file picker", renderFile: ue, renderRejectedFile: E, renderActions: D, className: O, inputClassName: k, dropzoneClassName: A, fileListClassName: j, fileItemClassName: M, rejectedListClassName: N, accept: P, multiple: F, disabled: I, onDragEnter: L, onDragLeave: R, onDragOver: z, onDrop: B, ...V }) {
+	let H = r.useRef(null), U = r.useRef(0), [W, G] = r.useState(!1), [de, fe] = r.useState([]), K = u ?? de, q = I || se, pe = F ?? b !== 1;
 	r.useEffect(() => {
-		J && (H.current = 0, W(!1));
-	}, [J]);
-	let Y = r.useCallback((e) => {
-		u === void 0 && K(e), d?.(e);
-	}, [d, u]), X = r.useCallback(() => {
-		J || V.current?.click();
-	}, [J]), Z = r.useCallback(() => {
-		o?.([]), Y([]);
-	}, [o, Y]), Q = r.useCallback((e) => {
-		let t = ee({
+		q && (U.current = 0, G(!1));
+	}, [q]);
+	let J = r.useCallback((e) => {
+		u === void 0 && fe(e), d?.(e);
+	}, [d, u]), Y = r.useCallback(() => {
+		q || H.current?.click();
+	}, [q]), X = r.useCallback(() => {
+		o?.([]), J([]);
+	}, [o, J]), Z = r.useCallback((e) => {
+		let t = te({
 			currentFiles: i,
 			incomingFiles: e,
-			accept: N,
-			maxFiles: y,
-			maxSize: b,
-			appendFiles: x,
-			rejectionMessages: v
+			accept: P,
+			maxFiles: b,
+			maxSize: x,
+			appendFiles: S,
+			rejectionMessages: y,
+			validateFile: C
 		});
-		o?.(t.nextFiles), Y(t.rejected);
+		o?.(t.nextFiles), J(t.rejected);
 	}, [
-		N,
-		x,
+		P,
+		S,
 		i,
-		y,
 		b,
+		x,
 		o,
-		v,
-		Y
-	]), ce = r.useCallback((e) => {
+		y,
+		J,
+		C
+	]), me = r.useCallback((e) => {
 		o?.(i.filter((t, n) => n !== e));
-	}, [i, o]), le = (e) => {
-		J || (Q(Array.from(e.target.files ?? [])), e.target.value = "");
-	}, $ = (e) => J ? (e.preventDefault(), t(e), !0) : !1, ue = (e) => {
-		I?.(e), !(e.defaultPrevented || $(e)) && (e.preventDefault(), H.current += 1, W(!0));
-	}, de = (e) => {
-		L?.(e), !(e.defaultPrevented || $(e)) && (H.current = Math.max(H.current - 1, 0), H.current === 0 && W(!1));
-	}, fe = (e) => {
-		R?.(e), !(e.defaultPrevented || $(e)) && e.preventDefault();
-	}, pe = (e) => {
-		z?.(e), !(e.defaultPrevented || $(e)) && (e.preventDefault(), H.current = 0, W(!1), Q(Array.from(e.dataTransfer.files ?? [])));
+	}, [i, o]), he = (e) => {
+		q || (Z(Array.from(e.target.files ?? [])), e.target.value = "");
+	}, Q = (e) => q ? (e.preventDefault(), t(e), !0) : !1, ge = (e) => {
+		L?.(e), !(e.defaultPrevented || Q(e)) && (e.preventDefault(), U.current += 1, G(!0));
+	}, $ = (e) => {
+		R?.(e), !(e.defaultPrevented || Q(e)) && (U.current = Math.max(U.current - 1, 0), U.current === 0 && G(!1));
+	}, _e = (e) => {
+		z?.(e), !(e.defaultPrevented || Q(e)) && e.preventDefault();
+	}, ve = (e) => {
+		B?.(e), !(e.defaultPrevented || Q(e)) && (e.preventDefault(), U.current = 0, G(!1), Z(Array.from(e.dataTransfer.files ?? [])));
 	};
 	return /* @__PURE__ */ c("div", {
 		"data-slot": "file-upload",
-		className: e("grid gap-3", D),
+		className: e("grid gap-3", O),
 		children: [
 			/* @__PURE__ */ s("input", {
-				ref: V,
+				ref: H,
 				type: "file",
-				className: e("sr-only", O),
-				disabled: J,
-				accept: N,
-				multiple: se,
-				onChange: le,
-				...B
+				className: e("sr-only", k),
+				disabled: q,
+				accept: P,
+				multiple: pe,
+				onChange: he,
+				...V
 			}),
 			/* @__PURE__ */ c("div", {
 				"data-slot": "file-upload-dropzone",
-				"data-dragging": U || void 0,
-				"data-disabled": J || void 0,
+				"data-dragging": W || void 0,
+				"data-disabled": q || void 0,
 				role: "button",
-				"aria-disabled": J || void 0,
-				"aria-label": ie,
-				tabIndex: J ? -1 : 0,
-				className: e("grid cursor-pointer gap-4 rounded-[var(--radius-2xl)] border border-dashed border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_12%),var(--card))] p-6 text-center shadow-sm ring-1 ring-foreground/5 outline-none transition-[background-color,border-color,box-shadow,transform] hover:-translate-y-px hover:border-primary/35 hover:bg-muted/25 hover:shadow-[0_14px_36px_rgba(15,23,42,0.08)] focus-visible:ring-2 focus-visible:ring-ring data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/6 data-[dragging=true]:shadow-[0_18px_50px_color-mix(in_oklch,var(--primary),transparent_84%)] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60", k),
-				onClick: X,
+				"aria-disabled": q || void 0,
+				"aria-label": ie ?? T,
+				tabIndex: q ? -1 : 0,
+				className: e("grid cursor-pointer gap-4 rounded-[var(--radius-2xl)] border border-dashed border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_12%),var(--card))] p-6 text-center shadow-sm ring-1 ring-foreground/5 outline-none transition-[background-color,border-color,box-shadow,transform] hover:-translate-y-px hover:border-primary/35 hover:bg-muted/25 hover:shadow-[0_14px_36px_rgba(15,23,42,0.08)] focus-visible:ring-2 focus-visible:ring-ring data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/6 data-[dragging=true]:shadow-[0_18px_50px_color-mix(in_oklch,var(--primary),transparent_84%)] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60", A),
+				onClick: Y,
 				onKeyDown: (e) => {
-					J || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), X());
+					q || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), Y());
 				},
-				onDragEnter: ue,
-				onDragLeave: de,
-				onDragOver: fe,
-				onDrop: pe,
+				onDragEnter: ge,
+				onDragLeave: $,
+				onDragOver: _e,
+				onDrop: ve,
 				children: [
 					/* @__PURE__ */ s("div", {
 						className: "mx-auto flex size-13 items-center justify-center rounded-full border border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_14%),var(--background))] text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.12),0_10px_24px_rgba(15,23,42,0.06)]",
@@ -223,25 +251,25 @@ function g({ files: i = [], onFilesChange: o, rejectedFiles: u, onRejectedFilesC
 						children: [
 							/* @__PURE__ */ s("div", {
 								className: "text-sm font-semibold text-foreground",
-								children: U ? te : m
+								children: W ? _ : m
 							}),
 							g && /* @__PURE__ */ s("div", {
 								className: "text-sm leading-6 text-muted-foreground",
 								children: g
 							}),
-							(N || b || y || _) && /* @__PURE__ */ s("div", {
+							(P || x || b || v) && /* @__PURE__ */ s("div", {
 								className: "text-xs leading-5 text-muted-foreground",
-								children: _ ?? [
-									N ? `Types: ${N}` : null,
-									b ? `Max size: ${l(b)}` : null,
-									y ? `Max files: ${y}` : null
+								children: v ?? [
+									P ? `Types: ${P}` : null,
+									x ? `Max size: ${l(x)}` : null,
+									b ? `Max files: ${b}` : null
 								].filter(Boolean).join(" • ")
 							})
 						]
 					}),
-					E?.({
-						openFileDialog: X,
-						clearFiles: Z,
+					D?.({
+						openFileDialog: Y,
+						clearFiles: X,
 						files: i
 					}) ?? /* @__PURE__ */ c("div", {
 						className: "flex justify-center gap-2",
@@ -249,20 +277,21 @@ function g({ files: i = [], onFilesChange: o, rejectedFiles: u, onRejectedFilesC
 							type: "button",
 							variant: "outline",
 							size: "sm",
-							disabled: J,
+							disabled: q,
+							"aria-label": typeof f == "string" ? f : T,
 							onClick: (e) => {
-								t(e), X();
+								t(e), Y();
 							},
 							onMouseDown: t,
 							onDoubleClick: t,
 							children: f
-						}), C && i.length > 0 && /* @__PURE__ */ s(n, {
+						}), oe && i.length > 0 && /* @__PURE__ */ s(n, {
 							type: "button",
 							variant: "ghost",
 							size: "sm",
-							disabled: J,
+							disabled: q,
 							onClick: (e) => {
-								t(e), Z();
+								t(e), X();
 							},
 							onMouseDown: t,
 							onDoubleClick: t,
@@ -271,30 +300,33 @@ function g({ files: i = [], onFilesChange: o, rejectedFiles: u, onRejectedFilesC
 					})
 				]
 			}),
-			S && i.length > 0 && /* @__PURE__ */ s("div", {
+			ae && i.length > 0 && /* @__PURE__ */ s("div", {
 				"data-slot": "file-upload-list",
-				className: e("grid gap-2", A),
+				className: e("grid gap-2", j),
 				children: i.map((t, n) => {
 					let r = {
 						file: t,
 						index: n,
-						progress: p(T, t),
-						remove: () => ce(n),
+						progress: p(ce, t),
+						status: ee(le, t),
+						remove: () => me(n),
+						retry: w ? () => w(t, n) : void 0,
 						removeLabel: re
 					};
 					return /* @__PURE__ */ s("div", {
 						"data-slot": "file-upload-item",
-						className: e("rounded-[min(var(--radius-xl),18px)] border border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_10%),var(--card))] p-3.5 shadow-sm ring-1 ring-foreground/5", j),
-						children: ae?.(r) ?? h(r)
+						"data-status": r.status,
+						className: e("rounded-[min(var(--radius-xl),18px)] border border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_10%),var(--card))] p-3.5 shadow-sm ring-1 ring-foreground/5", M),
+						children: ue?.(r) ?? h(r)
 					}, `${t.name}-${t.lastModified}-${n}`);
 				})
 			}),
-			q.length > 0 && /* @__PURE__ */ s("div", {
+			K.length > 0 && /* @__PURE__ */ s("div", {
 				"data-slot": "file-upload-rejected-list",
-				className: e("grid gap-2", M),
-				children: q.map((e, t) => /* @__PURE__ */ s("div", {
+				className: e("grid gap-2", N),
+				children: K.map((e, t) => /* @__PURE__ */ s("div", {
 					className: "rounded-[min(var(--radius-lg),12px)] border border-destructive/22 bg-destructive/8 px-3 py-2.5 text-xs leading-5 text-destructive shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]",
-					children: oe?.({
+					children: E?.({
 						rejectedFile: e,
 						index: t
 					}) ?? /* @__PURE__ */ c("span", { children: [

package/dist/components/upload/image-upload.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("./file-upload.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s(e,t=!0){let[n,a]=i.useState({});return i.useEffect(()=>{if(!t){a({});return}let n=e.filter(e=>e.type.startsWith(`image/`)).map(e=>[r.getFileKey(e),URL.createObjectURL(e)]);return a(Object.fromEntries(n)),()=>{n.forEach(([,e])=>URL.revokeObjectURL(e))}},[t,e]),n}function c({file:e,previewUrl:i,progress:s,remove:c,previewClassName:l,imageClassName:u}){return(0,o.jsxs)(`div`,{className:`flex min-w-0 items-center gap-3`,children:[(0,o.jsx)(`div`,{className:t.cn(`flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-[min(var(--radius-xl),16px)] border border-border/75 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]`,l),children:i?(0,o.jsx)(`img`,{src:i,alt:e.name,className:t.cn(`size-full object-cover`,u)}):(0,o.jsx)(a.ImageIcon,{className:`size-5`})}),(0,o.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,o.jsx)(`div`,{className:`truncate text-sm font-medium text-foreground`,children:e.name}),(0,o.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:r.formatBytes(e.size)}),typeof s==`number`&&(0,o.jsx)(`div`,{className:`mt-2 h-1.5 overflow-hidden rounded-full bg-muted/80`,children:(0,o.jsx)(`div`,{className:`h-full rounded-full bg-primary shadow-[0_8px_18px_color-mix(in_oklch,var(--primary),transparent_82%)]`,style:{width:`${Math.min(Math.max(s,0),100)}%`}})})]}),(0,o.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`icon-xs`,className:`rounded-full`,onClick:e=>{t.stopInteractivePropagation(e),c()},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:[(0,o.jsx)(a.XIcon,{}),(0,o.jsx)(`span`,{className:`sr-only`,children:`Remove image`})]})]})}function l({accept:e=`image/*`,buttonLabel:t=`Choose image`,dropzoneLabel:n=`Drop images here or click to upload`,preview:i=!0,previewClassName:a,imageClassName:l,files:u=[],renderImageFile:d,...f}){let p=s(u,i);return(0,o.jsx)(r.FileUpload,{accept:e,buttonLabel:t,dropzoneLabel:n,files:u,renderFile:e=>{let t=p[r.getFileKey(e.file)];return d?.({...e,previewUrl:t})??c({...e,previewUrl:t,previewClassName:a,imageClassName:l})},...f})}exports.ImageUpload=l,exports.useImagePreviewUrls=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("./file-upload.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s(e){return new Promise((t,n)=>{let r=URL.createObjectURL(e),i=new Image;i.onload=()=>{t({width:i.width,height:i.height}),URL.revokeObjectURL(r)},i.onerror=()=>{URL.revokeObjectURL(r),n(Error(`Image metadata could not be read`))},i.src=r})}function c(e,t=!0){let[n,a]=i.useState({});return i.useEffect(()=>{if(!t){a({});return}let n=e.filter(e=>e.type.startsWith(`image/`)).map(e=>[r.getFileKey(e),URL.createObjectURL(e)]);return a(Object.fromEntries(n)),()=>{n.forEach(([,e])=>URL.revokeObjectURL(e))}},[t,e]),n}function l({file:e,previewUrl:i,progress:s,remove:c,previewClassName:l,imageClassName:u}){return(0,o.jsxs)(`div`,{className:`flex min-w-0 items-center gap-3`,children:[(0,o.jsx)(`div`,{className:t.cn(`flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-[min(var(--radius-xl),16px)] border border-border/75 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]`,l),children:i?(0,o.jsx)(`img`,{src:i,alt:e.name,className:t.cn(`size-full object-cover`,u)}):(0,o.jsx)(a.ImageIcon,{className:`size-5`})}),(0,o.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,o.jsx)(`div`,{className:`truncate text-sm font-medium text-foreground`,children:e.name}),(0,o.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:r.formatBytes(e.size)}),typeof s==`number`&&(0,o.jsx)(`div`,{className:`mt-2 h-1.5 overflow-hidden rounded-full bg-muted/80`,children:(0,o.jsx)(`div`,{className:`h-full rounded-full bg-primary shadow-[0_8px_18px_color-mix(in_oklch,var(--primary),transparent_82%)]`,style:{width:`${Math.min(Math.max(s,0),100)}%`}})})]}),(0,o.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`icon-xs`,className:`rounded-full`,onClick:e=>{t.stopInteractivePropagation(e),c()},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:[(0,o.jsx)(a.XIcon,{}),(0,o.jsx)(`span`,{className:`sr-only`,children:`Remove image`})]})]})}function u({accept:e=`image/*`,buttonLabel:t=`Choose image`,dropzoneLabel:n=`Drop images here or click to upload`,preview:i=!0,previewClassName:a,imageClassName:u,files:d=[],minImageWidth:f,minImageHeight:p,aspectRatio:m,aspectRatioTolerance:h=.04,renderImageFile:g,..._}){let v=c(d,i);return(0,o.jsx)(r.FileUpload,{accept:e,buttonLabel:t,dropzoneLabel:n,files:d,validateFile:async e=>{if(!e.type.startsWith(`image/`))return`Only image files are allowed.`;if(!f&&!p&&!m)return null;let{width:t,height:n}=await s(e);if(f&&t<f)return`Image width must be at least ${f}px.`;if(p&&n<p)return`Image height must be at least ${p}px.`;if(m){let e=t/n;if(Math.abs(e-m)>h)return`Image ratio must be close to ${m.toFixed(2)}:1.`}return null},renderFile:e=>{let t=v[r.getFileKey(e.file)];return g?.({...e,previewUrl:t})??l({...e,previewUrl:t,previewClassName:a,imageClassName:u})},..._})}exports.ImageUpload=u,exports.useImagePreviewUrls=c;

package/dist/components/upload/image-upload.d.ts

@@ -5,10 +5,14 @@ export type ImageUploadProps = Omit<FileUploadProps, "accept" | "renderFile"> &
     preview?: boolean;
     previewClassName?: string;
     imageClassName?: string;
+    minImageWidth?: number;
+    minImageHeight?: number;
+    aspectRatio?: number;
+    aspectRatioTolerance?: number;
     renderImageFile?: (state: FileUploadRenderFileState & {
         previewUrl?: string;
     }) => React.ReactNode;
 };
 declare function useImagePreviewUrls(files: File[], enabled?: boolean): Record<string, string>;
-declare function ImageUpload({ accept, buttonLabel, dropzoneLabel, preview, previewClassName, imageClassName, files, renderImageFile, ...props }: ImageUploadProps): React.JSX.Element;
+declare function ImageUpload({ accept, buttonLabel, dropzoneLabel, preview, previewClassName, imageClassName, files, minImageWidth, minImageHeight, aspectRatio, aspectRatioTolerance, renderImageFile, ...props }: ImageUploadProps): React.JSX.Element;
 export { ImageUpload, useImagePreviewUrls };