zaravand-ui 5.0.1 → 6.0.0

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,244 @@
+"use client";
+import { useZuiConfig as e } from "../../config/useZuiConfig.js";
+import { localizeDigits as t } from "../../services/localizeDigits/localizeDigits.js";
+import { cn as n } from "../../lib/utils.js";
+import r from "../Button/Button.js";
+import i from "../Tooltip/Tooltip.js";
+import { showFallbackToast as a } from "../Toast/function/showToast.js";
+import { describeRejection as o, splitAcceptedFiles as s } from "../Uploader/Uploader.utils.js";
+import { avatarEditButtonVariants as c, avatarGroupOverlapBySize as l, avatarPreviewContentClassName as u, avatarStatusVariants as d, avatarVariants as f } from "./Avatar.variant.js";
+import { dialogOverlayVariants as ee } from "../Dialog/Dialog.variant.js";
+import { getInitials as p } from "./Avatar.utils.js";
+import * as m from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Camera as v, ImageOff as y, Trash2 as b, User as x, X as S, ZoomIn as C } from "lucide-react";
+import * as w from "@radix-ui/react-dialog";
+//#region src/components/Avatar/Avatar.tsx
+var T = m.createContext(null);
+function E({ src: t, alt: l, name: y, fallback: E, size: D, shape: O, status: k, showTooltip: ne = !1, previewable: re, previewSrc: ie, onClick: A, onImageSelect: j, onImageRemove: M, accept: N = "image/*", maxSizeKb: P, onReject: F, className: ae }, oe) {
+	let { messages: I, digits: se, dir: L } = e(), R = I.avatar, z = m.useContext(T), B = D ?? z?.size ?? "default", ce = O ?? z?.shape ?? "circle", le = z !== null, V = m.useRef(null), [H, U] = m.useState(null), [ue, W] = m.useState(!1), G = t ? H?.src === t ? H.state : "loading" : "none", K = G === "loaded", q = (re ?? !A) && K, J = !!A || q, Y = !!j, X = p(y), Z = y ?? l, de = E ?? (X ? /* @__PURE__ */ g("span", {
+		"aria-hidden": "true",
+		dir: "auto",
+		children: X
+	}) : /* @__PURE__ */ g(x, {
+		className: "zui:size-[55%]",
+		"aria-hidden": "true"
+	})), fe = (e) => {
+		A?.(e), q && !e.defaultPrevented && W(!0);
+	}, Q = () => V.current?.click(), pe = (e) => {
+		let t = e.target.files?.[0];
+		if (e.target.value = "", !t) return;
+		let { accepted: n, rejected: r } = s([t], N, P);
+		if (r.length > 0) {
+			F ? F(r[0]) : a({
+				title: R.invalidImage,
+				message: o(r[0], P, se, I.uploader),
+				type: "error",
+				duration: 5e3
+			}, "`onReject`");
+			return;
+		}
+		j?.(n[0]);
+	}, $ = n(f({
+		size: B,
+		shape: ce,
+		interactive: J
+	}), le && "zui:ring-2 zui:ring-[var(--zui-color-surface)]", ae), me = /* @__PURE__ */ _(h, { children: [
+		de,
+		t && G !== "error" ? /* @__PURE__ */ g("img", {
+			src: t,
+			alt: l ?? y ?? "",
+			loading: "lazy",
+			draggable: !1,
+			onLoad: () => U({
+				src: t,
+				state: "loaded"
+			}),
+			onError: () => U({
+				src: t,
+				state: "error"
+			}),
+			className: n("zui:absolute zui:inset-0 zui:size-full zui:object-cover zui:transition-opacity zui:duration-300", K ? "zui:opacity-100" : "zui:opacity-0")
+		}, t) : null,
+		q ? /* @__PURE__ */ g("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: /* @__PURE__ */ g(C, { className: "zui:size-[45%] zui:scale-75 zui:transition-transform zui:duration-200 zui:group-hover/avatar:scale-100" })
+		}) : null
+	] }), he = J ? /* @__PURE__ */ g("button", {
+		type: "button",
+		"data-slot": "avatar-root",
+		"aria-label": q ? R.showImage(Z ?? "") : Z,
+		onClick: fe,
+		className: $,
+		children: me
+	}) : /* @__PURE__ */ g("span", {
+		"data-slot": "avatar-root",
+		role: "img",
+		"aria-label": Z,
+		className: $,
+		children: me
+	});
+	return /* @__PURE__ */ _("span", {
+		ref: oe,
+		"data-slot": "avatar",
+		dir: L,
+		"data-state": G,
+		className: "zui:relative zui:inline-flex zui:shrink-0 zui:align-middle",
+		children: [
+			ne && y ? /* @__PURE__ */ g(i, {
+				text: y,
+				position: "top",
+				trigger: he
+			}) : he,
+			k ? /* @__PURE__ */ g("span", {
+				className: d({
+					status: k,
+					size: B
+				}),
+				children: /* @__PURE__ */ g("span", {
+					className: "zui:sr-only",
+					children: R[k]
+				})
+			}) : null,
+			Y ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(i, {
+				text: R.changeImage,
+				position: "bottom",
+				trigger: /* @__PURE__ */ g("button", {
+					type: "button",
+					"aria-label": R.changeImage,
+					onClick: Q,
+					className: c({ size: B }),
+					children: /* @__PURE__ */ g(v, { "aria-hidden": "true" })
+				})
+			}), /* @__PURE__ */ g("input", {
+				ref: V,
+				type: "file",
+				tabIndex: -1,
+				"aria-hidden": "true",
+				accept: N,
+				onChange: pe,
+				className: "zui:hidden"
+			})] }) : null,
+			/* @__PURE__ */ g(w.Root, {
+				open: ue && !!t,
+				onOpenChange: W,
+				children: /* @__PURE__ */ g(w.Portal, { children: /* @__PURE__ */ g(w.Overlay, {
+					"data-slot": "avatar-preview-overlay",
+					className: ee(),
+					children: /* @__PURE__ */ _(w.Content, {
+						"data-slot": "avatar-preview",
+						dir: L,
+						"aria-describedby": void 0,
+						className: u,
+						children: [
+							/* @__PURE__ */ g(w.Close, {
+								asChild: !0,
+								children: /* @__PURE__ */ g("button", {
+									type: "button",
+									"aria-label": I.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: /* @__PURE__ */ g(S, {
+										className: "zui:size-4",
+										"aria-hidden": "true"
+									})
+								})
+							}),
+							/* @__PURE__ */ g(te, {
+								src: ie ?? t,
+								fallbackSrc: t,
+								alt: l ?? y ?? ""
+							}),
+							/* @__PURE__ */ _("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: [
+									/* @__PURE__ */ g(w.Title, {
+										className: "zui:m-0 zui:text-sm zui:font-semibold",
+										children: y ?? l ?? R.imageFallbackTitle
+									}),
+									Y ? /* @__PURE__ */ g(r, {
+										size: "sm",
+										variant: "secondary",
+										kind: "cancel",
+										label: R.changeImage,
+										icon: /* @__PURE__ */ g(v, { className: "zui:size-4" }),
+										onClick: Q
+									}) : null,
+									M ? /* @__PURE__ */ g(r, {
+										size: "sm",
+										variant: "danger",
+										kind: "cancel",
+										label: R.removeImage,
+										icon: /* @__PURE__ */ g(b, { className: "zui:size-4" }),
+										onClick: () => {
+											W(!1), M();
+										}
+									}) : null
+								]
+							})
+						]
+					})
+				}) })
+			})
+		]
+	});
+}
+function te({ src: t, fallbackSrc: n, alt: r }) {
+	let { messages: i } = e(), [a, o] = m.useState(() => /* @__PURE__ */ new Set()), s = [t, n].find((e) => !!e && !a.has(e));
+	return s ? /* @__PURE__ */ g("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)]"
+	}) : /* @__PURE__ */ _("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: [/* @__PURE__ */ g(y, {
+			className: "zui:size-10",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ g("span", {
+			className: "zui:text-sm",
+			children: i.avatar.imageLoadFailed
+		})]
+	});
+}
+function D({ items: r, children: a, max: o, size: s = "default", shape: c = "circle", showTooltip: u = !0, className: d }, ee) {
+	let { messages: p, digits: h, dir: v } = e(), y = m.useMemo(() => ({
+		size: s,
+		shape: c
+	}), [s, c]), b = r ? r.map(({ key: e, ...t }, n) => /* @__PURE__ */ g(O, {
+		showTooltip: u,
+		...t
+	}, e ?? `${t.name ?? "avatar"}-${n}`)) : m.Children.toArray(a).filter(m.isValidElement), x = o !== void 0 && o > 0 && b.length > o ? o : b.length, S = b.length - x, C = r ? r.slice(x).map((e) => e.name).filter((e) => !!e) : [], w = /* @__PURE__ */ g("span", {
+		role: "img",
+		"aria-label": p.avatar.othersCount(t(String(S), h)),
+		className: n(f({
+			size: s,
+			shape: c
+		}), "zui:ring-2 zui:ring-[var(--zui-color-surface)]"),
+		children: /* @__PURE__ */ g("span", {
+			"aria-hidden": "true",
+			children: t(`+${S}`, h)
+		})
+	});
+	return /* @__PURE__ */ g(T.Provider, {
+		value: y,
+		children: /* @__PURE__ */ _("div", {
+			ref: ee,
+			"data-slot": "avatar-group",
+			dir: v,
+			className: n("zui:inline-flex zui:items-center zui:[&>*]:relative zui:[&>*:hover]:z-10 zui:[&>*:focus-within]:z-10", l[s], d),
+			children: [b.slice(0, x), S > 0 ? u && C.length > 0 ? /* @__PURE__ */ g(i, {
+				text: C.join(p.avatar.listSeparator),
+				position: "top",
+				trigger: w
+			}) : w : null]
+		})
+	});
+}
+var O = m.forwardRef(E);
+O.displayName = "Avatar";
+var k = m.forwardRef(D);
+k.displayName = "AvatarGroup";
+//#endregion
+export { k as AvatarGroup, O as default };

package/dist/components/Avatar/Avatar.utils.cjs

@@ -0,0 +1 @@
+var e=`‌`;function t(t){let n=(t??``).replace(new RegExp(e,`g`),` `).trim().split(/\s+/).filter(Boolean);return n.length===0?``:[n[0],n.length>1?n[n.length-1]:void 0].filter(e=>!!e).map(e=>Array.from(e)[0].toLocaleUpperCase()).join(e)}exports.getInitials=t;

package/dist/components/Avatar/Avatar.utils.d.cts

@@ -0,0 +1,6 @@
+/**
+ * First letter of the first and last word. Persian/Arabic letters are joined with a ZWNJ so
+ * they render as two separate letters ("م‌ط") instead of connecting into one word ("مط").
+ */
+declare function getInitials(name: string | undefined): string;
+export { getInitials };

package/dist/components/Avatar/Avatar.utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * First letter of the first and last word. Persian/Arabic letters are joined with a ZWNJ so
+ * they render as two separate letters ("م‌ط") instead of connecting into one word ("مط").
+ */
+declare function getInitials(name: string | undefined): string;
+export { getInitials };

package/dist/components/Avatar/Avatar.utils.js

@@ -0,0 +1,8 @@
+//#region src/components/Avatar/Avatar.utils.ts
+var e = "‌";
+function t(t) {
+	let n = (t ?? "").replace(new RegExp(e, "g"), " ").trim().split(/\s+/).filter(Boolean);
+	return n.length === 0 ? "" : [n[0], n.length > 1 ? n[n.length - 1] : void 0].filter((e) => !!e).map((e) => Array.from(e)[0].toLocaleUpperCase()).join(e);
+}
+//#endregion
+export { t as getInitials };

package/dist/components/Avatar/Avatar.variant.cjs

@@ -0,0 +1 @@
+require(`../../_virtual/_rolldown/runtime.cjs`);let e=require(`class-variance-authority`);var t=(0,e.cva)(`zui:group/avatar zui:relative zui:inline-flex zui:shrink-0 zui:select-none zui:items-center zui:justify-center zui:overflow-hidden zui:border-solid zui:border-transparent zui:[border-width:calc(var(--zui-scale,10px)*0.15)] zui:[background:linear-gradient(var(--zui-color-surface),var(--zui-color-surface))_padding-box,linear-gradient(135deg,var(--zui-color-primary),var(--zui-color-secondary))_border-box] zui:p-0 zui:text-[var(--zui-color-text)] zui:align-middle zui:font-semibold zui:leading-none zui:outline-none zui:transition-[box-shadow,transform] zui:duration-200 zui:focus-visible:shadow-[0_0_0_2px_var(--zui-color-surface),0_0_0_4px_var(--zui-theme-action-primary)]`,{variants:{size:{xs:`zui:size-6 zui:text-[calc(var(--zui-scale,10px)*1)]`,sm:`zui:size-8 zui:text-[calc(var(--zui-scale,10px)*1.2)]`,default:`zui:size-10 zui:text-[calc(var(--zui-scale,10px)*1.4)]`,lg:`zui:size-12 zui:text-[calc(var(--zui-scale,10px)*1.7)]`,xl:`zui:size-16 zui:text-[calc(var(--zui-scale,10px)*2.2)]`},shape:{circle:`zui:rounded-full`,square:`zui-radius-xs`},interactive:{true:`zui:cursor-pointer`,false:``}},defaultVariants:{size:`default`,shape:`circle`,interactive:!1}}),n=(0,e.cva)(`zui:pointer-events-none zui:absolute zui:bottom-0 zui:end-0 zui:rounded-full zui:ring-2 zui:ring-[var(--zui-color-surface)]`,{variants:{status:{online:`zui:bg-[var(--zui-theme-status-success)]`,offline:`zui:bg-[var(--zui-color-border)]`,busy:`zui:bg-[var(--zui-theme-status-danger)]`,away:`zui:bg-[var(--zui-theme-status-warning)]`},size:{xs:`zui:size-1.5`,sm:`zui:size-2`,default:`zui:size-2.5`,lg:`zui:size-3`,xl:`zui:size-3.5`}}}),r=(0,e.cva)(`zui:absolute zui:bottom-0 zui:start-0 zui:inline-flex zui:dir-rtl:translate-x-1/4 zui:dir-ltr:-translate-x-1/4 zui:translate-y-1/4 zui:cursor-pointer zui:items-center zui:justify-center zui:rounded-full zui:border-0 zui:bg-[var(--zui-theme-action-primary)] zui:p-0 zui:text-[var(--zui-color-on-solid)] zui:shadow-sm zui:outline-none zui:ring-2 zui:ring-[var(--zui-color-surface)] zui:transition-transform zui:duration-200 zui:hover:scale-110 zui:focus-visible:scale-110`,{variants:{size:{xs:`zui:size-3 zui:[&>svg]:size-2`,sm:`zui:size-4 zui:[&>svg]:size-2.5`,default:`zui:size-5 zui:[&>svg]:size-3`,lg:`zui:size-6 zui:[&>svg]:size-3.5`,xl:`zui:size-7 zui:[&>svg]:size-4`}}}),i={xs:`zui:[&>*:not(:first-child)]:-ms-1.5`,sm:`zui:[&>*:not(:first-child)]:-ms-2`,default:`zui:[&>*:not(:first-child)]:-ms-2.5`,lg:`zui:[&>*:not(:first-child)]:-ms-3`,xl:`zui:[&>*:not(:first-child)]:-ms-4`},a=`zui:relative zui:z-(--zui-z-dialog) zui:flex zui:max-w-[92vw] zui:flex-col zui:items-center zui:gap-3 zui:outline-none zui:duration-300 zui:ease-out zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0 zui:data-[state=open]:zoom-in-75 zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=closed]:zoom-out-90`;exports.avatarEditButtonVariants=r,exports.avatarGroupOverlapBySize=i,exports.avatarPreviewContentClassName=a,exports.avatarStatusVariants=n,exports.avatarVariants=t;

package/dist/components/Avatar/Avatar.variant.d.cts

@@ -0,0 +1,22 @@
+declare const avatarVariants: (props?: ({
+    size?: "xs" | "sm" | "default" | "lg" | "xl" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const avatarStatusVariants: (props?: ({
+    status?: "online" | "offline" | "busy" | "away" | null | undefined;
+    size?: "xs" | "sm" | "default" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const avatarEditButtonVariants: (props?: ({
+    size?: "xs" | "sm" | "default" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Overlap for `AvatarGroup` children (RTL-aware via margin-inline-start on every item but the first). */
+declare const avatarGroupOverlapBySize: {
+    readonly xs: "zui:[&>*:not(:first-child)]:-ms-1.5";
+    readonly sm: "zui:[&>*:not(:first-child)]:-ms-2";
+    readonly default: "zui:[&>*:not(:first-child)]:-ms-2.5";
+    readonly lg: "zui:[&>*:not(:first-child)]:-ms-3";
+    readonly xl: "zui:[&>*:not(:first-child)]:-ms-4";
+};
+declare const avatarPreviewContentClassName = "zui:relative zui:z-(--zui-z-dialog) zui:flex zui:max-w-[92vw] zui:flex-col zui:items-center zui:gap-3 zui:outline-none zui:duration-300 zui:ease-out zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0 zui:data-[state=open]:zoom-in-75 zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=closed]:zoom-out-90";
+export { avatarEditButtonVariants, avatarGroupOverlapBySize, avatarPreviewContentClassName, avatarStatusVariants, avatarVariants, };

package/dist/components/Avatar/Avatar.variant.d.ts

@@ -0,0 +1,22 @@
+declare const avatarVariants: (props?: ({
+    size?: "xs" | "sm" | "default" | "lg" | "xl" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const avatarStatusVariants: (props?: ({
+    status?: "online" | "offline" | "busy" | "away" | null | undefined;
+    size?: "xs" | "sm" | "default" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const avatarEditButtonVariants: (props?: ({
+    size?: "xs" | "sm" | "default" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Overlap for `AvatarGroup` children (RTL-aware via margin-inline-start on every item but the first). */
+declare const avatarGroupOverlapBySize: {
+    readonly xs: "zui:[&>*:not(:first-child)]:-ms-1.5";
+    readonly sm: "zui:[&>*:not(:first-child)]:-ms-2";
+    readonly default: "zui:[&>*:not(:first-child)]:-ms-2.5";
+    readonly lg: "zui:[&>*:not(:first-child)]:-ms-3";
+    readonly xl: "zui:[&>*:not(:first-child)]:-ms-4";
+};
+declare const avatarPreviewContentClassName = "zui:relative zui:z-(--zui-z-dialog) zui:flex zui:max-w-[92vw] zui:flex-col zui:items-center zui:gap-3 zui:outline-none zui:duration-300 zui:ease-out zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0 zui:data-[state=open]:zoom-in-75 zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=closed]:zoom-out-90";
+export { avatarEditButtonVariants, avatarGroupOverlapBySize, avatarPreviewContentClassName, avatarStatusVariants, avatarVariants, };

package/dist/components/Avatar/Avatar.variant.js

@@ -0,0 +1,54 @@
+import { cva as e } from "class-variance-authority";
+//#region src/components/Avatar/Avatar.variant.ts
+var t = e("zui:group/avatar zui:relative zui:inline-flex zui:shrink-0 zui:select-none zui:items-center zui:justify-center zui:overflow-hidden zui:border-solid zui:border-transparent zui:[border-width:calc(var(--zui-scale,10px)*0.15)] zui:[background:linear-gradient(var(--zui-color-surface),var(--zui-color-surface))_padding-box,linear-gradient(135deg,var(--zui-color-primary),var(--zui-color-secondary))_border-box] zui:p-0 zui:text-[var(--zui-color-text)] zui:align-middle zui:font-semibold zui:leading-none zui:outline-none zui:transition-[box-shadow,transform] zui:duration-200 zui:focus-visible:shadow-[0_0_0_2px_var(--zui-color-surface),0_0_0_4px_var(--zui-theme-action-primary)]", {
+	variants: {
+		size: {
+			xs: "zui:size-6 zui:text-[calc(var(--zui-scale,10px)*1)]",
+			sm: "zui:size-8 zui:text-[calc(var(--zui-scale,10px)*1.2)]",
+			default: "zui:size-10 zui:text-[calc(var(--zui-scale,10px)*1.4)]",
+			lg: "zui:size-12 zui:text-[calc(var(--zui-scale,10px)*1.7)]",
+			xl: "zui:size-16 zui:text-[calc(var(--zui-scale,10px)*2.2)]"
+		},
+		shape: {
+			circle: "zui:rounded-full",
+			square: "zui-radius-xs"
+		},
+		interactive: {
+			true: "zui:cursor-pointer",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		shape: "circle",
+		interactive: !1
+	}
+}), n = e("zui:pointer-events-none zui:absolute zui:bottom-0 zui:end-0 zui:rounded-full zui:ring-2 zui:ring-[var(--zui-color-surface)]", { variants: {
+	status: {
+		online: "zui:bg-[var(--zui-theme-status-success)]",
+		offline: "zui:bg-[var(--zui-color-border)]",
+		busy: "zui:bg-[var(--zui-theme-status-danger)]",
+		away: "zui:bg-[var(--zui-theme-status-warning)]"
+	},
+	size: {
+		xs: "zui:size-1.5",
+		sm: "zui:size-2",
+		default: "zui:size-2.5",
+		lg: "zui:size-3",
+		xl: "zui:size-3.5"
+	}
+} }), r = e("zui:absolute zui:bottom-0 zui:start-0 zui:inline-flex zui:dir-rtl:translate-x-1/4 zui:dir-ltr:-translate-x-1/4 zui:translate-y-1/4 zui:cursor-pointer zui:items-center zui:justify-center zui:rounded-full zui:border-0 zui:bg-[var(--zui-theme-action-primary)] zui:p-0 zui:text-[var(--zui-color-on-solid)] zui:shadow-sm zui:outline-none zui:ring-2 zui:ring-[var(--zui-color-surface)] zui:transition-transform zui:duration-200 zui:hover:scale-110 zui:focus-visible:scale-110", { variants: { size: {
+	xs: "zui:size-3 zui:[&>svg]:size-2",
+	sm: "zui:size-4 zui:[&>svg]:size-2.5",
+	default: "zui:size-5 zui:[&>svg]:size-3",
+	lg: "zui:size-6 zui:[&>svg]:size-3.5",
+	xl: "zui:size-7 zui:[&>svg]:size-4"
+} } }), i = {
+	xs: "zui:[&>*:not(:first-child)]:-ms-1.5",
+	sm: "zui:[&>*:not(:first-child)]:-ms-2",
+	default: "zui:[&>*:not(:first-child)]:-ms-2.5",
+	lg: "zui:[&>*:not(:first-child)]:-ms-3",
+	xl: "zui:[&>*:not(:first-child)]:-ms-4"
+}, a = "zui:relative zui:z-(--zui-z-dialog) zui:flex zui:max-w-[92vw] zui:flex-col zui:items-center zui:gap-3 zui:outline-none zui:duration-300 zui:ease-out zui:data-[state=open]:animate-in zui:data-[state=open]:fade-in-0 zui:data-[state=open]:zoom-in-75 zui:data-[state=closed]:animate-out zui:data-[state=closed]:fade-out-0 zui:data-[state=closed]:zoom-out-90";
+//#endregion
+export { r as avatarEditButtonVariants, i as avatarGroupOverlapBySize, a as avatarPreviewContentClassName, n as avatarStatusVariants, t as avatarVariants };

package/dist/components/Button/Button.cjs

@@ -0,0 +1 @@
+"use client";require(`../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../lib/utils.cjs`),t=require(`../Spinner/Spinner.cjs`);;/* empty css             */const n=require(`./Button.variant.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`);var a=140,o=(0,r.forwardRef)(function({size:o=`default`,variant:s=`primary`,kind:c=`confirm`,disabled:l=!1,isLoading:u=!1,label:d,children:f,icon:p,ariaLabel:m,fullWidth:h=!1,type:g=`button`,onClick:_,className:v,onPointerDown:y,onPointerUp:b,onPointerCancel:x,onPointerLeave:S,onKeyDown:C,onKeyUp:w,...T},E){let D=l||u,O=f??d,k=!u&&!!p,A=!u&&!!O,j=k&&!A,[M,N]=(0,r.useState)(!1),P=(0,r.useRef)(0),F=(0,r.useRef)(null),I=e.cn(n.buttonVariants({size:o,variant:s,kind:c,disabled:D,fullWidth:h}),j&&`zui-button--icon-only`,v),L=(0,r.useCallback)(()=>{F.current!==null&&(window.clearTimeout(F.current),F.current=null)},[]),R=(0,r.useCallback)(()=>{D||(L(),P.current=window.performance.now(),N(!0))},[L,D]),z=(0,r.useCallback)(()=>{L();let e=window.performance.now()-P.current,t=Math.max(a-e,0);F.current=window.setTimeout(()=>{N(!1),F.current=null},t)},[L]),B=(0,r.useCallback)(e=>{C?.(e),!e.defaultPrevented&&(e.repeat||e.key!==` `&&e.key!==`Enter`||R())},[C,R]),V=(0,r.useCallback)(e=>{w?.(e),!e.defaultPrevented&&(e.key!==` `&&e.key!==`Enter`||z())},[w,z]);return(0,r.useEffect)(()=>{D&&(L(),N(!1))},[L,D]),(0,r.useEffect)(()=>L,[L]),(0,i.jsxs)(`button`,{ref:E,"data-slot":`button`,type:g,disabled:D,"aria-label":m,"aria-busy":u||void 0,"data-pressed":M?`true`:void 0,onPointerDown:e=>{y?.(e),!e.defaultPrevented&&R()},onPointerUp:e=>{b?.(e),z()},onPointerCancel:e=>{x?.(e),z()},onPointerLeave:e=>{S?.(e),z()},onKeyDown:B,onKeyUp:V,onClick:D?void 0:_,className:I,...T,children:[u?(0,i.jsx)(t.default,{}):null,k?(0,i.jsx)(`span`,{"aria-hidden":`true`,className:`zui-button__icon zui:inline-flex zui:items-center zui:justify-center zui:[&>*]:origin-center zui:[&>*]:scale-[0.7]`,children:p}):null,A?(0,i.jsx)(`span`,{children:O}):null]})});exports.default=o;

package/dist/components/Button/Button.d.cts

@@ -0,0 +1,3 @@
+import type { ButtonProps } from "./Button.interface.cjs";
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,3 @@
-import "./Button.css";
-import type { ButtonProps } from "./Button.interface";
+import type { ButtonProps } from "./Button.interface.js";
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/components/Button/Button.interface.d.cts

@@ -0,0 +1,22 @@
+import type * as React from "react";
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "onClick"> {
+    size?: "sm" | "default" | "lg";
+    variant?: "primary" | "secondary" | "danger";
+    kind?: "confirm" | "cancel";
+    disabled?: boolean;
+    isLoading?: boolean;
+    /** The button's text; `children` does the same and wins when both are set. */
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    /** @deprecated Use the standard `aria-label`. */
+    ariaLabel?: string;
+    /**
+     * Stretches the button to its container's width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    type?: "button" | "submit" | "reset";
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+}

package/dist/components/Button/Button.interface.d.ts

@@ -1,13 +1,21 @@
 import type * as React from "react";
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type" | "disabled" | "onClick"> {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "onClick"> {
     size?: "sm" | "default" | "lg";
     variant?: "primary" | "secondary" | "danger";
     kind?: "confirm" | "cancel";
     disabled?: boolean;
     isLoading?: boolean;
+    /** The button's text; `children` does the same and wins when both are set. */
     label?: React.ReactNode;
+    children?: React.ReactNode;
     icon?: React.ReactNode;
+    /** @deprecated Use the standard `aria-label`. */
     ariaLabel?: string;
+    /**
+     * Stretches the button to its container's width.
+     * @default false
+     */
+    fullWidth?: boolean;
     type?: "button" | "submit" | "reset";
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     className?: string;

package/dist/components/Button/Button.js

@@ -0,0 +1,70 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import t from "../Spinner/Spinner.js";
+/* empty css           */
+import { buttonVariants as n } from "./Button.variant.js";
+import { forwardRef as r, useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/Button/Button.tsx
+var u = 140, d = r(function({ size: r = "default", variant: d = "primary", kind: f = "confirm", disabled: p = !1, isLoading: m = !1, label: h, children: g, icon: _, ariaLabel: v, fullWidth: y = !1, type: b = "button", onClick: x, className: S, onPointerDown: C, onPointerUp: w, onPointerCancel: T, onPointerLeave: E, onKeyDown: D, onKeyUp: O, ...k }, A) {
+	let j = p || m, M = g ?? h, N = !m && !!_, P = !m && !!M, F = N && !P, [I, L] = s(!1), R = o(0), z = o(null), B = e(n({
+		size: r,
+		variant: d,
+		kind: f,
+		disabled: j,
+		fullWidth: y
+	}), F && "zui-button--icon-only", S), V = i(() => {
+		z.current !== null && (window.clearTimeout(z.current), z.current = null);
+	}, []), H = i(() => {
+		j || (V(), R.current = window.performance.now(), L(!0));
+	}, [V, j]), U = i(() => {
+		V();
+		let e = window.performance.now() - R.current, t = Math.max(u - e, 0);
+		z.current = window.setTimeout(() => {
+			L(!1), z.current = null;
+		}, t);
+	}, [V]), W = i((e) => {
+		D?.(e), !e.defaultPrevented && (e.repeat || e.key !== " " && e.key !== "Enter" || H());
+	}, [D, H]), G = i((e) => {
+		O?.(e), !e.defaultPrevented && (e.key !== " " && e.key !== "Enter" || U());
+	}, [O, U]);
+	return a(() => {
+		j && (V(), L(!1));
+	}, [V, j]), a(() => V, [V]), /* @__PURE__ */ l("button", {
+		ref: A,
+		"data-slot": "button",
+		type: b,
+		disabled: j,
+		"aria-label": v,
+		"aria-busy": m || void 0,
+		"data-pressed": I ? "true" : void 0,
+		onPointerDown: (e) => {
+			C?.(e), !e.defaultPrevented && H();
+		},
+		onPointerUp: (e) => {
+			w?.(e), U();
+		},
+		onPointerCancel: (e) => {
+			T?.(e), U();
+		},
+		onPointerLeave: (e) => {
+			E?.(e), U();
+		},
+		onKeyDown: W,
+		onKeyUp: G,
+		onClick: j ? void 0 : x,
+		className: B,
+		...k,
+		children: [
+			m ? /* @__PURE__ */ c(t, {}) : null,
+			N ? /* @__PURE__ */ c("span", {
+				"aria-hidden": "true",
+				className: "zui-button__icon zui:inline-flex zui:items-center zui:justify-center zui:[&>*]:origin-center zui:[&>*]:scale-[0.7]",
+				children: _
+			}) : null,
+			P ? /* @__PURE__ */ c("span", { children: M }) : null
+		]
+	});
+});
+//#endregion
+export { d as default };

package/dist/components/Button/Button.variant.cjs

@@ -0,0 +1 @@
+require(`../../_virtual/_rolldown/runtime.cjs`);const e=require(`../shared/responsiveScale.cjs`);var t=(0,require(`class-variance-authority`).cva)(`zui-button zui:inline-flex zui:items-center zui:justify-center zui:gap-2 zui:rounded-md ${e.BUTTON_PADDING_X} zui:text-sm zui:font-medium zui:leading-none zui:whitespace-nowrap zui:focus-visible:outline-none zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-color-primary)] zui:focus-visible:ring-offset-2 zui:focus-visible:ring-offset-[var(--zui-color-surface)] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-65`,{variants:{size:e.controlHeightBySize,variant:{primary:``,secondary:``,danger:``},kind:{confirm:`zui:text-[var(--zui-color-on-solid)] zui:hover:brightness-105 zui:hover:shadow-sm zui:active:shadow-sm`,cancel:`zui:border-2 zui:bg-transparent zui:text-[var(--zui-color-text)] zui:hover:bg-transparent zui:hover:shadow-sm zui:active:bg-transparent zui:active:shadow-sm`},disabled:{true:``,false:`zui:cursor-pointer`},fullWidth:{true:`zui:w-full`,false:`zui:w-auto`}},compoundVariants:[{kind:`confirm`,variant:`primary`,className:`zui:bg-[var(--zui-color-primary)]`},{kind:`confirm`,variant:`secondary`,className:`zui:bg-[var(--zui-color-secondary)]`},{kind:`confirm`,variant:`danger`,className:`zui:bg-[var(--zui-color-danger)]`},{kind:`cancel`,variant:`primary`,className:`zui:border-[var(--zui-color-primary)]`},{kind:`cancel`,variant:`secondary`,className:`zui:border-[var(--zui-color-secondary)]`},{kind:`cancel`,variant:`danger`,className:`zui:border-[var(--zui-color-danger)]`}],defaultVariants:{size:`default`,variant:`primary`,kind:`confirm`,disabled:!1,fullWidth:!1}});exports.buttonVariants=t;

package/dist/components/Button/Button.variant.d.cts

@@ -0,0 +1,8 @@
+declare const buttonVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | null | undefined;
+    variant?: "primary" | "secondary" | "danger" | null | undefined;
+    kind?: "confirm" | "cancel" | null | undefined;
+    disabled?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export { buttonVariants };

package/dist/components/Button/Button.variant.d.ts

@@ -1,12 +1,8 @@
-import type { ButtonProps } from "./Button.interface";
-type ButtonVariant = NonNullable<ButtonProps["variant"]>;
-type ButtonKind = NonNullable<ButtonProps["kind"]>;
-type ButtonSize = NonNullable<ButtonProps["size"]>;
-type ButtonVariantOptions = {
-    size?: ButtonSize;
-    variant?: ButtonVariant;
-    kind?: ButtonKind;
-    disabled?: boolean;
-};
-declare function buttonVariants(options?: ButtonVariantOptions): string;
+declare const buttonVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | null | undefined;
+    variant?: "primary" | "secondary" | "danger" | null | undefined;
+    kind?: "confirm" | "cancel" | null | undefined;
+    disabled?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export { buttonVariants };

package/dist/components/Button/Button.variant.js

@@ -0,0 +1,66 @@
+import { BUTTON_PADDING_X as e, controlHeightBySize as t } from "../shared/responsiveScale.js";
+import { cva as n } from "class-variance-authority";
+//#region src/components/Button/Button.variant.ts
+var r = n(`zui-button zui:inline-flex zui:items-center zui:justify-center zui:gap-2 zui:rounded-md ${e} zui:text-sm zui:font-medium zui:leading-none zui:whitespace-nowrap zui:focus-visible:outline-none zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-color-primary)] zui:focus-visible:ring-offset-2 zui:focus-visible:ring-offset-[var(--zui-color-surface)] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-65`, {
+	variants: {
+		size: t,
+		variant: {
+			primary: "",
+			secondary: "",
+			danger: ""
+		},
+		kind: {
+			confirm: "zui:text-[var(--zui-color-on-solid)] zui:hover:brightness-105 zui:hover:shadow-sm zui:active:shadow-sm",
+			cancel: "zui:border-2 zui:bg-transparent zui:text-[var(--zui-color-text)] zui:hover:bg-transparent zui:hover:shadow-sm zui:active:bg-transparent zui:active:shadow-sm"
+		},
+		disabled: {
+			true: "",
+			false: "zui:cursor-pointer"
+		},
+		fullWidth: {
+			true: "zui:w-full",
+			false: "zui:w-auto"
+		}
+	},
+	compoundVariants: [
+		{
+			kind: "confirm",
+			variant: "primary",
+			className: "zui:bg-[var(--zui-color-primary)]"
+		},
+		{
+			kind: "confirm",
+			variant: "secondary",
+			className: "zui:bg-[var(--zui-color-secondary)]"
+		},
+		{
+			kind: "confirm",
+			variant: "danger",
+			className: "zui:bg-[var(--zui-color-danger)]"
+		},
+		{
+			kind: "cancel",
+			variant: "primary",
+			className: "zui:border-[var(--zui-color-primary)]"
+		},
+		{
+			kind: "cancel",
+			variant: "secondary",
+			className: "zui:border-[var(--zui-color-secondary)]"
+		},
+		{
+			kind: "cancel",
+			variant: "danger",
+			className: "zui:border-[var(--zui-color-danger)]"
+		}
+	],
+	defaultVariants: {
+		size: "default",
+		variant: "primary",
+		kind: "confirm",
+		disabled: !1,
+		fullWidth: !1
+	}
+});
+//#endregion
+export { r as buttonVariants };

package/dist/components/Checkbox/Checkbox.cjs

@@ -0,0 +1 @@
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../lib/utils.cjs`),n=require(`../shared/FieldLabel.cjs`),r=require(`../shared/useInvalidState.cjs`),i=require(`../shared/useBubbleInputInvalid.cjs`),a=require(`./Checkbox.variant.cjs`);let o=require(`react`);o=e.__toESM(o,1);let s=require(`react/jsx-runtime`),c=require(`lucide-react`),l=require(`@radix-ui/react-checkbox`);l=e.__toESM(l,1);var u=o.forwardRef(function({className:e,size:u=`default`,checked:d,defaultChecked:f,onCheckedChange:p,onInvalid:m,required:h,name:g,value:_,form:v,id:y,"aria-label":b,disabled:x=!1,onClick:S,...C},w){let{isInvalid:T,setIsInvalid:E,handleInvalid:D}=r.useInvalidState(m),O=o.useRef(null),k=o.useMemo(()=>t.mergeRefs(O,w),[w]);i.useBubbleInputInvalid(O,D);let A=o.useCallback(e=>{E(!1),p?.(e)},[p,E]);return(0,s.jsxs)(l.Root,{...C,ref:k,"data-slot":`checkbox`,"aria-invalid":T||void 0,"aria-disabled":x||void 0,className:t.cn(a.checkboxVariants({size:u,disabled:x,className:e})),checked:d,defaultChecked:f,onCheckedChange:A,required:h,name:g,value:_,form:v,id:y,"aria-label":b,disabled:x,onClick:x?void 0:S,children:[(0,s.jsx)(l.Indicator,{"data-slot":`checkbox-indicator`,className:t.cn(a.checkboxIndicatorVariants({size:u})),children:(0,s.jsx)(c.CheckIcon,{})}),h?(0,s.jsx)(n.RequiredMark,{compact:!0}):null]})});exports.default=u;

package/dist/components/Checkbox/Checkbox.d.cts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { CheckboxProps } from "./Checkbox.interface.cjs";
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export default Checkbox;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
-import type { CheckboxProps } from "./Checkbox.interface";
+import type { CheckboxProps } from "./Checkbox.interface.js";
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 export default Checkbox;