@pixpilot/shadcn-ui 0.4.0 → 0.4.2

package/dist/confirmation-dialog/ConfirmationDialog.cjs

@@ -1 +1,46 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`../packages/shadcn/src/components/ui/dialog.cjs`);let n=require(`@pixpilot/shadcn`);n=e.__toESM(n);let r=require(`react/jsx-runtime`);r=e.__toESM(r);let i=require(`@ebay/nice-modal-react`);i=e.__toESM(i);const a=i.default.create(e=>{let{title:a=`Confirmation Dialog`}=e,o=(0,i.useModal)(),s=()=>{e.onConfirm?.(),o.resolve(!0),o.hide()},c=()=>{e.onCancel?.(),o.resolve(!1),o.hide()};return(0,r.jsx)(t.Dialog,{open:o.visible,onOpenChange:e=>{e||c()},children:(0,r.jsxs)(t.DialogContent,{children:[(0,r.jsxs)(t.DialogHeader,{children:[(0,r.jsx)(t.DialogTitle,{children:a}),e.description!=null&&(0,r.jsx)(t.DialogDescription,{children:e.description})]}),(0,r.jsxs)(t.DialogFooter,{children:[(0,r.jsx)(t.DialogClose,{asChild:!0,children:(0,r.jsx)(n.Button,{variant:`outline`,onClick:c,children:e.cancelText??`Cancel`})}),(0,r.jsx)(n.Button,{onClick:s,children:e.confirmText??`Confirm`})]})]})})});a.displayName=`ConfirmationDialog`;var o=a;exports.default=o;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __ebay_nice_modal_react = require("@ebay/nice-modal-react");
+__ebay_nice_modal_react = require_rolldown_runtime.__toESM(__ebay_nice_modal_react);
+
+//#region src/confirmation-dialog/ConfirmationDialog.tsx
+const ConfirmationDialog = __ebay_nice_modal_react.default.create((props) => {
+	const { title = "Confirmation Dialog" } = props;
+	const modal = (0, __ebay_nice_modal_react.useModal)();
+	const handleConfirm = () => {
+		props.onConfirm?.();
+		modal.resolve(true);
+		modal.hide();
+	};
+	const handleCancel = () => {
+		props.onCancel?.();
+		modal.resolve(false);
+		modal.hide();
+	};
+	const onOpenChange = (isOpen) => {
+		if (!isOpen) handleCancel();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Dialog, {
+		open: modal.visible,
+		onOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogTitle, { children: title }), props.description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogDescription, { children: props.description })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogClose, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+				variant: "outline",
+				onClick: handleCancel,
+				children: props.cancelText ?? "Cancel"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+			onClick: handleConfirm,
+			children: props.confirmText ?? "Confirm"
+		})] })] })
+	});
+});
+ConfirmationDialog.displayName = "ConfirmationDialog";
+var ConfirmationDialog_default = ConfirmationDialog;
+
+//#endregion
+exports.default = ConfirmationDialog_default;

package/dist/confirmation-dialog/ConfirmationDialog.d.cts

@@ -1,4 +1,5 @@
 import "react";
+import "@ebay/nice-modal-react";
 
 //#region src/confirmation-dialog/ConfirmationDialog.d.ts
 interface ConfirmationDialogProps {

package/dist/confirmation-dialog/ConfirmationDialog.js

@@ -1 +1,42 @@
-import{Dialog as e,DialogClose as t,DialogContent as n,DialogDescription as r,DialogFooter as i,DialogHeader as a,DialogTitle as o}from"../packages/shadcn/src/components/ui/dialog.js";import{Button as s}from"@pixpilot/shadcn";import{jsx as c,jsxs as l}from"react/jsx-runtime";import u,{useModal as d}from"@ebay/nice-modal-react";const f=u.create(u=>{let{title:f=`Confirmation Dialog`}=u,p=d(),m=()=>{u.onConfirm?.(),p.resolve(!0),p.hide()},h=()=>{u.onCancel?.(),p.resolve(!1),p.hide()};return c(e,{open:p.visible,onOpenChange:e=>{e||h()},children:l(n,{children:[l(a,{children:[c(o,{children:f}),u.description!=null&&c(r,{children:u.description})]}),l(i,{children:[c(t,{asChild:!0,children:c(s,{variant:`outline`,onClick:h,children:u.cancelText??`Cancel`})}),c(s,{onClick:m,children:u.confirmText??`Confirm`})]})]})})});f.displayName=`ConfirmationDialog`;var p=f;export{p as default};
+import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@pixpilot/shadcn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import NiceModal, { useModal } from "@ebay/nice-modal-react";
+
+//#region src/confirmation-dialog/ConfirmationDialog.tsx
+const ConfirmationDialog = NiceModal.create((props) => {
+	const { title = "Confirmation Dialog" } = props;
+	const modal = useModal();
+	const handleConfirm = () => {
+		props.onConfirm?.();
+		modal.resolve(true);
+		modal.hide();
+	};
+	const handleCancel = () => {
+		props.onCancel?.();
+		modal.resolve(false);
+		modal.hide();
+	};
+	const onOpenChange = (isOpen) => {
+		if (!isOpen) handleCancel();
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: modal.visible,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), props.description != null && /* @__PURE__ */ jsx(DialogDescription, { children: props.description })] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				onClick: handleCancel,
+				children: props.cancelText ?? "Cancel"
+			})
+		}), /* @__PURE__ */ jsx(Button, {
+			onClick: handleConfirm,
+			children: props.confirmText ?? "Confirm"
+		})] })] })
+	});
+});
+ConfirmationDialog.displayName = "ConfirmationDialog";
+var ConfirmationDialog_default = ConfirmationDialog;
+
+//#endregion
+export { ConfirmationDialog_default as default };

package/dist/confirmation-dialog/DialogProvider.cjs

@@ -1 +1,16 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`);let t=require(`react`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);let r=require(`@ebay/nice-modal-react`);r=e.__toESM(r);const i=e=>(0,n.jsx)(r.default.Provider,{children:e.children});i.displayName=`DialogProvider`,exports.DialogProvider=i;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __ebay_nice_modal_react = require("@ebay/nice-modal-react");
+__ebay_nice_modal_react = require_rolldown_runtime.__toESM(__ebay_nice_modal_react);
+
+//#region src/confirmation-dialog/DialogProvider.tsx
+const DialogProvider = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ebay_nice_modal_react.default.Provider, { children: props.children });
+};
+DialogProvider.displayName = "DialogProvider";
+
+//#endregion
+exports.DialogProvider = DialogProvider;

package/dist/confirmation-dialog/DialogProvider.js

@@ -1 +1,12 @@
-import e from"react";import{jsx as t}from"react/jsx-runtime";import n from"@ebay/nice-modal-react";const r=e=>t(n.Provider,{children:e.children});r.displayName=`DialogProvider`;export{r as DialogProvider};
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import NiceModal from "@ebay/nice-modal-react";
+
+//#region src/confirmation-dialog/DialogProvider.tsx
+const DialogProvider = (props) => {
+	return /* @__PURE__ */ jsx(NiceModal.Provider, { children: props.children });
+};
+DialogProvider.displayName = "DialogProvider";
+
+//#endregion
+export { DialogProvider };

package/dist/confirmation-dialog/confirmation-dialogs.cjs

@@ -1 +1,14 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./ConfirmationDialog.cjs`);let n=require(`@ebay/nice-modal-react`);n=e.__toESM(n);async function r(e){let r=crypto.randomUUID();return n.default.register(r,t.default),n.default.show(r,e)}exports.showConfirmDialog=r;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_ConfirmationDialog = require('./ConfirmationDialog.cjs');
+let __ebay_nice_modal_react = require("@ebay/nice-modal-react");
+__ebay_nice_modal_react = require_rolldown_runtime.__toESM(__ebay_nice_modal_react);
+
+//#region src/confirmation-dialog/confirmation-dialogs.tsx
+async function showConfirmDialog(props) {
+	const id = crypto.randomUUID();
+	__ebay_nice_modal_react.default.register(id, require_ConfirmationDialog.default);
+	return __ebay_nice_modal_react.default.show(id, props);
+}
+
+//#endregion
+exports.showConfirmDialog = showConfirmDialog;

package/dist/confirmation-dialog/confirmation-dialogs.js

@@ -1 +1,12 @@
-import e from"./ConfirmationDialog.js";import t from"@ebay/nice-modal-react";async function n(n){let r=crypto.randomUUID();return t.register(r,e),t.show(r,n)}export{n as showConfirmDialog};
+import ConfirmationDialog_default from "./ConfirmationDialog.js";
+import NiceModal from "@ebay/nice-modal-react";
+
+//#region src/confirmation-dialog/confirmation-dialogs.tsx
+async function showConfirmDialog(props) {
+	const id = crypto.randomUUID();
+	NiceModal.register(id, ConfirmationDialog_default);
+	return NiceModal.show(id, props);
+}
+
+//#endregion
+export { showConfirmDialog };

package/dist/confirmation-dialog/index.cjs

@@ -1 +1,6 @@
-"use client";const e=require(`../_virtual/rolldown_runtime.cjs`);require(`./ConfirmationDialog.cjs`);const t=require(`./confirmation-dialogs.cjs`),n=require(`./DialogProvider.cjs`);
+'use client';
+
+
+require('./ConfirmationDialog.cjs');
+const require_confirmation_dialogs = require('./confirmation-dialogs.cjs');
+const require_DialogProvider = require('./DialogProvider.cjs');

package/dist/confirmation-dialog/index.js

@@ -1 +1,6 @@
-"use client";import"./ConfirmationDialog.js";import{showConfirmDialog as e}from"./confirmation-dialogs.js";import{DialogProvider as t}from"./DialogProvider.js";
+'use client';
+
+
+import "./ConfirmationDialog.js";
+import { showConfirmDialog } from "./confirmation-dialogs.js";
+import { DialogProvider } from "./DialogProvider.js";

package/dist/file-upload/FileUpload.cjs

@@ -1 +1,68 @@
-"use client";const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./FileUploadItems.cjs`),n=require(`./hooks/use-file-upload-store.cjs`);let r=require(`@pixpilot/shadcn`);r=e.__toESM(r);let i=require(`lucide-react`);i=e.__toESM(i);let a=require(`react`);a=e.__toESM(a);let o=require(`react/jsx-runtime`);o=e.__toESM(o);function s(e){let{value:s,onChange:c,className:l,multiple:u=!0,onAccept:d,maxFiles:f,preventDuplicates:p,...m}=e,{handleAccept:h,displayFiles:g,deleteFile:_,getFile:v,orgValue:y}=n.useFileUploadStore({value:s,onChange:c,multiple:u,preventDuplicates:p}),b=a.useCallback(e=>{d?.(e),h(e)},[h,d]),x=(0,r.cn)(`p-1.5`);return(0,o.jsx)(r.FileUpload,{...m,value:y,onAccept:b,multiple:u,className:(0,r.cn)(`w-full`,l),children:(0,o.jsx)(r.FileUploadDropzone,{className:x,children:g.length===0?(0,o.jsxs)(`div`,{className:`flex flex-col items-center gap-1 text-center p-2`,children:[(0,o.jsx)(`div`,{className:`flex items-center justify-center rounded-full border p-2.5`,children:(0,o.jsx)(i.Upload,{className:`size-6 text-muted-foreground`})}),(0,o.jsx)(`p`,{className:`font-medium text-sm`,children:`Drag & drop files here`}),(0,o.jsx)(`p`,{className:`text-muted-foreground text-xs`,children:`Or click to browse (max 10 files, up to 5MB each)`})]}):(0,o.jsx)(t.FileUploadItems,{displayFiles:g,deleteFile:_,getFile:v,maxFiles:f,itemSize:`size-22`,className:x})})})}exports.FileUpload=s;
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_FileUploadItems = require('./FileUploadItems.cjs');
+const require_use_file_upload_store = require('./hooks/use-file-upload-store.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/file-upload/FileUpload.tsx
+function FileUpload(props) {
+	const { value, onChange, className, multiple = true, onAccept, maxFiles, preventDuplicates,...rest } = props;
+	const { handleAccept, displayFiles, deleteFile, getFile, orgValue } = require_use_file_upload_store.useFileUploadStore({
+		value,
+		onChange,
+		multiple,
+		preventDuplicates
+	});
+	const handleFileAccept = react.useCallback((files) => {
+		onAccept?.(files);
+		handleAccept(files);
+	}, [handleAccept, onAccept]);
+	const itemSize = "size-22";
+	const containerClasses = (0, __pixpilot_shadcn.cn)("p-1.5");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUpload, {
+		...rest,
+		value: orgValue,
+		onAccept: handleFileAccept,
+		multiple,
+		className: (0, __pixpilot_shadcn.cn)("w-full", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadDropzone, {
+			className: containerClasses,
+			children: displayFiles.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-1 text-center p-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center justify-center rounded-full border p-2.5",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "size-6 text-muted-foreground" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "font-medium text-sm",
+						children: "Drag & drop files here"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-muted-foreground text-xs",
+						children: "Or click to browse (max 10 files, up to 5MB each)"
+					})
+				]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FileUploadItems.FileUploadItems, {
+				displayFiles,
+				deleteFile,
+				getFile,
+				maxFiles,
+				itemSize,
+				className: containerClasses
+			})
+		})
+	});
+}
+
+//#endregion
+exports.FileUpload = FileUpload;

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

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime6.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { FileUpload };

package/dist/file-upload/FileUpload.js

@@ -1 +1,63 @@
-"use client";import{FileUploadItems as e}from"./FileUploadItems.js";import{useFileUploadStore as t}from"./hooks/use-file-upload-store.js";import{FileUpload as n,FileUploadDropzone as r,cn as i}from"@pixpilot/shadcn";import{Upload as a}from"lucide-react";import*as o from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l(l){let{value:u,onChange:d,className:f,multiple:p=!0,onAccept:m,maxFiles:h,preventDuplicates:g,..._}=l,{handleAccept:v,displayFiles:y,deleteFile:b,getFile:x,orgValue:S}=t({value:u,onChange:d,multiple:p,preventDuplicates:g}),C=o.useCallback(e=>{m?.(e),v(e)},[v,m]),w=i(`p-1.5`);return s(n,{..._,value:S,onAccept:C,multiple:p,className:i(`w-full`,f),children:s(r,{className:w,children:y.length===0?c(`div`,{className:`flex flex-col items-center gap-1 text-center p-2`,children:[s(`div`,{className:`flex items-center justify-center rounded-full border p-2.5`,children:s(a,{className:`size-6 text-muted-foreground`})}),s(`p`,{className:`font-medium text-sm`,children:`Drag & drop files here`}),s(`p`,{className:`text-muted-foreground text-xs`,children:`Or click to browse (max 10 files, up to 5MB each)`})]}):s(e,{displayFiles:y,deleteFile:b,getFile:x,maxFiles:h,itemSize:`size-22`,className:w})})})}export{l as FileUpload};
+'use client';
+
+
+import { FileUploadItems } from "./FileUploadItems.js";
+import { useFileUploadStore } from "./hooks/use-file-upload-store.js";
+import { FileUpload, FileUploadDropzone, cn } from "@pixpilot/shadcn";
+import { Upload } from "lucide-react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/file-upload/FileUpload.tsx
+function FileUpload$1(props) {
+	const { value, onChange, className, multiple = true, onAccept, maxFiles, preventDuplicates,...rest } = props;
+	const { handleAccept, displayFiles, deleteFile, getFile, orgValue } = useFileUploadStore({
+		value,
+		onChange,
+		multiple,
+		preventDuplicates
+	});
+	const handleFileAccept = React$1.useCallback((files) => {
+		onAccept?.(files);
+		handleAccept(files);
+	}, [handleAccept, onAccept]);
+	const itemSize = "size-22";
+	const containerClasses = cn("p-1.5");
+	return /* @__PURE__ */ jsx(FileUpload, {
+		...rest,
+		value: orgValue,
+		onAccept: handleFileAccept,
+		multiple,
+		className: cn("w-full", className),
+		children: /* @__PURE__ */ jsx(FileUploadDropzone, {
+			className: containerClasses,
+			children: displayFiles.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-1 text-center p-2",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center rounded-full border p-2.5",
+						children: /* @__PURE__ */ jsx(Upload, { className: "size-6 text-muted-foreground" })
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "font-medium text-sm",
+						children: "Drag & drop files here"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: "Or click to browse (max 10 files, up to 5MB each)"
+					})
+				]
+			}) : /* @__PURE__ */ jsx(FileUploadItems, {
+				displayFiles,
+				deleteFile,
+				getFile,
+				maxFiles,
+				itemSize,
+				className: containerClasses
+			})
+		})
+	});
+}
+
+//#endregion
+export { FileUpload$1 as FileUpload };

package/dist/file-upload/FileUploadItems.cjs

@@ -1 +1,36 @@
-"use client";const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./FileUploadListItem.cjs`);let n=require(`@pixpilot/shadcn`);n=e.__toESM(n);let r=require(`lucide-react`);r=e.__toESM(r);let i=require(`react/jsx-runtime`);i=e.__toESM(i);function a({displayFiles:e,deleteFile:a,getFile:o,maxFiles:s,itemSize:c,className:l}){return(0,i.jsxs)(n.FileUploadList,{orientation:`horizontal`,forceMount:!0,className:(0,n.cn)(`flex-wrap gap-4 w-full `,l),children:[e.map(e=>{let{name:n,lastModified:r}=e,s=`${n}-${r}`;return(0,i.jsx)(t.FileUploadListItem,{fileMeta:e,deleteFile:a,getFile:o,itemSize:c},s)}),s===void 0||e.length<s?(0,i.jsx)(`div`,{className:(0,n.cn)(c,`flex items-center justify-center  border-2 border-dashed rounded-md`),children:(0,i.jsx)(r.Plus,{className:`size-6 text-muted-foreground`})}):null]})}exports.FileUploadItems=a;
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_FileUploadListItem = require('./FileUploadListItem.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/file-upload/FileUploadItems.tsx
+function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.FileUploadList, {
+		orientation: "horizontal",
+		forceMount: true,
+		className: (0, __pixpilot_shadcn.cn)("flex-wrap gap-4 w-full ", className),
+		children: [displayFiles.map((fileMeta) => {
+			const { name, lastModified } = fileMeta;
+			const key = `${name}-${lastModified}`;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FileUploadListItem.FileUploadListItem, {
+				fileMeta,
+				deleteFile,
+				getFile,
+				itemSize
+			}, key);
+		}), maxFiles === void 0 || displayFiles.length < maxFiles ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __pixpilot_shadcn.cn)(itemSize, "flex items-center justify-center  border-2 border-dashed rounded-md"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "size-6 text-muted-foreground" })
+		}) : null]
+	});
+}
+
+//#endregion
+exports.FileUploadItems = FileUploadItems;

package/dist/file-upload/FileUploadItems.js

@@ -1 +1,32 @@
-"use client";import{FileUploadListItem as e}from"./FileUploadListItem.js";import{FileUploadList as t,cn as n}from"@pixpilot/shadcn";import{Plus as r}from"lucide-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o({displayFiles:o,deleteFile:s,getFile:c,maxFiles:l,itemSize:u,className:d}){return a(t,{orientation:`horizontal`,forceMount:!0,className:n(`flex-wrap gap-4 w-full `,d),children:[o.map(t=>{let{name:n,lastModified:r}=t,a=`${n}-${r}`;return i(e,{fileMeta:t,deleteFile:s,getFile:c,itemSize:u},a)}),l===void 0||o.length<l?i(`div`,{className:n(u,`flex items-center justify-center  border-2 border-dashed rounded-md`),children:i(r,{className:`size-6 text-muted-foreground`})}):null]})}export{o as FileUploadItems};
+'use client';
+
+
+import { FileUploadListItem } from "./FileUploadListItem.js";
+import { FileUploadList, cn } from "@pixpilot/shadcn";
+import { Plus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/file-upload/FileUploadItems.tsx
+function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize, className }) {
+	return /* @__PURE__ */ jsxs(FileUploadList, {
+		orientation: "horizontal",
+		forceMount: true,
+		className: cn("flex-wrap gap-4 w-full ", className),
+		children: [displayFiles.map((fileMeta) => {
+			const { name, lastModified } = fileMeta;
+			const key = `${name}-${lastModified}`;
+			return /* @__PURE__ */ jsx(FileUploadListItem, {
+				fileMeta,
+				deleteFile,
+				getFile,
+				itemSize
+			}, key);
+		}), maxFiles === void 0 || displayFiles.length < maxFiles ? /* @__PURE__ */ jsx("div", {
+			className: cn(itemSize, "flex items-center justify-center  border-2 border-dashed rounded-md"),
+			children: /* @__PURE__ */ jsx(Plus, { className: "size-6 text-muted-foreground" })
+		}) : null]
+	});
+}
+
+//#endregion
+export { FileUploadItems };

package/dist/file-upload/FileUploadListItem.cjs

@@ -1 +1,88 @@
-"use client";const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`../packages/shadcn/src/components/ui/button.cjs`);let n=require(`@pixpilot/shadcn`);n=e.__toESM(n);let r=require(`lucide-react`);r=e.__toESM(r);let i=require(`react`);i=e.__toESM(i);let a=require(`pretty-bytes`);a=e.__toESM(a);let o=require(`react/jsx-runtime`);o=e.__toESM(o);const s=({className:e,children:t})=>(0,o.jsx)(`div`,{className:(0,n.cn)(`bg-black/70 inset-0 absolute`,e),children:t}),c=i.default.memo(({fileMeta:e,deleteFile:i,getFile:c,itemSize:l})=>{let u=c(e),d=(0,n.useFileUpload)(e=>e.files.get(u)),f=d?.error!=null,p=typeof e.url==`string`?e.url:``,m=d?.status!==`idle`&&d?.progress!==100&&!f;return(0,o.jsxs)(n.FileUploadItem,{value:u,className:(0,n.cn)(`p-0`),children:[(0,o.jsxs)(n.Tooltip,{children:[(0,o.jsx)(n.TooltipTrigger,{asChild:!0,children:(0,o.jsx)(n.FileUploadItemPreview,{className:(0,n.cn)(l,`relative`),render:(t,n)=>p.length>0&&e.type.startsWith(`image/`)?(0,o.jsx)(`div`,{className:`relative size-full`,children:(0,o.jsx)(`img`,{src:p,alt:e.name,className:`size-full object-cover`})}):n(),children:f?(0,o.jsx)(s,{className:`flex items-center justify-center`,children:(0,o.jsx)(r.AlertTriangle,{className:`text-destructive size-9`})}):m&&(0,o.jsx)(s,{children:(0,o.jsx)(n.FileUploadItemProgress,{variant:`circular`,strokeWidth:4})})})}),(0,o.jsxs)(n.TooltipContent,{children:[(0,o.jsxs)(`p`,{children:[e.name,(0,o.jsx)(`br`,{}),`Size: `,(0,a.default)(e.size)]}),f&&(0,o.jsxs)(`div`,{className:`text-destructive flex items-center gap-2 mt-2`,children:[(0,o.jsx)(r.AlertTriangle,{className:`text-destructive size-4`}),(0,o.jsx)(`p`,{className:`font-bold`,children:d?.error})]})]})]}),(0,o.jsx)(n.FileUploadItemMetadata,{className:`sr-only`}),(0,o.jsx)(t.Button,{type:`button`,variant:`secondary`,size:`icon`,className:`-top-1 -right-1 absolute size-5 rounded-full`,onClick:t=>{t.preventDefault(),t.stopPropagation(),i(e)},children:(0,o.jsx)(r.X,{className:`size-3`})})]})});c.displayName=`FileUploadListItem`,exports.FileUploadListItem=c;
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let pretty_bytes = require("pretty-bytes");
+pretty_bytes = require_rolldown_runtime.__toESM(pretty_bytes);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/file-upload/FileUploadListItem.tsx
+const Backdrop = ({ className, children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, __pixpilot_shadcn.cn)("bg-black/70 inset-0 absolute", className),
+		children
+	});
+};
+const FileUploadListItem = react.default.memo(({ fileMeta, deleteFile, getFile, itemSize }) => {
+	const file = getFile(fileMeta);
+	const storeFile = (0, __pixpilot_shadcn.useFileUpload)((store) => store.files.get(file));
+	const hasError = storeFile?.error != null;
+	const url = typeof fileMeta.url === "string" ? fileMeta.url : "";
+	const shouldRenderProgress = storeFile?.status !== "idle" && storeFile?.progress !== 100 && !hasError;
+	const renderPreview = (_file, fallback) => {
+		if (url.length > 0 && fileMeta.type.startsWith("image/")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "relative size-full",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: url,
+				alt: fileMeta.name,
+				className: "size-full object-cover"
+			})
+		});
+		return fallback();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.FileUploadItem, {
+		value: file,
+		className: (0, __pixpilot_shadcn.cn)("p-0"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItemPreview, {
+					className: (0, __pixpilot_shadcn.cn)(itemSize, "relative"),
+					render: renderPreview,
+					children: hasError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Backdrop, {
+						className: "flex items-center justify-center",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertTriangle, { className: "text-destructive size-9" })
+					}) : shouldRenderProgress && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Backdrop, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItemProgress, {
+						variant: "circular",
+						strokeWidth: 4
+					}) })
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.TooltipContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
+				fileMeta.name,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+				"Size: ",
+				(0, pretty_bytes.default)(fileMeta.size)
+			] }), hasError && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-destructive flex items-center gap-2 mt-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertTriangle, { className: "text-destructive size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "font-bold",
+					children: storeFile?.error
+				})]
+			})] })] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItemMetadata, { className: "sr-only" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+				type: "button",
+				variant: "secondary",
+				size: "icon",
+				className: "-top-1 -right-1 absolute size-5 rounded-full",
+				onClick: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					deleteFile(fileMeta);
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-3" })
+			})
+		]
+	});
+});
+FileUploadListItem.displayName = "FileUploadListItem";
+
+//#endregion
+exports.FileUploadListItem = FileUploadListItem;

package/dist/file-upload/FileUploadListItem.js

@@ -1 +1,82 @@
-"use client";import{Button as e}from"../packages/shadcn/src/components/ui/button.js";import{FileUploadItem as t,FileUploadItemMetadata as n,FileUploadItemPreview as r,FileUploadItemProgress as i,Tooltip as a,TooltipContent as o,TooltipTrigger as s,cn as c,useFileUpload as l}from"@pixpilot/shadcn";import{AlertTriangle as u,X as d}from"lucide-react";import f from"react";import p from"pretty-bytes";import{jsx as m,jsxs as h}from"react/jsx-runtime";const g=({className:e,children:t})=>m(`div`,{className:c(`bg-black/70 inset-0 absolute`,e),children:t}),_=f.memo(({fileMeta:f,deleteFile:_,getFile:v,itemSize:y})=>{let b=v(f),x=l(e=>e.files.get(b)),S=x?.error!=null,C=typeof f.url==`string`?f.url:``,w=x?.status!==`idle`&&x?.progress!==100&&!S;return h(t,{value:b,className:c(`p-0`),children:[h(a,{children:[m(s,{asChild:!0,children:m(r,{className:c(y,`relative`),render:(e,t)=>C.length>0&&f.type.startsWith(`image/`)?m(`div`,{className:`relative size-full`,children:m(`img`,{src:C,alt:f.name,className:`size-full object-cover`})}):t(),children:S?m(g,{className:`flex items-center justify-center`,children:m(u,{className:`text-destructive size-9`})}):w&&m(g,{children:m(i,{variant:`circular`,strokeWidth:4})})})}),h(o,{children:[h(`p`,{children:[f.name,m(`br`,{}),`Size: `,p(f.size)]}),S&&h(`div`,{className:`text-destructive flex items-center gap-2 mt-2`,children:[m(u,{className:`text-destructive size-4`}),m(`p`,{className:`font-bold`,children:x?.error})]})]})]}),m(n,{className:`sr-only`}),m(e,{type:`button`,variant:`secondary`,size:`icon`,className:`-top-1 -right-1 absolute size-5 rounded-full`,onClick:e=>{e.preventDefault(),e.stopPropagation(),_(f)},children:m(d,{className:`size-3`})})]})});_.displayName=`FileUploadListItem`;export{_ as FileUploadListItem};
+'use client';
+
+
+import { Button, FileUploadItem, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, Tooltip, TooltipContent, TooltipTrigger, cn, useFileUpload } from "@pixpilot/shadcn";
+import { AlertTriangle, X } from "lucide-react";
+import React from "react";
+import prettyBytes from "pretty-bytes";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/file-upload/FileUploadListItem.tsx
+const Backdrop = ({ className, children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("bg-black/70 inset-0 absolute", className),
+		children
+	});
+};
+const FileUploadListItem = React.memo(({ fileMeta, deleteFile, getFile, itemSize }) => {
+	const file = getFile(fileMeta);
+	const storeFile = useFileUpload((store) => store.files.get(file));
+	const hasError = storeFile?.error != null;
+	const url = typeof fileMeta.url === "string" ? fileMeta.url : "";
+	const shouldRenderProgress = storeFile?.status !== "idle" && storeFile?.progress !== 100 && !hasError;
+	const renderPreview = (_file, fallback) => {
+		if (url.length > 0 && fileMeta.type.startsWith("image/")) return /* @__PURE__ */ jsx("div", {
+			className: "relative size-full",
+			children: /* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: fileMeta.name,
+				className: "size-full object-cover"
+			})
+		});
+		return fallback();
+	};
+	return /* @__PURE__ */ jsxs(FileUploadItem, {
+		value: file,
+		className: cn("p-0"),
+		children: [
+			/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(FileUploadItemPreview, {
+					className: cn(itemSize, "relative"),
+					render: renderPreview,
+					children: hasError ? /* @__PURE__ */ jsx(Backdrop, {
+						className: "flex items-center justify-center",
+						children: /* @__PURE__ */ jsx(AlertTriangle, { className: "text-destructive size-9" })
+					}) : shouldRenderProgress && /* @__PURE__ */ jsx(Backdrop, { children: /* @__PURE__ */ jsx(FileUploadItemProgress, {
+						variant: "circular",
+						strokeWidth: 4
+					}) })
+				})
+			}), /* @__PURE__ */ jsxs(TooltipContent, { children: [/* @__PURE__ */ jsxs("p", { children: [
+				fileMeta.name,
+				/* @__PURE__ */ jsx("br", {}),
+				"Size: ",
+				prettyBytes(fileMeta.size)
+			] }), hasError && /* @__PURE__ */ jsxs("div", {
+				className: "text-destructive flex items-center gap-2 mt-2",
+				children: [/* @__PURE__ */ jsx(AlertTriangle, { className: "text-destructive size-4" }), /* @__PURE__ */ jsx("p", {
+					className: "font-bold",
+					children: storeFile?.error
+				})]
+			})] })] }),
+			/* @__PURE__ */ jsx(FileUploadItemMetadata, { className: "sr-only" }),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "secondary",
+				size: "icon",
+				className: "-top-1 -right-1 absolute size-5 rounded-full",
+				onClick: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					deleteFile(fileMeta);
+				},
+				children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+			})
+		]
+	});
+});
+FileUploadListItem.displayName = "FileUploadListItem";
+
+//#endregion
+export { FileUploadListItem };

package/dist/file-upload/hooks/index.cjs

@@ -1 +1,3 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`),t=require(`./use-file-upload-store.cjs`),n=require(`./use-file-error.cjs`),r=require(`./use-file-upload-progress-callbacks.cjs`);
+const require_use_file_upload_store = require('./use-file-upload-store.cjs');
+const require_use_file_error = require('./use-file-error.cjs');
+const require_use_file_upload_progress_callbacks = require('./use-file-upload-progress-callbacks.cjs');

package/dist/file-upload/hooks/index.d.cts

@@ -0,0 +1,2 @@
+import "./use-file-upload-progress-callbacks.cjs";
+import "./use-file-upload-store.cjs";

package/dist/file-upload/hooks/index.js

@@ -1 +1,3 @@
-import{useFileUploadStore as e}from"./use-file-upload-store.js";import{useFileError as t}from"./use-file-error.js";import{useFileUploadProgressCallbacks as n}from"./use-file-upload-progress-callbacks.js";
+import { useFileUploadStore } from "./use-file-upload-store.js";
+import { useFileError } from "./use-file-error.js";
+import { useFileUploadProgressCallbacks } from "./use-file-upload-progress-callbacks.js";

package/dist/file-upload/hooks/use-file-error.cjs

@@ -1 +1,15 @@
-const e=require(`../../_virtual/rolldown_runtime.cjs`),t=require(`../../packages/shadcn/src/components/ui/file-upload.cjs`);require(`../../packages/shadcn/src/components/index.cjs`);function n(e){return t.useStore(t=>{let n=t.files.get(e);return n?.error==null?null:n.error})}exports.useFileError=n;
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/file-upload/hooks/use-file-error.ts
+function useFileError(file) {
+	return (0, __pixpilot_shadcn.useFileUpload)((store) => {
+		const storeFile = store.files.get(file);
+		if (storeFile?.error != null) return storeFile.error;
+		return null;
+	});
+}
+
+//#endregion
+exports.useFileError = useFileError;

package/dist/file-upload/hooks/use-file-error.js

@@ -1 +1,13 @@
-import{useStore as e}from"../../packages/shadcn/src/components/ui/file-upload.js";import"../../packages/shadcn/src/components/index.js";function t(t){return e(e=>{let n=e.files.get(t);return n?.error==null?null:n.error})}export{t as useFileError};
+import { useFileUpload } from "@pixpilot/shadcn";
+
+//#region src/file-upload/hooks/use-file-error.ts
+function useFileError(file) {
+	return useFileUpload((store) => {
+		const storeFile = store.files.get(file);
+		if (storeFile?.error != null) return storeFile.error;
+		return null;
+	});
+}
+
+//#endregion
+export { useFileError };