tempest-react-sdk 0.66.0 → 0.68.0

package/dist/components/Popover/Popover.js

@@ -1,51 +1,72 @@
 import { cn as e } from "../../utils/cn.js";
-import t from "./Popover.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 { useEscapeLayer as t } from "../Portal/escape-layer.js";
+import { Portal as n } from "../Portal/Portal.js";
+import { useAnchorPosition as r } from "../Portal/anchor-position.js";
+import { usePortalTabOrder as i } from "../Portal/tab-bridge.js";
+import a from "./Popover.module.js";
+import { useCallback as o, useEffect as s, useId as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/Popover/Popover.tsx
-function l({ trigger: l, children: u, placement: d = "bottom", open: f, onOpenChange: p, defaultOpen: m = !1, closeOnEsc: h = !0, closeOnOutsideClick: g = !0, className: _ }) {
-	let v = f !== void 0, [y, b] = o(m), x = v ? f : y, S = i(), C = a(null), w = n((e) => {
-		v || b(e), p?.(e);
-	}, [v, p]);
-	r(() => {
-		if (!x) return;
+var f = 8;
+function p({ trigger: p, children: m, placement: h = "bottom", portal: g = !0, open: _, onOpenChange: v, defaultOpen: y = !1, closeOnEsc: b = !0, closeOnOutsideClick: x = !0, className: S }) {
+	let C = _ !== void 0, [w, T] = l(y), E = C ? _ : w, D = c(), [O, k] = l(null), [A, j] = l(null), M = r({
+		anchor: O,
+		floating: A,
+		side: h,
+		align: "center",
+		offset: f,
+		enabled: g && E
+	});
+	i({
+		enabled: g && E,
+		anchor: O,
+		panel: A
+	});
+	let N = o((e) => {
+		C || T(e), v?.(e);
+	}, [C, v]);
+	t(E && b, () => N(!1)), s(() => {
+		if (!E) return;
 		let e = (e) => {
-			h && e.key === "Escape" && w(!1);
-		}, t = (e) => {
-			g && C.current && !C.current.contains(e.target) && w(!1);
+			if (!x) return;
+			let t = e.target;
+			O?.contains(t) || A?.contains(t) || N(!1);
 		};
-		return window.addEventListener("keydown", e), window.addEventListener("mousedown", t), () => {
-			window.removeEventListener("keydown", e), window.removeEventListener("mousedown", t);
+		return window.addEventListener("mousedown", e), () => {
+			window.removeEventListener("mousedown", e);
 		};
 	}, [
+		E,
 		x,
-		h,
-		g,
-		w
+		N,
+		O,
+		A
 	]);
-	let T = (e) => {
-		l.props.onClick?.(e), w(!x);
-	}, E = {
-		...l,
+	let P = (e) => {
+		p.props.onClick?.(e), N(!E);
+	}, F = {
+		...p,
 		props: {
-			...l.props,
-			onClick: T,
-			"aria-expanded": x,
-			"aria-controls": S
+			...p.props,
+			onClick: P,
+			"aria-expanded": E,
+			"aria-controls": D
 		}
-	};
-	return /* @__PURE__ */ c("span", {
-		ref: C,
-		className: t.root,
-		children: [E, x && /* @__PURE__ */ s("div", {
-			id: S,
-			role: "dialog",
-			className: e(t.popover, t[d], _),
-			children: u
-		})]
+	}, I = /* @__PURE__ */ u("div", {
+		ref: j,
+		id: D,
+		role: "dialog",
+		className: e(a.popover, g ? a.portalled : a[h], S),
+		style: M,
+		children: m
+	});
+	return /* @__PURE__ */ d("span", {
+		ref: k,
+		className: a.root,
+		children: [F, E && (g ? /* @__PURE__ */ u(n, { children: I }) : I)]
 	});
 }
 //#endregion
-export { l as Popover };
+export { p as Popover };
 
 //# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — trigger and children are the two halves, placement\n * is where it lands, and open/onOpenChange/defaultOpen is the standard controlled-\n * or-not pair. closeOnEsc and closeOnOutsideClick are separate because a popover\n * holding a form wants one and not the other.\n */\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Popover.module.css\";\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface PopoverProps {\n    /** Trigger element. Receives `onClick`/`aria-expanded`/`aria-controls`. */\n    trigger: ReactElement<{\n        onClick?: (e: React.MouseEvent) => void;\n        \"aria-expanded\"?: boolean;\n        \"aria-controls\"?: string;\n    }>;\n    children: ReactNode;\n    placement?: PopoverPlacement;\n    /** Controlled open state. */\n    open?: boolean;\n    /** Called when the user toggles or dismisses. */\n    onOpenChange?: (open: boolean) => void;\n    /** Default open state for uncontrolled usage. */\n    defaultOpen?: boolean;\n    /** Close on Escape. Default true. */\n    closeOnEsc?: boolean;\n    /** Close on outside click. Default true. */\n    closeOnOutsideClick?: boolean;\n    className?: string;\n}\n\n/**\n * Lightweight popover. Renders a positioned panel anchored to a trigger,\n * dismissed on outside click / Escape. Does NOT include collision detection\n * or smart positioning — pair with Floating UI if you need that.\n */\nexport function Popover({\n    trigger,\n    children,\n    placement = \"bottom\",\n    open,\n    onOpenChange,\n    defaultOpen = false,\n    closeOnEsc = true,\n    closeOnOutsideClick = true,\n    className,\n}: PopoverProps) {\n    const isControlled = open !== undefined;\n    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);\n    const isOpen = isControlled ? open : internalOpen;\n    const id = useId();\n    const rootRef = useRef<HTMLSpanElement>(null);\n\n    const setOpen = useCallback(\n        (next: boolean): void => {\n            if (!isControlled) setInternalOpen(next);\n            onOpenChange?.(next);\n        },\n        [isControlled, onOpenChange],\n    );\n\n    useEffect(() => {\n        if (!isOpen) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") setOpen(false);\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (!closeOnOutsideClick) return;\n            if (rootRef.current && !rootRef.current.contains(event.target as Node)) {\n                setOpen(false);\n            }\n        };\n        window.addEventListener(\"keydown\", onKey);\n        window.addEventListener(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"keydown\", onKey);\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [isOpen, closeOnEsc, closeOnOutsideClick, setOpen]);\n\n    const handleTriggerClick = (event: React.MouseEvent): void => {\n        trigger.props.onClick?.(event);\n        setOpen(!isOpen);\n    };\n\n    const triggerClone = {\n        ...trigger,\n        props: {\n            ...trigger.props,\n            onClick: handleTriggerClick,\n            \"aria-expanded\": isOpen,\n            \"aria-controls\": id,\n        },\n    } as ReactElement;\n\n    return (\n        <span ref={rootRef} className={styles.root}>\n            {triggerClone}\n            {isOpen && (\n                <div\n                    id={id}\n                    role=\"dialog\"\n                    className={cn(styles.popover, styles[placement], className)}\n                >\n                    {children}\n                </div>\n            )}\n        </span>\n    );\n}\n"],"mappings":";;;;;AAwCA,SAAgB,EAAQ,EACpB,YACA,aACA,eAAY,UACZ,SACA,iBACA,iBAAc,IACd,gBAAa,IACb,yBAAsB,IACtB,gBACa;CACb,IAAM,IAAe,MAAS,KAAA,GACxB,CAAC,GAAc,KAAmB,EAAkB,CAAW,GAC/D,IAAS,IAAe,IAAO,GAC/B,IAAK,EAAM,GACX,IAAU,EAAwB,IAAI,GAEtC,IAAU,GACX,MAAwB;EAErB,AADK,KAAc,EAAgB,CAAI,GACvC,IAAe,CAAI;CACvB,GACA,CAAC,GAAc,CAAY,CAC/B;CAEA,QAAgB;EACZ,IAAI,CAAC,GAAQ;EACb,IAAM,KAAS,MAA+B;GAC1C,AAAI,KAAc,EAAM,QAAQ,YAAU,EAAQ,EAAK;EAC3D,GACM,KAAU,MAA4B;GACnC,KACD,EAAQ,WAAW,CAAC,EAAQ,QAAQ,SAAS,EAAM,MAAc,KACjE,EAAQ,EAAK;EAErB;EAGA,OAFA,OAAO,iBAAiB,WAAW,CAAK,GACxC,OAAO,iBAAiB,aAAa,CAAM,SAC9B;GAET,AADA,OAAO,oBAAoB,WAAW,CAAK,GAC3C,OAAO,oBAAoB,aAAa,CAAM;EAClD;CACJ,GAAG;EAAC;EAAQ;EAAY;EAAqB;CAAO,CAAC;CAErD,IAAM,KAAsB,MAAkC;EAE1D,AADA,EAAQ,MAAM,UAAU,CAAK,GAC7B,EAAQ,CAAC,CAAM;CACnB,GAEM,IAAe;EACjB,GAAG;EACH,OAAO;GACH,GAAG,EAAQ;GACX,SAAS;GACT,iBAAiB;GACjB,iBAAiB;EACrB;CACJ;CAEA,OACI,kBAAC,QAAD;EAAM,KAAK;EAAS,WAAW,EAAO;EAAtC,UAAA,CACK,GACA,KACG,kBAAC,OAAD;GACQ;GACJ,MAAK;GACL,WAAW,EAAG,EAAO,SAAS,EAAO,IAAY,CAAS;GAEzD;EACA,CAAA,CAEP;;AAEd"}
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — trigger and children are the two halves, placement\n * is where it lands, portal is whether it escapes the tree, and open/onOpenChange/defaultOpen is the standard controlled-\n * or-not pair. closeOnEsc and closeOnOutsideClick are separate because a popover\n * holding a form wants one and not the other.\n */\nimport { useCallback, useEffect, useId, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Popover.module.css\";\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface PopoverProps {\n    /** Trigger element. Receives `onClick`/`aria-expanded`/`aria-controls`. */\n    trigger: ReactElement<{\n        onClick?: (e: React.MouseEvent) => void;\n        \"aria-expanded\"?: boolean;\n        \"aria-controls\"?: string;\n    }>;\n    children: ReactNode;\n    placement?: PopoverPlacement;\n    /**\n     * Render the panel in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, any ancestor with `overflow` other than `visible` clips the panel —\n     * inside a `DataTable` cell only 3% of it was visible (measured in Chrome at\n     * 1440 px). In a portal it escapes the clip, flips to the opposite side when\n     * the requested one has no room, and follows the trigger on scroll and resize.\n     * `false` keeps the in-flow panel.\n     */\n    portal?: boolean;\n    /** Controlled open state. */\n    open?: boolean;\n    /** Called when the user toggles or dismisses. */\n    onOpenChange?: (open: boolean) => void;\n    /** Default open state for uncontrolled usage. */\n    defaultOpen?: boolean;\n    /** Close on Escape. Default true. */\n    closeOnEsc?: boolean;\n    /** Close on outside click. Default true. */\n    closeOnOutsideClick?: boolean;\n    className?: string;\n}\n\n/** Gap between trigger and panel, in px — the in-flow CSS uses the same 8 px. */\nconst POPOVER_OFFSET = 8;\n\n/**\n * Lightweight popover. Renders a panel anchored to a trigger, dismissed on\n * outside click / Escape.\n *\n * Portalled by default, with viewport-aware placement: the panel flips to the\n * opposite side when the requested one overflows, and is clamped inside the\n * viewport otherwise.\n */\nexport function Popover({\n    trigger,\n    children,\n    placement = \"bottom\",\n    portal = true,\n    open,\n    onOpenChange,\n    defaultOpen = false,\n    closeOnEsc = true,\n    closeOnOutsideClick = true,\n    className,\n}: PopoverProps) {\n    const isControlled = open !== undefined;\n    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);\n    const isOpen = isControlled ? open : internalOpen;\n    const id = useId();\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [panelNode, setPanelNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: panelNode,\n        side: placement,\n        align: \"center\",\n        offset: POPOVER_OFFSET,\n        enabled: portal && isOpen,\n    });\n    usePortalTabOrder({ enabled: portal && isOpen, anchor: rootNode, panel: panelNode });\n\n    const setOpen = useCallback(\n        (next: boolean): void => {\n            if (!isControlled) setInternalOpen(next);\n            onOpenChange?.(next);\n        },\n        [isControlled, onOpenChange],\n    );\n\n    useEscapeLayer(isOpen && closeOnEsc, () => setOpen(false));\n\n    /**\n     * Dismiss on a press outside both trigger and panel.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * trigger's wrapper, and a press inside it — on a form field, say — would\n     * otherwise count as outside.\n     */\n    useEffect(() => {\n        if (!isOpen) return;\n        const onDown = (event: MouseEvent): void => {\n            if (!closeOnOutsideClick) return;\n            const target = event.target as Node;\n            if (rootNode?.contains(target) || panelNode?.contains(target)) return;\n            setOpen(false);\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [isOpen, closeOnOutsideClick, setOpen, rootNode, panelNode]);\n\n    const handleTriggerClick = (event: React.MouseEvent): void => {\n        trigger.props.onClick?.(event);\n        setOpen(!isOpen);\n    };\n\n    const triggerClone = {\n        ...trigger,\n        props: {\n            ...trigger.props,\n            onClick: handleTriggerClick,\n            \"aria-expanded\": isOpen,\n            \"aria-controls\": id,\n        },\n    } as ReactElement;\n\n    const panel = (\n        <div\n            ref={setPanelNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.popover, portal ? styles.portalled : styles[placement], className)}\n            style={floatingStyle}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span ref={setRootNode} className={styles.root}>\n            {triggerClone}\n            {isOpen && (portal ? <Portal>{panel}</Portal> : panel)}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;;AAkDA,IAAM,IAAiB;AAUvB,SAAgB,EAAQ,EACpB,YACA,aACA,eAAY,UACZ,YAAS,IACT,SACA,iBACA,iBAAc,IACd,gBAAa,IACb,yBAAsB,IACtB,gBACa;CACb,IAAM,IAAe,MAAS,KAAA,GACxB,CAAC,GAAc,KAAmB,EAAkB,CAAW,GAC/D,IAAS,IAAe,IAAO,GAC/B,IAAK,EAAM,GACX,CAAC,GAAU,KAAe,EAAiC,IAAI,GAC/D,CAAC,GAAW,KAAgB,EAAgC,IAAI,GAChE,IAAgB,EAAkB;EACpC,QAAQ;EACR,UAAU;EACV,MAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAS,KAAU;CACvB,CAAC;CACD,EAAkB;EAAE,SAAS,KAAU;EAAQ,QAAQ;EAAU,OAAO;CAAU,CAAC;CAEnF,IAAM,IAAU,GACX,MAAwB;EAErB,AADK,KAAc,EAAgB,CAAI,GACvC,IAAe,CAAI;CACvB,GACA,CAAC,GAAc,CAAY,CAC/B;CAWA,AATA,EAAe,KAAU,SAAkB,EAAQ,EAAK,CAAC,GASzD,QAAgB;EACZ,IAAI,CAAC,GAAQ;EACb,IAAM,KAAU,MAA4B;GACxC,IAAI,CAAC,GAAqB;GAC1B,IAAM,IAAS,EAAM;GACjB,GAAU,SAAS,CAAM,KAAK,GAAW,SAAS,CAAM,KAC5D,EAAQ,EAAK;EACjB;EAEA,OADA,OAAO,iBAAiB,aAAa,CAAM,SAC9B;GACT,OAAO,oBAAoB,aAAa,CAAM;EAClD;CACJ,GAAG;EAAC;EAAQ;EAAqB;EAAS;EAAU;CAAS,CAAC;CAE9D,IAAM,KAAsB,MAAkC;EAE1D,AADA,EAAQ,MAAM,UAAU,CAAK,GAC7B,EAAQ,CAAC,CAAM;CACnB,GAEM,IAAe;EACjB,GAAG;EACH,OAAO;GACH,GAAG,EAAQ;GACX,SAAS;GACT,iBAAiB;GACjB,iBAAiB;EACrB;CACJ,GAEM,IACF,kBAAC,OAAD;EACI,KAAK;EACD;EACJ,MAAK;EACL,WAAW,EAAG,EAAO,SAAS,IAAS,EAAO,YAAY,EAAO,IAAY,CAAS;EACtF,OAAO;EAEN;CACA,CAAA;CAGT,OACI,kBAAC,QAAD;EAAM,KAAK;EAAa,WAAW,EAAO;EAA1C,UAAA,CACK,GACA,MAAW,IAAS,kBAAC,GAAD,EAAA,UAAS,EAAc,CAAA,IAAI,EAC9C;;AAEd"}

package/dist/components/Popover/Popover.module.cjs

@@ -1,3 +1,3 @@
 require("../../styles/component/Popover.css");
-var e=`tempest_root_vEMon`,t=`tempest_popover_E9K9X`,n=`tempest_tempest-popover-in_W8miP`,r=`tempest_top_TYlrh`,i=`tempest_bottom_wGs70`,a=`tempest_left_h7fCr`,o=`tempest_right_--bJW`,s={root:e,popover:t,tempestPopoverIn:n,top:r,bottom:i,left:a,right:o};exports.bottom=i,exports.default=s,exports.left=a,exports.popover=t,exports.right=o,exports.root=e,exports.tempestPopoverIn=n,exports.top=r;
+var e=`tempest_root_vEMon`,t=`tempest_popover_E9K9X`,n=`tempest_tempest-popover-in_W8miP`,r=`tempest_portalled_pZ553`,i=`tempest_top_TYlrh`,a=`tempest_bottom_wGs70`,o=`tempest_left_h7fCr`,s=`tempest_right_--bJW`,c={root:e,popover:t,tempestPopoverIn:n,portalled:r,top:i,bottom:a,left:o,right:s};exports.bottom=a,exports.default=c,exports.left=o,exports.popover=t,exports.portalled=r,exports.right=s,exports.root=e,exports.tempestPopoverIn=n,exports.top=i;
 //# sourceMappingURL=Popover.module.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.cjs","names":[],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.popover {\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-popover-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.popover: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-popover-in {\n    from {\n        opacity: 0;\n        transform: translate(var(--tempest-popover-tx, -50%), 4px);\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .popover {\n        animation: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Popover.module.cjs","names":[],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.popover {\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-popover-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.popover:focus {\n    outline: none;\n}\n\n.portalled {\n    --tempest-popover-tx: 0;\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-popover-in {\n    from {\n        opacity: 0;\n        transform: translate(var(--tempest-popover-tx, -50%), 4px);\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .popover {\n        animation: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Popover/Popover.module.js

@@ -1,15 +1,16 @@
 import "../../styles/component/Popover.css";
 //#region src/components/Popover/Popover.module.css
-var e = "tempest_root_vEMon", t = "tempest_popover_E9K9X", n = "tempest_tempest-popover-in_W8miP", r = "tempest_top_TYlrh", i = "tempest_bottom_wGs70", a = "tempest_left_h7fCr", o = "tempest_right_--bJW", s = {
+var e = "tempest_root_vEMon", t = "tempest_popover_E9K9X", n = "tempest_tempest-popover-in_W8miP", r = "tempest_portalled_pZ553", i = "tempest_top_TYlrh", a = "tempest_bottom_wGs70", o = "tempest_left_h7fCr", s = "tempest_right_--bJW", c = {
 	root: e,
 	popover: t,
 	tempestPopoverIn: n,
-	top: r,
-	bottom: i,
-	left: a,
-	right: o
+	portalled: r,
+	top: i,
+	bottom: a,
+	left: o,
+	right: s
 };
 //#endregion
-export { i as bottom, s as default, a as left, t as popover, o as right, e as root, n as tempestPopoverIn, r as top };
+export { a as bottom, c as default, o as left, t as popover, r as portalled, s as right, e as root, n as tempestPopoverIn, i as top };
 
 //# sourceMappingURL=Popover.module.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.js","names":[],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.popover {\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-popover-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.popover: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-popover-in {\n    from {\n        opacity: 0;\n        transform: translate(var(--tempest-popover-tx, -50%), 4px);\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .popover {\n        animation: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Popover.module.js","names":[],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.popover {\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-popover-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.popover:focus {\n    outline: none;\n}\n\n.portalled {\n    --tempest-popover-tx: 0;\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-popover-in {\n    from {\n        opacity: 0;\n        transform: translate(var(--tempest-popover-tx, -50%), 4px);\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .popover {\n        animation: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Portal/anchor-position.cjs

@@ -0,0 +1,2 @@
+let e=require("react");var t={top:`bottom`,bottom:`top`,left:`right`,right:`left`};function n(e,t,n){return Math.max(t,Math.min(e,Math.max(t,n)))}function r(e,t){let{anchor:n,width:r,height:i,offset:a}=e;switch(t){case`top`:return n.top-a-i;case`bottom`:return n.top+n.height+a;case`left`:return n.left-a-r;default:return n.left+n.width+a}}function i(e,t){let{width:n,height:i,viewportWidth:a,viewportHeight:o,margin:s}=e,c=r(e,t),l=t===`top`||t===`bottom`?i:n,u=t===`top`||t===`bottom`?o:a;return c>=s&&c+l<=u-s}function a(e,t,n,r){return r===`start`?e:r===`end`?e+t-n:e+(t-n)/2}function o(e){let{anchor:o,width:s,height:c,viewportWidth:l,viewportHeight:u,align:d,margin:f}=e,p=e.side,m=t[p],h=!i(e,p)&&i(e,m)?m:p,g=h===`top`||h===`bottom`,_=r(e,h),v=g?_:a(o.top,o.height,c,d),y=g?a(o.left,o.width,s,d):_;return{top:n(v,f,u-c-f),left:n(y,f,l-s-f),side:h}}function s({anchor:t,floating:n,side:r,align:i,offset:a,enabled:s,matchWidth:c=!1}){let[l,u]=(0,e.useState)(null);if((0,e.useLayoutEffect)(()=>{if(!s||!t||!n){u(null);return}let e=()=>{let e=t.getBoundingClientRect(),s=c?e.width:void 0;s!==void 0&&n.style.setProperty(`width`,`${s}px`);let l={...o({anchor:{top:e.top,left:e.left,width:e.width,height:e.height},width:n.offsetWidth,height:n.offsetHeight,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight,side:r,align:i,offset:a,margin:8}),width:s};u(e=>e&&e.top===l.top&&e.left===l.left&&e.side===l.side&&e.width===l.width?e:l)};e();let l=0,d=()=>{l===0&&(l=requestAnimationFrame(()=>{l=0,e()}))};window.addEventListener(`scroll`,d,{capture:!0,passive:!0}),window.addEventListener(`resize`,d);let f=typeof ResizeObserver>`u`?null:new ResizeObserver(d);return f?.observe(n),f?.observe(t),()=>{f?.disconnect(),l!==0&&cancelAnimationFrame(l),window.removeEventListener(`scroll`,d,{capture:!0}),window.removeEventListener(`resize`,d)}},[s,t,n,r,i,a,c]),s)return{position:`fixed`,top:l?.top??0,left:l?.left??0,width:l?.width}}exports.computeAnchorPosition=o,exports.useAnchorPosition=s;
+//# sourceMappingURL=anchor-position.cjs.map

package/dist/components/Portal/anchor-position.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-position.cjs","names":[],"sources":["../../../src/components/Portal/anchor-position.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { CSSProperties } from \"react\";\n\n/** Side of the anchor a floating layer is placed on. */\nexport type AnchorSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\n/** Alignment of the floating layer along the anchor's edge. */\nexport type AnchorAlign = \"start\" | \"center\" | \"end\";\n\n/** The viewport-relative box a placement is computed from. */\nexport interface AnchorRect {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n}\n\n/** Everything {@link computeAnchorPosition} needs, all in CSS pixels. */\nexport interface AnchorGeometry {\n    anchor: AnchorRect;\n    width: number;\n    height: number;\n    viewportWidth: number;\n    viewportHeight: number;\n    side: AnchorSide;\n    align: AnchorAlign;\n    offset: number;\n    margin: number;\n}\n\n/** A resolved placement: viewport coordinates plus the side actually used. */\nexport interface AnchorPlacement {\n    top: number;\n    left: number;\n    side: AnchorSide;\n}\n\n/** What {@link useAnchorPosition} keeps between measurements. */\ninterface MeasuredPlacement extends AnchorPlacement {\n    /** The anchor's width, when the layer matches it. */\n    width: number | undefined;\n}\n\nconst OPPOSITE: Record<AnchorSide, AnchorSide> = {\n    top: \"bottom\",\n    bottom: \"top\",\n    left: \"right\",\n    right: \"left\",\n};\n\n/** Distance kept between a floating layer and the viewport edge, in px. */\nexport const ANCHOR_VIEWPORT_MARGIN = 8;\n\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, Math.max(min, max)));\n}\n\nfunction mainAxis(geometry: AnchorGeometry, side: AnchorSide): number {\n    const { anchor, width, height, offset } = geometry;\n    switch (side) {\n        case \"top\":\n            return anchor.top - offset - height;\n        case \"bottom\":\n            return anchor.top + anchor.height + offset;\n        case \"left\":\n            return anchor.left - offset - width;\n        case \"right\":\n        default:\n            return anchor.left + anchor.width + offset;\n    }\n}\n\nfunction fits(geometry: AnchorGeometry, side: AnchorSide): boolean {\n    const { width, height, viewportWidth, viewportHeight, margin } = geometry;\n    const start = mainAxis(geometry, side);\n    const size = side === \"top\" || side === \"bottom\" ? height : width;\n    const limit = side === \"top\" || side === \"bottom\" ? viewportHeight : viewportWidth;\n    return start >= margin && start + size <= limit - margin;\n}\n\nfunction crossAxis(start: number, length: number, size: number, align: AnchorAlign): number {\n    if (align === \"start\") return start;\n    if (align === \"end\") return start + length - size;\n    return start + (length - size) / 2;\n}\n\n/**\n * Place a floating layer next to its anchor, inside the viewport.\n *\n * The requested side wins when the layer fits there. When it does not and the\n * opposite side does, the layer flips — the case that matters is the action menu\n * of the last row of a table near the bottom of the screen, which would otherwise\n * open below the fold. When neither side fits, the requested one is kept and the\n * layer is clamped, because a partially visible menu the user can scroll to beats\n * one that jumps sides depending on a pixel.\n *\n * Both axes are then clamped to the viewport minus `margin`.\n *\n * @param geometry - The anchor box, the floating layer's size, the viewport, and\n * the requested placement.\n * @returns The viewport coordinates for a `position: fixed` layer, and the side\n * that was used after flipping.\n */\nexport function computeAnchorPosition(geometry: AnchorGeometry): AnchorPlacement {\n    const { anchor, width, height, viewportWidth, viewportHeight, align, margin } = geometry;\n    const requested = geometry.side;\n    const flipped = OPPOSITE[requested];\n    const side = !fits(geometry, requested) && fits(geometry, flipped) ? flipped : requested;\n    const vertical = side === \"top\" || side === \"bottom\";\n    const main = mainAxis(geometry, side);\n    const top = vertical ? main : crossAxis(anchor.top, anchor.height, height, align);\n    const left = vertical ? crossAxis(anchor.left, anchor.width, width, align) : main;\n    return {\n        top: clamp(top, margin, viewportHeight - height - margin),\n        left: clamp(left, margin, viewportWidth - width - margin),\n        side,\n    };\n}\n\n/** Options of {@link useAnchorPosition}. */\nexport interface AnchorPositionOptions {\n    /** Element the layer is anchored to. */\n    anchor: HTMLElement | null;\n    /** The floating layer itself, once mounted. */\n    floating: HTMLElement | null;\n    side: AnchorSide;\n    align: AnchorAlign;\n    /** Gap between anchor and layer, in px. */\n    offset: number;\n    /** When false the hook does nothing and returns `undefined`. */\n    enabled: boolean;\n    /**\n     * Give the layer the anchor's width — a listbox under its input. Default\n     * `false`.\n     */\n    matchWidth?: boolean;\n}\n\n/**\n * Keep a portalled layer glued to its anchor.\n *\n * Takes the floating element as a value rather than a ref, because `Portal`\n * renders `null` on its first pass and mounts in an effect: a layout effect keyed\n * off `open` would run while the layer does not exist and measure nothing. With\n * the node held in state (a callback ref), the effect runs on the render that has\n * it, and `useLayoutEffect` settles the position before the first paint.\n *\n * The size comes from `offsetWidth`/`offsetHeight`, not from\n * `getBoundingClientRect`, which reports the transformed box — the layers enter\n * with a `translate`/`scale` animation, and the transformed rect would place them\n * a few pixels off. The anchor's rect is the right one to read: it is where the\n * trigger is painted.\n *\n * Scroll (captured, so a scrolling table wrapper counts) and resize reposition the\n * layer on the next animation frame, so a menu open inside a table that scrolls\n * follows its row instead of floating where the row used to be. So does a change\n * in the size of either box, through a `ResizeObserver`: a combobox list flipped\n * above its input shrinks as the user types, and a multi-select field grows a\n * line as chips are added — without the observer the list would keep its old\n * top and float away from the field, or cover it.\n *\n * With `matchWidth` the anchor's width is written to the layer **before** its\n * height is read, so the height is measured at the width it will be painted at —\n * a list whose options wrap at the narrower width is taller.\n *\n * The unmeasured first pass is **not** hidden with `visibility: hidden`: an\n * element under it cannot take focus, and the menu's focus effect runs before\n * the measured re-render, so the first entry silently kept no focus (measured in\n * Chrome; jsdom does not enforce it). Nothing is painted at the unmeasured\n * position anyway — the layout effect re-renders before the browser paints.\n *\n * @param options - Anchor, floating node, placement, and whether it is active.\n * @returns A `position: fixed` style for the layer, or `undefined` when disabled.\n */\nexport function useAnchorPosition({\n    anchor,\n    floating,\n    side,\n    align,\n    offset,\n    enabled,\n    matchWidth = false,\n}: AnchorPositionOptions): CSSProperties | undefined {\n    const [placement, setPlacement] = useState<MeasuredPlacement | null>(null);\n\n    useLayoutEffect(() => {\n        if (!enabled || !anchor || !floating) {\n            setPlacement(null);\n            return;\n        }\n        const update = (): void => {\n            const rect = anchor.getBoundingClientRect();\n            const width = matchWidth ? rect.width : undefined;\n            if (width !== undefined) floating.style.setProperty(\"width\", `${width}px`);\n            const position = computeAnchorPosition({\n                anchor: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },\n                width: floating.offsetWidth,\n                height: floating.offsetHeight,\n                viewportWidth: window.innerWidth,\n                viewportHeight: window.innerHeight,\n                side,\n                align,\n                offset,\n                margin: ANCHOR_VIEWPORT_MARGIN,\n            });\n            const next: MeasuredPlacement = { ...position, width };\n            setPlacement((current) =>\n                current &&\n                current.top === next.top &&\n                current.left === next.left &&\n                current.side === next.side &&\n                current.width === next.width\n                    ? current\n                    : next,\n            );\n        };\n        update();\n        let frame = 0;\n        const schedule = (): void => {\n            if (frame !== 0) return;\n            frame = requestAnimationFrame(() => {\n                frame = 0;\n                update();\n            });\n        };\n        window.addEventListener(\"scroll\", schedule, { capture: true, passive: true });\n        window.addEventListener(\"resize\", schedule);\n        const observer =\n            typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(schedule);\n        observer?.observe(floating);\n        observer?.observe(anchor);\n        return () => {\n            observer?.disconnect();\n            if (frame !== 0) cancelAnimationFrame(frame);\n            window.removeEventListener(\"scroll\", schedule, { capture: true });\n            window.removeEventListener(\"resize\", schedule);\n        };\n    }, [enabled, anchor, floating, side, align, offset, matchWidth]);\n\n    if (!enabled) return undefined;\n    return {\n        position: \"fixed\",\n        top: placement?.top ?? 0,\n        left: placement?.left ?? 0,\n        width: placement?.width,\n    };\n}\n"],"mappings":"uBA2CA,IAAM,EAA2C,CAC7C,IAAK,SACL,OAAQ,MACR,KAAM,QACN,MAAO,MACX,EAKA,SAAS,EAAM,EAAe,EAAa,EAAqB,CAC5D,OAAO,KAAK,IAAI,EAAK,KAAK,IAAI,EAAO,KAAK,IAAI,EAAK,CAAG,CAAC,CAAC,CAC5D,CAEA,SAAS,EAAS,EAA0B,EAA0B,CAClE,GAAM,CAAE,SAAQ,QAAO,SAAQ,UAAW,EAC1C,OAAQ,EAAR,CACI,IAAK,MACD,OAAO,EAAO,IAAM,EAAS,EACjC,IAAK,SACD,OAAO,EAAO,IAAM,EAAO,OAAS,EACxC,IAAK,OACD,OAAO,EAAO,KAAO,EAAS,EAElC,QACI,OAAO,EAAO,KAAO,EAAO,MAAQ,CAC5C,CACJ,CAEA,SAAS,EAAK,EAA0B,EAA2B,CAC/D,GAAM,CAAE,QAAO,SAAQ,gBAAe,iBAAgB,UAAW,EAC3D,EAAQ,EAAS,EAAU,CAAI,EAC/B,EAAO,IAAS,OAAS,IAAS,SAAW,EAAS,EACtD,EAAQ,IAAS,OAAS,IAAS,SAAW,EAAiB,EACrE,OAAO,GAAS,GAAU,EAAQ,GAAQ,EAAQ,CACtD,CAEA,SAAS,EAAU,EAAe,EAAgB,EAAc,EAA4B,CAGxF,OAFI,IAAU,QAAgB,EAC1B,IAAU,MAAc,EAAQ,EAAS,EACtC,GAAS,EAAS,GAAQ,CACrC,CAmBA,SAAgB,EAAsB,EAA2C,CAC7E,GAAM,CAAE,SAAQ,QAAO,SAAQ,gBAAe,iBAAgB,QAAO,UAAW,EAC1E,EAAY,EAAS,KACrB,EAAU,EAAS,GACnB,EAAO,CAAC,EAAK,EAAU,CAAS,GAAK,EAAK,EAAU,CAAO,EAAI,EAAU,EACzE,EAAW,IAAS,OAAS,IAAS,SACtC,EAAO,EAAS,EAAU,CAAI,EAC9B,EAAM,EAAW,EAAO,EAAU,EAAO,IAAK,EAAO,OAAQ,EAAQ,CAAK,EAC1E,EAAO,EAAW,EAAU,EAAO,KAAM,EAAO,MAAO,EAAO,CAAK,EAAI,EAC7E,MAAO,CACH,IAAK,EAAM,EAAK,EAAQ,EAAiB,EAAS,CAAM,EACxD,KAAM,EAAM,EAAM,EAAQ,EAAgB,EAAQ,CAAM,EACxD,MACJ,CACJ,CAyDA,SAAgB,EAAkB,CAC9B,SACA,WACA,OACA,QACA,SACA,UACA,aAAa,IACoC,CACjD,GAAM,CAAC,EAAW,IAAA,EAAgB,EAAA,SAAA,CAAmC,IAAI,EAEzE,IAAA,EAAA,EAAA,gBAAA,KAAsB,CAClB,GAAI,CAAC,GAAW,CAAC,GAAU,CAAC,EAAU,CAClC,EAAa,IAAI,EACjB,MACJ,CACA,IAAM,MAAqB,CACvB,IAAM,EAAO,EAAO,sBAAsB,EACpC,EAAQ,EAAa,EAAK,MAAQ,IAAA,GACpC,IAAU,IAAA,IAAW,EAAS,MAAM,YAAY,QAAS,GAAG,EAAM,GAAG,EAYzE,IAAM,EAA0B,CAAE,GAXjB,EAAsB,CACnC,OAAQ,CAAE,IAAK,EAAK,IAAK,KAAM,EAAK,KAAM,MAAO,EAAK,MAAO,OAAQ,EAAK,MAAO,EACjF,MAAO,EAAS,YAChB,OAAQ,EAAS,aACjB,cAAe,OAAO,WACtB,eAAgB,OAAO,YACvB,OACA,QACA,SACA,OAAA,CACJ,CACqC,EAAU,OAAM,EACrD,EAAc,GACV,GACA,EAAQ,MAAQ,EAAK,KACrB,EAAQ,OAAS,EAAK,MACtB,EAAQ,OAAS,EAAK,MACtB,EAAQ,QAAU,EAAK,MACjB,EACA,CACV,CACJ,EACA,EAAO,EACP,IAAI,EAAQ,EACN,MAAuB,CACrB,IAAU,IACd,EAAQ,0BAA4B,CAChC,EAAQ,EACR,EAAO,CACX,CAAC,EACL,EACA,OAAO,iBAAiB,SAAU,EAAU,CAAE,QAAS,GAAM,QAAS,EAAK,CAAC,EAC5E,OAAO,iBAAiB,SAAU,CAAQ,EAC1C,IAAM,EACF,OAAO,eAAmB,IAAc,KAAO,IAAI,eAAe,CAAQ,EAG9E,OAFA,GAAU,QAAQ,CAAQ,EAC1B,GAAU,QAAQ,CAAM,MACX,CACT,GAAU,WAAW,EACjB,IAAU,GAAG,qBAAqB,CAAK,EAC3C,OAAO,oBAAoB,SAAU,EAAU,CAAE,QAAS,EAAK,CAAC,EAChE,OAAO,oBAAoB,SAAU,CAAQ,CACjD,CACJ,EAAG,CAAC,EAAS,EAAQ,EAAU,EAAM,EAAO,EAAQ,CAAU,CAAC,EAE1D,EACL,MAAO,CACH,SAAU,QACV,IAAK,GAAW,KAAO,EACvB,KAAM,GAAW,MAAQ,EACzB,MAAO,GAAW,KACtB,CACJ"}

package/dist/components/Portal/anchor-position.js

@@ -0,0 +1,99 @@
+import { useLayoutEffect as e, useState as t } from "react";
+//#region src/components/Portal/anchor-position.ts
+var n = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+function r(e, t, n) {
+	return Math.max(t, Math.min(e, Math.max(t, n)));
+}
+function i(e, t) {
+	let { anchor: n, width: r, height: i, offset: a } = e;
+	switch (t) {
+		case "top": return n.top - a - i;
+		case "bottom": return n.top + n.height + a;
+		case "left": return n.left - a - r;
+		default: return n.left + n.width + a;
+	}
+}
+function a(e, t) {
+	let { width: n, height: r, viewportWidth: a, viewportHeight: o, margin: s } = e, c = i(e, t), l = t === "top" || t === "bottom" ? r : n, u = t === "top" || t === "bottom" ? o : a;
+	return c >= s && c + l <= u - s;
+}
+function o(e, t, n, r) {
+	return r === "start" ? e : r === "end" ? e + t - n : e + (t - n) / 2;
+}
+function s(e) {
+	let { anchor: t, width: s, height: c, viewportWidth: l, viewportHeight: u, align: d, margin: f } = e, p = e.side, m = n[p], h = !a(e, p) && a(e, m) ? m : p, g = h === "top" || h === "bottom", _ = i(e, h), v = g ? _ : o(t.top, t.height, c, d), y = g ? o(t.left, t.width, s, d) : _;
+	return {
+		top: r(v, f, u - c - f),
+		left: r(y, f, l - s - f),
+		side: h
+	};
+}
+function c({ anchor: n, floating: r, side: i, align: a, offset: o, enabled: c, matchWidth: l = !1 }) {
+	let [u, d] = t(null);
+	if (e(() => {
+		if (!c || !n || !r) {
+			d(null);
+			return;
+		}
+		let e = () => {
+			let e = n.getBoundingClientRect(), t = l ? e.width : void 0;
+			t !== void 0 && r.style.setProperty("width", `${t}px`);
+			let c = {
+				...s({
+					anchor: {
+						top: e.top,
+						left: e.left,
+						width: e.width,
+						height: e.height
+					},
+					width: r.offsetWidth,
+					height: r.offsetHeight,
+					viewportWidth: window.innerWidth,
+					viewportHeight: window.innerHeight,
+					side: i,
+					align: a,
+					offset: o,
+					margin: 8
+				}),
+				width: t
+			};
+			d((e) => e && e.top === c.top && e.left === c.left && e.side === c.side && e.width === c.width ? e : c);
+		};
+		e();
+		let t = 0, u = () => {
+			t === 0 && (t = requestAnimationFrame(() => {
+				t = 0, e();
+			}));
+		};
+		window.addEventListener("scroll", u, {
+			capture: !0,
+			passive: !0
+		}), window.addEventListener("resize", u);
+		let f = typeof ResizeObserver > "u" ? null : new ResizeObserver(u);
+		return f?.observe(r), f?.observe(n), () => {
+			f?.disconnect(), t !== 0 && cancelAnimationFrame(t), window.removeEventListener("scroll", u, { capture: !0 }), window.removeEventListener("resize", u);
+		};
+	}, [
+		c,
+		n,
+		r,
+		i,
+		a,
+		o,
+		l
+	]), c) return {
+		position: "fixed",
+		top: u?.top ?? 0,
+		left: u?.left ?? 0,
+		width: u?.width
+	};
+}
+//#endregion
+export { s as computeAnchorPosition, c as useAnchorPosition };
+
+//# sourceMappingURL=anchor-position.js.map

package/dist/components/Portal/anchor-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-position.js","names":[],"sources":["../../../src/components/Portal/anchor-position.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { CSSProperties } from \"react\";\n\n/** Side of the anchor a floating layer is placed on. */\nexport type AnchorSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\n/** Alignment of the floating layer along the anchor's edge. */\nexport type AnchorAlign = \"start\" | \"center\" | \"end\";\n\n/** The viewport-relative box a placement is computed from. */\nexport interface AnchorRect {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n}\n\n/** Everything {@link computeAnchorPosition} needs, all in CSS pixels. */\nexport interface AnchorGeometry {\n    anchor: AnchorRect;\n    width: number;\n    height: number;\n    viewportWidth: number;\n    viewportHeight: number;\n    side: AnchorSide;\n    align: AnchorAlign;\n    offset: number;\n    margin: number;\n}\n\n/** A resolved placement: viewport coordinates plus the side actually used. */\nexport interface AnchorPlacement {\n    top: number;\n    left: number;\n    side: AnchorSide;\n}\n\n/** What {@link useAnchorPosition} keeps between measurements. */\ninterface MeasuredPlacement extends AnchorPlacement {\n    /** The anchor's width, when the layer matches it. */\n    width: number | undefined;\n}\n\nconst OPPOSITE: Record<AnchorSide, AnchorSide> = {\n    top: \"bottom\",\n    bottom: \"top\",\n    left: \"right\",\n    right: \"left\",\n};\n\n/** Distance kept between a floating layer and the viewport edge, in px. */\nexport const ANCHOR_VIEWPORT_MARGIN = 8;\n\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, Math.max(min, max)));\n}\n\nfunction mainAxis(geometry: AnchorGeometry, side: AnchorSide): number {\n    const { anchor, width, height, offset } = geometry;\n    switch (side) {\n        case \"top\":\n            return anchor.top - offset - height;\n        case \"bottom\":\n            return anchor.top + anchor.height + offset;\n        case \"left\":\n            return anchor.left - offset - width;\n        case \"right\":\n        default:\n            return anchor.left + anchor.width + offset;\n    }\n}\n\nfunction fits(geometry: AnchorGeometry, side: AnchorSide): boolean {\n    const { width, height, viewportWidth, viewportHeight, margin } = geometry;\n    const start = mainAxis(geometry, side);\n    const size = side === \"top\" || side === \"bottom\" ? height : width;\n    const limit = side === \"top\" || side === \"bottom\" ? viewportHeight : viewportWidth;\n    return start >= margin && start + size <= limit - margin;\n}\n\nfunction crossAxis(start: number, length: number, size: number, align: AnchorAlign): number {\n    if (align === \"start\") return start;\n    if (align === \"end\") return start + length - size;\n    return start + (length - size) / 2;\n}\n\n/**\n * Place a floating layer next to its anchor, inside the viewport.\n *\n * The requested side wins when the layer fits there. When it does not and the\n * opposite side does, the layer flips — the case that matters is the action menu\n * of the last row of a table near the bottom of the screen, which would otherwise\n * open below the fold. When neither side fits, the requested one is kept and the\n * layer is clamped, because a partially visible menu the user can scroll to beats\n * one that jumps sides depending on a pixel.\n *\n * Both axes are then clamped to the viewport minus `margin`.\n *\n * @param geometry - The anchor box, the floating layer's size, the viewport, and\n * the requested placement.\n * @returns The viewport coordinates for a `position: fixed` layer, and the side\n * that was used after flipping.\n */\nexport function computeAnchorPosition(geometry: AnchorGeometry): AnchorPlacement {\n    const { anchor, width, height, viewportWidth, viewportHeight, align, margin } = geometry;\n    const requested = geometry.side;\n    const flipped = OPPOSITE[requested];\n    const side = !fits(geometry, requested) && fits(geometry, flipped) ? flipped : requested;\n    const vertical = side === \"top\" || side === \"bottom\";\n    const main = mainAxis(geometry, side);\n    const top = vertical ? main : crossAxis(anchor.top, anchor.height, height, align);\n    const left = vertical ? crossAxis(anchor.left, anchor.width, width, align) : main;\n    return {\n        top: clamp(top, margin, viewportHeight - height - margin),\n        left: clamp(left, margin, viewportWidth - width - margin),\n        side,\n    };\n}\n\n/** Options of {@link useAnchorPosition}. */\nexport interface AnchorPositionOptions {\n    /** Element the layer is anchored to. */\n    anchor: HTMLElement | null;\n    /** The floating layer itself, once mounted. */\n    floating: HTMLElement | null;\n    side: AnchorSide;\n    align: AnchorAlign;\n    /** Gap between anchor and layer, in px. */\n    offset: number;\n    /** When false the hook does nothing and returns `undefined`. */\n    enabled: boolean;\n    /**\n     * Give the layer the anchor's width — a listbox under its input. Default\n     * `false`.\n     */\n    matchWidth?: boolean;\n}\n\n/**\n * Keep a portalled layer glued to its anchor.\n *\n * Takes the floating element as a value rather than a ref, because `Portal`\n * renders `null` on its first pass and mounts in an effect: a layout effect keyed\n * off `open` would run while the layer does not exist and measure nothing. With\n * the node held in state (a callback ref), the effect runs on the render that has\n * it, and `useLayoutEffect` settles the position before the first paint.\n *\n * The size comes from `offsetWidth`/`offsetHeight`, not from\n * `getBoundingClientRect`, which reports the transformed box — the layers enter\n * with a `translate`/`scale` animation, and the transformed rect would place them\n * a few pixels off. The anchor's rect is the right one to read: it is where the\n * trigger is painted.\n *\n * Scroll (captured, so a scrolling table wrapper counts) and resize reposition the\n * layer on the next animation frame, so a menu open inside a table that scrolls\n * follows its row instead of floating where the row used to be. So does a change\n * in the size of either box, through a `ResizeObserver`: a combobox list flipped\n * above its input shrinks as the user types, and a multi-select field grows a\n * line as chips are added — without the observer the list would keep its old\n * top and float away from the field, or cover it.\n *\n * With `matchWidth` the anchor's width is written to the layer **before** its\n * height is read, so the height is measured at the width it will be painted at —\n * a list whose options wrap at the narrower width is taller.\n *\n * The unmeasured first pass is **not** hidden with `visibility: hidden`: an\n * element under it cannot take focus, and the menu's focus effect runs before\n * the measured re-render, so the first entry silently kept no focus (measured in\n * Chrome; jsdom does not enforce it). Nothing is painted at the unmeasured\n * position anyway — the layout effect re-renders before the browser paints.\n *\n * @param options - Anchor, floating node, placement, and whether it is active.\n * @returns A `position: fixed` style for the layer, or `undefined` when disabled.\n */\nexport function useAnchorPosition({\n    anchor,\n    floating,\n    side,\n    align,\n    offset,\n    enabled,\n    matchWidth = false,\n}: AnchorPositionOptions): CSSProperties | undefined {\n    const [placement, setPlacement] = useState<MeasuredPlacement | null>(null);\n\n    useLayoutEffect(() => {\n        if (!enabled || !anchor || !floating) {\n            setPlacement(null);\n            return;\n        }\n        const update = (): void => {\n            const rect = anchor.getBoundingClientRect();\n            const width = matchWidth ? rect.width : undefined;\n            if (width !== undefined) floating.style.setProperty(\"width\", `${width}px`);\n            const position = computeAnchorPosition({\n                anchor: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },\n                width: floating.offsetWidth,\n                height: floating.offsetHeight,\n                viewportWidth: window.innerWidth,\n                viewportHeight: window.innerHeight,\n                side,\n                align,\n                offset,\n                margin: ANCHOR_VIEWPORT_MARGIN,\n            });\n            const next: MeasuredPlacement = { ...position, width };\n            setPlacement((current) =>\n                current &&\n                current.top === next.top &&\n                current.left === next.left &&\n                current.side === next.side &&\n                current.width === next.width\n                    ? current\n                    : next,\n            );\n        };\n        update();\n        let frame = 0;\n        const schedule = (): void => {\n            if (frame !== 0) return;\n            frame = requestAnimationFrame(() => {\n                frame = 0;\n                update();\n            });\n        };\n        window.addEventListener(\"scroll\", schedule, { capture: true, passive: true });\n        window.addEventListener(\"resize\", schedule);\n        const observer =\n            typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(schedule);\n        observer?.observe(floating);\n        observer?.observe(anchor);\n        return () => {\n            observer?.disconnect();\n            if (frame !== 0) cancelAnimationFrame(frame);\n            window.removeEventListener(\"scroll\", schedule, { capture: true });\n            window.removeEventListener(\"resize\", schedule);\n        };\n    }, [enabled, anchor, floating, side, align, offset, matchWidth]);\n\n    if (!enabled) return undefined;\n    return {\n        position: \"fixed\",\n        top: placement?.top ?? 0,\n        left: placement?.left ?? 0,\n        width: placement?.width,\n    };\n}\n"],"mappings":"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"}

package/dist/components/Portal/escape-layer.cjs

@@ -0,0 +1,2 @@
+let e=require("react");var t=[],n=0;function r(e){if(e.key!==`Escape`||e.defaultPrevented||e.isComposing)return;let n=t.at(-1);n&&(e.preventDefault(),n.current?.())}function i(i,a){let o=(0,e.useMemo)(()=>i?++n:0,[i]),s=(0,e.useRef)({current:a,order:o});(0,e.useEffect)(()=>{s.current.current=a},[a]),(0,e.useEffect)(()=>{if(!i)return;let e=s.current;e.order=o,t.length===0&&window.addEventListener(`keydown`,r);let n=t.findIndex(e=>e.order>o);return t.splice(n===-1?t.length:n,0,e),()=>{let n=t.lastIndexOf(e);n!==-1&&t.splice(n,1),t.length===0&&window.removeEventListener(`keydown`,r)}},[i,o])}exports.useEscapeLayer=i;
+//# sourceMappingURL=escape-layer.cjs.map

package/dist/components/Portal/escape-layer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"escape-layer.cjs","names":[],"sources":["../../../src/components/Portal/escape-layer.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\n\n/** One open layer that `Escape` can dismiss. */\ninterface EscapeLayer {\n    /** Latest dismiss callback; `null` makes the layer swallow the key without closing. */\n    current: (() => void) | null;\n    /** Position in the stack: higher is more recently opened, or deeper in the tree. */\n    order: number;\n}\n\nconst stack: EscapeLayer[] = [];\n\nlet sequence = 0;\n\n/**\n * The single `keydown` listener behind every layer.\n *\n * Dismisses only the top of the stack. Every overlay used to listen on `window`\n * and close on any `Escape`, so one key press closed everything open at once —\n * measured in Chrome, a `Modal` holding a `DropdownMenu`, `Combobox`,\n * `MultiSelect`, `Popover`, `ContextMenu`, editable `DataTable` cell or a second\n * `Modal` closed together with the inner layer in all seven cases, and a\n * `Drawer` closed with the `Popover` inside it.\n *\n * Two kinds of inner layer exist, and this covers both:\n *\n * - Layers that listen on `window` themselves can never see each other's\n *   events, so they register here and only the most recently opened one reacts.\n * - Layers that handle the key on their own element (a menu, a combobox input,\n *   an inline cell editor) run first — React's delegated listener sits below\n *   `window` — and call `preventDefault()`. A consumed key is left alone.\n *\n * A key pressed while an IME is composing belongs to the composition (it cancels\n * the candidate), so it is ignored too.\n *\n * @param event - The native keyboard event.\n * @returns Nothing.\n */\nfunction handleKeyDown(event: KeyboardEvent): void {\n    if (event.key !== \"Escape\" || event.defaultPrevented || event.isComposing) return;\n    const top = stack.at(-1);\n    if (!top) return;\n    event.preventDefault();\n    top.current?.();\n}\n\n/**\n * Register an overlay as an `Escape`-dismissable layer while it is open.\n *\n * Layers stack in the order they open, so the one opened last is dismissed\n * first, and a second `Escape` reaches the next one down. The callback is read\n * through a ref, so a new closure on every render does not move the layer in\n * the stack.\n *\n * Pass `null` as `onEscape` for a modal layer whose dismissal is turned off\n * (`closeOnEsc={false}`): it stays on the stack and swallows the key, instead of\n * letting it fall through and close the modal underneath.\n *\n * The position is taken when the layer **renders** open, not when its effect\n * runs. Effects run child-first, so a `Modal` that mounts already holding an open\n * inner `Modal` would register the inner one first and put the outer one on top —\n * `Escape` would close the wrong layer, or a locked inner modal would let the key\n * through to the outer one. Parents render before their children, so render\n * order is tree order within a commit and opening order across commits. A\n * discarded or doubled render (Strict Mode, concurrent rendering) only skips\n * numbers; the relative order stays.\n *\n * @param active - Whether the layer is currently open.\n * @param onEscape - What `Escape` does to this layer, or `null` to block only.\n * @returns Nothing.\n */\nexport function useEscapeLayer(active: boolean, onEscape: (() => void) | null): void {\n    const order = useMemo(() => (active ? ++sequence : 0), [active]);\n    const layer = useRef<EscapeLayer>({ current: onEscape, order });\n\n    useEffect(() => {\n        layer.current.current = onEscape;\n    }, [onEscape]);\n\n    useEffect(() => {\n        if (!active) return;\n        const entry = layer.current;\n        entry.order = order;\n        if (stack.length === 0) window.addEventListener(\"keydown\", handleKeyDown);\n        const index = stack.findIndex((other) => other.order > order);\n        stack.splice(index === -1 ? stack.length : index, 0, entry);\n        return () => {\n            const index = stack.lastIndexOf(entry);\n            if (index !== -1) stack.splice(index, 1);\n            if (stack.length === 0) window.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, [active, order]);\n}\n"],"mappings":"uBAUA,IAAM,EAAuB,CAAC,EAE1B,EAAW,EA0Bf,SAAS,EAAc,EAA4B,CAC/C,GAAI,EAAM,MAAQ,UAAY,EAAM,kBAAoB,EAAM,YAAa,OAC3E,IAAM,EAAM,EAAM,GAAG,EAAE,EAClB,IACL,EAAM,eAAe,EACrB,EAAI,UAAU,EAClB,CA2BA,SAAgB,EAAe,EAAiB,EAAqC,CACjF,IAAM,GAAA,EAAQ,EAAA,QAAA,KAAe,EAAS,EAAE,EAAW,EAAI,CAAC,CAAM,CAAC,EACzD,GAAA,EAAQ,EAAA,OAAA,CAAoB,CAAE,QAAS,EAAU,OAAM,CAAC,GAE9D,EAAA,EAAA,UAAA,KAAgB,CACZ,EAAM,QAAQ,QAAU,CAC5B,EAAG,CAAC,CAAQ,CAAC,GAEb,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAQ,OACb,IAAM,EAAQ,EAAM,QACpB,EAAM,MAAQ,EACV,EAAM,SAAW,GAAG,OAAO,iBAAiB,UAAW,CAAa,EACxE,IAAM,EAAQ,EAAM,UAAW,GAAU,EAAM,MAAQ,CAAK,EAE5D,OADA,EAAM,OAAO,IAAU,GAAK,EAAM,OAAS,EAAO,EAAG,CAAK,MAC7C,CACT,IAAM,EAAQ,EAAM,YAAY,CAAK,EACjC,IAAU,IAAI,EAAM,OAAO,EAAO,CAAC,EACnC,EAAM,SAAW,GAAG,OAAO,oBAAoB,UAAW,CAAa,CAC/E,CACJ,EAAG,CAAC,EAAQ,CAAK,CAAC,CACtB"}

package/dist/components/Portal/escape-layer.js

@@ -0,0 +1,30 @@
+import { useEffect as e, useMemo as t, useRef as n } from "react";
+//#region src/components/Portal/escape-layer.ts
+var r = [], i = 0;
+function a(e) {
+	if (e.key !== "Escape" || e.defaultPrevented || e.isComposing) return;
+	let t = r.at(-1);
+	t && (e.preventDefault(), t.current?.());
+}
+function o(o, s) {
+	let c = t(() => o ? ++i : 0, [o]), l = n({
+		current: s,
+		order: c
+	});
+	e(() => {
+		l.current.current = s;
+	}, [s]), e(() => {
+		if (!o) return;
+		let e = l.current;
+		e.order = c, r.length === 0 && window.addEventListener("keydown", a);
+		let t = r.findIndex((e) => e.order > c);
+		return r.splice(t === -1 ? r.length : t, 0, e), () => {
+			let t = r.lastIndexOf(e);
+			t !== -1 && r.splice(t, 1), r.length === 0 && window.removeEventListener("keydown", a);
+		};
+	}, [o, c]);
+}
+//#endregion
+export { o as useEscapeLayer };
+
+//# sourceMappingURL=escape-layer.js.map

package/dist/components/Portal/escape-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"escape-layer.js","names":[],"sources":["../../../src/components/Portal/escape-layer.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\n\n/** One open layer that `Escape` can dismiss. */\ninterface EscapeLayer {\n    /** Latest dismiss callback; `null` makes the layer swallow the key without closing. */\n    current: (() => void) | null;\n    /** Position in the stack: higher is more recently opened, or deeper in the tree. */\n    order: number;\n}\n\nconst stack: EscapeLayer[] = [];\n\nlet sequence = 0;\n\n/**\n * The single `keydown` listener behind every layer.\n *\n * Dismisses only the top of the stack. Every overlay used to listen on `window`\n * and close on any `Escape`, so one key press closed everything open at once —\n * measured in Chrome, a `Modal` holding a `DropdownMenu`, `Combobox`,\n * `MultiSelect`, `Popover`, `ContextMenu`, editable `DataTable` cell or a second\n * `Modal` closed together with the inner layer in all seven cases, and a\n * `Drawer` closed with the `Popover` inside it.\n *\n * Two kinds of inner layer exist, and this covers both:\n *\n * - Layers that listen on `window` themselves can never see each other's\n *   events, so they register here and only the most recently opened one reacts.\n * - Layers that handle the key on their own element (a menu, a combobox input,\n *   an inline cell editor) run first — React's delegated listener sits below\n *   `window` — and call `preventDefault()`. A consumed key is left alone.\n *\n * A key pressed while an IME is composing belongs to the composition (it cancels\n * the candidate), so it is ignored too.\n *\n * @param event - The native keyboard event.\n * @returns Nothing.\n */\nfunction handleKeyDown(event: KeyboardEvent): void {\n    if (event.key !== \"Escape\" || event.defaultPrevented || event.isComposing) return;\n    const top = stack.at(-1);\n    if (!top) return;\n    event.preventDefault();\n    top.current?.();\n}\n\n/**\n * Register an overlay as an `Escape`-dismissable layer while it is open.\n *\n * Layers stack in the order they open, so the one opened last is dismissed\n * first, and a second `Escape` reaches the next one down. The callback is read\n * through a ref, so a new closure on every render does not move the layer in\n * the stack.\n *\n * Pass `null` as `onEscape` for a modal layer whose dismissal is turned off\n * (`closeOnEsc={false}`): it stays on the stack and swallows the key, instead of\n * letting it fall through and close the modal underneath.\n *\n * The position is taken when the layer **renders** open, not when its effect\n * runs. Effects run child-first, so a `Modal` that mounts already holding an open\n * inner `Modal` would register the inner one first and put the outer one on top —\n * `Escape` would close the wrong layer, or a locked inner modal would let the key\n * through to the outer one. Parents render before their children, so render\n * order is tree order within a commit and opening order across commits. A\n * discarded or doubled render (Strict Mode, concurrent rendering) only skips\n * numbers; the relative order stays.\n *\n * @param active - Whether the layer is currently open.\n * @param onEscape - What `Escape` does to this layer, or `null` to block only.\n * @returns Nothing.\n */\nexport function useEscapeLayer(active: boolean, onEscape: (() => void) | null): void {\n    const order = useMemo(() => (active ? ++sequence : 0), [active]);\n    const layer = useRef<EscapeLayer>({ current: onEscape, order });\n\n    useEffect(() => {\n        layer.current.current = onEscape;\n    }, [onEscape]);\n\n    useEffect(() => {\n        if (!active) return;\n        const entry = layer.current;\n        entry.order = order;\n        if (stack.length === 0) window.addEventListener(\"keydown\", handleKeyDown);\n        const index = stack.findIndex((other) => other.order > order);\n        stack.splice(index === -1 ? stack.length : index, 0, entry);\n        return () => {\n            const index = stack.lastIndexOf(entry);\n            if (index !== -1) stack.splice(index, 1);\n            if (stack.length === 0) window.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, [active, order]);\n}\n"],"mappings":";;AAUA,IAAM,IAAuB,CAAC,GAE1B,IAAW;AA0Bf,SAAS,EAAc,GAA4B;CAC/C,IAAI,EAAM,QAAQ,YAAY,EAAM,oBAAoB,EAAM,aAAa;CAC3E,IAAM,IAAM,EAAM,GAAG,EAAE;CAClB,MACL,EAAM,eAAe,GACrB,EAAI,UAAU;AAClB;AA2BA,SAAgB,EAAe,GAAiB,GAAqC;CACjF,IAAM,IAAQ,QAAe,IAAS,EAAE,IAAW,GAAI,CAAC,CAAM,CAAC,GACzD,IAAQ,EAAoB;EAAE,SAAS;EAAU;CAAM,CAAC;CAM9D,AAJA,QAAgB;EACZ,EAAM,QAAQ,UAAU;CAC5B,GAAG,CAAC,CAAQ,CAAC,GAEb,QAAgB;EACZ,IAAI,CAAC,GAAQ;EACb,IAAM,IAAQ,EAAM;EAEpB,AADA,EAAM,QAAQ,GACV,EAAM,WAAW,KAAG,OAAO,iBAAiB,WAAW,CAAa;EACxE,IAAM,IAAQ,EAAM,WAAW,MAAU,EAAM,QAAQ,CAAK;EAE5D,OADA,EAAM,OAAO,MAAU,KAAK,EAAM,SAAS,GAAO,GAAG,CAAK,SAC7C;GACT,IAAM,IAAQ,EAAM,YAAY,CAAK;GAErC,AADI,MAAU,MAAI,EAAM,OAAO,GAAO,CAAC,GACnC,EAAM,WAAW,KAAG,OAAO,oBAAoB,WAAW,CAAa;EAC/E;CACJ,GAAG,CAAC,GAAQ,CAAK,CAAC;AACtB"}

package/dist/components/Portal/tab-bridge.cjs

@@ -0,0 +1,2 @@
+const e=require("../../hooks/tab-sequence.cjs");let t=require("react");function n({enabled:n,anchor:r,panel:i}){(0,t.useEffect)(()=>{if(!n||!r||!i)return;let t=(e,t)=>{t&&(e.preventDefault(),t.focus())},a=n=>{if(n.key!==`Tab`||n.defaultPrevented)return;let a=e.tabbables(i);if(a.length===0)return;let o=document.activeElement;if(!o)return;let s=e.tabbables(document).filter(e=>!i.contains(e)),c=s.filter(e=>r.contains(e)).at(-1),l=c?s[s.indexOf(c)+1]:void 0;if(i.contains(o)){!n.shiftKey&&o===a.at(-1)&&t(n,l),n.shiftKey&&o===a[0]&&t(n,c);return}!n.shiftKey&&o===c&&t(n,a[0]),n.shiftKey&&l&&o===l&&t(n,a.at(-1))},o=e.registerPortalLayer({anchor:r,panel:i});return document.addEventListener(`keydown`,a,!0),()=>{o(),document.removeEventListener(`keydown`,a,!0)}},[n,r,i])}exports.usePortalTabOrder=n;
+//# sourceMappingURL=tab-bridge.cjs.map

package/dist/components/Portal/tab-bridge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bridge.cjs","names":[],"sources":["../../../src/components/Portal/tab-bridge.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { registerPortalLayer, tabbables } from \"@/hooks/tab-sequence\";\n\n/** Options of {@link usePortalTabOrder}. */\nexport interface PortalTabOrderOptions {\n    /** Whether the panel is open and portalled. */\n    enabled: boolean;\n    /** Wrapper of the trigger — the spot in the page the panel belongs to. */\n    anchor: HTMLElement | null;\n    /** The portalled panel. */\n    panel: HTMLElement | null;\n}\n\n/**\n * Put a portalled panel back in the tab order, right after its trigger.\n *\n * A portal moves the panel to the end of `body`, so the browser's own order goes\n * from the trigger straight to whatever follows it in the page and reaches the\n * panel last, if ever. Measured in Chrome on a `Popover` holding two inputs:\n * in flow, `Tab` from the open trigger landed on the first input; in a portal it\n * skipped the panel and went to the next button of the page.\n *\n * While the panel is open, this restores the in-flow order:\n *\n * - `Tab` on the last stop of the anchor enters the panel's first stop.\n * - `Tab` on the panel's last stop leaves to the first stop after the anchor.\n * - `Shift+Tab` on the panel's first stop returns to the anchor.\n * - `Shift+Tab` on the first stop after the anchor enters the panel's last stop.\n *\n * Listened on `document` in the capture phase and marked consumed, so it runs\n * before an enclosing `Modal`'s focus trap, which skips a consumed `Tab`. The\n * panel is also registered as a layer of its anchor, which is how that trap\n * knows the panel belongs inside it although the portal put it outside.\n *\n * @param options - Whether it is active, the anchor and the panel.\n * @returns Nothing.\n */\nexport function usePortalTabOrder({ enabled, anchor, panel }: PortalTabOrderOptions): void {\n    useEffect(() => {\n        if (!enabled || !anchor || !panel) return;\n\n        const move = (event: KeyboardEvent, target: HTMLElement | undefined): void => {\n            if (!target) return;\n            event.preventDefault();\n            target.focus();\n        };\n\n        const onKeyDown = (event: KeyboardEvent): void => {\n            if (event.key !== \"Tab\" || event.defaultPrevented) return;\n            const inPanel = tabbables(panel);\n            if (inPanel.length === 0) return;\n            const active = document.activeElement as HTMLElement | null;\n            if (!active) return;\n            const page = tabbables(document).filter((el) => !panel.contains(el));\n            const inAnchor = page.filter((el) => anchor.contains(el));\n            const lastOfAnchor = inAnchor.at(-1);\n            const afterAnchor = lastOfAnchor ? page[page.indexOf(lastOfAnchor) + 1] : undefined;\n\n            if (panel.contains(active)) {\n                if (!event.shiftKey && active === inPanel.at(-1)) move(event, afterAnchor);\n                if (event.shiftKey && active === inPanel[0]) move(event, lastOfAnchor);\n                return;\n            }\n            if (!event.shiftKey && active === lastOfAnchor) move(event, inPanel[0]);\n            if (event.shiftKey && afterAnchor && active === afterAnchor) {\n                move(event, inPanel.at(-1));\n            }\n        };\n\n        const unregister = registerPortalLayer({ anchor, panel });\n        document.addEventListener(\"keydown\", onKeyDown, true);\n        return () => {\n            unregister();\n            document.removeEventListener(\"keydown\", onKeyDown, true);\n        };\n    }, [enabled, anchor, panel]);\n}\n"],"mappings":"uEAqCA,SAAgB,EAAkB,CAAE,UAAS,SAAQ,SAAsC,EACvF,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,GAAW,CAAC,GAAU,CAAC,EAAO,OAEnC,IAAM,GAAQ,EAAsB,IAA0C,CACrE,IACL,EAAM,eAAe,EACrB,EAAO,MAAM,EACjB,EAEM,EAAa,GAA+B,CAC9C,GAAI,EAAM,MAAQ,OAAS,EAAM,iBAAkB,OACnD,IAAM,EAAU,EAAA,UAAU,CAAK,EAC/B,GAAI,EAAQ,SAAW,EAAG,OAC1B,IAAM,EAAS,SAAS,cACxB,GAAI,CAAC,EAAQ,OACb,IAAM,EAAO,EAAA,UAAU,QAAQ,CAAC,CAAC,OAAQ,GAAO,CAAC,EAAM,SAAS,CAAE,CAAC,EAE7D,EADW,EAAK,OAAQ,GAAO,EAAO,SAAS,CAAE,CAClC,CAAA,CAAS,GAAG,EAAE,EAC7B,EAAc,EAAe,EAAK,EAAK,QAAQ,CAAY,EAAI,GAAK,IAAA,GAE1E,GAAI,EAAM,SAAS,CAAM,EAAG,CACpB,CAAC,EAAM,UAAY,IAAW,EAAQ,GAAG,EAAE,GAAG,EAAK,EAAO,CAAW,EACrE,EAAM,UAAY,IAAW,EAAQ,IAAI,EAAK,EAAO,CAAY,EACrE,MACJ,CACI,CAAC,EAAM,UAAY,IAAW,GAAc,EAAK,EAAO,EAAQ,EAAE,EAClE,EAAM,UAAY,GAAe,IAAW,GAC5C,EAAK,EAAO,EAAQ,GAAG,EAAE,CAAC,CAElC,EAEM,EAAa,EAAA,oBAAoB,CAAE,SAAQ,OAAM,CAAC,EAExD,OADA,SAAS,iBAAiB,UAAW,EAAW,EAAI,MACvC,CACT,EAAW,EACX,SAAS,oBAAoB,UAAW,EAAW,EAAI,CAC3D,CACJ,EAAG,CAAC,EAAS,EAAQ,CAAK,CAAC,CAC/B"}

package/dist/components/Portal/tab-bridge.js

@@ -0,0 +1,37 @@
+import { registerPortalLayer as e, tabbables as t } from "../../hooks/tab-sequence.js";
+import { useEffect as n } from "react";
+//#region src/components/Portal/tab-bridge.ts
+function r({ enabled: r, anchor: i, panel: a }) {
+	n(() => {
+		if (!r || !i || !a) return;
+		let n = (e, t) => {
+			t && (e.preventDefault(), t.focus());
+		}, o = (e) => {
+			if (e.key !== "Tab" || e.defaultPrevented) return;
+			let r = t(a);
+			if (r.length === 0) return;
+			let o = document.activeElement;
+			if (!o) return;
+			let s = t(document).filter((e) => !a.contains(e)), c = s.filter((e) => i.contains(e)).at(-1), l = c ? s[s.indexOf(c) + 1] : void 0;
+			if (a.contains(o)) {
+				!e.shiftKey && o === r.at(-1) && n(e, l), e.shiftKey && o === r[0] && n(e, c);
+				return;
+			}
+			!e.shiftKey && o === c && n(e, r[0]), e.shiftKey && l && o === l && n(e, r.at(-1));
+		}, s = e({
+			anchor: i,
+			panel: a
+		});
+		return document.addEventListener("keydown", o, !0), () => {
+			s(), document.removeEventListener("keydown", o, !0);
+		};
+	}, [
+		r,
+		i,
+		a
+	]);
+}
+//#endregion
+export { r as usePortalTabOrder };
+
+//# sourceMappingURL=tab-bridge.js.map

package/dist/components/Portal/tab-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bridge.js","names":[],"sources":["../../../src/components/Portal/tab-bridge.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { registerPortalLayer, tabbables } from \"@/hooks/tab-sequence\";\n\n/** Options of {@link usePortalTabOrder}. */\nexport interface PortalTabOrderOptions {\n    /** Whether the panel is open and portalled. */\n    enabled: boolean;\n    /** Wrapper of the trigger — the spot in the page the panel belongs to. */\n    anchor: HTMLElement | null;\n    /** The portalled panel. */\n    panel: HTMLElement | null;\n}\n\n/**\n * Put a portalled panel back in the tab order, right after its trigger.\n *\n * A portal moves the panel to the end of `body`, so the browser's own order goes\n * from the trigger straight to whatever follows it in the page and reaches the\n * panel last, if ever. Measured in Chrome on a `Popover` holding two inputs:\n * in flow, `Tab` from the open trigger landed on the first input; in a portal it\n * skipped the panel and went to the next button of the page.\n *\n * While the panel is open, this restores the in-flow order:\n *\n * - `Tab` on the last stop of the anchor enters the panel's first stop.\n * - `Tab` on the panel's last stop leaves to the first stop after the anchor.\n * - `Shift+Tab` on the panel's first stop returns to the anchor.\n * - `Shift+Tab` on the first stop after the anchor enters the panel's last stop.\n *\n * Listened on `document` in the capture phase and marked consumed, so it runs\n * before an enclosing `Modal`'s focus trap, which skips a consumed `Tab`. The\n * panel is also registered as a layer of its anchor, which is how that trap\n * knows the panel belongs inside it although the portal put it outside.\n *\n * @param options - Whether it is active, the anchor and the panel.\n * @returns Nothing.\n */\nexport function usePortalTabOrder({ enabled, anchor, panel }: PortalTabOrderOptions): void {\n    useEffect(() => {\n        if (!enabled || !anchor || !panel) return;\n\n        const move = (event: KeyboardEvent, target: HTMLElement | undefined): void => {\n            if (!target) return;\n            event.preventDefault();\n            target.focus();\n        };\n\n        const onKeyDown = (event: KeyboardEvent): void => {\n            if (event.key !== \"Tab\" || event.defaultPrevented) return;\n            const inPanel = tabbables(panel);\n            if (inPanel.length === 0) return;\n            const active = document.activeElement as HTMLElement | null;\n            if (!active) return;\n            const page = tabbables(document).filter((el) => !panel.contains(el));\n            const inAnchor = page.filter((el) => anchor.contains(el));\n            const lastOfAnchor = inAnchor.at(-1);\n            const afterAnchor = lastOfAnchor ? page[page.indexOf(lastOfAnchor) + 1] : undefined;\n\n            if (panel.contains(active)) {\n                if (!event.shiftKey && active === inPanel.at(-1)) move(event, afterAnchor);\n                if (event.shiftKey && active === inPanel[0]) move(event, lastOfAnchor);\n                return;\n            }\n            if (!event.shiftKey && active === lastOfAnchor) move(event, inPanel[0]);\n            if (event.shiftKey && afterAnchor && active === afterAnchor) {\n                move(event, inPanel.at(-1));\n            }\n        };\n\n        const unregister = registerPortalLayer({ anchor, panel });\n        document.addEventListener(\"keydown\", onKeyDown, true);\n        return () => {\n            unregister();\n            document.removeEventListener(\"keydown\", onKeyDown, true);\n        };\n    }, [enabled, anchor, panel]);\n}\n"],"mappings":";;;AAqCA,SAAgB,EAAkB,EAAE,YAAS,WAAQ,YAAsC;CACvF,QAAgB;EACZ,IAAI,CAAC,KAAW,CAAC,KAAU,CAAC,GAAO;EAEnC,IAAM,KAAQ,GAAsB,MAA0C;GACrE,MACL,EAAM,eAAe,GACrB,EAAO,MAAM;EACjB,GAEM,KAAa,MAA+B;GAC9C,IAAI,EAAM,QAAQ,SAAS,EAAM,kBAAkB;GACnD,IAAM,IAAU,EAAU,CAAK;GAC/B,IAAI,EAAQ,WAAW,GAAG;GAC1B,IAAM,IAAS,SAAS;GACxB,IAAI,CAAC,GAAQ;GACb,IAAM,IAAO,EAAU,QAAQ,CAAC,CAAC,QAAQ,MAAO,CAAC,EAAM,SAAS,CAAE,CAAC,GAE7D,IADW,EAAK,QAAQ,MAAO,EAAO,SAAS,CAAE,CAClC,CAAA,CAAS,GAAG,EAAE,GAC7B,IAAc,IAAe,EAAK,EAAK,QAAQ,CAAY,IAAI,KAAK,KAAA;GAE1E,IAAI,EAAM,SAAS,CAAM,GAAG;IAExB,AADI,CAAC,EAAM,YAAY,MAAW,EAAQ,GAAG,EAAE,KAAG,EAAK,GAAO,CAAW,GACrE,EAAM,YAAY,MAAW,EAAQ,MAAI,EAAK,GAAO,CAAY;IACrE;GACJ;GAEA,AADI,CAAC,EAAM,YAAY,MAAW,KAAc,EAAK,GAAO,EAAQ,EAAE,GAClE,EAAM,YAAY,KAAe,MAAW,KAC5C,EAAK,GAAO,EAAQ,GAAG,EAAE,CAAC;EAElC,GAEM,IAAa,EAAoB;GAAE;GAAQ;EAAM,CAAC;EAExD,OADA,SAAS,iBAAiB,WAAW,GAAW,EAAI,SACvC;GAET,AADA,EAAW,GACX,SAAS,oBAAoB,WAAW,GAAW,EAAI;EAC3D;CACJ,GAAG;EAAC;EAAS;EAAQ;CAAK,CAAC;AAC/B"}

package/dist/components/Select/CaretIcon.cjs

@@ -0,0 +1,2 @@
+let e=require("react/jsx-runtime");function t(){return(0,e.jsx)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,children:(0,e.jsx)(`path`,{d:`M6 9l6 6 6-6`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})}exports.CaretIcon=t;
+//# sourceMappingURL=CaretIcon.cjs.map

package/dist/components/Select/CaretIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaretIcon.cjs","names":[],"sources":["../../../src/components/Select/CaretIcon.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\n/**\n * The chevron `Select` and `Combobox` draw on the right of the control.\n *\n * Internal to the SDK: the public way to change it is `Select`'s `caretIcon`\n * prop. Its size comes from the `--tempest-control-caret-size` token through the\n * caret slot's stylesheet, so the `width`/`height` attributes here are only the\n * fallback for a page that loaded no SDK CSS.\n *\n * @returns The chevron as an inline SVG drawn in `currentColor`.\n */\nexport function CaretIcon(): ReactElement {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"mCAYA,SAAgB,GAA0B,CACtC,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,eACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,OAClB,CAAA,CACA,CAAA,CAEb"}

package/dist/components/Select/CaretIcon.js

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/Select/CaretIcon.tsx
+function t() {
+	return /* @__PURE__ */ e("svg", {
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		children: /* @__PURE__ */ e("path", {
+			d: "M6 9l6 6 6-6",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+//#endregion
+export { t as CaretIcon };
+
+//# sourceMappingURL=CaretIcon.js.map

package/dist/components/Select/CaretIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaretIcon.js","names":[],"sources":["../../../src/components/Select/CaretIcon.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\n/**\n * The chevron `Select` and `Combobox` draw on the right of the control.\n *\n * Internal to the SDK: the public way to change it is `Select`'s `caretIcon`\n * prop. Its size comes from the `--tempest-control-caret-size` token through the\n * caret slot's stylesheet, so the `width`/`height` attributes here are only the\n * fallback for a page that loaded no SDK CSS.\n *\n * @returns The chevron as an inline SVG drawn in `currentColor`.\n */\nexport function CaretIcon(): ReactElement {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;AAYA,SAAgB,IAA0B;CACtC,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAClB,CAAA;CACA,CAAA;AAEb"}

package/dist/components/Select/Select.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./Select.module.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(function(i,o){let{options:s,placeholder:c,wrapperClassName:l,className:u,children:d,id:f,required:p,variant:m=`field`,label:h,helperText:g,error:_,...v}=i,y=m===`chip`,b=(0,n.useId)(),x=f??b,S=(0,r.jsxs)(`div`,{className:e.cn(t.default.field,y&&t.default.chip),children:[(0,r.jsxs)(`select`,{ref:o,id:x,"aria-invalid":!!_,required:p,className:e.cn(t.default.select,u),...v,children:[c&&(0,r.jsx)(`option`,{value:``,disabled:!0,hidden:!0,children:c}),s?.map(e=>(0,r.jsx)(`option`,{value:e.value,disabled:e.disabled,children:e.label},e.value)),d]}),(0,r.jsx)(`span`,{className:t.default.caret,"aria-hidden":!0,children:(0,r.jsx)(a,{})})]});return y?(0,r.jsx)(`div`,{className:e.cn(t.default.chipWrapper,l),children:S}):(0,r.jsxs)(`div`,{className:e.cn(t.default.wrapper,_&&t.default.error,l),children:[h&&(0,r.jsxs)(`label`,{htmlFor:x,className:t.default.label,children:[h,p&&(0,r.jsx)(`span`,{className:t.default.required,children:`*`})]}),S,_?(0,r.jsx)(`span`,{className:t.default.errorText,children:_}):g?(0,r.jsx)(`span`,{className:t.default.helper,children:g}):null]})});function a(){return(0,r.jsx)(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,children:(0,r.jsx)(`path`,{d:`M6 9l6 6 6-6`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})}exports.Select=i;
+const e=require("../../utils/cn.cjs"),t=require("./CaretIcon.cjs"),n=require("./Select.module.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function(a,o){let{options:s,placeholder:c,wrapperClassName:l,className:u,children:d,id:f,required:p,variant:m=`field`,label:h,helperText:g,error:_,caretIcon:v,...y}=a,b=m===`chip`,x=m===`bare`,S=(0,r.useId)(),C=f??S,w=(0,i.jsxs)(`div`,{className:e.cn(n.default.field,b&&n.default.chip,x&&n.default.bare,x&&l),children:[(0,i.jsxs)(`select`,{ref:o,id:C,"aria-invalid":!!_,required:p,className:e.cn(n.default.select,u),...y,children:[c&&(0,i.jsx)(`option`,{value:``,disabled:!0,hidden:!0,children:c}),s?.map(e=>(0,i.jsx)(`option`,{value:e.value,disabled:e.disabled,children:e.label},e.value)),d]}),(0,i.jsx)(`span`,{className:n.default.caret,"aria-hidden":!0,children:v??(0,i.jsx)(t.CaretIcon,{})})]});return x?w:b?(0,i.jsx)(`div`,{className:e.cn(n.default.chipWrapper,l),children:w}):(0,i.jsxs)(`div`,{className:e.cn(n.default.wrapper,_&&n.default.error,l),children:[h&&(0,i.jsxs)(`label`,{htmlFor:C,className:n.default.label,children:[h,p&&(0,i.jsx)(`span`,{className:n.default.required,children:`*`})]}),w,_?(0,i.jsx)(`span`,{className:n.default.errorText,children:_}):g?(0,i.jsx)(`span`,{className:n.default.helper,children:g}):null]})});exports.Select=a;
 //# sourceMappingURL=Select.cjs.map

package/dist/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { SelectHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n}\n\n/** What both variants of {@link Select} accept. */\nexport interface SelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {\n    options?: SelectOption[];\n    placeholder?: string;\n    wrapperClassName?: string;\n}\n\n/** The full form field: label, control, helper text and error slot. */\nexport interface SelectFieldProps extends SelectBaseProps {\n    variant?: \"field\";\n    label?: string;\n    helperText?: string;\n    error?: string;\n}\n\n/**\n * The bare control, sized to its content.\n *\n * `aria-label` is required rather than optional, because the variant removes the\n * only visible label the component had. A settings row names the control in the\n * row's own text, which the `<select>` has no relationship to — so without this\n * the screen reader announces a combobox with no name at all.\n */\nexport interface SelectChipProps extends SelectBaseProps {\n    variant: \"chip\";\n    \"aria-label\": string;\n}\n\nexport type SelectProps = SelectFieldProps | SelectChipProps;\n\n/**\n * Native `<select>` wrapper. Either provide `options` for a quick render, or\n * pass `<option>` children directly.\n *\n * Two variants:\n *\n * - `\"field\"` (default) — label, control, helper text and error slot, for a form.\n * - `\"chip\"` — the control alone, sized to its content, for a settings row where\n *   the icon and the label are already on the left and the control belongs on the\n *   right. Rendering the full field there stacks two labelled fields inside one\n *   list item, which is why every app ended up hand-rolling a native `<select>`\n *   with `appearance: none` — and hand-rolling it loses the focus ring, the\n *   disabled styling and the caret this component already solves.\n *\n * @example\n * <Select label=\"Estado\" options={states} placeholder=\"Selecione\" />\n *\n * @example\n * <ListTile title=\"Idioma\" trailing={<Select variant=\"chip\" aria-label=\"Idioma\" options={langs} />} />\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n    const {\n        options,\n        placeholder,\n        wrapperClassName,\n        className,\n        children,\n        id,\n        required,\n        variant = \"field\",\n        label,\n        helperText,\n        error,\n        ...rest\n    } = props as SelectBaseProps & {\n        variant?: \"field\" | \"chip\";\n        label?: string;\n        helperText?: string;\n        error?: string;\n    };\n    const isChip = variant === \"chip\";\n    const generatedId = useId();\n    const selectId = id ?? generatedId;\n\n    const control = (\n        <div className={cn(styles.field, isChip && styles.chip)}>\n            <select\n                ref={ref}\n                id={selectId}\n                aria-invalid={!!error}\n                required={required}\n                className={cn(styles.select, className)}\n                {...rest}\n            >\n                {placeholder && (\n                    <option value=\"\" disabled hidden>\n                        {placeholder}\n                    </option>\n                )}\n                {options?.map((opt) => (\n                    <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                        {opt.label}\n                    </option>\n                ))}\n                {children}\n            </select>\n            <span className={styles.caret} aria-hidden>\n                <CaretIcon />\n            </span>\n        </div>\n    );\n\n    if (isChip) {\n        return <div className={cn(styles.chipWrapper, wrapperClassName)}>{control}</div>;\n    }\n\n    return (\n        <div className={cn(styles.wrapper, error && styles.error, wrapperClassName)}>\n            {label && (\n                <label htmlFor={selectId} className={styles.label}>\n                    {label}\n                    {required && <span className={styles.required}>*</span>}\n                </label>\n            )}\n            {control}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n\nfunction CaretIcon() {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"6HA6DA,IAAa,GAAA,EAAS,EAAA,WAAA,CAA2C,SAAgB,EAAO,EAAK,CACzF,GAAM,CACF,UACA,cACA,mBACA,YACA,WACA,KACA,WACA,UAAU,QACV,QACA,aACA,QACA,GAAG,GACH,EAME,EAAS,IAAY,OACrB,GAAA,EAAc,EAAA,MAAA,CAAM,EACpB,EAAW,GAAM,EAEjB,GACF,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,GAAU,EAAA,QAAO,IAAI,EAAtD,SAAA,EACI,EAAA,EAAA,KAAA,CAAC,SAAD,CACS,MACL,GAAI,EACJ,eAAc,CAAC,CAAC,EACN,WACV,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EACtC,GAAI,EANR,SAAA,CAQK,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,MAAM,GAAG,SAAA,GAAS,OAAA,GACrB,SAAA,CACG,CAAA,EAEX,GAAS,IAAK,IACX,EAAA,EAAA,IAAA,CAAC,SAAD,CAAwB,MAAO,EAAI,MAAO,SAAU,EAAI,SACnD,SAAA,EAAI,KACD,EAFK,EAAI,KAET,CACX,EACA,CACG,CACR,CAAA,GAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAO,cAAA,GAC3B,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAY,CAAA,CACV,CAAA,CACL,IAOT,OAJI,GACO,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,YAAa,CAAgB,EAAI,SAAA,CAAa,CAAA,GAI/E,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,GAAS,EAAA,QAAO,MAAO,CAAgB,EAA1E,SAAA,CACK,IACG,EAAA,EAAA,KAAA,CAAC,QAAD,CAAO,QAAS,EAAU,UAAW,EAAA,QAAO,MAA5C,SAAA,CACK,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAU,SAAA,GAAO,CAAA,CACnD,IAEV,EACA,GACG,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,UAAY,SAAA,CAAY,CAAA,EAChD,GACA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,OAAS,SAAA,CAAiB,CAAA,EAClD,IACH,GAEb,CAAC,EAED,SAAS,GAAY,CACjB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,eACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,OAClB,CAAA,CACA,CAAA,CAEb"}
+{"version":3,"file":"Select.cjs","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ReactNode, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CaretIcon } from \"./CaretIcon\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n}\n\n/** What every variant of {@link Select} accepts. */\nexport interface SelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {\n    options?: SelectOption[];\n    placeholder?: string;\n    /**\n     * Class for the outermost element. On `\"bare\"` that element is the shell\n     * holding the `<select>` and the caret, which is where the app's own look goes.\n     */\n    wrapperClassName?: string;\n    /**\n     * Replaces the built-in chevron, following the `icon?: ReactNode` convention\n     * the rest of the SDK uses.\n     *\n     * The icon is drawn in the caret slot, which is positioned by\n     * `--tempest-control-caret-offset` and sized by `--tempest-control-caret-size`;\n     * an `<svg>` passed here is stretched to that size, so the token — not the\n     * icon's own `width`/`height` — decides how big the caret is in every density.\n     */\n    caretIcon?: ReactNode;\n}\n\n/** The full form field: label, control, helper text and error slot. */\nexport interface SelectFieldProps extends SelectBaseProps {\n    variant?: \"field\";\n    label?: string;\n    helperText?: string;\n    error?: string;\n}\n\n/**\n * The bare control, sized to its content.\n *\n * `aria-label` is required rather than optional, because the variant removes the\n * only visible label the component had. A settings row names the control in the\n * row's own text, which the `<select>` has no relationship to — so without this\n * the screen reader announces a combobox with no name at all.\n */\nexport interface SelectChipProps extends SelectBaseProps {\n    variant: \"chip\";\n    \"aria-label\": string;\n}\n\n/**\n * The mechanism without the look: `appearance: none`, the caret and the focus\n * ring, and no border, background, radius, shadow or height.\n *\n * The `<select>` inherits `background-color` and `color` from the shell (the\n * element `wrapperClassName` lands on). The background is not cosmetic: the\n * native popup paints each `<option>` from the `<select>`'s background, so a\n * transparent control would hand the menu back to the system white.\n *\n * Like `\"chip\"`, the variant has no visible label, so an accessible name is\n * required — through `aria-label` or `aria-labelledby`.\n */\nexport type SelectBareProps = SelectBaseProps & { variant: \"bare\" } & (\n        { \"aria-label\": string } | { \"aria-labelledby\": string }\n    );\n\nexport type SelectProps = SelectFieldProps | SelectChipProps | SelectBareProps;\n\n/**\n * Native `<select>` wrapper. Either provide `options` for a quick render, or\n * pass `<option>` children directly.\n *\n * Three variants:\n *\n * - `\"field\"` (default) — label, control, helper text and error slot, for a form.\n * - `\"chip\"` — the control alone, sized to its content, for a settings row where\n *   the icon and the label are already on the left and the control belongs on the\n *   right. Rendering the full field there stacks two labelled fields inside one\n *   list item, which is why every app ended up hand-rolling a native `<select>`\n *   with `appearance: none` — and hand-rolling it loses the focus ring, the\n *   disabled styling and the caret this component already solves.\n * - `\"bare\"` — the same mechanism with none of the look, for an app with its own\n *   visual identity: the shell renders `wrapper > select + caret`, and the app\n *   dresses the wrapper through `wrapperClassName`. See {@link SelectBareProps}.\n *\n * @example\n * <Select label=\"Estado\" options={states} placeholder=\"Selecione\" />\n *\n * @example\n * <ListTile title=\"Idioma\" trailing={<Select variant=\"chip\" aria-label=\"Idioma\" options={langs} />} />\n *\n * @example\n * <Select variant=\"bare\" wrapperClassName={styles.filtro} aria-label=\"Status\" options={status} />\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n    const {\n        options,\n        placeholder,\n        wrapperClassName,\n        className,\n        children,\n        id,\n        required,\n        variant = \"field\",\n        label,\n        helperText,\n        error,\n        caretIcon,\n        ...rest\n    } = props as SelectBaseProps & {\n        variant?: SelectProps[\"variant\"];\n        label?: string;\n        helperText?: string;\n        error?: string;\n    };\n    const isChip = variant === \"chip\";\n    const isBare = variant === \"bare\";\n    const generatedId = useId();\n    const selectId = id ?? generatedId;\n\n    const control = (\n        <div\n            className={cn(\n                styles.field,\n                isChip && styles.chip,\n                isBare && styles.bare,\n                isBare && wrapperClassName,\n            )}\n        >\n            <select\n                ref={ref}\n                id={selectId}\n                aria-invalid={!!error}\n                required={required}\n                className={cn(styles.select, className)}\n                {...rest}\n            >\n                {placeholder && (\n                    <option value=\"\" disabled hidden>\n                        {placeholder}\n                    </option>\n                )}\n                {options?.map((opt) => (\n                    <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                        {opt.label}\n                    </option>\n                ))}\n                {children}\n            </select>\n            <span className={styles.caret} aria-hidden>\n                {caretIcon ?? <CaretIcon />}\n            </span>\n        </div>\n    );\n\n    if (isBare) {\n        return control;\n    }\n\n    if (isChip) {\n        return <div className={cn(styles.chipWrapper, wrapperClassName)}>{control}</div>;\n    }\n\n    return (\n        <div className={cn(styles.wrapper, error && styles.error, wrapperClassName)}>\n            {label && (\n                <label htmlFor={selectId} className={styles.label}>\n                    {label}\n                    {required && <span className={styles.required}>*</span>}\n                </label>\n            )}\n            {control}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"0JAkGA,IAAa,GAAA,EAAS,EAAA,WAAA,CAA2C,SAAgB,EAAO,EAAK,CACzF,GAAM,CACF,UACA,cACA,mBACA,YACA,WACA,KACA,WACA,UAAU,QACV,QACA,aACA,QACA,YACA,GAAG,GACH,EAME,EAAS,IAAY,OACrB,EAAS,IAAY,OACrB,GAAA,EAAc,EAAA,MAAA,CAAM,EACpB,EAAW,GAAM,EAEjB,GACF,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,MACP,GAAU,EAAA,QAAO,KACjB,GAAU,EAAA,QAAO,KACjB,GAAU,CACd,EANJ,SAAA,EAQI,EAAA,EAAA,KAAA,CAAC,SAAD,CACS,MACL,GAAI,EACJ,eAAc,CAAC,CAAC,EACN,WACV,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EACtC,GAAI,EANR,SAAA,CAQK,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,MAAM,GAAG,SAAA,GAAS,OAAA,GACrB,SAAA,CACG,CAAA,EAEX,GAAS,IAAK,IACX,EAAA,EAAA,IAAA,CAAC,SAAD,CAAwB,MAAO,EAAI,MAAO,SAAU,EAAI,SACnD,SAAA,EAAI,KACD,EAFK,EAAI,KAET,CACX,EACA,CACG,CACR,CAAA,GAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAO,cAAA,GAC1B,SAAA,IAAa,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CAAY,CAAA,CACxB,CAAA,CACL,IAWT,OARI,EACO,EAGP,GACO,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,YAAa,CAAgB,EAAI,SAAA,CAAa,CAAA,GAI/E,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,GAAS,EAAA,QAAO,MAAO,CAAgB,EAA1E,SAAA,CACK,IACG,EAAA,EAAA,KAAA,CAAC,QAAD,CAAO,QAAS,EAAU,UAAW,EAAA,QAAO,MAA5C,SAAA,CACK,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAU,SAAA,GAAO,CAAA,CACnD,IAEV,EACA,GACG,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,UAAY,SAAA,CAAY,CAAA,EAChD,GACA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,OAAS,SAAA,CAAiB,CAAA,EAClD,IACH,GAEb,CAAC"}