zaravand-ui 5.0.1 → 6.0.0

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));exports.__toESM=s;

package/dist/components/Accordion/Accordion.cjs

@@ -0,0 +1 @@
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../lib/utils.cjs`),r=require(`../shared/IconActionButton.cjs`),i=require(`../shared/useControllableState.cjs`),a=require(`../shared/useExclusiveAction.cjs`),o=require(`./Accordion.variant.cjs`);let s=require(`react`);s=e.__toESM(s,1);let c=require(`react/jsx-runtime`),l=require(`lucide-react`);var u=`zui:size-4`,d=s.createContext(null);function f(e){let t=s.useContext(d);if(!t)throw Error(`${e} must be used within an <Accordion> component`);return t}var p=s.createContext(null);function m(e){let t=s.useContext(p);if(!t)throw Error(`${e} must be used within an <AccordionItem> component`);return t}function h(e){return e===void 0?[]:Array.isArray(e)?e:[e]}function g(e){return typeof e==`string`||typeof e==`number`?String(e):``}function _(e){return`${g(e.title)} ${Array.isArray(e.content)?e.content.map(e=>g(e.label)).join(` `):g(e.content)}`.toLocaleLowerCase()}var v=s.forwardRef(function({type:e=`single`,value:f,defaultValue:p,onValueChange:m,collapsible:g=!1,dir:v,items:S,searchable:C=!1,onAdd:w,onEdit:T,onDelete:E,onContentItemEdit:D,onContentItemDelete:O,className:k,children:A},j){let{messages:M,dir:N}=t.useZuiConfig(),P=v??N,[F,I]=i.useControllableState({value:s.useMemo(()=>f===void 0?void 0:h(f),[f]),defaultValue:()=>h(p)}),[L,R]=a.useExclusiveAction(),[z,B]=s.useState(``),V=C&&Array.isArray(S),H=typeof w==`function`,U=z.trim().toLocaleLowerCase(),W=s.useMemo(()=>{if(!S)return;let e=S.map((e,t)=>({item:e,originalIndex:t}));return!V||U.length===0?e:e.filter(({item:e})=>_(e).includes(U))},[S,U,V]),G=s.useCallback(t=>{I(t),e===`multiple`?m?.(t):m?.(t[0]??``)},[m,I,e]),K=s.useCallback(t=>{let n=F.includes(t);if(e===`multiple`){G(n?F.filter(e=>e!==t):[...F,t]);return}if(n){G(g?[]:F);return}G([t])},[g,G,F,e]),q=s.useCallback(async()=>{w&&await R(w)},[w,R]),J=s.useCallback(async(e,t)=>{T&&await R(()=>T({item:e,index:t}))},[T,R]),Y=s.useCallback(async(e,t)=>{E&&await R(()=>E({item:e,index:t}))},[E,R]),X=s.useCallback(async(e,t,n,r)=>{D&&await R(()=>D({item:e,itemIndex:t,contentItem:n,contentIndex:r}))},[D,R]),Z=s.useCallback(async(e,t,n,r)=>{O&&await R(()=>O({item:e,itemIndex:t,contentItem:n,contentIndex:r}))},[O,R]),Q=s.useMemo(()=>({openValues:F,toggleValue:K,dir:P,type:e}),[F,K,P,e]);return(0,c.jsx)(d.Provider,{value:Q,children:(0,c.jsxs)(`div`,{ref:j,dir:P,"data-slot":`accordion`,className:n.cn(o.accordionVariants(),k),children:[V||H?(0,c.jsx)(r.ListToolbar,{"data-slot":`accordion-controls`,searchSlot:`accordion-search-input`,actionsSlot:`accordion-actions`,className:`zui:mb-2`,search:V?{value:z,onChange:e=>B(e.target.value),placeholder:M.common.searchPlaceholder,ariaLabel:M.accordion.searchAriaLabel}:void 0,actions:H?(0,c.jsx)(r.ToolbarIconButton,{"data-slot":`accordion-action-add-button`,label:M.common.add,disabled:L,onClick:()=>void q(),icon:(0,c.jsx)(l.Plus,{})}):void 0}):null,W&&V&&W.length===0?(0,c.jsx)(`div`,{"data-slot":`accordion-empty-state`,className:o.accordionEmptyStateVariants(),children:M.accordion.noSearchResults}):null,W?W.map(({item:e,originalIndex:t})=>{let n=e.isEdit&&typeof T==`function`,i=e.isDelete&&typeof E==`function`,a=n||i?(0,c.jsxs)(c.Fragment,{children:[n?(0,c.jsx)(r.IconActionButton,{"data-slot":`accordion-action-edit-button`,label:M.common.edit,icon:(0,c.jsx)(l.Pencil,{className:u,"aria-hidden":`true`}),disabled:L,className:o.accordionActionButtonVariants({tone:`edit`}),onClick:()=>void J(e,t)}):null,i?(0,c.jsx)(r.IconActionButton,{"data-slot":`accordion-action-delete-button`,label:M.common.delete,icon:(0,c.jsx)(l.Trash2,{className:u,"aria-hidden":`true`}),disabled:L,className:o.accordionActionButtonVariants({tone:`delete`}),onClick:()=>void Y(e,t)}):null]}):void 0,s=Array.isArray(e.content)?(0,c.jsx)(`div`,{"data-slot":`accordion-content-list`,className:o.accordionContentListVariants(),children:e.content.map((n,i)=>{let a=n.isEdit&&typeof D==`function`,s=n.isDelete&&typeof O==`function`;return(0,c.jsxs)(`div`,{"data-slot":`accordion-content-list-row`,className:o.accordionContentListRowVariants(),children:[(0,c.jsx)(`span`,{className:`zui:min-w-0 zui:flex-1 zui:text-start`,children:n.label}),a?(0,c.jsx)(r.IconActionButton,{"data-slot":`accordion-content-item-edit-button`,label:M.common.edit,icon:(0,c.jsx)(l.Pencil,{className:u,"aria-hidden":`true`}),disabled:L,className:o.accordionContentActionButtonVariants({tone:`edit`}),onClick:()=>void X(e,t,n,i)}):null,s?(0,c.jsx)(r.IconActionButton,{"data-slot":`accordion-content-item-delete-button`,label:M.common.delete,icon:(0,c.jsx)(l.Trash2,{className:u,"aria-hidden":`true`}),disabled:L,className:o.accordionContentActionButtonVariants({tone:`delete`}),onClick:()=>void Z(e,t,n,i)}):null]},n.value)})}):e.content;return(0,c.jsxs)(y,{value:e.value,disabled:e.disabled,children:[(0,c.jsx)(b,{icon:e.icon,actions:a,children:e.title}),(0,c.jsx)(x,{children:s})]},e.value)}):A]})})}),y=s.forwardRef(function({value:e,disabled:t=!1,className:r,children:i},a){let{openValues:l}=f(`AccordionItem`),u=l.includes(e),d=s.useId(),m=`accordion-trigger-${d}`,h=`accordion-content-${d}`,g=s.useMemo(()=>({value:e,isOpen:u,disabled:t,triggerId:m,contentId:h}),[e,u,t,m,h]);return(0,c.jsx)(p.Provider,{value:g,children:(0,c.jsx)(`div`,{ref:a,"data-slot":`accordion-item`,"data-state":u?`open`:`closed`,"data-disabled":t?``:void 0,className:n.cn(o.accordionItemVariants(),r),children:i})})}),b=s.forwardRef(function({icon:e,actions:t,className:r,children:i},a){let{toggleValue:s}=f(`AccordionTrigger`),{value:u,isOpen:d,disabled:p,triggerId:h,contentId:g}=m(`AccordionTrigger`);return(0,c.jsxs)(`div`,{"data-slot":`accordion-trigger-row`,className:o.accordionTriggerRowVariants(),children:[(0,c.jsxs)(`button`,{ref:a,type:`button`,id:h,"aria-expanded":d,"aria-controls":g,disabled:p,"data-slot":`accordion-trigger`,"data-state":d?`open`:`closed`,onClick:()=>{p||s(u)},className:n.cn(o.accordionTriggerVariants(),r),children:[(0,c.jsx)(`span`,{className:`zui:flex-1 zui:text-start`,children:i}),e??(0,c.jsx)(l.ChevronDown,{"aria-hidden":`true`,className:n.cn(`zui:size-4 zui:shrink-0 zui:text-[var(--zui-color-text)] zui:transition-transform zui:duration-200 zui:ease-out`,d?`zui:rotate-180`:`zui:rotate-0`)})]}),t?(0,c.jsx)(`div`,{"data-slot":`accordion-trigger-actions`,className:o.accordionTriggerActionsVariants(),children:t}):null]})}),x=s.forwardRef(function({forceMount:e,className:t,children:r},i){let{isOpen:a,triggerId:s,contentId:l}=m(`AccordionContent`);return!e&&!a?null:(0,c.jsx)(`div`,{ref:i,role:`region`,id:l,"aria-labelledby":s,"data-slot":`accordion-content`,"data-state":a?`open`:`closed`,hidden:e?!a:void 0,className:n.cn(o.accordionContentVariants(),t),children:r})});exports.AccordionContent=x,exports.AccordionItem=y,exports.AccordionTrigger=b,exports.default=v;

package/dist/components/Accordion/Accordion.d.cts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps } from "./Accordion.interface.cjs";
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+export { AccordionItem, AccordionTrigger, AccordionContent };
+export default Accordion;

package/dist/components/Accordion/Accordion.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps } from "./Accordion.interface";
+import type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps } from "./Accordion.interface.js";
 declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,95 @@
+import type * as React from "react";
+/**
+ * One row inside an item's `content` when `content` is an array — a flat,
+ * minimally-divided list (not a nested Accordion) rendered inside the open
+ * panel, with its own optional per-row edit/delete icons.
+ */
+export interface AccordionContentItem {
+    value: string;
+    label: React.ReactNode;
+    /** Shows an edit icon button for this row. Requires `Accordion`'s `onContentItemEdit`. */
+    isEdit?: boolean;
+    /** Shows a delete icon button for this row. Requires `Accordion`'s `onContentItemDelete`. */
+    isDelete?: boolean;
+}
+export interface AccordionItemSchema {
+    value: string;
+    title: React.ReactNode;
+    /**
+     * Either arbitrary content (the default), or an array of `AccordionContentItem`
+     * rows — rendered as a flat list separated by a minimal divider, not as a
+     * nested Accordion.
+     */
+    content: React.ReactNode | AccordionContentItem[];
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    /** Shows an edit icon button for this item (only in `items` data-driven mode). Requires `Accordion`'s `onEdit`. */
+    isEdit?: boolean;
+    /** Shows a delete icon button for this item (only in `items` data-driven mode). Requires `Accordion`'s `onDelete`. */
+    isDelete?: boolean;
+}
+export type AccordionItemActionInput = {
+    item: AccordionItemSchema;
+    index: number;
+};
+export type AccordionEditItemHandler = (input: AccordionItemActionInput) => void | Promise<void>;
+export type AccordionDeleteItemHandler = (input: AccordionItemActionInput) => void | Promise<void>;
+export type AccordionContentItemActionInput = {
+    item: AccordionItemSchema;
+    itemIndex: number;
+    contentItem: AccordionContentItem;
+    contentIndex: number;
+};
+export type AccordionContentItemEditHandler = (input: AccordionContentItemActionInput) => void | Promise<void>;
+export type AccordionContentItemDeleteHandler = (input: AccordionContentItemActionInput) => void | Promise<void>;
+export interface AccordionProps {
+    type?: "single" | "multiple";
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    collapsible?: boolean;
+    dir?: "rtl" | "ltr";
+    /**
+     * Data-driven usage (recommended) — same convention as Select's `options` or
+     * Table's `schema`: pass the items and Accordion renders them, no manual
+     * AccordionItem/AccordionTrigger/AccordionContent composition needed.
+     * When provided, `children` is ignored.
+     */
+    items?: AccordionItemSchema[];
+    /**
+     * Shows a search input above the `items` list that filters items by title
+     * and content text, same convention as `Table`'s `searchable`. Only applies
+     * in data-driven (`items`) mode.
+     */
+    searchable?: boolean;
+    /** Shows a "+" add button next to the search input, same convention as `Table`'s `onAdd`. */
+    onAdd?: () => void | Promise<void>;
+    /** Called when an item's edit icon (`item.isEdit`) is clicked. Same convention as `Table`'s `onEdit`. */
+    onEdit?: AccordionEditItemHandler;
+    /** Called when an item's delete icon (`item.isDelete`) is clicked. Same convention as `Table`'s `onDelete`. */
+    onDelete?: AccordionDeleteItemHandler;
+    /** Called when a content-list row's edit icon (`AccordionContentItem.isEdit`) is clicked. */
+    onContentItemEdit?: AccordionContentItemEditHandler;
+    /** Called when a content-list row's delete icon (`AccordionContentItem.isDelete`) is clicked. */
+    onContentItemDelete?: AccordionContentItemDeleteHandler;
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface AccordionItemProps {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface AccordionTriggerProps {
+    icon?: React.ReactNode;
+    /** Extra controls (e.g. edit/delete icon buttons) rendered next to the trigger but outside its clickable button, so clicking them doesn't toggle the item. */
+    actions?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface AccordionContentProps {
+    forceMount?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,283 @@
+"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";
+//#region src/components/Accordion/Accordion.tsx
+var w = "zui:size-4", T = g.createContext(null);
+function E(e) {
+	let t = g.useContext(T);
+	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);
+	if (!t) throw Error(`${e} must be used within an <AccordionItem> component`);
+	return t;
+}
+function k(e) {
+	return e === void 0 ? [] : Array.isArray(e) ? e : [e];
+}
+function A(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();
+}
+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) => ({
+			item: e,
+			originalIndex: t
+		}));
+		return !J || X.length === 0 ? e : e.filter(({ item: e }) => ne(e).includes(X));
+	}, [
+		E,
+		X,
+		J
+	]), Q = g.useCallback((e) => {
+		U(e), d === "multiple" ? m?.(e) : m?.(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]);
+			return;
+		}
+		if (t) {
+			Q(h ? [] : H);
+			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({
+			item: e,
+			index: t
+		}));
+	}, [A, G]), oe = g.useCallback(async (e, t) => {
+		j && await G(() => j({
+			item: e,
+			index: t
+		}));
+	}, [j, G]), se = g.useCallback(async (e, t, n, r) => {
+		F && await G(() => F({
+			item: e,
+			itemIndex: t,
+			contentItem: n,
+			contentIndex: r
+		}));
+	}, [F, G]), ce = g.useCallback(async (e, t, n, r) => {
+		I && await G(() => I({
+			item: e,
+			itemIndex: t,
+			contentItem: n,
+			contentIndex: r
+		}));
+	}, [I, G]), le = g.useMemo(() => ({
+		openValues: H,
+		toggleValue: $,
+		dir: V,
+		type: d
+	}), [
+		H,
+		$,
+		V,
+		d
+	]);
+	return /* @__PURE__ */ v(T.Provider, {
+		value: le,
+		children: /* @__PURE__ */ y("div", {
+			ref: R,
+			dir: V,
+			"data-slot": "accordion",
+			className: t(te(), re),
+			children: [
+				J || Y ? /* @__PURE__ */ v(r, {
+					"data-slot": "accordion-controls",
+					searchSlot: "accordion-search-input",
+					actionsSlot: "accordion-actions",
+					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", {
+					"data-slot": "accordion-empty-state",
+					className: ee(),
+					children: z.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, {
+						"data-slot": "accordion-action-edit-button",
+						label: z.common.edit,
+						icon: /* @__PURE__ */ v(x, {
+							className: w,
+							"aria-hidden": "true"
+						}),
+						disabled: W,
+						className: s({ tone: "edit" }),
+						onClick: () => void ae(e, t)
+					}) : null, i ? /* @__PURE__ */ v(n, {
+						"data-slot": "accordion-action-delete-button",
+						label: z.common.delete,
+						icon: /* @__PURE__ */ v(C, {
+							className: w,
+							"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", {
+						"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", {
+								"data-slot": "accordion-content-list-row",
+								className: l(),
+								children: [
+									/* @__PURE__ */ v("span", {
+										className: "zui:min-w-0 zui:flex-1 zui:text-start",
+										children: r.label
+									}),
+									a ? /* @__PURE__ */ v(n, {
+										"data-slot": "accordion-content-item-edit-button",
+										label: z.common.edit,
+										icon: /* @__PURE__ */ v(x, {
+											className: w,
+											"aria-hidden": "true"
+										}),
+										disabled: W,
+										className: c({ tone: "edit" }),
+										onClick: () => void se(e, t, r, i)
+									}) : null,
+									o ? /* @__PURE__ */ v(n, {
+										"data-slot": "accordion-content-item-delete-button",
+										label: z.common.delete,
+										icon: /* @__PURE__ */ v(C, {
+											className: w,
+											"aria-hidden": "true"
+										}),
+										disabled: W,
+										className: c({ tone: "delete" }),
+										onClick: () => void ce(e, t, r, i)
+									}) : null
+								]
+							}, r.value);
+						})
+					}) : e.content;
+					return /* @__PURE__ */ y(M, {
+						value: e.value,
+						disabled: e.disabled,
+						children: [/* @__PURE__ */ v(N, {
+							icon: e.icon,
+							actions: a,
+							children: e.title
+						}), /* @__PURE__ */ v(P, { children: o })]
+					}, e.value);
+				}) : L
+			]
+		})
+	});
+}), 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(() => ({
+		value: e,
+		isOpen: s,
+		disabled: n,
+		triggerId: l,
+		contentId: u
+	}), [
+		e,
+		s,
+		n,
+		l,
+		u
+	]);
+	return /* @__PURE__ */ v(D.Provider, {
+		value: d,
+		children: /* @__PURE__ */ v("div", {
+			ref: a,
+			"data-slot": "accordion-item",
+			"data-state": s ? "open" : "closed",
+			"data-disabled": n ? "" : void 0,
+			className: t(f(), 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", {
+		"data-slot": "accordion-trigger-row",
+		className: m(),
+		children: [/* @__PURE__ */ y("button", {
+			ref: a,
+			type: "button",
+			id: u,
+			"aria-expanded": c,
+			"aria-controls": d,
+			disabled: l,
+			"data-slot": "accordion-trigger",
+			"data-state": c ? "open" : "closed",
+			onClick: () => {
+				l || o(s);
+			},
+			className: t(h(), r),
+			children: [/* @__PURE__ */ v("span", {
+				className: "zui:flex-1 zui:text-start",
+				children: i
+			}), e ?? /* @__PURE__ */ v(b, {
+				"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", {
+			"data-slot": "accordion-trigger-actions",
+			className: p(),
+			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", {
+		ref: i,
+		role: "region",
+		id: s,
+		"aria-labelledby": o,
+		"data-slot": "accordion-content",
+		"data-state": a ? "open" : "closed",
+		hidden: e ? !a : void 0,
+		className: t(d(), n),
+		children: r
+	});
+});
+//#endregion
+export { P as AccordionContent, M as AccordionItem, N as AccordionTrigger, j as default };

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

@@ -0,0 +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;

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

@@ -0,0 +1,16 @@
+declare const accordionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionTriggerRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionTriggerActionsVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionActionButtonVariants: (props?: ({
+    tone?: "edit" | "delete" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const accordionContentActionButtonVariants: (props?: ({
+    tone?: "edit" | "delete" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const accordionContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionContentListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionContentListRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const accordionEmptyStateVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export { accordionVariants, accordionItemVariants, accordionTriggerRowVariants, accordionTriggerVariants, accordionTriggerActionsVariants, accordionActionButtonVariants, accordionContentActionButtonVariants, accordionContentVariants, accordionContentListVariants, accordionContentListRowVariants, accordionEmptyStateVariants, };

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

@@ -12,8 +12,5 @@ declare const accordionContentActionButtonVariants: (props?: ({
 declare const accordionContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const accordionContentListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const accordionContentListRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-declare const accordionControlsRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-declare const accordionSearchInputVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-declare const accordionAddButtonWrapperVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 declare const accordionEmptyStateVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export { accordionVariants, accordionItemVariants, accordionTriggerRowVariants, accordionTriggerVariants, accordionTriggerActionsVariants, accordionActionButtonVariants, accordionContentActionButtonVariants, accordionContentVariants, accordionContentListVariants, accordionContentListRowVariants, accordionControlsRowVariants, accordionSearchInputVariants, accordionAddButtonWrapperVariants, accordionEmptyStateVariants, };
+export { accordionVariants, accordionItemVariants, accordionTriggerRowVariants, accordionTriggerVariants, accordionTriggerActionsVariants, accordionActionButtonVariants, accordionContentActionButtonVariants, accordionContentVariants, accordionContentListVariants, accordionContentListRowVariants, accordionEmptyStateVariants, };

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

@@ -0,0 +1,17 @@
+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", {
+	variants: { tone: {
+		edit: "zui:text-[var(--zui-color-text)]",
+		delete: "zui:text-[var(--zui-color-danger)]"
+	} },
+	defaultVariants: { tone: "edit" }
+}), s = e("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 = 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)]");
+//#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

@@ -0,0 +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;

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { AvatarGroupProps, AvatarProps } from "./Avatar.interface.cjs";
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { AvatarGroup };
+export default Avatar;

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { AvatarGroupProps, AvatarProps } from "./Avatar.interface.js";
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { AvatarGroup };
+export default Avatar;

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

@@ -0,0 +1,65 @@
+import type * as React from "react";
+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";
+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;
+}