@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,36 @@
+//#region src/components/overlays/Modal/Modal.module.css
+var e = "_root_8lyks_39", t = "_overlay_8lyks_55", n = "_overlayIn_8lyks_1", r = "_overlayOut_8lyks_1", i = "_positioner_8lyks_97", a = "_scrollInside_8lyks_121", o = "_scrollOutside_8lyks_129", s = "_positionerFull_8lyks_137", c = "_placementCenter_8lyks_147", l = "_placementTop_8lyks_149", u = "_content_8lyks_161", d = "_contentInSheet_8lyks_1", f = "_contentOutSheet_8lyks_1", p = "_sizeSm_8lyks_233", m = "_sizeMd_8lyks_235", h = "_sizeLg_8lyks_237", g = "_sizeXl_8lyks_239", _ = "_sizeFull_8lyks_247", v = "_inner_8lyks_269", y = "_closeButton_8lyks_287", b = "_header_8lyks_305", x = "_hasClose_8lyks_319", S = "_title_8lyks_327", C = "_description_8lyks_343", w = "_body_8lyks_355", T = "_footer_8lyks_421", E = "_confirmIcon_8lyks_449", D = "_confirmIconDanger_8lyks_473", O = "_contentIn_8lyks_1", k = "_contentOut_8lyks_1", A = "_mobileCard_8lyks_627", j = {
+	root: e,
+	overlay: t,
+	overlayIn: n,
+	overlayOut: r,
+	positioner: i,
+	scrollInside: a,
+	scrollOutside: o,
+	positionerFull: s,
+	placementCenter: c,
+	placementTop: l,
+	content: u,
+	contentInSheet: d,
+	contentOutSheet: f,
+	sizeSm: p,
+	sizeMd: m,
+	sizeLg: h,
+	sizeXl: g,
+	sizeFull: _,
+	inner: v,
+	closeButton: y,
+	header: b,
+	hasClose: x,
+	title: S,
+	description: C,
+	body: w,
+	footer: T,
+	confirmIcon: E,
+	confirmIconDanger: D,
+	contentIn: O,
+	contentOut: k,
+	mobileCard: A
+};
+//#endregion
+export { w as body, y as closeButton, E as confirmIcon, D as confirmIconDanger, u as content, O as contentIn, d as contentInSheet, k as contentOut, f as contentOutSheet, j as default, C as description, T as footer, x as hasClose, b as header, v as inner, A as mobileCard, t as overlay, n as overlayIn, r as overlayOut, c as placementCenter, l as placementTop, i as positioner, s as positionerFull, e as root, a as scrollInside, o as scrollOutside, _ as sizeFull, h as sizeLg, m as sizeMd, p as sizeSm, g as sizeXl, S as title };

package/dist/components/overlays/Modal/ModalContent.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useOverlayLayer.cjs.js"),t=require("../../../hooks/useDismiss.cjs.js"),n=require("../../../hooks/useFocusTrap.cjs.js"),r=require("../../../hooks/useInertOutside.cjs.js"),i=require("../../../hooks/useScrollLock.cjs.js"),a=require("../../../utils/refs.cjs.js"),o=require("../../../utils/cx.cjs.js"),s=require("../../utilities/Portal/Portal.cjs.js"),c=require("../../primitives/Button/Button.cjs.js"),l=require("../../primitives/Icon/icons.cjs.js"),u=require("./ModalContext.cjs.js"),d=require("./Modal.module.css.cjs.js");let f=require("react"),p=require("react/jsx-runtime");var m={sm:d.default.sizeSm,md:d.default.sizeMd,lg:d.default.sizeLg,xl:d.default.sizeXl,full:d.default.sizeFull},h={center:d.default.placementCenter,top:d.default.placementTop},g={inside:d.default.scrollInside,outside:d.default.scrollOutside},_=globalThis.process?.env?.NODE_ENV!==`production`;function v(e){return Math.max(0,...e.split(`,`).map(e=>{let t=parseFloat(e);return Number.isNaN(t)?0:e.trim().endsWith(`ms`)?t:t*1e3}))}var y=({overlayClassName:y,className:b,children:x,ref:S,onFocus:C,"aria-labelledby":w,"aria-describedby":T,...E})=>{let D=u.useModalContext(`Modal.Content`),{open:O,setOpen:k}=D,[A,j]=(0,f.useState)(O);O&&!A&&j(!0);let[M,N]=(0,f.useState)(null),[P,F]=(0,f.useState)(null),I=(0,f.useRef)(null),L=(0,f.useMemo)(()=>a.mergeRefs(S,I,F),[S]),R=(0,f.useRef)(D);R.current=D;let z=(0,f.useRef)(null),B=(0,f.useRef)(null),V=e.useOverlayLayer({active:O&&M!==null,modal:!0,elements:()=>[M]});(0,f.useLayoutEffect)(()=>{if(!O||!M)return;let e=i.lockScroll(),t=r.inertOutsideLayer(V.id,M);return()=>{t(),e(),z.current=null;let{finalFocusRef:n,returnFocusRef:r,triggerRef:i}=R.current;[n?.current,r.current,i.current].find(e=>!!e&&e.isConnected&&!e.closest(`[inert]`))?.focus()}},[O,M,V.id]);let H=O&&!V.hasModalAbove&&P!==null;(0,f.useLayoutEffect)(()=>{let e=I.current;if(!H||!e)return;let{initialFocusRef:t,role:r}=R.current,i=e.querySelector(`[data-modal-footer]`),a=e.querySelector(`[data-modal-body]`),o=z.current;B.current=(o&&e.contains(o)?o:null)??t?.current??(r===`alertdialog`&&i?i.querySelector(`[data-modal-close]`)??n.getFocusable(i)[0]:null)??(a?n.getFocusable(a)[0]:null)??e},[H]),n.useFocusTrap(P,{active:O&&P!==null,initialFocusRef:B,restoreFocus:!1,layer:V}),t.useDismiss([I],{active:O,onDismiss:()=>k(!1),escapeKey:D.closeOnEscape,outsidePress:!1,layer:V}),(0,f.useEffect)(()=>{if(O||!A)return;let e=I.current,t=e?v(window.getComputedStyle(e).animationDuration):0;if(!e||t===0){j(!1);return}let n=()=>j(!1),r=t=>{t.target===e&&n()};e.addEventListener(`animationend`,r);let i=window.setTimeout(n,t+50);return()=>{e.removeEventListener(`animationend`,r),window.clearTimeout(i)}},[O,A]);let U=E[`aria-label`];(0,f.useEffect)(()=>{_&&O&&P&&!D.titleId&&!w&&!U&&console.warn(`[Modal] Add a <Modal.Title> (or pass aria-label / aria-labelledby to <Modal.Content>) so the dialog has an accessible name.`)},[O,P,D.titleId,w,U]);let W=(0,f.useRef)(!1),G=e=>{W.current=e.target===e.currentTarget&&V.getIsTopmost()},K=e=>{let t=W.current;W.current=!1,t&&e.target===e.currentTarget&&D.closeOnOverlayPress&&O&&k(!1)},q=e=>{C?.(e),e.target instanceof HTMLElement&&e.currentTarget.contains(e.target)&&(z.current=e.target)};if(!O&&!A)return null;let J=w??D.titleId??void 0,Y=[T,D.descriptionId].filter(Boolean).join(` `)||void 0,X=O?`open`:`closed`;return(0,p.jsx)(s.Portal,{children:(0,p.jsx)(e.OverlayLayerProvider,{layer:V,children:(0,p.jsxs)(`div`,{ref:N,className:d.default.root,"data-state":X,inert:!O,children:[(0,p.jsx)(`div`,{className:o.cx(d.default.overlay,y),"data-state":X,"aria-hidden":`true`}),(0,p.jsx)(`div`,{className:o.cx(d.default.positioner,h[D.placement],g[D.scrollBehavior],D.size===`full`&&d.default.positionerFull,D.mobileLayout===`card`&&D.size!==`full`&&d.default.mobileCard),onPointerDown:G,onClick:K,children:(0,p.jsxs)(`div`,{role:D.role,"aria-modal":`true`,"aria-labelledby":J,"aria-describedby":Y,tabIndex:-1,...E,ref:L,onFocus:q,className:o.cx(d.default.content,m[D.size],g[D.scrollBehavior],D.showClose&&d.default.hasClose,b),"data-state":X,"data-size":D.size,children:[D.showClose&&(0,p.jsx)(c.IconButton,{"aria-label":D.closeLabel,variant:`ghost`,tone:`neutral`,size:`md`,className:d.default.closeButton,onClick:()=>k(!1),children:(0,p.jsx)(l.CloseIcon,{})}),(0,p.jsx)(`div`,{className:d.default.inner,children:x})]})})]})})})};exports.ModalContent=y;

package/dist/components/overlays/Modal/ModalContent.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef } from 'react';
+export interface ModalContentProps extends ComponentPropsWithRef<"div"> {
+    /** Class name for the overlay (backdrop) behind the dialog. */
+    overlayClassName?: string;
+}
+/**
+ * The dialog surface. Renders in a portal with an overlay, and is mounted
+ * only while open (plus its exit animation). Put `Modal.Header`,
+ * `Modal.Body`, and `Modal.Footer` inside it. All native `div` props go to
+ * the element with `role="dialog"`.
+ */
+export declare const ModalContent: ({ overlayClassName, className, children, ref, onFocus, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ModalContentProps) => import("react").JSX.Element | null;

package/dist/components/overlays/Modal/ModalContent.mjs

@@ -0,0 +1,160 @@
+import { OverlayLayerProvider as e, useOverlayLayer as t } from "../../../hooks/useOverlayLayer.mjs";
+import { useDismiss as n } from "../../../hooks/useDismiss.mjs";
+import { getFocusable as r, useFocusTrap as i } from "../../../hooks/useFocusTrap.mjs";
+import { inertOutsideLayer as a } from "../../../hooks/useInertOutside.mjs";
+import { lockScroll as o } from "../../../hooks/useScrollLock.mjs";
+import { mergeRefs as s } from "../../../utils/refs.mjs";
+import { cx as c } from "../../../utils/cx.mjs";
+import { Portal as l } from "../../utilities/Portal/Portal.mjs";
+import { IconButton as u } from "../../primitives/Button/Button.mjs";
+import { CloseIcon as d } from "../../primitives/Icon/icons.mjs";
+import { useModalContext as f } from "./ModalContext.mjs";
+import p from "./Modal.module.css.mjs";
+import { useEffect as m, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/overlays/Modal/ModalContent.tsx
+var x = {
+	sm: p.sizeSm,
+	md: p.sizeMd,
+	lg: p.sizeLg,
+	xl: p.sizeXl,
+	full: p.sizeFull
+}, S = {
+	center: p.placementCenter,
+	top: p.placementTop
+}, C = {
+	inside: p.scrollInside,
+	outside: p.scrollOutside
+}, w = globalThis.process?.env?.NODE_ENV !== "production";
+function T(e) {
+	return Math.max(0, ...e.split(",").map((e) => {
+		let t = parseFloat(e);
+		return Number.isNaN(t) ? 0 : e.trim().endsWith("ms") ? t : t * 1e3;
+	}));
+}
+var E = ({ overlayClassName: E, className: D, children: O, ref: k, onFocus: A, "aria-labelledby": j, "aria-describedby": M, ...N }) => {
+	let P = f("Modal.Content"), { open: F, setOpen: I } = P, [L, R] = v(F);
+	F && !L && R(!0);
+	let [z, B] = v(null), [V, H] = v(null), U = _(null), W = g(() => s(k, U, H), [k]), G = _(P);
+	G.current = P;
+	let K = _(null), q = _(null), J = t({
+		active: F && z !== null,
+		modal: !0,
+		elements: () => [z]
+	});
+	h(() => {
+		if (!F || !z) return;
+		let e = o(), t = a(J.id, z);
+		return () => {
+			t(), e(), K.current = null;
+			let { finalFocusRef: n, returnFocusRef: r, triggerRef: i } = G.current;
+			[
+				n?.current,
+				r.current,
+				i.current
+			].find((e) => !!e && e.isConnected && !e.closest("[inert]"))?.focus();
+		};
+	}, [
+		F,
+		z,
+		J.id
+	]);
+	let Y = F && !J.hasModalAbove && V !== null;
+	h(() => {
+		let e = U.current;
+		if (!Y || !e) return;
+		let { initialFocusRef: t, role: n } = G.current, i = e.querySelector("[data-modal-footer]"), a = e.querySelector("[data-modal-body]"), o = K.current;
+		q.current = (o && e.contains(o) ? o : null) ?? t?.current ?? (n === "alertdialog" && i ? i.querySelector("[data-modal-close]") ?? r(i)[0] : null) ?? (a ? r(a)[0] : null) ?? e;
+	}, [Y]), i(V, {
+		active: F && V !== null,
+		initialFocusRef: q,
+		restoreFocus: !1,
+		layer: J
+	}), n([U], {
+		active: F,
+		onDismiss: () => I(!1),
+		escapeKey: P.closeOnEscape,
+		outsidePress: !1,
+		layer: J
+	}), m(() => {
+		if (F || !L) return;
+		let e = U.current, t = e ? T(window.getComputedStyle(e).animationDuration) : 0;
+		if (!e || t === 0) {
+			R(!1);
+			return;
+		}
+		let n = () => R(!1), r = (t) => {
+			t.target === e && n();
+		};
+		e.addEventListener("animationend", r);
+		let i = window.setTimeout(n, t + 50);
+		return () => {
+			e.removeEventListener("animationend", r), window.clearTimeout(i);
+		};
+	}, [F, L]);
+	let X = N["aria-label"];
+	m(() => {
+		w && F && V && !P.titleId && !j && !X && console.warn("[Modal] Add a <Modal.Title> (or pass aria-label / aria-labelledby to <Modal.Content>) so the dialog has an accessible name.");
+	}, [
+		F,
+		V,
+		P.titleId,
+		j,
+		X
+	]);
+	let Z = _(!1), Q = (e) => {
+		Z.current = e.target === e.currentTarget && J.getIsTopmost();
+	}, ee = (e) => {
+		let t = Z.current;
+		Z.current = !1, t && e.target === e.currentTarget && P.closeOnOverlayPress && F && I(!1);
+	}, te = (e) => {
+		A?.(e), e.target instanceof HTMLElement && e.currentTarget.contains(e.target) && (K.current = e.target);
+	};
+	if (!F && !L) return null;
+	let ne = j ?? P.titleId ?? void 0, re = [M, P.descriptionId].filter(Boolean).join(" ") || void 0, $ = F ? "open" : "closed";
+	return /* @__PURE__ */ y(l, { children: /* @__PURE__ */ y(e, {
+		layer: J,
+		children: /* @__PURE__ */ b("div", {
+			ref: B,
+			className: p.root,
+			"data-state": $,
+			inert: !F,
+			children: [/* @__PURE__ */ y("div", {
+				className: c(p.overlay, E),
+				"data-state": $,
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ y("div", {
+				className: c(p.positioner, S[P.placement], C[P.scrollBehavior], P.size === "full" && p.positionerFull, P.mobileLayout === "card" && P.size !== "full" && p.mobileCard),
+				onPointerDown: Q,
+				onClick: ee,
+				children: /* @__PURE__ */ b("div", {
+					role: P.role,
+					"aria-modal": "true",
+					"aria-labelledby": ne,
+					"aria-describedby": re,
+					tabIndex: -1,
+					...N,
+					ref: W,
+					onFocus: te,
+					className: c(p.content, x[P.size], C[P.scrollBehavior], P.showClose && p.hasClose, D),
+					"data-state": $,
+					"data-size": P.size,
+					children: [P.showClose && /* @__PURE__ */ y(u, {
+						"aria-label": P.closeLabel,
+						variant: "ghost",
+						tone: "neutral",
+						size: "md",
+						className: p.closeButton,
+						onClick: () => I(!1),
+						children: /* @__PURE__ */ y(d, {})
+					}), /* @__PURE__ */ y("div", {
+						className: p.inner,
+						children: O
+					})]
+				})
+			})]
+		})
+	}) });
+};
+//#endregion
+export { E as ModalContent };

package/dist/components/overlays/Modal/ModalContext.cjs.js

@@ -0,0 +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 used inside <Modal>.`);return r}exports.ModalContext=t,exports.useModalContext=n;

package/dist/components/overlays/Modal/ModalContext.d.ts

@@ -0,0 +1,56 @@
+import { RefObject } from 'react';
+/** Width of the modal on screens 640px and wider. Below that it is a full-width sheet. */
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+/** Vertical position on screens 640px and wider (and below, with `mobileLayout="card"`). */
+export type ModalPlacement = "center" | "top";
+/**
+ * Layout below 640px.
+ * - `sheet`: a full-width sheet pinned to the bottom, rounded on top.
+ * - `card`: the same rounded card as on larger screens, inset from the
+ *   edges and positioned by `placement` (e.g. a command palette at the top).
+ */
+export type ModalMobileLayout = "sheet" | "card";
+/**
+ * What scrolls when content is taller than the viewport.
+ * - `inside`: the modal fits the viewport and `Modal.Body` scrolls, keeping
+ *   the header and footer in view.
+ * - `outside`: the modal grows with its content and the whole overlay scrolls.
+ */
+export type ModalScrollBehavior = "inside" | "outside";
+/**
+ * ARIA role of the dialog. Use `alertdialog` for confirmations that
+ * interrupt the user and need a response.
+ */
+export type ModalRole = "dialog" | "alertdialog";
+/** @internal Shared state between `Modal` and its parts. */
+export interface ModalContextValue {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    size: ModalSize;
+    placement: ModalPlacement;
+    mobileLayout: ModalMobileLayout;
+    scrollBehavior: ModalScrollBehavior;
+    role: ModalRole;
+    closeOnOverlayPress: boolean;
+    closeOnEscape: boolean;
+    showClose: boolean;
+    closeLabel: string;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    finalFocusRef?: RefObject<HTMLElement | null>;
+    /** The element passed to `Modal.Trigger`, used as a focus-return fallback. */
+    triggerRef: RefObject<HTMLElement | null>;
+    /** The element focused just before the modal opened. */
+    returnFocusRef: RefObject<HTMLElement | null>;
+    /** Default id of the title (overridden when `Modal.Title` gets an `id`). */
+    defaultTitleId: string;
+    /** Default id of the description. */
+    defaultDescriptionId: string;
+    /** Ids of the mounted title and description, or null when absent. */
+    titleId: string | null;
+    descriptionId: string | null;
+    registerTitle: (id: string) => () => void;
+    registerDescription: (id: string) => () => void;
+}
+export declare const ModalContext: import('react').Context<ModalContextValue | null>;
+/** @internal Reads the nearest `Modal`; throws a helpful error when used outside one. */
+export declare function useModalContext(part: string): ModalContextValue;

package/dist/components/overlays/Modal/ModalContext.mjs

@@ -0,0 +1,10 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/components/overlays/Modal/ModalContext.ts
+var n = e(null);
+function r(e) {
+	let r = t(n);
+	if (!r) throw Error(`<${e}> must be used inside <Modal>.`);
+	return r;
+}
+//#endregion
+export { n as ModalContext, r as useModalContext };

package/dist/components/overlays/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Modal';
+export * from './ConfirmModal';

package/dist/components/overlays/Modal/useScrollRegion.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t(t){let[n,r]=(0,e.useState)(null),[i,a]=(0,e.useState)(!1),o=(0,e.useCallback)(e=>r(e),[]);return(0,e.useEffect)(()=>{if(!t||!n){a(!1);return}let e=()=>a(n.scrollHeight>n.clientHeight+1);if(e(),typeof ResizeObserver>`u`)return;let r=new ResizeObserver(e),i=()=>{r.disconnect(),r.observe(n),Array.from(n.children).forEach(e=>r.observe(e))};i();let o=new MutationObserver(()=>{i(),e()});return o.observe(n,{childList:!0}),()=>{r.disconnect(),o.disconnect()}},[t,n]),[o,i]}exports.useScrollRegion=t;

package/dist/components/overlays/Modal/useScrollRegion.d.ts

@@ -0,0 +1,7 @@
+import { RefCallback } from 'react';
+/**
+ * Tracks whether an element overflows vertically (so it scrolls). Used by
+ * `Modal.Body` to become a focusable region only when it actually scrolls
+ * (WCAG 2.1.1: scrollable content must be reachable by keyboard).
+ */
+export declare function useScrollRegion(enabled: boolean): [RefCallback<HTMLElement>, boolean];

package/dist/components/overlays/Modal/useScrollRegion.mjs

@@ -0,0 +1,25 @@
+import { useCallback as e, useEffect as t, useState as n } from "react";
+//#region src/components/overlays/Modal/useScrollRegion.ts
+function r(r) {
+	let [i, a] = n(null), [o, s] = n(!1), c = e((e) => a(e), []);
+	return t(() => {
+		if (!r || !i) {
+			s(!1);
+			return;
+		}
+		let e = () => s(i.scrollHeight > i.clientHeight + 1);
+		if (e(), typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(e), n = () => {
+			t.disconnect(), t.observe(i), Array.from(i.children).forEach((e) => t.observe(e));
+		};
+		n();
+		let a = new MutationObserver(() => {
+			n(), e();
+		});
+		return a.observe(i, { childList: !0 }), () => {
+			t.disconnect(), a.disconnect();
+		};
+	}, [r, i]), [c, o];
+}
+//#endregion
+export { r as useScrollRegion };

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

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/refs.cjs.js"),r=require("../../../hooks/useMergedRef.cjs.js"),i=require("../../../utils/cx.cjs.js"),a=require("../../../utils/slot.cjs.js"),o=require("../../primitives/Button/Button.cjs.js"),s=require("./PopoverContext.cjs.js"),c=require("./Popover.module.css.cjs.js"),l=require("./PopoverContent.cjs.js");let u=require("react"),d=require("react/jsx-runtime");var f=({children:t,open:n,defaultOpen:r=!1,onOpenChange:i,placement:a=`bottom`,offset:o,modal:c=!1,closeOnOutsidePress:l=!0,closeOnEscape:f=!0,closeOnFocusOut:p=!0,closeOnAnchorFocus:m=!1})=>{let[h,g]=e.useControllableState({value:n,defaultValue:r,onChange:i}),_=(0,u.useRef)(null),v=(0,u.useRef)(null),y=(0,u.useRef)(null),b=(0,u.useRef)(null),x=(0,u.useRef)(`auto`),[S,C]=(0,u.useState)(!1),[w,T]=(0,u.useState)(!1),E=(0,u.useId)(),D=(0,u.useCallback)((e,t=`auto`)=>{e||(x.current=t),g(e)},[g]);(0,u.useLayoutEffect)(()=>{if(h){x.current=`auto`;let e=document.activeElement;b.current=e instanceof HTMLElement&&e!==document.body?e:null}},[h]),(0,u.useEffect)(()=>{let e=v.current;if(!h||!m||!e)return;let t=e=>{let t=e.target;t&&!_.current?.contains(t)&&D(!1,`none`)};return e.addEventListener(`focusin`,t),()=>e.removeEventListener(`focusin`,t)},[h,m,D]);let O=(0,u.useMemo)(()=>({open:h,setOpen:D,placement:a,offset:o,modal:c,closeOnOutsidePress:l,closeOnEscape:f,closeOnFocusOut:p,triggerRef:_,anchorRef:v,contentRef:y,returnFocusRef:b,restoreModeRef:x,contentId:`${E}-content`,titleId:`${E}-title`,descriptionId:`${E}-description`,hasTitle:S,hasDescription:w,setHasTitle:C,setHasDescription:T}),[h,D,a,o,c,l,f,p,E,S,w]);return(0,d.jsx)(s.PopoverContext.Provider,{value:O,children:t})};function p(e){let{variant:t,tone:n,size:r,radius:i,startIcon:a,endIcon:o,fullWidth:s,...c}=e;return c}var m=({children:e,asChild:t,onClick:i,ref:c,...l})=>{let u=s.usePopoverContext(`Popover.Trigger`),f=t??n.isSingleElement(e),m=f&&n.isSingleElement(e)?n.getChildRef(e):void 0,h=r.useMergedRef(u.triggerRef,c,m),g=e=>{i?.(e),!e.defaultPrevented&&u.setOpen(!u.open,`force`)},_={"aria-haspopup":`dialog`,"aria-expanded":u.open,"aria-controls":u.open?u.contentId:void 0,"data-state":u.open?`open`:`closed`};return f&&n.isSingleElement(e)?a.cloneSlot(e,{...p(l),..._,onClick:g},h):(0,d.jsx)(o.Button,{...l,..._,ref:h,onClick:g,children:e})},h=({children:e,asChild:t,ref:i,...o})=>{let c=s.usePopoverContext(`Popover.Anchor`),l=t??n.isSingleElement(e),u=l&&n.isSingleElement(e)?n.getChildRef(e):void 0,f=r.useMergedRef(c.anchorRef,i,u);return l&&n.isSingleElement(e)?a.cloneSlot(e,o,f):(0,d.jsx)(`div`,{...o,ref:f,children:e})},g=({level:e=2,className:t,id:n,...r})=>{let a=s.usePopoverContext(`Popover.Title`),{setHasTitle:o}=a;(0,u.useLayoutEffect)(()=>(o(!0),()=>o(!1)),[o]);let l=`h${e}`;return(0,d.jsx)(l,{...r,id:n??a.titleId,className:i.cx(c.default.title,t)})},_=({className:e,id:t,...n})=>{let r=s.usePopoverContext(`Popover.Description`),{setHasDescription:a}=r;return(0,u.useLayoutEffect)(()=>(a(!0),()=>a(!1)),[a]),(0,d.jsx)(`p`,{...n,id:t??r.descriptionId,className:i.cx(c.default.description,e)})},v=({children:e,asChild:i,onClick:c,ref:l,variant:u=`ghost`,...f})=>{let m=t.useMessages(),h=e??m.popover.close,g=s.usePopoverContext(`Popover.Close`),_=i??n.isSingleElement(h),v=_&&n.isSingleElement(h)?n.getChildRef(h):void 0,y=r.useMergedRef(l,v),b=e=>{c?.(e),e.defaultPrevented||g.setOpen(!1,`force`)};return _&&n.isSingleElement(h)?a.cloneSlot(h,{...p(f),onClick:b},y):(0,d.jsx)(o.Button,{...f,variant:u,ref:y,onClick:b,children:h})},y=Object.assign(f,{Trigger:m,Anchor:h,Content:l.PopoverContent,Title:g,Description:_,Close:v});exports.Popover=y,exports.PopoverAnchor=h,exports.PopoverClose=v,exports.PopoverContent=l.PopoverContent,exports.PopoverDescription=_,exports.PopoverTitle=g,exports.PopoverTrigger=m;

package/dist/components/overlays/Popover/Popover.d.ts

@@ -0,0 +1,96 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Placement } from '../../../types/common';
+import { ButtonOwnProps, ButtonStyleProps } from '../../primitives/Button';
+export { PopoverContent } from './PopoverContent';
+export type { PopoverContentProps, PopoverSize } from './PopoverContent';
+export interface PopoverProps {
+    /** `Popover.Trigger`, `Popover.Content`, and optionally `Popover.Anchor`. */
+    children?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state whenever it changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Preferred side and alignment relative to the anchor. Flips when there isn't room. @default "bottom" */
+    placement?: Placement;
+    /** Gap between the anchor and the popover, in px. Defaults to 8, or 12 with `showArrow`. */
+    offset?: number;
+    /**
+     * Modal mode: traps Tab inside the popover and sets `aria-modal="true"`.
+     * Use it for short, focused tasks that must be finished or dismissed. @default false
+     */
+    modal?: boolean;
+    /** Close when the user presses outside the popover, trigger, and anchor. @default true */
+    closeOnOutsidePress?: boolean;
+    /** Close when the user presses Escape. Nested popovers close innermost first. @default true */
+    closeOnEscape?: boolean;
+    /** Close when keyboard focus moves outside the popover (non-modal only). @default true */
+    closeOnFocusOut?: boolean;
+    /**
+     * Close when focus moves to the `Popover.Anchor` (anywhere in it except
+     * the trigger), leaving focus there. For a picker anchored to a text field:
+     * clicking or tabbing back into the field puts the popup away. Works in
+     * modal mode too. @default false
+     */
+    closeOnAnchorFocus?: boolean;
+}
+export interface PopoverTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children">, ButtonStyleProps, Pick<ButtonOwnProps, "startIcon" | "endIcon" | "fullWidth"> {
+    /**
+     * A single element (usually a `Button` or `IconButton`) to turn into the
+     * trigger, or plain content to render inside a library `Button`.
+     */
+    children: ReactNode;
+    /**
+     * Clone the single child instead of wrapping it in a `Button`. Defaults to
+     * `true` when `children` is a single element. The child must be a
+     * focusable button-like element that accepts `ref`, `onClick`, and `aria-*`.
+     */
+    asChild?: boolean;
+}
+/**
+ * The button that opens and closes the popover. Adds `aria-haspopup="dialog"`,
+ * `aria-expanded`, and `aria-controls`. Pass a single `Button`/`IconButton`
+ * to use it as-is, or plain content to get a default `Button`.
+ */
+export declare const PopoverTrigger: ({ children, asChild, onClick, ref, ...rest }: PopoverTriggerProps) => import("react").JSX.Element;
+export interface PopoverAnchorProps extends ComponentPropsWithRef<"div"> {
+    /** The element to position against. A single element is used as-is; other content is wrapped in a `div`. */
+    children?: ReactNode;
+    /** Clone the single child instead of wrapping it. Defaults to `true` when `children` is a single element. */
+    asChild?: boolean;
+}
+/**
+ * Positions the popover against this element instead of the trigger (for
+ * example, a whole input row while a small icon button opens it). Presses
+ * on the anchor don't count as outside presses.
+ */
+export declare const PopoverAnchor: ({ children, asChild, ref, ...rest }: PopoverAnchorProps) => import("react").JSX.Element;
+export interface PopoverTitleProps extends ComponentPropsWithRef<"h2"> {
+    /** Heading level. Pick it by document outline. @default 2 */
+    level?: 2 | 3 | 4 | 5 | 6;
+}
+/** The popover's heading. Names the dialog (`aria-labelledby`). */
+export declare const PopoverTitle: ({ level, className, id, ...rest }: PopoverTitleProps) => import("react").JSX.Element;
+export type PopoverDescriptionProps = ComponentPropsWithRef<"p">;
+/** Supporting text. Describes the dialog (`aria-describedby`). */
+export declare const PopoverDescription: ({ className, id, ...rest }: PopoverDescriptionProps) => import("react").JSX.Element;
+export interface PopoverCloseProps extends Omit<ComponentPropsWithRef<"button">, "children">, ButtonStyleProps, Pick<ButtonOwnProps, "startIcon" | "endIcon" | "fullWidth"> {
+    /** Button label, or a single element to turn into the close control. @default "Close" */
+    children?: ReactNode;
+    /** Clone the single child instead of wrapping it in a `Button`. Defaults to `true` when `children` is a single element. */
+    asChild?: boolean;
+}
+/**
+ * A button that closes the popover and returns focus to the trigger. Renders
+ * a ghost `Button` by default; pass a single element to use your own.
+ */
+export declare const PopoverClose: ({ children: childrenProp, asChild, onClick, ref, variant, ...rest }: PopoverCloseProps) => import("react").JSX.Element;
+export declare const Popover: (({ children, open: openProp, defaultOpen, onOpenChange, placement, offset, modal, closeOnOutsidePress, closeOnEscape, closeOnFocusOut, closeOnAnchorFocus, }: PopoverProps) => import("react").JSX.Element) & {
+    Trigger: ({ children, asChild, onClick, ref, ...rest }: PopoverTriggerProps) => import("react").JSX.Element;
+    Anchor: ({ children, asChild, ref, ...rest }: PopoverAnchorProps) => import("react").JSX.Element;
+    Content: ({ container, ...props }: import('./PopoverContent').PopoverContentProps) => import("react").JSX.Element | null;
+    Title: ({ level, className, id, ...rest }: PopoverTitleProps) => import("react").JSX.Element;
+    Description: ({ className, id, ...rest }: PopoverDescriptionProps) => import("react").JSX.Element;
+    Close: ({ children: childrenProp, asChild, onClick, ref, variant, ...rest }: PopoverCloseProps) => import("react").JSX.Element;
+};

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

@@ -0,0 +1,150 @@
+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 { 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 u from "./Popover.module.css.mjs";
+import { PopoverContent as d } from "./PopoverContent.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 }) => {
+	let [x, S] = e({
+		value: n,
+		defaultValue: r,
+		onChange: i
+	}), C = _(null), w = _(null), T = _(null), E = _(null), D = _("auto"), [O, k] = v(!1), [A, j] = v(!1), M = m(), N = f((e, t = "auto") => {
+		e || (D.current = t), S(e);
+	}, [S]);
+	h(() => {
+		if (x) {
+			D.current = "auto";
+			let e = document.activeElement;
+			E.current = e instanceof HTMLElement && e !== document.body ? e : null;
+		}
+	}, [x]), p(() => {
+		let e = w.current;
+		if (!x || !b || !e) return;
+		let t = (e) => {
+			let t = e.target;
+			t && !C.current?.contains(t) && N(!1, "none");
+		};
+		return e.addEventListener("focusin", t), () => e.removeEventListener("focusin", t);
+	}, [
+		x,
+		b,
+		N
+	]);
+	let P = g(() => ({
+		open: x,
+		setOpen: N,
+		placement: a,
+		offset: o,
+		modal: s,
+		closeOnOutsidePress: l,
+		closeOnEscape: u,
+		closeOnFocusOut: d,
+		triggerRef: C,
+		anchorRef: w,
+		contentRef: T,
+		returnFocusRef: E,
+		restoreModeRef: D,
+		contentId: `${M}-content`,
+		titleId: `${M}-title`,
+		descriptionId: `${M}-description`,
+		hasTitle: O,
+		hasDescription: A,
+		setHasTitle: k,
+		setHasDescription: j
+	}), [
+		x,
+		N,
+		a,
+		o,
+		s,
+		l,
+		u,
+		d,
+		M,
+		O,
+		A
+	]);
+	return /* @__PURE__ */ y(c.Provider, {
+		value: P,
+		children: t
+	});
+};
+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");
+	}, 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, {
+		...x(u),
+		...g,
+		onClick: h
+	}, m) : /* @__PURE__ */ y(s, {
+		...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", {
+		...s,
+		ref: f,
+		children: e
+	});
+}, w = ({ level: e = 2, className: t, id: n, ...r }) => {
+	let i = l("Popover.Title"), { setHasTitle: o } = i;
+	h(() => (o(!0), () => o(!1)), [o]);
+	let s = `h${e}`;
+	return /* @__PURE__ */ y(s, {
+		...r,
+		id: n ?? i.titleId,
+		className: a(u.title, t)
+	});
+}, 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)
+	});
+}, 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");
+	};
+	return g && r(m) ? o(m, {
+		...x(f),
+		onClick: b
+	}, v) : /* @__PURE__ */ y(s, {
+		...f,
+		variant: d,
+		ref: v,
+		onClick: b,
+		children: m
+	});
+}, D = Object.assign(b, {
+	Trigger: S,
+	Anchor: C,
+	Content: d,
+	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 };

package/dist/components/overlays/Popover/Popover.module.css.cjs.js

@@ -0,0 +1 @@
+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,"popover-in":`_popover-in_p1zsw_1`,sm:n,md:r,lg:i,title:a,description:o,closeButton:s,hasClose:c,arrow:l};exports.arrow=l,exports.closeButton=s,exports.content=t,exports.default=u,exports.description=o,exports.hasClose=c,exports.lg=i,exports.md=r,exports.positioner=e,exports.sm=n,exports.title=a;

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

@@ -0,0 +1,16 @@
+//#region 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,
+	"popover-in": "_popover-in_p1zsw_1",
+	sm: n,
+	md: r,
+	lg: i,
+	title: a,
+	description: o,
+	closeButton: s,
+	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

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