@pixpilot/shadcn 0.3.0 → 0.3.2

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

@@ -1 +1,910 @@
-"use client";import{cn as e}from"../../lib/utils.js";import"../../lib/index.js";import*as t from"react";import{Fragment as n,jsx as r,jsxs as i}from"react/jsx-runtime";import{Slot as a}from"@radix-ui/react-slot";import{FileArchiveIcon as o,FileAudioIcon as s,FileCodeIcon as c,FileCogIcon as l,FileIcon as u,FileTextIcon as d,FileVideoIcon as f}from"lucide-react";import{useDirection as p}from"@radix-ui/react-direction";const m=`FileUpload`,h=`FileUploadDropzone`,g=`FileUploadItem`,_=`FileUploadItemPreview`,v=`FileUploadItemMetadata`,y=`FileUploadItemDelete`,b=`FileUploadClear`;function x(e){let n=t.useRef(null);return n.current===null&&(n.current=e()),n}function S(e,t,n,r,i){let a={files:t,dragOver:!1,invalid:r};function o(e,r){switch(r.type){case`ADD_FILES`:for(let e of r.files)t.set(e,{file:e,progress:0,status:`idle`});return i&&i(Array.from(t.values()).map(e=>e.file)),{...e,files:t};case`SET_FILES`:{let n=new Set(r.files);for(let e of t.keys())n.has(e)||t.delete(e);for(let e of r.files)t.get(e)||t.set(e,{file:e,progress:0,status:`idle`});return{...e,files:t}}case`SET_PROGRESS`:{let n=t.get(r.file);return n&&t.set(r.file,{...n,progress:r.progress,status:`uploading`}),{...e,files:t}}case`SET_SUCCESS`:{let n=t.get(r.file);return n&&t.set(r.file,{...n,progress:100,status:`success`}),{...e,files:t}}case`SET_ERROR`:{let n=t.get(r.file);return n&&t.set(r.file,{...n,error:r.error,status:`error`}),{...e,files:t}}case`REMOVE_FILE`:if(n){let e=n.get(r.file);e&&(URL.revokeObjectURL(e),n.delete(r.file))}return t.delete(r.file),i&&i(Array.from(t.values()).map(e=>e.file)),{...e,files:t};case`SET_DRAG_OVER`:return{...e,dragOver:r.dragOver};case`SET_INVALID`:return{...e,invalid:r.invalid};case`CLEAR`:if(n)for(let e of t.keys()){let t=n.get(e);t&&(URL.revokeObjectURL(t),n.delete(e))}return t.clear(),i&&i([]),{...e,files:t,invalid:!1};default:return e}}function s(){return a}function c(t){a=o(a,t);for(let t of e)t()}function l(t){return e.add(t),()=>e.delete(t)}return{getState:s,dispatch:c,subscribe:l}}const C=t.createContext(null);function w(e){let n=t.use(C);if(!n)throw Error(`\`${e}\` must be used within \`${m}\``);return n}function T(e){let n=w(`useStore`),r=x(()=>null),i=t.useCallback(()=>{let t=n.getState(),i=r.current;if(i&&i.state===t)return i.value;let a=e(t);return r.current={value:a,state:t},a},[n,e,r]);return t.useSyncExternalStore(n.subscribe,i,i)}const E=t.createContext(null);function D(e){let n=t.use(E);if(!n)throw Error(`\`${e}\` must be used within \`${m}\``);return n}function O(n){let{value:o,defaultValue:s,onValueChange:c,onAccept:l,onFileAccept:u,onFileReject:d,onFilesReject:f,onFileValidate:m,onUpload:h,accept:g,maxFiles:_,maxSize:v,dir:y,label:b,name:w,asChild:T,disabled:D=!1,invalid:O=!1,multiple:k=!1,required:A=!1,children:j,className:M,...N}=n,P=t.useId(),F=t.useId(),I=t.useId(),L=t.useId(),R=p(y),z=x(()=>new Set).current,B=x(()=>new Map).current,V=x(()=>new WeakMap).current,H=t.useRef(null),U=o!==void 0,W=t.useMemo(()=>S(z,B,V,O,c),[z,B,O,c,V]),G=t.useMemo(()=>g?.split(`,`).map(e=>e.trim())??null,[g]),K=x(()=>{let e=0;return(t,n)=>{e||=requestAnimationFrame(()=>{e=0,W.dispatch({type:`SET_PROGRESS`,file:t,progress:Math.min(Math.max(0,n),100)})})}}).current;t.useEffect(()=>{U?W.dispatch({type:`SET_FILES`,files:o}):s&&s.length>0&&!W.getState().files.size&&W.dispatch({type:`SET_FILES`,files:s})},[o,s,U,W]),t.useEffect(()=>()=>{for(let e of B.keys()){let t=V.get(e);t&&URL.revokeObjectURL(t)}},[B,V]);let q=t.useCallback(async e=>{try{for(let t of e)W.dispatch({type:`SET_PROGRESS`,file:t,progress:0});if(h)await h(e,{onProgress:K,onSuccess:e=>{W.dispatch({type:`SET_SUCCESS`,file:e})},onError:(e,t)=>{W.dispatch({type:`SET_ERROR`,file:e,error:t.message??`Upload failed`})}});else for(let t of e)W.dispatch({type:`SET_SUCCESS`,file:t})}catch(t){let n=t instanceof Error?t.message:`Upload failed`;for(let t of e)W.dispatch({type:`SET_ERROR`,file:t,error:n})}},[W,h,K]),J=t.useCallback(e=>{if(D)return;let t=[...e],n=!1,r=[];if(_){let e=W.getState().files.size,i=Math.max(0,_-e);if(i<t.length){let e=t.slice(i);n=!0,t=t.slice(0,i);for(let t of e){let e=`Maximum ${_} files allowed`;if(m){let n=m(t);n&&(e=n)}d?.(t,e),r.push({file:t,message:e})}}}let i=[],a=[];for(let e of t){let t=!1,r=``;if(m){let i=m(e);if(i){r=i,d?.(e,r),t=!0,n=!0;continue}}if(G){let i=e.type,a=`.${e.name.split(`.`).pop()}`;G.some(e=>e===i||e===a||e.includes(`/*`)&&i.startsWith(e.replace(`/*`,`/`)))||(r=`File type not accepted`,d?.(e,r),t=!0,n=!0)}v&&e.size>v&&(r=`File too large`,d?.(e,r),t=!0,n=!0),t?a.push({file:e,message:r}):i.push(e)}if(r.push(...a),n&&(W.dispatch({type:`SET_INVALID`,invalid:n}),setTimeout(()=>{W.dispatch({type:`SET_INVALID`,invalid:!1})},2e3)),r.length>0&&f?.(r),i.length>0){W.dispatch({type:`ADD_FILES`,files:i}),U&&c&&c([...Array.from(W.getState().files.values()).map(e=>e.file)]),l&&l(i);for(let e of i)u?.(e);h&&requestAnimationFrame(()=>{q(i)})}},[W,U,c,l,u,h,q,_,m,d,f,G,v,D]),Y=t.useCallback(e=>{J(Array.from(e.target.files??[])),e.target.value=``},[J]),X=t.useMemo(()=>({dropzoneId:F,inputId:P,listId:I,labelId:L,dir:R,disabled:D,inputRef:H,urlCache:V}),[F,P,I,L,R,D,V]),Z=T?a:`div`;return r(C.Provider,{value:W,children:r(E.Provider,{value:X,children:i(Z,{"data-disabled":D?``:void 0,"data-slot":`file-upload`,dir:R,...N,className:e(`relative flex flex-col gap-2`,M),children:[j,r(`input`,{type:`file`,id:P,"aria-labelledby":L,"aria-describedby":F,ref:H,tabIndex:-1,accept:g,name:w,className:`sr-only`,disabled:D,multiple:k,required:A,onChange:Y}),r(`span`,{id:L,className:`sr-only`,children:b??`File upload`})]})})})}function k(n){let{asChild:i,className:o,onClick:s,onDragOver:c,onDragEnter:l,onDragLeave:u,onDrop:d,onPaste:f,onKeyDown:p,...m}=n,g=D(h),_=w(h),v=T(e=>e.dragOver),y=T(e=>e.invalid),b=t.useCallback(e=>{if(s?.(e),e.defaultPrevented)return;let{target:t}=e;t instanceof HTMLElement&&t.closest(`[data-slot="file-upload-trigger"]`)||g.inputRef.current?.click()},[g.inputRef,s]),x=t.useCallback(e=>{c?.(e),!e.defaultPrevented&&(e.preventDefault(),_.dispatch({type:`SET_DRAG_OVER`,dragOver:!0}))},[_,c]),S=t.useCallback(e=>{l?.(e),!e.defaultPrevented&&(e.preventDefault(),_.dispatch({type:`SET_DRAG_OVER`,dragOver:!0}))},[_,l]),C=t.useCallback(e=>{if(u?.(e),e.defaultPrevented)return;let{relatedTarget:t}=e;t&&t instanceof Node&&e.currentTarget.contains(t)||(e.preventDefault(),_.dispatch({type:`SET_DRAG_OVER`,dragOver:!1}))},[_,u]),E=t.useCallback(e=>{if(d?.(e),e.defaultPrevented)return;e.preventDefault(),_.dispatch({type:`SET_DRAG_OVER`,dragOver:!1});let t=Array.from(e.dataTransfer.files),n=g.inputRef.current;if(!n)return;let r=new DataTransfer;for(let e of t)r.items.add(e);n.files=r.files,n.dispatchEvent(new Event(`change`,{bubbles:!0}))},[_,g.inputRef,d]),O=t.useCallback(e=>{if(f?.(e),e.defaultPrevented)return;e.preventDefault(),_.dispatch({type:`SET_DRAG_OVER`,dragOver:!1});let t=e.clipboardData?.items;if(!t)return;let n=[];for(let e=0;e<t.length;e++){let r=t[e];if(r?.kind===`file`){let e=r.getAsFile();e&&n.push(e)}}if(n.length===0)return;let r=g.inputRef.current;if(!r)return;let i=new DataTransfer;for(let e of n)i.items.add(e);r.files=i.files,r.dispatchEvent(new Event(`change`,{bubbles:!0}))},[_,g.inputRef,f]),k=t.useCallback(e=>{p?.(e),!e.defaultPrevented&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),g.inputRef.current?.click())},[g.inputRef,p]);return r(i?a:`div`,{role:`region`,id:g.dropzoneId,"aria-controls":`${g.inputId} ${g.listId}`,"aria-disabled":g.disabled,"aria-invalid":y,"data-disabled":g.disabled?``:void 0,"data-dragging":v?``:void 0,"data-invalid":y?``:void 0,"data-slot":`file-upload-dropzone`,dir:g.dir,tabIndex:g.disabled?void 0:0,...m,className:e(`relative flex select-none flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-disabled:pointer-events-none data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20`,o),onClick:b,onDragEnter:S,onDragLeave:C,onDragOver:x,onDrop:E,onKeyDown:k,onPaste:O})}function A(e){let{asChild:n,onClick:i,...o}=e,s=D(`FileUploadTrigger`),c=t.useCallback(e=>{i?.(e),!e.defaultPrevented&&s.inputRef.current?.click()},[s.inputRef,i]);return r(n?a:`button`,{type:`button`,"aria-controls":s.inputId,"data-disabled":s.disabled?``:void 0,"data-slot":`file-upload-trigger`,...o,disabled:s.disabled,onClick:c})}function j(t){let{className:n,orientation:i=`vertical`,asChild:o,forceMount:s,...c}=t,l=D(`FileUploadList`),u=T(e=>e.files.size),d=s||u>0;return d?r(o?a:`div`,{role:`list`,id:l.listId,"aria-orientation":i,"data-orientation":i,"data-slot":`file-upload-list`,"data-state":d?`active`:`inactive`,dir:l.dir,...c,className:e(`data-[state=inactive]:fade-out-0 data-[state=active]:fade-in-0 data-[state=inactive]:slide-out-to-top-2 data-[state=active]:slide-in-from-top-2 flex flex-col gap-2 data-[state=active]:animate-in data-[state=inactive]:animate-out`,i===`horizontal`&&`flex-row overflow-x-auto p-1.5`,n)}):null}const M=t.createContext(null);function N(e){let n=t.use(M);if(!n)throw Error(`\`${e}\` must be used within \`${g}\``);return n}function P(n){let{value:o,asChild:s,className:c,...l}=n,u=t.useId(),d=`${u}-status`,f=`${u}-name`,p=`${u}-size`,m=`${u}-message`,h=D(g),_=T(e=>e.files.get(o)),v=T(e=>e.files.size),y=T(e=>Array.from(e.files.keys()).indexOf(o)+1),b=t.useMemo(()=>({id:u,fileState:_,nameId:f,sizeId:p,statusId:d,messageId:m}),[u,_,d,f,p,m]);if(!_)return null;let x=_.error?`Error: ${_.error}`:_.status===`uploading`?`Uploading: ${_.progress}% complete`:_.status===`success`?`Upload complete`:`Ready to upload`,S=s?a:`div`;return r(M.Provider,{value:b,children:i(S,{role:`listitem`,id:u,"aria-setsize":v,"aria-posinset":y,"aria-describedby":`${f} ${p} ${d} ${_.error?m:``}`,"aria-labelledby":f,"data-slot":`file-upload-item`,dir:h.dir,...l,className:e(`relative flex items-center  rounded-md border p-3`,c),children:[n.children,r(`span`,{id:d,className:`sr-only`,children:x})]})})}function F(e){if(e===0)return`0 B`;let t=[`B`,`KB`,`MB`,`GB`,`TB`],n=Math.floor(Math.log(e)/Math.log(1024));return`${(e/1024**n).toFixed(n?1:0)} ${t[n]}`}function I(e){let{type:t}=e,n=e.name.split(`.`).pop()?.toLowerCase()??``;return t.startsWith(`video/`)?r(f,{}):t.startsWith(`audio/`)?r(s,{}):t.startsWith(`text/`)||[`txt`,`md`,`rtf`,`pdf`].includes(n)?r(d,{}):[`html`,`css`,`js`,`jsx`,`ts`,`tsx`,`json`,`xml`,`php`,`py`,`rb`,`java`,`c`,`cpp`,`cs`].includes(n)?r(c,{}):[`zip`,`rar`,`7z`,`tar`,`gz`,`bz2`].includes(n)?r(o,{}):[`exe`,`msi`,`app`,`apk`,`deb`,`rpm`].includes(n)||t.startsWith(`application/`)?r(l,{}):r(u,{})}function L(n){let{render:o,asChild:s,children:c,className:l,...u}=n,d=N(_),f=D(_),p=t.useCallback(e=>{if(d.fileState?.file.type.startsWith(`image/`)){let t=f.urlCache.get(e);return t||(t=URL.createObjectURL(e),f.urlCache.set(e,t)),r(`img`,{src:t,alt:e.name,className:`size-full object-cover`})}return I(e)},[d.fileState?.file.type,f.urlCache]),m=t.useCallback(e=>o?o(e,()=>p(e)):p(e),[o,p]);return d.fileState?i(s?a:`div`,{"aria-labelledby":d.nameId,"data-slot":`file-upload-preview`,...u,className:e(`relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded border bg-accent/50 [&>svg]:size-10`,l),children:[m(d.fileState.file),c]}):null}function R(t){let{asChild:o,size:s=`default`,children:c,className:l,...u}=t,d=D(v),f=N(v);return f.fileState?r(o?a:`div`,{"data-slot":`file-upload-metadata`,dir:d.dir,...u,className:e(`flex min-w-0 flex-1 flex-col`,l),children:c??i(n,{children:[r(`span`,{id:f.nameId,className:e(`truncate font-medium text-sm`,s===`sm`&&`font-normal text-[13px] leading-snug`),children:f.fileState.file.name}),r(`span`,{id:f.sizeId,className:e(`truncate text-muted-foreground text-xs`,s===`sm`&&`text-[11px] leading-snug`),children:F(f.fileState.file.size)}),f.fileState.error&&r(`span`,{id:f.messageId,className:`text-destructive text-xs`,children:f.fileState.error})]})}):null}function z(t){let{variant:n=`linear`,size:o=40,strokeWidth:s=2,asChild:c,forceMount:l,className:u,...d}=t,f=N(`FileUploadItemProgress`);if(!f.fileState||!(l||f.fileState.progress!==100))return null;let p=c?a:`div`;switch(n){case`circular`:{let t=2*Math.PI*((o-4)/2),n=t-f.fileState.progress/100*t;return r(p,{role:`progressbar`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":f.fileState.progress,"aria-valuetext":`${f.fileState.progress}%`,"aria-labelledby":f.nameId,"data-slot":`file-upload-progress`,...d,className:e(`-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2`,u),children:i(`svg`,{className:`-rotate-90 transform`,width:o,height:o,viewBox:`0 0 ${o} ${o}`,fill:`none`,stroke:`currentColor`,children:[r(`circle`,{className:`text-primary/20`,strokeWidth:s,cx:o/2,cy:o/2,r:(o-4)/2}),r(`circle`,{className:`text-primary transition-[stroke-dashoffset] duration-300 ease-linear`,strokeWidth:s,strokeLinecap:`round`,strokeDasharray:t,strokeDashoffset:n,cx:o/2,cy:o/2,r:(o-4)/2})]})})}case`fill`:{let t=f.fileState.progress,n=100-t;return r(p,{role:`progressbar`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":t,"aria-valuetext":`${t}%`,"aria-labelledby":f.nameId,"data-slot":`file-upload-progress`,...d,className:e(`absolute inset-0 bg-primary/50 transition-[clip-path] duration-300 ease-linear`,u),style:{clipPath:`inset(${n}% 0% 0% 0%)`}})}default:return r(p,{role:`progressbar`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":f.fileState.progress,"aria-valuetext":`${f.fileState.progress}%`,"aria-labelledby":f.nameId,"data-slot":`file-upload-progress`,...d,className:e(`relative h-1.5 w-full overflow-hidden rounded-full bg-primary/20`,u),children:r(`div`,{className:`h-full w-full flex-1 bg-primary transition-transform duration-300 ease-linear`,style:{transform:`translateX(-${100-f.fileState.progress}%)`}})})}}function B(e){let{asChild:n,onClick:i,...o}=e,s=w(y),c=N(y),l=t.useCallback(e=>{i?.(e),!(!c.fileState||e.defaultPrevented)&&s.dispatch({type:`REMOVE_FILE`,file:c.fileState.file})},[s,c.fileState,i]);return c.fileState?r(n?a:`button`,{type:`button`,"aria-controls":c.id,"aria-describedby":c.nameId,"data-slot":`file-upload-item-delete`,...o,onClick:l}):null}function V(e){let{asChild:n,forceMount:i,disabled:o,onClick:s,...c}=e,l=D(b),u=w(b),d=T(e=>e.files.size),f=o||l.disabled,p=t.useCallback(e=>{s?.(e),!e.defaultPrevented&&u.dispatch({type:`CLEAR`})},[u,s]);return i||d>0?r(n?a:`button`,{type:`button`,"aria-controls":l.listId,"data-slot":`file-upload-clear`,"data-disabled":f?``:void 0,...c,disabled:f,onClick:p}):null}export{V as FileUploadClear,k as FileUploadDropzone,P as FileUploadItem,B as FileUploadItemDelete,R as FileUploadItemMetadata,L as FileUploadItemPreview,z as FileUploadItemProgress,j as FileUploadList,O as FileUploadRoot,A as FileUploadTrigger,T as useStore};
+'use client';
+
+
+import { cn } from "../../lib/utils.js";
+import "../../lib/index.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { FileArchiveIcon, FileAudioIcon, FileCodeIcon, FileCogIcon, FileIcon, FileTextIcon, FileVideoIcon } from "lucide-react";
+import { useDirection } from "@radix-ui/react-direction";
+
+//#region src/components/ui/file-upload.tsx
+const ROOT_NAME = "FileUpload";
+const DROPZONE_NAME = "FileUploadDropzone";
+const TRIGGER_NAME = "FileUploadTrigger";
+const LIST_NAME = "FileUploadList";
+const ITEM_NAME = "FileUploadItem";
+const ITEM_PREVIEW_NAME = "FileUploadItemPreview";
+const ITEM_METADATA_NAME = "FileUploadItemMetadata";
+const ITEM_PROGRESS_NAME = "FileUploadItemProgress";
+const ITEM_DELETE_NAME = "FileUploadItemDelete";
+const CLEAR_NAME = "FileUploadClear";
+function useLazyRef(fn) {
+	const ref = React.useRef(null);
+	if (ref.current === null) ref.current = fn();
+	return ref;
+}
+function createStore(listeners, files, urlCache, invalid, onValueChange) {
+	let state = {
+		files,
+		dragOver: false,
+		invalid
+	};
+	function reducer(state$1, action) {
+		switch (action.type) {
+			case "ADD_FILES":
+				for (const file of action.files) files.set(file, {
+					file,
+					progress: 0,
+					status: "idle"
+				});
+				if (onValueChange) onValueChange(Array.from(files.values()).map((fileState) => fileState.file));
+				return {
+					...state$1,
+					files
+				};
+			case "SET_FILES": {
+				const newFileSet = new Set(action.files);
+				for (const existingFile of files.keys()) if (!newFileSet.has(existingFile)) files.delete(existingFile);
+				for (const file of action.files) if (!files.get(file)) files.set(file, {
+					file,
+					progress: 0,
+					status: "idle"
+				});
+				return {
+					...state$1,
+					files
+				};
+			}
+			case "SET_PROGRESS": {
+				const fileState = files.get(action.file);
+				if (fileState) files.set(action.file, {
+					...fileState,
+					progress: action.progress,
+					status: "uploading"
+				});
+				return {
+					...state$1,
+					files
+				};
+			}
+			case "SET_SUCCESS": {
+				const fileState = files.get(action.file);
+				if (fileState) files.set(action.file, {
+					...fileState,
+					progress: 100,
+					status: "success"
+				});
+				return {
+					...state$1,
+					files
+				};
+			}
+			case "SET_ERROR": {
+				const fileState = files.get(action.file);
+				if (fileState) files.set(action.file, {
+					...fileState,
+					error: action.error,
+					status: "error"
+				});
+				return {
+					...state$1,
+					files
+				};
+			}
+			case "REMOVE_FILE":
+				if (urlCache) {
+					const cachedUrl = urlCache.get(action.file);
+					if (cachedUrl) {
+						URL.revokeObjectURL(cachedUrl);
+						urlCache.delete(action.file);
+					}
+				}
+				files.delete(action.file);
+				if (onValueChange) onValueChange(Array.from(files.values()).map((fileState) => fileState.file));
+				return {
+					...state$1,
+					files
+				};
+			case "SET_DRAG_OVER": return {
+				...state$1,
+				dragOver: action.dragOver
+			};
+			case "SET_INVALID": return {
+				...state$1,
+				invalid: action.invalid
+			};
+			case "CLEAR":
+				if (urlCache) for (const file of files.keys()) {
+					const cachedUrl = urlCache.get(file);
+					if (cachedUrl) {
+						URL.revokeObjectURL(cachedUrl);
+						urlCache.delete(file);
+					}
+				}
+				files.clear();
+				if (onValueChange) onValueChange([]);
+				return {
+					...state$1,
+					files,
+					invalid: false
+				};
+			default: return state$1;
+		}
+	}
+	function getState() {
+		return state;
+	}
+	function dispatch(action) {
+		state = reducer(state, action);
+		for (const listener of listeners) listener();
+	}
+	function subscribe(listener) {
+		listeners.add(listener);
+		return () => listeners.delete(listener);
+	}
+	return {
+		getState,
+		dispatch,
+		subscribe
+	};
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+	const context = React.use(StoreContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function useStore(selector) {
+	const store = useStoreContext("useStore");
+	const lastValueRef = useLazyRef(() => null);
+	const getSnapshot = React.useCallback(() => {
+		const state = store.getState();
+		const prevValue = lastValueRef.current;
+		if (prevValue && prevValue.state === state) return prevValue.value;
+		const nextValue = selector(state);
+		lastValueRef.current = {
+			value: nextValue,
+			state
+		};
+		return nextValue;
+	}, [
+		store,
+		selector,
+		lastValueRef
+	]);
+	return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const FileUploadContext = React.createContext(null);
+function useFileUploadContext(consumerName) {
+	const context = React.use(FileUploadContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function FileUploadRoot(props) {
+	const { value, defaultValue, onValueChange, onAccept, onFileAccept, onFileReject, onFilesReject, onFileValidate, onUpload, accept, maxFiles, maxSize, dir: dirProp, label, name, asChild, disabled = false, invalid = false, multiple = false, required = false, children, className,...rootProps } = props;
+	const inputId = React.useId();
+	const dropzoneId = React.useId();
+	const listId = React.useId();
+	const labelId = React.useId();
+	const dir = useDirection(dirProp);
+	const listeners = useLazyRef(() => /* @__PURE__ */ new Set()).current;
+	const files = useLazyRef(() => /* @__PURE__ */ new Map()).current;
+	const urlCache = useLazyRef(() => /* @__PURE__ */ new WeakMap()).current;
+	const inputRef = React.useRef(null);
+	const isControlled = value !== void 0;
+	const store = React.useMemo(() => createStore(listeners, files, urlCache, invalid, onValueChange), [
+		listeners,
+		files,
+		invalid,
+		onValueChange,
+		urlCache
+	]);
+	const acceptTypes = React.useMemo(() => accept?.split(",").map((t) => t.trim()) ?? null, [accept]);
+	const onProgress = useLazyRef(() => {
+		let frame = 0;
+		return (file, progress) => {
+			if (frame) return;
+			frame = requestAnimationFrame(() => {
+				frame = 0;
+				store.dispatch({
+					type: "SET_PROGRESS",
+					file,
+					progress: Math.min(Math.max(0, progress), 100)
+				});
+			});
+		};
+	}).current;
+	React.useEffect(() => {
+		if (isControlled) store.dispatch({
+			type: "SET_FILES",
+			files: value
+		});
+		else if (defaultValue && defaultValue.length > 0 && !store.getState().files.size) store.dispatch({
+			type: "SET_FILES",
+			files: defaultValue
+		});
+	}, [
+		value,
+		defaultValue,
+		isControlled,
+		store
+	]);
+	React.useEffect(() => {
+		return () => {
+			for (const file of files.keys()) {
+				const cachedUrl = urlCache.get(file);
+				if (cachedUrl) URL.revokeObjectURL(cachedUrl);
+			}
+		};
+	}, [files, urlCache]);
+	const onFilesUpload = React.useCallback(async (files$1) => {
+		try {
+			for (const file of files$1) store.dispatch({
+				type: "SET_PROGRESS",
+				file,
+				progress: 0
+			});
+			if (onUpload) await onUpload(files$1, {
+				onProgress,
+				onSuccess: (file) => {
+					store.dispatch({
+						type: "SET_SUCCESS",
+						file
+					});
+				},
+				onError: (file, error) => {
+					store.dispatch({
+						type: "SET_ERROR",
+						file,
+						error: error.message ?? "Upload failed"
+					});
+				}
+			});
+			else for (const file of files$1) store.dispatch({
+				type: "SET_SUCCESS",
+				file
+			});
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : "Upload failed";
+			for (const file of files$1) store.dispatch({
+				type: "SET_ERROR",
+				file,
+				error: errorMessage
+			});
+		}
+	}, [
+		store,
+		onUpload,
+		onProgress
+	]);
+	const onFilesChange = React.useCallback((originalFiles) => {
+		if (disabled) return;
+		let filesToProcess = [...originalFiles];
+		let invalid$1 = false;
+		const allRejectedFiles = [];
+		if (maxFiles) {
+			const currentCount = store.getState().files.size;
+			const remainingSlotCount = Math.max(0, maxFiles - currentCount);
+			if (remainingSlotCount < filesToProcess.length) {
+				const rejectedFromMaxFiles = filesToProcess.slice(remainingSlotCount);
+				invalid$1 = true;
+				filesToProcess = filesToProcess.slice(0, remainingSlotCount);
+				for (const file of rejectedFromMaxFiles) {
+					let rejectionMessage = `Maximum ${maxFiles} files allowed`;
+					if (onFileValidate) {
+						const validationMessage = onFileValidate(file);
+						if (validationMessage) rejectionMessage = validationMessage;
+					}
+					onFileReject?.(file, rejectionMessage);
+					allRejectedFiles.push({
+						file,
+						message: rejectionMessage
+					});
+				}
+			}
+		}
+		const acceptedFiles = [];
+		const rejectedFiles = [];
+		for (const file of filesToProcess) {
+			let rejected = false;
+			let rejectionMessage = "";
+			if (onFileValidate) {
+				const validationMessage = onFileValidate(file);
+				if (validationMessage) {
+					rejectionMessage = validationMessage;
+					onFileReject?.(file, rejectionMessage);
+					rejected = true;
+					invalid$1 = true;
+					continue;
+				}
+			}
+			if (acceptTypes) {
+				const fileType = file.type;
+				const fileExtension = `.${file.name.split(".").pop()}`;
+				if (!acceptTypes.some((type) => type === fileType || type === fileExtension || type.includes("/*") && fileType.startsWith(type.replace("/*", "/")))) {
+					rejectionMessage = "File type not accepted";
+					onFileReject?.(file, rejectionMessage);
+					rejected = true;
+					invalid$1 = true;
+				}
+			}
+			if (maxSize && file.size > maxSize) {
+				rejectionMessage = "File too large";
+				onFileReject?.(file, rejectionMessage);
+				rejected = true;
+				invalid$1 = true;
+			}
+			if (!rejected) acceptedFiles.push(file);
+			else rejectedFiles.push({
+				file,
+				message: rejectionMessage
+			});
+		}
+		allRejectedFiles.push(...rejectedFiles);
+		if (invalid$1) {
+			store.dispatch({
+				type: "SET_INVALID",
+				invalid: invalid$1
+			});
+			setTimeout(() => {
+				store.dispatch({
+					type: "SET_INVALID",
+					invalid: false
+				});
+			}, 2e3);
+		}
+		if (allRejectedFiles.length > 0) onFilesReject?.(allRejectedFiles);
+		if (acceptedFiles.length > 0) {
+			store.dispatch({
+				type: "ADD_FILES",
+				files: acceptedFiles
+			});
+			if (isControlled && onValueChange) onValueChange([...Array.from(store.getState().files.values()).map((f) => f.file)]);
+			if (onAccept) onAccept(acceptedFiles);
+			for (const file of acceptedFiles) onFileAccept?.(file);
+			if (onUpload) requestAnimationFrame(() => {
+				onFilesUpload(acceptedFiles);
+			});
+		}
+	}, [
+		store,
+		isControlled,
+		onValueChange,
+		onAccept,
+		onFileAccept,
+		onUpload,
+		onFilesUpload,
+		maxFiles,
+		onFileValidate,
+		onFileReject,
+		onFilesReject,
+		acceptTypes,
+		maxSize,
+		disabled
+	]);
+	const onInputChange = React.useCallback((event) => {
+		onFilesChange(Array.from(event.target.files ?? []));
+		event.target.value = "";
+	}, [onFilesChange]);
+	const contextValue = React.useMemo(() => ({
+		dropzoneId,
+		inputId,
+		listId,
+		labelId,
+		dir,
+		disabled,
+		inputRef,
+		urlCache
+	}), [
+		dropzoneId,
+		inputId,
+		listId,
+		labelId,
+		dir,
+		disabled,
+		urlCache
+	]);
+	const RootPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(StoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(FileUploadContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ jsxs(RootPrimitive, {
+				"data-disabled": disabled ? "" : void 0,
+				"data-slot": "file-upload",
+				dir,
+				...rootProps,
+				className: cn("relative flex flex-col gap-2", className),
+				children: [
+					children,
+					/* @__PURE__ */ jsx("input", {
+						type: "file",
+						id: inputId,
+						"aria-labelledby": labelId,
+						"aria-describedby": dropzoneId,
+						ref: inputRef,
+						tabIndex: -1,
+						accept,
+						name,
+						className: "sr-only",
+						disabled,
+						multiple,
+						required,
+						onChange: onInputChange
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: labelId,
+						className: "sr-only",
+						children: label ?? "File upload"
+					})
+				]
+			})
+		})
+	});
+}
+function FileUploadDropzone(props) {
+	const { asChild, className, onClick: onClickProp, onDragOver: onDragOverProp, onDragEnter: onDragEnterProp, onDragLeave: onDragLeaveProp, onDrop: onDropProp, onPaste: onPasteProp, onKeyDown: onKeyDownProp,...dropzoneProps } = props;
+	const context = useFileUploadContext(DROPZONE_NAME);
+	const store = useStoreContext(DROPZONE_NAME);
+	const dragOver = useStore((state) => state.dragOver);
+	const invalid = useStore((state) => state.invalid);
+	const onClick = React.useCallback((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		const { target } = event;
+		if (!(target instanceof HTMLElement && target.closest("[data-slot=\"file-upload-trigger\"]"))) context.inputRef.current?.click();
+	}, [context.inputRef, onClickProp]);
+	const onDragOver = React.useCallback((event) => {
+		onDragOverProp?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: true
+		});
+	}, [store, onDragOverProp]);
+	const onDragEnter = React.useCallback((event) => {
+		onDragEnterProp?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: true
+		});
+	}, [store, onDragEnterProp]);
+	const onDragLeave = React.useCallback((event) => {
+		onDragLeaveProp?.(event);
+		if (event.defaultPrevented) return;
+		const { relatedTarget } = event;
+		if (relatedTarget && relatedTarget instanceof Node && event.currentTarget.contains(relatedTarget)) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: false
+		});
+	}, [store, onDragLeaveProp]);
+	const onDrop = React.useCallback((event) => {
+		onDropProp?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: false
+		});
+		const files = Array.from(event.dataTransfer.files);
+		const inputElement = context.inputRef.current;
+		if (!inputElement) return;
+		const dataTransfer = new DataTransfer();
+		for (const file of files) dataTransfer.items.add(file);
+		inputElement.files = dataTransfer.files;
+		inputElement.dispatchEvent(new Event("change", { bubbles: true }));
+	}, [
+		store,
+		context.inputRef,
+		onDropProp
+	]);
+	const onPaste = React.useCallback((event) => {
+		onPasteProp?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: false
+		});
+		const items = event.clipboardData?.items;
+		if (!items) return;
+		const files = [];
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			if (item?.kind === "file") {
+				const file = item.getAsFile();
+				if (file) files.push(file);
+			}
+		}
+		if (files.length === 0) return;
+		const inputElement = context.inputRef.current;
+		if (!inputElement) return;
+		const dataTransfer = new DataTransfer();
+		for (const file of files) dataTransfer.items.add(file);
+		inputElement.files = dataTransfer.files;
+		inputElement.dispatchEvent(new Event("change", { bubbles: true }));
+	}, [
+		store,
+		context.inputRef,
+		onPasteProp
+	]);
+	const onKeyDown = React.useCallback((event) => {
+		onKeyDownProp?.(event);
+		if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			context.inputRef.current?.click();
+		}
+	}, [context.inputRef, onKeyDownProp]);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		role: "region",
+		id: context.dropzoneId,
+		"aria-controls": `${context.inputId} ${context.listId}`,
+		"aria-disabled": context.disabled,
+		"aria-invalid": invalid,
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-dragging": dragOver ? "" : void 0,
+		"data-invalid": invalid ? "" : void 0,
+		"data-slot": "file-upload-dropzone",
+		dir: context.dir,
+		tabIndex: context.disabled ? void 0 : 0,
+		...dropzoneProps,
+		className: cn("relative flex select-none flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-disabled:pointer-events-none data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20", className),
+		onClick,
+		onDragEnter,
+		onDragLeave,
+		onDragOver,
+		onDrop,
+		onKeyDown,
+		onPaste
+	});
+}
+function FileUploadTrigger(props) {
+	const { asChild, onClick: onClickProp,...triggerProps } = props;
+	const context = useFileUploadContext(TRIGGER_NAME);
+	const onClick = React.useCallback((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		context.inputRef.current?.click();
+	}, [context.inputRef, onClickProp]);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		type: "button",
+		"aria-controls": context.inputId,
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-slot": "file-upload-trigger",
+		...triggerProps,
+		disabled: context.disabled,
+		onClick
+	});
+}
+function FileUploadList(props) {
+	const { className, orientation = "vertical", asChild, forceMount,...listProps } = props;
+	const context = useFileUploadContext(LIST_NAME);
+	const fileCount = useStore((state) => state.files.size);
+	const shouldRender = forceMount || fileCount > 0;
+	if (!shouldRender) return null;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		role: "list",
+		id: context.listId,
+		"aria-orientation": orientation,
+		"data-orientation": orientation,
+		"data-slot": "file-upload-list",
+		"data-state": shouldRender ? "active" : "inactive",
+		dir: context.dir,
+		...listProps,
+		className: cn("data-[state=inactive]:fade-out-0 data-[state=active]:fade-in-0 data-[state=inactive]:slide-out-to-top-2 data-[state=active]:slide-in-from-top-2 flex flex-col gap-2 data-[state=active]:animate-in data-[state=inactive]:animate-out", orientation === "horizontal" && "flex-row overflow-x-auto p-1.5", className)
+	});
+}
+const FileUploadItemContext = React.createContext(null);
+function useFileUploadItemContext(consumerName) {
+	const context = React.use(FileUploadItemContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+	return context;
+}
+function FileUploadItem(props) {
+	const { value, asChild, className,...itemProps } = props;
+	const id = React.useId();
+	const statusId = `${id}-status`;
+	const nameId = `${id}-name`;
+	const sizeId = `${id}-size`;
+	const messageId = `${id}-message`;
+	const context = useFileUploadContext(ITEM_NAME);
+	const fileState = useStore((state) => state.files.get(value));
+	const fileCount = useStore((state) => state.files.size);
+	const fileIndex = useStore((state) => {
+		return Array.from(state.files.keys()).indexOf(value) + 1;
+	});
+	const itemContext = React.useMemo(() => ({
+		id,
+		fileState,
+		nameId,
+		sizeId,
+		statusId,
+		messageId
+	}), [
+		id,
+		fileState,
+		statusId,
+		nameId,
+		sizeId,
+		messageId
+	]);
+	if (!fileState) return null;
+	const statusText = fileState.error ? `Error: ${fileState.error}` : fileState.status === "uploading" ? `Uploading: ${fileState.progress}% complete` : fileState.status === "success" ? "Upload complete" : "Ready to upload";
+	const ItemPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(FileUploadItemContext.Provider, {
+		value: itemContext,
+		children: /* @__PURE__ */ jsxs(ItemPrimitive, {
+			role: "listitem",
+			id,
+			"aria-setsize": fileCount,
+			"aria-posinset": fileIndex,
+			"aria-describedby": `${nameId} ${sizeId} ${statusId} ${fileState.error ? messageId : ""}`,
+			"aria-labelledby": nameId,
+			"data-slot": "file-upload-item",
+			dir: context.dir,
+			...itemProps,
+			className: cn("relative flex items-center  rounded-md border p-3", className),
+			children: [props.children, /* @__PURE__ */ jsx("span", {
+				id: statusId,
+				className: "sr-only",
+				children: statusText
+			})]
+		})
+	});
+}
+function formatBytes(bytes) {
+	if (bytes === 0) return "0 B";
+	const sizes = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(1024));
+	return `${(bytes / 1024 ** i).toFixed(i ? 1 : 0)} ${sizes[i]}`;
+}
+function getFileIcon(file) {
+	const { type } = file;
+	const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+	if (type.startsWith("video/")) return /* @__PURE__ */ jsx(FileVideoIcon, {});
+	if (type.startsWith("audio/")) return /* @__PURE__ */ jsx(FileAudioIcon, {});
+	if (type.startsWith("text/") || [
+		"txt",
+		"md",
+		"rtf",
+		"pdf"
+	].includes(extension)) return /* @__PURE__ */ jsx(FileTextIcon, {});
+	if ([
+		"html",
+		"css",
+		"js",
+		"jsx",
+		"ts",
+		"tsx",
+		"json",
+		"xml",
+		"php",
+		"py",
+		"rb",
+		"java",
+		"c",
+		"cpp",
+		"cs"
+	].includes(extension)) return /* @__PURE__ */ jsx(FileCodeIcon, {});
+	if ([
+		"zip",
+		"rar",
+		"7z",
+		"tar",
+		"gz",
+		"bz2"
+	].includes(extension)) return /* @__PURE__ */ jsx(FileArchiveIcon, {});
+	if ([
+		"exe",
+		"msi",
+		"app",
+		"apk",
+		"deb",
+		"rpm"
+	].includes(extension) || type.startsWith("application/")) return /* @__PURE__ */ jsx(FileCogIcon, {});
+	return /* @__PURE__ */ jsx(FileIcon, {});
+}
+function FileUploadItemPreview(props) {
+	const { render, asChild, children, className,...previewProps } = props;
+	const itemContext = useFileUploadItemContext(ITEM_PREVIEW_NAME);
+	const context = useFileUploadContext(ITEM_PREVIEW_NAME);
+	const getDefaultRender = React.useCallback((file) => {
+		if (itemContext.fileState?.file.type.startsWith("image/")) {
+			let url = context.urlCache.get(file);
+			if (!url) {
+				url = URL.createObjectURL(file);
+				context.urlCache.set(file, url);
+			}
+			return /* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: file.name,
+				className: "size-full object-cover"
+			});
+		}
+		return getFileIcon(file);
+	}, [itemContext.fileState?.file.type, context.urlCache]);
+	const onPreviewRender = React.useCallback((file) => {
+		if (render) return render(file, () => getDefaultRender(file));
+		return getDefaultRender(file);
+	}, [render, getDefaultRender]);
+	if (!itemContext.fileState) return null;
+	return /* @__PURE__ */ jsxs(asChild ? Slot : "div", {
+		"aria-labelledby": itemContext.nameId,
+		"data-slot": "file-upload-preview",
+		...previewProps,
+		className: cn("relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded border bg-accent/50 [&>svg]:size-10", className),
+		children: [onPreviewRender(itemContext.fileState.file), children]
+	});
+}
+function FileUploadItemMetadata(props) {
+	const { asChild, size = "default", children, className,...metadataProps } = props;
+	const context = useFileUploadContext(ITEM_METADATA_NAME);
+	const itemContext = useFileUploadItemContext(ITEM_METADATA_NAME);
+	if (!itemContext.fileState) return null;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		"data-slot": "file-upload-metadata",
+		dir: context.dir,
+		...metadataProps,
+		className: cn("flex min-w-0 flex-1 flex-col", className),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				id: itemContext.nameId,
+				className: cn("truncate font-medium text-sm", size === "sm" && "font-normal text-[13px] leading-snug"),
+				children: itemContext.fileState.file.name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				id: itemContext.sizeId,
+				className: cn("truncate text-muted-foreground text-xs", size === "sm" && "text-[11px] leading-snug"),
+				children: formatBytes(itemContext.fileState.file.size)
+			}),
+			itemContext.fileState.error && /* @__PURE__ */ jsx("span", {
+				id: itemContext.messageId,
+				className: "text-destructive text-xs",
+				children: itemContext.fileState.error
+			})
+		] })
+	});
+}
+function FileUploadItemProgress(props) {
+	const { variant = "linear", size = 40, strokeWidth = 2, asChild, forceMount, className,...progressProps } = props;
+	const itemContext = useFileUploadItemContext(ITEM_PROGRESS_NAME);
+	if (!itemContext.fileState) return null;
+	if (!(forceMount || itemContext.fileState.progress !== 100)) return null;
+	const ItemProgressPrimitive = asChild ? Slot : "div";
+	switch (variant) {
+		case "circular": {
+			const circumference = 2 * Math.PI * ((size - 4) / 2);
+			const strokeDashoffset = circumference - itemContext.fileState.progress / 100 * circumference;
+			return /* @__PURE__ */ jsx(ItemProgressPrimitive, {
+				role: "progressbar",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": itemContext.fileState.progress,
+				"aria-valuetext": `${itemContext.fileState.progress}%`,
+				"aria-labelledby": itemContext.nameId,
+				"data-slot": "file-upload-progress",
+				...progressProps,
+				className: cn("-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2", className),
+				children: /* @__PURE__ */ jsxs("svg", {
+					className: "-rotate-90 transform",
+					width: size,
+					height: size,
+					viewBox: `0 0 ${size} ${size}`,
+					fill: "none",
+					stroke: "currentColor",
+					children: [/* @__PURE__ */ jsx("circle", {
+						className: "text-primary/20",
+						strokeWidth,
+						cx: size / 2,
+						cy: size / 2,
+						r: (size - 4) / 2
+					}), /* @__PURE__ */ jsx("circle", {
+						className: "text-primary transition-[stroke-dashoffset] duration-300 ease-linear",
+						strokeWidth,
+						strokeLinecap: "round",
+						strokeDasharray: circumference,
+						strokeDashoffset,
+						cx: size / 2,
+						cy: size / 2,
+						r: (size - 4) / 2
+					})]
+				})
+			});
+		}
+		case "fill": {
+			const progressPercentage = itemContext.fileState.progress;
+			const topInset = 100 - progressPercentage;
+			return /* @__PURE__ */ jsx(ItemProgressPrimitive, {
+				role: "progressbar",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": progressPercentage,
+				"aria-valuetext": `${progressPercentage}%`,
+				"aria-labelledby": itemContext.nameId,
+				"data-slot": "file-upload-progress",
+				...progressProps,
+				className: cn("absolute inset-0 bg-primary/50 transition-[clip-path] duration-300 ease-linear", className),
+				style: { clipPath: `inset(${topInset}% 0% 0% 0%)` }
+			});
+		}
+		default: return /* @__PURE__ */ jsx(ItemProgressPrimitive, {
+			role: "progressbar",
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": itemContext.fileState.progress,
+			"aria-valuetext": `${itemContext.fileState.progress}%`,
+			"aria-labelledby": itemContext.nameId,
+			"data-slot": "file-upload-progress",
+			...progressProps,
+			className: cn("relative h-1.5 w-full overflow-hidden rounded-full bg-primary/20", className),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "h-full w-full flex-1 bg-primary transition-transform duration-300 ease-linear",
+				style: { transform: `translateX(-${100 - itemContext.fileState.progress}%)` }
+			})
+		});
+	}
+}
+function FileUploadItemDelete(props) {
+	const { asChild, onClick: onClickProp,...deleteProps } = props;
+	const store = useStoreContext(ITEM_DELETE_NAME);
+	const itemContext = useFileUploadItemContext(ITEM_DELETE_NAME);
+	const onClick = React.useCallback((event) => {
+		onClickProp?.(event);
+		if (!itemContext.fileState || event.defaultPrevented) return;
+		store.dispatch({
+			type: "REMOVE_FILE",
+			file: itemContext.fileState.file
+		});
+	}, [
+		store,
+		itemContext.fileState,
+		onClickProp
+	]);
+	if (!itemContext.fileState) return null;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		type: "button",
+		"aria-controls": itemContext.id,
+		"aria-describedby": itemContext.nameId,
+		"data-slot": "file-upload-item-delete",
+		...deleteProps,
+		onClick
+	});
+}
+function FileUploadClear(props) {
+	const { asChild, forceMount, disabled, onClick: onClickProp,...clearProps } = props;
+	const context = useFileUploadContext(CLEAR_NAME);
+	const store = useStoreContext(CLEAR_NAME);
+	const fileCount = useStore((state) => state.files.size);
+	const isDisabled = disabled || context.disabled;
+	const onClick = React.useCallback((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		store.dispatch({ type: "CLEAR" });
+	}, [store, onClickProp]);
+	if (!(forceMount || fileCount > 0)) return null;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		type: "button",
+		"aria-controls": context.listId,
+		"data-slot": "file-upload-clear",
+		"data-disabled": isDisabled ? "" : void 0,
+		...clearProps,
+		disabled: isDisabled,
+		onClick
+	});
+}
+
+//#endregion
+export { FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadRoot, FileUploadTrigger, useStore };