zaravand-ui 6.0.0 → 7.0.1

package/dist/components/Accordion/Accordion.js

@@ -1,216 +1,294 @@
 "use client";
 import { useZuiConfig as e } from "../../config/useZuiConfig.js";
 import { cn as t } from "../../lib/utils.js";
-import { IconActionButton as n, ListToolbar as r, ToolbarIconButton as i } from "../shared/IconActionButton.js";
-import { useControllableState as a } from "../shared/useControllableState.js";
-import { useExclusiveAction as o } from "../shared/useExclusiveAction.js";
-import { accordionActionButtonVariants as s, accordionContentActionButtonVariants as c, accordionContentListRowVariants as l, accordionContentListVariants as u, accordionContentVariants as d, accordionEmptyStateVariants as ee, accordionItemVariants as f, accordionTriggerActionsVariants as p, accordionTriggerRowVariants as m, accordionTriggerVariants as h, accordionVariants as te } from "./Accordion.variant.js";
-import * as g from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { ChevronDown as b, Pencil as x, Plus as S, Trash2 as C } from "lucide-react";
+import n from "../shared/ActionSheet.js";
+import { CLEAR_ICON_CLASS as r } from "../shared/FieldClearButton.js";
+import { IconActionButton as i, ListToolbar as a, ToolbarIconButton as o } from "../shared/IconActionButton.js";
+import { useControllableState as s } from "../shared/useControllableState.js";
+import { useExclusiveAction as c } from "../shared/useExclusiveAction.js";
+import { useStickyToolbar as l } from "../shared/useStickyToolbar.js";
+import { useIsMobileViewport as u } from "../shared/viewport.js";
+import { accordionActionButtonVariants as d, accordionContentActionButtonVariants as f, accordionContentListRowVariants as ee, accordionContentListVariants as te, accordionContentVariants as p, accordionEmptyStateVariants as ne, accordionItemVariants as m, accordionTriggerActionsVariants as h, accordionTriggerRowVariants as g, accordionTriggerVariants as _, accordionVariants as re } from "./Accordion.variant.js";
+import * as v from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { ChevronDown as S, EllipsisVertical as C, Pencil as w, Plus as ie, Trash2 as T } from "lucide-react";
 //#region src/components/Accordion/Accordion.tsx
-var w = "zui:size-4", T = g.createContext(null);
-function E(e) {
-	let t = g.useContext(T);
+var E = "zui:size-4", D = v.createContext(null);
+function O(e) {
+	let t = v.useContext(D);
 	if (!t) throw Error(`${e} must be used within an <Accordion> component`);
 	return t;
 }
-var D = g.createContext(null);
-function O(e) {
-	let t = g.useContext(D);
+var k = v.createContext(null);
+function A(e) {
+	let t = v.useContext(k);
 	if (!t) throw Error(`${e} must be used within an <AccordionItem> component`);
 	return t;
 }
-function k(e) {
+function j(e) {
 	return e === void 0 ? [] : Array.isArray(e) ? e : [e];
 }
-function A(e) {
+function M(e) {
 	return typeof e == "string" || typeof e == "number" ? String(e) : "";
 }
-function ne(e) {
-	return `${A(e.title)} ${Array.isArray(e.content) ? e.content.map((e) => A(e.label)).join(" ") : A(e.content)}`.toLocaleLowerCase();
+function ae(e) {
+	return `${M(e.title)} ${Array.isArray(e.content) ? e.content.map((e) => M(e.label)).join(" ") : M(e.content)}`.toLocaleLowerCase();
 }
-var j = g.forwardRef(function({ type: d = "single", value: f, defaultValue: p, onValueChange: m, collapsible: h = !1, dir: b, items: E, searchable: D = !1, onAdd: O, onEdit: A, onDelete: j, onContentItemEdit: F, onContentItemDelete: I, className: re, children: L }, R) {
-	let { messages: z, dir: B } = e(), V = b ?? B, [H, U] = a({
-		value: g.useMemo(() => f === void 0 ? void 0 : k(f), [f]),
-		defaultValue: () => k(p)
-	}), [W, G] = o(), [K, q] = g.useState(""), J = D && Array.isArray(E), Y = typeof O == "function", X = K.trim().toLocaleLowerCase(), Z = g.useMemo(() => {
-		if (!E) return;
-		let e = E.map((e, t) => ({
+var N = v.forwardRef(function({ type: p = "single", value: m, defaultValue: h, onValueChange: g, collapsible: _ = !1, dir: S, items: O, searchable: k = !1, onAdd: A, onEdit: M, onDelete: N, onContentItemEdit: P, onContentItemDelete: F, stickyToolbar: I = !0, className: le, children: ue }, de) {
+	let { messages: L, dir: fe } = e(), R = S ?? fe, [z, B] = s({
+		value: v.useMemo(() => m === void 0 ? void 0 : j(m), [m]),
+		defaultValue: () => j(h)
+	}), [V, H] = c(), U = u(), [W, pe] = v.useState({
+		open: !1,
+		actions: []
+	}), G = (e) => pe({
+		open: !0,
+		actions: e
+	}), [K, me] = v.useState(""), q = k && Array.isArray(O), J = typeof A == "function", Y = q || J, he = v.useRef(null), ge = v.useRef(null);
+	l(he, ge, U && I && Y);
+	let X = K.trim().toLocaleLowerCase(), Z = v.useMemo(() => {
+		if (!O) return;
+		let e = O.map((e, t) => ({
 			item: e,
 			originalIndex: t
 		}));
-		return !J || X.length === 0 ? e : e.filter(({ item: e }) => ne(e).includes(X));
+		return !q || X.length === 0 ? e : e.filter(({ item: e }) => ae(e).includes(X));
 	}, [
-		E,
+		O,
 		X,
-		J
-	]), Q = g.useCallback((e) => {
-		U(e), d === "multiple" ? m?.(e) : m?.(e[0] ?? "");
+		q
+	]), Q = v.useCallback((e) => {
+		B(e), p === "multiple" ? g?.(e) : g?.(e[0] ?? "");
 	}, [
-		m,
-		U,
-		d
-	]), $ = g.useCallback((e) => {
-		let t = H.includes(e);
-		if (d === "multiple") {
-			Q(t ? H.filter((t) => t !== e) : [...H, e]);
+		g,
+		B,
+		p
+	]), _e = v.useCallback((e) => {
+		let t = z.includes(e);
+		if (p === "multiple") {
+			Q(t ? z.filter((t) => t !== e) : [...z, e]);
 			return;
 		}
 		if (t) {
-			Q(h ? [] : H);
+			Q(_ ? [] : z);
 			return;
 		}
 		Q([e]);
 	}, [
-		h,
+		_,
 		Q,
-		H,
-		d
-	]), ie = g.useCallback(async () => {
-		O && await G(O);
-	}, [O, G]), ae = g.useCallback(async (e, t) => {
-		A && await G(() => A({
+		z,
+		p
+	]), ve = v.useCallback(async () => {
+		A && await H(A);
+	}, [A, H]), ye = v.useCallback(async (e, t) => {
+		M && await H(() => M({
 			item: e,
 			index: t
 		}));
-	}, [A, G]), oe = g.useCallback(async (e, t) => {
-		j && await G(() => j({
+	}, [M, H]), be = v.useCallback(async (e, t) => {
+		N && await H(() => N({
 			item: e,
 			index: t
 		}));
-	}, [j, G]), se = g.useCallback(async (e, t, n, r) => {
-		F && await G(() => F({
+	}, [N, H]), xe = v.useCallback(async (e, t, n, r) => {
+		P && await H(() => P({
 			item: e,
 			itemIndex: t,
 			contentItem: n,
 			contentIndex: r
 		}));
-	}, [F, G]), ce = g.useCallback(async (e, t, n, r) => {
-		I && await G(() => I({
+	}, [P, H]), $ = v.useCallback(async (e, t, n, r) => {
+		F && await H(() => F({
 			item: e,
 			itemIndex: t,
 			contentItem: n,
 			contentIndex: r
 		}));
-	}, [I, G]), le = g.useMemo(() => ({
-		openValues: H,
-		toggleValue: $,
-		dir: V,
-		type: d
+	}, [F, H]), Se = v.useMemo(() => ({
+		openValues: z,
+		toggleValue: _e,
+		dir: R,
+		type: p
 	}), [
-		H,
-		$,
-		V,
-		d
+		z,
+		_e,
+		R,
+		p
 	]);
-	return /* @__PURE__ */ v(T.Provider, {
-		value: le,
-		children: /* @__PURE__ */ y("div", {
-			ref: R,
-			dir: V,
+	return /* @__PURE__ */ b(D.Provider, {
+		value: Se,
+		children: /* @__PURE__ */ x("div", {
+			ref: de,
+			dir: R,
 			"data-slot": "accordion",
-			className: t(te(), re),
+			className: t(re(), le),
 			children: [
-				J || Y ? /* @__PURE__ */ v(r, {
-					"data-slot": "accordion-controls",
-					searchSlot: "accordion-search-input",
-					actionsSlot: "accordion-actions",
+				Y ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
+					ref: ge,
+					"aria-hidden": "true",
+					"data-slot": "accordion-sticky-sentinel",
+					className: "zui:-mb-2"
+				}), /* @__PURE__ */ b("div", {
+					ref: he,
+					"data-slot": "accordion-sticky-toolbar",
+					"data-sticky-toolbar": U && I ? "true" : void 0,
 					className: "zui:mb-2",
-					search: J ? {
-						value: K,
-						onChange: (e) => q(e.target.value),
-						placeholder: z.common.searchPlaceholder,
-						ariaLabel: z.accordion.searchAriaLabel
-					} : void 0,
-					actions: Y ? /* @__PURE__ */ v(i, {
-						"data-slot": "accordion-action-add-button",
-						label: z.common.add,
-						disabled: W,
-						onClick: () => void ie(),
-						icon: /* @__PURE__ */ v(S, {})
-					}) : void 0
-				}) : null,
-				Z && J && Z.length === 0 ? /* @__PURE__ */ v("div", {
+					children: /* @__PURE__ */ b(a, {
+						"data-slot": "accordion-controls",
+						searchSlot: "accordion-search-input",
+						actionsSlot: "accordion-actions",
+						inlineActionsOnMobile: J,
+						search: q ? {
+							value: K,
+							onChange: (e) => me(e.target.value),
+							placeholder: L.common.searchPlaceholder,
+							ariaLabel: L.accordion.searchAriaLabel
+						} : void 0,
+						actions: J ? /* @__PURE__ */ b(o, {
+							"data-slot": "accordion-action-add-button",
+							label: L.common.add,
+							disabled: V,
+							onClick: () => void ve(),
+							icon: /* @__PURE__ */ b(ie, {})
+						}) : void 0
+					})
+				})] }) : null,
+				Z && q && Z.length === 0 ? /* @__PURE__ */ b("div", {
 					"data-slot": "accordion-empty-state",
-					className: ee(),
-					children: z.accordion.noSearchResults
+					className: ne(),
+					children: L.accordion.noSearchResults
 				}) : null,
 				Z ? Z.map(({ item: e, originalIndex: t }) => {
-					let r = e.isEdit && typeof A == "function", i = e.isDelete && typeof j == "function", a = r || i ? /* @__PURE__ */ y(_, { children: [r ? /* @__PURE__ */ v(n, {
+					let n = e.isEdit && typeof M == "function", a = e.isDelete && typeof N == "function", o = n || a, s = (e) => /* @__PURE__ */ b(e, {
+						className: r,
+						"aria-hidden": "true"
+					}), c = [...n ? [{
+						key: "edit",
+						label: L.common.edit,
+						icon: s(w),
+						onSelect: () => void ye(e, t)
+					}] : [], ...a ? [{
+						key: "delete",
+						label: L.common.delete,
+						icon: s(T),
+						danger: !0,
+						onSelect: () => void be(e, t)
+					}] : []], l = U && c.length > 1 ? /* @__PURE__ */ b(i, {
+						"data-slot": "accordion-action-menu-button",
+						label: L.accordion.actions,
+						icon: /* @__PURE__ */ b(C, {
+							className: E,
+							"aria-hidden": "true"
+						}),
+						disabled: V,
+						className: d({ tone: "edit" }),
+						onClick: () => G(c)
+					}) : o ? /* @__PURE__ */ x(y, { children: [n ? /* @__PURE__ */ b(i, {
 						"data-slot": "accordion-action-edit-button",
-						label: z.common.edit,
-						icon: /* @__PURE__ */ v(x, {
-							className: w,
+						label: L.common.edit,
+						icon: /* @__PURE__ */ b(w, {
+							className: E,
 							"aria-hidden": "true"
 						}),
-						disabled: W,
-						className: s({ tone: "edit" }),
-						onClick: () => void ae(e, t)
-					}) : null, i ? /* @__PURE__ */ v(n, {
+						disabled: V,
+						className: d({ tone: "edit" }),
+						onClick: () => void ye(e, t)
+					}) : null, a ? /* @__PURE__ */ b(i, {
 						"data-slot": "accordion-action-delete-button",
-						label: z.common.delete,
-						icon: /* @__PURE__ */ v(C, {
-							className: w,
+						label: L.common.delete,
+						icon: /* @__PURE__ */ b(T, {
+							className: E,
 							"aria-hidden": "true"
 						}),
-						disabled: W,
-						className: s({ tone: "delete" }),
-						onClick: () => void oe(e, t)
-					}) : null] }) : void 0, o = Array.isArray(e.content) ? /* @__PURE__ */ v("div", {
+						disabled: V,
+						className: d({ tone: "delete" }),
+						onClick: () => void be(e, t)
+					}) : null] }) : void 0, u = Array.isArray(e.content) ? /* @__PURE__ */ b("div", {
 						"data-slot": "accordion-content-list",
-						className: u(),
-						children: e.content.map((r, i) => {
-							let a = r.isEdit && typeof F == "function", o = r.isDelete && typeof I == "function";
-							return /* @__PURE__ */ y("div", {
+						className: te(),
+						children: e.content.map((n, r) => {
+							let a = n.isEdit && typeof P == "function", o = n.isDelete && typeof F == "function", c = [...a ? [{
+								key: "edit",
+								label: L.common.edit,
+								icon: s(w),
+								onSelect: () => void xe(e, t, n, r)
+							}] : [], ...o ? [{
+								key: "delete",
+								label: L.common.delete,
+								icon: s(T),
+								danger: !0,
+								onSelect: () => void $(e, t, n, r)
+							}] : []], l = U && c.length > 1;
+							return /* @__PURE__ */ x("div", {
 								"data-slot": "accordion-content-list-row",
-								className: l(),
+								className: ee(),
 								children: [
-									/* @__PURE__ */ v("span", {
+									/* @__PURE__ */ b("span", {
 										className: "zui:min-w-0 zui:flex-1 zui:text-start",
-										children: r.label
+										children: n.label
 									}),
-									a ? /* @__PURE__ */ v(n, {
+									l ? /* @__PURE__ */ b(i, {
+										"data-slot": "accordion-content-item-menu-button",
+										label: L.accordion.actions,
+										icon: /* @__PURE__ */ b(C, {
+											className: E,
+											"aria-hidden": "true"
+										}),
+										disabled: V,
+										className: f({ tone: "edit" }),
+										onClick: () => G(c)
+									}) : null,
+									!l && a ? /* @__PURE__ */ b(i, {
 										"data-slot": "accordion-content-item-edit-button",
-										label: z.common.edit,
-										icon: /* @__PURE__ */ v(x, {
-											className: w,
+										label: L.common.edit,
+										icon: /* @__PURE__ */ b(w, {
+											className: E,
 											"aria-hidden": "true"
 										}),
-										disabled: W,
-										className: c({ tone: "edit" }),
-										onClick: () => void se(e, t, r, i)
+										disabled: V,
+										className: f({ tone: "edit" }),
+										onClick: () => void xe(e, t, n, r)
 									}) : null,
-									o ? /* @__PURE__ */ v(n, {
+									!l && o ? /* @__PURE__ */ b(i, {
 										"data-slot": "accordion-content-item-delete-button",
-										label: z.common.delete,
-										icon: /* @__PURE__ */ v(C, {
-											className: w,
+										label: L.common.delete,
+										icon: /* @__PURE__ */ b(T, {
+											className: E,
 											"aria-hidden": "true"
 										}),
-										disabled: W,
-										className: c({ tone: "delete" }),
-										onClick: () => void ce(e, t, r, i)
+										disabled: V,
+										className: f({ tone: "delete" }),
+										onClick: () => void $(e, t, n, r)
 									}) : null
 								]
-							}, r.value);
+							}, n.value);
 						})
 					}) : e.content;
-					return /* @__PURE__ */ y(M, {
+					return /* @__PURE__ */ x(oe, {
 						value: e.value,
 						disabled: e.disabled,
-						children: [/* @__PURE__ */ v(N, {
+						children: [/* @__PURE__ */ b(se, {
 							icon: e.icon,
-							actions: a,
+							actions: l,
 							children: e.title
-						}), /* @__PURE__ */ v(P, { children: o })]
+						}), /* @__PURE__ */ b(ce, { children: u })]
 					}, e.value);
-				}) : L
+				}) : ue,
+				U ? /* @__PURE__ */ b(n, {
+					open: W.open,
+					onOpenChange: (e) => pe((t) => ({
+						...t,
+						open: e
+					})),
+					actions: W.actions,
+					label: L.accordion.actions
+				}) : null
 			]
 		})
 	});
-}), M = g.forwardRef(function({ value: e, disabled: n = !1, className: r, children: i }, a) {
-	let { openValues: o } = E("AccordionItem"), s = o.includes(e), c = g.useId(), l = `accordion-trigger-${c}`, u = `accordion-content-${c}`, d = g.useMemo(() => ({
+}), oe = v.forwardRef(function({ value: e, disabled: n = !1, className: r, children: i }, a) {
+	let { openValues: o } = O("AccordionItem"), s = o.includes(e), c = v.useId(), l = `accordion-trigger-${c}`, u = `accordion-content-${c}`, d = v.useMemo(() => ({
 		value: e,
 		isOpen: s,
 		disabled: n,
@@ -223,23 +301,23 @@ var j = g.forwardRef(function({ type: d = "single", value: f, defaultValue: p, o
 		l,
 		u
 	]);
-	return /* @__PURE__ */ v(D.Provider, {
+	return /* @__PURE__ */ b(k.Provider, {
 		value: d,
-		children: /* @__PURE__ */ v("div", {
+		children: /* @__PURE__ */ b("div", {
 			ref: a,
 			"data-slot": "accordion-item",
 			"data-state": s ? "open" : "closed",
 			"data-disabled": n ? "" : void 0,
-			className: t(f(), r),
+			className: t(m(), r),
 			children: i
 		})
 	});
-}), N = g.forwardRef(function({ icon: e, actions: n, className: r, children: i }, a) {
-	let { toggleValue: o } = E("AccordionTrigger"), { value: s, isOpen: c, disabled: l, triggerId: u, contentId: d } = O("AccordionTrigger");
-	return /* @__PURE__ */ y("div", {
+}), se = v.forwardRef(function({ icon: e, actions: n, className: r, children: i }, a) {
+	let { toggleValue: o } = O("AccordionTrigger"), { value: s, isOpen: c, disabled: l, triggerId: u, contentId: d } = A("AccordionTrigger");
+	return /* @__PURE__ */ x("div", {
 		"data-slot": "accordion-trigger-row",
-		className: m(),
-		children: [/* @__PURE__ */ y("button", {
+		className: g(),
+		children: [/* @__PURE__ */ x("button", {
 			ref: a,
 			type: "button",
 			id: u,
@@ -251,23 +329,23 @@ var j = g.forwardRef(function({ type: d = "single", value: f, defaultValue: p, o
 			onClick: () => {
 				l || o(s);
 			},
-			className: t(h(), r),
-			children: [/* @__PURE__ */ v("span", {
+			className: t(_(), r),
+			children: [/* @__PURE__ */ b("span", {
 				className: "zui:flex-1 zui:text-start",
 				children: i
-			}), e ?? /* @__PURE__ */ v(b, {
+			}), e ?? /* @__PURE__ */ b(S, {
 				"aria-hidden": "true",
 				className: t("zui:size-4 zui:shrink-0 zui:text-[var(--zui-color-text)] zui:transition-transform zui:duration-200 zui:ease-out", c ? "zui:rotate-180" : "zui:rotate-0")
 			})]
-		}), n ? /* @__PURE__ */ v("div", {
+		}), n ? /* @__PURE__ */ b("div", {
 			"data-slot": "accordion-trigger-actions",
-			className: p(),
+			className: h(),
 			children: n
 		}) : null]
 	});
-}), P = g.forwardRef(function({ forceMount: e, className: n, children: r }, i) {
-	let { isOpen: a, triggerId: o, contentId: s } = O("AccordionContent");
-	return !e && !a ? null : /* @__PURE__ */ v("div", {
+}), ce = v.forwardRef(function({ forceMount: e, className: n, children: r }, i) {
+	let { isOpen: a, triggerId: o, contentId: s } = A("AccordionContent");
+	return !e && !a ? null : /* @__PURE__ */ b("div", {
 		ref: i,
 		role: "region",
 		id: s,
@@ -275,9 +353,9 @@ var j = g.forwardRef(function({ type: d = "single", value: f, defaultValue: p, o
 		"data-slot": "accordion-content",
 		"data-state": a ? "open" : "closed",
 		hidden: e ? !a : void 0,
-		className: t(d(), n),
+		className: t(p(), n),
 		children: r
 	});
 });
 //#endregion
-export { P as AccordionContent, M as AccordionItem, N as AccordionTrigger, j as default };
+export { ce as AccordionContent, oe as AccordionItem, se as AccordionTrigger, N as default };

package/dist/components/Accordion/Accordion.variant.cjs

@@ -1 +1 @@
-require(`../../_virtual/_rolldown/runtime.cjs`);let e=require(`class-variance-authority`);var t=(0,e.cva)(`zui:flex zui:w-full zui:flex-col zui:gap-2`),n=(0,e.cva)(`zui:flex zui:flex-col zui:overflow-hidden zui:rounded-md zui:border zui:border-[var(--zui-color-border)] zui:transition-colors zui:duration-200 zui:ease-out`),r=(0,e.cva)(`zui:flex zui:w-full zui:items-center zui:gap-1`),i=(0,e.cva)(`zui:group/accordion-trigger zui:flex zui:min-w-0 zui:flex-1 zui:cursor-pointer zui:select-none zui:items-center zui:justify-between zui:gap-2 zui:px-4 zui:py-3 zui:text-start zui:text-sm zui:font-medium zui:leading-none zui:text-[var(--zui-color-text)] zui:outline-none zui:transition-colors zui:duration-200 zui:ease-out zui:hover:bg-[color-mix(in_srgb,var(--zui-color-primary)_12%,transparent)] zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-color-primary)] zui:focus-visible:ring-offset-1 zui:focus-visible:ring-offset-[var(--zui-color-surface)] zui:disabled:pointer-events-none zui:disabled:opacity-50`),a=(0,e.cva)(`zui:flex zui:shrink-0 zui:items-center zui:gap-1 zui:ps-1 zui:pe-4`),o=(0,e.cva)(`zui:inline-flex zui:size-8 zui:shrink-0 zui:cursor-pointer zui:items-center zui:justify-center zui:rounded-md zui:border zui:border-[var(--zui-color-border)] zui:bg-transparent zui:transition-colors zui:duration-200 zui:ease-out zui:hover:bg-[var(--zui-theme-bg-muted)] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-45`,{variants:{tone:{edit:`zui:text-[var(--zui-color-text)]`,delete:`zui:text-[var(--zui-color-danger)]`}},defaultVariants:{tone:`edit`}}),s=(0,e.cva)(`zui:inline-flex zui:size-7 zui:shrink-0 zui:cursor-pointer zui:items-center zui:justify-center zui:bg-transparent zui:transition-transform zui:duration-200 zui:ease-out zui:hover:scale-[1.2] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-45`,{variants:{tone:{edit:`zui:text-[var(--zui-color-text)]`,delete:`zui:text-[var(--zui-color-danger)]`}},defaultVariants:{tone:`edit`}}),c=(0,e.cva)(`zui:mx-4 zui:mb-3 zui:border-s-2 zui:border-[var(--zui-color-border)] zui:ps-4 zui:pt-1 zui:text-sm zui:leading-relaxed zui:text-[var(--zui-color-text)]`),l=(0,e.cva)(`zui:flex zui:flex-col zui:divide-y zui:divide-[var(--zui-color-border)]`),u=(0,e.cva)(`zui:flex zui:items-center zui:gap-2 zui:py-2`),d=(0,e.cva)(`zui:rounded-md zui:border zui:border-[var(--zui-color-border)] zui:px-4 zui:py-7 zui:text-center zui:text-sm zui:text-[var(--zui-color-text)]`);exports.accordionActionButtonVariants=o,exports.accordionContentActionButtonVariants=s,exports.accordionContentListRowVariants=u,exports.accordionContentListVariants=l,exports.accordionContentVariants=c,exports.accordionEmptyStateVariants=d,exports.accordionItemVariants=n,exports.accordionTriggerActionsVariants=a,exports.accordionTriggerRowVariants=r,exports.accordionTriggerVariants=i,exports.accordionVariants=t;
+require(`../../_virtual/_rolldown/runtime.cjs`);let e=require(`class-variance-authority`);var t=(0,e.cva)(`zui:flex zui:w-full zui:flex-col zui:gap-2`),n=(0,e.cva)(`zui:flex zui:flex-col zui:overflow-hidden zui-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:transition-colors zui:duration-200 zui:ease-out`),r=(0,e.cva)(`zui:flex zui:w-full zui:items-center zui:gap-1`),i=(0,e.cva)(`zui:group/accordion-trigger zui:flex zui:min-w-0 zui:flex-1 zui:cursor-pointer zui:select-none zui:items-center zui:justify-between zui:gap-2 zui:min-h-[calc(var(--zui-scale,10px)*5.184)] zui:px-4 zui:py-3 zui:text-start zui:text-sm zui:mobile:text-base zui:font-medium zui:leading-none zui:text-[var(--zui-color-text)] zui:outline-none zui:transition-colors zui:duration-200 zui:ease-out zui:hover:bg-[color-mix(in_srgb,var(--zui-color-primary)_12%,transparent)] zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-color-primary)] zui:focus-visible:ring-offset-1 zui:focus-visible:ring-offset-[var(--zui-color-surface)] zui:disabled:pointer-events-none zui:disabled:opacity-50`),a=(0,e.cva)(`zui:flex zui:shrink-0 zui:items-center zui:gap-1 zui:ps-1 zui:pe-4`),o=(0,e.cva)(`zui:inline-flex zui:size-8 zui:mobile:size-10 zui:shrink-0 zui:cursor-pointer zui:items-center zui:justify-center zui-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:bg-transparent zui:transition-colors zui:duration-200 zui:ease-out zui:hover:bg-[var(--zui-theme-bg-muted)] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-45`,{variants:{tone:{edit:`zui:text-[var(--zui-color-text)]`,delete:`zui:text-[var(--zui-color-danger)]`}},defaultVariants:{tone:`edit`}}),s=(0,e.cva)(`zui:inline-flex zui:size-7 zui:shrink-0 zui:cursor-pointer zui:items-center zui:justify-center zui:bg-transparent zui:transition-transform zui:duration-200 zui:ease-out zui:hover:scale-[1.2] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-45`,{variants:{tone:{edit:`zui:text-[var(--zui-color-text)]`,delete:`zui:text-[var(--zui-color-danger)]`}},defaultVariants:{tone:`edit`}}),c=(0,e.cva)(`zui:mx-4 zui:mb-3 zui:border-s-2 zui:border-[var(--zui-color-border)] zui:ps-4 zui:pt-1 zui:text-sm zui:mobile:text-base zui:leading-relaxed zui:text-[var(--zui-color-text)]`),l=(0,e.cva)(`zui:flex zui:flex-col zui:divide-y zui:divide-[var(--zui-color-border)]`),u=(0,e.cva)(`zui:flex zui:items-center zui:gap-2 zui:py-2`),d=(0,e.cva)(`zui-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:px-4 zui:py-7 zui:text-center zui:text-sm zui:mobile:text-base zui:text-[var(--zui-color-text)]`);exports.accordionActionButtonVariants=o,exports.accordionContentActionButtonVariants=s,exports.accordionContentListRowVariants=u,exports.accordionContentListVariants=l,exports.accordionContentVariants=c,exports.accordionEmptyStateVariants=d,exports.accordionItemVariants=n,exports.accordionTriggerActionsVariants=a,exports.accordionTriggerRowVariants=r,exports.accordionTriggerVariants=i,exports.accordionVariants=t;

package/dist/components/Accordion/Accordion.variant.js

@@ -1,6 +1,6 @@
 import { cva as e } from "class-variance-authority";
 //#region src/components/Accordion/Accordion.variant.ts
-var t = e("zui:flex zui:w-full zui:flex-col zui:gap-2"), n = e("zui:flex zui:flex-col zui:overflow-hidden zui:rounded-md zui:border zui:border-[var(--zui-color-border)] zui:transition-colors zui:duration-200 zui:ease-out"), r = e("zui:flex zui:w-full zui:items-center zui:gap-1"), i = e("zui:group/accordion-trigger zui:flex zui:min-w-0 zui:flex-1 zui:cursor-pointer zui:select-none zui:items-center zui:justify-between zui:gap-2 zui:px-4 zui:py-3 zui:text-start zui:text-sm zui:font-medium zui:leading-none zui:text-[var(--zui-color-text)] zui:outline-none zui:transition-colors zui:duration-200 zui:ease-out zui:hover:bg-[color-mix(in_srgb,var(--zui-color-primary)_12%,transparent)] zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-color-primary)] zui:focus-visible:ring-offset-1 zui:focus-visible:ring-offset-[var(--zui-color-surface)] zui:disabled:pointer-events-none zui:disabled:opacity-50"), a = e("zui:flex zui:shrink-0 zui:items-center zui:gap-1 zui:ps-1 zui:pe-4"), o = e("zui:inline-flex zui:size-8 zui:shrink-0 zui:cursor-pointer zui:items-center zui:justify-center zui:rounded-md zui:border zui:border-[var(--zui-color-border)] zui:bg-transparent zui:transition-colors zui:duration-200 zui:ease-out zui:hover:bg-[var(--zui-theme-bg-muted)] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-45", {
+var t = e("zui:flex zui:w-full zui:flex-col zui:gap-2"), n = e("zui:flex zui:flex-col zui:overflow-hidden zui-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:transition-colors zui:duration-200 zui:ease-out"), r = e("zui:flex zui:w-full zui:items-center zui:gap-1"), i = e("zui:group/accordion-trigger zui:flex zui:min-w-0 zui:flex-1 zui:cursor-pointer zui:select-none zui:items-center zui:justify-between zui:gap-2 zui:min-h-[calc(var(--zui-scale,10px)*5.184)] zui:px-4 zui:py-3 zui:text-start zui:text-sm zui:mobile:text-base zui:font-medium zui:leading-none zui:text-[var(--zui-color-text)] zui:outline-none zui:transition-colors zui:duration-200 zui:ease-out zui:hover:bg-[color-mix(in_srgb,var(--zui-color-primary)_12%,transparent)] zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-color-primary)] zui:focus-visible:ring-offset-1 zui:focus-visible:ring-offset-[var(--zui-color-surface)] zui:disabled:pointer-events-none zui:disabled:opacity-50"), a = e("zui:flex zui:shrink-0 zui:items-center zui:gap-1 zui:ps-1 zui:pe-4"), o = e("zui:inline-flex zui:size-8 zui:mobile:size-10 zui:shrink-0 zui:cursor-pointer zui:items-center zui:justify-center zui-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:bg-transparent zui:transition-colors zui:duration-200 zui:ease-out zui:hover:bg-[var(--zui-theme-bg-muted)] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-45", {
 	variants: { tone: {
 		edit: "zui:text-[var(--zui-color-text)]",
 		delete: "zui:text-[var(--zui-color-danger)]"
@@ -12,6 +12,6 @@ var t = e("zui:flex zui:w-full zui:flex-col zui:gap-2"), n = e("zui:flex zui:fle
 		delete: "zui:text-[var(--zui-color-danger)]"
 	} },
 	defaultVariants: { tone: "edit" }
-}), c = e("zui:mx-4 zui:mb-3 zui:border-s-2 zui:border-[var(--zui-color-border)] zui:ps-4 zui:pt-1 zui:text-sm zui:leading-relaxed zui:text-[var(--zui-color-text)]"), l = e("zui:flex zui:flex-col zui:divide-y zui:divide-[var(--zui-color-border)]"), u = e("zui:flex zui:items-center zui:gap-2 zui:py-2"), d = e("zui:rounded-md zui:border zui:border-[var(--zui-color-border)] zui:px-4 zui:py-7 zui:text-center zui:text-sm zui:text-[var(--zui-color-text)]");
+}), c = e("zui:mx-4 zui:mb-3 zui:border-s-2 zui:border-[var(--zui-color-border)] zui:ps-4 zui:pt-1 zui:text-sm zui:mobile:text-base zui:leading-relaxed zui:text-[var(--zui-color-text)]"), l = e("zui:flex zui:flex-col zui:divide-y zui:divide-[var(--zui-color-border)]"), u = e("zui:flex zui:items-center zui:gap-2 zui:py-2"), d = e("zui-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:px-4 zui:py-7 zui:text-center zui:text-sm zui:mobile:text-base zui:text-[var(--zui-color-text)]");
 //#endregion
 export { o as accordionActionButtonVariants, s as accordionContentActionButtonVariants, u as accordionContentListRowVariants, l as accordionContentListVariants, c as accordionContentVariants, d as accordionEmptyStateVariants, n as accordionItemVariants, a as accordionTriggerActionsVariants, r as accordionTriggerRowVariants, i as accordionTriggerVariants, t as accordionVariants };

package/dist/components/Avatar/Avatar.cjs

@@ -1 +1 @@
-"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../services/localizeDigits/localizeDigits.cjs`),r=require(`../../lib/utils.cjs`),i=require(`../Button/Button.cjs`),a=require(`../Tooltip/Tooltip.cjs`),o=require(`../Toast/function/showToast.cjs`),s=require(`../Uploader/Uploader.utils.cjs`),c=require(`./Avatar.variant.cjs`),l=require(`../Dialog/Dialog.variant.cjs`),u=require(`./Avatar.utils.cjs`);let d=require(`react`);d=e.__toESM(d,1);let f=require(`react/jsx-runtime`),p=require(`lucide-react`),m=require(`@radix-ui/react-dialog`);m=e.__toESM(m,1);var h=d.createContext(null);function g({src:e,alt:n,name:g,fallback:v,size:y,shape:b,status:x,showTooltip:S=!1,previewable:C,previewSrc:w,onClick:T,onImageSelect:E,onImageRemove:D,accept:O=`image/*`,maxSizeKb:k,onReject:A,className:ee},te){let{messages:j,digits:M,dir:N}=t.useZuiConfig(),P=j.avatar,F=d.useContext(h),I=y??F?.size??`default`,L=b??F?.shape??`circle`,R=F!==null,z=d.useRef(null),[B,V]=d.useState(null),[ne,H]=d.useState(!1),U=e?B?.src===e?B.state:`loading`:`none`,W=U===`loaded`,G=(C??!T)&&W,K=!!T||G,q=!!E,J=u.getInitials(g),Y=g??n,re=v??(J?(0,f.jsx)(`span`,{"aria-hidden":`true`,dir:`auto`,children:J}):(0,f.jsx)(p.User,{className:`zui:size-[55%]`,"aria-hidden":`true`})),ie=e=>{T?.(e),G&&!e.defaultPrevented&&H(!0)},X=()=>z.current?.click(),ae=e=>{let t=e.target.files?.[0];if(e.target.value=``,!t)return;let{accepted:n,rejected:r}=s.splitAcceptedFiles([t],O,k);if(r.length>0){A?A(r[0]):o.showFallbackToast({title:P.invalidImage,message:s.describeRejection(r[0],k,M,j.uploader),type:`error`,duration:5e3},"`onReject`");return}E?.(n[0])},Z=r.cn(c.avatarVariants({size:I,shape:L,interactive:K}),R&&`zui:ring-2 zui:ring-[var(--zui-color-surface)]`,ee),Q=(0,f.jsxs)(f.Fragment,{children:[re,e&&U!==`error`?(0,f.jsx)(`img`,{src:e,alt:n??g??``,loading:`lazy`,draggable:!1,onLoad:()=>V({src:e,state:`loaded`}),onError:()=>V({src:e,state:`error`}),className:r.cn(`zui:absolute zui:inset-0 zui:size-full zui:object-cover zui:transition-opacity zui:duration-300`,W?`zui:opacity-100`:`zui:opacity-0`)},e):null,G?(0,f.jsx)(`span`,{"aria-hidden":`true`,className:`zui:absolute zui:inset-0 zui:flex zui:items-center zui:justify-center zui:bg-[var(--zui-theme-overlay-scrim)] zui:text-[var(--zui-color-on-solid)] zui:opacity-0 zui:transition-opacity zui:duration-200 zui:group-hover/avatar:opacity-100 zui:group-focus-visible/avatar:opacity-100`,children:(0,f.jsx)(p.ZoomIn,{className:`zui:size-[45%] zui:scale-75 zui:transition-transform zui:duration-200 zui:group-hover/avatar:scale-100`})}):null]}),$=K?(0,f.jsx)(`button`,{type:`button`,"data-slot":`avatar-root`,"aria-label":G?P.showImage(Y??``):Y,onClick:ie,className:Z,children:Q}):(0,f.jsx)(`span`,{"data-slot":`avatar-root`,role:`img`,"aria-label":Y,className:Z,children:Q});return(0,f.jsxs)(`span`,{ref:te,"data-slot":`avatar`,dir:N,"data-state":U,className:`zui:relative zui:inline-flex zui:shrink-0 zui:align-middle`,children:[S&&g?(0,f.jsx)(a.default,{text:g,position:`top`,trigger:$}):$,x?(0,f.jsx)(`span`,{className:c.avatarStatusVariants({status:x,size:I}),children:(0,f.jsx)(`span`,{className:`zui:sr-only`,children:P[x]})}):null,q?(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(a.default,{text:P.changeImage,position:`bottom`,trigger:(0,f.jsx)(`button`,{type:`button`,"aria-label":P.changeImage,onClick:X,className:c.avatarEditButtonVariants({size:I}),children:(0,f.jsx)(p.Camera,{"aria-hidden":`true`})})}),(0,f.jsx)(`input`,{ref:z,type:`file`,tabIndex:-1,"aria-hidden":`true`,accept:O,onChange:ae,className:`zui:hidden`})]}):null,(0,f.jsx)(m.Root,{open:ne&&!!e,onOpenChange:H,children:(0,f.jsx)(m.Portal,{children:(0,f.jsx)(m.Overlay,{"data-slot":`avatar-preview-overlay`,className:l.dialogOverlayVariants(),children:(0,f.jsxs)(m.Content,{"data-slot":`avatar-preview`,dir:N,"aria-describedby":void 0,className:c.avatarPreviewContentClassName,children:[(0,f.jsx)(m.Close,{asChild:!0,children:(0,f.jsx)(`button`,{type:`button`,"aria-label":j.common.close,className:`zui:absolute zui:-top-3 zui:-end-3 zui:z-10 zui:inline-flex zui:size-9 zui:cursor-pointer zui:items-center zui:justify-center zui:rounded-full zui:border zui:border-[var(--zui-color-border)] zui:bg-[var(--zui-color-surface)] zui:p-0 zui:text-[var(--zui-color-text)] zui:shadow-md zui:outline-none zui:transition-transform zui:duration-200 zui:hover:scale-110 zui:focus-visible:shadow-[0_0_0_2px_var(--zui-theme-action-primary)]`,children:(0,f.jsx)(p.X,{className:`zui:size-4`,"aria-hidden":`true`})})}),(0,f.jsx)(_,{src:w??e,fallbackSrc:e,alt:n??g??``}),(0,f.jsxs)(`div`,{className:`zui:flex zui:max-w-full zui:flex-wrap zui:items-center zui:justify-center zui:gap-3 zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:px-4 zui:py-2 zui:text-[var(--zui-color-text)] zui:shadow-md`,children:[(0,f.jsx)(m.Title,{className:`zui:m-0 zui:text-sm zui:font-semibold`,children:g??n??P.imageFallbackTitle}),q?(0,f.jsx)(i.default,{size:`sm`,variant:`secondary`,kind:`cancel`,label:P.changeImage,icon:(0,f.jsx)(p.Camera,{className:`zui:size-4`}),onClick:X}):null,D?(0,f.jsx)(i.default,{size:`sm`,variant:`danger`,kind:`cancel`,label:P.removeImage,icon:(0,f.jsx)(p.Trash2,{className:`zui:size-4`}),onClick:()=>{H(!1),D()}}):null]})]})})})})]})}function _({src:e,fallbackSrc:n,alt:r}){let{messages:i}=t.useZuiConfig(),[a,o]=d.useState(()=>new Set),s=[e,n].find(e=>!!e&&!a.has(e));return s?(0,f.jsx)(`img`,{src:s,alt:r,draggable:!1,onError:()=>o(e=>new Set(e).add(s)),className:`zui:block zui:max-h-[78vh] zui:max-w-[92vw] zui:min-w-40 zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:object-contain zui:shadow-[0_24px_48px_-24px_var(--zui-effect-shadow-ink-55)]`}):(0,f.jsxs)(`div`,{className:`zui:flex zui:size-64 zui:flex-col zui:items-center zui:justify-center zui:gap-2 zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:text-[var(--zui-theme-text-muted)]`,children:[(0,f.jsx)(p.ImageOff,{className:`zui:size-10`,"aria-hidden":`true`}),(0,f.jsx)(`span`,{className:`zui:text-sm`,children:i.avatar.imageLoadFailed})]})}function v({items:e,children:i,max:o,size:s=`default`,shape:l=`circle`,showTooltip:u=!0,className:p},m){let{messages:g,digits:_,dir:v}=t.useZuiConfig(),b=d.useMemo(()=>({size:s,shape:l}),[s,l]),x=e?e.map(({key:e,...t},n)=>(0,f.jsx)(y,{showTooltip:u,...t},e??`${t.name??`avatar`}-${n}`)):d.Children.toArray(i).filter(d.isValidElement),S=o!==void 0&&o>0&&x.length>o?o:x.length,C=x.length-S,w=e?e.slice(S).map(e=>e.name).filter(e=>!!e):[],T=(0,f.jsx)(`span`,{role:`img`,"aria-label":g.avatar.othersCount(n.localizeDigits(String(C),_)),className:r.cn(c.avatarVariants({size:s,shape:l}),`zui:ring-2 zui:ring-[var(--zui-color-surface)]`),children:(0,f.jsx)(`span`,{"aria-hidden":`true`,children:n.localizeDigits(`+${C}`,_)})});return(0,f.jsx)(h.Provider,{value:b,children:(0,f.jsxs)(`div`,{ref:m,"data-slot":`avatar-group`,dir:v,className:r.cn(`zui:inline-flex zui:items-center zui:[&>*]:relative zui:[&>*:hover]:z-10 zui:[&>*:focus-within]:z-10`,c.avatarGroupOverlapBySize[s],p),children:[x.slice(0,S),C>0?u&&w.length>0?(0,f.jsx)(a.default,{text:w.join(g.avatar.listSeparator),position:`top`,trigger:T}):T:null]})})}var y=d.forwardRef(g);y.displayName=`Avatar`;var b=d.forwardRef(v);b.displayName=`AvatarGroup`,exports.AvatarGroup=b,exports.default=y;
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../services/localizeDigits/localizeDigits.cjs`),r=require(`../../lib/utils.cjs`),i=require(`../Button/Button.cjs`),a=require(`../Dialog/Dialog.variant.cjs`),o=require(`../Tooltip/Tooltip.cjs`),s=require(`../Toast/function/showToast.cjs`),c=require(`../Uploader/Uploader.utils.cjs`),l=require(`./Avatar.variant.cjs`),u=require(`./Avatar.utils.cjs`);let d=require(`react`);d=e.__toESM(d,1);let f=require(`react/jsx-runtime`),p=require(`lucide-react`),m=require(`@radix-ui/react-dialog`);m=e.__toESM(m,1);var h=d.createContext(null);function g({src:e,alt:n,name:g,fallback:v,size:y,shape:b,status:x,showTooltip:S=!1,previewable:C,previewSrc:w,onClick:T,onImageSelect:E,onImageRemove:D,accept:O=`image/*`,maxSizeKb:k,onReject:A,className:ee},te){let{messages:j,digits:M,dir:N}=t.useZuiConfig(),P=j.avatar,F=d.useContext(h),I=y??F?.size??`default`,L=b??F?.shape??`circle`,R=F!==null,z=d.useRef(null),[B,V]=d.useState(null),[ne,H]=d.useState(!1),U=e?B?.src===e?B.state:`loading`:`none`,W=U===`loaded`,G=(C??!T)&&W,K=!!T||G,q=!!E,J=u.getInitials(g),Y=g??n,re=v??(J?(0,f.jsx)(`span`,{"aria-hidden":`true`,dir:`auto`,children:J}):(0,f.jsx)(p.User,{className:`zui:size-[55%]`,"aria-hidden":`true`})),ie=e=>{T?.(e),G&&!e.defaultPrevented&&H(!0)},X=()=>z.current?.click(),ae=e=>{let t=e.target.files?.[0];if(e.target.value=``,!t)return;let{accepted:n,rejected:r}=c.splitAcceptedFiles([t],O,k);if(r.length>0){A?A(r[0]):s.showFallbackToast({title:P.invalidImage,message:c.describeRejection(r[0],k,M,j.uploader),type:`error`,duration:5e3},"`onReject`");return}E?.(n[0])},Z=r.cn(l.avatarVariants({size:I,shape:L,interactive:K}),R&&`zui:ring-2 zui:ring-[var(--zui-color-surface)]`,ee),Q=(0,f.jsxs)(f.Fragment,{children:[re,e&&U!==`error`?(0,f.jsx)(`img`,{src:e,alt:n??g??``,loading:`lazy`,draggable:!1,onLoad:()=>V({src:e,state:`loaded`}),onError:()=>V({src:e,state:`error`}),className:r.cn(`zui:absolute zui:inset-0 zui:size-full zui:object-cover zui:transition-opacity zui:duration-300`,W?`zui:opacity-100`:`zui:opacity-0`)},e):null,G?(0,f.jsx)(`span`,{"aria-hidden":`true`,className:`zui:absolute zui:inset-0 zui:flex zui:items-center zui:justify-center zui:bg-[var(--zui-theme-overlay-scrim)] zui:text-[var(--zui-color-on-solid)] zui:opacity-0 zui:transition-opacity zui:duration-200 zui:group-hover/avatar:opacity-100 zui:group-focus-visible/avatar:opacity-100`,children:(0,f.jsx)(p.ZoomIn,{className:`zui:size-[45%] zui:scale-75 zui:transition-transform zui:duration-200 zui:group-hover/avatar:scale-100`})}):null]}),$=K?(0,f.jsx)(`button`,{type:`button`,"data-slot":`avatar-root`,"aria-label":G?P.showImage(Y??``):Y,onClick:ie,className:Z,children:Q}):(0,f.jsx)(`span`,{"data-slot":`avatar-root`,role:`img`,"aria-label":Y,className:Z,children:Q});return(0,f.jsxs)(`span`,{ref:te,"data-slot":`avatar`,dir:N,"data-state":U,className:`zui:relative zui:inline-flex zui:shrink-0 zui:align-middle`,children:[S&&g?(0,f.jsx)(o.default,{text:g,position:`top`,trigger:$}):$,x?(0,f.jsx)(`span`,{className:l.avatarStatusVariants({status:x,size:I}),children:(0,f.jsx)(`span`,{className:`zui:sr-only`,children:P[x]})}):null,q?(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(o.default,{text:P.changeImage,position:`bottom`,trigger:(0,f.jsx)(`button`,{type:`button`,"aria-label":P.changeImage,onClick:X,className:l.avatarEditButtonVariants({size:I}),children:(0,f.jsx)(p.Camera,{"aria-hidden":`true`})})}),(0,f.jsx)(`input`,{ref:z,type:`file`,tabIndex:-1,"aria-hidden":`true`,accept:O,onChange:ae,className:`zui:hidden`})]}):null,(0,f.jsx)(m.Root,{open:ne&&!!e,onOpenChange:H,children:(0,f.jsx)(m.Portal,{children:(0,f.jsx)(m.Overlay,{"data-slot":`avatar-preview-overlay`,className:r.cn(a.dialogOverlayVariants(),`zui:mobile:items-center zui:mobile:p-4`),children:(0,f.jsxs)(m.Content,{"data-slot":`avatar-preview`,dir:N,"aria-describedby":void 0,className:l.avatarPreviewContentClassName,children:[(0,f.jsx)(m.Close,{asChild:!0,children:(0,f.jsx)(`button`,{type:`button`,"aria-label":j.common.close,className:`zui:absolute zui:-top-3 zui:-end-3 zui:mobile:top-2 zui:mobile:end-2 zui:z-10 zui:inline-flex zui:size-9 zui:mobile:size-11 zui:cursor-pointer zui:items-center zui:justify-center zui:rounded-full zui:border zui:border-[var(--zui-color-border)] zui:bg-[var(--zui-color-surface)] zui:p-0 zui:text-[var(--zui-color-text)] zui:shadow-md zui:outline-none zui:transition-transform zui:duration-200 zui:hover:scale-110 zui:focus-visible:shadow-[0_0_0_2px_var(--zui-theme-action-primary)]`,children:(0,f.jsx)(p.X,{className:`zui:size-4`,"aria-hidden":`true`})})}),(0,f.jsx)(_,{src:w??e,fallbackSrc:e,alt:n??g??``}),(0,f.jsxs)(`div`,{className:`zui:flex zui:max-w-full zui:flex-wrap zui:items-center zui:justify-center zui:gap-3 zui:mobile:w-full zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:px-4 zui:py-2 zui:text-[var(--zui-color-text)] zui:shadow-md`,children:[(0,f.jsx)(m.Title,{className:`zui:m-0 zui:text-sm zui:mobile:w-full zui:mobile:text-center zui:mobile:text-base zui:font-semibold`,children:g??n??P.imageFallbackTitle}),q?(0,f.jsx)(i.default,{variant:`secondary`,kind:`cancel`,label:P.changeImage,className:`zui:mobile:flex-1`,icon:(0,f.jsx)(p.Camera,{className:`zui:size-4`}),onClick:X}):null,D?(0,f.jsx)(i.default,{variant:`danger`,kind:`cancel`,label:P.removeImage,className:`zui:mobile:flex-1`,icon:(0,f.jsx)(p.Trash2,{className:`zui:size-4`}),onClick:()=>{H(!1),D()}}):null]})]})})})})]})}function _({src:e,fallbackSrc:n,alt:r}){let{messages:i}=t.useZuiConfig(),[a,o]=d.useState(()=>new Set),s=[e,n].find(e=>!!e&&!a.has(e));return s?(0,f.jsx)(`img`,{src:s,alt:r,draggable:!1,onError:()=>o(e=>new Set(e).add(s)),className:`zui:block zui:max-h-[78vh] zui:max-w-[92vw] zui:min-w-40 zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:object-contain zui:shadow-[0_24px_48px_-24px_var(--zui-effect-shadow-ink-55)]`}):(0,f.jsxs)(`div`,{className:`zui:flex zui:size-64 zui:flex-col zui:items-center zui:justify-center zui:gap-2 zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:text-[var(--zui-theme-text-muted)]`,children:[(0,f.jsx)(p.ImageOff,{className:`zui:size-10`,"aria-hidden":`true`}),(0,f.jsx)(`span`,{className:`zui:text-sm`,children:i.avatar.imageLoadFailed})]})}function v({items:e,children:i,max:a,size:s=`default`,shape:c=`circle`,showTooltip:u=!0,className:p},m){let{messages:g,digits:_,dir:v}=t.useZuiConfig(),b=d.useMemo(()=>({size:s,shape:c}),[s,c]),x=e?e.map(({key:e,...t},n)=>(0,f.jsx)(y,{showTooltip:u,...t},e??`${t.name??`avatar`}-${n}`)):d.Children.toArray(i).filter(d.isValidElement),S=a!==void 0&&a>0&&x.length>a?a:x.length,C=x.length-S,w=e?e.slice(S).map(e=>e.name).filter(e=>!!e):[],T=(0,f.jsx)(`span`,{role:`img`,"aria-label":g.avatar.othersCount(n.localizeDigits(String(C),_)),className:r.cn(l.avatarVariants({size:s,shape:c}),`zui:ring-2 zui:ring-[var(--zui-color-surface)]`),children:(0,f.jsx)(`span`,{"aria-hidden":`true`,children:n.localizeDigits(`+${C}`,_)})});return(0,f.jsx)(h.Provider,{value:b,children:(0,f.jsxs)(`div`,{ref:m,"data-slot":`avatar-group`,dir:v,className:r.cn(`zui:inline-flex zui:items-center zui:[&>*]:relative zui:[&>*:hover]:z-10 zui:[&>*:focus-within]:z-10`,l.avatarGroupOverlapBySize[s],p),children:[x.slice(0,S),C>0?u&&w.length>0?(0,f.jsx)(o.default,{text:w.join(g.avatar.listSeparator),position:`top`,trigger:T}):T:null]})})}var y=d.forwardRef(g);y.displayName=`Avatar`;var b=d.forwardRef(v);b.displayName=`AvatarGroup`,exports.AvatarGroup=b,exports.default=y;