tempest-react-sdk 0.66.0 → 0.68.0

package/dist/components/HoverCard/HoverCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.cjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./HoverCard.module.css\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface HoverCardProps extends HTMLAttributes<HTMLDivElement> {\n    /** Element the user hovers/focuses to reveal the card. */\n    trigger: ReactNode;\n    /** Card content shown while hovering/focusing the trigger or the card itself. */\n    children: ReactNode;\n    /** Delay in ms before opening on mouseenter/focus. Default 300. */\n    openDelay?: number;\n    /** Delay in ms before closing on mouseleave/blur. Default 150. */\n    closeDelay?: number;\n    /** Where the card is anchored relative to the trigger. Default \"bottom\". */\n    placement?: HoverCardPlacement;\n}\n\n/**\n * Content preview shown when the trigger is hovered or focused.\n *\n * - Opens after `openDelay` on `mouseenter`/`focus`.\n * - Closes after `closeDelay` on `mouseleave`/`blur`.\n * - Positioned relative to the trigger via `placement`.\n * - The card is rendered as a labelled `role=\"dialog\"` region; the trigger stays keyboard focusable.\n *\n * @param props - The hover card props.\n * @returns The trigger wrapper and the anchored card when open.\n */\nexport function HoverCard({\n    trigger,\n    children,\n    openDelay = 300,\n    closeDelay = 150,\n    placement = \"bottom\",\n    className,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const id = useId();\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const clearTimer = useCallback((): void => {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }, []);\n\n    const scheduleOpen = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }, [clearTimer, openDelay]);\n\n    const scheduleClose = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(false), closeDelay);\n    }, [clearTimer, closeDelay]);\n\n    useEffect(() => clearTimer, [clearTimer]);\n\n    return (\n        <span\n            className={styles.root}\n            onMouseEnter={scheduleOpen}\n            onMouseLeave={scheduleClose}\n            onFocus={scheduleOpen}\n            onBlur={scheduleClose}\n        >\n            <span aria-describedby={open ? id : undefined} className={styles.trigger}>\n                {trigger}\n            </span>\n            {open && (\n                <div\n                    id={id}\n                    role=\"dialog\"\n                    className={cn(styles.card, styles[placement], className)}\n                    {...rest}\n                >\n                    {children}\n                </div>\n            )}\n        </span>\n    );\n}\n"],"mappings":"gIA+BA,SAAgB,EAAU,CACtB,UACA,WACA,YAAY,IACZ,aAAa,IACb,YAAY,SACZ,YACA,GAAG,GACY,CACf,GAAM,CAAC,EAAM,IAAA,EAAW,EAAA,SAAA,CAAS,EAAK,EAChC,GAAA,EAAK,EAAA,MAAA,CAAM,EACX,GAAA,EAAW,EAAA,OAAA,CAA6C,IAAI,EAE5D,GAAA,EAAa,EAAA,YAAA,KAAwB,CACnC,EAAS,UAAY,OACrB,aAAa,EAAS,OAAO,EAC7B,EAAS,QAAU,KAE3B,EAAG,CAAC,CAAC,EAEC,GAAA,EAAe,EAAA,YAAA,KAAwB,CACzC,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAI,EAAG,CAAS,CAChE,EAAG,CAAC,EAAY,CAAS,CAAC,EAEpB,GAAA,EAAgB,EAAA,YAAA,KAAwB,CAC1C,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAK,EAAG,CAAU,CAClE,EAAG,CAAC,EAAY,CAAU,CAAC,EAI3B,OAFA,EAAA,EAAA,UAAA,KAAgB,EAAY,CAAC,CAAU,CAAC,GAGpC,EAAA,EAAA,KAAA,CAAC,OAAD,CACI,UAAW,EAAA,QAAO,KAClB,aAAc,EACd,aAAc,EACd,QAAS,EACT,OAAQ,EALZ,SAAA,EAOI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,mBAAkB,EAAO,EAAK,IAAA,GAAW,UAAW,EAAA,QAAO,QAC5D,SAAA,CACC,CAAA,EACL,IACG,EAAA,EAAA,IAAA,CAAC,MAAD,CACQ,KACJ,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,EAAA,QAAO,GAAY,CAAS,EACvD,GAAI,EAEH,UACA,CAAA,CAEP,GAEd"}
+{"version":3,"file":"HoverCard.cjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./HoverCard.module.css\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface HoverCardProps extends HTMLAttributes<HTMLDivElement> {\n    /** Element the user hovers/focuses to reveal the card. */\n    trigger: ReactNode;\n    /** Card content shown while hovering/focusing the trigger or the card itself. */\n    children: ReactNode;\n    /** Delay in ms before opening on mouseenter/focus. Default 300. */\n    openDelay?: number;\n    /** Delay in ms before closing on mouseleave/blur. Default 150. */\n    closeDelay?: number;\n    /** Where the card is anchored relative to the trigger. Default \"bottom\". */\n    placement?: HoverCardPlacement;\n    /**\n     * Render the card in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the card — a\n     * user handle in the last row of a `DataTable` showed 17% of it (measured in\n     * Chrome at 1440 px). In a portal it escapes the clip and flips to the\n     * opposite side at the viewport edge.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and card, in px — the in-flow CSS uses the same 8 px. */\nconst CARD_OFFSET = 8;\n\n/**\n * Content preview shown when the trigger is hovered or focused.\n *\n * - Opens after `openDelay` on `mouseenter`/`focus`.\n * - Closes after `closeDelay` on `mouseleave`/`blur`.\n * - Positioned relative to the trigger via `placement`, in a portal by default.\n * - Moving the pointer from the trigger into the card keeps it open: React\n *   dispatches `mouseenter`/`mouseleave` along the component tree, and the\n *   portalled card is still inside the trigger's wrapper there.\n * - A link or button in the card is the next `Tab` stop after the trigger, as it\n *   was in flow.\n * - The card is rendered as a labelled `role=\"dialog\"` region; the trigger stays keyboard focusable.\n *\n * @param props - The hover card props.\n * @returns The trigger wrapper and the anchored card when open.\n */\nexport function HoverCard({\n    trigger,\n    children,\n    openDelay = 300,\n    closeDelay = 150,\n    placement = \"bottom\",\n    portal = true,\n    className,\n    style,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [cardNode, setCardNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: cardNode,\n        side: placement,\n        align: \"center\",\n        offset: CARD_OFFSET,\n        enabled: portal && open,\n    });\n    usePortalTabOrder({ enabled: portal && open, anchor: rootNode, panel: cardNode });\n    const id = useId();\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const clearTimer = useCallback((): void => {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }, []);\n\n    const scheduleOpen = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }, [clearTimer, openDelay]);\n\n    const scheduleClose = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(false), closeDelay);\n    }, [clearTimer, closeDelay]);\n\n    useEffect(() => clearTimer, [clearTimer]);\n\n    const card = (\n        <div\n            ref={setCardNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.card, styles[placement], portal && styles.portalled, className)}\n            style={{ ...style, ...floatingStyle }}\n            {...rest}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span\n            ref={setRootNode}\n            className={styles.root}\n            onMouseEnter={scheduleOpen}\n            onMouseLeave={scheduleClose}\n            onFocus={scheduleOpen}\n            onBlur={scheduleClose}\n        >\n            <span aria-describedby={open ? id : undefined} className={styles.trigger}>\n                {trigger}\n            </span>\n            {open && (portal ? <Portal>{card}</Portal> : card)}\n        </span>\n    );\n}\n"],"mappings":"mPAiCA,IAAM,EAAc,EAkBpB,SAAgB,EAAU,CACtB,UACA,WACA,YAAY,IACZ,aAAa,IACb,YAAY,SACZ,SAAS,GACT,YACA,QACA,GAAG,GACY,CACf,GAAM,CAAC,EAAM,IAAA,EAAW,EAAA,SAAA,CAAS,EAAK,EAChC,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAiC,IAAI,EAC/D,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAgC,IAAI,EAC9D,EAAgB,EAAA,kBAAkB,CACpC,OAAQ,EACR,SAAU,EACV,KAAM,EACN,MAAO,SACP,OAAQ,EACR,QAAS,GAAU,CACvB,CAAC,EACD,EAAA,kBAAkB,CAAE,QAAS,GAAU,EAAM,OAAQ,EAAU,MAAO,CAAS,CAAC,EAChF,IAAM,GAAA,EAAK,EAAA,MAAA,CAAM,EACX,GAAA,EAAW,EAAA,OAAA,CAA6C,IAAI,EAE5D,GAAA,EAAa,EAAA,YAAA,KAAwB,CACnC,EAAS,UAAY,OACrB,aAAa,EAAS,OAAO,EAC7B,EAAS,QAAU,KAE3B,EAAG,CAAC,CAAC,EAEC,GAAA,EAAe,EAAA,YAAA,KAAwB,CACzC,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAI,EAAG,CAAS,CAChE,EAAG,CAAC,EAAY,CAAS,CAAC,EAEpB,GAAA,EAAgB,EAAA,YAAA,KAAwB,CAC1C,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAK,EAAG,CAAU,CAClE,EAAG,CAAC,EAAY,CAAU,CAAC,GAE3B,EAAA,EAAA,UAAA,KAAgB,EAAY,CAAC,CAAU,CAAC,EAExC,IAAM,GACF,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,IAAK,EACD,KACJ,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,EAAA,QAAO,GAAY,GAAU,EAAA,QAAO,UAAW,CAAS,EACnF,MAAO,CAAE,GAAG,EAAO,GAAG,CAAc,EACpC,GAAI,EAEH,UACA,CAAA,EAGT,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CACI,IAAK,EACL,UAAW,EAAA,QAAO,KAClB,aAAc,EACd,aAAc,EACd,QAAS,EACT,OAAQ,EANZ,SAAA,EAQI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,mBAAkB,EAAO,EAAK,IAAA,GAAW,UAAW,EAAA,QAAO,QAC5D,SAAA,CACC,CAAA,EACL,IAAS,GAAS,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAA,SAAS,CAAa,CAAA,EAAI,EAC3C,GAEd"}

package/dist/components/HoverCard/HoverCard.js

@@ -1,36 +1,61 @@
 import { cn as e } from "../../utils/cn.js";
-import t from "./HoverCard.module.js";
-import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Portal as t } from "../Portal/Portal.js";
+import { useAnchorPosition as n } from "../Portal/anchor-position.js";
+import { usePortalTabOrder as r } from "../Portal/tab-bridge.js";
+import i from "./HoverCard.module.js";
+import { useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/HoverCard/HoverCard.tsx
-function l({ trigger: l, children: u, openDelay: d = 300, closeDelay: f = 150, placement: p = "bottom", className: m, ...h }) {
-	let [g, _] = o(!1), v = i(), y = a(null), b = n(() => {
-		y.current !== null && (clearTimeout(y.current), y.current = null);
-	}, []), x = n(() => {
-		b(), y.current = setTimeout(() => _(!0), d);
-	}, [b, d]), S = n(() => {
-		b(), y.current = setTimeout(() => _(!1), f);
-	}, [b, f]);
-	return r(() => b, [b]), /* @__PURE__ */ c("span", {
-		className: t.root,
-		onMouseEnter: x,
-		onMouseLeave: S,
-		onFocus: x,
-		onBlur: S,
-		children: [/* @__PURE__ */ s("span", {
-			"aria-describedby": g ? v : void 0,
-			className: t.trigger,
-			children: l
-		}), g && /* @__PURE__ */ s("div", {
-			id: v,
-			role: "dialog",
-			className: e(t.card, t[p], m),
-			...h,
-			children: u
-		})]
+var f = 8;
+function p({ trigger: p, children: m, openDelay: h = 300, closeDelay: g = 150, placement: _ = "bottom", portal: v = !0, className: y, style: b, ...x }) {
+	let [S, C] = l(!1), [w, T] = l(null), [E, D] = l(null), O = n({
+		anchor: w,
+		floating: E,
+		side: _,
+		align: "center",
+		offset: f,
+		enabled: v && S
+	});
+	r({
+		enabled: v && S,
+		anchor: w,
+		panel: E
+	});
+	let k = s(), A = c(null), j = a(() => {
+		A.current !== null && (clearTimeout(A.current), A.current = null);
+	}, []), M = a(() => {
+		j(), A.current = setTimeout(() => C(!0), h);
+	}, [j, h]), N = a(() => {
+		j(), A.current = setTimeout(() => C(!1), g);
+	}, [j, g]);
+	o(() => j, [j]);
+	let P = /* @__PURE__ */ u("div", {
+		ref: D,
+		id: k,
+		role: "dialog",
+		className: e(i.card, i[_], v && i.portalled, y),
+		style: {
+			...b,
+			...O
+		},
+		...x,
+		children: m
+	});
+	return /* @__PURE__ */ d("span", {
+		ref: T,
+		className: i.root,
+		onMouseEnter: M,
+		onMouseLeave: N,
+		onFocus: M,
+		onBlur: N,
+		children: [/* @__PURE__ */ u("span", {
+			"aria-describedby": S ? k : void 0,
+			className: i.trigger,
+			children: p
+		}), S && (v ? /* @__PURE__ */ u(t, { children: P }) : P)]
 	});
 }
 //#endregion
-export { l as HoverCard };
+export { p as HoverCard };
 
 //# sourceMappingURL=HoverCard.js.map

package/dist/components/HoverCard/HoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.js","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./HoverCard.module.css\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface HoverCardProps extends HTMLAttributes<HTMLDivElement> {\n    /** Element the user hovers/focuses to reveal the card. */\n    trigger: ReactNode;\n    /** Card content shown while hovering/focusing the trigger or the card itself. */\n    children: ReactNode;\n    /** Delay in ms before opening on mouseenter/focus. Default 300. */\n    openDelay?: number;\n    /** Delay in ms before closing on mouseleave/blur. Default 150. */\n    closeDelay?: number;\n    /** Where the card is anchored relative to the trigger. Default \"bottom\". */\n    placement?: HoverCardPlacement;\n}\n\n/**\n * Content preview shown when the trigger is hovered or focused.\n *\n * - Opens after `openDelay` on `mouseenter`/`focus`.\n * - Closes after `closeDelay` on `mouseleave`/`blur`.\n * - Positioned relative to the trigger via `placement`.\n * - The card is rendered as a labelled `role=\"dialog\"` region; the trigger stays keyboard focusable.\n *\n * @param props - The hover card props.\n * @returns The trigger wrapper and the anchored card when open.\n */\nexport function HoverCard({\n    trigger,\n    children,\n    openDelay = 300,\n    closeDelay = 150,\n    placement = \"bottom\",\n    className,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const id = useId();\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const clearTimer = useCallback((): void => {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }, []);\n\n    const scheduleOpen = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }, [clearTimer, openDelay]);\n\n    const scheduleClose = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(false), closeDelay);\n    }, [clearTimer, closeDelay]);\n\n    useEffect(() => clearTimer, [clearTimer]);\n\n    return (\n        <span\n            className={styles.root}\n            onMouseEnter={scheduleOpen}\n            onMouseLeave={scheduleClose}\n            onFocus={scheduleOpen}\n            onBlur={scheduleClose}\n        >\n            <span aria-describedby={open ? id : undefined} className={styles.trigger}>\n                {trigger}\n            </span>\n            {open && (\n                <div\n                    id={id}\n                    role=\"dialog\"\n                    className={cn(styles.card, styles[placement], className)}\n                    {...rest}\n                >\n                    {children}\n                </div>\n            )}\n        </span>\n    );\n}\n"],"mappings":";;;;;AA+BA,SAAgB,EAAU,EACtB,YACA,aACA,eAAY,KACZ,gBAAa,KACb,eAAY,UACZ,cACA,GAAG,KACY;CACf,IAAM,CAAC,GAAM,KAAW,EAAS,EAAK,GAChC,IAAK,EAAM,GACX,IAAW,EAA6C,IAAI,GAE5D,IAAa,QAAwB;EACvC,AAAI,EAAS,YAAY,SACrB,aAAa,EAAS,OAAO,GAC7B,EAAS,UAAU;CAE3B,GAAG,CAAC,CAAC,GAEC,IAAe,QAAwB;EAEzC,AADA,EAAW,GACX,EAAS,UAAU,iBAAiB,EAAQ,EAAI,GAAG,CAAS;CAChE,GAAG,CAAC,GAAY,CAAS,CAAC,GAEpB,IAAgB,QAAwB;EAE1C,AADA,EAAW,GACX,EAAS,UAAU,iBAAiB,EAAQ,EAAK,GAAG,CAAU;CAClE,GAAG,CAAC,GAAY,CAAU,CAAC;CAI3B,OAFA,QAAgB,GAAY,CAAC,CAAU,CAAC,GAGpC,kBAAC,QAAD;EACI,WAAW,EAAO;EAClB,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EALZ,UAAA,CAOI,kBAAC,QAAD;GAAM,oBAAkB,IAAO,IAAK,KAAA;GAAW,WAAW,EAAO;GAC5D,UAAA;EACC,CAAA,GACL,KACG,kBAAC,OAAD;GACQ;GACJ,MAAK;GACL,WAAW,EAAG,EAAO,MAAM,EAAO,IAAY,CAAS;GACvD,GAAI;GAEH;EACA,CAAA,CAEP;;AAEd"}
+{"version":3,"file":"HoverCard.js","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./HoverCard.module.css\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface HoverCardProps extends HTMLAttributes<HTMLDivElement> {\n    /** Element the user hovers/focuses to reveal the card. */\n    trigger: ReactNode;\n    /** Card content shown while hovering/focusing the trigger or the card itself. */\n    children: ReactNode;\n    /** Delay in ms before opening on mouseenter/focus. Default 300. */\n    openDelay?: number;\n    /** Delay in ms before closing on mouseleave/blur. Default 150. */\n    closeDelay?: number;\n    /** Where the card is anchored relative to the trigger. Default \"bottom\". */\n    placement?: HoverCardPlacement;\n    /**\n     * Render the card in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the card — a\n     * user handle in the last row of a `DataTable` showed 17% of it (measured in\n     * Chrome at 1440 px). In a portal it escapes the clip and flips to the\n     * opposite side at the viewport edge.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and card, in px — the in-flow CSS uses the same 8 px. */\nconst CARD_OFFSET = 8;\n\n/**\n * Content preview shown when the trigger is hovered or focused.\n *\n * - Opens after `openDelay` on `mouseenter`/`focus`.\n * - Closes after `closeDelay` on `mouseleave`/`blur`.\n * - Positioned relative to the trigger via `placement`, in a portal by default.\n * - Moving the pointer from the trigger into the card keeps it open: React\n *   dispatches `mouseenter`/`mouseleave` along the component tree, and the\n *   portalled card is still inside the trigger's wrapper there.\n * - A link or button in the card is the next `Tab` stop after the trigger, as it\n *   was in flow.\n * - The card is rendered as a labelled `role=\"dialog\"` region; the trigger stays keyboard focusable.\n *\n * @param props - The hover card props.\n * @returns The trigger wrapper and the anchored card when open.\n */\nexport function HoverCard({\n    trigger,\n    children,\n    openDelay = 300,\n    closeDelay = 150,\n    placement = \"bottom\",\n    portal = true,\n    className,\n    style,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [cardNode, setCardNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: cardNode,\n        side: placement,\n        align: \"center\",\n        offset: CARD_OFFSET,\n        enabled: portal && open,\n    });\n    usePortalTabOrder({ enabled: portal && open, anchor: rootNode, panel: cardNode });\n    const id = useId();\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const clearTimer = useCallback((): void => {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }, []);\n\n    const scheduleOpen = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }, [clearTimer, openDelay]);\n\n    const scheduleClose = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(false), closeDelay);\n    }, [clearTimer, closeDelay]);\n\n    useEffect(() => clearTimer, [clearTimer]);\n\n    const card = (\n        <div\n            ref={setCardNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.card, styles[placement], portal && styles.portalled, className)}\n            style={{ ...style, ...floatingStyle }}\n            {...rest}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span\n            ref={setRootNode}\n            className={styles.root}\n            onMouseEnter={scheduleOpen}\n            onMouseLeave={scheduleClose}\n            onFocus={scheduleOpen}\n            onBlur={scheduleClose}\n        >\n            <span aria-describedby={open ? id : undefined} className={styles.trigger}>\n                {trigger}\n            </span>\n            {open && (portal ? <Portal>{card}</Portal> : card)}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;AAiCA,IAAM,IAAc;AAkBpB,SAAgB,EAAU,EACtB,YACA,aACA,eAAY,KACZ,gBAAa,KACb,eAAY,UACZ,YAAS,IACT,cACA,UACA,GAAG,KACY;CACf,IAAM,CAAC,GAAM,KAAW,EAAS,EAAK,GAChC,CAAC,GAAU,KAAe,EAAiC,IAAI,GAC/D,CAAC,GAAU,KAAe,EAAgC,IAAI,GAC9D,IAAgB,EAAkB;EACpC,QAAQ;EACR,UAAU;EACV,MAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAS,KAAU;CACvB,CAAC;CACD,EAAkB;EAAE,SAAS,KAAU;EAAM,QAAQ;EAAU,OAAO;CAAS,CAAC;CAChF,IAAM,IAAK,EAAM,GACX,IAAW,EAA6C,IAAI,GAE5D,IAAa,QAAwB;EACvC,AAAI,EAAS,YAAY,SACrB,aAAa,EAAS,OAAO,GAC7B,EAAS,UAAU;CAE3B,GAAG,CAAC,CAAC,GAEC,IAAe,QAAwB;EAEzC,AADA,EAAW,GACX,EAAS,UAAU,iBAAiB,EAAQ,EAAI,GAAG,CAAS;CAChE,GAAG,CAAC,GAAY,CAAS,CAAC,GAEpB,IAAgB,QAAwB;EAE1C,AADA,EAAW,GACX,EAAS,UAAU,iBAAiB,EAAQ,EAAK,GAAG,CAAU;CAClE,GAAG,CAAC,GAAY,CAAU,CAAC;CAE3B,QAAgB,GAAY,CAAC,CAAU,CAAC;CAExC,IAAM,IACF,kBAAC,OAAD;EACI,KAAK;EACD;EACJ,MAAK;EACL,WAAW,EAAG,EAAO,MAAM,EAAO,IAAY,KAAU,EAAO,WAAW,CAAS;EACnF,OAAO;GAAE,GAAG;GAAO,GAAG;EAAc;EACpC,GAAI;EAEH;CACA,CAAA;CAGT,OACI,kBAAC,QAAD;EACI,KAAK;EACL,WAAW,EAAO;EAClB,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EANZ,UAAA,CAQI,kBAAC,QAAD;GAAM,oBAAkB,IAAO,IAAK,KAAA;GAAW,WAAW,EAAO;GAC5D,UAAA;EACC,CAAA,GACL,MAAS,IAAS,kBAAC,GAAD,EAAA,UAAS,EAAa,CAAA,IAAI,EAC3C;;AAEd"}

package/dist/components/HoverCard/HoverCard.module.cjs

@@ -1,3 +1,3 @@
 require("../../styles/component/HoverCard.css");
-var e=`tempest_root_2KoZA`,t=`tempest_trigger_OXsnr`,n=`tempest_card_CoGx4`,r=`tempest_tempest-hover-card-in_jD85J`,i=`tempest_top_AVcQ0`,a=`tempest_bottom_2rLAA`,o=`tempest_left_tqGPt`,s=`tempest_right_9Fe6S`,c={root:e,trigger:t,card:n,tempestHoverCardIn:r,top:i,bottom:a,left:o,right:s};exports.bottom=a,exports.card=n,exports.default=c,exports.left=o,exports.right=s,exports.root=e,exports.tempestHoverCardIn=r,exports.top=i,exports.trigger=t;
+var e=`tempest_root_2KoZA`,t=`tempest_trigger_OXsnr`,n=`tempest_card_CoGx4`,r=`tempest_tempest-hover-card-in_jD85J`,i=`tempest_top_AVcQ0`,a=`tempest_bottom_2rLAA`,o=`tempest_left_tqGPt`,s=`tempest_right_9Fe6S`,c=`tempest_portalled_GMcNw`,l={root:e,trigger:t,card:n,tempestHoverCardIn:r,top:i,bottom:a,left:o,right:s,portalled:c};exports.bottom=a,exports.card=n,exports.default=l,exports.left=o,exports.portalled=c,exports.right=s,exports.root=e,exports.tempestHoverCardIn=r,exports.top=i,exports.trigger=t;
 //# sourceMappingURL=HoverCard.module.cjs.map

package/dist/components/HoverCard/HoverCard.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.module.cjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.trigger {\n    display: inline-flex;\n}\n\n.card {\n    position: absolute;\n    z-index: var(--tempest-z-popover);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-width: 200px;\n    max-width: 320px;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    animation: tempest-hover-card-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.card:focus {\n    outline: none;\n}\n\n/* Placements (center-aligned across the trigger). */\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n@keyframes tempest-hover-card-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .card {\n        animation: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"HoverCard.module.cjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.trigger {\n    display: inline-flex;\n}\n\n.card {\n    position: absolute;\n    z-index: var(--tempest-z-popover);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-width: 200px;\n    max-width: 320px;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    animation: tempest-hover-card-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.card:focus {\n    outline: none;\n}\n\n/* Placements (center-aligned across the trigger). */\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\n}\n\n@keyframes tempest-hover-card-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .card {\n        animation: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/HoverCard/HoverCard.module.js

@@ -1,6 +1,6 @@
 import "../../styles/component/HoverCard.css";
 //#region src/components/HoverCard/HoverCard.module.css
-var e = "tempest_root_2KoZA", t = "tempest_trigger_OXsnr", n = "tempest_card_CoGx4", r = "tempest_tempest-hover-card-in_jD85J", i = "tempest_top_AVcQ0", a = "tempest_bottom_2rLAA", o = "tempest_left_tqGPt", s = "tempest_right_9Fe6S", c = {
+var e = "tempest_root_2KoZA", t = "tempest_trigger_OXsnr", n = "tempest_card_CoGx4", r = "tempest_tempest-hover-card-in_jD85J", i = "tempest_top_AVcQ0", a = "tempest_bottom_2rLAA", o = "tempest_left_tqGPt", s = "tempest_right_9Fe6S", c = "tempest_portalled_GMcNw", l = {
 	root: e,
 	trigger: t,
 	card: n,
@@ -8,9 +8,10 @@ var e = "tempest_root_2KoZA", t = "tempest_trigger_OXsnr", n = "tempest_card_CoG
 	top: i,
 	bottom: a,
 	left: o,
-	right: s
+	right: s,
+	portalled: c
 };
 //#endregion
-export { a as bottom, n as card, c as default, o as left, s as right, e as root, r as tempestHoverCardIn, i as top, t as trigger };
+export { a as bottom, n as card, l as default, o as left, c as portalled, s as right, e as root, r as tempestHoverCardIn, i as top, t as trigger };
 
 //# sourceMappingURL=HoverCard.module.js.map

package/dist/components/HoverCard/HoverCard.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.module.js","names":[],"sources":["../../../src/components/HoverCard/HoverCard.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.trigger {\n    display: inline-flex;\n}\n\n.card {\n    position: absolute;\n    z-index: var(--tempest-z-popover);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-width: 200px;\n    max-width: 320px;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    animation: tempest-hover-card-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.card:focus {\n    outline: none;\n}\n\n/* Placements (center-aligned across the trigger). */\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n@keyframes tempest-hover-card-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .card {\n        animation: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"HoverCard.module.js","names":[],"sources":["../../../src/components/HoverCard/HoverCard.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.trigger {\n    display: inline-flex;\n}\n\n.card {\n    position: absolute;\n    z-index: var(--tempest-z-popover);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-width: 200px;\n    max-width: 320px;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    animation: tempest-hover-card-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.card:focus {\n    outline: none;\n}\n\n/* Placements (center-aligned across the trigger). */\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\n}\n\n@keyframes tempest-hover-card-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .card {\n        animation: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Lightbox/Lightbox.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-scroll-lock.cjs"),n=require("../../hooks/use-focus-trap.cjs"),r=require("../Portal/Portal.cjs"),i=require("./Lightbox.module.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("lucide-react");function c({items:c,open:l,index:u=0,onIndexChange:d,onClose:f,showThumbnails:p,showCounter:m=!0,loop:h=!0,closeLabel:g=`Close`,previousLabel:_=`Previous image`,nextLabel:v=`Next image`,className:y}){let b=(0,a.useRef)(null),[x,S]=(0,a.useState)(u),C=d!==void 0,w=C?u:x;n.useFocusTrap(b,l),t.useScrollLock(l);let T=(0,a.useCallback)(e=>{if(c.length===0)return;let t=h?(e+c.length)%c.length:Math.max(0,Math.min(e,c.length-1));C||S(t),d?.(t)},[C,c.length,h,d]);if((0,a.useEffect)(()=>{C||S(u)},[u,C]),(0,a.useEffect)(()=>{if(!l)return;function e(e){switch(e.key){case`Escape`:f();break;case`ArrowRight`:T(w+1);break;case`ArrowLeft`:T(w-1);break;case`Home`:T(0);break;case`End`:T(c.length-1);break;default:return}e.preventDefault()}return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[w,c.length,T,f,l]),(0,a.useEffect)(()=>{if(!(!l||typeof Image>`u`))for(let e of[-1,1]){let t=c[(w+e+c.length)%c.length];if(!t)continue;let n=new Image;n.src=t.src}},[w,c,l]),!l||c.length===0)return null;let E=c[Math.max(0,Math.min(w,c.length-1))],D=p??c.length>1,O=c.length>1;return(0,o.jsx)(r.Portal,{children:(0,o.jsxs)(`div`,{ref:b,role:`dialog`,"aria-modal":`true`,"aria-label":E.alt,className:e.cn(i.default.overlay,y),children:[(0,o.jsxs)(`div`,{className:i.default.topBar,children:[m&&O?(0,o.jsxs)(`span`,{className:i.default.counter,children:[w+1,` / `,c.length]}):(0,o.jsx)(`span`,{}),(0,o.jsx)(`button`,{type:`button`,className:i.default.iconButton,"aria-label":g,onClick:f,children:(0,o.jsx)(s.X,{size:20})})]}),(0,o.jsxs)(`div`,{className:i.default.stage,children:[O?(0,o.jsx)(`button`,{type:`button`,className:e.cn(i.default.iconButton,i.default.nav),"aria-label":_,disabled:!h&&w===0,onClick:()=>T(w-1),children:(0,o.jsx)(s.ChevronLeft,{size:24})}):null,(0,o.jsxs)(`figure`,{className:i.default.figure,children:[(0,o.jsx)(`img`,{src:E.src,alt:E.alt,className:i.default.image}),E.caption?(0,o.jsx)(`figcaption`,{className:i.default.caption,children:E.caption}):null]}),O?(0,o.jsx)(`button`,{type:`button`,className:e.cn(i.default.iconButton,i.default.nav),"aria-label":v,disabled:!h&&w===c.length-1,onClick:()=>T(w+1),children:(0,o.jsx)(s.ChevronRight,{size:24})}):null]}),D&&O?(0,o.jsx)(`div`,{className:i.default.thumbnails,role:`tablist`,"aria-label":E.alt,children:c.map((t,n)=>(0,o.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":n===w,"aria-label":t.alt,className:e.cn(i.default.thumbnail,n===w&&i.default.thumbnailActive),onClick:()=>T(n),children:(0,o.jsx)(`img`,{src:t.thumbnail??t.src,alt:``,className:i.default.thumbnailImage})},`${t.src}-${n}`))}):null]})})}exports.Lightbox=c;
+const e=require("../../utils/cn.cjs"),t=require("../Portal/escape-layer.cjs"),n=require("../../hooks/use-focus-trap.cjs"),r=require("../Portal/Portal.cjs"),i=require("../../hooks/use-scroll-lock.cjs"),a=require("./Lightbox.module.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("lucide-react");function l({items:l,open:u,index:d=0,onIndexChange:f,onClose:p,showThumbnails:m,showCounter:h=!0,loop:g=!0,closeLabel:_=`Close`,previousLabel:v=`Previous image`,nextLabel:y=`Next image`,className:b}){let x=(0,o.useRef)(null),[S,C]=(0,o.useState)(d),w=f!==void 0,T=w?d:S;n.useFocusTrap(x,u),i.useScrollLock(u);let E=(0,o.useCallback)(e=>{if(l.length===0)return;let t=g?(e+l.length)%l.length:Math.max(0,Math.min(e,l.length-1));w||C(t),f?.(t)},[w,l.length,g,f]);if((0,o.useEffect)(()=>{w||C(d)},[d,w]),t.useEscapeLayer(u,p),(0,o.useEffect)(()=>{if(!u)return;function e(e){switch(e.key){case`ArrowRight`:E(T+1);break;case`ArrowLeft`:E(T-1);break;case`Home`:E(0);break;case`End`:E(l.length-1);break;default:return}e.preventDefault()}return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[T,l.length,E,u]),(0,o.useEffect)(()=>{if(!(!u||typeof Image>`u`))for(let e of[-1,1]){let t=l[(T+e+l.length)%l.length];if(!t)continue;let n=new Image;n.src=t.src}},[T,l,u]),!u||l.length===0)return null;let D=l[Math.max(0,Math.min(T,l.length-1))],O=m??l.length>1,k=l.length>1;return(0,s.jsx)(r.Portal,{children:(0,s.jsxs)(`div`,{ref:x,role:`dialog`,"aria-modal":`true`,"aria-label":D.alt,className:e.cn(a.default.overlay,b),children:[(0,s.jsxs)(`div`,{className:a.default.topBar,children:[h&&k?(0,s.jsxs)(`span`,{className:a.default.counter,children:[T+1,` / `,l.length]}):(0,s.jsx)(`span`,{}),(0,s.jsx)(`button`,{type:`button`,className:a.default.iconButton,"aria-label":_,onClick:p,children:(0,s.jsx)(c.X,{size:20})})]}),(0,s.jsxs)(`div`,{className:a.default.stage,children:[k?(0,s.jsx)(`button`,{type:`button`,className:e.cn(a.default.iconButton,a.default.nav),"aria-label":v,disabled:!g&&T===0,onClick:()=>E(T-1),children:(0,s.jsx)(c.ChevronLeft,{size:24})}):null,(0,s.jsxs)(`figure`,{className:a.default.figure,children:[(0,s.jsx)(`img`,{src:D.src,alt:D.alt,className:a.default.image}),D.caption?(0,s.jsx)(`figcaption`,{className:a.default.caption,children:D.caption}):null]}),k?(0,s.jsx)(`button`,{type:`button`,className:e.cn(a.default.iconButton,a.default.nav),"aria-label":y,disabled:!g&&T===l.length-1,onClick:()=>E(T+1),children:(0,s.jsx)(c.ChevronRight,{size:24})}):null]}),O&&k?(0,s.jsx)(`div`,{className:a.default.thumbnails,role:`tablist`,"aria-label":D.alt,children:l.map((t,n)=>(0,s.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":n===T,"aria-label":t.alt,className:e.cn(a.default.thumbnail,n===T&&a.default.thumbnailActive),onClick:()=>E(n),children:(0,s.jsx)(`img`,{src:t.thumbnail??t.src,alt:``,className:a.default.thumbnailImage})},`${t.src}-${n}`))}):null]})})}exports.Lightbox=l;
 //# sourceMappingURL=Lightbox.cjs.map

package/dist/components/Lightbox/Lightbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.cjs","names":[],"sources":["../../../src/components/Lightbox/Lightbox.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — closeLabel,\n * previousLabel and nextLabel are three separate strings an app has to translate,\n * showThumbnails/showCounter/loop are the chrome, and items/index/\n * onIndexChange/open/onClose are the controlled contract. The body is the focus\n * trap, the key handling and the swipe, which all move the same index.\n */\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { useScrollLock } from \"@/hooks/use-scroll-lock\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"../Portal\";\nimport styles from \"./Lightbox.module.css\";\n\n/** One item of the gallery. */\nexport interface LightboxItem {\n    /** Full-size image URL. */\n    src: string;\n    /** Alt text. Required: a gallery of unlabeled images is unusable with a screen reader. */\n    alt: string;\n    /** Caption rendered under the image. */\n    caption?: string;\n    /** Thumbnail URL for the strip. Falls back to `src`. */\n    thumbnail?: string;\n}\n\nexport interface LightboxProps {\n    items: LightboxItem[];\n    /** Whether the overlay is open. */\n    open: boolean;\n    /** Index shown while open. Default `0`. */\n    index?: number;\n    onIndexChange?: (index: number) => void;\n    onClose: () => void;\n    /** Renders the thumbnail strip. Default `true` when there is more than one item. */\n    showThumbnails?: boolean;\n    /** Renders the `3 / 12` counter. Default `true`. */\n    showCounter?: boolean;\n    /**\n     * Wrap around at the ends. Default `true` — in a photo viewer, hitting a dead\n     * end at the last image reads as a bug more often than as a boundary.\n     */\n    loop?: boolean;\n    closeLabel?: string;\n    previousLabel?: string;\n    nextLabel?: string;\n    className?: string;\n}\n\n/**\n * Full-screen image viewer with keyboard navigation.\n *\n * `Esc` closes, `←`/`→` walk the gallery, `Home`/`End` jump to the ends. Focus is\n * trapped inside while open and the page behind is scroll-locked, so the overlay\n * behaves like the dialog it is instead of a fancy `<div>` the keyboard can escape.\n *\n * Only the current image is mounted; neighbours are **preloaded** via `Image()` so\n * pressing `→` does not flash an empty frame.\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n * const [index, setIndex] = useState(0);\n *\n * <Lightbox\n *   open={open}\n *   items={photos.map((p) => ({ src: p.url, alt: p.description }))}\n *   index={index}\n *   onIndexChange={setIndex}\n *   onClose={() => setOpen(false)}\n * />\n * ```\n */\nexport function Lightbox({\n    items,\n    open,\n    index = 0,\n    onIndexChange,\n    onClose,\n    showThumbnails,\n    showCounter = true,\n    loop = true,\n    closeLabel = \"Close\",\n    previousLabel = \"Previous image\",\n    nextLabel = \"Next image\",\n    className,\n}: LightboxProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [internalIndex, setInternalIndex] = useState(index);\n    const isControlled = onIndexChange !== undefined;\n    const current = isControlled ? index : internalIndex;\n\n    useFocusTrap(containerRef, open);\n    useScrollLock(open);\n\n    const move = useCallback(\n        (next: number): void => {\n            if (items.length === 0) return;\n            const target = loop\n                ? (next + items.length) % items.length\n                : Math.max(0, Math.min(next, items.length - 1));\n            if (!isControlled) setInternalIndex(target);\n            onIndexChange?.(target);\n        },\n        [isControlled, items.length, loop, onIndexChange],\n    );\n\n    useEffect(() => {\n        if (!isControlled) setInternalIndex(index);\n    }, [index, isControlled]);\n\n    useEffect(() => {\n        if (!open) return;\n        function onKeyDown(event: KeyboardEvent): void {\n            switch (event.key) {\n                case \"Escape\":\n                    onClose();\n                    break;\n                case \"ArrowRight\":\n                    move(current + 1);\n                    break;\n                case \"ArrowLeft\":\n                    move(current - 1);\n                    break;\n                case \"Home\":\n                    move(0);\n                    break;\n                case \"End\":\n                    move(items.length - 1);\n                    break;\n                default:\n                    return;\n            }\n            event.preventDefault();\n        }\n        document.addEventListener(\"keydown\", onKeyDown);\n        return () => document.removeEventListener(\"keydown\", onKeyDown);\n    }, [current, items.length, move, onClose, open]);\n\n    useEffect(() => {\n        if (!open || typeof Image === \"undefined\") return;\n        for (const offset of [-1, 1]) {\n            const neighbour = items[(current + offset + items.length) % items.length];\n            if (!neighbour) continue;\n            const preload = new Image();\n            preload.src = neighbour.src;\n        }\n    }, [current, items, open]);\n\n    if (!open || items.length === 0) return null;\n\n    const item = items[Math.max(0, Math.min(current, items.length - 1))];\n    const withThumbnails = showThumbnails ?? items.length > 1;\n    const multiple = items.length > 1;\n\n    return (\n        <Portal>\n            <div\n                ref={containerRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={item.alt}\n                className={cn(styles.overlay, className)}\n            >\n                <div className={styles.topBar}>\n                    {showCounter && multiple ? (\n                        <span className={styles.counter}>\n                            {current + 1} / {items.length}\n                        </span>\n                    ) : (\n                        <span />\n                    )}\n                    <button\n                        type=\"button\"\n                        className={styles.iconButton}\n                        aria-label={closeLabel}\n                        onClick={onClose}\n                    >\n                        <X size={20} />\n                    </button>\n                </div>\n\n                <div className={styles.stage}>\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={previousLabel}\n                            disabled={!loop && current === 0}\n                            onClick={() => move(current - 1)}\n                        >\n                            <ChevronLeft size={24} />\n                        </button>\n                    ) : null}\n\n                    <figure className={styles.figure}>\n                        <img src={item.src} alt={item.alt} className={styles.image} />\n                        {item.caption ? (\n                            <figcaption className={styles.caption}>{item.caption}</figcaption>\n                        ) : null}\n                    </figure>\n\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={nextLabel}\n                            disabled={!loop && current === items.length - 1}\n                            onClick={() => move(current + 1)}\n                        >\n                            <ChevronRight size={24} />\n                        </button>\n                    ) : null}\n                </div>\n\n                {withThumbnails && multiple ? (\n                    <div className={styles.thumbnails} role=\"tablist\" aria-label={item.alt}>\n                        {items.map((entry, entryIndex) => (\n                            <button\n                                key={`${entry.src}-${entryIndex}`}\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-selected={entryIndex === current}\n                                aria-label={entry.alt}\n                                className={cn(\n                                    styles.thumbnail,\n                                    entryIndex === current && styles.thumbnailActive,\n                                )}\n                                onClick={() => move(entryIndex)}\n                            >\n                                <img\n                                    src={entry.thumbnail ?? entry.src}\n                                    alt=\"\"\n                                    className={styles.thumbnailImage}\n                                />\n                            </button>\n                        ))}\n                    </div>\n                ) : null}\n            </div>\n        </Portal>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Lightbox.cjs","names":[],"sources":["../../../src/components/Lightbox/Lightbox.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — closeLabel,\n * previousLabel and nextLabel are three separate strings an app has to translate,\n * showThumbnails/showCounter/loop are the chrome, and items/index/\n * onIndexChange/open/onClose are the controlled contract. The body is the focus\n * trap, the key handling and the swipe, which all move the same index.\n */\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { useScrollLock } from \"@/hooks/use-scroll-lock\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"../Portal\";\nimport styles from \"./Lightbox.module.css\";\n\n/** One item of the gallery. */\nexport interface LightboxItem {\n    /** Full-size image URL. */\n    src: string;\n    /** Alt text. Required: a gallery of unlabeled images is unusable with a screen reader. */\n    alt: string;\n    /** Caption rendered under the image. */\n    caption?: string;\n    /** Thumbnail URL for the strip. Falls back to `src`. */\n    thumbnail?: string;\n}\n\nexport interface LightboxProps {\n    items: LightboxItem[];\n    /** Whether the overlay is open. */\n    open: boolean;\n    /** Index shown while open. Default `0`. */\n    index?: number;\n    onIndexChange?: (index: number) => void;\n    onClose: () => void;\n    /** Renders the thumbnail strip. Default `true` when there is more than one item. */\n    showThumbnails?: boolean;\n    /** Renders the `3 / 12` counter. Default `true`. */\n    showCounter?: boolean;\n    /**\n     * Wrap around at the ends. Default `true` — in a photo viewer, hitting a dead\n     * end at the last image reads as a bug more often than as a boundary.\n     */\n    loop?: boolean;\n    closeLabel?: string;\n    previousLabel?: string;\n    nextLabel?: string;\n    className?: string;\n}\n\n/**\n * Full-screen image viewer with keyboard navigation.\n *\n * `Esc` closes, `←`/`→` walk the gallery, `Home`/`End` jump to the ends. Focus is\n * trapped inside while open and the page behind is scroll-locked, so the overlay\n * behaves like the dialog it is instead of a fancy `<div>` the keyboard can escape.\n *\n * Only the current image is mounted; neighbours are **preloaded** via `Image()` so\n * pressing `→` does not flash an empty frame.\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n * const [index, setIndex] = useState(0);\n *\n * <Lightbox\n *   open={open}\n *   items={photos.map((p) => ({ src: p.url, alt: p.description }))}\n *   index={index}\n *   onIndexChange={setIndex}\n *   onClose={() => setOpen(false)}\n * />\n * ```\n */\nexport function Lightbox({\n    items,\n    open,\n    index = 0,\n    onIndexChange,\n    onClose,\n    showThumbnails,\n    showCounter = true,\n    loop = true,\n    closeLabel = \"Close\",\n    previousLabel = \"Previous image\",\n    nextLabel = \"Next image\",\n    className,\n}: LightboxProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [internalIndex, setInternalIndex] = useState(index);\n    const isControlled = onIndexChange !== undefined;\n    const current = isControlled ? index : internalIndex;\n\n    useFocusTrap(containerRef, open);\n    useScrollLock(open);\n\n    const move = useCallback(\n        (next: number): void => {\n            if (items.length === 0) return;\n            const target = loop\n                ? (next + items.length) % items.length\n                : Math.max(0, Math.min(next, items.length - 1));\n            if (!isControlled) setInternalIndex(target);\n            onIndexChange?.(target);\n        },\n        [isControlled, items.length, loop, onIndexChange],\n    );\n\n    useEffect(() => {\n        if (!isControlled) setInternalIndex(index);\n    }, [index, isControlled]);\n\n    useEscapeLayer(open, onClose);\n\n    useEffect(() => {\n        if (!open) return;\n        function onKeyDown(event: KeyboardEvent): void {\n            switch (event.key) {\n                case \"ArrowRight\":\n                    move(current + 1);\n                    break;\n                case \"ArrowLeft\":\n                    move(current - 1);\n                    break;\n                case \"Home\":\n                    move(0);\n                    break;\n                case \"End\":\n                    move(items.length - 1);\n                    break;\n                default:\n                    return;\n            }\n            event.preventDefault();\n        }\n        document.addEventListener(\"keydown\", onKeyDown);\n        return () => document.removeEventListener(\"keydown\", onKeyDown);\n    }, [current, items.length, move, open]);\n\n    useEffect(() => {\n        if (!open || typeof Image === \"undefined\") return;\n        for (const offset of [-1, 1]) {\n            const neighbour = items[(current + offset + items.length) % items.length];\n            if (!neighbour) continue;\n            const preload = new Image();\n            preload.src = neighbour.src;\n        }\n    }, [current, items, open]);\n\n    if (!open || items.length === 0) return null;\n\n    const item = items[Math.max(0, Math.min(current, items.length - 1))];\n    const withThumbnails = showThumbnails ?? items.length > 1;\n    const multiple = items.length > 1;\n\n    return (\n        <Portal>\n            <div\n                ref={containerRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={item.alt}\n                className={cn(styles.overlay, className)}\n            >\n                <div className={styles.topBar}>\n                    {showCounter && multiple ? (\n                        <span className={styles.counter}>\n                            {current + 1} / {items.length}\n                        </span>\n                    ) : (\n                        <span />\n                    )}\n                    <button\n                        type=\"button\"\n                        className={styles.iconButton}\n                        aria-label={closeLabel}\n                        onClick={onClose}\n                    >\n                        <X size={20} />\n                    </button>\n                </div>\n\n                <div className={styles.stage}>\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={previousLabel}\n                            disabled={!loop && current === 0}\n                            onClick={() => move(current - 1)}\n                        >\n                            <ChevronLeft size={24} />\n                        </button>\n                    ) : null}\n\n                    <figure className={styles.figure}>\n                        <img src={item.src} alt={item.alt} className={styles.image} />\n                        {item.caption ? (\n                            <figcaption className={styles.caption}>{item.caption}</figcaption>\n                        ) : null}\n                    </figure>\n\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={nextLabel}\n                            disabled={!loop && current === items.length - 1}\n                            onClick={() => move(current + 1)}\n                        >\n                            <ChevronRight size={24} />\n                        </button>\n                    ) : null}\n                </div>\n\n                {withThumbnails && multiple ? (\n                    <div className={styles.thumbnails} role=\"tablist\" aria-label={item.alt}>\n                        {items.map((entry, entryIndex) => (\n                            <button\n                                key={`${entry.src}-${entryIndex}`}\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-selected={entryIndex === current}\n                                aria-label={entry.alt}\n                                className={cn(\n                                    styles.thumbnail,\n                                    entryIndex === current && styles.thumbnailActive,\n                                )}\n                                onClick={() => move(entryIndex)}\n                            >\n                                <img\n                                    src={entry.thumbnail ?? entry.src}\n                                    alt=\"\"\n                                    className={styles.thumbnailImage}\n                                />\n                            </button>\n                        ))}\n                    </div>\n                ) : null}\n            </div>\n        </Portal>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Lightbox/Lightbox.js

@@ -1,45 +1,43 @@
 import { cn as e } from "../../utils/cn.js";
-import { useScrollLock as t } from "../../hooks/use-scroll-lock.js";
+import { useEscapeLayer as t } from "../Portal/escape-layer.js";
 import { useFocusTrap as n } from "../../hooks/use-focus-trap.js";
 import { Portal as r } from "../Portal/Portal.js";
-import i from "./Lightbox.module.js";
-import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { ChevronLeft as d, ChevronRight as f, X as p } from "lucide-react";
+import { useScrollLock as i } from "../../hooks/use-scroll-lock.js";
+import a from "./Lightbox.module.js";
+import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { ChevronLeft as f, ChevronRight as p, X as m } from "lucide-react";
 //#region src/components/Lightbox/Lightbox.tsx
-function m({ items: m, open: h, index: g = 0, onIndexChange: _, onClose: v, showThumbnails: y, showCounter: b = !0, loop: x = !0, closeLabel: S = "Close", previousLabel: C = "Previous image", nextLabel: w = "Next image", className: T }) {
-	let E = s(null), [D, O] = c(g), k = _ !== void 0, A = k ? g : D;
-	n(E, h), t(h);
-	let j = a((e) => {
-		if (m.length === 0) return;
-		let t = x ? (e + m.length) % m.length : Math.max(0, Math.min(e, m.length - 1));
-		k || O(t), _?.(t);
+function h({ items: h, open: g, index: _ = 0, onIndexChange: v, onClose: y, showThumbnails: b, showCounter: x = !0, loop: S = !0, closeLabel: C = "Close", previousLabel: w = "Previous image", nextLabel: T = "Next image", className: E }) {
+	let D = c(null), [O, k] = l(_), A = v !== void 0, j = A ? _ : O;
+	n(D, g), i(g);
+	let M = o((e) => {
+		if (h.length === 0) return;
+		let t = S ? (e + h.length) % h.length : Math.max(0, Math.min(e, h.length - 1));
+		A || k(t), v?.(t);
 	}, [
-		k,
-		m.length,
-		x,
-		_
+		A,
+		h.length,
+		S,
+		v
 	]);
-	if (o(() => {
-		k || O(g);
-	}, [g, k]), o(() => {
-		if (!h) return;
+	if (s(() => {
+		A || k(_);
+	}, [_, A]), t(g, y), s(() => {
+		if (!g) return;
 		function e(e) {
 			switch (e.key) {
-				case "Escape":
-					v();
-					break;
 				case "ArrowRight":
-					j(A + 1);
+					M(j + 1);
 					break;
 				case "ArrowLeft":
-					j(A - 1);
+					M(j - 1);
 					break;
 				case "Home":
-					j(0);
+					M(0);
 					break;
 				case "End":
-					j(m.length - 1);
+					M(h.length - 1);
 					break;
 				default: return;
 			}
@@ -47,95 +45,94 @@ function m({ items: m, open: h, index: g = 0, onIndexChange: _, onClose: v, show
 		}
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, [
-		A,
-		m.length,
 		j,
-		v,
-		h
-	]), o(() => {
-		if (!(!h || typeof Image > "u")) for (let e of [-1, 1]) {
-			let t = m[(A + e + m.length) % m.length];
+		h.length,
+		M,
+		g
+	]), s(() => {
+		if (!(!g || typeof Image > "u")) for (let e of [-1, 1]) {
+			let t = h[(j + e + h.length) % h.length];
 			if (!t) continue;
 			let n = new Image();
 			n.src = t.src;
 		}
 	}, [
-		A,
-		m,
-		h
-	]), !h || m.length === 0) return null;
-	let M = m[Math.max(0, Math.min(A, m.length - 1))], N = y ?? m.length > 1, P = m.length > 1;
-	return /* @__PURE__ */ l(r, { children: /* @__PURE__ */ u("div", {
-		ref: E,
+		j,
+		h,
+		g
+	]), !g || h.length === 0) return null;
+	let N = h[Math.max(0, Math.min(j, h.length - 1))], P = b ?? h.length > 1, F = h.length > 1;
+	return /* @__PURE__ */ u(r, { children: /* @__PURE__ */ d("div", {
+		ref: D,
 		role: "dialog",
 		"aria-modal": "true",
-		"aria-label": M.alt,
-		className: e(i.overlay, T),
+		"aria-label": N.alt,
+		className: e(a.overlay, E),
 		children: [
-			/* @__PURE__ */ u("div", {
-				className: i.topBar,
-				children: [b && P ? /* @__PURE__ */ u("span", {
-					className: i.counter,
+			/* @__PURE__ */ d("div", {
+				className: a.topBar,
+				children: [x && F ? /* @__PURE__ */ d("span", {
+					className: a.counter,
 					children: [
-						A + 1,
+						j + 1,
 						" / ",
-						m.length
+						h.length
 					]
-				}) : /* @__PURE__ */ l("span", {}), /* @__PURE__ */ l("button", {
+				}) : /* @__PURE__ */ u("span", {}), /* @__PURE__ */ u("button", {
 					type: "button",
-					className: i.iconButton,
-					"aria-label": S,
-					onClick: v,
-					children: /* @__PURE__ */ l(p, { size: 20 })
+					className: a.iconButton,
+					"aria-label": C,
+					onClick: y,
+					children: /* @__PURE__ */ u(m, { size: 20 })
 				})]
 			}),
-			/* @__PURE__ */ u("div", {
-				className: i.stage,
+			/* @__PURE__ */ d("div", {
+				className: a.stage,
 				children: [
-					P ? /* @__PURE__ */ l("button", {
+					F ? /* @__PURE__ */ u("button", {
 						type: "button",
-						className: e(i.iconButton, i.nav),
-						"aria-label": C,
-						disabled: !x && A === 0,
-						onClick: () => j(A - 1),
-						children: /* @__PURE__ */ l(d, { size: 24 })
+						className: e(a.iconButton, a.nav),
+						"aria-label": w,
+						disabled: !S && j === 0,
+						onClick: () => M(j - 1),
+						children: /* @__PURE__ */ u(f, { size: 24 })
 					}) : null,
-					/* @__PURE__ */ u("figure", {
-						className: i.figure,
-						children: [/* @__PURE__ */ l("img", {
-							src: M.src,
-							alt: M.alt,
-							className: i.image
-						}), M.caption ? /* @__PURE__ */ l("figcaption", {
-							className: i.caption,
-							children: M.caption
+					/* @__PURE__ */ d("figure", {
+						className: a.figure,
+						children: [/* @__PURE__ */ u("img", {
+							src: N.src,
+							alt: N.alt,
+							className: a.image
+						}), N.caption ? /* @__PURE__ */ u("figcaption", {
+							className: a.caption,
+							children: N.caption
 						}) : null]
 					}),
-					P ? /* @__PURE__ */ l("button", {
+					F ? /* @__PURE__ */ u("button", {
 						type: "button",
-						className: e(i.iconButton, i.nav),
-						"aria-label": w,
-						disabled: !x && A === m.length - 1,
-						onClick: () => j(A + 1),
-						children: /* @__PURE__ */ l(f, { size: 24 })
+						className: e(a.iconButton, a.nav),
+						"aria-label": T,
+						disabled: !S && j === h.length - 1,
+						onClick: () => M(j + 1),
+						children: /* @__PURE__ */ u(p, { size: 24 })
 					}) : null
 				]
 			}),
-			N && P ? /* @__PURE__ */ l("div", {
-				className: i.thumbnails,
+			P && F ? /* @__PURE__ */ u("div", {
+				className: a.thumbnails,
 				role: "tablist",
-				"aria-label": M.alt,
-				children: m.map((t, n) => /* @__PURE__ */ l("button", {
+				"aria-label": N.alt,
+				children: h.map((t, n) => /* @__PURE__ */ u("button", {
 					type: "button",
 					role: "tab",
-					"aria-selected": n === A,
+					"aria-selected": n === j,
 					"aria-label": t.alt,
-					className: e(i.thumbnail, n === A && i.thumbnailActive),
-					onClick: () => j(n),
-					children: /* @__PURE__ */ l("img", {
+					className: e(a.thumbnail, n === j && a.thumbnailActive),
+					onClick: () => M(n),
+					children: /* @__PURE__ */ u("img", {
 						src: t.thumbnail ?? t.src,
 						alt: "",
-						className: i.thumbnailImage
+						className: a.thumbnailImage
 					})
 				}, `${t.src}-${n}`))
 			}) : null
@@ -143,6 +140,6 @@ function m({ items: m, open: h, index: g = 0, onIndexChange: _, onClose: v, show
 	}) });
 }
 //#endregion
-export { m as Lightbox };
+export { h as Lightbox };
 
 //# sourceMappingURL=Lightbox.js.map

package/dist/components/Lightbox/Lightbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.js","names":[],"sources":["../../../src/components/Lightbox/Lightbox.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — closeLabel,\n * previousLabel and nextLabel are three separate strings an app has to translate,\n * showThumbnails/showCounter/loop are the chrome, and items/index/\n * onIndexChange/open/onClose are the controlled contract. The body is the focus\n * trap, the key handling and the swipe, which all move the same index.\n */\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { useScrollLock } from \"@/hooks/use-scroll-lock\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"../Portal\";\nimport styles from \"./Lightbox.module.css\";\n\n/** One item of the gallery. */\nexport interface LightboxItem {\n    /** Full-size image URL. */\n    src: string;\n    /** Alt text. Required: a gallery of unlabeled images is unusable with a screen reader. */\n    alt: string;\n    /** Caption rendered under the image. */\n    caption?: string;\n    /** Thumbnail URL for the strip. Falls back to `src`. */\n    thumbnail?: string;\n}\n\nexport interface LightboxProps {\n    items: LightboxItem[];\n    /** Whether the overlay is open. */\n    open: boolean;\n    /** Index shown while open. Default `0`. */\n    index?: number;\n    onIndexChange?: (index: number) => void;\n    onClose: () => void;\n    /** Renders the thumbnail strip. Default `true` when there is more than one item. */\n    showThumbnails?: boolean;\n    /** Renders the `3 / 12` counter. Default `true`. */\n    showCounter?: boolean;\n    /**\n     * Wrap around at the ends. Default `true` — in a photo viewer, hitting a dead\n     * end at the last image reads as a bug more often than as a boundary.\n     */\n    loop?: boolean;\n    closeLabel?: string;\n    previousLabel?: string;\n    nextLabel?: string;\n    className?: string;\n}\n\n/**\n * Full-screen image viewer with keyboard navigation.\n *\n * `Esc` closes, `←`/`→` walk the gallery, `Home`/`End` jump to the ends. Focus is\n * trapped inside while open and the page behind is scroll-locked, so the overlay\n * behaves like the dialog it is instead of a fancy `<div>` the keyboard can escape.\n *\n * Only the current image is mounted; neighbours are **preloaded** via `Image()` so\n * pressing `→` does not flash an empty frame.\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n * const [index, setIndex] = useState(0);\n *\n * <Lightbox\n *   open={open}\n *   items={photos.map((p) => ({ src: p.url, alt: p.description }))}\n *   index={index}\n *   onIndexChange={setIndex}\n *   onClose={() => setOpen(false)}\n * />\n * ```\n */\nexport function Lightbox({\n    items,\n    open,\n    index = 0,\n    onIndexChange,\n    onClose,\n    showThumbnails,\n    showCounter = true,\n    loop = true,\n    closeLabel = \"Close\",\n    previousLabel = \"Previous image\",\n    nextLabel = \"Next image\",\n    className,\n}: LightboxProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [internalIndex, setInternalIndex] = useState(index);\n    const isControlled = onIndexChange !== undefined;\n    const current = isControlled ? index : internalIndex;\n\n    useFocusTrap(containerRef, open);\n    useScrollLock(open);\n\n    const move = useCallback(\n        (next: number): void => {\n            if (items.length === 0) return;\n            const target = loop\n                ? (next + items.length) % items.length\n                : Math.max(0, Math.min(next, items.length - 1));\n            if (!isControlled) setInternalIndex(target);\n            onIndexChange?.(target);\n        },\n        [isControlled, items.length, loop, onIndexChange],\n    );\n\n    useEffect(() => {\n        if (!isControlled) setInternalIndex(index);\n    }, [index, isControlled]);\n\n    useEffect(() => {\n        if (!open) return;\n        function onKeyDown(event: KeyboardEvent): void {\n            switch (event.key) {\n                case \"Escape\":\n                    onClose();\n                    break;\n                case \"ArrowRight\":\n                    move(current + 1);\n                    break;\n                case \"ArrowLeft\":\n                    move(current - 1);\n                    break;\n                case \"Home\":\n                    move(0);\n                    break;\n                case \"End\":\n                    move(items.length - 1);\n                    break;\n                default:\n                    return;\n            }\n            event.preventDefault();\n        }\n        document.addEventListener(\"keydown\", onKeyDown);\n        return () => document.removeEventListener(\"keydown\", onKeyDown);\n    }, [current, items.length, move, onClose, open]);\n\n    useEffect(() => {\n        if (!open || typeof Image === \"undefined\") return;\n        for (const offset of [-1, 1]) {\n            const neighbour = items[(current + offset + items.length) % items.length];\n            if (!neighbour) continue;\n            const preload = new Image();\n            preload.src = neighbour.src;\n        }\n    }, [current, items, open]);\n\n    if (!open || items.length === 0) return null;\n\n    const item = items[Math.max(0, Math.min(current, items.length - 1))];\n    const withThumbnails = showThumbnails ?? items.length > 1;\n    const multiple = items.length > 1;\n\n    return (\n        <Portal>\n            <div\n                ref={containerRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={item.alt}\n                className={cn(styles.overlay, className)}\n            >\n                <div className={styles.topBar}>\n                    {showCounter && multiple ? (\n                        <span className={styles.counter}>\n                            {current + 1} / {items.length}\n                        </span>\n                    ) : (\n                        <span />\n                    )}\n                    <button\n                        type=\"button\"\n                        className={styles.iconButton}\n                        aria-label={closeLabel}\n                        onClick={onClose}\n                    >\n                        <X size={20} />\n                    </button>\n                </div>\n\n                <div className={styles.stage}>\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={previousLabel}\n                            disabled={!loop && current === 0}\n                            onClick={() => move(current - 1)}\n                        >\n                            <ChevronLeft size={24} />\n                        </button>\n                    ) : null}\n\n                    <figure className={styles.figure}>\n                        <img src={item.src} alt={item.alt} className={styles.image} />\n                        {item.caption ? (\n                            <figcaption className={styles.caption}>{item.caption}</figcaption>\n                        ) : null}\n                    </figure>\n\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={nextLabel}\n                            disabled={!loop && current === items.length - 1}\n                            onClick={() => move(current + 1)}\n                        >\n                            <ChevronRight size={24} />\n                        </button>\n                    ) : null}\n                </div>\n\n                {withThumbnails && multiple ? (\n                    <div className={styles.thumbnails} role=\"tablist\" aria-label={item.alt}>\n                        {items.map((entry, entryIndex) => (\n                            <button\n                                key={`${entry.src}-${entryIndex}`}\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-selected={entryIndex === current}\n                                aria-label={entry.alt}\n                                className={cn(\n                                    styles.thumbnail,\n                                    entryIndex === current && styles.thumbnailActive,\n                                )}\n                                onClick={() => move(entryIndex)}\n                            >\n                                <img\n                                    src={entry.thumbnail ?? entry.src}\n                                    alt=\"\"\n                                    className={styles.thumbnailImage}\n                                />\n                            </button>\n                        ))}\n                    </div>\n                ) : null}\n            </div>\n        </Portal>\n    );\n}\n"],"mappings":";;;;;;;;;AA0EA,SAAgB,EAAS,EACrB,UACA,SACA,WAAQ,GACR,kBACA,YACA,mBACA,iBAAc,IACd,UAAO,IACP,gBAAa,SACb,mBAAgB,kBAChB,eAAY,cACZ,gBACc;CACd,IAAM,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAe,KAAoB,EAAS,CAAK,GAClD,IAAe,MAAkB,KAAA,GACjC,IAAU,IAAe,IAAQ;CAGvC,AADA,EAAa,GAAc,CAAI,GAC/B,EAAc,CAAI;CAElB,IAAM,IAAO,GACR,MAAuB;EACpB,IAAI,EAAM,WAAW,GAAG;EACxB,IAAM,IAAS,KACR,IAAO,EAAM,UAAU,EAAM,SAC9B,KAAK,IAAI,GAAG,KAAK,IAAI,GAAM,EAAM,SAAS,CAAC,CAAC;EAElD,AADK,KAAc,EAAiB,CAAM,GAC1C,IAAgB,CAAM;CAC1B,GACA;EAAC;EAAc,EAAM;EAAQ;EAAM;CAAa,CACpD;CA4CA,IA1CA,QAAgB;EACZ,AAAK,KAAc,EAAiB,CAAK;CAC7C,GAAG,CAAC,GAAO,CAAY,CAAC,GAExB,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,SAAS,EAAU,GAA4B;GAC3C,QAAQ,EAAM,KAAd;IACI,KAAK;KACD,EAAQ;KACR;IACJ,KAAK;KACD,EAAK,IAAU,CAAC;KAChB;IACJ,KAAK;KACD,EAAK,IAAU,CAAC;KAChB;IACJ,KAAK;KACD,EAAK,CAAC;KACN;IACJ,KAAK;KACD,EAAK,EAAM,SAAS,CAAC;KACrB;IACJ,SACI;GACR;GACA,EAAM,eAAe;EACzB;EAEA,OADA,SAAS,iBAAiB,WAAW,CAAS,SACjC,SAAS,oBAAoB,WAAW,CAAS;CAClE,GAAG;EAAC;EAAS,EAAM;EAAQ;EAAM;EAAS;CAAI,CAAC,GAE/C,QAAgB;EACR,OAAC,KAAQ,OAAO,QAAU,MAC9B,KAAK,IAAM,KAAU,CAAC,IAAI,CAAC,GAAG;GAC1B,IAAM,IAAY,GAAO,IAAU,IAAS,EAAM,UAAU,EAAM;GAClE,IAAI,CAAC,GAAW;GAChB,IAAM,IAAU,IAAI,MAAM;GAC1B,EAAQ,MAAM,EAAU;EAC5B;CACJ,GAAG;EAAC;EAAS;EAAO;CAAI,CAAC,GAErB,CAAC,KAAQ,EAAM,WAAW,GAAG,OAAO;CAExC,IAAM,IAAO,EAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAS,EAAM,SAAS,CAAC,CAAC,IAC5D,IAAiB,KAAkB,EAAM,SAAS,GAClD,IAAW,EAAM,SAAS;CAEhC,OACI,kBAAC,GAAD,EAAA,UACI,kBAAC,OAAD;EACI,KAAK;EACL,MAAK;EACL,cAAW;EACX,cAAY,EAAK;EACjB,WAAW,EAAG,EAAO,SAAS,CAAS;EAL3C,UAAA;GAOI,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAvB,UAAA,CACK,KAAe,IACZ,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAxB,UAAA;MACK,IAAU;MAAE;MAAI,EAAM;KACrB;IAEN,CAAA,IAAA,kBAAC,QAAD,CAAO,CAAA,GAEX,kBAAC,UAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,cAAY;KACZ,SAAS;KAET,UAAA,kBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;IACV,CAAA,CACP;;GAEL,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAvB,UAAA;KACK,IACG,kBAAC,UAAD;MACI,MAAK;MACL,WAAW,EAAG,EAAO,YAAY,EAAO,GAAG;MAC3C,cAAY;MACZ,UAAU,CAAC,KAAQ,MAAY;MAC/B,eAAe,EAAK,IAAU,CAAC;MAE/B,UAAA,kBAAC,GAAD,EAAa,MAAM,GAAK,CAAA;KACpB,CAAA,IACR;KAEJ,kBAAC,UAAD;MAAQ,WAAW,EAAO;MAA1B,UAAA,CACI,kBAAC,OAAD;OAAK,KAAK,EAAK;OAAK,KAAK,EAAK;OAAK,WAAW,EAAO;MAAQ,CAAA,GAC5D,EAAK,UACF,kBAAC,cAAD;OAAY,WAAW,EAAO;OAAU,UAAA,EAAK;MAAoB,CAAA,IACjE,IACA;;KAEP,IACG,kBAAC,UAAD;MACI,MAAK;MACL,WAAW,EAAG,EAAO,YAAY,EAAO,GAAG;MAC3C,cAAY;MACZ,UAAU,CAAC,KAAQ,MAAY,EAAM,SAAS;MAC9C,eAAe,EAAK,IAAU,CAAC;MAE/B,UAAA,kBAAC,GAAD,EAAc,MAAM,GAAK,CAAA;KACrB,CAAA,IACR;IACH;;GAEJ,KAAkB,IACf,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAY,MAAK;IAAU,cAAY,EAAK;IAC9D,UAAA,EAAM,KAAK,GAAO,MACf,kBAAC,UAAD;KAEI,MAAK;KACL,MAAK;KACL,iBAAe,MAAe;KAC9B,cAAY,EAAM;KAClB,WAAW,EACP,EAAO,WACP,MAAe,KAAW,EAAO,eACrC;KACA,eAAe,EAAK,CAAU;KAE9B,UAAA,kBAAC,OAAD;MACI,KAAK,EAAM,aAAa,EAAM;MAC9B,KAAI;MACJ,WAAW,EAAO;KACrB,CAAA;IACG,GAhBC,GAAG,EAAM,IAAI,GAAG,GAgBjB,CACX;GACA,CAAA,IACL;EACH;CACD,CAAA,EAAA,CAAA;AAEhB"}
+{"version":3,"file":"Lightbox.js","names":[],"sources":["../../../src/components/Lightbox/Lightbox.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — closeLabel,\n * previousLabel and nextLabel are three separate strings an app has to translate,\n * showThumbnails/showCounter/loop are the chrome, and items/index/\n * onIndexChange/open/onClose are the controlled contract. The body is the focus\n * trap, the key handling and the swipe, which all move the same index.\n */\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { useScrollLock } from \"@/hooks/use-scroll-lock\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"../Portal\";\nimport styles from \"./Lightbox.module.css\";\n\n/** One item of the gallery. */\nexport interface LightboxItem {\n    /** Full-size image URL. */\n    src: string;\n    /** Alt text. Required: a gallery of unlabeled images is unusable with a screen reader. */\n    alt: string;\n    /** Caption rendered under the image. */\n    caption?: string;\n    /** Thumbnail URL for the strip. Falls back to `src`. */\n    thumbnail?: string;\n}\n\nexport interface LightboxProps {\n    items: LightboxItem[];\n    /** Whether the overlay is open. */\n    open: boolean;\n    /** Index shown while open. Default `0`. */\n    index?: number;\n    onIndexChange?: (index: number) => void;\n    onClose: () => void;\n    /** Renders the thumbnail strip. Default `true` when there is more than one item. */\n    showThumbnails?: boolean;\n    /** Renders the `3 / 12` counter. Default `true`. */\n    showCounter?: boolean;\n    /**\n     * Wrap around at the ends. Default `true` — in a photo viewer, hitting a dead\n     * end at the last image reads as a bug more often than as a boundary.\n     */\n    loop?: boolean;\n    closeLabel?: string;\n    previousLabel?: string;\n    nextLabel?: string;\n    className?: string;\n}\n\n/**\n * Full-screen image viewer with keyboard navigation.\n *\n * `Esc` closes, `←`/`→` walk the gallery, `Home`/`End` jump to the ends. Focus is\n * trapped inside while open and the page behind is scroll-locked, so the overlay\n * behaves like the dialog it is instead of a fancy `<div>` the keyboard can escape.\n *\n * Only the current image is mounted; neighbours are **preloaded** via `Image()` so\n * pressing `→` does not flash an empty frame.\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n * const [index, setIndex] = useState(0);\n *\n * <Lightbox\n *   open={open}\n *   items={photos.map((p) => ({ src: p.url, alt: p.description }))}\n *   index={index}\n *   onIndexChange={setIndex}\n *   onClose={() => setOpen(false)}\n * />\n * ```\n */\nexport function Lightbox({\n    items,\n    open,\n    index = 0,\n    onIndexChange,\n    onClose,\n    showThumbnails,\n    showCounter = true,\n    loop = true,\n    closeLabel = \"Close\",\n    previousLabel = \"Previous image\",\n    nextLabel = \"Next image\",\n    className,\n}: LightboxProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [internalIndex, setInternalIndex] = useState(index);\n    const isControlled = onIndexChange !== undefined;\n    const current = isControlled ? index : internalIndex;\n\n    useFocusTrap(containerRef, open);\n    useScrollLock(open);\n\n    const move = useCallback(\n        (next: number): void => {\n            if (items.length === 0) return;\n            const target = loop\n                ? (next + items.length) % items.length\n                : Math.max(0, Math.min(next, items.length - 1));\n            if (!isControlled) setInternalIndex(target);\n            onIndexChange?.(target);\n        },\n        [isControlled, items.length, loop, onIndexChange],\n    );\n\n    useEffect(() => {\n        if (!isControlled) setInternalIndex(index);\n    }, [index, isControlled]);\n\n    useEscapeLayer(open, onClose);\n\n    useEffect(() => {\n        if (!open) return;\n        function onKeyDown(event: KeyboardEvent): void {\n            switch (event.key) {\n                case \"ArrowRight\":\n                    move(current + 1);\n                    break;\n                case \"ArrowLeft\":\n                    move(current - 1);\n                    break;\n                case \"Home\":\n                    move(0);\n                    break;\n                case \"End\":\n                    move(items.length - 1);\n                    break;\n                default:\n                    return;\n            }\n            event.preventDefault();\n        }\n        document.addEventListener(\"keydown\", onKeyDown);\n        return () => document.removeEventListener(\"keydown\", onKeyDown);\n    }, [current, items.length, move, open]);\n\n    useEffect(() => {\n        if (!open || typeof Image === \"undefined\") return;\n        for (const offset of [-1, 1]) {\n            const neighbour = items[(current + offset + items.length) % items.length];\n            if (!neighbour) continue;\n            const preload = new Image();\n            preload.src = neighbour.src;\n        }\n    }, [current, items, open]);\n\n    if (!open || items.length === 0) return null;\n\n    const item = items[Math.max(0, Math.min(current, items.length - 1))];\n    const withThumbnails = showThumbnails ?? items.length > 1;\n    const multiple = items.length > 1;\n\n    return (\n        <Portal>\n            <div\n                ref={containerRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={item.alt}\n                className={cn(styles.overlay, className)}\n            >\n                <div className={styles.topBar}>\n                    {showCounter && multiple ? (\n                        <span className={styles.counter}>\n                            {current + 1} / {items.length}\n                        </span>\n                    ) : (\n                        <span />\n                    )}\n                    <button\n                        type=\"button\"\n                        className={styles.iconButton}\n                        aria-label={closeLabel}\n                        onClick={onClose}\n                    >\n                        <X size={20} />\n                    </button>\n                </div>\n\n                <div className={styles.stage}>\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={previousLabel}\n                            disabled={!loop && current === 0}\n                            onClick={() => move(current - 1)}\n                        >\n                            <ChevronLeft size={24} />\n                        </button>\n                    ) : null}\n\n                    <figure className={styles.figure}>\n                        <img src={item.src} alt={item.alt} className={styles.image} />\n                        {item.caption ? (\n                            <figcaption className={styles.caption}>{item.caption}</figcaption>\n                        ) : null}\n                    </figure>\n\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={nextLabel}\n                            disabled={!loop && current === items.length - 1}\n                            onClick={() => move(current + 1)}\n                        >\n                            <ChevronRight size={24} />\n                        </button>\n                    ) : null}\n                </div>\n\n                {withThumbnails && multiple ? (\n                    <div className={styles.thumbnails} role=\"tablist\" aria-label={item.alt}>\n                        {items.map((entry, entryIndex) => (\n                            <button\n                                key={`${entry.src}-${entryIndex}`}\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-selected={entryIndex === current}\n                                aria-label={entry.alt}\n                                className={cn(\n                                    styles.thumbnail,\n                                    entryIndex === current && styles.thumbnailActive,\n                                )}\n                                onClick={() => move(entryIndex)}\n                            >\n                                <img\n                                    src={entry.thumbnail ?? entry.src}\n                                    alt=\"\"\n                                    className={styles.thumbnailImage}\n                                />\n                            </button>\n                        ))}\n                    </div>\n                ) : null}\n            </div>\n        </Portal>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Menubar/Menubar.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./Menubar.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(e){return`separator`in e}function a({menus:a,className:o,...s}){let[c,l]=(0,n.useState)(-1),u=(0,n.useId)(),d=(0,n.useRef)(null),f=(0,n.useRef)([]),p=(0,n.useCallback)(()=>{l(-1)},[]);return(0,n.useEffect)(()=>{if(c===-1)return;let e=e=>{if(e.key===`Escape`){p(),f.current[c]?.focus();return}if(e.key===`ArrowRight`){e.preventDefault();let t=(c+1)%a.length;l(t),f.current[t]?.focus()}if(e.key===`ArrowLeft`){e.preventDefault();let t=(c-1+a.length)%a.length;l(t),f.current[t]?.focus()}},t=e=>{d.current&&!d.current.contains(e.target)&&p()};return window.addEventListener(`keydown`,e),window.addEventListener(`mousedown`,t),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`mousedown`,t)}},[c,a.length,p]),(0,r.jsx)(`div`,{ref:d,role:`menubar`,className:e.cn(t.default.root,o),...s,children:a.map((n,a)=>{let o=c===a,s=`${u}-panel-${a}`;return(0,r.jsxs)(`div`,{className:t.default.menu,children:[(0,r.jsx)(`button`,{ref:e=>{f.current[a]=e},type:`button`,role:`menuitem`,"aria-haspopup":`menu`,"aria-expanded":o,"aria-controls":o?s:void 0,className:e.cn(t.default.trigger,o&&t.default.triggerOpen),onClick:()=>l(e=>e===a?-1:a),children:n.label}),o&&(0,r.jsx)(`ul`,{id:s,role:`menu`,className:t.default.panel,children:n.items.map((e,n)=>i(e)?(0,r.jsx)(`li`,{role:`separator`,className:t.default.separator,"aria-hidden":!0},n):(0,r.jsx)(`li`,{role:`none`,children:(0,r.jsxs)(`button`,{type:`button`,role:`menuitem`,className:t.default.item,disabled:e.disabled,onClick:()=>{e.onSelect?.(),p()},children:[(0,r.jsx)(`span`,{className:t.default.itemLabel,children:e.label}),e.shortcut&&(0,r.jsx)(`span`,{className:t.default.shortcut,children:e.shortcut})]})},n))})]},a)})})}exports.Menubar=a;
+const e=require("../../utils/cn.cjs"),t=require("../Portal/escape-layer.cjs"),n=require("../Portal/Portal.cjs"),r=require("../Portal/anchor-position.cjs"),i=require("../Portal/tab-bridge.cjs"),a=require("./Menubar.module.cjs");let o=require("react"),s=require("react/jsx-runtime");var c=4;function l(e){return`separator`in e}function u({menus:u,portal:d=!0,className:f,...p}){let[m,h]=(0,o.useState)(-1),g=(0,o.useId)(),_=(0,o.useRef)(null),v=(0,o.useRef)([]),y=(0,o.useCallback)(()=>{h(-1)},[]),[b,x]=(0,o.useState)(null),[S,C]=(0,o.useState)(null),w=d&&m!==-1,T=r.useAnchorPosition({anchor:b,floating:S,side:`bottom`,align:`start`,offset:c,enabled:w});i.usePortalTabOrder({enabled:w,anchor:b,panel:S}),t.useEscapeLayer(m!==-1,()=>{y(),v.current[m]?.focus()}),(0,o.useEffect)(()=>{if(m===-1)return;let e=e=>{if(e.key===`ArrowRight`){e.preventDefault();let t=(m+1)%u.length;h(t),v.current[t]?.focus()}if(e.key===`ArrowLeft`){e.preventDefault();let t=(m-1+u.length)%u.length;h(t),v.current[t]?.focus()}},t=e=>{let t=e.target;_.current?.contains(t)||S?.contains(t)||y()};return window.addEventListener(`keydown`,e),window.addEventListener(`mousedown`,t),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`mousedown`,t)}},[m,u.length,y,S]);let E=(t,n)=>(0,s.jsx)(`ul`,{ref:C,id:n,role:`menu`,className:e.cn(a.default.panel,d&&a.default.portalled),style:T,children:t.items.map((e,t)=>l(e)?(0,s.jsx)(`li`,{role:`separator`,className:a.default.separator,"aria-hidden":!0},t):(0,s.jsx)(`li`,{role:`none`,children:(0,s.jsxs)(`button`,{type:`button`,role:`menuitem`,className:a.default.item,disabled:e.disabled,onClick:()=>{e.onSelect?.(),y()},children:[(0,s.jsx)(`span`,{className:a.default.itemLabel,children:e.label}),e.shortcut&&(0,s.jsx)(`span`,{className:a.default.shortcut,children:e.shortcut})]})},t))});return(0,s.jsx)(`div`,{ref:_,role:`menubar`,className:e.cn(a.default.root,f),...p,children:u.map((t,r)=>{let i=m===r,o=`${g}-panel-${r}`;return(0,s.jsxs)(`div`,{ref:i?x:void 0,className:a.default.menu,children:[(0,s.jsx)(`button`,{ref:e=>{v.current[r]=e},type:`button`,role:`menuitem`,"aria-haspopup":`menu`,"aria-expanded":i,"aria-controls":i?o:void 0,className:e.cn(a.default.trigger,i&&a.default.triggerOpen),onClick:()=>h(e=>e===r?-1:r),children:t.label}),i&&(d?(0,s.jsx)(n.Portal,{children:E(t,o)}):E(t,o))]},r)})})}exports.Menubar=u;
 //# sourceMappingURL=Menubar.cjs.map