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

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,103 @@
+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;
+    /**
+     * On phones the search and "+" button stay pinned to the top while the items scroll: they slide
+     * away when the user scrolls down and come back as soon as they scroll up. Set to `false` to let
+     * them scroll away with the page. Pin them below a fixed header of your own with the CSS variable
+     * `--zui-table-sticky-top` (e.g. `56px`). No effect on larger screens.
+     * @default true
+     */
+    stickyToolbar?: boolean;
+    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.interface.d.ts

@@ -72,6 +72,14 @@ export interface AccordionProps {
     onContentItemEdit?: AccordionContentItemEditHandler;
     /** Called when a content-list row's delete icon (`AccordionContentItem.isDelete`) is clicked. */
     onContentItemDelete?: AccordionContentItemDeleteHandler;
+    /**
+     * On phones the search and "+" button stay pinned to the top while the items scroll: they slide
+     * away when the user scrolls down and come back as soon as they scroll up. Set to `false` to let
+     * them scroll away with the page. Pin them below a fixed header of your own with the CSS variable
+     * `--zui-table-sticky-top` (e.g. `56px`). No effect on larger screens.
+     * @default true
+     */
+    stickyToolbar?: boolean;
     className?: string;
     children?: React.ReactNode;
 }

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,361 @@
+"use client";
+import { useZuiConfig as e } from "../../config/useZuiConfig.js";
+import { cn as t } from "../../lib/utils.js";
+import n from "../shared/ActionSheet.js";
+import { CLEAR_ICON_CLASS as r } from "../shared/FieldClearButton.js";
+import { IconActionButton as i, ListToolbar as a, ToolbarIconButton as o } from "../shared/IconActionButton.js";
+import { useControllableState as s } from "../shared/useControllableState.js";
+import { useExclusiveAction as c } from "../shared/useExclusiveAction.js";
+import { useStickyToolbar as l } from "../shared/useStickyToolbar.js";
+import { useIsMobileViewport as u } from "../shared/viewport.js";
+import { accordionActionButtonVariants as d, accordionContentActionButtonVariants as f, accordionContentListRowVariants as ee, accordionContentListVariants as te, accordionContentVariants as p, accordionEmptyStateVariants as ne, accordionItemVariants as m, accordionTriggerActionsVariants as h, accordionTriggerRowVariants as g, accordionTriggerVariants as _, accordionVariants as re } from "./Accordion.variant.js";
+import * as v from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { ChevronDown as S, EllipsisVertical as C, Pencil as w, Plus as ie, Trash2 as T } from "lucide-react";
+//#region src/components/Accordion/Accordion.tsx
+var E = "zui:size-4", D = v.createContext(null);
+function O(e) {
+	let t = v.useContext(D);
+	if (!t) throw Error(`${e} must be used within an <Accordion> component`);
+	return t;
+}
+var k = v.createContext(null);
+function A(e) {
+	let t = v.useContext(k);
+	if (!t) throw Error(`${e} must be used within an <AccordionItem> component`);
+	return t;
+}
+function j(e) {
+	return e === void 0 ? [] : Array.isArray(e) ? e : [e];
+}
+function M(e) {
+	return typeof e == "string" || typeof e == "number" ? String(e) : "";
+}
+function ae(e) {
+	return `${M(e.title)} ${Array.isArray(e.content) ? e.content.map((e) => M(e.label)).join(" ") : M(e.content)}`.toLocaleLowerCase();
+}
+var N = v.forwardRef(function({ type: p = "single", value: m, defaultValue: h, onValueChange: g, collapsible: _ = !1, dir: S, items: O, searchable: k = !1, onAdd: A, onEdit: M, onDelete: N, onContentItemEdit: P, onContentItemDelete: F, stickyToolbar: I = !0, className: le, children: ue }, de) {
+	let { messages: L, dir: fe } = e(), R = S ?? fe, [z, B] = s({
+		value: v.useMemo(() => m === void 0 ? void 0 : j(m), [m]),
+		defaultValue: () => j(h)
+	}), [V, H] = c(), U = u(), [W, pe] = v.useState({
+		open: !1,
+		actions: []
+	}), G = (e) => pe({
+		open: !0,
+		actions: e
+	}), [K, me] = v.useState(""), q = k && Array.isArray(O), J = typeof A == "function", Y = q || J, he = v.useRef(null), ge = v.useRef(null);
+	l(he, ge, U && I && Y);
+	let X = K.trim().toLocaleLowerCase(), Z = v.useMemo(() => {
+		if (!O) return;
+		let e = O.map((e, t) => ({
+			item: e,
+			originalIndex: t
+		}));
+		return !q || X.length === 0 ? e : e.filter(({ item: e }) => ae(e).includes(X));
+	}, [
+		O,
+		X,
+		q
+	]), Q = v.useCallback((e) => {
+		B(e), p === "multiple" ? g?.(e) : g?.(e[0] ?? "");
+	}, [
+		g,
+		B,
+		p
+	]), _e = v.useCallback((e) => {
+		let t = z.includes(e);
+		if (p === "multiple") {
+			Q(t ? z.filter((t) => t !== e) : [...z, e]);
+			return;
+		}
+		if (t) {
+			Q(_ ? [] : z);
+			return;
+		}
+		Q([e]);
+	}, [
+		_,
+		Q,
+		z,
+		p
+	]), ve = v.useCallback(async () => {
+		A && await H(A);
+	}, [A, H]), ye = v.useCallback(async (e, t) => {
+		M && await H(() => M({
+			item: e,
+			index: t
+		}));
+	}, [M, H]), be = v.useCallback(async (e, t) => {
+		N && await H(() => N({
+			item: e,
+			index: t
+		}));
+	}, [N, H]), xe = v.useCallback(async (e, t, n, r) => {
+		P && await H(() => P({
+			item: e,
+			itemIndex: t,
+			contentItem: n,
+			contentIndex: r
+		}));
+	}, [P, H]), $ = v.useCallback(async (e, t, n, r) => {
+		F && await H(() => F({
+			item: e,
+			itemIndex: t,
+			contentItem: n,
+			contentIndex: r
+		}));
+	}, [F, H]), Se = v.useMemo(() => ({
+		openValues: z,
+		toggleValue: _e,
+		dir: R,
+		type: p
+	}), [
+		z,
+		_e,
+		R,
+		p
+	]);
+	return /* @__PURE__ */ b(D.Provider, {
+		value: Se,
+		children: /* @__PURE__ */ x("div", {
+			ref: de,
+			dir: R,
+			"data-slot": "accordion",
+			className: t(re(), le),
+			children: [
+				Y ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
+					ref: ge,
+					"aria-hidden": "true",
+					"data-slot": "accordion-sticky-sentinel",
+					className: "zui:-mb-2"
+				}), /* @__PURE__ */ b("div", {
+					ref: he,
+					"data-slot": "accordion-sticky-toolbar",
+					"data-sticky-toolbar": U && I ? "true" : void 0,
+					className: "zui:mb-2",
+					children: /* @__PURE__ */ b(a, {
+						"data-slot": "accordion-controls",
+						searchSlot: "accordion-search-input",
+						actionsSlot: "accordion-actions",
+						inlineActionsOnMobile: J,
+						search: q ? {
+							value: K,
+							onChange: (e) => me(e.target.value),
+							placeholder: L.common.searchPlaceholder,
+							ariaLabel: L.accordion.searchAriaLabel
+						} : void 0,
+						actions: J ? /* @__PURE__ */ b(o, {
+							"data-slot": "accordion-action-add-button",
+							label: L.common.add,
+							disabled: V,
+							onClick: () => void ve(),
+							icon: /* @__PURE__ */ b(ie, {})
+						}) : void 0
+					})
+				})] }) : null,
+				Z && q && Z.length === 0 ? /* @__PURE__ */ b("div", {
+					"data-slot": "accordion-empty-state",
+					className: ne(),
+					children: L.accordion.noSearchResults
+				}) : null,
+				Z ? Z.map(({ item: e, originalIndex: t }) => {
+					let n = e.isEdit && typeof M == "function", a = e.isDelete && typeof N == "function", o = n || a, s = (e) => /* @__PURE__ */ b(e, {
+						className: r,
+						"aria-hidden": "true"
+					}), c = [...n ? [{
+						key: "edit",
+						label: L.common.edit,
+						icon: s(w),
+						onSelect: () => void ye(e, t)
+					}] : [], ...a ? [{
+						key: "delete",
+						label: L.common.delete,
+						icon: s(T),
+						danger: !0,
+						onSelect: () => void be(e, t)
+					}] : []], l = U && c.length > 1 ? /* @__PURE__ */ b(i, {
+						"data-slot": "accordion-action-menu-button",
+						label: L.accordion.actions,
+						icon: /* @__PURE__ */ b(C, {
+							className: E,
+							"aria-hidden": "true"
+						}),
+						disabled: V,
+						className: d({ tone: "edit" }),
+						onClick: () => G(c)
+					}) : o ? /* @__PURE__ */ x(y, { children: [n ? /* @__PURE__ */ b(i, {
+						"data-slot": "accordion-action-edit-button",
+						label: L.common.edit,
+						icon: /* @__PURE__ */ b(w, {
+							className: E,
+							"aria-hidden": "true"
+						}),
+						disabled: V,
+						className: d({ tone: "edit" }),
+						onClick: () => void ye(e, t)
+					}) : null, a ? /* @__PURE__ */ b(i, {
+						"data-slot": "accordion-action-delete-button",
+						label: L.common.delete,
+						icon: /* @__PURE__ */ b(T, {
+							className: E,
+							"aria-hidden": "true"
+						}),
+						disabled: V,
+						className: d({ tone: "delete" }),
+						onClick: () => void be(e, t)
+					}) : null] }) : void 0, u = Array.isArray(e.content) ? /* @__PURE__ */ b("div", {
+						"data-slot": "accordion-content-list",
+						className: te(),
+						children: e.content.map((n, r) => {
+							let a = n.isEdit && typeof P == "function", o = n.isDelete && typeof F == "function", c = [...a ? [{
+								key: "edit",
+								label: L.common.edit,
+								icon: s(w),
+								onSelect: () => void xe(e, t, n, r)
+							}] : [], ...o ? [{
+								key: "delete",
+								label: L.common.delete,
+								icon: s(T),
+								danger: !0,
+								onSelect: () => void $(e, t, n, r)
+							}] : []], l = U && c.length > 1;
+							return /* @__PURE__ */ x("div", {
+								"data-slot": "accordion-content-list-row",
+								className: ee(),
+								children: [
+									/* @__PURE__ */ b("span", {
+										className: "zui:min-w-0 zui:flex-1 zui:text-start",
+										children: n.label
+									}),
+									l ? /* @__PURE__ */ b(i, {
+										"data-slot": "accordion-content-item-menu-button",
+										label: L.accordion.actions,
+										icon: /* @__PURE__ */ b(C, {
+											className: E,
+											"aria-hidden": "true"
+										}),
+										disabled: V,
+										className: f({ tone: "edit" }),
+										onClick: () => G(c)
+									}) : null,
+									!l && a ? /* @__PURE__ */ b(i, {
+										"data-slot": "accordion-content-item-edit-button",
+										label: L.common.edit,
+										icon: /* @__PURE__ */ b(w, {
+											className: E,
+											"aria-hidden": "true"
+										}),
+										disabled: V,
+										className: f({ tone: "edit" }),
+										onClick: () => void xe(e, t, n, r)
+									}) : null,
+									!l && o ? /* @__PURE__ */ b(i, {
+										"data-slot": "accordion-content-item-delete-button",
+										label: L.common.delete,
+										icon: /* @__PURE__ */ b(T, {
+											className: E,
+											"aria-hidden": "true"
+										}),
+										disabled: V,
+										className: f({ tone: "delete" }),
+										onClick: () => void $(e, t, n, r)
+									}) : null
+								]
+							}, n.value);
+						})
+					}) : e.content;
+					return /* @__PURE__ */ x(oe, {
+						value: e.value,
+						disabled: e.disabled,
+						children: [/* @__PURE__ */ b(se, {
+							icon: e.icon,
+							actions: l,
+							children: e.title
+						}), /* @__PURE__ */ b(ce, { children: u })]
+					}, e.value);
+				}) : ue,
+				U ? /* @__PURE__ */ b(n, {
+					open: W.open,
+					onOpenChange: (e) => pe((t) => ({
+						...t,
+						open: e
+					})),
+					actions: W.actions,
+					label: L.accordion.actions
+				}) : null
+			]
+		})
+	});
+}), oe = v.forwardRef(function({ value: e, disabled: n = !1, className: r, children: i }, a) {
+	let { openValues: o } = O("AccordionItem"), s = o.includes(e), c = v.useId(), l = `accordion-trigger-${c}`, u = `accordion-content-${c}`, d = v.useMemo(() => ({
+		value: e,
+		isOpen: s,
+		disabled: n,
+		triggerId: l,
+		contentId: u
+	}), [
+		e,
+		s,
+		n,
+		l,
+		u
+	]);
+	return /* @__PURE__ */ b(k.Provider, {
+		value: d,
+		children: /* @__PURE__ */ b("div", {
+			ref: a,
+			"data-slot": "accordion-item",
+			"data-state": s ? "open" : "closed",
+			"data-disabled": n ? "" : void 0,
+			className: t(m(), r),
+			children: i
+		})
+	});
+}), se = v.forwardRef(function({ icon: e, actions: n, className: r, children: i }, a) {
+	let { toggleValue: o } = O("AccordionTrigger"), { value: s, isOpen: c, disabled: l, triggerId: u, contentId: d } = A("AccordionTrigger");
+	return /* @__PURE__ */ x("div", {
+		"data-slot": "accordion-trigger-row",
+		className: g(),
+		children: [/* @__PURE__ */ x("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(_(), r),
+			children: [/* @__PURE__ */ b("span", {
+				className: "zui:flex-1 zui:text-start",
+				children: i
+			}), e ?? /* @__PURE__ */ b(S, {
+				"aria-hidden": "true",
+				className: t("zui:size-4 zui:shrink-0 zui:text-[var(--zui-color-text)] zui:transition-transform zui:duration-200 zui:ease-out", c ? "zui:rotate-180" : "zui:rotate-0")
+			})]
+		}), n ? /* @__PURE__ */ b("div", {
+			"data-slot": "accordion-trigger-actions",
+			className: h(),
+			children: n
+		}) : null]
+	});
+}), ce = v.forwardRef(function({ forceMount: e, className: n, children: r }, i) {
+	let { isOpen: a, triggerId: o, contentId: s } = A("AccordionContent");
+	return !e && !a ? null : /* @__PURE__ */ b("div", {
+		ref: i,
+		role: "region",
+		id: s,
+		"aria-labelledby": o,
+		"data-slot": "accordion-content",
+		"data-state": a ? "open" : "closed",
+		hidden: e ? !a : void 0,
+		className: t(p(), n),
+		children: r
+	});
+});
+//#endregion
+export { ce as AccordionContent, oe as AccordionItem, se as AccordionTrigger, N 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-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:transition-colors zui:duration-200 zui:ease-out`),r=(0,e.cva)(`zui:flex zui:w-full zui:items-center zui:gap-1`),i=(0,e.cva)(`zui:group/accordion-trigger zui:flex zui:min-w-0 zui:flex-1 zui:cursor-pointer zui:select-none zui:items-center zui:justify-between zui:gap-2 zui:min-h-[calc(var(--zui-scale,10px)*5.184)] zui:px-4 zui:py-3 zui:text-start zui:text-sm zui:mobile:text-base zui:font-medium zui:leading-none zui:text-[var(--zui-color-text)] zui:outline-none zui:transition-colors zui:duration-200 zui:ease-out zui:hover:bg-[color-mix(in_srgb,var(--zui-color-primary)_12%,transparent)] zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-color-primary)] zui:focus-visible:ring-offset-1 zui:focus-visible:ring-offset-[var(--zui-color-surface)] zui:disabled:pointer-events-none zui:disabled:opacity-50`),a=(0,e.cva)(`zui:flex zui:shrink-0 zui:items-center zui:gap-1 zui:ps-1 zui:pe-4`),o=(0,e.cva)(`zui:inline-flex zui:size-8 zui:mobile:size-10 zui:shrink-0 zui:cursor-pointer zui:items-center zui:justify-center zui-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:bg-transparent zui:transition-colors zui:duration-200 zui:ease-out zui:hover:bg-[var(--zui-theme-bg-muted)] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-45`,{variants:{tone:{edit:`zui:text-[var(--zui-color-text)]`,delete:`zui:text-[var(--zui-color-danger)]`}},defaultVariants:{tone:`edit`}}),s=(0,e.cva)(`zui:inline-flex zui:size-7 zui:shrink-0 zui:cursor-pointer zui:items-center zui:justify-center zui:bg-transparent zui:transition-transform zui:duration-200 zui:ease-out zui:hover:scale-[1.2] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-45`,{variants:{tone:{edit:`zui:text-[var(--zui-color-text)]`,delete:`zui:text-[var(--zui-color-danger)]`}},defaultVariants:{tone:`edit`}}),c=(0,e.cva)(`zui:mx-4 zui:mb-3 zui:border-s-2 zui:border-[var(--zui-color-border)] zui:ps-4 zui:pt-1 zui:text-sm zui:mobile:text-base zui:leading-relaxed zui:text-[var(--zui-color-text)]`),l=(0,e.cva)(`zui:flex zui:flex-col zui:divide-y zui:divide-[var(--zui-color-border)]`),u=(0,e.cva)(`zui:flex zui:items-center zui:gap-2 zui:py-2`),d=(0,e.cva)(`zui-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:px-4 zui:py-7 zui:text-center zui:text-sm zui:mobile:text-base zui:text-[var(--zui-color-text)]`);exports.accordionActionButtonVariants=o,exports.accordionContentActionButtonVariants=s,exports.accordionContentListRowVariants=u,exports.accordionContentListVariants=l,exports.accordionContentVariants=c,exports.accordionEmptyStateVariants=d,exports.accordionItemVariants=n,exports.accordionTriggerActionsVariants=a,exports.accordionTriggerRowVariants=r,exports.accordionTriggerVariants=i,exports.accordionVariants=t;

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

package/dist/components/Avatar/Avatar.cjs

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

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

@@ -1,5 +1,6 @@
-import type { AvatarGroupProps, AvatarProps } from "./Avatar.interface";
-declare function Avatar({ src, alt, name, fallback, size: sizeProp, shape: shapeProp, status, showTooltip, previewable, previewSrc, onClick, onImageSelect, onImageRemove, accept, maxSizeKb, onReject, className, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
-declare function AvatarGroup({ items, children, max, size, shape, showTooltip, className, }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
+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;