@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/overlays/Drawer/DrawerContent.mjs

@@ -0,0 +1,192 @@
+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 { useMessages as ee } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { inertOutsideLayer as te } from "../../../hooks/useInertOutside.mjs";
+import { lockScroll as a } from "../../../hooks/useScrollLock.mjs";
+import { useMergedRef as o } from "../../../hooks/useMergedRef.mjs";
+import { cx as s } from "../../../utils/cx.mjs";
+import { Portal as c } from "../../utilities/Portal/Portal.mjs";
+import { IconButton as ne } from "../../primitives/Button/Button.mjs";
+import { CloseIcon as l } from "../../primitives/Icon/icons.mjs";
+import { useDrawerContext as u } from "./DrawerContext.mjs";
+import { isDev as re } from "./internal.mjs";
+import { useDragToClose as ie } from "./useDragToClose.mjs";
+import d from "./Drawer.module.css.mjs";
+import { useEffect as f, useLayoutEffect as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/overlays/Drawer/DrawerContent.tsx
+var ae = {
+	start: d.sideStart,
+	end: d.sideEnd,
+	top: d.sideTop,
+	bottom: d.sideBottom
+}, oe = {
+	sm: d.sizeSm,
+	md: d.sizeMd,
+	lg: d.sizeLg,
+	full: d.sizeFull
+}, v = (e) => e === "sm" || e === "md" || e === "lg" || e === "full";
+function se(e) {
+	return Math.max(0, ...e.split(",").map((e) => {
+		let t = e.trim(), n = parseFloat(t);
+		return Number.isNaN(n) ? 0 : t.endsWith("ms") ? n : n * 1e3;
+	}));
+}
+var y = ({ children: y, hideCloseButton: b = !1, closeLabel: ce, overlayClassName: le, container: ue, className: de, style: fe, ref: pe, id: me, onAnimationEnd: he, dir: x, "aria-label": S, "aria-labelledby": C, "aria-describedby": w, ...ge }) => {
+	let _e = ee(), ve = ce ?? _e.drawer.close, { open: T, setOpen: E, side: D, size: O, modal: k, closeOnOverlayPress: A, closeOnEscape: j, swipeToClose: M, initialFocusRef: N, finalFocusRef: P, triggerRef: F, contentId: ye, titleId: be, descriptionId: xe, hasTitle: I, hasDescription: Se, setMountedContentId: L } = u("Drawer.Content"), R = me ?? ye, [z, B] = h(T);
+	T && !z && B(!0), p(() => {
+		L(z ? R : null);
+	}, [
+		z,
+		R,
+		L
+	]), f(() => () => L(null), [L]);
+	let [V, Ce] = h(null), [H, we] = h(null), U = m(null), Te = o(U, we, pe), W = T && H !== null, G = t({
+		active: W,
+		modal: k,
+		elements: () => [V, H]
+	}), [Ee, De] = h(void 0);
+	p(() => {
+		if (!T || x) return;
+		let e = F.current ?? document.activeElement ?? document.documentElement;
+		De(window.getComputedStyle(e).direction === "rtl" ? "rtl" : "ltr");
+	}, [
+		T,
+		x,
+		F
+	]);
+	let Oe = x ?? Ee, K = m(P);
+	K.current = P;
+	let q = m(N);
+	q.current = N, f(() => {
+		if (!T || !V || !H) return;
+		let e = document.activeElement, t = k ? te(G.id, V) : () => {}, n = k ? a() : () => {};
+		return k || (q.current?.current ?? r(H)[0] ?? H).focus(), () => {
+			t(), n();
+			let r = document.activeElement, i = !r || r === document.body || H.contains(r);
+			(k || i) && (K.current?.current ?? (F.current?.isConnected ? F.current : null) ?? (e?.isConnected ? e : null))?.focus();
+		};
+	}, [
+		T,
+		k,
+		V,
+		H,
+		F,
+		G.id
+	]);
+	let J = m(null), Y = k && W && !G.hasModalAbove;
+	f(() => {
+		if (!Y || !H) return;
+		let e = document.activeElement;
+		J.current = e && e !== H && H.contains(e) ? e : q.current?.current ?? null;
+	}, [Y, H]), i(H, {
+		active: k && W,
+		initialFocusRef: J,
+		restoreFocus: !1,
+		layer: G
+	}), n([U], {
+		active: W && j,
+		outsidePress: !1,
+		layer: G,
+		onDismiss: () => {
+			(k || U.current?.contains(document.activeElement)) && E(!1);
+		}
+	}), f(() => {
+		if (T || !z) return;
+		let e = U.current;
+		if (!e) {
+			B(!1);
+			return;
+		}
+		let t = se(window.getComputedStyle(e).animationDuration);
+		if (t === 0) {
+			B(!1);
+			return;
+		}
+		let n = window.setTimeout(() => B(!1), t + 100);
+		return () => window.clearTimeout(n);
+	}, [T, z]);
+	let ke = (e) => {
+		he?.(e), !T && e.target === e.currentTarget && B(!1);
+	}, X = ie({
+		enabled: D === "bottom" && M && T,
+		panel: H,
+		onClose: () => E(!1)
+	});
+	f(() => {
+		re && W && !I && !S && !C && console.warn("Drawer.Content: add a <Drawer.Title> (or aria-label) so the dialog has an accessible name.");
+	}, [
+		W,
+		I,
+		S,
+		C
+	]);
+	let Z = m(!1);
+	if (!z) return null;
+	let Q = T ? "open" : "closed", $ = v(O) ? void 0 : typeof O == "number" ? `${O}px` : O, Ae = {
+		...fe,
+		...$ ? { "--drawer-size": $ } : null,
+		...X.offset > 0 ? { "--drawer-drag-offset": `${X.offset}px` } : null
+	}, je = C ?? (S ? void 0 : I ? be : void 0), Me = [w, Se ? xe : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ g(c, {
+		container: ue,
+		children: /* @__PURE__ */ g(e, {
+			layer: G,
+			children: /* @__PURE__ */ _("div", {
+				ref: Ce,
+				dir: Oe,
+				"data-state": Q,
+				className: s(d.root, k ? d.rootModal : d.rootNonModal),
+				children: [k && /* @__PURE__ */ g("div", {
+					"aria-hidden": "true",
+					"data-state": Q,
+					className: s(d.overlay, le),
+					onPointerDown: () => {
+						Z.current = G.getIsTopmost();
+					},
+					onClick: () => {
+						let e = Z.current;
+						Z.current = !1, A && e && G.getIsTopmost() && E(!1);
+					}
+				}), /* @__PURE__ */ _("div", {
+					role: "dialog",
+					"aria-modal": k ? !0 : void 0,
+					"aria-label": S,
+					"aria-labelledby": je,
+					"aria-describedby": Me,
+					tabIndex: -1,
+					...ge,
+					id: R,
+					ref: Te,
+					"data-side": D,
+					"data-state": Q,
+					"data-dragging": X.dragging || void 0,
+					className: s(d.panel, ae[D], v(O) ? oe[O] : d.sizeCustom, !b && d.hasClose, de),
+					style: Ae,
+					onAnimationEnd: ke,
+					children: [
+						D === "bottom" && /* @__PURE__ */ g("div", {
+							"aria-hidden": "true",
+							className: s(d.handleArea, M && d.handleDraggable),
+							...M ? X.handlers : null,
+							children: /* @__PURE__ */ g("span", { className: d.handle })
+						}),
+						!b && /* @__PURE__ */ g(ne, {
+							"aria-label": ve,
+							variant: "ghost",
+							tone: "neutral",
+							className: d.closeButton,
+							onClick: () => E(!1),
+							children: /* @__PURE__ */ g(l, {})
+						}),
+						y
+					]
+				})]
+			})
+		})
+	});
+};
+y.displayName = "Drawer.Content";
+//#endregion
+export { y as DrawerContent };

package/dist/components/overlays/Drawer/DrawerContext.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 <Drawer>.`);return r}exports.DrawerContext=t,exports.useDrawerContext=n;

package/dist/components/overlays/Drawer/DrawerContext.d.ts

@@ -0,0 +1,39 @@
+import { RefObject } from 'react';
+/** Which edge of the viewport the drawer slides from. `start` and `end` are logical, so they flip in right-to-left layouts. */
+export type DrawerSide = "start" | "end" | "top" | "bottom";
+/** Preset drawer sizes. `full` covers the whole viewport along the drawer's axis. */
+export type DrawerSizePreset = "sm" | "md" | "lg" | "full";
+/**
+ * A preset, or a custom CSS length (`"28rem"`, `"40%"`) or pixel number.
+ * Width for `start`/`end` drawers; height for `top`/`bottom` drawers.
+ */
+export type DrawerSize = DrawerSizePreset | (string & {}) | number;
+export interface DrawerContextValue {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    side: DrawerSide;
+    size: DrawerSize;
+    modal: boolean;
+    closeOnOverlayPress: boolean;
+    closeOnEscape: boolean;
+    swipeToClose: boolean;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    finalFocusRef?: RefObject<HTMLElement | null>;
+    triggerRef: RefObject<HTMLElement | null>;
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+    hasTitle: boolean;
+    hasDescription: boolean;
+    registerTitle: () => () => void;
+    registerDescription: () => () => void;
+    /**
+     * The id of Drawer.Content while it is in the DOM (including its exit
+     * animation), or null. It is the consumer's `id` when one is passed,
+     * otherwise `contentId`.
+     */
+    mountedContentId: string | null;
+    setMountedContentId: (id: string | null) => void;
+}
+export declare const DrawerContext: import('react').Context<DrawerContextValue | null>;
+export declare function useDrawerContext(part: string): DrawerContextValue;

package/dist/components/overlays/Drawer/DrawerContext.mjs

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

package/dist/components/overlays/Drawer/DrawerParts.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useMergedRef.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("./DrawerContext.cjs.js"),r=require("./Drawer.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=({className:e,children:n,...i})=>(0,a.jsx)(`div`,{...i,className:t.cx(r.default.header,e),children:n});o.displayName=`Drawer.Header`;var s=({as:e=`h2`,className:o,children:s,...c})=>{let{titleId:l,registerTitle:u}=n.useDrawerContext(`Drawer.Title`);return(0,i.useLayoutEffect)(()=>u(),[u]),(0,a.jsx)(e,{id:l,...c,className:t.cx(r.default.title,o),children:s})};s.displayName=`Drawer.Title`;var c=({className:e,children:o,...s})=>{let{descriptionId:c,registerDescription:l}=n.useDrawerContext(`Drawer.Description`);return(0,i.useLayoutEffect)(()=>l(),[l]),(0,a.jsx)(`p`,{id:c,...s,className:t.cx(r.default.description,e),children:o})};c.displayName=`Drawer.Description`;var l=({className:o,children:s,flush:c=!1,ref:l,...u})=>{let{titleId:d,hasTitle:f}=n.useDrawerContext(`Drawer.Body`),p=(0,i.useRef)(null),m=e.useMergedRef(p,l),[h,g]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{let e=p.current;if(!e)return;let t=()=>g(e.scrollHeight>e.clientHeight+1);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);n.observe(e);for(let t of Array.from(e.children))n.observe(t);return()=>n.disconnect()},[s]),(0,a.jsx)(`div`,{role:h?`region`:void 0,"aria-labelledby":h&&f?d:void 0,tabIndex:h?0:void 0,...u,ref:m,className:t.cx(r.default.body,c&&r.default.flush,o),children:s})};l.displayName=`Drawer.Body`;var u=({className:e,children:n,...i})=>(0,a.jsx)(`div`,{...i,className:t.cx(r.default.footer,e),children:n});u.displayName=`Drawer.Footer`,exports.DrawerBody=l,exports.DrawerDescription=c,exports.DrawerFooter=u,exports.DrawerHeader=o,exports.DrawerTitle=s;

package/dist/components/overlays/Drawer/DrawerParts.d.ts

@@ -0,0 +1,65 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface DrawerHeaderProps extends ComponentPropsWithRef<"div"> {
+    /** Usually a `Drawer.Title`, optionally followed by a `Drawer.Description`. */
+    children?: ReactNode;
+}
+/**
+ * The top of the drawer: title and description. Leaves room at the end for
+ * the default close button. Doesn't scroll with the body.
+ */
+export declare const DrawerHeader: {
+    ({ className, children, ...rest }: DrawerHeaderProps): import("react").JSX.Element;
+    displayName: string;
+};
+/** Heading element used by `Drawer.Title`. */
+export type DrawerTitleElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export interface DrawerTitleProps extends ComponentPropsWithRef<"h2"> {
+    /** Heading level to render. Pick the one that fits the page outline. @default "h2" */
+    as?: DrawerTitleElement;
+    /** The drawer's name. Announced when the drawer opens (it labels the dialog). */
+    children: ReactNode;
+}
+/**
+ * The drawer's accessible name: the dialog is `aria-labelledby` this heading.
+ * Every drawer needs one (or an `aria-label` on `Drawer.Content`).
+ */
+export declare const DrawerTitle: {
+    ({ as: Element, className, children, ...rest }: DrawerTitleProps): import("react").JSX.Element;
+    displayName: string;
+};
+export interface DrawerDescriptionProps extends ComponentPropsWithRef<"p"> {
+    /** Supporting text. The dialog is `aria-describedby` it. Keep it short. */
+    children?: ReactNode;
+}
+/** A short explanation under the title, announced after the drawer's name. */
+export declare const DrawerDescription: {
+    ({ className, children, ...rest }: DrawerDescriptionProps): import("react").JSX.Element;
+    displayName: string;
+};
+export interface DrawerBodyProps extends ComponentPropsWithRef<"div"> {
+    /** The main content. Scrolls when it's taller than the drawer. */
+    children?: ReactNode;
+    /**
+     * Drop the body's padding so content (an image, a map, a nav list with
+     * its own spacing) runs edge to edge. The body still scrolls. @default false
+     */
+    flush?: boolean;
+}
+/**
+ * The scrolling middle of the drawer. When its content overflows, it becomes
+ * a focusable `region` (named by the title) so keyboard users can scroll it
+ * even if it holds no focusable elements.
+ */
+export declare const DrawerBody: {
+    ({ className, children, flush, ref, ...rest }: DrawerBodyProps): import("react").JSX.Element;
+    displayName: string;
+};
+export interface DrawerFooterProps extends ComponentPropsWithRef<"div"> {
+    /** Actions (e.g. "Apply" and "Reset"). Stays visible while the body scrolls. */
+    children?: ReactNode;
+}
+/** The sticky action row at the bottom of the drawer. Buttons align to the end and wrap on narrow drawers. */
+export declare const DrawerFooter: {
+    ({ className, children, ...rest }: DrawerFooterProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/overlays/Drawer/DrawerParts.mjs

@@ -0,0 +1,63 @@
+import { useMergedRef as e } from "../../../hooks/useMergedRef.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { useDrawerContext as n } from "./DrawerContext.mjs";
+import r from "./Drawer.module.css.mjs";
+import { useEffect as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/overlays/Drawer/DrawerParts.tsx
+var l = ({ className: e, children: n, ...i }) => /* @__PURE__ */ c("div", {
+	...i,
+	className: t(r.header, e),
+	children: n
+});
+l.displayName = "Drawer.Header";
+var u = ({ as: e = "h2", className: i, children: o, ...s }) => {
+	let { titleId: l, registerTitle: u } = n("Drawer.Title");
+	return a(() => u(), [u]), /* @__PURE__ */ c(e, {
+		id: l,
+		...s,
+		className: t(r.title, i),
+		children: o
+	});
+};
+u.displayName = "Drawer.Title";
+var d = ({ className: e, children: i, ...o }) => {
+	let { descriptionId: s, registerDescription: l } = n("Drawer.Description");
+	return a(() => l(), [l]), /* @__PURE__ */ c("p", {
+		id: s,
+		...o,
+		className: t(r.description, e),
+		children: i
+	});
+};
+d.displayName = "Drawer.Description";
+var f = ({ className: a, children: l, flush: u = !1, ref: d, ...f }) => {
+	let { titleId: p, hasTitle: m } = n("Drawer.Body"), h = o(null), g = e(h, d), [_, v] = s(!1);
+	return i(() => {
+		let e = h.current;
+		if (!e) return;
+		let t = () => v(e.scrollHeight > e.clientHeight + 1);
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		n.observe(e);
+		for (let t of Array.from(e.children)) n.observe(t);
+		return () => n.disconnect();
+	}, [l]), /* @__PURE__ */ c("div", {
+		role: _ ? "region" : void 0,
+		"aria-labelledby": _ && m ? p : void 0,
+		tabIndex: _ ? 0 : void 0,
+		...f,
+		ref: g,
+		className: t(r.body, u && r.flush, a),
+		children: l
+	});
+};
+f.displayName = "Drawer.Body";
+var p = ({ className: e, children: n, ...i }) => /* @__PURE__ */ c("div", {
+	...i,
+	className: t(r.footer, e),
+	children: n
+});
+p.displayName = "Drawer.Footer";
+//#endregion
+export { f as DrawerBody, d as DrawerDescription, p as DrawerFooter, l as DrawerHeader, u as DrawerTitle };

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

@@ -0,0 +1 @@
+export * from './Drawer';

package/dist/components/overlays/Drawer/internal.cjs.js

@@ -0,0 +1 @@
+var e=globalThis.process?.env?.NODE_ENV!==`production`;exports.isDev=e;

package/dist/components/overlays/Drawer/internal.d.ts

@@ -0,0 +1 @@
+export declare const isDev: boolean;

package/dist/components/overlays/Drawer/internal.mjs

@@ -0,0 +1,4 @@
+//#region src/components/overlays/Drawer/internal.ts
+var e = globalThis.process?.env?.NODE_ENV !== "production";
+//#endregion
+export { e as isDev };

package/dist/components/overlays/Drawer/useDragToClose.cjs.js

@@ -0,0 +1 @@
+let e=require("react");var t=.3,n=.6;function r({enabled:r,panel:i,onClose:a}){let[o,s]=(0,e.useState)(0),[c,l]=(0,e.useState)(!1),u=(0,e.useRef)(null),d=(0,e.useRef)({y:0,time:0}),f=(e,r)=>{let o=u.current;if(!o||o.pointerId!==e.pointerId)return;u.current=null,l(!1);let c=Math.max(0,e.clientY-o.y),f=Math.max(1,e.timeStamp-d.current.time),p=(e.clientY-d.current.y)/f,m=i?.getBoundingClientRect().height??0;!r&&(c>m*t||c>0&&p>n)?a():s(0)};return{offset:o,dragging:c,handlers:{onPointerDown:e=>{r&&e.button===0&&(u.current={y:e.clientY,time:e.timeStamp,pointerId:e.pointerId},d.current={y:e.clientY,time:e.timeStamp},e.currentTarget.setPointerCapture?.(e.pointerId),l(!0))},onPointerMove:e=>{let t=u.current;t&&t.pointerId===e.pointerId&&(e.timeStamp-d.current.time>100&&(d.current={y:e.clientY,time:e.timeStamp}),s(Math.max(0,e.clientY-t.y)))},onPointerUp:e=>f(e,!1),onPointerCancel:e=>f(e,!0)}}}exports.useDragToClose=r;

package/dist/components/overlays/Drawer/useDragToClose.d.ts

@@ -0,0 +1,28 @@
+import { PointerEvent as ReactPointerEvent } from 'react';
+interface DragOptions {
+    /** Whether dragging is allowed (bottom drawers with swipeToClose). */
+    enabled: boolean;
+    /** The panel being dragged, used to measure its height. */
+    panel: HTMLElement | null;
+    /** Called when the drag passes the close threshold. */
+    onClose: () => void;
+}
+interface DragState {
+    /** Current downward offset in px (0 when not dragging). */
+    offset: number;
+    /** True while a pointer is held down on the handle. */
+    dragging: boolean;
+    /** Pointer handlers for the grab-handle area. */
+    handlers: {
+        onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+        onPointerMove: (event: ReactPointerEvent<HTMLElement>) => void;
+        onPointerUp: (event: ReactPointerEvent<HTMLElement>) => void;
+        onPointerCancel: (event: ReactPointerEvent<HTMLElement>) => void;
+    };
+}
+/**
+ * Swipe-down-to-close for bottom sheets. This is an optional shortcut only:
+ * the Close button always remains, so dragging is never required (WCAG 2.5.7).
+ */
+export declare function useDragToClose({ enabled, panel, onClose }: DragOptions): DragState;
+export {};

package/dist/components/overlays/Drawer/useDragToClose.mjs

@@ -0,0 +1,42 @@
+import { useRef as e, useState as t } from "react";
+//#region src/components/overlays/Drawer/useDragToClose.ts
+var n = .3, r = .6;
+function i({ enabled: i, panel: a, onClose: o }) {
+	let [s, c] = t(0), [l, u] = t(!1), d = e(null), f = e({
+		y: 0,
+		time: 0
+	}), p = (e, t) => {
+		let i = d.current;
+		if (!i || i.pointerId !== e.pointerId) return;
+		d.current = null, u(!1);
+		let s = Math.max(0, e.clientY - i.y), l = Math.max(1, e.timeStamp - f.current.time), p = (e.clientY - f.current.y) / l, m = a?.getBoundingClientRect().height ?? 0;
+		!t && (s > m * n || s > 0 && p > r) ? o() : c(0);
+	};
+	return {
+		offset: s,
+		dragging: l,
+		handlers: {
+			onPointerDown: (e) => {
+				i && e.button === 0 && (d.current = {
+					y: e.clientY,
+					time: e.timeStamp,
+					pointerId: e.pointerId
+				}, f.current = {
+					y: e.clientY,
+					time: e.timeStamp
+				}, e.currentTarget.setPointerCapture?.(e.pointerId), u(!0));
+			},
+			onPointerMove: (e) => {
+				let t = d.current;
+				t && t.pointerId === e.pointerId && (e.timeStamp - f.current.time > 100 && (f.current = {
+					y: e.clientY,
+					time: e.timeStamp
+				}), c(Math.max(0, e.clientY - t.y)));
+			},
+			onPointerUp: (e) => p(e, !1),
+			onPointerCancel: (e) => p(e, !0)
+		}
+	};
+}
+//#endregion
+export { i as useDragToClose };

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

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.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("../../../utils/refs.cjs.js"),o=require("../../../hooks/useMergedRef.cjs.js"),s=require("../../../utils/cx.cjs.js"),c=require("../../../utils/slot.cjs.js"),l=require("../../utilities/Portal/Portal.cjs.js"),u=require("./HoverCard.module.css.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var p=(0,d.createContext)(null);function m(e){let t=(0,d.useContext)(p);if(!t)throw Error(`${e} must be rendered inside <HoverCard>.`);return t}function h(e){try{return e.matches(`:focus-visible`)}catch{return!0}}var g=({children:t,open:n,defaultOpen:r=!1,onOpenChange:i,openDelay:a=500,closeDelay:o=300})=>{let[s,c]=e.useControllableState({value:n,defaultValue:r,onChange:i}),l=(0,d.useRef)(null),u=(0,d.useRef)(null),m=(0,d.useRef)(void 0),h=`hovercard-${(0,d.useId)()}`,g=(0,d.useCallback)(()=>{window.clearTimeout(m.current),m.current=void 0},[]);(0,d.useEffect)(()=>g,[g]);let _=(0,d.useCallback)(e=>{g(),c(e)},[g,c]),v=(e,t)=>{g(),t<=0?_(e):m.current=window.setTimeout(()=>_(e),t)},y={open:s,setOpen:_,scheduleOpen:()=>{s?g():v(!0,a)},scheduleClose:()=>{s?v(!1,o):g()},cancelTimer:g,triggerRef:l,contentRef:u,contentId:h};return(0,f.jsx)(p.Provider,{value:y,children:t})},_=({children:e})=>{let t=m(`HoverCard.Trigger`),n=o.useMergedRef(t.triggerRef,a.getChildRef(e)),r=(0,d.useRef)(!1),s=(0,d.useRef)(!1),l={"data-state":t.open?`open`:`closed`,onPointerEnter:e=>{e.pointerType!==`touch`&&t.scheduleOpen()},onPointerLeave:e=>{e.pointerType!==`touch`&&!r.current&&t.scheduleClose()},onFocus:e=>{!s.current&&h(e.currentTarget)&&(r.current=!0,t.scheduleOpen())},onBlur:e=>{r.current=!1;let n=e.relatedTarget;n&&t.contentRef.current?.contains(n)||(t.open?t.setOpen(!1):t.cancelTimer())},onKeyDown:e=>{if(e.key!==`Tab`||e.shiftKey||!t.open)return;let n=t.contentRef.current,r=n?i.getFocusable(n)[0]:void 0;r&&(e.preventDefault(),r.focus())},onPointerDown:()=>{s.current=!0,window.setTimeout(()=>s.current=!1,0),t.setOpen(!1)}};return c.cloneSlot(e,l,n)},v={sm:u.default.sm,md:u.default.md,lg:u.default.lg},y=({container:e,...t})=>{let n=m(`HoverCard.Content`);return n.open?(0,f.jsx)(l.Portal,{container:e,children:(0,f.jsx)(x,{...t,ctx:n})}):null},b=20,x=({ctx:e,placement:a=`bottom`,offset:c=8,size:l=`md`,showArrow:p=!1,className:m,style:h,children:g,ref:_,onPointerEnter:y,onPointerLeave:x,onKeyDown:S,onBlur:C,...w})=>{let T=(0,d.useRef)(null),E=o.useMergedRef(e.contentRef,_),D=r.useFloatingPosition(e.triggerRef,T,{open:!0,placement:a,offset:c,arrowPadding:b}),O=D.placement.split(`-`)[0],k=D.arrow?D.arrow.x??D.arrow.y??null:null,A=t.useOverlayLayer({active:!0});n.useDismiss([T,e.triggerRef],{active:!0,layer:A,onDismiss:t=>{let n=!!e.contentRef.current?.contains(document.activeElement);e.setOpen(!1),t.type===`keydown`&&n&&e.triggerRef.current?.focus()}});let[j,M]=(0,d.useState)(`ltr`);(0,d.useEffect)(()=>{let t=e.triggerRef.current;t&&M(getComputedStyle(t).direction===`rtl`?`rtl`:`ltr`)},[e.triggerRef]);let N=t=>{if(S?.(t),t.defaultPrevented||t.key!==`Tab`)return;let n=e.contentRef.current,r=e.triggerRef.current;if(!n||!r)return;let a=i.getFocusable(n),o=document.activeElement;if(t.shiftKey&&(o===a[0]||o===n))t.preventDefault(),r.focus();else if(!t.shiftKey&&o===a[a.length-1]){let a=i.getFocusable(document.body).find(e=>!n.contains(e)&&!!(r.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING));t.preventDefault(),e.setOpen(!1),(a??r).focus()}},P=t=>{C?.(t);let n=t.relatedTarget;n&&!e.contentRef.current?.contains(n)&&n!==e.triggerRef.current&&e.setOpen(!1)},F={...h,...k===null?null:{"--_arrow-pos":`${k}px`}};return(0,f.jsx)(t.OverlayLayerProvider,{layer:A,children:(0,f.jsx)(`div`,{ref:T,className:u.default.positioner,style:D.style,dir:j,children:(0,f.jsxs)(`div`,{...w,ref:E,id:e.contentId,className:s.cx(u.default.content,v[l],m),style:F,"data-side":O,"data-state":`open`,onPointerEnter:t=>{y?.(t),t.pointerType!==`touch`&&e.cancelTimer()},onPointerLeave:t=>{x?.(t),t.pointerType!==`touch`&&(e.contentRef.current?.contains(document.activeElement)||e.scheduleClose())},onKeyDown:N,onBlur:P,children:[g,p&&(0,f.jsx)(`span`,{className:u.default.arrow,"data-side":O,"aria-hidden":`true`})]})})})},S=Object.assign(g,{Trigger:_,Content:y});exports.HoverCard=S,exports.HoverCardContent=y,exports.HoverCardTrigger=_;

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

@@ -0,0 +1,50 @@
+import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { Placement, Size } from '../../../types/common';
+export interface HoverCardProps {
+    /** `HoverCard.Trigger` and `HoverCard.Content`. */
+    children?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Delay before opening on hover or keyboard focus, in ms. @default 500 */
+    openDelay?: number;
+    /**
+     * Delay before closing after the pointer leaves the trigger or the card,
+     * in ms. Gives the pointer time to cross the gap onto the card. @default 300
+     */
+    closeDelay?: number;
+}
+export interface HoverCardTriggerProps {
+    /**
+     * Exactly one focusable element, usually a `Link` (or a button) that
+     * accepts `ref`, event handlers, and `data-*` props. Its own handlers and
+     * ref are kept.
+     */
+    children: ReactElement;
+}
+/** The link or button that opens the card. Its own role and name are left untouched. */
+export declare const HoverCardTrigger: ({ children }: HoverCardTriggerProps) => ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export interface HoverCardContentProps extends Omit<ComponentPropsWithRef<"div">, "id"> {
+    /** Preferred side and alignment. Flips to the other side when there isn't room. @default "bottom" */
+    placement?: Placement;
+    /** Gap between the trigger and the card, in px. @default 8 */
+    offset?: number;
+    /** Maximum width and padding: `sm` 16rem, `md` 20rem, `lg` 30rem. @default "md" */
+    size?: Size;
+    /** Show an arrow pointing at the trigger. @default false */
+    showArrow?: boolean;
+    /** Element to portal into. @default document.body */
+    container?: HTMLElement | null;
+}
+/**
+ * The floating card. Rendered in a portal, positioned against the trigger
+ * with flip and viewport clamping, and mounted only while open.
+ */
+export declare const HoverCardContent: ({ container, ...props }: HoverCardContentProps) => import("react").JSX.Element | null;
+export declare const HoverCard: (({ children, open: openProp, defaultOpen, onOpenChange, openDelay, closeDelay, }: HoverCardProps) => import("react").JSX.Element) & {
+    Trigger: ({ children }: HoverCardTriggerProps) => ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+    Content: ({ container, ...props }: HoverCardContentProps) => import("react").JSX.Element | null;
+};