@sito/ui 0.3.2 → 0.3.3

package/dist/components/Dialog/types.d.ts

@@ -28,6 +28,9 @@ type DialogBaseProps = {
     mobileFullScreen?: boolean;
     containerClassName?: string;
     className?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    closeButtonClassName?: string;
     closeLabel?: string;
     closeIcon?: ReactNode;
     showCloseButton?: boolean;

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

@@ -17,3 +17,19 @@ export declare const getFocusableElements: (element: HTMLElement) => HTMLElement
  * @returns Active HTMLElement, or null when unavailable.
  */
 export declare const getActiveElement: () => HTMLElement | null;
+/**
+ * Registers an interactive dialog as the topmost dialog.
+ * @param dialogStackId Stable internal identifier for the dialog instance.
+ */
+export declare const registerDialog: (dialogStackId: symbol) => void;
+/**
+ * Removes a dialog from the interactive dialog stack.
+ * @param dialogStackId Stable internal identifier for the dialog instance.
+ */
+export declare const unregisterDialog: (dialogStackId: symbol) => void;
+/**
+ * Checks whether a dialog is currently the topmost interactive dialog.
+ * @param dialogStackId Stable internal identifier for the dialog instance.
+ * @returns Whether the dialog is at the top of the stack.
+ */
+export declare const isTopmostDialog: (dialogStackId: symbol) => boolean;

package/dist/ui.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime"),n=require("react-dom");var r=(...e)=>e.filter(Boolean).join(` `),i={DEFAULT:`default`,PRIMARY:`primary`,SECONDARY:`secondary`,ERROR:`error`,WARNING:`warning`,SUCCESS:`success`,INFO:`info`},a={TEXT:`text`,SUBMIT:`submit`,OUTLINED:`outlined`},o={SM:`sm`,MD:`md`,LG:`lg`},s=(0,e.forwardRef)(function(e,n){let{color:s=i.DEFAULT,size:c=o.MD,type:l=`button`,variant:u=a.TEXT,loading:d=!1,loadingIndicator:f,loadingLabel:p=`Loading`,disabled:m,className:h,children:g,..._}=e,v=r(`sito-ui-button`,`sito-ui-button--${u}`,`sito-ui-button--${s}`,`sito-ui-button--${c}`,d&&`sito-ui-button--loading`,h),y=f===void 0?(0,t.jsx)(`span`,{className:`sito-ui-button__spinner`,"aria-hidden":`true`,"data-sito-ui":`button-spinner`}):f;return(0,t.jsxs)(`button`,{"data-sito-ui":`button`,..._,type:l,ref:n,disabled:m||d,"aria-busy":d||_[`aria-busy`],className:v,children:[d?(0,t.jsxs)(t.Fragment,{children:[y,(0,t.jsx)(`span`,{className:`sito-ui-button__loading-label`,children:p})]}):null,g]})}),c={SM:`sm`,MD:`md`,LG:`lg`},l=e=>{if(e!==void 0)return typeof e==`number`?`${e}px`:e},u=(0,e.forwardRef)(function(e,n){let{children:i,icon:a,iconClassName:o,type:u=`button`,variant:d=`text`,color:f=`default`,loading:p=!1,size:m=c.MD,iconSize:h,className:g,style:_,...v}=e,y=i!=null&&typeof i!=`boolean`,b=l(h),x=b===void 0?_:{..._,"--sito-ui-icon-button-icon-size":b},S=r(`sito-ui-icon-button`,`sito-ui-icon-button--${m}`,y&&`sito-ui-icon-button--with-content`,g);return(0,t.jsxs)(s,{...v,ref:n,type:u,variant:d,color:f,size:m,loading:p,"data-sito-ui":`icon-button`,className:S,style:x,children:[p?null:(0,t.jsx)(`span`,{className:r(`sito-ui-icon-button__icon`,o),"aria-hidden":`true`,children:a}),i]})}),d=`input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])`,f=`button[type="submit"]:not([disabled]), input[type="submit"]:not([disabled])`,p=[`a[href]`,`button:not([disabled])`,`textarea:not([disabled])`,`input:not([disabled])`,`select:not([disabled])`,`[tabindex]:not([tabindex="-1"])`].join(`,`),m=0,h=null,g=()=>typeof document<`u`&&!!document.body,_=()=>{g()&&(m===0&&(h=document.body.style.overflow,document.body.style.overflow=`hidden`),m+=1)},v=()=>{!g()||m===0||(--m,m===0&&(document.body.style.overflow=h??``,h=null))},y=e=>Array.from(e.querySelectorAll(p)).filter(e=>e.getAttribute(`aria-disabled`)!==`true`),b=()=>typeof document>`u`?null:document.activeElement instanceof HTMLElement?document.activeElement:null,x=typeof window>`u`?e.useEffect:e.useLayoutEffect,S=i=>{let a=(0,e.useId)(),o=(0,e.useRef)(null),s=(0,e.useRef)(null),c=(0,e.useRef)(null),l=(0,e.useRef)(void 0),{dialogId:p,title:m,ariaLabel:h,children:g,onClose:S,initialFocus:C=`none`,closeOnBackdropClick:w=!1,closeOnEscape:T=!0,lockBodyScroll:E=!0,onSubmit:D,open:O=!1,mobileFullScreen:k=!1,containerClassName:A,className:j,closeLabel:M=`Close dialog`,closeIcon:N=`x`,showCloseButton:P=!0,portalContainer:F,exitDurationMs:I=0,onExitComplete:L}=i,[R,z]=(0,e.useState)(O),[B,V]=(0,e.useState)(!1),H=m?`${p??a}-title`:void 0,U=B?`closing`:`open`,W=O&&!B;(0,e.useEffect)(()=>{l.current=L},[L]);let G=(0,e.useCallback)(()=>{c.current!==null&&(window.clearTimeout(c.current),c.current=null)},[]),K=(0,e.useCallback)(()=>{z(!1),V(!1),l.current?.(),c.current=null},[]);x(()=>{if(O){G(),z(!0),V(!1);return}if(!R)return;let e=Math.max(0,I);if(e===0){G(),K();return}V(!0),G(),c.current=window.setTimeout(K,e)},[G,I,K,O,R]),(0,e.useEffect)(()=>()=>{G()},[G]);let q=(0,e.useCallback)(e=>{if(e.key===`Escape`&&W&&T){S();return}if(e.key!==`Tab`||!W)return;let t=o.current;if(!t)return;let n=y(t);if(n.length===0){e.preventDefault(),t.focus();return}let r=n[0],i=n[n.length-1],a=b(),s=!a||!t.contains(a);if(e.shiftKey&&(s||a===r)){e.preventDefault(),i.focus();return}!e.shiftKey&&(s||a===i)&&(e.preventDefault(),r.focus())},[T,W,S]);(0,e.useEffect)(()=>{if(!(!W||typeof window>`u`))return window.addEventListener(`keydown`,q),()=>{window.removeEventListener(`keydown`,q)}},[q,W]),x(()=>{if(O)return s.current=b(),()=>{s.current?.isConnected&&s.current.focus(),s.current=null}},[O]),x(()=>{if(!O)return;let e=o.current;if(e){if(C===`first-input`){let t=e.querySelector(d);if(t){t.focus();return}}if(C===`submit`){let t=e.querySelector(f);if(t){t.focus();return}}e.focus()}},[C,O]),(0,e.useEffect)(()=>{if(!(!R||!E))return _(),()=>{v()}},[E,R]);let J=(0,e.useCallback)(e=>{W&&w&&e.target===e.currentTarget&&S()},[w,W,S]),Y=(0,e.useCallback)(e=>{e.preventDefault(),D?.(e)},[D]);if(!R||typeof document>`u`)return null;let X=D?(0,t.jsx)(`form`,{onSubmit:Y,children:g}):g,Z=typeof N==`string`?(0,t.jsx)(`span`,{"aria-hidden":`true`,children:N}):N;return(0,n.createPortal)((0,t.jsx)(`div`,{id:p?`backdrop-${p}`:void 0,"data-sito-ui":`dialog-backdrop`,"data-state":U,onClick:J,className:r(`sito-ui-dialog-backdrop`,`sito-ui-dialog-backdrop--${U}`,A),children:(0,t.jsxs)(`div`,{id:p,ref:o,role:`dialog`,"aria-modal":`true`,"aria-label":m?void 0:h,"aria-labelledby":H,tabIndex:-1,"data-sito-ui":`dialog`,"data-state":U,className:r(`sito-ui-dialog`,`sito-ui-dialog--${U}`,k&&`sito-ui-dialog--mobile-full-screen`,j),children:[(0,t.jsxs)(`div`,{className:`sito-ui-dialog__header`,children:[m?(0,t.jsx)(`h3`,{id:H,className:`sito-ui-dialog__title`,children:m}):null,P?(0,t.jsx)(u,{icon:Z,disabled:!W,"aria-disabled":!W,onClick:S,variant:`text`,color:`error`,className:`sito-ui-dialog__close`,"aria-label":M}):null]}),X]})}),F??document.body)},C=e=>{let{primaryText:n,cancelText:i,onPrimaryClick:a,onCancel:o,isLoading:c=!1,loadingIndicator:l,disabled:u=!1,primaryType:d=`submit`,containerClassName:f,primaryClassName:p,cancelClassName:m,alignEnd:h=!1,primaryName:g,primaryAriaLabel:_,cancelName:v,cancelAriaLabel:y,extraActions:b=[]}=e;return(0,t.jsxs)(`div`,{"data-sito-ui":`dialog-actions`,className:r(`sito-ui-dialog-actions`,h&&`sito-ui-dialog-actions--end`,f),children:[(0,t.jsx)(s,{type:d,color:`primary`,variant:`submit`,className:p,disabled:u,loading:c,loadingIndicator:l,onClick:a,name:g,"aria-label":_,children:n}),b.map(({id:e,...n})=>(0,t.jsx)(s,{...n},e)),(0,t.jsx)(s,{type:`button`,variant:`outlined`,className:m,disabled:u||c,onClick:o,name:v,"aria-label":y,children:i})]})},w=(t=!1)=>{let[n,r]=(0,e.useState)(t);return{open:n,setOpen:r,handleClose:()=>r(!1),handleOpen:()=>r(!0)}};exports.Button=s,exports.Dialog=S,exports.DialogActions=C,exports.IconButton=u,exports.useDialog=w;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime"),n=require("react-dom");var r=(...e)=>e.filter(Boolean).join(` `),i={DEFAULT:`default`,PRIMARY:`primary`,SECONDARY:`secondary`,ERROR:`error`,WARNING:`warning`,SUCCESS:`success`,INFO:`info`},a={TEXT:`text`,SUBMIT:`submit`,OUTLINED:`outlined`},o={SM:`sm`,MD:`md`,LG:`lg`},s=(0,e.forwardRef)(function(e,n){let{color:s=i.DEFAULT,size:c=o.MD,type:l=`button`,variant:u=a.TEXT,loading:d=!1,loadingIndicator:f,loadingLabel:p=`Loading`,disabled:m,className:h,children:g,..._}=e,v=r(`sito-ui-button`,`sito-ui-button--${u}`,`sito-ui-button--${s}`,`sito-ui-button--${c}`,d&&`sito-ui-button--loading`,h),y=f===void 0?(0,t.jsx)(`span`,{className:`sito-ui-button__spinner`,"aria-hidden":`true`,"data-sito-ui":`button-spinner`}):f;return(0,t.jsxs)(`button`,{"data-sito-ui":`button`,..._,type:l,ref:n,disabled:m||d,"aria-busy":d||_[`aria-busy`],className:v,children:[d?(0,t.jsxs)(t.Fragment,{children:[y,(0,t.jsx)(`span`,{className:`sito-ui-button__loading-label`,children:p})]}):null,g]})}),c={SM:`sm`,MD:`md`,LG:`lg`},l=e=>{if(e!==void 0)return typeof e==`number`?`${e}px`:e},u=(0,e.forwardRef)(function(e,n){let{children:i,icon:a,iconClassName:o,type:u=`button`,variant:d=`text`,color:f=`default`,loading:p=!1,size:m=c.MD,iconSize:h,className:g,style:_,...v}=e,y=i!=null&&typeof i!=`boolean`,b=l(h),x=b===void 0?_:{..._,"--sito-ui-icon-button-icon-size":b},S=r(`sito-ui-icon-button`,`sito-ui-icon-button--${m}`,y&&`sito-ui-icon-button--with-content`,g);return(0,t.jsxs)(s,{...v,ref:n,type:u,variant:d,color:f,size:m,loading:p,"data-sito-ui":`icon-button`,className:S,style:x,children:[p?null:(0,t.jsx)(`span`,{className:r(`sito-ui-icon-button__icon`,o),"aria-hidden":`true`,children:a}),i]})}),d=`input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])`,f=`button[type="submit"]:not([disabled]), input[type="submit"]:not([disabled])`,p=[`a[href]`,`button:not([disabled])`,`textarea:not([disabled])`,`input:not([disabled])`,`select:not([disabled])`,`[tabindex]:not([tabindex="-1"])`].join(`,`),m=0,h=null,g=[],_=()=>typeof document<`u`&&!!document.body,v=()=>{_()&&(m===0&&(h=document.body.style.overflow,document.body.style.overflow=`hidden`),m+=1)},y=()=>{!_()||m===0||(--m,m===0&&(document.body.style.overflow=h??``,h=null))},b=e=>Array.from(e.querySelectorAll(p)).filter(e=>e.getAttribute(`aria-disabled`)!==`true`),x=()=>typeof document>`u`?null:document.activeElement instanceof HTMLElement?document.activeElement:null,S=e=>{let t=g.indexOf(e);t>=0&&g.splice(t,1),g.push(e)},ee=e=>{let t=g.indexOf(e);t>=0&&g.splice(t,1)},C=e=>g[g.length-1]===e,w=typeof window>`u`?e.useEffect:e.useLayoutEffect,T=i=>{let a=(0,e.useId)(),o=(0,e.useRef)(Symbol(`sito-ui-dialog`)),s=(0,e.useRef)(null),c=(0,e.useRef)(null),l=(0,e.useRef)(null),p=(0,e.useRef)(void 0),{dialogId:m,title:h,ariaLabel:g,children:_,onClose:T,initialFocus:E=`none`,closeOnBackdropClick:D=!1,closeOnEscape:O=!0,lockBodyScroll:k=!0,onSubmit:A,open:j=!1,mobileFullScreen:M=!1,containerClassName:N,className:P,headerClassName:F,titleClassName:I,closeButtonClassName:L,closeLabel:R=`Close dialog`,closeIcon:z=`x`,showCloseButton:B=!0,portalContainer:te,exitDurationMs:V=0,onExitComplete:H}=i,[U,W]=(0,e.useState)(j),[G,K]=(0,e.useState)(!1),q=h?`${m??a}-title`:void 0,J=G?`closing`:`open`,Y=j&&!G,X=o.current;(0,e.useEffect)(()=>{p.current=H},[H]);let Z=(0,e.useCallback)(()=>{l.current!==null&&(window.clearTimeout(l.current),l.current=null)},[]),Q=(0,e.useCallback)(()=>{W(!1),K(!1),p.current?.(),l.current=null},[]);w(()=>{if(j){Z(),W(!0),K(!1);return}if(!U)return;let e=Math.max(0,V);if(e===0){Z(),Q();return}K(!0),Z(),l.current=window.setTimeout(Q,e)},[Z,V,Q,j,U]),(0,e.useEffect)(()=>()=>{Z()},[Z]);let $=(0,e.useCallback)(e=>{if(!C(X))return;if(e.key===`Escape`&&Y&&O){T();return}if(e.key!==`Tab`||!Y)return;let t=s.current;if(!t)return;let n=b(t);if(n.length===0){e.preventDefault(),t.focus();return}let r=n[0],i=n[n.length-1],a=x(),o=!a||!t.contains(a);if(e.shiftKey&&(o||a===r)){e.preventDefault(),i.focus();return}!e.shiftKey&&(o||a===i)&&(e.preventDefault(),r.focus())},[O,X,Y,T]);(0,e.useEffect)(()=>{if(!(!Y||typeof window>`u`))return window.addEventListener(`keydown`,$),()=>{window.removeEventListener(`keydown`,$)}},[$,Y]),w(()=>{if(j)return c.current=x(),S(X),()=>{let e=C(X);ee(X),e&&c.current?.isConnected&&c.current.focus(),c.current=null}},[X,j]),w(()=>{if(!j)return;let e=s.current;if(e){if(E===`first-input`){let t=e.querySelector(d);if(t){t.focus();return}}if(E===`submit`){let t=e.querySelector(f);if(t){t.focus();return}}e.focus()}},[E,j]),(0,e.useEffect)(()=>{if(!(!U||!k))return v(),()=>{y()}},[k,U]);let ne=(0,e.useCallback)(e=>{C(X)&&Y&&D&&e.target===e.currentTarget&&T()},[D,X,Y,T]),re=(0,e.useCallback)(e=>{e.preventDefault(),A?.(e)},[A]);if(!U||typeof document>`u`)return null;let ie=A?(0,t.jsx)(`form`,{onSubmit:re,children:_}):_,ae=typeof z==`string`?(0,t.jsx)(`span`,{"aria-hidden":`true`,children:z}):z;return(0,n.createPortal)((0,t.jsx)(`div`,{id:m?`backdrop-${m}`:void 0,"data-sito-ui":`dialog-backdrop`,"data-state":J,onClick:ne,className:r(`sito-ui-dialog-backdrop`,`sito-ui-dialog-backdrop--${J}`,N),children:(0,t.jsxs)(`div`,{id:m,ref:s,role:`dialog`,"aria-modal":`true`,"aria-label":h?void 0:g,"aria-labelledby":q,tabIndex:-1,"data-sito-ui":`dialog`,"data-state":J,className:r(`sito-ui-dialog`,`sito-ui-dialog--${J}`,M&&`sito-ui-dialog--mobile-full-screen`,P),children:[(0,t.jsxs)(`div`,{className:r(`sito-ui-dialog__header`,F),children:[h?(0,t.jsx)(`h3`,{id:q,className:r(`sito-ui-dialog__title`,I),children:h}):null,B?(0,t.jsx)(u,{icon:ae,disabled:!Y,"aria-disabled":!Y,onClick:T,variant:`text`,color:`error`,className:r(`sito-ui-dialog__close`,L),"aria-label":R}):null]}),ie]})}),te??document.body)},E=e=>{let{primaryText:n,cancelText:i,onPrimaryClick:a,onCancel:o,isLoading:c=!1,loadingIndicator:l,disabled:u=!1,primaryType:d=`submit`,containerClassName:f,primaryClassName:p,cancelClassName:m,alignEnd:h=!1,primaryName:g,primaryAriaLabel:_,cancelName:v,cancelAriaLabel:y,extraActions:b=[]}=e;return(0,t.jsxs)(`div`,{"data-sito-ui":`dialog-actions`,className:r(`sito-ui-dialog-actions`,h&&`sito-ui-dialog-actions--end`,f),children:[(0,t.jsx)(s,{type:d,color:`primary`,variant:`submit`,className:p,disabled:u,loading:c,loadingIndicator:l,onClick:a,name:g,"aria-label":_,children:n}),b.map(({id:e,...n})=>(0,t.jsx)(s,{...n},e)),(0,t.jsx)(s,{type:`button`,variant:`outlined`,className:m,disabled:u||c,onClick:o,name:v,"aria-label":y,children:i})]})},D=(t=!1)=>{let[n,r]=(0,e.useState)(t);return{open:n,setOpen:r,handleClose:()=>r(!1),handleOpen:()=>r(!0)}};exports.Button=s,exports.Dialog=T,exports.DialogActions=E,exports.IconButton=u,exports.useDialog=D;

package/dist/ui.js

@@ -72,50 +72,57 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 	"input:not([disabled])",
 	"select:not([disabled])",
 	"[tabindex]:not([tabindex=\"-1\"])"
-].join(","), S = 0, C = null, w = () => typeof document < "u" && !!document.body, T = () => {
-	w() && (S === 0 && (C = document.body.style.overflow, document.body.style.overflow = "hidden"), S += 1);
-}, E = () => {
-	!w() || S === 0 || (--S, S === 0 && (document.body.style.overflow = C ?? "", C = null));
-}, D = (e) => Array.from(e.querySelectorAll(x)).filter((e) => e.getAttribute("aria-disabled") !== "true"), O = () => typeof document > "u" ? null : document.activeElement instanceof HTMLElement ? document.activeElement : null, k = typeof window > "u" ? n : i, A = (e) => {
-	let i = r(), s = a(null), f = a(null), p = a(null), m = a(void 0), { dialogId: h, title: g, ariaLabel: _, children: x, onClose: S, initialFocus: C = "none", closeOnBackdropClick: w = !1, closeOnEscape: A = !0, lockBodyScroll: j = !0, onSubmit: M, open: N = !1, mobileFullScreen: P = !1, containerClassName: F, className: I, closeLabel: L = "Close dialog", closeIcon: R = "x", showCloseButton: z = !0, portalContainer: B, exitDurationMs: V = 0, onExitComplete: H } = e, [U, W] = o(N), [G, K] = o(!1), q = g ? `${h ?? i}-title` : void 0, J = G ? "closing" : "open", Y = N && !G;
+].join(","), S = 0, C = null, w = [], T = () => typeof document < "u" && !!document.body, E = () => {
+	T() && (S === 0 && (C = document.body.style.overflow, document.body.style.overflow = "hidden"), S += 1);
+}, D = () => {
+	!T() || S === 0 || (--S, S === 0 && (document.body.style.overflow = C ?? "", C = null));
+}, ee = (e) => Array.from(e.querySelectorAll(x)).filter((e) => e.getAttribute("aria-disabled") !== "true"), O = () => typeof document > "u" ? null : document.activeElement instanceof HTMLElement ? document.activeElement : null, te = (e) => {
+	let t = w.indexOf(e);
+	t >= 0 && w.splice(t, 1), w.push(e);
+}, ne = (e) => {
+	let t = w.indexOf(e);
+	t >= 0 && w.splice(t, 1);
+}, k = (e) => w[w.length - 1] === e, A = typeof window > "u" ? n : i, j = (e) => {
+	let i = r(), s = a(Symbol("sito-ui-dialog")), f = a(null), p = a(null), m = a(null), h = a(void 0), { dialogId: g, title: _, ariaLabel: x, children: S, onClose: C, initialFocus: w = "none", closeOnBackdropClick: T = !1, closeOnEscape: j = !0, lockBodyScroll: M = !0, onSubmit: N, open: P = !1, mobileFullScreen: F = !1, containerClassName: I, className: L, headerClassName: R, titleClassName: z, closeButtonClassName: re, closeLabel: ie = "Close dialog", closeIcon: B = "x", showCloseButton: ae = !0, portalContainer: oe, exitDurationMs: V = 0, onExitComplete: H } = e, [U, W] = o(P), [G, K] = o(!1), q = _ ? `${g ?? i}-title` : void 0, J = G ? "closing" : "open", Y = P && !G, X = s.current;
 	n(() => {
-		m.current = H;
+		h.current = H;
 	}, [H]);
-	let X = t(() => {
-		p.current !== null && (window.clearTimeout(p.current), p.current = null);
-	}, []), Z = t(() => {
-		W(!1), K(!1), m.current?.(), p.current = null;
+	let Z = t(() => {
+		m.current !== null && (window.clearTimeout(m.current), m.current = null);
+	}, []), Q = t(() => {
+		W(!1), K(!1), h.current?.(), m.current = null;
 	}, []);
-	k(() => {
-		if (N) {
-			X(), W(!0), K(!1);
+	A(() => {
+		if (P) {
+			Z(), W(!0), K(!1);
 			return;
 		}
 		if (!U) return;
 		let e = Math.max(0, V);
 		if (e === 0) {
-			X(), Z();
+			Z(), Q();
 			return;
 		}
-		K(!0), X(), p.current = window.setTimeout(Z, e);
+		K(!0), Z(), m.current = window.setTimeout(Q, e);
 	}, [
-		X,
-		V,
 		Z,
-		N,
+		V,
+		Q,
+		P,
 		U
 	]), n(() => () => {
-		X();
-	}, [X]);
-	let Q = t((e) => {
-		if (e.key === "Escape" && Y && A) {
-			S();
+		Z();
+	}, [Z]);
+	let $ = t((e) => {
+		if (!k(X)) return;
+		if (e.key === "Escape" && Y && j) {
+			C();
 			return;
 		}
 		if (e.key !== "Tab" || !Y) return;
-		let t = s.current;
+		let t = f.current;
 		if (!t) return;
-		let n = D(t);
+		let n = ee(t);
 		if (n.length === 0) {
 			e.preventDefault(), t.focus();
 			return;
@@ -127,30 +134,32 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 		}
 		!e.shiftKey && (o || a === i) && (e.preventDefault(), r.focus());
 	}, [
-		A,
+		j,
+		X,
 		Y,
-		S
+		C
 	]);
 	n(() => {
-		if (!(!Y || typeof window > "u")) return window.addEventListener("keydown", Q), () => {
-			window.removeEventListener("keydown", Q);
+		if (!(!Y || typeof window > "u")) return window.addEventListener("keydown", $), () => {
+			window.removeEventListener("keydown", $);
 		};
-	}, [Q, Y]), k(() => {
-		if (N) return f.current = O(), () => {
-			f.current?.isConnected && f.current.focus(), f.current = null;
+	}, [$, Y]), A(() => {
+		if (P) return p.current = O(), te(X), () => {
+			let e = k(X);
+			ne(X), e && p.current?.isConnected && p.current.focus(), p.current = null;
 		};
-	}, [N]), k(() => {
-		if (!N) return;
-		let e = s.current;
+	}, [X, P]), A(() => {
+		if (!P) return;
+		let e = f.current;
 		if (e) {
-			if (C === "first-input") {
+			if (w === "first-input") {
 				let t = e.querySelector(y);
 				if (t) {
 					t.focus();
 					return;
 				}
 			}
-			if (C === "submit") {
+			if (w === "submit") {
 				let t = e.querySelector(b);
 				if (t) {
 					t.focus();
@@ -159,65 +168,66 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 			}
 			e.focus();
 		}
-	}, [C, N]), n(() => {
-		if (!(!U || !j)) return T(), () => {
-			E();
+	}, [w, P]), n(() => {
+		if (!(!U || !M)) return E(), () => {
+			D();
 		};
-	}, [j, U]);
-	let $ = t((e) => {
-		Y && w && e.target === e.currentTarget && S();
+	}, [M, U]);
+	let se = t((e) => {
+		k(X) && Y && T && e.target === e.currentTarget && C();
 	}, [
-		w,
+		T,
+		X,
 		Y,
-		S
-	]), ee = t((e) => {
-		e.preventDefault(), M?.(e);
-	}, [M]);
+		C
+	]), ce = t((e) => {
+		e.preventDefault(), N?.(e);
+	}, [N]);
 	if (!U || typeof document > "u") return null;
-	let te = M ? /* @__PURE__ */ c("form", {
-		onSubmit: ee,
-		children: x
-	}) : x, ne = typeof R == "string" ? /* @__PURE__ */ c("span", {
+	let le = N ? /* @__PURE__ */ c("form", {
+		onSubmit: ce,
+		children: S
+	}) : S, ue = typeof B == "string" ? /* @__PURE__ */ c("span", {
 		"aria-hidden": "true",
-		children: R
-	}) : R;
+		children: B
+	}) : B;
 	return u(/* @__PURE__ */ c("div", {
-		id: h ? `backdrop-${h}` : void 0,
+		id: g ? `backdrop-${g}` : void 0,
 		"data-sito-ui": "dialog-backdrop",
 		"data-state": J,
-		onClick: $,
-		className: d("sito-ui-dialog-backdrop", `sito-ui-dialog-backdrop--${J}`, F),
+		onClick: se,
+		className: d("sito-ui-dialog-backdrop", `sito-ui-dialog-backdrop--${J}`, I),
 		children: /* @__PURE__ */ l("div", {
-			id: h,
-			ref: s,
+			id: g,
+			ref: f,
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-label": g ? void 0 : _,
+			"aria-label": _ ? void 0 : x,
 			"aria-labelledby": q,
 			tabIndex: -1,
 			"data-sito-ui": "dialog",
 			"data-state": J,
-			className: d("sito-ui-dialog", `sito-ui-dialog--${J}`, P && "sito-ui-dialog--mobile-full-screen", I),
+			className: d("sito-ui-dialog", `sito-ui-dialog--${J}`, F && "sito-ui-dialog--mobile-full-screen", L),
 			children: [/* @__PURE__ */ l("div", {
-				className: "sito-ui-dialog__header",
-				children: [g ? /* @__PURE__ */ c("h3", {
+				className: d("sito-ui-dialog__header", R),
+				children: [_ ? /* @__PURE__ */ c("h3", {
 					id: q,
-					className: "sito-ui-dialog__title",
-					children: g
-				}) : null, z ? /* @__PURE__ */ c(v, {
-					icon: ne,
+					className: d("sito-ui-dialog__title", z),
+					children: _
+				}) : null, ae ? /* @__PURE__ */ c(v, {
+					icon: ue,
 					disabled: !Y,
 					"aria-disabled": !Y,
-					onClick: S,
+					onClick: C,
 					variant: "text",
 					color: "error",
-					className: "sito-ui-dialog__close",
-					"aria-label": L
+					className: d("sito-ui-dialog__close", re),
+					"aria-label": ie
 				}) : null]
-			}), te]
+			}), le]
 		})
-	}), B ?? document.body);
-}, j = (e) => {
+	}), oe ?? document.body);
+}, M = (e) => {
 	let { primaryText: t, cancelText: n, onPrimaryClick: r, onCancel: i, isLoading: a = !1, loadingIndicator: o, disabled: s = !1, primaryType: u = "submit", containerClassName: f, primaryClassName: p, cancelClassName: m, alignEnd: g = !1, primaryName: _, primaryAriaLabel: v, cancelName: y, cancelAriaLabel: b, extraActions: x = [] } = e;
 	return /* @__PURE__ */ l("div", {
 		"data-sito-ui": "dialog-actions",
@@ -249,7 +259,7 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 			})
 		]
 	});
-}, M = (e = !1) => {
+}, N = (e = !1) => {
 	let [t, n] = o(e);
 	return {
 		open: t,
@@ -259,4 +269,4 @@ var d = (...e) => e.filter(Boolean).join(" "), f = {
 	};
 };
 //#endregion
-export { h as Button, A as Dialog, j as DialogActions, v as IconButton, M as useDialog };
+export { h as Button, j as Dialog, M as DialogActions, v as IconButton, N as useDialog };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sito/ui",
   "private": false,
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "packageManager": "pnpm@10.34.4",
   "files": [