zaravand-ui 6.0.0 → 7.0.0

package/dist/components/Avatar/Avatar.cjs

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

package/dist/components/Avatar/Avatar.js

@@ -3,11 +3,11 @@ import { useZuiConfig as e } from "../../config/useZuiConfig.js";
 import { localizeDigits as t } from "../../services/localizeDigits/localizeDigits.js";
 import { cn as n } from "../../lib/utils.js";
 import r from "../Button/Button.js";
-import i from "../Tooltip/Tooltip.js";
-import { showFallbackToast as a } from "../Toast/function/showToast.js";
-import { describeRejection as o, splitAcceptedFiles as s } from "../Uploader/Uploader.utils.js";
-import { avatarEditButtonVariants as c, avatarGroupOverlapBySize as l, avatarPreviewContentClassName as u, avatarStatusVariants as d, avatarVariants as f } from "./Avatar.variant.js";
-import { dialogOverlayVariants as ee } from "../Dialog/Dialog.variant.js";
+import { dialogOverlayVariants as i } from "../Dialog/Dialog.variant.js";
+import a from "../Tooltip/Tooltip.js";
+import { showFallbackToast as o } from "../Toast/function/showToast.js";
+import { describeRejection as s, splitAcceptedFiles as c } from "../Uploader/Uploader.utils.js";
+import { avatarEditButtonVariants as l, avatarGroupOverlapBySize as u, avatarPreviewContentClassName as d, avatarStatusVariants as f, avatarVariants as ee } from "./Avatar.variant.js";
 import { getInitials as p } from "./Avatar.utils.js";
 import * as m from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
@@ -15,8 +15,8 @@ import { Camera as v, ImageOff as y, Trash2 as b, User as x, X as S, ZoomIn as C
 import * as w from "@radix-ui/react-dialog";
 //#region src/components/Avatar/Avatar.tsx
 var T = m.createContext(null);
-function E({ src: t, alt: l, name: y, fallback: E, size: D, shape: O, status: k, showTooltip: ne = !1, previewable: re, previewSrc: ie, onClick: A, onImageSelect: j, onImageRemove: M, accept: N = "image/*", maxSizeKb: P, onReject: F, className: ae }, oe) {
-	let { messages: I, digits: se, dir: L } = e(), R = I.avatar, z = m.useContext(T), B = D ?? z?.size ?? "default", ce = O ?? z?.shape ?? "circle", le = z !== null, V = m.useRef(null), [H, U] = m.useState(null), [ue, W] = m.useState(!1), G = t ? H?.src === t ? H.state : "loading" : "none", K = G === "loaded", q = (re ?? !A) && K, J = !!A || q, Y = !!j, X = p(y), Z = y ?? l, de = E ?? (X ? /* @__PURE__ */ g("span", {
+function E({ src: t, alt: u, name: y, fallback: E, size: D, shape: O, status: k, showTooltip: ne = !1, previewable: re, previewSrc: ie, onClick: A, onImageSelect: j, onImageRemove: M, accept: N = "image/*", maxSizeKb: P, onReject: F, className: ae }, oe) {
+	let { messages: I, digits: se, dir: L } = e(), R = I.avatar, z = m.useContext(T), B = D ?? z?.size ?? "default", ce = O ?? z?.shape ?? "circle", le = z !== null, V = m.useRef(null), [H, U] = m.useState(null), [ue, W] = m.useState(!1), G = t ? H?.src === t ? H.state : "loading" : "none", K = G === "loaded", q = (re ?? !A) && K, J = !!A || q, Y = !!j, X = p(y), Z = y ?? u, de = E ?? (X ? /* @__PURE__ */ g("span", {
 		"aria-hidden": "true",
 		dir: "auto",
 		children: X
@@ -28,18 +28,18 @@ function E({ src: t, alt: l, name: y, fallback: E, size: D, shape: O, status: k,
 	}, Q = () => V.current?.click(), pe = (e) => {
 		let t = e.target.files?.[0];
 		if (e.target.value = "", !t) return;
-		let { accepted: n, rejected: r } = s([t], N, P);
+		let { accepted: n, rejected: r } = c([t], N, P);
 		if (r.length > 0) {
-			F ? F(r[0]) : a({
+			F ? F(r[0]) : o({
 				title: R.invalidImage,
-				message: o(r[0], P, se, I.uploader),
+				message: s(r[0], P, se, I.uploader),
 				type: "error",
 				duration: 5e3
 			}, "`onReject`");
 			return;
 		}
 		j?.(n[0]);
-	}, $ = n(f({
+	}, $ = n(ee({
 		size: B,
 		shape: ce,
 		interactive: J
@@ -47,7 +47,7 @@ function E({ src: t, alt: l, name: y, fallback: E, size: D, shape: O, status: k,
 		de,
 		t && G !== "error" ? /* @__PURE__ */ g("img", {
 			src: t,
-			alt: l ?? y ?? "",
+			alt: u ?? y ?? "",
 			loading: "lazy",
 			draggable: !1,
 			onLoad: () => U({
@@ -86,13 +86,13 @@ function E({ src: t, alt: l, name: y, fallback: E, size: D, shape: O, status: k,
 		"data-state": G,
 		className: "zui:relative zui:inline-flex zui:shrink-0 zui:align-middle",
 		children: [
-			ne && y ? /* @__PURE__ */ g(i, {
+			ne && y ? /* @__PURE__ */ g(a, {
 				text: y,
 				position: "top",
 				trigger: he
 			}) : he,
 			k ? /* @__PURE__ */ g("span", {
-				className: d({
+				className: f({
 					status: k,
 					size: B
 				}),
@@ -101,14 +101,14 @@ function E({ src: t, alt: l, name: y, fallback: E, size: D, shape: O, status: k,
 					children: R[k]
 				})
 			}) : null,
-			Y ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(i, {
+			Y ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(a, {
 				text: R.changeImage,
 				position: "bottom",
 				trigger: /* @__PURE__ */ g("button", {
 					type: "button",
 					"aria-label": R.changeImage,
 					onClick: Q,
-					className: c({ size: B }),
+					className: l({ size: B }),
 					children: /* @__PURE__ */ g(v, { "aria-hidden": "true" })
 				})
 			}), /* @__PURE__ */ g("input", {
@@ -125,19 +125,19 @@ function E({ src: t, alt: l, name: y, fallback: E, size: D, shape: O, status: k,
 				onOpenChange: W,
 				children: /* @__PURE__ */ g(w.Portal, { children: /* @__PURE__ */ g(w.Overlay, {
 					"data-slot": "avatar-preview-overlay",
-					className: ee(),
+					className: n(i(), "zui:mobile:items-center zui:mobile:p-4"),
 					children: /* @__PURE__ */ _(w.Content, {
 						"data-slot": "avatar-preview",
 						dir: L,
 						"aria-describedby": void 0,
-						className: u,
+						className: d,
 						children: [
 							/* @__PURE__ */ g(w.Close, {
 								asChild: !0,
 								children: /* @__PURE__ */ g("button", {
 									type: "button",
 									"aria-label": I.common.close,
-									className: "zui:absolute zui:-top-3 zui:-end-3 zui: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)]",
+									className: "zui:absolute zui:-top-3 zui:-end-3 zui:mobile:top-2 zui:mobile:end-2 zui:z-10 zui:inline-flex zui:size-9 zui:mobile:size-11 zui:cursor-pointer zui:items-center zui:justify-center zui:rounded-full zui:border zui:border-[var(--zui-color-border)] zui:bg-[var(--zui-color-surface)] zui:p-0 zui:text-[var(--zui-color-text)] zui:shadow-md zui:outline-none zui:transition-transform zui:duration-200 zui:hover:scale-110 zui:focus-visible:shadow-[0_0_0_2px_var(--zui-theme-action-primary)]",
 									children: /* @__PURE__ */ g(S, {
 										className: "zui:size-4",
 										"aria-hidden": "true"
@@ -147,28 +147,28 @@ function E({ src: t, alt: l, name: y, fallback: E, size: D, shape: O, status: k,
 							/* @__PURE__ */ g(te, {
 								src: ie ?? t,
 								fallbackSrc: t,
-								alt: l ?? y ?? ""
+								alt: u ?? y ?? ""
 							}),
 							/* @__PURE__ */ _("div", {
-								className: "zui:flex zui:max-w-full zui:flex-wrap zui:items-center zui:justify-center zui:gap-3 zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:px-4 zui:py-2 zui:text-[var(--zui-color-text)] zui:shadow-md",
+								className: "zui:flex zui:max-w-full zui:flex-wrap zui:items-center zui:justify-center zui:gap-3 zui:mobile:w-full zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:px-4 zui:py-2 zui:text-[var(--zui-color-text)] zui:shadow-md",
 								children: [
 									/* @__PURE__ */ g(w.Title, {
-										className: "zui:m-0 zui:text-sm zui:font-semibold",
-										children: y ?? l ?? R.imageFallbackTitle
+										className: "zui:m-0 zui:text-sm zui:mobile:w-full zui:mobile:text-center zui:mobile:text-base zui:font-semibold",
+										children: y ?? u ?? R.imageFallbackTitle
 									}),
 									Y ? /* @__PURE__ */ g(r, {
-										size: "sm",
 										variant: "secondary",
 										kind: "cancel",
 										label: R.changeImage,
+										className: "zui:mobile:flex-1",
 										icon: /* @__PURE__ */ g(v, { className: "zui:size-4" }),
 										onClick: Q
 									}) : null,
 									M ? /* @__PURE__ */ g(r, {
-										size: "sm",
 										variant: "danger",
 										kind: "cancel",
 										label: R.removeImage,
+										className: "zui:mobile:flex-1",
 										icon: /* @__PURE__ */ g(b, { className: "zui:size-4" }),
 										onClick: () => {
 											W(!1), M();
@@ -202,17 +202,17 @@ function te({ src: t, fallbackSrc: n, alt: r }) {
 		})]
 	});
 }
-function D({ items: r, children: a, max: o, size: s = "default", shape: c = "circle", showTooltip: u = !0, className: d }, ee) {
+function D({ items: r, children: i, max: o, size: s = "default", shape: c = "circle", showTooltip: l = !0, className: d }, f) {
 	let { messages: p, digits: h, dir: v } = e(), y = m.useMemo(() => ({
 		size: s,
 		shape: c
 	}), [s, c]), b = r ? r.map(({ key: e, ...t }, n) => /* @__PURE__ */ g(O, {
-		showTooltip: u,
+		showTooltip: l,
 		...t
-	}, e ?? `${t.name ?? "avatar"}-${n}`)) : m.Children.toArray(a).filter(m.isValidElement), x = o !== void 0 && o > 0 && b.length > o ? o : b.length, S = b.length - x, C = r ? r.slice(x).map((e) => e.name).filter((e) => !!e) : [], w = /* @__PURE__ */ g("span", {
+	}, e ?? `${t.name ?? "avatar"}-${n}`)) : m.Children.toArray(i).filter(m.isValidElement), x = o !== void 0 && o > 0 && b.length > o ? o : b.length, S = b.length - x, C = r ? r.slice(x).map((e) => e.name).filter((e) => !!e) : [], w = /* @__PURE__ */ g("span", {
 		role: "img",
 		"aria-label": p.avatar.othersCount(t(String(S), h)),
-		className: n(f({
+		className: n(ee({
 			size: s,
 			shape: c
 		}), "zui:ring-2 zui:ring-[var(--zui-color-surface)]"),
@@ -224,11 +224,11 @@ function D({ items: r, children: a, max: o, size: s = "default", shape: c = "cir
 	return /* @__PURE__ */ g(T.Provider, {
 		value: y,
 		children: /* @__PURE__ */ _("div", {
-			ref: ee,
+			ref: f,
 			"data-slot": "avatar-group",
 			dir: v,
-			className: n("zui:inline-flex zui:items-center zui:[&>*]:relative zui:[&>*:hover]:z-10 zui:[&>*:focus-within]:z-10", l[s], d),
-			children: [b.slice(0, x), S > 0 ? u && C.length > 0 ? /* @__PURE__ */ g(i, {
+			className: n("zui:inline-flex zui:items-center zui:[&>*]:relative zui:[&>*:hover]:z-10 zui:[&>*:focus-within]:z-10", u[s], d),
+			children: [b.slice(0, x), S > 0 ? l && C.length > 0 ? /* @__PURE__ */ g(a, {
 				text: C.join(p.avatar.listSeparator),
 				position: "top",
 				trigger: w

package/dist/components/Button/Button.cjs

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

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

@@ -1,6 +1,5 @@
 import type * as React from "react";
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "onClick"> {
-    size?: "sm" | "default" | "lg";
     variant?: "primary" | "secondary" | "danger";
     kind?: "confirm" | "cancel";
     disabled?: boolean;

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

@@ -1,6 +1,5 @@
 import type * as React from "react";
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "onClick"> {
-    size?: "sm" | "default" | "lg";
     variant?: "primary" | "secondary" | "danger";
     kind?: "confirm" | "cancel";
     disabled?: boolean;

package/dist/components/Button/Button.js

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

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

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

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

@@ -1,5 +1,4 @@
 declare const buttonVariants: (props?: ({
-    size?: "sm" | "default" | "lg" | null | undefined;
     variant?: "primary" | "secondary" | "danger" | null | undefined;
     kind?: "confirm" | "cancel" | null | undefined;
     disabled?: boolean | null | undefined;

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

@@ -1,5 +1,4 @@
 declare const buttonVariants: (props?: ({
-    size?: "sm" | "default" | "lg" | null | undefined;
     variant?: "primary" | "secondary" | "danger" | null | undefined;
     kind?: "confirm" | "cancel" | null | undefined;
     disabled?: boolean | null | undefined;

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

@@ -1,9 +1,8 @@
-import { BUTTON_PADDING_X as e, controlHeightBySize as t } from "../shared/responsiveScale.js";
+import { BUTTON_PADDING_X as e, CONTROL_HEIGHT_DEFAULT as t } from "../shared/responsiveScale.js";
 import { cva as n } from "class-variance-authority";
 //#region src/components/Button/Button.variant.ts
-var r = n(`zui-button zui:inline-flex zui:items-center zui:justify-center zui:gap-2 zui:rounded-md ${e} zui:text-sm zui:font-medium zui:leading-none zui:whitespace-nowrap zui:focus-visible:outline-none zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-color-primary)] zui:focus-visible:ring-offset-2 zui:focus-visible:ring-offset-[var(--zui-color-surface)] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-65`, {
+var r = n(`zui-button ${t} zui:inline-flex zui:items-center zui:justify-center zui:gap-2 zui:rounded-md ${e} zui:text-sm zui:font-medium zui:leading-none zui:whitespace-nowrap zui:focus-visible:outline-none zui:focus-visible:ring-2 zui:focus-visible:ring-[var(--zui-color-primary)] zui:focus-visible:ring-offset-2 zui:focus-visible:ring-offset-[var(--zui-color-surface)] zui:disabled:pointer-events-none zui:disabled:cursor-not-allowed zui:disabled:opacity-65`, {
 	variants: {
-		size: t,
 		variant: {
 			primary: "",
 			secondary: "",
@@ -55,7 +54,6 @@ var r = n(`zui-button zui:inline-flex zui:items-center zui:justify-center zui:ga
 		}
 	],
 	defaultVariants: {
-		size: "default",
 		variant: "primary",
 		kind: "confirm",
 		disabled: !1,

package/dist/components/Checkbox/Checkbox.cjs

@@ -1 +1 @@
-"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../lib/utils.cjs`),n=require(`../shared/FieldLabel.cjs`),r=require(`../shared/useInvalidState.cjs`),i=require(`../shared/useBubbleInputInvalid.cjs`),a=require(`./Checkbox.variant.cjs`);let o=require(`react`);o=e.__toESM(o,1);let s=require(`react/jsx-runtime`),c=require(`lucide-react`),l=require(`@radix-ui/react-checkbox`);l=e.__toESM(l,1);var u=o.forwardRef(function({className:e,size:u=`default`,checked:d,defaultChecked:f,onCheckedChange:p,onInvalid:m,required:h,name:g,value:_,form:v,id:y,"aria-label":b,disabled:x=!1,onClick:S,...C},w){let{isInvalid:T,setIsInvalid:E,handleInvalid:D}=r.useInvalidState(m),O=o.useRef(null),k=o.useMemo(()=>t.mergeRefs(O,w),[w]);i.useBubbleInputInvalid(O,D);let A=o.useCallback(e=>{E(!1),p?.(e)},[p,E]);return(0,s.jsxs)(l.Root,{...C,ref:k,"data-slot":`checkbox`,"aria-invalid":T||void 0,"aria-disabled":x||void 0,className:t.cn(a.checkboxVariants({size:u,disabled:x,className:e})),checked:d,defaultChecked:f,onCheckedChange:A,required:h,name:g,value:_,form:v,id:y,"aria-label":b,disabled:x,onClick:x?void 0:S,children:[(0,s.jsx)(l.Indicator,{"data-slot":`checkbox-indicator`,className:t.cn(a.checkboxIndicatorVariants({size:u})),children:(0,s.jsx)(c.CheckIcon,{})}),h?(0,s.jsx)(n.RequiredMark,{compact:!0}):null]})});exports.default=u;
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../lib/utils.cjs`),r=require(`../shared/FieldLabel.cjs`),i=require(`../shared/useInvalidState.cjs`),a=require(`../shared/useBubbleInputInvalid.cjs`),o=require(`./Checkbox.variant.cjs`);let s=require(`react`);s=e.__toESM(s,1);let c=require(`react/jsx-runtime`),l=require(`lucide-react`),u=require(`@radix-ui/react-checkbox`);u=e.__toESM(u,1);var d=s.forwardRef(function({className:e,checked:d,defaultChecked:f,onCheckedChange:p,onInvalid:m,required:h,name:g,value:_,form:v,id:y,"aria-label":b,disabled:x=!1,onClick:S,label:C,description:w,direction:T,optionClassName:E,labelClassName:D,descriptionClassName:O,...k},A){let{dir:j}=t.useZuiConfig(),M=T??j,N=s.useId(),P=!!(C||w),F=y??(P?N:void 0),{isInvalid:I,setIsInvalid:L,handleInvalid:R}=i.useInvalidState(m),z=s.useRef(null),B=s.useMemo(()=>n.mergeRefs(z,A),[A]);a.useBubbleInputInvalid(z,R);let V=s.useCallback(e=>{L(!1),p?.(e)},[p,L]),H=(0,c.jsx)(`span`,{"data-slot":`checkbox-control`,className:`zui:relative zui:inline-flex zui:shrink-0 zui:[&>input]:inset-0! zui:[&>input]:transform-none!`,children:(0,c.jsxs)(u.Root,{...k,ref:B,"data-slot":`checkbox`,"aria-invalid":I||void 0,"aria-disabled":x||void 0,className:n.cn(o.checkboxVariants({disabled:x,className:e})),checked:d,defaultChecked:f,onCheckedChange:V,required:h,name:g,value:_,form:v,id:F,"aria-label":b,disabled:x,onClick:x?void 0:S,children:[(0,c.jsx)(u.Indicator,{"data-slot":`checkbox-indicator`,className:n.cn(o.checkboxIndicatorVariants()),children:(0,c.jsx)(l.CheckIcon,{})}),h?(0,c.jsx)(r.RequiredMark,{compact:!0}):null]})});return P?(0,c.jsxs)(`label`,{htmlFor:F,"data-slot":`checkbox-option`,dir:M,className:n.cn(o.checkboxOptionVariants({direction:M,disabled:x,className:E}),I&&`zui:mobile:border-[var(--zui-theme-status-danger)]`),children:[H,(0,c.jsxs)(`span`,{className:`zui:min-w-0 zui:flex-1`,children:[C?(0,c.jsx)(`span`,{className:n.cn(o.checkboxLabelVariants({disabled:x}),D),children:C}):null,w?(0,c.jsx)(`span`,{className:n.cn(o.checkboxDescriptionVariants(),O),children:w}):null]})]}):H});exports.default=d;

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

@@ -20,5 +20,16 @@ export interface CheckboxProps extends CheckboxNativeProps, VariantProps<typeof
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** Called when a native `<form>` rejects a missing `required` value. The event targets the hidden form input. */
     onInvalid?: React.FormEventHandler<HTMLInputElement>;
+    /**
+     * Text beside the checkbox. With a `label` or `description` the checkbox sits in a bordered,
+     * fully tappable row (like a `RadioGroupItem`) whose border takes the primary colour when checked.
+     */
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Side of the row the checkbox sits on; defaults to the configured direction. */
+    direction?: "rtl" | "ltr";
+    optionClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
 }
 export {};

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

@@ -20,5 +20,16 @@ export interface CheckboxProps extends CheckboxNativeProps, VariantProps<typeof
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** Called when a native `<form>` rejects a missing `required` value. The event targets the hidden form input. */
     onInvalid?: React.FormEventHandler<HTMLInputElement>;
+    /**
+     * Text beside the checkbox. With a `label` or `description` the checkbox sits in a bordered,
+     * fully tappable row (like a `RadioGroupItem`) whose border takes the primary colour when checked.
+     */
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Side of the row the checkbox sits on; defaults to the configured direction. */
+    direction?: "rtl" | "ltr";
+    optionClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
 }
 export {};

package/dist/components/Checkbox/Checkbox.js

@@ -1,48 +1,71 @@
 "use client";
-import { cn as e, mergeRefs as t } from "../../lib/utils.js";
-import { RequiredMark as n } from "../shared/FieldLabel.js";
-import { useInvalidState as r } from "../shared/useInvalidState.js";
-import { useBubbleInputInvalid as i } from "../shared/useBubbleInputInvalid.js";
-import { checkboxIndicatorVariants as a, checkboxVariants as o } from "./Checkbox.variant.js";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { CheckIcon as u } from "lucide-react";
-import * as d from "@radix-ui/react-checkbox";
+import { useZuiConfig as e } from "../../config/useZuiConfig.js";
+import { cn as t, mergeRefs as n } from "../../lib/utils.js";
+import { RequiredMark as r } from "../shared/FieldLabel.js";
+import { useInvalidState as i } from "../shared/useInvalidState.js";
+import { useBubbleInputInvalid as a } from "../shared/useBubbleInputInvalid.js";
+import { checkboxDescriptionVariants as o, checkboxIndicatorVariants as s, checkboxLabelVariants as c, checkboxOptionVariants as l, checkboxVariants as u } from "./Checkbox.variant.js";
+import * as d from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { CheckIcon as m } from "lucide-react";
+import * as h from "@radix-ui/react-checkbox";
 //#region src/components/Checkbox/Checkbox.tsx
-var f = s.forwardRef(function({ className: f, size: p = "default", checked: m, defaultChecked: h, onCheckedChange: g, onInvalid: _, required: v, name: y, value: b, form: x, id: S, "aria-label": C, disabled: w = !1, onClick: T, ...E }, D) {
-	let { isInvalid: O, setIsInvalid: k, handleInvalid: A } = r(_), j = s.useRef(null), M = s.useMemo(() => t(j, D), [D]);
-	i(j, A);
-	let N = s.useCallback((e) => {
-		k(!1), g?.(e);
-	}, [g, k]);
-	return /* @__PURE__ */ l(d.Root, {
-		...E,
-		ref: M,
-		"data-slot": "checkbox",
-		"aria-invalid": O || void 0,
-		"aria-disabled": w || void 0,
-		className: e(o({
-			size: p,
-			disabled: w,
-			className: f
-		})),
-		checked: m,
-		defaultChecked: h,
-		onCheckedChange: N,
-		required: v,
-		name: y,
-		value: b,
-		form: x,
-		id: S,
-		"aria-label": C,
-		disabled: w,
-		onClick: w ? void 0 : T,
-		children: [/* @__PURE__ */ c(d.Indicator, {
-			"data-slot": "checkbox-indicator",
-			className: e(a({ size: p })),
-			children: /* @__PURE__ */ c(u, {})
-		}), v ? /* @__PURE__ */ c(n, { compact: !0 }) : null]
+var g = d.forwardRef(function({ className: g, checked: _, defaultChecked: v, onCheckedChange: y, onInvalid: b, required: x, name: S, value: C, form: w, id: T, "aria-label": E, disabled: D = !1, onClick: O, label: k, description: A, direction: j, optionClassName: M, labelClassName: N, descriptionClassName: P, ...F }, I) {
+	let { dir: L } = e(), R = j ?? L, z = d.useId(), B = !!(k || A), V = T ?? (B ? z : void 0), { isInvalid: H, setIsInvalid: U, handleInvalid: W } = i(b), G = d.useRef(null), K = d.useMemo(() => n(G, I), [I]);
+	a(G, W);
+	let q = d.useCallback((e) => {
+		U(!1), y?.(e);
+	}, [y, U]), J = /* @__PURE__ */ f("span", {
+		"data-slot": "checkbox-control",
+		className: "zui:relative zui:inline-flex zui:shrink-0 zui:[&>input]:inset-0! zui:[&>input]:transform-none!",
+		children: /* @__PURE__ */ p(h.Root, {
+			...F,
+			ref: K,
+			"data-slot": "checkbox",
+			"aria-invalid": H || void 0,
+			"aria-disabled": D || void 0,
+			className: t(u({
+				disabled: D,
+				className: g
+			})),
+			checked: _,
+			defaultChecked: v,
+			onCheckedChange: q,
+			required: x,
+			name: S,
+			value: C,
+			form: w,
+			id: V,
+			"aria-label": E,
+			disabled: D,
+			onClick: D ? void 0 : O,
+			children: [/* @__PURE__ */ f(h.Indicator, {
+				"data-slot": "checkbox-indicator",
+				className: t(s()),
+				children: /* @__PURE__ */ f(m, {})
+			}), x ? /* @__PURE__ */ f(r, { compact: !0 }) : null]
+		})
 	});
+	return B ? /* @__PURE__ */ p("label", {
+		htmlFor: V,
+		"data-slot": "checkbox-option",
+		dir: R,
+		className: t(l({
+			direction: R,
+			disabled: D,
+			className: M
+		}), H && "zui:mobile:border-[var(--zui-theme-status-danger)]"),
+		children: [J, /* @__PURE__ */ p("span", {
+			className: "zui:min-w-0 zui:flex-1",
+			children: [k ? /* @__PURE__ */ f("span", {
+				className: t(c({ disabled: D }), N),
+				children: k
+			}) : null, A ? /* @__PURE__ */ f("span", {
+				className: t(o(), P),
+				children: A
+			}) : null]
+		})]
+	}) : J;
 });
 //#endregion
-export { f as default };
+export { g as default };

package/dist/components/Checkbox/Checkbox.variant.cjs

@@ -1 +1 @@
-require(`../../_virtual/_rolldown/runtime.cjs`);let e=require(`class-variance-authority`);var t=(0,e.cva)(`zui:group/checkbox zui:relative zui:inline-flex zui:shrink-0 zui:items-center zui:justify-center zui-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:bg-[var(--zui-theme-control-bg)] zui:text-[var(--zui-theme-text-inverse)] zui:shadow-xs zui:cursor-pointer zui:outline-none zui:select-none zui:transition-all zui:duration-300 zui:ease-out zui:data-[state=checked]:border-[var(--zui-theme-action-primary)] zui:data-[state=checked]:bg-[var(--zui-theme-action-primary)] zui:hover:-translate-y-0.5 zui:hover:border-[var(--zui-theme-action-primary-hover)] zui:hover:bg-[var(--zui-theme-control-hover-bg)] zui:hover:shadow-[0_8px_20px_-12px_var(--zui-effect-shadow-ink-35)] zui:data-[state=checked]:hover:bg-[var(--zui-theme-action-primary-hover)] zui:active:translate-y-px zui:data-[state=checked]:active:bg-[var(--zui-theme-action-primary-active)] zui:focus-visible:border-[var(--zui-theme-action-secondary)] zui:focus-visible:ring-[3px] zui:focus-visible:ring-[var(--zui-theme-action-secondary)] zui:aria-invalid:border-[var(--zui-theme-status-danger)] zui:aria-invalid:ring-[var(--zui-theme-status-danger)] zui:disabled:cursor-not-allowed zui:disabled:pointer-events-none zui:disabled:opacity-50`,{variants:{size:{sm:`zui:size-[calc(var(--zui-scale,10px)*1.68)]`,default:`zui:size-[calc(var(--zui-scale,10px)*1.92)]`,lg:`zui:size-6`},disabled:{true:`zui:pointer-events-none zui:opacity-50`,false:``}},defaultVariants:{size:`default`,disabled:!1}}),n=(0,e.cva)(`zui:flex zui:items-center zui:justify-center zui:text-[var(--zui-theme-text-inverse)] zui:data-[state=checked]:animate-in zui:data-[state=checked]:zoom-in-95 zui:data-[state=checked]:fade-in-0`,{variants:{size:{sm:`zui:[&_svg]:size-[calc(var(--zui-scale,10px)*1.44)] zui:[&_svg]:transition-transform zui:[&_svg]:duration-200`,default:`zui:[&_svg]:size-[calc(var(--zui-scale,10px)*1.68)] zui:[&_svg]:transition-transform zui:[&_svg]:duration-200`,lg:`zui:[&_svg]:size-[calc(var(--zui-scale,10px)*1.92)] zui:[&_svg]:transition-transform zui:[&_svg]:duration-200`}},defaultVariants:{size:`default`}});exports.checkboxIndicatorVariants=n,exports.checkboxVariants=t;
+require(`../../_virtual/_rolldown/runtime.cjs`);let e=require(`class-variance-authority`);var t=(0,e.cva)(`zui:group/checkbox zui:relative zui:inline-flex zui:size-[calc(var(--zui-scale,10px)*1.92)] zui:mobile:size-[calc(var(--zui-scale,10px)*2.6)] zui:shrink-0 zui:mobile:after:absolute zui:mobile:after:inset-[calc(var(--zui-scale,10px)*-1)] zui:mobile:after:content-[''] zui:items-center zui:justify-center zui-radius-xs zui:border zui:border-[var(--zui-color-border)] zui:bg-[var(--zui-theme-control-bg)] zui:text-[var(--zui-color-surface)] zui:shadow-xs zui:cursor-pointer zui:outline-none zui:select-none zui:transition-all zui:duration-300 zui:ease-out zui:data-[state=checked]:border-[var(--zui-theme-action-primary)] zui:data-[state=checked]:bg-[var(--zui-theme-action-primary)] zui:hover:-translate-y-0.5 zui:hover:border-[var(--zui-theme-action-primary-hover)] zui:hover:bg-[var(--zui-theme-control-hover-bg)] zui:hover:shadow-[0_8px_20px_-12px_var(--zui-effect-shadow-ink-35)] zui:data-[state=checked]:hover:bg-[var(--zui-theme-action-primary-hover)] zui:active:translate-y-px zui:data-[state=checked]:active:bg-[var(--zui-theme-action-primary-active)] zui:focus-visible:border-[var(--zui-theme-action-secondary)] zui:focus-visible:ring-[3px] zui:focus-visible:ring-[var(--zui-theme-action-secondary)] zui:aria-invalid:border-[var(--zui-theme-status-danger)] zui:aria-invalid:ring-[var(--zui-theme-status-danger)] zui:disabled:cursor-not-allowed zui:disabled:pointer-events-none zui:disabled:opacity-50`,{variants:{disabled:{true:`zui:pointer-events-none zui:opacity-50`,false:``}},defaultVariants:{disabled:!1}}),n=(0,e.cva)(`zui:flex zui:items-center zui:justify-center zui:text-[var(--zui-color-surface)] zui:data-[state=checked]:animate-in zui:data-[state=checked]:zoom-in-95 zui:data-[state=checked]:fade-in-0 zui:[&_svg]:size-[calc(var(--zui-scale,10px)*1.68)] zui:mobile:[&_svg]:size-[calc(var(--zui-scale,10px)*2.3)] zui:[&_svg]:transition-transform zui:[&_svg]:duration-200`),r=(0,e.cva)(`zui:inline-flex zui:w-full zui:items-start zui:justify-between zui:gap-2.5 zui:mobile:min-h-[calc(var(--zui-scale,10px)*5.184)] zui:mobile:items-center zui-radius-xs zui:mobile:border-solid zui:mobile:border-[max(1px,calc(var(--zui-scale,10px)*0.15))] zui:mobile:border-[var(--zui-color-border)] zui:mobile:bg-[var(--zui-color-surface)] zui:mobile:px-3 zui:mobile:py-2 zui:transition-colors zui:duration-200 zui:mobile:has-[[data-state=checked]]:border-[var(--zui-theme-action-primary)]`,{variants:{direction:{rtl:`zui:flex-row-reverse zui:text-right`,ltr:`zui:flex-row zui:text-left`},disabled:{true:`zui:cursor-not-allowed zui:opacity-60`,false:`zui:cursor-pointer`}},defaultVariants:{direction:`rtl`,disabled:!1}}),i=(0,e.cva)(`zui:block zui:text-sm zui:mobile:text-base zui:font-medium zui:leading-5 zui:mobile:leading-6 zui:text-[var(--zui-color-text)]`,{variants:{disabled:{true:`zui:text-[var(--zui-theme-text-muted)]`,false:``}},defaultVariants:{disabled:!1}}),a=(0,e.cva)(`zui:mt-0.5 zui:block zui:text-xs zui:mobile:text-sm zui:text-[var(--zui-color-text)]`);exports.checkboxDescriptionVariants=a,exports.checkboxIndicatorVariants=n,exports.checkboxLabelVariants=i,exports.checkboxOptionVariants=r,exports.checkboxVariants=t;