@rafal.lemieszewski/tide-ui 0.88.2 → 0.89.0

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),H=require("react"),g=require("../../lib/utils.cjs"),J=require("class-variance-authority"),O=require("./button.cjs"),Q=require("./progress.cjs"),S=require("./icon.cjs"),Y=require("lucide-react"),Z=require("./badge.cjs");function ee(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const i=ee(H),T=i.createContext(null),x=()=>{const r=i.useContext(T);if(!r)throw new Error("useFileUpload must be used within a FileUpload component");return r},y=i.forwardRef(({className:r,files:e,onFilesChange:t,maxFiles:o=10,maxSize:l=10*1024*1024,accept:n,disabled:m=!1,multiple:c=!0,onUpload:u,children:p,...F},U)=>{const v=i.useMemo(()=>({files:e,onFilesChange:t,maxFiles:o,maxSize:l,accept:n,disabled:m,multiple:c,onUpload:u}),[e,t,o,l,n,m,c,u]);return s.jsx(T.Provider,{value:v,children:s.jsx("div",{ref:U,className:g.cn("space-y-4",r),...F,children:p})})});y.displayName="FileUploadRoot";const re=J.cva("relative flex flex-col items-center justify-center rounded-[var(--border-radius-l)] border-2 border-dashed p-6 text-center transition-colors duration-200",{variants:{isDragActive:{true:"border-[var(--color-border-brand-bold)] bg-[var(--color-background-brand-subtle)]",false:"border-[var(--color-interaction-border-input)] hover:border-[var(--color-border-brand-bold)]"},disabled:{true:"cursor-not-allowed opacity-50",false:"cursor-pointer"}},defaultVariants:{isDragActive:!1,disabled:!1}}),N=i.forwardRef(({className:r,children:e,...t},o)=>{const{files:l,onFilesChange:n,maxFiles:m,maxSize:c,accept:u,disabled:p,multiple:F}=x(),[U,v]=i.useState(!1),q=i.useRef(null),V=a=>{if(c&&a.size>c)return`File size must be less than ${k(c)}`;if(u&&u.length>0){const d=a.type,j=`.${a.name.split(".").pop()?.toLowerCase()}`;if(!u.some(f=>{if(f.startsWith("."))return f.toLowerCase()===j;if(f.includes("*")){const h=f.split("/")[0];return d.startsWith(h)}return d===f}))return`File type not supported. Accepted types: ${u.join(", ")}`}return null},L=a=>{const d=[],j=l.length;Array.from(a).forEach((b,f)=>{if(m&&j+d.length>=m)return;const h=V(b),A={id:`${Date.now()}-${f}`,file:b,status:h?"error":"pending",error:h||void 0,progress:0};if(b.type.startsWith("image/")){const B=new FileReader;B.onload=K=>{const X=l.map(w=>w.id===A.id?{...w,preview:K.target?.result}:w);n(X)},B.readAsDataURL(b)}d.push(A)}),d.length>0&&n([...l,...d])},W=a=>{a.preventDefault(),a.stopPropagation(),p||v(!0)},$=a=>{a.preventDefault(),a.stopPropagation(),v(!1)},E=a=>{if(a.preventDefault(),a.stopPropagation(),v(!1),p)return;const d=a.dataTransfer.files;d.length>0&&L(d)},_=()=>{p||q.current?.click()},G=a=>{const d=a.target.files;d&&L(d),a.target.value=""};return s.jsxs("div",{ref:o,className:g.cn(re({isDragActive:U,disabled:p}),r),onDragOver:W,onDragLeave:$,onDrop:E,onClick:_,role:"button",tabIndex:p?-1:0,"aria-label":"Upload files",...t,children:[s.jsx("input",{ref:q,type:"file",multiple:F,accept:u?.join(","),disabled:p,className:"hidden",onChange:G}),e]})});N.displayName="FileUploadDropzone";const D=i.forwardRef(({children:r,...e},t)=>{const{disabled:o}=x();return s.jsx(O.Button,{ref:t,disabled:o,...e,children:r})});D.displayName="FileUploadTrigger";const I=i.forwardRef(({className:r,children:e,...t},o)=>s.jsx("div",{ref:o,className:g.cn("space-y-2",r),...t,children:e}));I.displayName="FileUploadList";const R=i.forwardRef(({className:r,file:e,children:t,...o},l)=>s.jsx("div",{ref:l,className:g.cn("flex items-center gap-3 rounded-[var(--border-radius-l)] border p-3","border-[var(--color-border-primary)]",e.status==="error"&&"border-[var(--color-border-error-bold)] bg-[var(--color-background-error-subtle)]",e.status==="success"&&"border-[var(--color-border-success-bold)] bg-[var(--color-background-success-subtle)]",r),...o,children:t}));R.displayName="FileUploadItem";const P=i.forwardRef(({className:r,file:e,...t},o)=>{const l=n=>n.startsWith("image/")?"image":n.startsWith("video/")?"video":n.startsWith("audio/")?"volume-2":n.includes("pdf")||n.includes("text/")||n.includes("application/json")?"file-text":"file";return s.jsx("div",{ref:o,className:g.cn("flex h-10 w-10 items-center justify-center rounded",r),...t,children:e.preview?s.jsx("img",{src:e.preview,alt:e.file.name,className:"h-full w-full rounded object-cover"}):s.jsx(S.Icon,{name:l(e.file.type),className:"h-5 w-5 text-[var(--color-text-secondary)]"})})});P.displayName="FileUploadItemPreview";const z=i.forwardRef(({className:r,file:e,...t},o)=>s.jsxs("div",{ref:o,className:g.cn("flex-1 space-y-1",r),...t,children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx("p",{className:"text-body-sm truncate font-medium",children:e.file.name}),s.jsx(Z.Badge,{children:e.status})]}),s.jsx("p",{className:"text-caption-sm text-[var(--color-text-secondary)]",children:k(e.file.size)}),e.error&&s.jsx("p",{className:"text-caption-sm text-[var(--color-text-error-bold)]",children:e.error})]}));z.displayName="FileUploadItemMetadata";const M=i.forwardRef(({className:r,file:e,variant:t="linear",...o},l)=>e.status!=="uploading"||e.progress===void 0?null:s.jsxs("div",{ref:l,className:g.cn("w-full",r),...o,children:[s.jsx(Q.Progress,{value:e.progress,className:"h-2"}),s.jsxs("p",{className:"text-caption-sm mt-1 text-[var(--color-text-secondary)]",children:[Math.round(e.progress),"%"]})]}));M.displayName="FileUploadItemProgress";const C=i.forwardRef(({file:r,...e},t)=>{const{files:o,onFilesChange:l}=x(),n=()=>{const m=o.filter(c=>c.id!==r.id);l(m)};return s.jsx(O.Button,{ref:t,variant:"ghost",size:"s",onClick:n,"aria-label":`Remove ${r.file.name}`,...e,children:s.jsx(S.Icon,{name:Y.X,className:"h-4 w-4"})})});C.displayName="FileUploadItemDelete";const k=r=>{if(r===0)return"0 Bytes";const e=1024,t=["Bytes","KB","MB","GB"],o=Math.floor(Math.log(r)/Math.log(e));return parseFloat((r/Math.pow(e,o)).toFixed(2))+" "+t[o]},te={Root:y,Dropzone:N,Trigger:D,List:I,Item:R,ItemPreview:P,ItemMetadata:z,ItemProgress:M,ItemDelete:C};exports.FileUpload=te;exports.FileUploadDropzone=N;exports.FileUploadItem=R;exports.FileUploadItemDelete=C;exports.FileUploadItemMetadata=z;exports.FileUploadItemPreview=P;exports.FileUploadItemProgress=M;exports.FileUploadList=I;exports.FileUploadRoot=y;exports.FileUploadTrigger=D;exports.formatFileSize=k;exports.useFileUpload=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),H=require("react"),g=require("../../lib/utils.cjs"),J=require("class-variance-authority"),O=require("./button.cjs"),Q=require("./progress.cjs"),S=require("./icon.cjs"),Y=require("lucide-react"),Z=require("./badge.cjs");function ee(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const i=ee(H),T=i.createContext(null),x=()=>{const r=i.useContext(T);if(!r)throw new Error("useFileUpload must be used within a FileUpload component");return r};function re(r){return r instanceof File}const N=i.forwardRef(({className:r,files:e,onFilesChange:t,maxFiles:o=10,maxSize:n=10*1024*1024,accept:l,disabled:m=!1,multiple:p=!0,onUpload:d,onDelete:u,children:U,...j},v)=>{const h=i.useMemo(()=>({files:e,onFilesChange:t,maxFiles:o,maxSize:n,accept:l,disabled:m,multiple:p,onUpload:d,onDelete:u}),[e,t,o,n,l,m,p,d,u]);return a.jsx(T.Provider,{value:h,children:a.jsx("div",{ref:v,className:g.cn("space-y-4",r),...j,children:U})})});N.displayName="FileUploadRoot";const te=J.cva("relative flex flex-col items-center justify-center rounded-[var(--border-radius-l)] border-2 border-dashed p-6 text-center transition-colors duration-200",{variants:{isDragActive:{true:"border-[var(--color-border-brand-bold)] bg-[var(--color-background-brand-subtle)]",false:"border-[var(--color-interaction-border-input)] hover:border-[var(--color-border-brand-bold)]"},disabled:{true:"cursor-not-allowed opacity-50",false:"cursor-pointer"}},defaultVariants:{isDragActive:!1,disabled:!1}}),D=i.forwardRef(({className:r,children:e,...t},o)=>{const{files:n,onFilesChange:l,maxFiles:m,maxSize:p,accept:d,disabled:u,multiple:U}=x(),[j,v]=i.useState(!1),h=i.useRef(null),V=s=>{if(p&&s.size>p)return`File size must be less than ${q(p)}`;if(d&&d.length>0){const c=s.type,w=`.${s.name.split(".").pop()?.toLowerCase()}`;if(!d.some(f=>{if(f.startsWith("."))return f.toLowerCase()===w;if(f.includes("*")){const F=f.split("/")[0];return c.startsWith(F)}return c===f}))return`File type not supported. Accepted types: ${d.join(", ")}`}return null},L=s=>{const c=[],w=n.length;Array.from(s).forEach((b,f)=>{if(m&&w+c.length>=m)return;const F=V(b),A={id:`${Date.now()}-${f}`,file:b,status:F?"error":"pending",error:F||void 0,progress:0};if(b.type.startsWith("image/")){const B=new FileReader;B.onload=K=>{const X=n.map(y=>y.id===A.id?{...y,preview:K.target?.result}:y);l(X)},B.readAsDataURL(b)}c.push(A)}),c.length>0&&l([...n,...c])},W=s=>{s.preventDefault(),s.stopPropagation(),u||v(!0)},$=s=>{s.preventDefault(),s.stopPropagation(),v(!1)},E=s=>{if(s.preventDefault(),s.stopPropagation(),v(!1),u)return;const c=s.dataTransfer.files;c.length>0&&L(c)},_=()=>{u||h.current?.click()},G=s=>{const c=s.target.files;c&&L(c),s.target.value=""};return a.jsxs("div",{ref:o,className:g.cn(te({isDragActive:j,disabled:u}),r),onDragOver:W,onDragLeave:$,onDrop:E,onClick:_,role:"button",tabIndex:u?-1:0,"aria-label":"Upload files",...t,children:[a.jsx("input",{ref:h,type:"file",multiple:U,accept:d?.join(","),disabled:u,className:"hidden",onChange:G}),e]})});D.displayName="FileUploadDropzone";const I=i.forwardRef(({children:r,...e},t)=>{const{disabled:o}=x();return a.jsx(O.Button,{ref:t,disabled:o,...e,children:r})});I.displayName="FileUploadTrigger";const R=i.forwardRef(({className:r,children:e,...t},o)=>a.jsx("div",{ref:o,className:g.cn("space-y-2",r),...t,children:e}));R.displayName="FileUploadList";const P=i.forwardRef(({className:r,file:e,children:t,...o},n)=>a.jsx("div",{ref:n,className:g.cn("flex items-center gap-3 rounded-[var(--border-radius-l)] border p-3","border-[var(--color-border-primary)]",e.status==="error"&&"border-[var(--color-border-error-bold)] bg-[var(--color-background-error-subtle)]",e.status==="success"&&"border-[var(--color-border-success-bold)] bg-[var(--color-background-success-subtle)]",r),...o,children:t}));P.displayName="FileUploadItem";const z=i.forwardRef(({className:r,file:e,...t},o)=>{const n=l=>l.startsWith("image/")?"image":l.startsWith("video/")?"video":l.startsWith("audio/")?"volume-2":l.includes("pdf")||l.includes("text/")||l.includes("application/json")?"file-text":"file";return a.jsx("div",{ref:o,className:g.cn("flex h-10 w-10 items-center justify-center rounded",r),...t,children:e.preview&&re(e.file)?a.jsx("img",{src:e.preview,alt:e.file.name,className:"h-full w-full rounded object-cover"}):a.jsx(S.Icon,{name:n(e.file.type??""),className:"h-5 w-5 text-[var(--color-text-secondary)]"})})});z.displayName="FileUploadItemPreview";const M=i.forwardRef(({className:r,file:e,children:t,...o},n)=>a.jsx("div",{ref:n,className:g.cn("flex-1 space-y-1",r),...o,children:t??a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"flex items-center gap-2",children:[a.jsx("p",{className:"text-body-sm truncate font-medium",children:e.file.name}),a.jsx(Z.Badge,{children:e.status})]}),a.jsx("p",{className:"text-caption-sm text-[var(--color-text-secondary)]",children:q(e.file.size)}),e.error&&a.jsx("p",{className:"text-caption-sm text-[var(--color-text-error-bold)]",children:e.error})]})}));M.displayName="FileUploadItemMetadata";const C=i.forwardRef(({className:r,file:e,variant:t="linear",...o},n)=>e.status!=="uploading"||e.progress===void 0?null:a.jsxs("div",{ref:n,className:g.cn("w-full",r),...o,children:[a.jsx(Q.Progress,{value:e.progress,className:"h-2"}),a.jsxs("p",{className:"text-caption-sm mt-1 text-[var(--color-text-secondary)]",children:[Math.round(e.progress),"%"]})]}));C.displayName="FileUploadItemProgress";const k=i.forwardRef(({file:r,...e},t)=>{const{files:o,onFilesChange:n,onDelete:l}=x(),m=async()=>{if(l)try{await l(r)}catch{return}const p=o.filter(d=>d.id!==r.id);n(p)};return a.jsx(O.Button,{ref:t,variant:"ghost",size:"s",onClick:m,"aria-label":`Remove ${r.file.name}`,...e,children:a.jsx(S.Icon,{name:Y.X,className:"h-4 w-4"})})});k.displayName="FileUploadItemDelete";const q=r=>{if(r===0)return"0 Bytes";const e=1024,t=["Bytes","KB","MB","GB"],o=Math.floor(Math.log(r)/Math.log(e));return parseFloat((r/Math.pow(e,o)).toFixed(2))+" "+t[o]},oe={Root:N,Dropzone:D,Trigger:I,List:R,Item:P,ItemPreview:z,ItemMetadata:M,ItemProgress:C,ItemDelete:k};exports.FileUpload=oe;exports.FileUploadDropzone=D;exports.FileUploadItem=P;exports.FileUploadItemDelete=k;exports.FileUploadItemMetadata=M;exports.FileUploadItemPreview=z;exports.FileUploadItemProgress=C;exports.FileUploadList=R;exports.FileUploadRoot=N;exports.FileUploadTrigger=I;exports.formatFileSize=q;exports.useFileUpload=x;

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

@@ -1,61 +1,68 @@
-import { jsx as s, jsxs as b } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as v } from "../../lib/utils.js";
-import { cva as Q } from "class-variance-authority";
+import { jsx as s, jsxs as b, Fragment as Q } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as f } from "../../lib/utils.js";
+import { cva as Y } from "class-variance-authority";
 import { Button as P } from "./button.js";
-import { Progress as Y } from "./progress.js";
+import { Progress as Z } from "./progress.js";
 import { Icon as z } from "./icon.js";
-import { X as Z } from "lucide-react";
-import { Badge as _ } from "./badge.js";
-const M = n.createContext(
+import { X as _ } from "lucide-react";
+import { Badge as ee } from "./badge.js";
+const M = i.createContext(
   null
 ), D = () => {
-  const r = n.useContext(M);
+  const r = i.useContext(M);
   if (!r)
     throw new Error("useFileUpload must be used within a FileUpload component");
   return r;
-}, j = /* @__PURE__ */ n.forwardRef(
+};
+function re(r) {
+  return r instanceof File;
+}
+const j = /* @__PURE__ */ i.forwardRef(
   ({
     className: r,
     files: e,
     onFilesChange: o,
     maxFiles: t = 10,
-    maxSize: l = 10 * 1024 * 1024,
+    maxSize: n = 10 * 1024 * 1024,
     // 10MB
-    accept: i,
-    disabled: m = !1,
-    multiple: c = !0,
-    onUpload: p,
-    children: u,
-    ...x
-  }, w) => {
-    const g = n.useMemo(
+    accept: l,
+    disabled: v = !1,
+    multiple: p = !0,
+    onUpload: c,
+    onDelete: u,
+    children: w,
+    ...N
+  }, g) => {
+    const F = i.useMemo(
       () => ({
         files: e,
         onFilesChange: o,
         maxFiles: t,
-        maxSize: l,
-        accept: i,
-        disabled: m,
-        multiple: c,
-        onUpload: p
+        maxSize: n,
+        accept: l,
+        disabled: v,
+        multiple: p,
+        onUpload: c,
+        onDelete: u
       }),
       [
         e,
         o,
         t,
+        n,
         l,
-        i,
-        m,
+        v,
+        p,
         c,
-        p
+        u
       ]
     );
-    return /* @__PURE__ */ s(M.Provider, { value: g, children: /* @__PURE__ */ s("div", { ref: w, className: v("space-y-4", r), ...x, children: u }) });
+    return /* @__PURE__ */ s(M.Provider, { value: F, children: /* @__PURE__ */ s("div", { ref: g, className: f("space-y-4", r), ...N, children: w }) });
   }
 );
 j.displayName = "FileUploadRoot";
-const ee = Q(
+const te = Y(
   "relative flex flex-col items-center justify-center rounded-[var(--border-radius-l)] border-2 border-dashed p-6 text-center transition-colors duration-200",
   {
     variants: {
@@ -73,54 +80,54 @@ const ee = Q(
       disabled: !1
     }
   }
-), k = /* @__PURE__ */ n.forwardRef(({ className: r, children: e, ...o }, t) => {
+), k = /* @__PURE__ */ i.forwardRef(({ className: r, children: e, ...o }, t) => {
   const {
-    files: l,
-    onFilesChange: i,
-    maxFiles: m,
-    maxSize: c,
-    accept: p,
+    files: n,
+    onFilesChange: l,
+    maxFiles: v,
+    maxSize: p,
+    accept: c,
     disabled: u,
-    multiple: x
-  } = D(), [w, g] = n.useState(!1), y = n.useRef(null), O = (a) => {
-    if (c && a.size > c)
-      return `File size must be less than ${E(c)}`;
-    if (p && p.length > 0) {
-      const d = a.type, N = `.${a.name.split(".").pop()?.toLowerCase()}`;
-      if (!p.some((f) => {
-        if (f.startsWith("."))
-          return f.toLowerCase() === N;
-        if (f.includes("*")) {
-          const F = f.split("/")[0];
-          return d.startsWith(F);
+    multiple: w
+  } = D(), [N, g] = i.useState(!1), F = i.useRef(null), O = (a) => {
+    if (p && a.size > p)
+      return `File size must be less than ${E(p)}`;
+    if (c && c.length > 0) {
+      const d = a.type, U = `.${a.name.split(".").pop()?.toLowerCase()}`;
+      if (!c.some((m) => {
+        if (m.startsWith("."))
+          return m.toLowerCase() === U;
+        if (m.includes("*")) {
+          const x = m.split("/")[0];
+          return d.startsWith(x);
         }
-        return d === f;
+        return d === m;
       }))
-        return `File type not supported. Accepted types: ${p.join(", ")}`;
+        return `File type not supported. Accepted types: ${c.join(", ")}`;
     }
     return null;
   }, I = (a) => {
-    const d = [], N = l.length;
-    Array.from(a).forEach((h, f) => {
-      if (m && N + d.length >= m) return;
-      const F = O(h), R = {
-        id: `${Date.now()}-${f}`,
+    const d = [], U = n.length;
+    Array.from(a).forEach((h, m) => {
+      if (v && U + d.length >= v) return;
+      const x = O(h), R = {
+        id: `${Date.now()}-${m}`,
         file: h,
-        status: F ? "error" : "pending",
-        error: F || void 0,
+        status: x ? "error" : "pending",
+        error: x || void 0,
         progress: 0
       };
       if (h.type.startsWith("image/")) {
         const C = new FileReader();
         C.onload = (H) => {
-          const J = l.map(
-            (U) => U.id === R.id ? { ...U, preview: H.target?.result } : U
+          const J = n.map(
+            (y) => y.id === R.id ? { ...y, preview: H.target?.result } : y
           );
-          i(J);
+          l(J);
         }, C.readAsDataURL(h);
       }
       d.push(R);
-    }), d.length > 0 && i([...l, ...d]);
+    }), d.length > 0 && l([...n, ...d]);
   }, S = (a) => {
     a.preventDefault(), a.stopPropagation(), u || g(!0);
   }, G = (a) => {
@@ -130,7 +137,7 @@ const ee = Q(
     const d = a.dataTransfer.files;
     d.length > 0 && I(d);
   }, X = () => {
-    u || y.current?.click();
+    u || F.current?.click();
   }, q = (a) => {
     const d = a.target.files;
     d && I(d), a.target.value = "";
@@ -139,7 +146,7 @@ const ee = Q(
     "div",
     {
       ref: t,
-      className: v(ee({ isDragActive: w, disabled: u }), r),
+      className: f(te({ isDragActive: N, disabled: u }), r),
       onDragOver: S,
       onDragLeave: G,
       onDrop: K,
@@ -152,10 +159,10 @@ const ee = Q(
         /* @__PURE__ */ s(
           "input",
           {
-            ref: y,
+            ref: F,
             type: "file",
-            multiple: x,
-            accept: p?.join(","),
+            multiple: w,
+            accept: c?.join(","),
             disabled: u,
             className: "hidden",
             onChange: q
@@ -167,21 +174,21 @@ const ee = Q(
   );
 });
 k.displayName = "FileUploadDropzone";
-const L = /* @__PURE__ */ n.forwardRef(({ children: r, ...e }, o) => {
+const L = /* @__PURE__ */ i.forwardRef(({ children: r, ...e }, o) => {
   const { disabled: t } = D();
   return /* @__PURE__ */ s(P, { ref: o, disabled: t, ...e, children: r });
 });
 L.displayName = "FileUploadTrigger";
-const A = /* @__PURE__ */ n.forwardRef(
-  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ s("div", { ref: t, className: v("space-y-2", r), ...o, children: e })
+const A = /* @__PURE__ */ i.forwardRef(
+  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ s("div", { ref: t, className: f("space-y-2", r), ...o, children: e })
 );
 A.displayName = "FileUploadList";
-const B = /* @__PURE__ */ n.forwardRef(
-  ({ className: r, file: e, children: o, ...t }, l) => /* @__PURE__ */ s(
+const B = /* @__PURE__ */ i.forwardRef(
+  ({ className: r, file: e, children: o, ...t }, n) => /* @__PURE__ */ s(
     "div",
     {
-      ref: l,
-      className: v(
+      ref: n,
+      className: f(
         "flex items-center gap-3 rounded-[var(--border-radius-l)] border p-3",
         "border-[var(--color-border-primary)]",
         e.status === "error" && "border-[var(--color-border-error-bold)] bg-[var(--color-background-error-subtle)]",
@@ -194,18 +201,18 @@ const B = /* @__PURE__ */ n.forwardRef(
   )
 );
 B.displayName = "FileUploadItem";
-const W = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, ...o }, t) => {
-  const l = (i) => i.startsWith("image/") ? "image" : i.startsWith("video/") ? "video" : i.startsWith("audio/") ? "volume-2" : i.includes("pdf") || i.includes("text/") || i.includes("application/json") ? "file-text" : "file";
+const W = /* @__PURE__ */ i.forwardRef(({ className: r, file: e, ...o }, t) => {
+  const n = (l) => l.startsWith("image/") ? "image" : l.startsWith("video/") ? "video" : l.startsWith("audio/") ? "volume-2" : l.includes("pdf") || l.includes("text/") || l.includes("application/json") ? "file-text" : "file";
   return /* @__PURE__ */ s(
     "div",
     {
       ref: t,
-      className: v(
+      className: f(
         "flex h-10 w-10 items-center justify-center rounded",
         r
       ),
       ...o,
-      children: e.preview ? /* @__PURE__ */ s(
+      children: e.preview && re(e.file) ? /* @__PURE__ */ s(
         "img",
         {
           src: e.preview,
@@ -215,7 +222,7 @@ const W = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, ...o }, t) => {
       ) : /* @__PURE__ */ s(
         z,
         {
-          name: l(e.file.type),
+          name: n(e.file.type ?? ""),
           className: "h-5 w-5 text-[var(--color-text-secondary)]"
         }
       )
@@ -223,38 +230,44 @@ const W = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, ...o }, t) => {
   );
 });
 W.displayName = "FileUploadItemPreview";
-const $ = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, ...o }, t) => /* @__PURE__ */ b("div", { ref: t, className: v("flex-1 space-y-1", r), ...o, children: [
+const $ = /* @__PURE__ */ i.forwardRef(({ className: r, file: e, children: o, ...t }, n) => /* @__PURE__ */ s("div", { ref: n, className: f("flex-1 space-y-1", r), ...t, children: o ?? /* @__PURE__ */ b(Q, { children: [
   /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ s("p", { className: "text-body-sm truncate font-medium", children: e.file.name }),
-    /* @__PURE__ */ s(_, { children: e.status })
+    /* @__PURE__ */ s(ee, { children: e.status })
   ] }),
   /* @__PURE__ */ s("p", { className: "text-caption-sm text-[var(--color-text-secondary)]", children: E(e.file.size) }),
   e.error && /* @__PURE__ */ s("p", { className: "text-caption-sm text-[var(--color-text-error-bold)]", children: e.error })
-] }));
+] }) }));
 $.displayName = "FileUploadItemMetadata";
-const V = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, variant: o = "linear", ...t }, l) => e.status !== "uploading" || e.progress === void 0 ? null : /* @__PURE__ */ b("div", { ref: l, className: v("w-full", r), ...t, children: [
-  /* @__PURE__ */ s(Y, { value: e.progress, className: "h-2" }),
+const V = /* @__PURE__ */ i.forwardRef(({ className: r, file: e, variant: o = "linear", ...t }, n) => e.status !== "uploading" || e.progress === void 0 ? null : /* @__PURE__ */ b("div", { ref: n, className: f("w-full", r), ...t, children: [
+  /* @__PURE__ */ s(Z, { value: e.progress, className: "h-2" }),
   /* @__PURE__ */ b("p", { className: "text-caption-sm mt-1 text-[var(--color-text-secondary)]", children: [
     Math.round(e.progress),
     "%"
   ] })
 ] }));
 V.displayName = "FileUploadItemProgress";
-const T = /* @__PURE__ */ n.forwardRef(({ file: r, ...e }, o) => {
-  const { files: t, onFilesChange: l } = D();
+const T = /* @__PURE__ */ i.forwardRef(({ file: r, ...e }, o) => {
+  const { files: t, onFilesChange: n, onDelete: l } = D();
   return /* @__PURE__ */ s(
     P,
     {
       ref: o,
       variant: "ghost",
       size: "s",
-      onClick: () => {
-        const m = t.filter((c) => c.id !== r.id);
-        l(m);
+      onClick: async () => {
+        if (l)
+          try {
+            await l(r);
+          } catch {
+            return;
+          }
+        const p = t.filter((c) => c.id !== r.id);
+        n(p);
       },
       "aria-label": `Remove ${r.file.name}`,
       ...e,
-      children: /* @__PURE__ */ s(z, { name: Z, className: "h-4 w-4" })
+      children: /* @__PURE__ */ s(z, { name: _, className: "h-4 w-4" })
     }
   );
 });
@@ -263,7 +276,7 @@ const E = (r) => {
   if (r === 0) return "0 Bytes";
   const e = 1024, o = ["Bytes", "KB", "MB", "GB"], t = Math.floor(Math.log(r) / Math.log(e));
   return parseFloat((r / Math.pow(e, t)).toFixed(2)) + " " + o[t];
-}, de = {
+}, ue = {
   Root: j,
   Dropzone: k,
   Trigger: L,
@@ -275,7 +288,7 @@ const E = (r) => {
   ItemDelete: T
 };
 export {
-  de as FileUpload,
+  ue as FileUpload,
   k as FileUploadDropzone,
   B as FileUploadItem,
   T as FileUploadItemDelete,

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

@@ -8,12 +8,19 @@ interface FileUploadContextValue {
     accept?: string[];
     disabled?: boolean;
     multiple?: boolean;
-    onUpload?: (files: File[]) => Promise<void>;
+    onUpload?: (files: FileUploadFile[]) => Promise<void>;
+    onDelete?: (file: FileUploadFile) => Promise<void>;
 }
 declare const useFileUpload: () => FileUploadContextValue;
+export interface FileUploadFileMeta {
+    name: string;
+    size: number;
+    type?: string;
+}
 export interface FileUploadFile {
     id: string;
-    file: File;
+    externalId?: string;
+    file: File | FileUploadFileMeta;
     status: "pending" | "uploading" | "success" | "error";
     progress?: number;
     error?: string;
@@ -27,7 +34,8 @@ export interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement> {
     accept?: string[];
     disabled?: boolean;
     multiple?: boolean;
-    onUpload?: (files: File[]) => Promise<void>;
+    onUpload?: (files: FileUploadFile[]) => Promise<void>;
+    onDelete?: (file: FileUploadFile) => Promise<void>;
 }
 declare const FileUploadRoot: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLDivElement>>;
 export interface FileUploadDropzoneProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/types/components/index.d.ts

@@ -60,7 +60,7 @@ export type { EmptyProps, EmptyMediaProps, EmptyTitleProps, EmptyDescriptionProp
 export { Flag } from './fundamental/flag.js';
 export type { FlagProps, FlagSize } from './fundamental/flag.js';
 export { FileUpload } from './fundamental/file-upload.js';
-export type { FileUploadFile, FileUploadProps, FileUploadDropzoneProps, FileUploadTriggerProps, FileUploadListProps, FileUploadItemProps, FileUploadItemPreviewProps, FileUploadItemMetadataProps, FileUploadItemProgressProps, FileUploadItemDeleteProps, } from './fundamental/file-upload.js';
+export type { FileUploadFile, FileUploadFileMeta, FileUploadProps, FileUploadDropzoneProps, FileUploadTriggerProps, FileUploadListProps, FileUploadItemProps, FileUploadItemPreviewProps, FileUploadItemMetadataProps, FileUploadItemProgressProps, FileUploadItemDeleteProps, } from './fundamental/file-upload.js';
 export { HoverCard, HoverCardTrigger, HoverCardContent } from './fundamental/hover-card.js';
 export { Slider } from './fundamental/slider.js';
 export { Tag, TagGroup } from './fundamental/tag.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rafal.lemieszewski/tide-ui",
-  "version": "0.88.2",
+  "version": "0.89.0",
   "description": "A comprehensive React component library built with Tailwind CSS and Radix UI primitives",
   "type": "module",
   "main": "./dist/cjs/lib/index.cjs",