@vlrc-fe/components 1.0.6 → 1.0.8

package/dist/index192.js

@@ -0,0 +1,50 @@
+import { cn as e } from "./index3.js";
+//#region src/Form/FormNumberInput/useFormNumberInput.ts
+var t = [
+	"[appearance:textfield]",
+	"[&::-webkit-outer-spin-button]:appearance-none",
+	"[&::-webkit-inner-spin-button]:appearance-none",
+	"rounded-r-none",
+	"relative"
+];
+function n({ rules: n, inputClassName: r, stepper: i, min: a, max: o, onChange: s, passthroughProps: c }) {
+	let l = n?.required !== void 0 && n.required !== !1;
+	return {
+		isRequired: l,
+		enhancedRules: (() => {
+			if (!n) return n;
+			let e = { ...n };
+			return l && typeof e.required != "string" && typeof e.required != "object" ? e.required = "Trường này là bắt buộc" : typeof e.required == "object" && !e.required.message && (e.required = {
+				...e.required,
+				message: "Trường này là bắt buộc"
+			}), e;
+		})(),
+		numericClass: e(t, r),
+		getHandlers: ({ currentValue: e, field: t }) => {
+			let n = () => {
+				let n = Math.min((e ?? 0) + i, o);
+				t.onChange(n), s?.(n);
+			}, r = () => {
+				let n = Math.max((e ?? 0) - i, a);
+				t.onChange(n), s?.(n);
+			};
+			return {
+				handleIncrement: n,
+				handleDecrement: r,
+				handleKeyDown: (e) => {
+					e.key === "ArrowUp" ? (e.preventDefault(), n()) : e.key === "ArrowDown" && (e.preventDefault(), r()), c.onKeyDown && c.onKeyDown(e);
+				},
+				handleBlur: () => {
+					let n = e;
+					n !== void 0 && (n < a ? (t.onChange(a), s?.(a)) : n > o && (t.onChange(o), s?.(o))), t.onBlur(), c.onBlur && c.onBlur();
+				},
+				numericOnValueChange: (e) => {
+					let n = e.floatValue === void 0 ? void 0 : e.floatValue;
+					t.onChange(n), s?.(n);
+				}
+			};
+		}
+	};
+}
+//#endregion
+export { n as useFormNumberInput };

package/dist/index193.cjs

@@ -0,0 +1 @@
+const e=require("./index4.cjs");var t=[`[appearance:textfield]`,`[&::-webkit-outer-spin-button]:appearance-none`,`[&::-webkit-inner-spin-button]:appearance-none`,`rounded-r-none`,`relative`];function n({rules:n,inputClassName:r,stepper:i,min:a,max:o,onChange:s,passthroughProps:c}){let l=n?.required!==void 0&&n.required!==!1;return{isRequired:l,enhancedRules:(()=>{if(!n)return n;let e={...n};return l&&typeof e.required!=`string`&&typeof e.required!=`object`?e.required=`Trường này là bắt buộc`:typeof e.required==`object`&&!e.required.message&&(e.required={...e.required,message:`Trường này là bắt buộc`}),e})(),numericClass:e.cn(t,r),getHandlers:({currentValue:e,field:t})=>{let n=()=>{let n=Math.min((e??0)+i,o);t.onChange(n),s?.(n)},r=()=>{let n=Math.max((e??0)-i,a);t.onChange(n),s?.(n)};return{handleIncrement:n,handleDecrement:r,handleKeyDown:e=>{e.key===`ArrowUp`?(e.preventDefault(),n()):e.key===`ArrowDown`&&(e.preventDefault(),r()),c.onKeyDown&&c.onKeyDown(e)},handleBlur:()=>{let n=e;n!==void 0&&(n<a?(t.onChange(a),s?.(a)):n>o&&(t.onChange(o),s?.(o))),t.onBlur(),c.onBlur&&c.onBlur()},numericOnValueChange:e=>{let n=e.floatValue===void 0?void 0:e.floatValue;t.onChange(n),s?.(n)}}}}}exports.useFormNumberInput=n;

package/dist/index193.js

@@ -0,0 +1,65 @@
+import { cn as e } from "./index3.js";
+import { FormBase as t } from "./index135.js";
+import { NumericFormat as n } from "./index190.js";
+import { StepperControls as r } from "./index191.js";
+import { useFormNumberInput as i } from "./index192.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/Form/FormNumberInput/FormNumberInput.tsx
+function s({ control: s, name: c, label: l, stepper: u = 1, min: d = "0", max: f = "100", minValue: p = -Infinity, maxValue: m = Infinity, thousandSeparator: h, placeholder: g, fixedDecimalScale: _ = !1, decimalScale: v = 0, suffix: y, prefix: b, inputClassName: x, onChange: S, rules: C, description: w, horizontal: T, controlFirst: E, ...D }) {
+	let { enhancedRules: O, numericClass: k, getHandlers: A } = i({
+		min: p,
+		max: m,
+		rules: C,
+		inputClassName: x,
+		stepper: u,
+		onChange: S,
+		passthroughProps: D
+	});
+	return /* @__PURE__ */ a(t, {
+		control: s,
+		name: c,
+		label: l,
+		description: w,
+		rules: O,
+		horizontal: T,
+		controlFirst: E,
+		children: ({ id: t, "aria-invalid": i, ...s }) => {
+			let c = s.value, { handleIncrement: l, handleDecrement: u, handleKeyDown: x, handleBlur: S, numericOnValueChange: C } = A({
+				currentValue: c,
+				field: s
+			});
+			return /* @__PURE__ */ o("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ a(n, {
+					min: d,
+					max: f,
+					"aria-invalid": i,
+					value: c ?? "",
+					onValueChange: C,
+					thousandSeparator: h,
+					decimalScale: v,
+					fixedDecimalScale: _,
+					allowNegative: p < 0,
+					valueIsNumericString: !1,
+					onBlur: S,
+					suffix: y,
+					prefix: b,
+					placeholder: g || "0",
+					getInputRef: s.ref,
+					onKeyDown: x,
+					name: s.name,
+					...D,
+					id: t,
+					className: e(k, D.className)
+				}), /* @__PURE__ */ a(r, {
+					onIncrement: l,
+					onDecrement: u,
+					disableIncrement: c !== void 0 && c >= m,
+					disableDecrement: c !== void 0 && c <= p
+				})]
+			});
+		}
+	});
+}
+//#endregion
+export { s as FormNumberInput };

package/dist/index194.cjs

@@ -0,0 +1 @@
+const e=require("./index4.cjs"),t=require("./index136.cjs"),n=require("./index191.cjs"),r=require("./index192.cjs"),i=require("./index193.cjs");let a=require("react/jsx-runtime");function o({control:o,name:s,label:c,stepper:l=1,min:u=`0`,max:d=`100`,minValue:f=-1/0,maxValue:p=1/0,thousandSeparator:m,placeholder:h,fixedDecimalScale:g=!1,decimalScale:_=0,suffix:v,prefix:y,inputClassName:b,onChange:x,rules:S,description:C,horizontal:w,controlFirst:T,...E}){let{enhancedRules:D,numericClass:O,getHandlers:k}=i.useFormNumberInput({min:f,max:p,rules:S,inputClassName:b,stepper:l,onChange:x,passthroughProps:E});return(0,a.jsx)(t.FormBase,{control:o,name:s,label:c,description:C,rules:D,horizontal:w,controlFirst:T,children:({id:t,"aria-invalid":i,...o})=>{let s=o.value,{handleIncrement:c,handleDecrement:l,handleKeyDown:b,handleBlur:x,numericOnValueChange:S}=k({currentValue:s,field:o});return(0,a.jsxs)(`div`,{className:`flex items-center`,children:[(0,a.jsx)(n.NumericFormat,{min:u,max:d,"aria-invalid":i,value:s??``,onValueChange:S,thousandSeparator:m,decimalScale:_,fixedDecimalScale:g,allowNegative:f<0,valueIsNumericString:!1,onBlur:x,suffix:v,prefix:y,placeholder:h||`0`,getInputRef:o.ref,onKeyDown:b,name:o.name,...E,id:t,className:e.cn(O,E.className)}),(0,a.jsx)(r.StepperControls,{onIncrement:c,onDecrement:l,disableIncrement:s!==void 0&&s>=p,disableDecrement:s!==void 0&&s<=f})]})}})}exports.FormNumberInput=o;

package/dist/index194.js

@@ -0,0 +1,48 @@
+import { get as e, isNil as t } from "lodash-es";
+//#region src/Form/FormSelect/useFormSelect.ts
+function n(e) {
+	return e.isMulti === !0;
+}
+function r(r) {
+	let { options: i, injectOptions: a, placeholder: o = "Chọn...", description: s, disabled: c, isClearable: l = !0, isSearchable: u = !0, isLoading: d = !1, className: f, rules: p, onSearchTextChange: m, hasNextPage: h, isFetchingNextPage: g, fetchNextPage: _, maxTagCount: v = "responsive", tagRender: y, showSelectAll: b = !1 } = r, x = e(p, "required"), S = !t(x) && x !== !1, C = {
+		options: i,
+		injectOptions: a,
+		placeholder: o,
+		isClearable: l,
+		isSearchable: u,
+		isLoading: d,
+		className: f,
+		disabled: c,
+		onSearchTextChange: m,
+		hasNextPage: h,
+		isFetchingNextPage: g,
+		fetchNextPage: _,
+		maxTagCount: v,
+		tagRender: y,
+		showSelectAll: b
+	};
+	return {
+		isRequired: S,
+		description: s,
+		enhancedRules: (() => {
+			if (!p) return p;
+			let e = { ...p };
+			return S && typeof e.required != "string" && typeof e.required != "object" ? e.required = "Trường này là bắt buộc" : typeof e.required == "object" && !e.required.message && (e.required = {
+				...e.required,
+				message: "Trường này là bắt buộc"
+			}), e;
+		})(),
+		baseSelectProps: C,
+		isMulti: n(r),
+		createChangeHandlers: (e) => ({
+			onChangeMulti: (t) => {
+				e.onChange(t), n(r) && r.onChange && r.onChange(t);
+			},
+			onChangeSingle: (t) => {
+				e.onChange(t), !n(r) && r.onChange && r.onChange(t);
+			}
+		})
+	};
+}
+//#endregion
+export { r as useFormSelect };

package/dist/index195.cjs

@@ -0,0 +1 @@
+let e=require("lodash-es");function t(e){return e.isMulti===!0}function n(n){let{options:r,injectOptions:i,placeholder:a=`Chọn...`,description:o,disabled:s,isClearable:c=!0,isSearchable:l=!0,isLoading:u=!1,className:d,rules:f,onSearchTextChange:p,hasNextPage:m,isFetchingNextPage:h,fetchNextPage:g,maxTagCount:_=`responsive`,tagRender:v,showSelectAll:y=!1}=n,b=(0,e.get)(f,`required`),x=!(0,e.isNil)(b)&&b!==!1,S={options:r,injectOptions:i,placeholder:a,isClearable:c,isSearchable:l,isLoading:u,className:d,disabled:s,onSearchTextChange:p,hasNextPage:m,isFetchingNextPage:h,fetchNextPage:g,maxTagCount:_,tagRender:v,showSelectAll:y};return{isRequired:x,description:o,enhancedRules:(()=>{if(!f)return f;let e={...f};return x&&typeof e.required!=`string`&&typeof e.required!=`object`?e.required=`Trường này là bắt buộc`:typeof e.required==`object`&&!e.required.message&&(e.required={...e.required,message:`Trường này là bắt buộc`}),e})(),baseSelectProps:S,isMulti:t(n),createChangeHandlers:e=>({onChangeMulti:r=>{e.onChange(r),t(n)&&n.onChange&&n.onChange(r)},onChangeSingle:r=>{e.onChange(r),!t(n)&&n.onChange&&n.onChange(r)}})}}exports.useFormSelect=n;

package/dist/index195.js

@@ -0,0 +1,67 @@
+import { Badge as e } from "./index19.js";
+import { Tooltip as t, TooltipContent as n, TooltipProvider as r, TooltipTrigger as i } from "./index107.js";
+import { Icons as a } from "./index134.js";
+import { useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/Select/MultiSelectTags.tsx
+function d({ selectedOptions: d, maxTagCount: f = "responsive", onRemove: p, disabled: m, tagRender: h }) {
+	let g = s(null), [_, v] = c(d.length), [y, b] = c([]);
+	o(() => {
+		if (f === "responsive" && g.current) {
+			let e = g.current, t = e.offsetWidth - 60, n = 0, r = 0, i = Array.from(e.children);
+			for (let e = 0; e < i.length; e++) {
+				let a = i[e];
+				if (a.classList.contains("select-tag")) {
+					let e = a.offsetWidth + 4;
+					if (n + e <= t) n += e, r++;
+					else break;
+				}
+			}
+			r < d.length ? (v(Math.max(1, r - 1)), b(d.slice(Math.max(1, r - 1)))) : (v(d.length), b([]));
+		} else typeof f == "number" ? (v(Math.min(f, d.length)), b(d.slice(f))) : (v(d.length), b([]));
+	}, [d, f]);
+	let x = h || ((t, n) => /* @__PURE__ */ u(e, {
+		variant: "secondary",
+		className: "select-tag flex items-center gap-1 px-2 py-0.5 text-xs whitespace-nowrap",
+		children: [
+			t.icon && /* @__PURE__ */ l("span", {
+				className: "text-xs",
+				children: t.icon
+			}),
+			/* @__PURE__ */ l("span", {
+				className: "truncate max-w-[100px]",
+				children: t.label
+			}),
+			!m && /* @__PURE__ */ l(a.XIcon, {
+				className: "w-3 h-3 cursor-pointer hover:text-destructive",
+				onClick: (e) => {
+					e.stopPropagation(), n();
+				}
+			})
+		]
+	}, t.value));
+	return /* @__PURE__ */ u("div", {
+		ref: g,
+		className: "flex items-center gap-1 flex-wrap flex-1 min-w-0",
+		children: [d.slice(0, _).map((e) => x(e, () => p(e.value))), y.length > 0 && /* @__PURE__ */ l(r, { children: /* @__PURE__ */ u(t, { children: [/* @__PURE__ */ l(i, {
+			asChild: !0,
+			children: /* @__PURE__ */ u(e, {
+				variant: "outline",
+				className: "cursor-help text-xs px-2 py-0.5",
+				children: ["+", y.length]
+			})
+		}), /* @__PURE__ */ l(n, {
+			side: "bottom",
+			className: "max-w-xs",
+			children: /* @__PURE__ */ l("div", {
+				className: "flex flex-col gap-1",
+				children: y.map((e) => /* @__PURE__ */ u("div", {
+					className: "flex items-center gap-2 text-xs",
+					children: [e.icon && /* @__PURE__ */ l("span", { children: e.icon }), /* @__PURE__ */ l("span", { children: e.label })]
+				}, e.value))
+			})
+		})] }) })]
+	});
+}
+//#endregion
+export { d as MultiSelectTags };

package/dist/index196.cjs

@@ -0,0 +1 @@
+const e=require("./index20.cjs"),t=require("./index108.cjs"),n=require("./index135.cjs");let r=require("react"),i=require("react/jsx-runtime");function a({selectedOptions:a,maxTagCount:o=`responsive`,onRemove:s,disabled:c,tagRender:l}){let u=(0,r.useRef)(null),[d,f]=(0,r.useState)(a.length),[p,m]=(0,r.useState)([]);(0,r.useEffect)(()=>{if(o===`responsive`&&u.current){let e=u.current,t=e.offsetWidth-60,n=0,r=0,i=Array.from(e.children);for(let e=0;e<i.length;e++){let a=i[e];if(a.classList.contains(`select-tag`)){let e=a.offsetWidth+4;if(n+e<=t)n+=e,r++;else break}}r<a.length?(f(Math.max(1,r-1)),m(a.slice(Math.max(1,r-1)))):(f(a.length),m([]))}else typeof o==`number`?(f(Math.min(o,a.length)),m(a.slice(o))):(f(a.length),m([]))},[a,o]);let h=l||((t,r)=>(0,i.jsxs)(e.Badge,{variant:`secondary`,className:`select-tag flex items-center gap-1 px-2 py-0.5 text-xs whitespace-nowrap`,children:[t.icon&&(0,i.jsx)(`span`,{className:`text-xs`,children:t.icon}),(0,i.jsx)(`span`,{className:`truncate max-w-[100px]`,children:t.label}),!c&&(0,i.jsx)(n.Icons.XIcon,{className:`w-3 h-3 cursor-pointer hover:text-destructive`,onClick:e=>{e.stopPropagation(),r()}})]},t.value));return(0,i.jsxs)(`div`,{ref:u,className:`flex items-center gap-1 flex-wrap flex-1 min-w-0`,children:[a.slice(0,d).map(e=>h(e,()=>s(e.value))),p.length>0&&(0,i.jsx)(t.TooltipProvider,{children:(0,i.jsxs)(t.Tooltip,{children:[(0,i.jsx)(t.TooltipTrigger,{asChild:!0,children:(0,i.jsxs)(e.Badge,{variant:`outline`,className:`cursor-help text-xs px-2 py-0.5`,children:[`+`,p.length]})}),(0,i.jsx)(t.TooltipContent,{side:`bottom`,className:`max-w-xs`,children:(0,i.jsx)(`div`,{className:`flex flex-col gap-1`,children:p.map(e=>(0,i.jsxs)(`div`,{className:`flex items-center gap-2 text-xs`,children:[e.icon&&(0,i.jsx)(`span`,{children:e.icon}),(0,i.jsx)(`span`,{children:e.label})]},e.value))})})]})})]})}exports.MultiSelectTags=a;

package/dist/index196.js

@@ -0,0 +1,151 @@
+import { Popover as e, PopoverContent as t, PopoverTrigger as n } from "./index98.js";
+import { Icons as r } from "./index134.js";
+import { MultiSelectTags as i } from "./index195.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/index197.cjs

@@ -0,0 +1 @@
+const e=require("./index2.cjs"),t=require("./index99.cjs"),n=require("./index135.cjs"),r=require("./index196.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/index197.js

@@ -0,0 +1,23 @@
+import { FormBase as e } from "./index135.js";
+import { useFormSelect as t } from "./index194.js";
+import { BaseSelect as n } from "./index196.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/index198.cjs

@@ -0,0 +1 @@
+const e=require("./index2.cjs"),t=require("./index136.cjs"),n=require("./index195.cjs"),r=require("./index197.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/index198.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/index199.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/index199.js

@@ -0,0 +1,53 @@
+import { Label as e } from "./index79.js";
+import { FormControl as t, FormField as n, FormItem as r, FormLabel as i, FormMessage as a } from "./index84.js";
+import { RadioGroup as o, RadioGroupItem as s } from "./index100.js";
+import { useFormRadio as c } from "./index198.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/index20.cjs

@@ -1 +1 @@
-const e=require("./index2.cjs"),t=require("./index4.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({className:e,type:n,...i}){return(0,r.jsx)(`input`,{type:n,"data-slot":`input`,className:t.cn(`file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`,`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive`,e),...i})}exports.Input=i;
+const e=require("./index2.cjs"),t=require("./index4.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime"),i=require("class-variance-authority"),a=require("@radix-ui/react-slot");var o=(0,i.cva)(`inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden`,{variants:{variant:{default:`border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90`,secondary:`border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90`,destructive:`border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60`,outline:`text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground`}},defaultVariants:{variant:`default`}});function s({className:e,variant:n,asChild:i=!1,...s}){return(0,r.jsx)(i?a.Slot:`span`,{"data-slot":`badge`,className:t.cn(o({variant:n}),e),...s})}exports.Badge=s,exports.badgeVariants=o;