@vlrc-fe/components 1.0.0

package/dist/index103.js

@@ -0,0 +1,151 @@
+import { Popover as e, PopoverContent as t, PopoverTrigger as n } from "./index21.js";
+import { Icons as r } from "./index41.js";
+import { MultiSelectTags as i } from "./index102.js";
+import { useMemo as a, useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { isNil as d } from "lodash-es";
+//#region src/Select/BaseSelect.tsx
+function f(e) {
+	return e.isMulti === !0;
+}
+function p(p) {
+	let { options: m, injectOptions: h = [], placeholder: g = "Chọn...", isClearable: _ = !0, isSearchable: v = !0, isLoading: y = !1, className: b = "", disabled: x = !1, onSearchTextChange: S, hasNextPage: C = !1, isFetchingNextPage: w = !1, fetchNextPage: T, maxTagCount: E = "responsive", tagRender: D, showSelectAll: O = !1 } = p, k = f(p), { value: A } = p, [j, M] = s(!1), [N, P] = s(""), F = o(null), I = a(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of h) e.set(t.value, t);
+		for (let t of m) e.set(t.value, t);
+		return Array.from(e.values());
+	}, [m, h]), L = (e) => {
+		let { scrollTop: t, scrollHeight: n, clientHeight: r } = e.currentTarget;
+		n - t <= r + 50 && C && !w && T && T();
+	}, R = a(() => !v || !N || S ? I : I.filter((e) => e.label.toLowerCase().includes(N.toLowerCase())), [
+		I,
+		v,
+		N,
+		S
+	]), z = a(() => k && Array.isArray(A) ? A : d(A) ? [] : [A], [A, k]), B = (e) => {
+		if (!x) if (f(p)) {
+			let t = z.includes(e) ? z.filter((t) => t !== e) : [...z, e];
+			p.onChange && p.onChange(t);
+		} else p.onChange && p.onChange(e), M(!1);
+	}, V = (e) => {
+		x || (e.stopPropagation(), f(p) ? p.onChange && p.onChange([]) : p.onChange && p.onChange(null), P(""), S && S(""));
+	}, H = (e) => {
+		let t = e.target.value;
+		P(t), S && S(t);
+	}, U = a(() => I.filter((e) => z.includes(e.value)), [z, I]), W = a(() => z.length ? k ? I.filter((e) => z.includes(e.value)).map((e) => e.label).join(", ") : I.find((e) => e.value === z[0])?.label || "" : "", [
+		z,
+		I,
+		k
+	]);
+	return /* @__PURE__ */ u(e, {
+		open: j,
+		onOpenChange: x ? void 0 : M,
+		children: [/* @__PURE__ */ l(n, {
+			asChild: !0,
+			children: /* @__PURE__ */ u("button", {
+				type: "button",
+				className: `flex items-center w-full min-w-60 border rounded-md px-3 py-1.5 text-xs bg-white dark:bg-input/30 ${b} ${j ? "ring-2 ring-primary" : ""} ${x ? "bg-muted cursor-not-allowed opacity-60" : ""}`,
+				onClick: () => !x && M((e) => !e),
+				disabled: x,
+				children: [
+					k && z.length > 0 ? /* @__PURE__ */ l(i, {
+						selectedOptions: U,
+						maxTagCount: E,
+						onRemove: (e) => {
+							if (x || !f(p)) return;
+							let t = z.filter((t) => t !== e);
+							p.onChange && p.onChange(t);
+						},
+						disabled: x,
+						tagRender: D
+					}) : /* @__PURE__ */ l("span", {
+						className: "flex-1 truncate text-left text-xs",
+						children: W || /* @__PURE__ */ l("span", {
+							className: "text-muted-foreground",
+							children: g
+						})
+					}),
+					_ && z.length > 0 && !x && /* @__PURE__ */ l(r.XIcon, {
+						className: "w-3.5 h-3.5 ml-2 text-muted-foreground hover:text-destructive flex-shrink-0",
+						onClick: V
+					}),
+					/* @__PURE__ */ l(r.ChevronDownIcon, { className: "w-3.5 h-3.5 ml-2 text-muted-foreground flex-shrink-0" })
+				]
+			})
+		}), /* @__PURE__ */ u(t, {
+			className: "p-0 w-60",
+			align: "start",
+			children: [
+				v && !x && /* @__PURE__ */ u("div", {
+					className: "flex items-center px-2 py-1.5 border-b",
+					children: [/* @__PURE__ */ l(r.SearchIcon, { className: "w-4 h-4 mr-2 text-muted-foreground" }), /* @__PURE__ */ l("input", {
+						ref: F,
+						className: "w-full outline-none bg-transparent text-xs",
+						placeholder: "Tìm kiếm...",
+						value: N,
+						onChange: H,
+						autoFocus: !0,
+						disabled: x
+					})]
+				}),
+				k && O && !x && R.length > 0 && /* @__PURE__ */ u("div", {
+					className: "flex items-center px-3 py-2 border-b cursor-pointer hover:bg-accent text-xs font-medium",
+					onClick: () => {
+						if (!(x || !f(p))) if (z.length === R.length) p.onChange && p.onChange([]);
+						else {
+							let e = R.map((e) => e.value);
+							p.onChange && p.onChange(e);
+						}
+					},
+					children: [/* @__PURE__ */ l("span", {
+						className: "flex-1",
+						children: z.length === R.length ? "Bỏ chọn tất cả" : "Chọn tất cả"
+					}), /* @__PURE__ */ u("span", {
+						className: "text-muted-foreground text-xs",
+						children: [
+							"(",
+							z.length,
+							"/",
+							R.length,
+							")"
+						]
+					})]
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "max-h-56 overflow-y-auto",
+					onScroll: L,
+					children: y && I.length === 0 ? /* @__PURE__ */ l("div", {
+						className: "p-3 text-center text-muted-foreground text-xs",
+						children: "Đang tải..."
+					}) : R.length === 0 ? /* @__PURE__ */ l("div", {
+						className: "p-3 text-center text-muted-foreground text-xs",
+						children: "Không có dữ liệu"
+					}) : /* @__PURE__ */ u(c, { children: [R.map((e) => /* @__PURE__ */ u("div", {
+						className: `flex items-center px-3 py-1.5 cursor-pointer hover:bg-accent text-xs ${z.includes(e.value) ? "bg-accent/50" : ""} ${x ? "pointer-events-none opacity-60" : ""}`,
+						onClick: () => B(e.value),
+						children: [
+							e.icon && /* @__PURE__ */ l("span", {
+								className: "mr-2",
+								children: e.icon
+							}),
+							/* @__PURE__ */ l("span", {
+								className: "truncate flex-1 text-xs",
+								children: e.label
+							}),
+							k && /* @__PURE__ */ l("span", {
+								className: `ml-2 w-4 h-4 border rounded flex items-center justify-center ${z.includes(e.value) ? "bg-primary text-white" : "bg-white"}`,
+								children: z.includes(e.value) && /* @__PURE__ */ l(r.CheckIcon, { className: "w-3 h-3" })
+							}),
+							!k && z.includes(e.value) && /* @__PURE__ */ l(r.CheckIcon, { className: "w-3.5 h-3.5 ml-2 text-primary" })
+						]
+					}, e.value)), (w || C && R.length > 0) && /* @__PURE__ */ l("div", {
+						className: "p-3 text-center text-muted-foreground text-xs",
+						children: w ? "Đang tải thêm..." : ""
+					})] })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { p as BaseSelect };

package/dist/index104.cjs

@@ -0,0 +1 @@
+const e=require("./index2.cjs"),t=require("./index22.cjs"),n=require("./index42.cjs"),r=require("./index103.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("lodash-es");function s(e){return e.isMulti===!0}function c(e){let{options:c,injectOptions:l=[],placeholder:u=`Chọn...`,isClearable:d=!0,isSearchable:f=!0,isLoading:p=!1,className:m=``,disabled:h=!1,onSearchTextChange:g,hasNextPage:_=!1,isFetchingNextPage:v=!1,fetchNextPage:y,maxTagCount:b=`responsive`,tagRender:x,showSelectAll:S=!1}=e,C=s(e),{value:w}=e,[T,E]=(0,i.useState)(!1),[D,O]=(0,i.useState)(``),k=(0,i.useRef)(null),A=(0,i.useMemo)(()=>{let e=new Map;for(let t of l)e.set(t.value,t);for(let t of c)e.set(t.value,t);return Array.from(e.values())},[c,l]),j=e=>{let{scrollTop:t,scrollHeight:n,clientHeight:r}=e.currentTarget;n-t<=r+50&&_&&!v&&y&&y()},M=(0,i.useMemo)(()=>!f||!D||g?A:A.filter(e=>e.label.toLowerCase().includes(D.toLowerCase())),[A,f,D,g]),N=(0,i.useMemo)(()=>C&&Array.isArray(w)?w:(0,o.isNil)(w)?[]:[w],[w,C]),P=t=>{if(!h)if(s(e)){let n=N.includes(t)?N.filter(e=>e!==t):[...N,t];e.onChange&&e.onChange(n)}else e.onChange&&e.onChange(t),E(!1)},F=t=>{h||(t.stopPropagation(),s(e)?e.onChange&&e.onChange([]):e.onChange&&e.onChange(null),O(``),g&&g(``))},I=e=>{let t=e.target.value;O(t),g&&g(t)},L=(0,i.useMemo)(()=>A.filter(e=>N.includes(e.value)),[N,A]),R=(0,i.useMemo)(()=>N.length?C?A.filter(e=>N.includes(e.value)).map(e=>e.label).join(`, `):A.find(e=>e.value===N[0])?.label||``:``,[N,A,C]);return(0,a.jsxs)(t.Popover,{open:T,onOpenChange:h?void 0:E,children:[(0,a.jsx)(t.PopoverTrigger,{asChild:!0,children:(0,a.jsxs)(`button`,{type:`button`,className:`flex items-center w-full min-w-60 border rounded-md px-3 py-1.5 text-xs bg-white dark:bg-input/30 ${m} ${T?`ring-2 ring-primary`:``} ${h?`bg-muted cursor-not-allowed opacity-60`:``}`,onClick:()=>!h&&E(e=>!e),disabled:h,children:[C&&N.length>0?(0,a.jsx)(r.MultiSelectTags,{selectedOptions:L,maxTagCount:b,onRemove:t=>{if(h||!s(e))return;let n=N.filter(e=>e!==t);e.onChange&&e.onChange(n)},disabled:h,tagRender:x}):(0,a.jsx)(`span`,{className:`flex-1 truncate text-left text-xs`,children:R||(0,a.jsx)(`span`,{className:`text-muted-foreground`,children:u})}),d&&N.length>0&&!h&&(0,a.jsx)(n.Icons.XIcon,{className:`w-3.5 h-3.5 ml-2 text-muted-foreground hover:text-destructive flex-shrink-0`,onClick:F}),(0,a.jsx)(n.Icons.ChevronDownIcon,{className:`w-3.5 h-3.5 ml-2 text-muted-foreground flex-shrink-0`})]})}),(0,a.jsxs)(t.PopoverContent,{className:`p-0 w-60`,align:`start`,children:[f&&!h&&(0,a.jsxs)(`div`,{className:`flex items-center px-2 py-1.5 border-b`,children:[(0,a.jsx)(n.Icons.SearchIcon,{className:`w-4 h-4 mr-2 text-muted-foreground`}),(0,a.jsx)(`input`,{ref:k,className:`w-full outline-none bg-transparent text-xs`,placeholder:`Tìm kiếm...`,value:D,onChange:I,autoFocus:!0,disabled:h})]}),C&&S&&!h&&M.length>0&&(0,a.jsxs)(`div`,{className:`flex items-center px-3 py-2 border-b cursor-pointer hover:bg-accent text-xs font-medium`,onClick:()=>{if(!(h||!s(e)))if(N.length===M.length)e.onChange&&e.onChange([]);else{let t=M.map(e=>e.value);e.onChange&&e.onChange(t)}},children:[(0,a.jsx)(`span`,{className:`flex-1`,children:N.length===M.length?`Bỏ chọn tất cả`:`Chọn tất cả`}),(0,a.jsxs)(`span`,{className:`text-muted-foreground text-xs`,children:[`(`,N.length,`/`,M.length,`)`]})]}),(0,a.jsx)(`div`,{className:`max-h-56 overflow-y-auto`,onScroll:j,children:p&&A.length===0?(0,a.jsx)(`div`,{className:`p-3 text-center text-muted-foreground text-xs`,children:`Đang tải...`}):M.length===0?(0,a.jsx)(`div`,{className:`p-3 text-center text-muted-foreground text-xs`,children:`Không có dữ liệu`}):(0,a.jsxs)(a.Fragment,{children:[M.map(e=>(0,a.jsxs)(`div`,{className:`flex items-center px-3 py-1.5 cursor-pointer hover:bg-accent text-xs ${N.includes(e.value)?`bg-accent/50`:``} ${h?`pointer-events-none opacity-60`:``}`,onClick:()=>P(e.value),children:[e.icon&&(0,a.jsx)(`span`,{className:`mr-2`,children:e.icon}),(0,a.jsx)(`span`,{className:`truncate flex-1 text-xs`,children:e.label}),C&&(0,a.jsx)(`span`,{className:`ml-2 w-4 h-4 border rounded flex items-center justify-center ${N.includes(e.value)?`bg-primary text-white`:`bg-white`}`,children:N.includes(e.value)&&(0,a.jsx)(n.Icons.CheckIcon,{className:`w-3 h-3`})}),!C&&N.includes(e.value)&&(0,a.jsx)(n.Icons.CheckIcon,{className:`w-3.5 h-3.5 ml-2 text-primary`})]},e.value)),(v||_&&M.length>0)&&(0,a.jsx)(`div`,{className:`p-3 text-center text-muted-foreground text-xs`,children:v?`Đang tải thêm...`:``})]})})]})]})}exports.BaseSelect=c;

package/dist/index104.js

@@ -0,0 +1,23 @@
+import { FormBase as e } from "./index42.js";
+import { useFormSelect as t } from "./index101.js";
+import { BaseSelect as n } from "./index103.js";
+import "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/Form/FormSelect/FormSelect.tsx
+function i(i) {
+	let { baseSelectProps: a, isMulti: o, createChangeHandlers: s } = t(i);
+	return /* @__PURE__ */ r(e, {
+		...i,
+		children: (e) => {
+			let { onChangeMulti: t, onChangeSingle: i } = s(e);
+			return /* @__PURE__ */ r(n, {
+				...a,
+				isMulti: o,
+				value: e.value,
+				onChange: o ? t : i
+			});
+		}
+	});
+}
+//#endregion
+export { i as FormSelect };

package/dist/index105.cjs

@@ -0,0 +1 @@
+const e=require("./index2.cjs"),t=require("./index43.cjs"),n=require("./index102.cjs"),r=require("./index104.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");function o(e){let{baseSelectProps:i,isMulti:o,createChangeHandlers:s}=n.useFormSelect(e);return(0,a.jsx)(t.FormBase,{...e,children:e=>{let{onChangeMulti:t,onChangeSingle:n}=s(e);return(0,a.jsx)(r.BaseSelect,{...i,isMulti:o,value:e.value,onChange:o?t:n})}})}exports.FormSelect=o;

package/dist/index105.js

@@ -0,0 +1,27 @@
+//#region src/Form/FormRadioGroup/useFormRadio.ts
+function e(e) {
+	let { rules: r = {}, value: i, onChange: a, showEmpty: o } = e, s = r.required !== void 0 && r.required !== !1;
+	return {
+		isRequired: s,
+		processedRules: n(r, s),
+		parseValue: (e) => i === void 0 ? o ? "" : String(e ?? "") : String(i),
+		emitChange: (e, t) => {
+			e(t), a?.(t);
+		},
+		sizeClasses: t
+	};
+}
+var t = {
+	large: "size-5",
+	middle: "size-4",
+	small: "size-3.5"
+};
+function n(e = {}, t) {
+	let n = { ...e };
+	return t && typeof n.required != "string" && typeof n.required != "object" ? n.required = "Trường này là bắt buộc" : typeof n.required == "object" && !n.required.message && (n.required = {
+		...n.required,
+		message: "Trường này là bắt buộc"
+	}), n;
+}
+//#endregion
+export { e as useFormRadio };

package/dist/index106.cjs

@@ -0,0 +1 @@
+function e(e){let{rules:r={},value:i,onChange:a,showEmpty:o}=e,s=r.required!==void 0&&r.required!==!1;return{isRequired:s,processedRules:n(r,s),parseValue:e=>i===void 0?o?``:String(e??``):String(i),emitChange:(e,t)=>{e(t),a?.(t)},sizeClasses:t}}var t={large:`size-5`,middle:`size-4`,small:`size-3.5`};function n(e={},t){let n={...e};return t&&typeof n.required!=`string`&&typeof n.required!=`object`?n.required=`Trường này là bắt buộc`:typeof n.required==`object`&&!n.required.message&&(n.required={...n.required,message:`Trường này là bắt buộc`}),n}exports.useFormRadio=e;

package/dist/index106.js

@@ -0,0 +1,53 @@
+import { Label as e } from "./index13.js";
+import { FormControl as t, FormField as n, FormItem as r, FormLabel as i, FormMessage as a } from "./index18.js";
+import { RadioGroup as o, RadioGroupItem as s } from "./index23.js";
+import { useFormRadio as c } from "./index105.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/Form/FormRadioGroup/FormRadio.tsx
+function d({ name: d, control: f, label: p = "", size: m = "middle", options: h = [], onChange: g, value: _, rules: v = {}, disabled: y = !1, optionType: b = "default", buttonStyle: x, autoHeightMax: S, showEmpty: C = !1, hideErrorMessage: w = !1, className: T }) {
+	let { isRequired: E, processedRules: D, parseValue: O, emitChange: k, sizeClasses: A } = c({
+		rules: v,
+		value: _,
+		onChange: g,
+		showEmpty: C
+	}), j = (t, n, r) => /* @__PURE__ */ l(o, {
+		value: O(n),
+		onValueChange: (e) => k(r, e),
+		disabled: y,
+		style: S ? {
+			maxHeight: `${S}px`,
+			overflowY: "auto"
+		} : void 0,
+		children: h.map((n) => /* @__PURE__ */ u("div", {
+			className: "flex items-center space-x-2",
+			children: [/* @__PURE__ */ l(s, {
+				value: String(n.value),
+				id: `${t}-${n.value}`,
+				disabled: y || n.disabled,
+				className: A[m]
+			}), /* @__PURE__ */ l(e, {
+				htmlFor: `${t}-${n.value}`,
+				className: "cursor-pointer font-normal",
+				children: n.label
+			})]
+		}, String(n.value)))
+	});
+	return /* @__PURE__ */ l(n, {
+		control: f,
+		name: d,
+		rules: D,
+		render: ({ field: e }) => /* @__PURE__ */ u(r, {
+			className: T,
+			children: [
+				p && /* @__PURE__ */ u(i, { children: [p, E && /* @__PURE__ */ l("span", {
+					className: "text-destructive ml-1",
+					children: "*"
+				})] }),
+				/* @__PURE__ */ l(t, { children: j(d, _ ?? e.value, e.onChange) }),
+				!w && /* @__PURE__ */ l(a, {})
+			]
+		})
+	});
+}
+//#endregion
+export { d as FormRadio };

package/dist/index107.cjs

@@ -0,0 +1 @@
+const e=require("./index14.cjs"),t=require("./index19.cjs"),n=require("./index24.cjs"),r=require("./index106.cjs");let i=require("react/jsx-runtime");function a({name:a,control:o,label:s=``,size:c=`middle`,options:l=[],onChange:u,value:d,rules:f={},disabled:p=!1,optionType:m=`default`,buttonStyle:h,autoHeightMax:g,showEmpty:_=!1,hideErrorMessage:v=!1,className:y}){let{isRequired:b,processedRules:x,parseValue:S,emitChange:C,sizeClasses:w}=r.useFormRadio({rules:f,value:d,onChange:u,showEmpty:_}),T=(t,r,a)=>(0,i.jsx)(n.RadioGroup,{value:S(r),onValueChange:e=>C(a,e),disabled:p,style:g?{maxHeight:`${g}px`,overflowY:`auto`}:void 0,children:l.map(r=>(0,i.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,i.jsx)(n.RadioGroupItem,{value:String(r.value),id:`${t}-${r.value}`,disabled:p||r.disabled,className:w[c]}),(0,i.jsx)(e.Label,{htmlFor:`${t}-${r.value}`,className:`cursor-pointer font-normal`,children:r.label})]},String(r.value)))});return(0,i.jsx)(t.FormField,{control:o,name:a,rules:x,render:({field:e})=>(0,i.jsxs)(t.FormItem,{className:y,children:[s&&(0,i.jsxs)(t.FormLabel,{children:[s,b&&(0,i.jsx)(`span`,{className:`text-destructive ml-1`,children:`*`})]}),(0,i.jsx)(t.FormControl,{children:T(a,d??e.value,e.onChange)}),!v&&(0,i.jsx)(t.FormMessage,{})]})})}exports.FormRadio=a;

package/dist/index107.js

@@ -0,0 +1,161 @@
+import { Button as e } from "./index6.js";
+import { FileUploadDropzone as t, FileUploadItem as n, FileUploadItemDelete as r, FileUploadItemMetadata as i, FileUploadItemPreview as a, FileUploadItemProgress as o, FileUploadList as s, FileUploadRoot as c, useStore as l } from "./index16.js";
+import { CameraIcon as u, CloudUploadIcon as d, Trash2Icon as f } from "lucide-react";
+import { useEffect as p, useRef as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/Form/FormFileUpload/FileUpload.tsx
+function v({ onChange: e, autoUpload: t, maxFiles: n }) {
+	let r = l((e) => e), i = m(null);
+	return p(() => {
+		if (!e) return;
+		let a = Array.from(r.files.values()), o = (() => {
+			if (t) {
+				let e = a.filter((e) => e.status === "success").map((e) => e.file.uploadedUrl).filter((e) => !!e);
+				return n === 1 ? e.length > 0 ? e[e.length - 1] : null : e;
+			}
+			let e = a.map((e) => e.file);
+			return n === 1 ? e.length > 0 ? e[e.length - 1] : null : e;
+		})(), s = i.current;
+		(t ? JSON.stringify(s) === JSON.stringify(o) : Array.isArray(o) && Array.isArray(s) ? o.length === s.length && o.every((e, t) => e === s[t]) : o === s) || (i.current = o, e(o));
+	}, [
+		r,
+		t,
+		n,
+		e
+	]), null;
+}
+function y(e, t = "") {
+	let n = e.split("/").pop()?.split("?")[0] || "file", r = n.split(".").pop()?.toLowerCase(), i = r && {
+		jpg: "image/jpeg",
+		jpeg: "image/jpeg",
+		png: "image/png",
+		gif: "image/gif",
+		webp: "image/webp"
+	}[r];
+	i ||= t.includes("image") ? "image/jpeg" : "application/octet-stream";
+	let a = new File([""], n, { type: i });
+	return a.isUploadedUrl = !0, a.uploadedUrl = e, a;
+}
+function b({ value: l, onChange: p, autoUpload: m = !1, uploadFile: b, maxFiles: x = 1, maxSize: S = 1024 * 1024 * 5, accept: C = "image/*", disabled: w, className: T, variant: E = "default" }) {
+	let D = (Array.isArray(l) ? l : l ? [l] : []).map((e) => e instanceof File ? e : typeof e == "string" ? y(e, C) : e);
+	return /* @__PURE__ */ _(c, {
+		value: D,
+		maxFiles: E === "avatar" ? 1 : x,
+		maxSize: S,
+		accept: C,
+		disabled: w,
+		onUpload: async (e, t) => {
+			if (!m) {
+				e.forEach((e) => t.onSuccess(e));
+				return;
+			}
+			if (!b) {
+				console.warn("uploadFile prop is required when autoUpload is true"), e.forEach((e) => t.onError(e, /* @__PURE__ */ Error("Missing uploadFile function")));
+				return;
+			}
+			await Promise.all(e.map(async (e) => {
+				let n = e;
+				if (n.isUploadedUrl) {
+					t.onSuccess(e);
+					return;
+				}
+				try {
+					t.onProgress(e, 20), n.uploadedUrl = await b(e), t.onProgress(e, 100), t.onSuccess(e);
+				} catch (n) {
+					t.onError(e, n instanceof Error ? n : /* @__PURE__ */ Error("Upload failed"));
+				}
+			}));
+		},
+		className: T,
+		children: [/* @__PURE__ */ g(v, {
+			onChange: p,
+			autoUpload: m,
+			maxFiles: E === "avatar" ? 1 : x
+		}), E === "avatar" ? /* @__PURE__ */ _("div", {
+			className: "flex flex-col items-center gap-2",
+			children: [/* @__PURE__ */ g(t, {
+				className: "group relative size-32 cursor-pointer overflow-hidden rounded-full border-2 border-dashed border-border p-0 hover:border-primary",
+				children: D[0] ? /* @__PURE__ */ _(n, {
+					value: D[0],
+					className: "relative flex size-full flex-col rounded-none border-none p-0",
+					children: [
+						/* @__PURE__ */ g(a, {
+							className: "size-full rounded-none border-none bg-transparent",
+							render: (e) => {
+								let t = e.uploadedUrl;
+								return t ? /* @__PURE__ */ g("img", {
+									src: t,
+									alt: "Avatar",
+									className: "size-full object-cover"
+								}) : /* @__PURE__ */ g("img", {
+									src: URL.createObjectURL(e),
+									alt: "Avatar",
+									className: "size-full object-cover"
+								});
+							}
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "absolute inset-0 flex flex-col items-center justify-center gap-1 bg-black/40 opacity-0 transition-opacity group-hover:opacity-100",
+							children: [/* @__PURE__ */ g(u, { className: "size-6 text-white" }), /* @__PURE__ */ g("span", {
+								className: "text-[10px] text-white",
+								children: "Đổi ảnh"
+							})]
+						}),
+						/* @__PURE__ */ g(o, {
+							variant: "fill",
+							className: "opacity-50"
+						})
+					]
+				}) : /* @__PURE__ */ _("div", {
+					className: "flex size-full flex-col items-center justify-center gap-1 bg-accent text-muted-foreground transition-colors group-hover:bg-accent/80",
+					children: [/* @__PURE__ */ g(u, { className: "size-6" }), /* @__PURE__ */ g("span", {
+						className: "text-[10px]",
+						children: "Tải lên"
+					})]
+				})
+			}), /* @__PURE__ */ g("div", {
+				className: "text-xs text-muted-foreground",
+				children: S ? `Max ${Math.round(S / (1024 * 1024))}MB` : ""
+			})]
+		}) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _(t, { children: [
+			/* @__PURE__ */ g(d, { className: "h-10 w-10 text-muted-foreground" }),
+			/* @__PURE__ */ g("p", {
+				className: "text-sm font-medium",
+				children: "Drag & drop files here, or click to select"
+			}),
+			/* @__PURE__ */ _("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					x > 1 ? `Up to ${x} files` : "1 file max",
+					" ",
+					S ? `(Max ${Math.round(S / (1024 * 1024))}MB)` : ""
+				]
+			})
+		] }), /* @__PURE__ */ g(s, { children: D.map((t, s) => /* @__PURE__ */ _(n, {
+			value: t,
+			children: [
+				/* @__PURE__ */ g(a, { render: (e, t) => {
+					let n = e.uploadedUrl;
+					return n && e.type.startsWith("image/") ? /* @__PURE__ */ g("img", {
+						src: n,
+						alt: e.name,
+						className: "size-full object-cover"
+					}) : t();
+				} }),
+				/* @__PURE__ */ g(i, {}),
+				/* @__PURE__ */ g(o, { className: "absolute bottom-0 left-0 right-0 h-1 w-auto rounded-none" }),
+				/* @__PURE__ */ g(r, {
+					asChild: !0,
+					children: /* @__PURE__ */ g(e, {
+						variant: "ghost",
+						size: "icon",
+						className: "h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive",
+						children: /* @__PURE__ */ g(f, { className: "h-4 w-4" })
+					})
+				})
+			]
+		}, s)) })] })]
+	});
+}
+//#endregion
+export { b as FileUpload };

package/dist/index108.cjs

@@ -0,0 +1 @@
+const e=require("./index7.cjs"),t=require("./index17.cjs");let n=require("lucide-react"),r=require("react"),i=require("react/jsx-runtime");function a({onChange:e,autoUpload:n,maxFiles:i}){let a=t.useStore(e=>e),o=(0,r.useRef)(null);return(0,r.useEffect)(()=>{if(!e)return;let t=Array.from(a.files.values()),r=(()=>{if(n){let e=t.filter(e=>e.status===`success`).map(e=>e.file.uploadedUrl).filter(e=>!!e);return i===1?e.length>0?e[e.length-1]:null:e}let e=t.map(e=>e.file);return i===1?e.length>0?e[e.length-1]:null:e})(),s=o.current;(n?JSON.stringify(s)===JSON.stringify(r):Array.isArray(r)&&Array.isArray(s)?r.length===s.length&&r.every((e,t)=>e===s[t]):r===s)||(o.current=r,e(r))},[a,n,i,e]),null}function o(e,t=``){let n=e.split(`/`).pop()?.split(`?`)[0]||`file`,r=n.split(`.`).pop()?.toLowerCase(),i=r&&{jpg:`image/jpeg`,jpeg:`image/jpeg`,png:`image/png`,gif:`image/gif`,webp:`image/webp`}[r];i||=t.includes(`image`)?`image/jpeg`:`application/octet-stream`;let a=new File([``],n,{type:i});return a.isUploadedUrl=!0,a.uploadedUrl=e,a}function s({value:r,onChange:s,autoUpload:c=!1,uploadFile:l,maxFiles:u=1,maxSize:d=1024*1024*5,accept:f=`image/*`,disabled:p,className:m,variant:h=`default`}){let g=(Array.isArray(r)?r:r?[r]:[]).map(e=>e instanceof File?e:typeof e==`string`?o(e,f):e);return(0,i.jsxs)(t.FileUploadRoot,{value:g,maxFiles:h===`avatar`?1:u,maxSize:d,accept:f,disabled:p,onUpload:async(e,t)=>{if(!c){e.forEach(e=>t.onSuccess(e));return}if(!l){console.warn(`uploadFile prop is required when autoUpload is true`),e.forEach(e=>t.onError(e,Error(`Missing uploadFile function`)));return}await Promise.all(e.map(async e=>{let n=e;if(n.isUploadedUrl){t.onSuccess(e);return}try{t.onProgress(e,20),n.uploadedUrl=await l(e),t.onProgress(e,100),t.onSuccess(e)}catch(n){t.onError(e,n instanceof Error?n:Error(`Upload failed`))}}))},className:m,children:[(0,i.jsx)(a,{onChange:s,autoUpload:c,maxFiles:h===`avatar`?1:u}),h===`avatar`?(0,i.jsxs)(`div`,{className:`flex flex-col items-center gap-2`,children:[(0,i.jsx)(t.FileUploadDropzone,{className:`group relative size-32 cursor-pointer overflow-hidden rounded-full border-2 border-dashed border-border p-0 hover:border-primary`,children:g[0]?(0,i.jsxs)(t.FileUploadItem,{value:g[0],className:`relative flex size-full flex-col rounded-none border-none p-0`,children:[(0,i.jsx)(t.FileUploadItemPreview,{className:`size-full rounded-none border-none bg-transparent`,render:e=>{let t=e.uploadedUrl;return t?(0,i.jsx)(`img`,{src:t,alt:`Avatar`,className:`size-full object-cover`}):(0,i.jsx)(`img`,{src:URL.createObjectURL(e),alt:`Avatar`,className:`size-full object-cover`})}}),(0,i.jsxs)(`div`,{className:`absolute inset-0 flex flex-col items-center justify-center gap-1 bg-black/40 opacity-0 transition-opacity group-hover:opacity-100`,children:[(0,i.jsx)(n.CameraIcon,{className:`size-6 text-white`}),(0,i.jsx)(`span`,{className:`text-[10px] text-white`,children:`Đổi ảnh`})]}),(0,i.jsx)(t.FileUploadItemProgress,{variant:`fill`,className:`opacity-50`})]}):(0,i.jsxs)(`div`,{className:`flex size-full flex-col items-center justify-center gap-1 bg-accent text-muted-foreground transition-colors group-hover:bg-accent/80`,children:[(0,i.jsx)(n.CameraIcon,{className:`size-6`}),(0,i.jsx)(`span`,{className:`text-[10px]`,children:`Tải lên`})]})}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:d?`Max ${Math.round(d/(1024*1024))}MB`:``})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.FileUploadDropzone,{children:[(0,i.jsx)(n.CloudUploadIcon,{className:`h-10 w-10 text-muted-foreground`}),(0,i.jsx)(`p`,{className:`text-sm font-medium`,children:`Drag & drop files here, or click to select`}),(0,i.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[u>1?`Up to ${u} files`:`1 file max`,` `,d?`(Max ${Math.round(d/(1024*1024))}MB)`:``]})]}),(0,i.jsx)(t.FileUploadList,{children:g.map((r,a)=>(0,i.jsxs)(t.FileUploadItem,{value:r,children:[(0,i.jsx)(t.FileUploadItemPreview,{render:(e,t)=>{let n=e.uploadedUrl;return n&&e.type.startsWith(`image/`)?(0,i.jsx)(`img`,{src:n,alt:e.name,className:`size-full object-cover`}):t()}}),(0,i.jsx)(t.FileUploadItemMetadata,{}),(0,i.jsx)(t.FileUploadItemProgress,{className:`absolute bottom-0 left-0 right-0 h-1 w-auto rounded-none`}),(0,i.jsx)(t.FileUploadItemDelete,{asChild:!0,children:(0,i.jsx)(e.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive`,children:(0,i.jsx)(n.Trash2Icon,{className:`h-4 w-4`})})})]},a))})]})]})}exports.FileUpload=s;

package/dist/index108.js

@@ -0,0 +1,16 @@
+import { FormBase as e } from "./index42.js";
+import { FileUpload as t } from "./index107.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/Form/FormFileUpload/index.tsx
+var r = (r) => /* @__PURE__ */ n(e, {
+	...r,
+	children: ({ onChange: e, value: i, disabled: a }) => /* @__PURE__ */ n(t, {
+		...r,
+		value: i,
+		onChange: e,
+		disabled: a || r.disabled,
+		className: r.className
+	})
+});
+//#endregion
+export { r as default };

package/dist/index109.cjs

@@ -0,0 +1 @@
+const e=require("./index43.cjs"),t=require("./index108.cjs");let n=require("react/jsx-runtime");var r=r=>(0,n.jsx)(e.FormBase,{...r,children:({onChange:e,value:i,disabled:a})=>(0,n.jsx)(t.FileUpload,{...r,value:i,onChange:e,disabled:a||r.disabled,className:r.className})});exports.default=r;

package/dist/index11.cjs

@@ -0,0 +1 @@
+const e=require("./index2.cjs"),t=require("./index4.cjs");let n=require("lucide-react"),r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime"),a=require("@radix-ui/react-dialog");a=e.__toESM(a,1);function o({...e}){return(0,i.jsx)(a.Root,{"data-slot":`dialog`,...e})}function s({...e}){return(0,i.jsx)(a.Trigger,{"data-slot":`dialog-trigger`,...e})}function c({...e}){return(0,i.jsx)(a.Portal,{"data-slot":`dialog-portal`,...e})}function l({...e}){return(0,i.jsx)(a.Close,{"data-slot":`dialog-close`,...e})}function u({className:e,...n}){return(0,i.jsx)(a.Overlay,{"data-slot":`dialog-overlay`,className:t.cn(`data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50`,e),...n})}function d({className:e,children:r,showCloseButton:o=!0,...s}){return(0,i.jsxs)(c,{"data-slot":`dialog-portal`,children:[(0,i.jsx)(u,{}),(0,i.jsxs)(a.Content,{"data-slot":`dialog-content`,className:t.cn(`bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg`,e),...s,children:[r,o&&(0,i.jsxs)(a.Close,{"data-slot":`dialog-close`,className:`ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,children:[(0,i.jsx)(n.XIcon,{}),(0,i.jsx)(`span`,{className:`sr-only`,children:`Close`})]})]})]})}function f({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`dialog-header`,className:t.cn(`flex flex-col gap-2 text-center sm:text-left`,e),...n})}function p({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`dialog-footer`,className:t.cn(`flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,e),...n})}function m({className:e,...n}){return(0,i.jsx)(a.Title,{"data-slot":`dialog-title`,className:t.cn(`text-lg leading-none font-semibold`,e),...n})}function h({className:e,...n}){return(0,i.jsx)(a.Description,{"data-slot":`dialog-description`,className:t.cn(`text-muted-foreground text-sm`,e),...n})}exports.Dialog=o,exports.DialogClose=l,exports.DialogContent=d,exports.DialogDescription=h,exports.DialogFooter=p,exports.DialogHeader=f,exports.DialogOverlay=u,exports.DialogPortal=c,exports.DialogTitle=m,exports.DialogTrigger=s;

package/dist/index11.js

@@ -0,0 +1,86 @@
+"use client";
+import { cn as e } from "./index3.js";
+import { Dialog as t, DialogContent as n, DialogDescription as r, DialogHeader as i, DialogTitle as a } from "./index10.js";
+import { SearchIcon as o } from "lucide-react";
+import "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Command as l } from "cmdk";
+//#region src/ui/command.tsx
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ s(l, {
+		"data-slot": "command",
+		className: e("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", t),
+		...n
+	});
+}
+function d({ title: o = "Command Palette", description: l = "Search for a command to run...", children: d, className: f, showCloseButton: p = !0, ...m }) {
+	return /* @__PURE__ */ c(t, {
+		...m,
+		children: [/* @__PURE__ */ c(i, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ s(a, { children: o }), /* @__PURE__ */ s(r, { children: l })]
+		}), /* @__PURE__ */ s(n, {
+			className: e("overflow-hidden p-0", f),
+			showCloseButton: p,
+			children: /* @__PURE__ */ s(u, {
+				className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+				children: d
+			})
+		})]
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ c("div", {
+		"data-slot": "command-input-wrapper",
+		className: "flex h-9 items-center gap-2 border-b px-3",
+		children: [/* @__PURE__ */ s(o, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ s(l.Input, {
+			"data-slot": "command-input",
+			className: e("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", t),
+			...n
+		})]
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ s(l.List, {
+		"data-slot": "command-list",
+		className: e("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", t),
+		...n
+	});
+}
+function m({ ...e }) {
+	return /* @__PURE__ */ s(l.Empty, {
+		"data-slot": "command-empty",
+		className: "py-6 text-center text-sm",
+		...e
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ s(l.Group, {
+		"data-slot": "command-group",
+		className: e("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", t),
+		...n
+	});
+}
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ s(l.Separator, {
+		"data-slot": "command-separator",
+		className: e("bg-border -mx-1 h-px", t),
+		...n
+	});
+}
+function _({ className: t, ...n }) {
+	return /* @__PURE__ */ s(l.Item, {
+		"data-slot": "command-item",
+		className: e("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
+		...n
+	});
+}
+function v({ className: t, ...n }) {
+	return /* @__PURE__ */ s("span", {
+		"data-slot": "command-shortcut",
+		className: e("text-muted-foreground ml-auto text-xs tracking-widest", t),
+		...n
+	});
+}
+//#endregion
+export { u as Command, d as CommandDialog, m as CommandEmpty, h as CommandGroup, f as CommandInput, _ as CommandItem, p as CommandList, g as CommandSeparator, v as CommandShortcut };

package/dist/index12.cjs

@@ -0,0 +1 @@
+"use client";const e=require("./index2.cjs"),t=require("./index4.cjs"),n=require("./index11.cjs");let r=require("lucide-react"),i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("cmdk");function s({className:e,...n}){return(0,a.jsx)(o.Command,{"data-slot":`command`,className:t.cn(`bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md`,e),...n})}function c({title:e=`Command Palette`,description:r=`Search for a command to run...`,children:i,className:o,showCloseButton:c=!0,...l}){return(0,a.jsxs)(n.Dialog,{...l,children:[(0,a.jsxs)(n.DialogHeader,{className:`sr-only`,children:[(0,a.jsx)(n.DialogTitle,{children:e}),(0,a.jsx)(n.DialogDescription,{children:r})]}),(0,a.jsx)(n.DialogContent,{className:t.cn(`overflow-hidden p-0`,o),showCloseButton:c,children:(0,a.jsx)(s,{className:`[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5`,children:i})})]})}function l({className:e,...n}){return(0,a.jsxs)(`div`,{"data-slot":`command-input-wrapper`,className:`flex h-9 items-center gap-2 border-b px-3`,children:[(0,a.jsx)(r.SearchIcon,{className:`size-4 shrink-0 opacity-50`}),(0,a.jsx)(o.Command.Input,{"data-slot":`command-input`,className:t.cn(`placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,e),...n})]})}function u({className:e,...n}){return(0,a.jsx)(o.Command.List,{"data-slot":`command-list`,className:t.cn(`max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto`,e),...n})}function d({...e}){return(0,a.jsx)(o.Command.Empty,{"data-slot":`command-empty`,className:`py-6 text-center text-sm`,...e})}function f({className:e,...n}){return(0,a.jsx)(o.Command.Group,{"data-slot":`command-group`,className:t.cn(`text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium`,e),...n})}function p({className:e,...n}){return(0,a.jsx)(o.Command.Separator,{"data-slot":`command-separator`,className:t.cn(`bg-border -mx-1 h-px`,e),...n})}function m({className:e,...n}){return(0,a.jsx)(o.Command.Item,{"data-slot":`command-item`,className:t.cn(`data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,e),...n})}function h({className:e,...n}){return(0,a.jsx)(`span`,{"data-slot":`command-shortcut`,className:t.cn(`text-muted-foreground ml-auto text-xs tracking-widest`,e),...n})}exports.Command=s,exports.CommandDialog=c,exports.CommandEmpty=d,exports.CommandGroup=f,exports.CommandInput=l,exports.CommandItem=m,exports.CommandList=u,exports.CommandSeparator=p,exports.CommandShortcut=h;