@vjdesigns/vjdesigns-ui 2.4.0 → 2.5.0

package/dist/components/overlays/Popover/Popover.mjs

@@ -1,17 +1,18 @@
+"use client";
 import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
-import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
-import { getChildRef as n, isSingleElement as r } from "../../../utils/refs.mjs";
-import { useMergedRef as i } from "../../../hooks/useMergedRef.mjs";
-import { cx as a } from "../../../utils/cx.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { Button as n } from "../../primitives/Button/Button.mjs";
+import { useMergedRef as r } from "../../../hooks/useMergedRef.mjs";
+import { getChildRef as i, isSingleElement as a } from "../../../utils/refs.mjs";
 import { cloneSlot as o } from "../../../utils/slot.mjs";
-import { Button as s } from "../../primitives/Button/Button.mjs";
-import { PopoverContext as c, usePopoverContext as l } from "./PopoverContext.mjs";
+import { PopoverContext as s, usePopoverContext as c } from "./PopoverContext.mjs";
+import { PopoverContent as l } from "./PopoverContent.mjs";
 import u from "./Popover.module.css.mjs";
-import { PopoverContent as d } from "./PopoverContent.mjs";
+import { useMessages as d } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
 import { useCallback as f, useEffect as p, useId as m, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
 import { jsx as y } from "react/jsx-runtime";
-//#region src/components/overlays/Popover/Popover.tsx
-var b = ({ children: t, open: n, defaultOpen: r = !1, onOpenChange: i, placement: a = "bottom", offset: o, modal: s = !1, closeOnOutsidePress: l = !0, closeOnEscape: u = !0, closeOnFocusOut: d = !0, closeOnAnchorFocus: b = !1 }) => {
+// src/components/overlays/Popover/Popover.tsx
+var b = ({ children: t, open: n, defaultOpen: r = !1, onOpenChange: i, placement: a = "bottom", offset: o, modal: c = !1, closeOnOutsidePress: l = !0, closeOnEscape: u = !0, closeOnFocusOut: d = !0, closeOnAnchorFocus: b = !1 }) => {
 	let [x, S] = e({
 		value: n,
 		defaultValue: r,
@@ -43,7 +44,7 @@ var b = ({ children: t, open: n, defaultOpen: r = !1, onOpenChange: i, placement
 		setOpen: N,
 		placement: a,
 		offset: o,
-		modal: s,
+		modal: c,
 		closeOnOutsidePress: l,
 		closeOnEscape: u,
 		closeOnFocusOut: d,
@@ -64,7 +65,7 @@ var b = ({ children: t, open: n, defaultOpen: r = !1, onOpenChange: i, placement
 		N,
 		a,
 		o,
-		s,
+		c,
 		l,
 		u,
 		d,
@@ -72,7 +73,7 @@ var b = ({ children: t, open: n, defaultOpen: r = !1, onOpenChange: i, placement
 		O,
 		A
 	]);
-	return /* @__PURE__ */ y(c.Provider, {
+	return /* @__PURE__ */ y(s.Provider, {
 		value: P,
 		children: t
 	});
@@ -81,59 +82,59 @@ function x(e) {
 	let { variant: t, tone: n, size: r, radius: i, startIcon: a, endIcon: o, fullWidth: s, ...c } = e;
 	return c;
 }
-var S = ({ children: e, asChild: t, onClick: a, ref: c, ...u }) => {
-	let d = l("Popover.Trigger"), f = t ?? r(e), p = f && r(e) ? n(e) : void 0, m = i(d.triggerRef, c, p), h = (e) => {
-		a?.(e), !e.defaultPrevented && d.setOpen(!d.open, "force");
+var S = ({ children: e, asChild: t, onClick: s, ref: l, ...u }) => {
+	let d = c("Popover.Trigger"), f = t ?? a(e), p = f && a(e) ? i(e) : void 0, m = r(d.triggerRef, l, p), h = (e) => {
+		s?.(e), e.defaultPrevented || d.setOpen(!d.open, "force");
 	}, g = {
 		"aria-haspopup": "dialog",
 		"aria-expanded": d.open,
 		"aria-controls": d.open ? d.contentId : void 0,
 		"data-state": d.open ? "open" : "closed"
 	};
-	return f && r(e) ? o(e, {
+	return f && a(e) ? o(e, {
 		...x(u),
 		...g,
 		onClick: h
-	}, m) : /* @__PURE__ */ y(s, {
+	}, m) : /* @__PURE__ */ y(n, {
 		...u,
 		...g,
 		ref: m,
 		onClick: h,
 		children: e
 	});
-}, C = ({ children: e, asChild: t, ref: a, ...s }) => {
-	let c = l("Popover.Anchor"), u = t ?? r(e), d = u && r(e) ? n(e) : void 0, f = i(c.anchorRef, a, d);
-	return u && r(e) ? o(e, s, f) : /* @__PURE__ */ y("div", {
+}, C = ({ children: e, asChild: t, ref: n, ...s }) => {
+	let l = c("Popover.Anchor"), u = t ?? a(e), d = u && a(e) ? i(e) : void 0, f = r(l.anchorRef, n, d);
+	return u && a(e) ? o(e, s, f) : /* @__PURE__ */ y("div", {
 		...s,
 		ref: f,
 		children: e
 	});
-}, w = ({ level: e = 2, className: t, id: n, ...r }) => {
-	let i = l("Popover.Title"), { setHasTitle: o } = i;
+}, w = ({ level: e = 2, className: n, id: r, ...i }) => {
+	let a = c("Popover.Title"), { setHasTitle: o } = a;
 	h(() => (o(!0), () => o(!1)), [o]);
 	let s = `h${e}`;
 	return /* @__PURE__ */ y(s, {
-		...r,
-		id: n ?? i.titleId,
-		className: a(u.title, t)
+		...i,
+		id: r ?? a.titleId,
+		className: t(u.title, n)
 	});
-}, T = ({ className: e, id: t, ...n }) => {
-	let r = l("Popover.Description"), { setHasDescription: i } = r;
-	return h(() => (i(!0), () => i(!1)), [i]), /* @__PURE__ */ y("p", {
-		...n,
-		id: t ?? r.descriptionId,
-		className: a(u.description, e)
+}, T = ({ className: e, id: n, ...r }) => {
+	let i = c("Popover.Description"), { setHasDescription: a } = i;
+	return h(() => (a(!0), () => a(!1)), [a]), /* @__PURE__ */ y("p", {
+		...r,
+		id: n ?? i.descriptionId,
+		className: t(u.description, e)
 	});
-}, E = ({ children: e, asChild: a, onClick: c, ref: u, variant: d = "ghost", ...f }) => {
-	let p = t(), m = e ?? p.popover.close, h = l("Popover.Close"), g = a ?? r(m), _ = g && r(m) ? n(m) : void 0, v = i(u, _), b = (e) => {
-		c?.(e), e.defaultPrevented || h.setOpen(!1, "force");
+}, E = ({ children: e, asChild: t, onClick: s, ref: l, variant: u = "ghost", ...f }) => {
+	let p = d(), m = e ?? p.popover.close, h = c("Popover.Close"), g = t ?? a(m), _ = g && a(m) ? i(m) : void 0, v = r(l, _), b = (e) => {
+		s?.(e), e.defaultPrevented || h.setOpen(!1, "force");
 	};
-	return g && r(m) ? o(m, {
+	return g && a(m) ? o(m, {
 		...x(f),
 		onClick: b
-	}, v) : /* @__PURE__ */ y(s, {
+	}, v) : /* @__PURE__ */ y(n, {
 		...f,
-		variant: d,
+		variant: u,
 		ref: v,
 		onClick: b,
 		children: m
@@ -141,10 +142,9 @@ var S = ({ children: e, asChild: t, onClick: a, ref: c, ...u }) => {
 }, D = Object.assign(b, {
 	Trigger: S,
 	Anchor: C,
-	Content: d,
+	Content: l,
 	Title: w,
 	Description: T,
 	Close: E
 });
-//#endregion
-export { D as Popover, C as PopoverAnchor, E as PopoverClose, d as PopoverContent, T as PopoverDescription, w as PopoverTitle, S as PopoverTrigger };
+export { D as Popover, C as PopoverAnchor, E as PopoverClose, l as PopoverContent, T as PopoverDescription, w as PopoverTitle, S as PopoverTrigger };

package/dist/components/overlays/Popover/Popover.module.css.mjs

@@ -1,4 +1,4 @@
-//#region src/components/overlays/Popover/Popover.module.css
+// src/components/overlays/Popover/Popover.module.css
 var e = "_positioner_p1zsw_15", t = "_content_p1zsw_25", n = "_sm_p1zsw_101", r = "_md_p1zsw_111", i = "_lg_p1zsw_121", a = "_title_p1zsw_197", o = "_description_p1zsw_225", s = "_closeButton_p1zsw_251", c = "_hasClose_p1zsw_265", l = "_arrow_p1zsw_283", u = {
 	positioner: e,
 	content: t,
@@ -12,5 +12,4 @@ var e = "_positioner_p1zsw_15", t = "_content_p1zsw_25", n = "_sm_p1zsw_101", r
 	hasClose: c,
 	arrow: l
 };
-//#endregion
 export { l as arrow, s as closeButton, t as content, u as default, o as description, c as hasClose, i as lg, r as md, e as positioner, n as sm, a as title };

package/dist/components/overlays/Popover/PopoverContent.cjs.js

@@ -1 +1 @@
-const e=require("../../../hooks/elementSource.cjs.js"),t=require("../../../hooks/useOverlayLayer.cjs.js"),n=require("../../../hooks/useDismiss.cjs.js"),r=require("../../../hooks/useFloatingPosition.cjs.js"),i=require("../../../hooks/useFocusTrap.cjs.js"),a=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),o=require("../../../hooks/useMergedRef.cjs.js"),s=require("../../../utils/cx.cjs.js"),c=require("../../utilities/Portal/Portal.cjs.js"),l=require("../../primitives/Button/Button.cjs.js"),u=require("../../primitives/Icon/icons.cjs.js"),d=require("./PopoverContext.cjs.js"),f=require("./Popover.module.css.cjs.js");let p=require("react"),m=require("react/jsx-runtime");var h={sm:f.default.sm,md:f.default.md,lg:f.default.lg},g=({container:e,...t})=>{let n=d.usePopoverContext(`Popover.Content`);return n.open?(0,m.jsx)(c.Portal,{container:e,children:(0,m.jsx)(v,{...t,ctx:n})}):null},_=9,v=({ctx:c,children:d,initialFocus:g,initialFocusRef:v,showArrow:y=!1,showClose:b=!1,closeLabel:x,size:S=`md`,maxWidth:C,className:w,style:T,ref:E,onKeyDown:D,onBlur:O,"aria-label":k,"aria-labelledby":A,"aria-describedby":j,...M})=>{let N=a.useMessages(),P=x??N.popover.close,F=(0,p.useRef)(null),I=o.useMergedRef(c.contentRef,E),L=c.anchorRef.current?c.anchorRef:c.triggerRef,[R,z]=(0,p.useState)(_);(0,p.useLayoutEffect)(()=>{let e=c.contentRef.current;if(!y||!e)return;let t=parseFloat(getComputedStyle(e).borderTopLeftRadius)||0;z(t+_)},[y,c.contentRef]);let B=r.useFloatingPosition(L,F,{open:!0,placement:c.placement,offset:c.offset??(y?12:8),arrowPadding:R}),V=B.isPositioned,H=B.placement.split(`-`)[0],U=B.arrow?B.arrow.x??B.arrow.y??null:null,W=t.useOverlayLayer({active:!0,modal:c.modal,elements:()=>[F,c.contentRef,c.triggerRef,c.anchorRef]}),G=W.contains,K=(0,p.useRef)(!1);(0,p.useEffect)(()=>{if(!V||c.modal||K.current)return;let t=c.contentRef.current;t&&(K.current=!0,((typeof g==`function`?g()??null:e.resolveElement(g))??v?.current??i.getFocusable(t)[0]??t).focus({preventScroll:!0}))},[V,c.modal,c.contentRef,v]),i.useFocusTrap(c.contentRef,{active:c.modal&&V,initialFocus:g,initialFocusRef:v,restoreFocus:!1,layer:W}),(0,p.useLayoutEffect)(()=>{let{contentRef:e,triggerRef:t,returnFocusRef:n,restoreModeRef:r}=c,i=e.current;return()=>{let e=r.current;r.current=`auto`;let a=!!i&&i.contains(document.activeElement),o=()=>{let e=t.current??n.current;e?.isConnected&&e.focus({preventScroll:!0})};e===`force`||e===`auto`&&a?o():e===`deferred`&&window.setTimeout(o,0)}},[]);let{setOpen:q,closeOnEscape:J}=c;n.useDismiss([],{active:!0,layer:W,escapeKey:J,outsidePress:c.closeOnOutsidePress,onDismiss:e=>{if(e.type===`keydown`){q(!1,`force`);return}let t=e.target instanceof Element?e.target:null;q(!1,t?.closest(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]`)?`none`:`deferred`)}});let Y=e=>{if(D?.(e),e.defaultPrevented||e.key!==`Tab`||c.modal)return;let t=c.contentRef.current,n=c.triggerRef.current;if(!t||!n)return;let r=i.getFocusable(t),a=document.activeElement,o=r[0],s=r[r.length-1];if(e.shiftKey&&(a===t||a===o))e.preventDefault(),n.focus();else if(!e.shiftKey&&(a===s||r.length===0)){let t=i.getFocusable(document.body).find(e=>!G(e)&&n.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING);t&&(e.preventDefault(),t.focus())}},X=e=>{if(O?.(e),!c.closeOnFocusOut||c.modal)return;let t=e.relatedTarget;t&&!G(t)&&q(!1,`none`)},Z=A??(c.hasTitle&&!k?c.titleId:void 0),Q=s.cx(c.hasDescription&&c.descriptionId,j)||void 0;return(0,m.jsx)(t.OverlayLayerProvider,{layer:W,children:(0,m.jsx)(`div`,{ref:F,className:f.default.positioner,style:B.style,children:(0,m.jsxs)(`div`,{role:`dialog`,id:c.contentId,"aria-modal":c.modal?!0:void 0,"aria-label":k,"aria-labelledby":Z,"aria-describedby":Q,tabIndex:-1,...M,ref:I,className:s.cx(f.default.content,h[S],b&&f.default.hasClose,w),style:C===void 0?T:{...T,maxWidth:C},"data-side":H,"data-state":`open`,onKeyDown:Y,onBlur:X,children:[y&&(0,m.jsx)(`span`,{"aria-hidden":`true`,className:f.default.arrow,"data-side":H,style:U===null?void 0:H===`top`||H===`bottom`?{left:`calc(${U}px - var(--space-3) / 2)`}:{top:`calc(${U}px - var(--space-3) / 2)`}}),b&&(0,m.jsx)(l.IconButton,{"aria-label":P,variant:`ghost`,tone:`neutral`,size:`sm`,className:f.default.closeButton,onClick:()=>q(!1,`force`),children:(0,m.jsx)(u.CloseIcon,{})}),d]})})})};exports.PopoverContent=g;
+"use client";const e=require("../../../hooks/useDismiss.cjs.js"),t=require("../../../hooks/useFloatingPosition.cjs.js"),n=require("../../../hooks/elementSource.cjs.js"),r=require("../../../hooks/useFocusTrap.cjs.js"),i=require("../../../hooks/useOverlayLayer.cjs.js"),a=require("../../../utils/cx.cjs.js"),o=require("../../primitives/Button/Button.cjs.js"),s=require("../../primitives/Icon/icons.cjs.js"),c=require("../../utilities/Portal/Portal.cjs.js"),l=require("../../../hooks/useMergedRef.cjs.js"),u=require("./PopoverContext.cjs.js"),d=require("./Popover.module.css.cjs.js"),f=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js");let p=require("react"),m=require("react/jsx-runtime");var h={sm:d.default.sm,md:d.default.md,lg:d.default.lg},g=({container:e,...t})=>{let n=u.usePopoverContext(`Popover.Content`);return n.open?(0,m.jsx)(c.Portal,{container:e,children:(0,m.jsx)(v,{...t,ctx:n})}):null},_=9,v=({ctx:c,children:u,initialFocus:g,initialFocusRef:v,showArrow:y=!1,showClose:b=!1,closeLabel:x,size:S=`md`,maxWidth:C,className:w,style:T,ref:E,onKeyDown:D,onBlur:O,"aria-label":k,"aria-labelledby":A,"aria-describedby":j,...M})=>{let N=f.useMessages(),P=x??N.popover.close,F=(0,p.useRef)(null),I=l.useMergedRef(c.contentRef,E),L=c.anchorRef.current?c.anchorRef:c.triggerRef,[R,z]=(0,p.useState)(_);(0,p.useLayoutEffect)(()=>{let e=c.contentRef.current;if(!y||!e)return;let t=parseFloat(getComputedStyle(e).borderTopLeftRadius)||0;z(t+_)},[y,c.contentRef]);let B=t.useFloatingPosition(L,F,{open:!0,placement:c.placement,offset:c.offset??(y?12:8),arrowPadding:R}),V=B.isPositioned,H=B.placement.split(`-`)[0],U=B.arrow?B.arrow.x??B.arrow.y??null:null,W=i.useOverlayLayer({active:!0,modal:c.modal,elements:()=>[F,c.contentRef,c.triggerRef,c.anchorRef]}),G=W.contains,K=(0,p.useRef)(!1);(0,p.useEffect)(()=>{if(!V||c.modal||K.current)return;let e=c.contentRef.current;e&&(K.current=!0,((typeof g==`function`?g()??null:n.resolveElement(g))??v?.current??r.getFocusable(e)[0]??e).focus({preventScroll:!0}))},[V,c.modal,c.contentRef,v]),r.useFocusTrap(c.contentRef,{active:c.modal&&V,initialFocus:g,initialFocusRef:v,restoreFocus:!1,layer:W}),(0,p.useLayoutEffect)(()=>{let{contentRef:e,triggerRef:t,returnFocusRef:n,restoreModeRef:r}=c,i=e.current;return()=>{let e=r.current;r.current=`auto`;let a=!!i&&i.contains(document.activeElement),o=()=>{let e=t.current??n.current;e?.isConnected&&e.focus({preventScroll:!0})};e===`force`||e===`auto`&&a?o():e===`deferred`&&window.setTimeout(o,0)}},[]);let{setOpen:q,closeOnEscape:J}=c;e.useDismiss([],{active:!0,layer:W,escapeKey:J,outsidePress:c.closeOnOutsidePress,onDismiss:e=>{if(e.type===`keydown`){q(!1,`force`);return}let t=e.target instanceof Element?e.target:null;q(!1,t?.closest(`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]`)?`none`:`deferred`)}});let Y=e=>{if(D?.(e),e.defaultPrevented||e.key!==`Tab`||c.modal)return;let t=c.contentRef.current,n=c.triggerRef.current;if(!t||!n)return;let i=r.getFocusable(t),a=document.activeElement,o=i[0],s=i[i.length-1];if(e.shiftKey&&(a===t||a===o))e.preventDefault(),n.focus();else if(!e.shiftKey&&(a===s||i.length===0)){let t=r.getFocusable(document.body).find(e=>!G(e)&&n.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING);t&&(e.preventDefault(),t.focus())}},X=e=>{if(O?.(e),!c.closeOnFocusOut||c.modal)return;let t=e.relatedTarget;t&&!G(t)&&q(!1,`none`)},Z=A??(c.hasTitle&&!k?c.titleId:void 0),Q=a.cx(c.hasDescription&&c.descriptionId,j)||void 0;return(0,m.jsx)(i.OverlayLayerProvider,{layer:W,children:(0,m.jsx)(`div`,{ref:F,className:d.default.positioner,style:B.style,children:(0,m.jsxs)(`div`,{role:`dialog`,id:c.contentId,"aria-modal":c.modal?!0:void 0,"aria-label":k,"aria-labelledby":Z,"aria-describedby":Q,tabIndex:-1,...M,ref:I,className:a.cx(d.default.content,h[S],b&&d.default.hasClose,w),style:C===void 0?T:{...T,maxWidth:C},"data-side":H,"data-state":`open`,onKeyDown:Y,onBlur:X,children:[y&&(0,m.jsx)(`span`,{"aria-hidden":`true`,className:d.default.arrow,"data-side":H,style:U===null?void 0:H===`top`||H===`bottom`?{left:`calc(${U}px - var(--space-3) / 2)`}:{top:`calc(${U}px - var(--space-3) / 2)`}}),b&&(0,m.jsx)(o.IconButton,{"aria-label":P,variant:`ghost`,tone:`neutral`,size:`sm`,className:d.default.closeButton,onClick:()=>q(!1,`force`),children:(0,m.jsx)(s.CloseIcon,{})}),u]})})})};exports.PopoverContent=g;

package/dist/components/overlays/Popover/PopoverContent.mjs

@@ -1,25 +1,26 @@
-import { resolveElement as e } from "../../../hooks/elementSource.mjs";
-import { OverlayLayerProvider as t, useOverlayLayer as n } from "../../../hooks/useOverlayLayer.mjs";
-import { useDismiss as r } from "../../../hooks/useDismiss.mjs";
-import { useFloatingPosition as i } from "../../../hooks/useFloatingPosition.mjs";
-import { getFocusable as a, useFocusTrap as o } from "../../../hooks/useFocusTrap.mjs";
-import { useMessages as s } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
-import { useMergedRef as c } from "../../../hooks/useMergedRef.mjs";
-import { cx as l } from "../../../utils/cx.mjs";
+"use client";
+import { useDismiss as e } from "../../../hooks/useDismiss.mjs";
+import { useFloatingPosition as t } from "../../../hooks/useFloatingPosition.mjs";
+import { resolveElement as n } from "../../../hooks/elementSource.mjs";
+import { getFocusable as r, useFocusTrap as i } from "../../../hooks/useFocusTrap.mjs";
+import { OverlayLayerProvider as a, useOverlayLayer as o } from "../../../hooks/useOverlayLayer.mjs";
+import { cx as s } from "../../../utils/cx.mjs";
+import { IconButton as c } from "../../primitives/Button/Button.mjs";
+import { CloseIcon as l } from "../../primitives/Icon/icons.mjs";
 import { Portal as u } from "../../utilities/Portal/Portal.mjs";
-import { IconButton as d } from "../../primitives/Button/Button.mjs";
-import { CloseIcon as f } from "../../primitives/Icon/icons.mjs";
-import { usePopoverContext as p } from "./PopoverContext.mjs";
-import m from "./Popover.module.css.mjs";
+import { useMergedRef as d } from "../../../hooks/useMergedRef.mjs";
+import { usePopoverContext as f } from "./PopoverContext.mjs";
+import p from "./Popover.module.css.mjs";
+import { useMessages as m } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
 import { useEffect as h, useLayoutEffect as g, useRef as _, useState as v } from "react";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
-//#region src/components/overlays/Popover/PopoverContent.tsx
+// src/components/overlays/Popover/PopoverContent.tsx
 var x = {
-	sm: m.sm,
-	md: m.md,
-	lg: m.lg
+	sm: p.sm,
+	md: p.md,
+	lg: p.lg
 }, S = ({ container: e, ...t }) => {
-	let n = p("Popover.Content");
+	let n = f("Popover.Content");
 	return n.open ? /* @__PURE__ */ y(u, {
 		container: e,
 		children: /* @__PURE__ */ y(w, {
@@ -27,20 +28,20 @@ var x = {
 			ctx: n
 		})
 	}) : null;
-}, C = 9, w = ({ ctx: u, children: p, initialFocus: S, initialFocusRef: w, showArrow: T = !1, showClose: E = !1, closeLabel: D, size: O = "md", maxWidth: k, className: A, style: j, ref: M, onKeyDown: N, onBlur: P, "aria-label": F, "aria-labelledby": I, "aria-describedby": L, ...R }) => {
-	let z = s(), B = D ?? z.popover.close, V = _(null), H = c(u.contentRef, M), U = u.anchorRef.current ? u.anchorRef : u.triggerRef, [W, G] = v(C);
+}, C = 9, w = ({ ctx: u, children: f, initialFocus: S, initialFocusRef: w, showArrow: T = !1, showClose: E = !1, closeLabel: D, size: O = "md", maxWidth: k, className: A, style: j, ref: M, onKeyDown: N, onBlur: P, "aria-label": F, "aria-labelledby": I, "aria-describedby": L, ...R }) => {
+	let z = m(), B = D ?? z.popover.close, V = _(null), H = d(u.contentRef, M), U = u.anchorRef.current ? u.anchorRef : u.triggerRef, [W, G] = v(C);
 	g(() => {
 		let e = u.contentRef.current;
 		if (!T || !e) return;
 		let t = parseFloat(getComputedStyle(e).borderTopLeftRadius) || 0;
 		G(t + C);
 	}, [T, u.contentRef]);
-	let K = i(U, V, {
+	let K = t(U, V, {
 		open: !0,
 		placement: u.placement,
 		offset: u.offset ?? (T ? 12 : 8),
 		arrowPadding: W
-	}), q = K.isPositioned, J = K.placement.split("-")[0], Y = K.arrow ? K.arrow.x ?? K.arrow.y ?? null : null, X = n({
+	}), q = K.isPositioned, J = K.placement.split("-")[0], Y = K.arrow ? K.arrow.x ?? K.arrow.y ?? null : null, X = o({
 		active: !0,
 		modal: u.modal,
 		elements: () => [
@@ -52,14 +53,14 @@ var x = {
 	}), Z = X.contains, Q = _(!1);
 	h(() => {
 		if (!q || u.modal || Q.current) return;
-		let t = u.contentRef.current;
-		t && (Q.current = !0, ((typeof S == "function" ? S() ?? null : e(S)) ?? w?.current ?? a(t)[0] ?? t).focus({ preventScroll: !0 }));
+		let e = u.contentRef.current;
+		e && (Q.current = !0, ((typeof S == "function" ? S() ?? null : n(S)) ?? w?.current ?? r(e)[0] ?? e).focus({ preventScroll: !0 }));
 	}, [
 		q,
 		u.modal,
 		u.contentRef,
 		w
-	]), o(u.contentRef, {
+	]), i(u.contentRef, {
 		active: u.modal && q,
 		initialFocus: S,
 		initialFocusRef: w,
@@ -78,7 +79,7 @@ var x = {
 		};
 	}, []);
 	let { setOpen: $, closeOnEscape: ee } = u;
-	r([], {
+	e([], {
 		active: !0,
 		layer: X,
 		escapeKey: ee,
@@ -96,22 +97,22 @@ var x = {
 		if (N?.(e), e.defaultPrevented || e.key !== "Tab" || u.modal) return;
 		let t = u.contentRef.current, n = u.triggerRef.current;
 		if (!t || !n) return;
-		let r = a(t), i = document.activeElement, o = r[0], s = r[r.length - 1];
-		if (e.shiftKey && (i === t || i === o)) e.preventDefault(), n.focus();
-		else if (!e.shiftKey && (i === s || r.length === 0)) {
-			let t = a(document.body).find((e) => !Z(e) && n.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING);
+		let i = r(t), a = document.activeElement, o = i[0], s = i[i.length - 1];
+		if (e.shiftKey && (a === t || a === o)) e.preventDefault(), n.focus();
+		else if (!e.shiftKey && (a === s || i.length === 0)) {
+			let t = r(document.body).find((e) => !Z(e) && n.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING);
 			t && (e.preventDefault(), t.focus());
 		}
 	}, ne = (e) => {
 		if (P?.(e), !u.closeOnFocusOut || u.modal) return;
 		let t = e.relatedTarget;
 		t && !Z(t) && $(!1, "none");
-	}, re = I ?? (u.hasTitle && !F ? u.titleId : void 0), ie = l(u.hasDescription && u.descriptionId, L) || void 0;
-	return /* @__PURE__ */ y(t, {
+	}, re = I ?? (u.hasTitle && !F ? u.titleId : void 0), ie = s(u.hasDescription && u.descriptionId, L) || void 0;
+	return /* @__PURE__ */ y(a, {
 		layer: X,
 		children: /* @__PURE__ */ y("div", {
 			ref: V,
-			className: m.positioner,
+			className: p.positioner,
 			style: K.style,
 			children: /* @__PURE__ */ b("div", {
 				role: "dialog",
@@ -123,7 +124,7 @@ var x = {
 				tabIndex: -1,
 				...R,
 				ref: H,
-				className: l(m.content, x[O], E && m.hasClose, A),
+				className: s(p.content, x[O], E && p.hasClose, A),
 				style: k === void 0 ? j : {
 					...j,
 					maxWidth: k
@@ -135,24 +136,23 @@ var x = {
 				children: [
 					T && /* @__PURE__ */ y("span", {
 						"aria-hidden": "true",
-						className: m.arrow,
+						className: p.arrow,
 						"data-side": J,
 						style: Y === null ? void 0 : J === "top" || J === "bottom" ? { left: `calc(${Y}px - var(--space-3) / 2)` } : { top: `calc(${Y}px - var(--space-3) / 2)` }
 					}),
-					E && /* @__PURE__ */ y(d, {
+					E && /* @__PURE__ */ y(c, {
 						"aria-label": B,
 						variant: "ghost",
 						tone: "neutral",
 						size: "sm",
-						className: m.closeButton,
+						className: p.closeButton,
 						onClick: () => $(!1, "force"),
-						children: /* @__PURE__ */ y(f, {})
+						children: /* @__PURE__ */ y(l, {})
 					}),
-					p
+					f
 				]
 			})
 		})
 	});
 };
-//#endregion
 export { S as PopoverContent };

package/dist/components/overlays/Popover/PopoverContext.cjs.js

@@ -1 +1 @@
-let e=require("react");var t=(0,e.createContext)(null);function n(n){let r=(0,e.useContext)(t);if(!r)throw Error(`${n} must be rendered inside <Popover>.`);return r}var r=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]`;exports.PRESS_FOCUSABLE=r,exports.PopoverContext=t,exports.usePopoverContext=n;
+"use client";let e=require("react");var t=(0,e.createContext)(null);function n(n){let r=(0,e.useContext)(t);if(!r)throw Error(`${n} must be rendered inside <Popover>.`);return r}var r=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]`;exports.PRESS_FOCUSABLE=r,exports.PopoverContext=t,exports.usePopoverContext=n;

package/dist/components/overlays/Popover/PopoverContext.mjs

@@ -1,5 +1,6 @@
+"use client";
 import { createContext as e, useContext as t } from "react";
-//#region src/components/overlays/Popover/PopoverContext.ts
+// src/components/overlays/Popover/PopoverContext.ts
 var n = e(null);
 function r(e) {
 	let r = t(n);
@@ -7,5 +8,4 @@ function r(e) {
 	return r;
 }
 var i = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]";
-//#endregion
 export { i as PRESS_FOCUSABLE, n as PopoverContext, r as usePopoverContext };

package/dist/components/overlays/Tooltip/Tooltip.cjs.js

@@ -1 +1 @@
-const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useDismiss.cjs.js"),n=require("../../../hooks/useFloatingPosition.cjs.js"),r=require("../../../utils/refs.cjs.js"),i=require("../../../utils/cx.cjs.js"),ee=require("../../utilities/Portal/Portal.cjs.js"),te=require("../../primitives/Kbd/Kbd.cjs.js"),a=require("./Tooltip.module.css.cjs.js");let o=require("react"),s=require("react/jsx-runtime");function c(e,t){if(e!==`start`&&e!==`end`)return e;let n=t?getComputedStyle(t).direction===`rtl`:!1;return e===`end`===n?`left`:`right`}var l={neutral:a.default.neutral,primary:a.default.primary},u={delay:400,closeDelay:100,skipDelayDuration:300},d=(0,o.createContext)(u);function f({delay:e=u.delay,closeDelay:t=u.closeDelay,skipDelayDuration:n=u.skipDelayDuration,children:r}){return(0,s.jsx)(d.Provider,{value:{delay:e,closeDelay:t,skipDelayDuration:n},children:r})}var p={active:null,lastClosedAt:-1/0};function m(...e){return e.filter(Boolean).join(` `)||void 0}function ne(e){try{return e.matches(`:focus-visible`)}catch{return!0}}var re=globalThis.process?.env?.NODE_ENV!==`production`,h=`a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])`;function g({children:u,content:f,shortcut:g,placement:_=`top`,offset:v=8,open:y,defaultOpen:b=!1,onOpenChange:x,delay:ie,closeDelay:ae,disabled:S=!1,showArrow:C=!0,tone:w=`neutral`,relationship:T=`description`,className:oe,style:se,id:ce}){let E=(0,o.useContext)(d),D=ie??E.delay,O=ae??E.closeDelay,k=(0,o.useId)(),A=ce??`tooltip-${k}`,[le,j]=e.useControllableState({value:y,defaultValue:b,onChange:x}),M=le&&!S,N=(0,o.useRef)(null),P=(0,o.useRef)(null),[F,I]=(0,o.useState)(null),L=(0,o.useRef)(!1),R=(0,o.useRef)(!1),z=(0,o.useRef)(void 0),B=(0,o.useCallback)(()=>{z.current!==void 0&&clearTimeout(z.current),z.current=void 0},[]);(0,o.useEffect)(()=>B,[B]);let V=(0,o.useCallback)(e=>{B(),j(e)},[B,j]),H=()=>{B(),!S&&(p.active!==null||Date.now()-p.lastClosedAt<E.skipDelayDuration||D<=0?V(!0):z.current=setTimeout(()=>V(!0),D))},U=()=>{B(),!(L.current||R.current)&&(O<=0?V(!1):z.current=setTimeout(()=>V(!1),O))};(0,o.useEffect)(()=>{if(!M)return;let e={close:()=>V(!1)};return p.active&&p.active.close(),p.active=e,()=>{p.active===e&&(p.active=null),p.lastClosedAt=Date.now()}},[M,V]),t.useDismiss([N,P],{active:M,outsidePress:!1,onDismiss:()=>V(!1)});let[ue,de]=(0,o.useState)(()=>c(_,null));(0,o.useLayoutEffect)(()=>{M&&de(c(_,N.current))},[M,_]);let W=n.useFloatingPosition(N,F,{open:M,placement:ue,offset:v}),fe=W.placement.split(`-`)[0],G=W.arrow?W.arrow.x??W.arrow.y??null:null;(0,o.useEffect)(()=>{re&&F&&F.querySelector(h)&&console.warn("[Tooltip] `content` contains focusable elements. Tooltips can't receive focus, so keyboard users can't reach them. Use a Popover for interactive content.")},[F,f]);let K=o.Children.only(u),q=(0,o.useRef)(void 0);q.current=(0,o.isValidElement)(K)?K.props.ref:void 0;let pe=(0,o.useCallback)(e=>{N.current=e,r.assignRef(q.current,e)},[]),me=(0,o.useCallback)(e=>{P.current=e,I(e)},[]);if(!(0,o.isValidElement)(K))return u;let J=K.props,Y=f!=null&&f!==!1&&f!==``&&!S,X=g!==void 0&&g.length>0,Z=`${A}-content`,Q=`${A}-shortcut`,$={ref:pe};Y&&($.onPointerEnter=e=>{J.onPointerEnter?.(e),e.pointerType!==`touch`&&(L.current=!0,M?B():H())},$.onPointerLeave=e=>{J.onPointerLeave?.(e),e.pointerType!==`touch`&&(L.current=!1,M?U():R.current||B())},$.onFocus=e=>{J.onFocus?.(e),ne(e.currentTarget)&&(R.current=!0,M||H())},$.onBlur=e=>{J.onBlur?.(e),R.current&&(R.current=!1,!L.current&&V(!1))},T===`label`?($[`aria-labelledby`]=m(J[`aria-labelledby`],Z),X&&($[`aria-describedby`]=m(J[`aria-describedby`],Q))):$[`aria-describedby`]=m(J[`aria-describedby`],A));let he={...se,...W.style,"--_tooltip-offset":`${v}px`,...G===null?null:{"--_arrow-pos":`${G}px`}};return(0,s.jsxs)(s.Fragment,{children:[(0,o.cloneElement)(K,$),Y&&(0,s.jsx)(ee.Portal,{children:(0,s.jsx)(`div`,{ref:me,id:A,role:`tooltip`,hidden:!M,"data-side":fe,className:i.cx(a.default.tooltip,l[w],oe),style:he,onPointerEnter:e=>{e.pointerType!==`touch`&&(L.current=!0,B())},onPointerLeave:e=>{e.pointerType!==`touch`&&(L.current=!1,U())},children:(0,s.jsxs)(`div`,{className:a.default.bubble,children:[(0,s.jsx)(`span`,{id:Z,className:a.default.content,children:f}),X&&(0,s.jsx)(`span`,{id:Q,className:a.default.shortcut,children:(0,s.jsx)(te.KbdShortcut,{keys:g,size:`sm`,variant:`outline`})}),C&&(0,s.jsx)(`span`,{className:a.default.arrow,"aria-hidden":`true`})]})})})]})}exports.Tooltip=g,exports.TooltipProvider=f;
+"use client";const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useDismiss.cjs.js"),n=require("../../../hooks/useFloatingPosition.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../../utils/refs.cjs.js"),ee=require("../../primitives/Kbd/Kbd.cjs.js"),te=require("../../utilities/Portal/Portal.cjs.js"),a=require("./Tooltip.module.css.cjs.js");let o=require("react"),s=require("react/jsx-runtime");function c(e,t){if(e!==`start`&&e!==`end`)return e;let n=t?getComputedStyle(t).direction===`rtl`:!1;return e===`end`===n?`left`:`right`}var l={neutral:a.default.neutral,primary:a.default.primary},u={delay:400,closeDelay:100,skipDelayDuration:300},d=(0,o.createContext)(u);function f({delay:e=u.delay,closeDelay:t=u.closeDelay,skipDelayDuration:n=u.skipDelayDuration,children:r}){let i=(0,o.useMemo)(()=>({delay:e,closeDelay:t,skipDelayDuration:n}),[e,t,n]);return(0,s.jsx)(d.Provider,{value:i,children:r})}var p={active:null,lastClosedAt:-1/0};function m(...e){return e.filter(Boolean).join(` `)||void 0}function ne(e){try{return e.matches(`:focus-visible`)}catch{return!0}}var h=globalThis.process?.env?.NODE_ENV!==`production`,g=`a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])`;function _({children:u,content:f,shortcut:_,placement:v=`top`,offset:y=8,open:re,defaultOpen:b=!1,onOpenChange:x,delay:ie,closeDelay:ae,disabled:S=!1,showArrow:C=!0,tone:w=`neutral`,relationship:T=`description`,className:oe,style:se,id:ce}){let E=(0,o.useContext)(d),D=ie??E.delay,O=ae??E.closeDelay,k=(0,o.useId)(),A=ce??`tooltip-${k}`,[le,j]=e.useControllableState({value:re,defaultValue:b,onChange:x}),M=le&&!S,N=(0,o.useRef)(null),P=(0,o.useRef)(null),[F,I]=(0,o.useState)(null),L=(0,o.useRef)(!1),R=(0,o.useRef)(!1),z=(0,o.useRef)(void 0),B=(0,o.useCallback)(()=>{z.current!==void 0&&clearTimeout(z.current),z.current=void 0},[]);(0,o.useEffect)(()=>B,[B]);let V=(0,o.useCallback)(e=>{B(),j(e)},[B,j]),H=()=>{B(),S||(p.active!==null||Date.now()-p.lastClosedAt<E.skipDelayDuration||D<=0?V(!0):z.current=setTimeout(()=>V(!0),D))},U=()=>{B(),L.current||R.current||(O<=0?V(!1):z.current=setTimeout(()=>V(!1),O))};(0,o.useEffect)(()=>{if(!M)return;let e={close:()=>V(!1)};return p.active&&p.active.close(),p.active=e,()=>{p.active===e&&(p.active=null),p.lastClosedAt=Date.now()}},[M,V]),t.useDismiss([N,P],{active:M,outsidePress:!1,onDismiss:()=>V(!1)});let[ue,de]=(0,o.useState)(()=>c(v,null));(0,o.useLayoutEffect)(()=>{M&&de(c(v,N.current))},[M,v]);let W=n.useFloatingPosition(N,F,{open:M,placement:ue,offset:y}),fe=W.placement.split(`-`)[0],G=W.arrow?W.arrow.x??W.arrow.y??null:null;(0,o.useEffect)(()=>{h&&F&&F.querySelector(g)&&console.warn("[Tooltip] `content` contains focusable elements. Tooltips can't receive focus, so keyboard users can't reach them. Use a Popover for interactive content.")},[F,f]);let K=o.Children.only(u),q=(0,o.useRef)(void 0);q.current=(0,o.isValidElement)(K)?K.props.ref:void 0;let pe=(0,o.useCallback)(e=>{N.current=e,i.assignRef(q.current,e)},[]),me=(0,o.useCallback)(e=>{P.current=e,I(e)},[]);if(!(0,o.isValidElement)(K))return u;let J=K.props,Y=f!=null&&f!==!1&&f!==``&&!S,X=_!==void 0&&_.length>0,Z=`${A}-content`,Q=`${A}-shortcut`,$={ref:pe};Y&&($.onPointerEnter=e=>{J.onPointerEnter?.(e),e.pointerType!==`touch`&&(L.current=!0,M?B():H())},$.onPointerLeave=e=>{J.onPointerLeave?.(e),e.pointerType!==`touch`&&(L.current=!1,M?U():R.current||B())},$.onFocus=e=>{J.onFocus?.(e),ne(e.currentTarget)&&(R.current=!0,M||H())},$.onBlur=e=>{J.onBlur?.(e),R.current&&(R.current=!1,L.current||V(!1))},T===`label`?($[`aria-labelledby`]=m(J[`aria-labelledby`],Z),X&&($[`aria-describedby`]=m(J[`aria-describedby`],Q))):$[`aria-describedby`]=m(J[`aria-describedby`],A));let he={...se,...W.style,"--_tooltip-offset":`${y}px`,...G===null?null:{"--_arrow-pos":`${G}px`}};return(0,s.jsxs)(s.Fragment,{children:[(0,o.cloneElement)(K,$),Y&&(0,s.jsx)(te.Portal,{children:(0,s.jsx)(`div`,{ref:me,id:A,role:`tooltip`,hidden:!M,"data-side":fe,className:r.cx(a.default.tooltip,l[w],oe),style:he,onPointerEnter:e=>{e.pointerType!==`touch`&&(L.current=!0,B())},onPointerLeave:e=>{e.pointerType!==`touch`&&(L.current=!1,U())},children:(0,s.jsxs)(`div`,{className:a.default.bubble,children:[(0,s.jsx)(`span`,{id:Z,className:a.default.content,children:f}),X&&(0,s.jsx)(`span`,{id:Q,className:a.default.shortcut,children:(0,s.jsx)(ee.KbdShortcut,{keys:_,size:`sm`,variant:`outline`})}),C&&(0,s.jsx)(`span`,{className:a.default.arrow,"aria-hidden":`true`})]})})})]})}exports.Tooltip=_,exports.TooltipProvider=f;