zaravand-ui 5.1.1 → 7.0.0

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

@@ -0,0 +1,65 @@
+import type * as React from "react";
+import type { UploaderRejection } from "../Uploader/Uploader.interface.cjs";
+export type AvatarSize = "xs" | "sm" | "default" | "lg" | "xl";
+export type AvatarShape = "circle" | "square";
+export type AvatarStatus = "online" | "offline" | "busy" | "away";
+export interface AvatarProps {
+    /** Image URL. When missing or failing to load, the fallback is shown. */
+    src?: string;
+    /** Image alt text. Defaults to `name`. */
+    alt?: string;
+    /** Person/entity name — used for the initials fallback, accessible label and tooltip. */
+    name?: string;
+    /** Custom fallback content. Replaces the initials/icon fallback. */
+    fallback?: React.ReactNode;
+    /** @default "default" (or the surrounding `AvatarGroup`'s size) */
+    size?: AvatarSize;
+    /** @default "circle" (or the surrounding `AvatarGroup`'s shape) */
+    shape?: AvatarShape;
+    /** Presence dot at the bottom corner. */
+    status?: AvatarStatus;
+    /** Shows `name` in a tooltip on hover/focus. */
+    showTooltip?: boolean;
+    /**
+     * When the image has loaded: shows a magnifier on hover and opens the image in a full-screen preview on click.
+     * @default true when `onClick` is not set
+     */
+    previewable?: boolean;
+    /** Larger image used in the preview. Defaults to `src`. */
+    previewSrc?: string;
+    /** Makes the avatar a button. Takes precedence over the preview click unless `previewable` is set explicitly. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Enables editing: shows a camera button that picks a new image. The consumer updates `src`. */
+    onImageSelect?: (file: File) => void;
+    /** Shows a "remove image" action in the preview. */
+    onImageRemove?: () => void;
+    /** @default "image/*" */
+    accept?: string;
+    /** Max size of the picked image in kilobytes. */
+    maxSizeKb?: number;
+    /** Called with a rejected image. When omitted, an error toast is shown (requires a mounted `<ToastHost />`; otherwise a console warning). */
+    onReject?: (rejection: UploaderRejection) => void;
+    className?: string;
+}
+export type AvatarGroupItem = Omit<AvatarProps, "size" | "shape"> & {
+    /** React key. Defaults to `name`/index. */
+    key?: string;
+};
+export interface AvatarGroupProps {
+    /** Data-driven usage. When provided, `children` is ignored. */
+    items?: AvatarGroupItem[];
+    /** Manual composition with `<Avatar>` children. */
+    children?: React.ReactNode;
+    /** Maximum avatars shown before collapsing the rest into a "+N" chip. */
+    max?: number;
+    /** @default "default" */
+    size?: AvatarSize;
+    /** @default "circle" */
+    shape?: AvatarShape;
+    /**
+     * Tooltip with the name on each avatar (items mode) and the hidden names on the "+N" chip.
+     * @default true
+     */
+    showTooltip?: boolean;
+    className?: string;
+}

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

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import type { UploaderRejection } from "../Uploader/Uploader.interface";
+import type { UploaderRejection } from "../Uploader/Uploader.interface.js";
 export type AvatarSize = "xs" | "sm" | "default" | "lg" | "xl";
 export type AvatarShape = "circle" | "square";
 export type AvatarStatus = "online" | "offline" | "busy" | "away";
@@ -37,7 +37,7 @@ export interface AvatarProps {
     accept?: string;
     /** Max size of the picked image in kilobytes. */
     maxSizeKb?: number;
-    /** Called with a rejected image. When omitted, an error toast is shown. */
+    /** Called with a rejected image. When omitted, an error toast is shown (requires a mounted `<ToastHost />`; otherwise a console warning). */
     onReject?: (rejection: UploaderRejection) => void;
     className?: string;
 }

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 { dialogOverlayVariants as i } from "../Dialog/Dialog.variant.js";
+import a from "../Tooltip/Tooltip.js";
+import { showFallbackToast as o } from "../Toast/function/showToast.js";
+import { describeRejection as s, splitAcceptedFiles as c } from "../Uploader/Uploader.utils.js";
+import { avatarEditButtonVariants as l, avatarGroupOverlapBySize as u, avatarPreviewContentClassName as d, avatarStatusVariants as f, avatarVariants as ee } from "./Avatar.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: u, 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 ?? u, 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 } = c([t], N, P);
+		if (r.length > 0) {
+			F ? F(r[0]) : o({
+				title: R.invalidImage,
+				message: s(r[0], P, se, I.uploader),
+				type: "error",
+				duration: 5e3
+			}, "`onReject`");
+			return;
+		}
+		j?.(n[0]);
+	}, $ = n(ee({
+		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: u ?? 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(a, {
+				text: y,
+				position: "top",
+				trigger: he
+			}) : he,
+			k ? /* @__PURE__ */ g("span", {
+				className: f({
+					status: k,
+					size: B
+				}),
+				children: /* @__PURE__ */ g("span", {
+					className: "zui:sr-only",
+					children: R[k]
+				})
+			}) : null,
+			Y ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(a, {
+				text: R.changeImage,
+				position: "bottom",
+				trigger: /* @__PURE__ */ g("button", {
+					type: "button",
+					"aria-label": R.changeImage,
+					onClick: Q,
+					className: l({ 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: n(i(), "zui:mobile:items-center zui:mobile:p-4"),
+					children: /* @__PURE__ */ _(w.Content, {
+						"data-slot": "avatar-preview",
+						dir: L,
+						"aria-describedby": void 0,
+						className: d,
+						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: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: /* @__PURE__ */ g(S, {
+										className: "zui:size-4",
+										"aria-hidden": "true"
+									})
+								})
+							}),
+							/* @__PURE__ */ g(te, {
+								src: ie ?? t,
+								fallbackSrc: t,
+								alt: u ?? y ?? ""
+							}),
+							/* @__PURE__ */ _("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: [
+									/* @__PURE__ */ g(w.Title, {
+										className: "zui:m-0 zui:text-sm zui:mobile:w-full zui:mobile:text-center zui:mobile:text-base zui:font-semibold",
+										children: y ?? u ?? R.imageFallbackTitle
+									}),
+									Y ? /* @__PURE__ */ g(r, {
+										variant: "secondary",
+										kind: "cancel",
+										label: R.changeImage,
+										className: "zui:mobile:flex-1",
+										icon: /* @__PURE__ */ g(v, { className: "zui:size-4" }),
+										onClick: Q
+									}) : null,
+									M ? /* @__PURE__ */ g(r, {
+										variant: "danger",
+										kind: "cancel",
+										label: R.removeImage,
+										className: "zui:mobile:flex-1",
+										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: i, max: o, size: s = "default", shape: c = "circle", showTooltip: l = !0, className: d }, f) {
+	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: l,
+		...t
+	}, e ?? `${t.name ?? "avatar"}-${n}`)) : m.Children.toArray(i).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(ee({
+			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: f,
+			"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", u[s], d),
+			children: [b.slice(0, x), S > 0 ? l && C.length > 0 ? /* @__PURE__ */ g(a, {
+				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.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

@@ -1,6 +1,6 @@
 declare const avatarVariants: (props?: ({
     size?: "xs" | "sm" | "default" | "lg" | "xl" | null | undefined;
-    shape?: "circle" | "square" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
     interactive?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const avatarStatusVariants: (props?: ({
@@ -18,5 +18,5 @@ declare const avatarGroupOverlapBySize: {
     readonly lg: "zui:[&>*:not(:first-child)]:-ms-3";
     readonly xl: "zui:[&>*:not(:first-child)]:-ms-4";
 };
-declare const avatarPreviewContentClassName = "zui:relative zui:z-[110] 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";
+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({variant:o=`primary`,kind:s=`confirm`,disabled:c=!1,isLoading:l=!1,label:u,children:d,icon:f,ariaLabel:p,fullWidth:m=!1,type:h=`button`,onClick:g,className:_,onPointerDown:v,onPointerUp:y,onPointerCancel:b,onPointerLeave:x,onKeyDown:S,onKeyUp:C,...w},T){let E=c||l,D=d??u,O=!l&&!!f,k=!l&&!!D,A=O&&!k,[j,M]=(0,r.useState)(!1),N=(0,r.useRef)(0),P=(0,r.useRef)(null),F=e.cn(n.buttonVariants({variant:o,kind:s,disabled:E,fullWidth:m}),A&&`zui-button--icon-only`,_),I=(0,r.useCallback)(()=>{P.current!==null&&(window.clearTimeout(P.current),P.current=null)},[]),L=(0,r.useCallback)(()=>{E||(I(),N.current=window.performance.now(),M(!0))},[I,E]),R=(0,r.useCallback)(()=>{I();let e=window.performance.now()-N.current,t=Math.max(a-e,0);P.current=window.setTimeout(()=>{M(!1),P.current=null},t)},[I]),z=(0,r.useCallback)(e=>{S?.(e),!e.defaultPrevented&&(e.repeat||e.key!==` `&&e.key!==`Enter`||L())},[S,L]),B=(0,r.useCallback)(e=>{C?.(e),!e.defaultPrevented&&(e.key!==` `&&e.key!==`Enter`||R())},[C,R]);return(0,r.useEffect)(()=>{E&&(I(),M(!1))},[I,E]),(0,r.useEffect)(()=>I,[I]),(0,i.jsxs)(`button`,{ref:T,"data-slot":`button`,type:h,disabled:E,"aria-label":p,"aria-busy":l||void 0,"data-pressed":j?`true`:void 0,onPointerDown:e=>{v?.(e),!e.defaultPrevented&&L()},onPointerUp:e=>{y?.(e),R()},onPointerCancel:e=>{b?.(e),R()},onPointerLeave:e=>{x?.(e),R()},onKeyDown:z,onKeyUp:B,onClick:E?void 0:g,className:F,...w,children:[l?(0,i.jsx)(t.default,{}):null,O?(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:f}):null,k?(0,i.jsx)(`span`,{children:D}):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,21 @@
+import type * as React from "react";
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "onClick"> {
+    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,20 @@
 import type * as React from "react";
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type" | "disabled" | "onClick"> {
-    size?: "sm" | "default" | "lg";
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "onClick"> {
     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,69 @@
+"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({ variant: r = "primary", kind: d = "confirm", disabled: f = !1, isLoading: p = !1, label: m, children: h, icon: g, ariaLabel: _, fullWidth: v = !1, type: y = "button", onClick: b, className: x, onPointerDown: S, onPointerUp: C, onPointerCancel: w, onPointerLeave: T, onKeyDown: E, onKeyUp: D, ...O }, k) {
+	let A = f || p, j = h ?? m, M = !p && !!g, N = !p && !!j, P = M && !N, [F, I] = s(!1), L = o(0), R = o(null), z = e(n({
+		variant: r,
+		kind: d,
+		disabled: A,
+		fullWidth: v
+	}), P && "zui-button--icon-only", x), B = i(() => {
+		R.current !== null && (window.clearTimeout(R.current), R.current = null);
+	}, []), V = i(() => {
+		A || (B(), L.current = window.performance.now(), I(!0));
+	}, [B, A]), H = i(() => {
+		B();
+		let e = window.performance.now() - L.current, t = Math.max(u - e, 0);
+		R.current = window.setTimeout(() => {
+			I(!1), R.current = null;
+		}, t);
+	}, [B]), U = i((e) => {
+		E?.(e), !e.defaultPrevented && (e.repeat || e.key !== " " && e.key !== "Enter" || V());
+	}, [E, V]), W = i((e) => {
+		D?.(e), !e.defaultPrevented && (e.key !== " " && e.key !== "Enter" || H());
+	}, [D, H]);
+	return a(() => {
+		A && (B(), I(!1));
+	}, [B, A]), a(() => B, [B]), /* @__PURE__ */ l("button", {
+		ref: k,
+		"data-slot": "button",
+		type: y,
+		disabled: A,
+		"aria-label": _,
+		"aria-busy": p || void 0,
+		"data-pressed": F ? "true" : void 0,
+		onPointerDown: (e) => {
+			S?.(e), !e.defaultPrevented && V();
+		},
+		onPointerUp: (e) => {
+			C?.(e), H();
+		},
+		onPointerCancel: (e) => {
+			w?.(e), H();
+		},
+		onPointerLeave: (e) => {
+			T?.(e), H();
+		},
+		onKeyDown: U,
+		onKeyUp: W,
+		onClick: A ? void 0 : b,
+		className: z,
+		...O,
+		children: [
+			p ? /* @__PURE__ */ c(t, {}) : null,
+			M ? /* @__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: g
+			}) : null,
+			N ? /* @__PURE__ */ c("span", { children: j }) : 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 ${e.CONTROL_HEIGHT_DEFAULT} 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:{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:{variant:`primary`,kind:`confirm`,disabled:!1,fullWidth:!1}});exports.buttonVariants=t;

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

@@ -0,0 +1,7 @@
+declare const buttonVariants: (props?: ({
+    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,7 @@
-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?: ({
+    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 };