@vlrc-fe/components 1.0.0

package/dist/index42.js

@@ -0,0 +1,125 @@
+import { cn as e } from "./index3.js";
+import { Button as t } from "./index6.js";
+import { Checkbox as n } from "./index9.js";
+import { Field as r, FieldContent as i, FieldDescription as a, FieldError as o, FieldLabel as s } from "./index15.js";
+import { Controller as c } from "./index17.js";
+import { Input as l } from "./index19.js";
+import { Select as u, SelectContent as d, SelectTrigger as f, SelectValue as p } from "./index25.js";
+import { Textarea as m } from "./index29.js";
+import { Icons as h } from "./index41.js";
+import { useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/Form/Form.tsx
+var b = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, x = /^(0|\+84)(3|5|7|8|9)[0-9]{8}$/, S = (e, t) => {
+	let n = e.toLowerCase();
+	if (t === "password") return n.includes("confirm") || n.includes("new") ? "new-password" : "current-password";
+	if (t === "email" || n.includes("email")) return "email";
+	if (t === "tel" || n.includes("phone")) return "tel";
+	if (n.includes("name")) return "name";
+	if (n.includes("username")) return "username";
+};
+function C({ children: e, label: t, control: n, name: l, htmlType: u, description: d, controlFirst: f, horizontal: p, rules: m, className: h }) {
+	return /* @__PURE__ */ v(c, {
+		control: n,
+		name: l,
+		rules: (() => {
+			let e = { ...m };
+			return u === "email" && !m?.pattern && (e.pattern = {
+				value: b,
+				message: "Email không hợp lệ"
+			}), u === "tel" && !m?.pattern && (e.pattern = {
+				value: x,
+				message: "Số điện thoại không hợp lệ"
+			}), m?.required !== void 0 && m.required !== !1 && (typeof m.required == "string" ? e.required = m.required : typeof m.required == "object" ? m.required.message || (e.required = {
+				...m.required,
+				message: "Trường này là bắt buộc"
+			}) : e.required = "Trường này là bắt buộc"), e;
+		})(),
+		render: ({ field: n, fieldState: c }) => {
+			let l = /* @__PURE__ */ y(_, { children: [t && /* @__PURE__ */ y(s, {
+				htmlFor: n.name,
+				children: [t, m?.required && /* @__PURE__ */ v("span", {
+					className: "text-red-500 ml-1",
+					children: "*"
+				})]
+			}), d && /* @__PURE__ */ v(a, { children: d })] }), u = e({
+				...n,
+				id: n.name,
+				"aria-invalid": c.invalid
+			}), g = c.invalid && /* @__PURE__ */ v(o, { errors: [c.error] });
+			return /* @__PURE__ */ v(r, {
+				className: h,
+				"data-invalid": c.invalid,
+				orientation: p ? "horizontal" : void 0,
+				children: f ? /* @__PURE__ */ y(_, { children: [u, /* @__PURE__ */ y(i, { children: [l, g] })] }) : /* @__PURE__ */ y(_, { children: [
+					/* @__PURE__ */ v(i, { children: l }),
+					u,
+					g
+				] })
+			});
+		}
+	});
+}
+var w = ({ placeholder: n, inputClassName: r, leftIcon: i, rightIcon: a, disabled: o, autoComplete: s, ...c }) => {
+	let [u, d] = g(!1), f = c.htmlType === "password", p = s ?? S(String(c.name), c.htmlType);
+	return /* @__PURE__ */ v(C, {
+		...c,
+		children: (s) => /* @__PURE__ */ y("div", {
+			className: "relative",
+			children: [
+				i && /* @__PURE__ */ v("div", {
+					className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none",
+					children: i
+				}),
+				/* @__PURE__ */ v(l, {
+					...s,
+					type: f && u ? "text" : c.htmlType,
+					autoComplete: p,
+					placeholder: n,
+					disabled: o,
+					className: e(i && "pl-10", (f || a) && "pr-10", r)
+				}),
+				f && /* @__PURE__ */ v(t, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					onClick: () => d(!u),
+					className: "absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+					tabIndex: -1,
+					children: v(u ? h.EyeOff : h.Eye, { className: "h-4 w-4" })
+				}),
+				!f && a && /* @__PURE__ */ v("div", {
+					className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none",
+					children: a
+				})
+			]
+		})
+	});
+}, T = (e) => /* @__PURE__ */ v(C, {
+	...e,
+	children: (e) => /* @__PURE__ */ v(m, { ...e })
+}), E = ({ children: e, ...t }) => /* @__PURE__ */ v(C, {
+	...t,
+	children: ({ onChange: t, onBlur: n, ...r }) => /* @__PURE__ */ y(u, {
+		...r,
+		onValueChange: t,
+		children: [/* @__PURE__ */ v(f, {
+			"aria-invalid": r["aria-invalid"],
+			id: r.id,
+			onBlur: n,
+			children: /* @__PURE__ */ v(p, {})
+		}), /* @__PURE__ */ v(d, { children: e })]
+	})
+}), D = ({ disabled: e, ...t }) => /* @__PURE__ */ v(C, {
+	...t,
+	horizontal: !0,
+	controlFirst: !0,
+	children: ({ onChange: t, value: r, ...i }) => /* @__PURE__ */ v(n, {
+		...i,
+		checked: r,
+		onCheckedChange: t,
+		disabled: e
+	})
+});
+//#endregion
+export { C as FormBase, D as FormCheckbox, w as FormInput, E as FormSimpleSelect, T as FormTextarea };

package/dist/index43.cjs

@@ -0,0 +1 @@
+const e=require("./index4.cjs"),t=require("./index7.cjs"),n=require("./index10.cjs"),r=require("./index16.cjs"),i=require("./index18.cjs"),a=require("./index20.cjs"),o=require("./index26.cjs"),s=require("./index30.cjs"),c=require("./index42.cjs");let l=require("react"),u=require("react/jsx-runtime");var d=/^[^\s@]+@[^\s@]+\.[^\s@]+$/,f=/^(0|\+84)(3|5|7|8|9)[0-9]{8}$/,p=(e,t)=>{let n=e.toLowerCase();if(t===`password`)return n.includes(`confirm`)||n.includes(`new`)?`new-password`:`current-password`;if(t===`email`||n.includes(`email`))return`email`;if(t===`tel`||n.includes(`phone`))return`tel`;if(n.includes(`name`))return`name`;if(n.includes(`username`))return`username`};function m({children:e,label:t,control:n,name:a,htmlType:o,description:s,controlFirst:c,horizontal:l,rules:p,className:m}){return(0,u.jsx)(i.Controller,{control:n,name:a,rules:(()=>{let e={...p};return o===`email`&&!p?.pattern&&(e.pattern={value:d,message:`Email không hợp lệ`}),o===`tel`&&!p?.pattern&&(e.pattern={value:f,message:`Số điện thoại không hợp lệ`}),p?.required!==void 0&&p.required!==!1&&(typeof p.required==`string`?e.required=p.required:typeof p.required==`object`?p.required.message||(e.required={...p.required,message:`Trường này là bắt buộc`}):e.required=`Trường này là bắt buộc`),e})(),render:({field:n,fieldState:i})=>{let a=(0,u.jsxs)(u.Fragment,{children:[t&&(0,u.jsxs)(r.FieldLabel,{htmlFor:n.name,children:[t,p?.required&&(0,u.jsx)(`span`,{className:`text-red-500 ml-1`,children:`*`})]}),s&&(0,u.jsx)(r.FieldDescription,{children:s})]}),o=e({...n,id:n.name,"aria-invalid":i.invalid}),d=i.invalid&&(0,u.jsx)(r.FieldError,{errors:[i.error]});return(0,u.jsx)(r.Field,{className:m,"data-invalid":i.invalid,orientation:l?`horizontal`:void 0,children:c?(0,u.jsxs)(u.Fragment,{children:[o,(0,u.jsxs)(r.FieldContent,{children:[a,d]})]}):(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(r.FieldContent,{children:a}),o,d]})})}})}var h=({placeholder:n,inputClassName:r,leftIcon:i,rightIcon:o,disabled:s,autoComplete:d,...f})=>{let[h,g]=(0,l.useState)(!1),_=f.htmlType===`password`,v=d??p(String(f.name),f.htmlType);return(0,u.jsx)(m,{...f,children:l=>(0,u.jsxs)(`div`,{className:`relative`,children:[i&&(0,u.jsx)(`div`,{className:`absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none`,children:i}),(0,u.jsx)(a.Input,{...l,type:_&&h?`text`:f.htmlType,autoComplete:v,placeholder:n,disabled:s,className:e.cn(i&&`pl-10`,(_||o)&&`pr-10`,r)}),_&&(0,u.jsx)(t.Button,{type:`button`,variant:`ghost`,size:`icon-sm`,onClick:()=>g(!h),className:`absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground`,tabIndex:-1,children:h?(0,u.jsx)(c.Icons.EyeOff,{className:`h-4 w-4`}):(0,u.jsx)(c.Icons.Eye,{className:`h-4 w-4`})}),!_&&o&&(0,u.jsx)(`div`,{className:`absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none`,children:o})]})})},g=e=>(0,u.jsx)(m,{...e,children:e=>(0,u.jsx)(s.Textarea,{...e})}),_=({children:e,...t})=>(0,u.jsx)(m,{...t,children:({onChange:t,onBlur:n,...r})=>(0,u.jsxs)(o.Select,{...r,onValueChange:t,children:[(0,u.jsx)(o.SelectTrigger,{"aria-invalid":r[`aria-invalid`],id:r.id,onBlur:n,children:(0,u.jsx)(o.SelectValue,{})}),(0,u.jsx)(o.SelectContent,{children:e})]})}),v=({disabled:e,...t})=>(0,u.jsx)(m,{...t,horizontal:!0,controlFirst:!0,children:({onChange:t,value:r,...i})=>(0,u.jsx)(n.Checkbox,{...i,checked:r,onCheckedChange:t,disabled:e})});exports.FormBase=m,exports.FormCheckbox=v,exports.FormInput=h,exports.FormSimpleSelect=_,exports.FormTextarea=g;

package/dist/index43.js

@@ -0,0 +1,26 @@
+import { cva as e } from "class-variance-authority";
+//#region src/MultiSelect/type.ts
+var t = e("m-1 transition-all duration-300 ease-in-out", {
+	variants: {
+		variant: {
+			default: "border-foreground/10 text-foreground bg-card hover:bg-card/80",
+			secondary: "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+			inverted: "inverted"
+		},
+		badgeAnimation: {
+			bounce: "hover:-translate-y-1 hover:scale-110",
+			pulse: "hover:animate-pulse",
+			wiggle: "hover:animate-wiggle",
+			fade: "hover:opacity-80",
+			slide: "hover:translate-x-1",
+			none: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		badgeAnimation: "bounce"
+	}
+});
+//#endregion
+export { t as multiSelectVariants };

package/dist/index44.cjs

@@ -0,0 +1 @@
+var e=(0,require("class-variance-authority").cva)(`m-1 transition-all duration-300 ease-in-out`,{variants:{variant:{default:`border-foreground/10 text-foreground bg-card hover:bg-card/80`,secondary:`border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80`,destructive:`border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80`,inverted:`inverted`},badgeAnimation:{bounce:`hover:-translate-y-1 hover:scale-110`,pulse:`hover:animate-pulse`,wiggle:`hover:animate-wiggle`,fade:`hover:opacity-80`,slide:`hover:translate-x-1`,none:``}},defaultVariants:{variant:`default`,badgeAnimation:`bounce`}});exports.multiSelectVariants=e;

package/dist/index44.js

@@ -0,0 +1,88 @@
+//#region src/MultiSelect/utils.ts
+var e = (e) => Array.isArray(e) && e.length > 0 && "heading" in e[0], t = (e, t) => {
+	if (e.length !== t.length) return !1;
+	let n = [...e].sort(), r = [...t].sort();
+	return n.every((e, t) => e === r[t]);
+}, n = (t, n) => {
+	if (t.length === 0) return {
+		options: [],
+		duplicates: []
+	};
+	let r = e(t) ? t.flatMap((e) => e.options) : t, i = /* @__PURE__ */ new Set(), a = [], o = [];
+	return r.forEach((e) => {
+		i.has(e.value) ? (a.push(e.value), n || o.push(e)) : (i.add(e.value), o.push(e));
+	}), {
+		options: n ? o : r,
+		duplicates: a
+	};
+}, r = (e, t, n) => {
+	if (!e) return {
+		maxCount: t,
+		hideIcons: !1,
+		compactMode: !1
+	};
+	if (e === !0) {
+		let e = {
+			mobile: {
+				maxCount: 2,
+				hideIcons: !1,
+				compactMode: !0
+			},
+			tablet: {
+				maxCount: 4,
+				hideIcons: !1,
+				compactMode: !1
+			},
+			desktop: {
+				maxCount: 6,
+				hideIcons: !1,
+				compactMode: !1
+			}
+		}[n];
+		return {
+			maxCount: e?.maxCount ?? t,
+			hideIcons: e?.hideIcons ?? !1,
+			compactMode: e?.compactMode ?? !1
+		};
+	}
+	let r = e[n];
+	return {
+		maxCount: r?.maxCount ?? t,
+		hideIcons: r?.hideIcons ?? !1,
+		compactMode: r?.compactMode ?? !1
+	};
+}, i = (e, t) => {
+	if (t?.badgeAnimation) switch (t.badgeAnimation) {
+		case "bounce": return e ? "animate-bounce" : "hover:-translate-y-1 hover:scale-110";
+		case "pulse": return "hover:animate-pulse";
+		case "wiggle": return "hover:animate-wiggle";
+		case "fade": return "hover:opacity-80";
+		case "slide": return "hover:translate-x-1";
+		case "none": return "";
+		default: return "";
+	}
+	return e ? "animate-bounce" : "";
+}, a = (e) => {
+	if (e?.popoverAnimation) switch (e.popoverAnimation) {
+		case "scale": return "animate-scaleIn";
+		case "slide": return "animate-slideInDown";
+		case "fade": return "animate-fadeIn";
+		case "flip": return "animate-flipIn";
+		case "none": return "";
+		default: return "";
+	}
+	return "";
+}, o = (t, n, r) => !r || !n ? t : t.length === 0 ? [] : e(t) ? t.map((e) => ({
+	...e,
+	options: e.options.filter((e) => e.label.toLowerCase().includes(n.toLowerCase()) || e.value.toLowerCase().includes(n.toLowerCase()))
+})).filter((e) => e.options.length > 0) : t.filter((e) => e.label.toLowerCase().includes(n.toLowerCase()) || e.value.toLowerCase().includes(n.toLowerCase())), s = (e, t, n, r) => ({
+	minWidth: n || (e === "mobile" ? "0px" : "200px"),
+	maxWidth: r || "100%",
+	width: t ? "auto" : "100%"
+}), c = (e, t) => {
+	if (!t) return e.length;
+	let n = t.toLowerCase();
+	return e.filter((e) => e.label.toLowerCase().includes(n) || e.value.toLowerCase().includes(n)).length;
+};
+//#endregion
+export { t as arraysEqual, n as buildAllOptions, i as buildBadgeAnimationClass, a as buildPopoverAnimationClass, s as buildWidthConstraints, r as computeResponsiveSettings, c as countMatchingOptions, o as filterOptions, e as isGroupedOptions };

package/dist/index45.cjs

@@ -0,0 +1 @@
+var e=e=>Array.isArray(e)&&e.length>0&&`heading`in e[0],t=(e,t)=>{if(e.length!==t.length)return!1;let n=[...e].sort(),r=[...t].sort();return n.every((e,t)=>e===r[t])},n=(t,n)=>{if(t.length===0)return{options:[],duplicates:[]};let r=e(t)?t.flatMap(e=>e.options):t,i=new Set,a=[],o=[];return r.forEach(e=>{i.has(e.value)?(a.push(e.value),n||o.push(e)):(i.add(e.value),o.push(e))}),{options:n?o:r,duplicates:a}},r=(e,t,n)=>{if(!e)return{maxCount:t,hideIcons:!1,compactMode:!1};if(e===!0){let e={mobile:{maxCount:2,hideIcons:!1,compactMode:!0},tablet:{maxCount:4,hideIcons:!1,compactMode:!1},desktop:{maxCount:6,hideIcons:!1,compactMode:!1}}[n];return{maxCount:e?.maxCount??t,hideIcons:e?.hideIcons??!1,compactMode:e?.compactMode??!1}}let r=e[n];return{maxCount:r?.maxCount??t,hideIcons:r?.hideIcons??!1,compactMode:r?.compactMode??!1}},i=(e,t)=>{if(t?.badgeAnimation)switch(t.badgeAnimation){case`bounce`:return e?`animate-bounce`:`hover:-translate-y-1 hover:scale-110`;case`pulse`:return`hover:animate-pulse`;case`wiggle`:return`hover:animate-wiggle`;case`fade`:return`hover:opacity-80`;case`slide`:return`hover:translate-x-1`;case`none`:return``;default:return``}return e?`animate-bounce`:``},a=e=>{if(e?.popoverAnimation)switch(e.popoverAnimation){case`scale`:return`animate-scaleIn`;case`slide`:return`animate-slideInDown`;case`fade`:return`animate-fadeIn`;case`flip`:return`animate-flipIn`;case`none`:return``;default:return``}return``},o=(t,n,r)=>!r||!n?t:t.length===0?[]:e(t)?t.map(e=>({...e,options:e.options.filter(e=>e.label.toLowerCase().includes(n.toLowerCase())||e.value.toLowerCase().includes(n.toLowerCase()))})).filter(e=>e.options.length>0):t.filter(e=>e.label.toLowerCase().includes(n.toLowerCase())||e.value.toLowerCase().includes(n.toLowerCase())),s=(e,t,n,r)=>({minWidth:n||(e===`mobile`?`0px`:`200px`),maxWidth:r||`100%`,width:t?`auto`:`100%`}),c=(e,t)=>{if(!t)return e.length;let n=t.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(n)||e.value.toLowerCase().includes(n)).length};exports.arraysEqual=t,exports.buildAllOptions=n,exports.buildBadgeAnimationClass=i,exports.buildPopoverAnimationClass=a,exports.buildWidthConstraints=s,exports.computeResponsiveSettings=r,exports.countMatchingOptions=c,exports.filterOptions=o,exports.isGroupedOptions=e;

package/dist/index45.js

@@ -0,0 +1,221 @@
+import { cn as e } from "./index3.js";
+import { Badge as t } from "./index5.js";
+import { Command as n, CommandEmpty as r, CommandGroup as i, CommandInput as a, CommandItem as o, CommandList as s, CommandSeparator as c } from "./index11.js";
+import { Separator as l } from "./index14.js";
+import { multiSelectVariants as u } from "./index43.js";
+import { isGroupedOptions as d } from "./index44.js";
+import { CheckIcon as f, ChevronDown as p, XCircle as m, XIcon as h } from "lucide-react";
+import "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/MultiSelect/renderers.tsx
+var y = ({ politeMessage: e, assertiveMessage: t }) => /* @__PURE__ */ v("div", {
+	className: "sr-only",
+	children: [/* @__PURE__ */ _("div", {
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		role: "status",
+		children: e
+	}), /* @__PURE__ */ _("div", {
+		"aria-live": "assertive",
+		"aria-atomic": "true",
+		role: "alert",
+		children: t
+	})]
+}), b = ({ selectedValues: n, responsiveSettings: r, screenSize: i, singleLine: a, animation: o, animationConfig: s, badgeAnimationClass: c, variant: d, getOptionByValue: f, toggleOption: g, clearExtraOptions: y, handleClear: b }) => /* @__PURE__ */ v("div", {
+	className: "flex justify-between items-center w-full",
+	children: [/* @__PURE__ */ v("div", {
+		className: e("flex items-center gap-1", a ? "overflow-x-auto multiselect-singleline-scroll" : "flex-wrap", r.compactMode && "gap-0.5"),
+		style: a ? { paddingBottom: "4px" } : {},
+		children: [n.slice(0, r.maxCount).map((n) => {
+			let l = f(n), p = l?.icon, h = l?.style;
+			if (!l) return null;
+			let y = {
+				animationDuration: `${o}s`,
+				...h?.badgeColor && { backgroundColor: h.badgeColor },
+				...h?.gradient && {
+					background: h.gradient,
+					color: "white"
+				}
+			};
+			return /* @__PURE__ */ v(t, {
+				className: e(c, u({ variant: d }), h?.gradient && "text-white border-transparent", r.compactMode && "text-xs px-1.5 py-0.5", i === "mobile" && "max-w-30 truncate", a && "shrink-0 whitespace-nowrap", "[&>svg]:pointer-events-auto"),
+				style: {
+					...y,
+					animationDuration: `${s?.duration || o}s`,
+					animationDelay: `${s?.delay || 0}s`
+				},
+				children: [
+					p && !r.hideIcons && /* @__PURE__ */ _(p, {
+						className: e("h-4 w-4 mr-2", r.compactMode && "h-3 w-3 mr-1", h?.iconColor && "text-current"),
+						...h?.iconColor && { style: { color: h.iconColor } }
+					}),
+					/* @__PURE__ */ _("span", {
+						className: e(i === "mobile" && "truncate"),
+						children: l.label
+					}),
+					/* @__PURE__ */ _("div", {
+						role: "button",
+						tabIndex: 0,
+						onClick: (e) => {
+							e.stopPropagation(), g(n);
+						},
+						onKeyDown: (e) => {
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), g(n));
+						},
+						"aria-label": `Remove ${l.label} from selection`,
+						className: "ml-2 h-4 w-4 cursor-pointer hover:bg-white/20 rounded-sm p-0.5 -m-0.5 focus:outline-none focus:ring-1 focus:ring-white/50",
+						children: /* @__PURE__ */ _(m, { className: e("h-3 w-3", r.compactMode && "h-2.5 w-2.5") })
+					})
+				]
+			}, n);
+		}).filter(Boolean), n.length > r.maxCount && /* @__PURE__ */ v(t, {
+			className: e("bg-transparent text-foreground border-foreground/1 hover:bg-transparent", c, u({ variant: d }), r.compactMode && "text-xs px-1.5 py-0.5", a && "shrink-0 whitespace-nowrap", "[&>svg]:pointer-events-auto"),
+			style: {
+				animationDuration: `${s?.duration || o}s`,
+				animationDelay: `${s?.delay || 0}s`
+			},
+			children: [`+ ${n.length - r.maxCount} more`, /* @__PURE__ */ _(m, {
+				className: e("ml-2 h-4 w-4 cursor-pointer", r.compactMode && "ml-1 h-3 w-3"),
+				onClick: (e) => {
+					e.stopPropagation(), y();
+				}
+			})]
+		})]
+	}), /* @__PURE__ */ v("div", {
+		className: "flex items-center justify-between",
+		children: [
+			/* @__PURE__ */ _("div", {
+				role: "button",
+				tabIndex: 0,
+				onClick: (e) => {
+					e.stopPropagation(), b();
+				},
+				onKeyDown: (e) => {
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), b());
+				},
+				"aria-label": `Clear all ${n.length} selected options`,
+				className: "flex items-center justify-center h-4 w-4 mx-2 cursor-pointer text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 rounded-sm",
+				children: /* @__PURE__ */ _(h, { className: "h-4 w-4" })
+			}),
+			/* @__PURE__ */ _(l, {
+				orientation: "vertical",
+				className: "flex min-h-6 h-full"
+			}),
+			/* @__PURE__ */ _(p, {
+				className: "h-4 mx-2 cursor-pointer text-muted-foreground",
+				"aria-hidden": "true"
+			})
+		]
+	})]
+}), x = ({ placeholder: e }) => /* @__PURE__ */ v("div", {
+	className: "flex items-center justify-between w-full mx-auto",
+	children: [/* @__PURE__ */ _("span", {
+		className: "text-sm text-muted-foreground mx-3",
+		children: e
+	}), /* @__PURE__ */ _(p, { className: "h-4 cursor-pointer text-muted-foreground mx-2" })]
+}), S = ({ filteredOptions: t, hideSelectAll: u, searchValue: p, searchable: m, selectedValues: h, getAllOptions: y, toggleAll: b, toggleOption: x, handleClear: S, setIsPopoverOpen: C, handleInputKeyDown: w, setSearchValue: T, multiSelectId: E, emptyIndicator: D, screenSize: O }) => /* @__PURE__ */ v(n, { children: [
+	m && /* @__PURE__ */ _(a, {
+		placeholder: "Search options...",
+		onKeyDown: w,
+		value: p,
+		onValueChange: T,
+		"aria-label": "Search through available options",
+		"aria-describedby": `${E}-search-help`
+	}),
+	m && /* @__PURE__ */ _("div", {
+		id: `${E}-search-help`,
+		className: "sr-only",
+		children: "Type to filter options. Use arrow keys to navigate results."
+	}),
+	/* @__PURE__ */ v(s, {
+		className: e("max-h-[40vh] overflow-y-auto multiselect-scrollbar", O === "mobile" && "max-h-[50vh]", "overscroll-behavior-y-contain"),
+		children: [
+			/* @__PURE__ */ _(r, { children: D || "No results found." }),
+			" ",
+			!u && !p && /* @__PURE__ */ _(i, { children: /* @__PURE__ */ v(o, {
+				onSelect: b,
+				role: "option",
+				"aria-selected": h.length === y().filter((e) => !e.disabled).length,
+				"aria-label": `Select all ${y().length} options`,
+				className: "cursor-pointer",
+				children: [/* @__PURE__ */ _("div", {
+					className: e("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", h.length === y().filter((e) => !e.disabled).length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ _(f, { className: "h-4 w-4" })
+				}), /* @__PURE__ */ v("span", { children: [
+					"(Select All",
+					y().length > 20 ? ` - ${y().length} options` : "",
+					")"
+				] })]
+			}, "all") }),
+			d(t) ? t.map((t) => /* @__PURE__ */ _(i, {
+				heading: t.heading,
+				children: t.options.map((t) => {
+					let n = h.includes(t.value);
+					return /* @__PURE__ */ v(o, {
+						onSelect: () => x(t.value),
+						role: "option",
+						"aria-selected": n,
+						"aria-disabled": t.disabled,
+						"aria-label": `${t.label}${n ? ", selected" : ", not selected"}${t.disabled ? ", disabled" : ""}`,
+						className: e("cursor-pointer", t.disabled && "opacity-50 cursor-not-allowed"),
+						disabled: t.disabled,
+						children: [
+							/* @__PURE__ */ _("div", {
+								className: e("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", n ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ _(f, { className: "h-4 w-4" })
+							}),
+							t.icon && /* @__PURE__ */ _(t.icon, {
+								className: "mr-2 h-4 w-4 text-muted-foreground",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ _("span", { children: t.label })
+						]
+					}, t.value);
+				})
+			}, t.heading)) : /* @__PURE__ */ _(i, { children: t.map((t) => {
+				let n = h.includes(t.value);
+				return /* @__PURE__ */ v(o, {
+					onSelect: () => x(t.value),
+					role: "option",
+					"aria-selected": n,
+					"aria-disabled": t.disabled,
+					"aria-label": `${t.label}${n ? ", selected" : ", not selected"}${t.disabled ? ", disabled" : ""}`,
+					className: e("cursor-pointer", t.disabled && "opacity-50 cursor-not-allowed"),
+					disabled: t.disabled,
+					children: [
+						/* @__PURE__ */ _("div", {
+							className: e("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", n ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"),
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ _(f, { className: "h-4 w-4" })
+						}),
+						t.icon && /* @__PURE__ */ _(t.icon, {
+							className: "mr-2 h-4 w-4 text-muted-foreground",
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ _("span", { children: t.label })
+					]
+				}, t.value);
+			}) }),
+			/* @__PURE__ */ _(c, {}),
+			/* @__PURE__ */ _(i, { children: /* @__PURE__ */ v("div", {
+				className: "flex items-center justify-between",
+				children: [h.length > 0 && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(o, {
+					onSelect: S,
+					className: "flex-1 justify-center cursor-pointer",
+					children: "Clear"
+				}), /* @__PURE__ */ _(l, {
+					orientation: "vertical",
+					className: "flex min-h-6 h-full"
+				})] }), /* @__PURE__ */ _(o, {
+					onSelect: () => C(!1),
+					className: "flex-1 justify-center cursor-pointer max-w-full",
+					children: "Close"
+				})]
+			}) })
+		]
+	})
+] });
+//#endregion
+export { y as LiveRegion, S as OptionsContent, x as PlaceholderContent, b as SelectedValuesContent };

package/dist/index46.cjs

@@ -0,0 +1 @@
+const e=require("./index4.cjs"),t=require("./index6.cjs"),n=require("./index12.cjs"),r=require("./index15.cjs"),i=require("./index44.cjs"),a=require("./index45.cjs");let o=require("lucide-react");require("react");let s=require("react/jsx-runtime");var c=({politeMessage:e,assertiveMessage:t})=>(0,s.jsxs)(`div`,{className:`sr-only`,children:[(0,s.jsx)(`div`,{"aria-live":`polite`,"aria-atomic":`true`,role:`status`,children:e}),(0,s.jsx)(`div`,{"aria-live":`assertive`,"aria-atomic":`true`,role:`alert`,children:t})]}),l=({selectedValues:n,responsiveSettings:a,screenSize:c,singleLine:l,animation:u,animationConfig:d,badgeAnimationClass:f,variant:p,getOptionByValue:m,toggleOption:h,clearExtraOptions:g,handleClear:_})=>(0,s.jsxs)(`div`,{className:`flex justify-between items-center w-full`,children:[(0,s.jsxs)(`div`,{className:e.cn(`flex items-center gap-1`,l?`overflow-x-auto multiselect-singleline-scroll`:`flex-wrap`,a.compactMode&&`gap-0.5`),style:l?{paddingBottom:`4px`}:{},children:[n.slice(0,a.maxCount).map(n=>{let r=m(n),g=r?.icon,_=r?.style;if(!r)return null;let v={animationDuration:`${u}s`,..._?.badgeColor&&{backgroundColor:_.badgeColor},..._?.gradient&&{background:_.gradient,color:`white`}};return(0,s.jsxs)(t.Badge,{className:e.cn(f,i.multiSelectVariants({variant:p}),_?.gradient&&`text-white border-transparent`,a.compactMode&&`text-xs px-1.5 py-0.5`,c===`mobile`&&`max-w-30 truncate`,l&&`shrink-0 whitespace-nowrap`,`[&>svg]:pointer-events-auto`),style:{...v,animationDuration:`${d?.duration||u}s`,animationDelay:`${d?.delay||0}s`},children:[g&&!a.hideIcons&&(0,s.jsx)(g,{className:e.cn(`h-4 w-4 mr-2`,a.compactMode&&`h-3 w-3 mr-1`,_?.iconColor&&`text-current`),..._?.iconColor&&{style:{color:_.iconColor}}}),(0,s.jsx)(`span`,{className:e.cn(c===`mobile`&&`truncate`),children:r.label}),(0,s.jsx)(`div`,{role:`button`,tabIndex:0,onClick:e=>{e.stopPropagation(),h(n)},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopPropagation(),h(n))},"aria-label":`Remove ${r.label} from selection`,className:`ml-2 h-4 w-4 cursor-pointer hover:bg-white/20 rounded-sm p-0.5 -m-0.5 focus:outline-none focus:ring-1 focus:ring-white/50`,children:(0,s.jsx)(o.XCircle,{className:e.cn(`h-3 w-3`,a.compactMode&&`h-2.5 w-2.5`)})})]},n)}).filter(Boolean),n.length>a.maxCount&&(0,s.jsxs)(t.Badge,{className:e.cn(`bg-transparent text-foreground border-foreground/1 hover:bg-transparent`,f,i.multiSelectVariants({variant:p}),a.compactMode&&`text-xs px-1.5 py-0.5`,l&&`shrink-0 whitespace-nowrap`,`[&>svg]:pointer-events-auto`),style:{animationDuration:`${d?.duration||u}s`,animationDelay:`${d?.delay||0}s`},children:[`+ ${n.length-a.maxCount} more`,(0,s.jsx)(o.XCircle,{className:e.cn(`ml-2 h-4 w-4 cursor-pointer`,a.compactMode&&`ml-1 h-3 w-3`),onClick:e=>{e.stopPropagation(),g()}})]})]}),(0,s.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,s.jsx)(`div`,{role:`button`,tabIndex:0,onClick:e=>{e.stopPropagation(),_()},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopPropagation(),_())},"aria-label":`Clear all ${n.length} selected options`,className:`flex items-center justify-center h-4 w-4 mx-2 cursor-pointer text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 rounded-sm`,children:(0,s.jsx)(o.XIcon,{className:`h-4 w-4`})}),(0,s.jsx)(r.Separator,{orientation:`vertical`,className:`flex min-h-6 h-full`}),(0,s.jsx)(o.ChevronDown,{className:`h-4 mx-2 cursor-pointer text-muted-foreground`,"aria-hidden":`true`})]})]}),u=({placeholder:e})=>(0,s.jsxs)(`div`,{className:`flex items-center justify-between w-full mx-auto`,children:[(0,s.jsx)(`span`,{className:`text-sm text-muted-foreground mx-3`,children:e}),(0,s.jsx)(o.ChevronDown,{className:`h-4 cursor-pointer text-muted-foreground mx-2`})]}),d=({filteredOptions:t,hideSelectAll:i,searchValue:c,searchable:l,selectedValues:u,getAllOptions:d,toggleAll:f,toggleOption:p,handleClear:m,setIsPopoverOpen:h,handleInputKeyDown:g,setSearchValue:_,multiSelectId:v,emptyIndicator:y,screenSize:b})=>(0,s.jsxs)(n.Command,{children:[l&&(0,s.jsx)(n.CommandInput,{placeholder:`Search options...`,onKeyDown:g,value:c,onValueChange:_,"aria-label":`Search through available options`,"aria-describedby":`${v}-search-help`}),l&&(0,s.jsx)(`div`,{id:`${v}-search-help`,className:`sr-only`,children:`Type to filter options. Use arrow keys to navigate results.`}),(0,s.jsxs)(n.CommandList,{className:e.cn(`max-h-[40vh] overflow-y-auto multiselect-scrollbar`,b===`mobile`&&`max-h-[50vh]`,`overscroll-behavior-y-contain`),children:[(0,s.jsx)(n.CommandEmpty,{children:y||`No results found.`}),` `,!i&&!c&&(0,s.jsx)(n.CommandGroup,{children:(0,s.jsxs)(n.CommandItem,{onSelect:f,role:`option`,"aria-selected":u.length===d().filter(e=>!e.disabled).length,"aria-label":`Select all ${d().length} options`,className:`cursor-pointer`,children:[(0,s.jsx)(`div`,{className:e.cn(`mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary`,u.length===d().filter(e=>!e.disabled).length?`bg-primary text-primary-foreground`:`opacity-50 [&_svg]:invisible`),"aria-hidden":`true`,children:(0,s.jsx)(o.CheckIcon,{className:`h-4 w-4`})}),(0,s.jsxs)(`span`,{children:[`(Select All`,d().length>20?` - ${d().length} options`:``,`)`]})]},`all`)}),a.isGroupedOptions(t)?t.map(t=>(0,s.jsx)(n.CommandGroup,{heading:t.heading,children:t.options.map(t=>{let r=u.includes(t.value);return(0,s.jsxs)(n.CommandItem,{onSelect:()=>p(t.value),role:`option`,"aria-selected":r,"aria-disabled":t.disabled,"aria-label":`${t.label}${r?`, selected`:`, not selected`}${t.disabled?`, disabled`:``}`,className:e.cn(`cursor-pointer`,t.disabled&&`opacity-50 cursor-not-allowed`),disabled:t.disabled,children:[(0,s.jsx)(`div`,{className:e.cn(`mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary`,r?`bg-primary text-primary-foreground`:`opacity-50 [&_svg]:invisible`),"aria-hidden":`true`,children:(0,s.jsx)(o.CheckIcon,{className:`h-4 w-4`})}),t.icon&&(0,s.jsx)(t.icon,{className:`mr-2 h-4 w-4 text-muted-foreground`,"aria-hidden":`true`}),(0,s.jsx)(`span`,{children:t.label})]},t.value)})},t.heading)):(0,s.jsx)(n.CommandGroup,{children:t.map(t=>{let r=u.includes(t.value);return(0,s.jsxs)(n.CommandItem,{onSelect:()=>p(t.value),role:`option`,"aria-selected":r,"aria-disabled":t.disabled,"aria-label":`${t.label}${r?`, selected`:`, not selected`}${t.disabled?`, disabled`:``}`,className:e.cn(`cursor-pointer`,t.disabled&&`opacity-50 cursor-not-allowed`),disabled:t.disabled,children:[(0,s.jsx)(`div`,{className:e.cn(`mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary`,r?`bg-primary text-primary-foreground`:`opacity-50 [&_svg]:invisible`),"aria-hidden":`true`,children:(0,s.jsx)(o.CheckIcon,{className:`h-4 w-4`})}),t.icon&&(0,s.jsx)(t.icon,{className:`mr-2 h-4 w-4 text-muted-foreground`,"aria-hidden":`true`}),(0,s.jsx)(`span`,{children:t.label})]},t.value)})}),(0,s.jsx)(n.CommandSeparator,{}),(0,s.jsx)(n.CommandGroup,{children:(0,s.jsxs)(`div`,{className:`flex items-center justify-between`,children:[u.length>0&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.CommandItem,{onSelect:m,className:`flex-1 justify-center cursor-pointer`,children:`Clear`}),(0,s.jsx)(r.Separator,{orientation:`vertical`,className:`flex min-h-6 h-full`})]}),(0,s.jsx)(n.CommandItem,{onSelect:()=>h(!1),className:`flex-1 justify-center cursor-pointer max-w-full`,children:`Close`})]})})]})]});exports.LiveRegion=c,exports.OptionsContent=d,exports.PlaceholderContent=u,exports.SelectedValuesContent=l;

package/dist/index46.js

@@ -0,0 +1,166 @@
+import { arraysEqual as e, buildAllOptions as t, buildBadgeAnimationClass as n, buildPopoverAnimationClass as r, buildWidthConstraints as i, computeResponsiveSettings as ee, countMatchingOptions as a, filterOptions as te } from "./index44.js";
+import { useCallback as o, useEffect as s, useId as ne, useImperativeHandle as re, useMemo as c, useRef as l, useState as u } from "react";
+//#region src/MultiSelect/useMultiSelect.ts
+var d = ({ forwardedRef: d, ...f }) => {
+	let { options: p, onValueChange: m, defaultValue: h = [], animationConfig: g, maxCount: _ = 3, responsive: v, minWidth: y, maxWidth: b, deduplicateOptions: x = !1, resetOnDefaultValueChange: S = !0, closeOnSelect: C = !1, searchable: w = !0, autoSize: T = !1, disabled: E = !1 } = f, [D, O] = u(h), [k, A] = u(!1), [j, M] = u(!1), [N, P] = u(""), [F, ie] = u("desktop"), [I, L] = u(""), [ae, R] = u(""), z = l(D.length), B = l(k), V = l(N), H = ne(), U = `${H}-listbox`, W = `${H}-description`, G = `${H}-count`, K = l(h), q = l(null), J = o((e, t = "polite") => {
+		t === "assertive" ? (R(e), setTimeout(() => R(""), 100)) : (L(e), setTimeout(() => L(""), 100));
+	}, []), Y = o(() => {
+		let { options: e, duplicates: n } = t(p, x);
+		return e;
+	}, [x, p]), X = o((e) => Y().find((t) => t.value === e), [Y]), oe = c(() => te(p, N, w), [
+		p,
+		N,
+		w
+	]), se = (e) => {
+		if (!E) {
+			if (e.key === "Enter") A(!0);
+			else if (e.key === "Backspace" && !e.currentTarget.value) {
+				let e = [...D];
+				e.pop(), O(e), m(e);
+			}
+		}
+	}, ce = (e) => {
+		if (E || X(e)?.disabled) return;
+		let t = D.includes(e) ? D.filter((t) => t !== e) : [...D, e];
+		O(t), m(t), C && A(!1);
+	}, Z = () => {
+		E || (O([]), m([]));
+	}, Q = () => {
+		E || A((e) => !e);
+	}, $ = c(() => ee(v, _, F), [
+		v,
+		_,
+		F
+	]), le = () => {
+		if (E) return;
+		let e = D.slice(0, $.maxCount);
+		O(e), m(e);
+	}, ue = () => {
+		if (E) return;
+		let e = Y().filter((e) => !e.disabled);
+		if (D.length === e.length) Z();
+		else {
+			let t = e.map((e) => e.value);
+			O(t), m(t);
+		}
+		C && A(!1);
+	}, de = c(() => i(F, T, y, b), [
+		T,
+		b,
+		y,
+		F
+	]);
+	s(() => {
+		if (!S) return;
+		let t = K.current;
+		e(t, h) || (e(D, h) || O(h), K.current = [...h]);
+	}, [
+		e,
+		h,
+		S,
+		D
+	]), s(() => {
+		k || P("");
+	}, [k]), s(() => {
+		let e = D.length, t = Y(), n = t.filter((e) => !e.disabled).length;
+		if (e !== z.current) {
+			let r = e - z.current;
+			if (r > 0) {
+				let i = D.slice(-r).map((e) => t.find((t) => t.value === e)?.label).filter(Boolean);
+				i.length === 1 ? J(`${i[0]} selected. ${e} of ${n} options selected.`) : J(`${i.length} options selected. ${e} of ${n} total selected.`);
+			} else r < 0 && J(`Option removed. ${e} of ${n} options selected.`);
+			z.current = e;
+		}
+		if (k !== B.current && (J(k ? `Dropdown opened. ${n} options available. Use arrow keys to navigate.` : "Dropdown closed."), B.current = k), N !== V.current && N !== void 0) {
+			if (N && k) {
+				let e = a(t, N);
+				J(`${e} option${e === 1 ? "" : "s"} found for "${N}"`);
+			}
+			V.current = N;
+		}
+	}, [
+		J,
+		a,
+		Y,
+		k,
+		N,
+		D
+	]), s(() => {
+		if (typeof window > "u") return;
+		let e = () => {
+			let e = window.innerWidth;
+			ie(e < 640 ? "mobile" : e < 1024 ? "tablet" : "desktop");
+		};
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []);
+	let fe = c(() => n(j, g), [g, j]), pe = c(() => r(g), [g]);
+	return re(d, () => ({
+		reset: () => {
+			O(h), A(!1), P(""), m(h);
+		},
+		getSelectedValues: () => D,
+		setSelectedValues: (e) => {
+			O(e), m(e);
+		},
+		clear: () => {
+			O([]), m([]);
+		},
+		focus: () => {
+			if (q.current) {
+				q.current.focus();
+				let e = q.current.style.outline, t = q.current.style.outlineOffset;
+				q.current.style.outline = "2px solid hsl(var(--ring))", q.current.style.outlineOffset = "2px", setTimeout(() => {
+					q.current && (q.current.style.outline = e, q.current.style.outlineOffset = t);
+				}, 1e3);
+			}
+		}
+	}), [
+		h,
+		d,
+		m,
+		D
+	]), {
+		ids: {
+			multiSelectId: H,
+			listboxId: U,
+			triggerDescriptionId: W,
+			selectedCountId: G
+		},
+		state: {
+			selectedValues: D,
+			isPopoverOpen: k,
+			isAnimating: j,
+			searchValue: N,
+			screenSize: F
+		},
+		derived: {
+			filteredOptions: oe,
+			responsiveSettings: $,
+			widthConstraints: de,
+			badgeAnimationClass: fe,
+			popoverAnimationClass: pe
+		},
+		refs: { buttonRef: q },
+		helpers: {
+			getAllOptions: Y,
+			getOptionByValue: X
+		},
+		a11yMessages: {
+			politeMessage: I,
+			assertiveMessage: ae
+		},
+		handlers: {
+			setIsPopoverOpen: A,
+			handleTogglePopover: Q,
+			handleInputKeyDown: se,
+			toggleOption: ce,
+			handleClear: Z,
+			clearExtraOptions: le,
+			toggleAll: ue,
+			setSearchValue: P,
+			setIsAnimating: M
+		}
+	};
+};
+//#endregion
+export { d as useMultiSelect };