@krelborn/stylesui 0.0.0-stage → 0.8.1

package/dist/forms/useFieldControl.js

@@ -0,0 +1,29 @@
+import { FieldContext as e } from "./FieldContext.js";
+import { useContext as t } from "react";
+import { c as n } from "react/compiler-runtime";
+//#region src/forms/useFieldControl.ts
+function r(r) {
+	let i = n(15), { "aria-describedby": a, "aria-invalid": o, disabled: s, id: c, required: l } = r, u = t(e);
+	if (u === null) {
+		let e;
+		return i[0] !== a || i[1] !== s || i[2] !== c || i[3] !== o || i[4] !== l ? (e = {
+			"aria-describedby": a,
+			"aria-invalid": o,
+			disabled: s,
+			id: c,
+			required: l
+		}, i[0] = a, i[1] = s, i[2] = c, i[3] = o, i[4] = l, i[5] = e) : e = i[5], e;
+	}
+	let d;
+	i[6] !== u.describedBy || i[7] !== a ? (d = [u.describedBy, a].filter(Boolean), i[6] = u.describedBy, i[7] = a, i[8] = d) : d = i[8];
+	let f = d.join(" "), p = f === "" ? void 0 : f, m = o ?? (u.invalid || void 0), h = s ?? (u.disabled || void 0), g = l ?? (u.required || void 0), _;
+	return i[9] !== u.controlId || i[10] !== p || i[11] !== m || i[12] !== h || i[13] !== g ? (_ = {
+		"aria-describedby": p,
+		"aria-invalid": m,
+		disabled: h,
+		id: u.controlId,
+		required: g
+	}, i[9] = u.controlId, i[10] = p, i[11] = m, i[12] = h, i[13] = g, i[14] = _) : _ = i[14], _;
+}
+//#endregion
+export { r as useFieldControl };

package/dist/forms/useRadioGroupItem.d.ts

@@ -0,0 +1,50 @@
+import type { ChangeEventHandler } from "react";
+interface RadioGroupItemOptions {
+    /**
+     * The radio's own change handler
+     */
+    onChange: ChangeEventHandler<HTMLInputElement> | undefined;
+    /**
+     * The value the radio stands for
+     */
+    value: string;
+}
+/**
+ * The props a radio takes from the `RadioGroup` around it
+ */
+export interface RadioGroupItemProps {
+    /**
+     * Whether the radio is selected, when the group is controlled
+     */
+    checked?: boolean;
+    /**
+     * Present when the group shows an error, so the radio can draw it
+     */
+    "data-invalid"?: "";
+    /**
+     * Whether the radio starts selected, when the group is uncontrolled
+     */
+    defaultChecked?: boolean;
+    /**
+     * The group's shared name
+     */
+    name?: string;
+    /**
+     * The radio's own handler, followed inside a group by reporting the radio's value to the group
+     */
+    onChange: ChangeEventHandler<HTMLInputElement> | undefined;
+    /**
+     * Whether the group needs an answer
+     */
+    required?: boolean;
+}
+/**
+ * Connects a radio to the `RadioGroup` around it
+ *
+ * @param options the radio's own `onChange` and its `value`
+ * @returns the props to spread on the radio input after its own. Outside a group, only the radio's `onChange`. Inside
+ *   one: the selection from the group's `value` or `defaultValue`, the group's `name` and `required`, `data-invalid`
+ *   while the group has an error, and an `onChange` that runs the radio's own and then reports its value to the group.
+ */
+export declare function useRadioGroupItem({ onChange, value }: RadioGroupItemOptions): RadioGroupItemProps;
+export {};

package/dist/forms/useRadioGroupItem.js

@@ -0,0 +1,27 @@
+import { RadioGroupContext as e } from "./RadioGroupContext.js";
+import { useContext as t } from "react";
+import { c as n } from "react/compiler-runtime";
+//#region src/forms/useRadioGroupItem.ts
+function r(r) {
+	let i = n(16), { onChange: a, value: o } = r, s = t(e);
+	if (s === null) {
+		let e;
+		return i[0] === a ? e = i[1] : (e = { onChange: a }, i[0] = a, i[1] = e), e;
+	}
+	let c;
+	i[2] !== s.defaultValue || i[3] !== s.value || i[4] !== o ? (c = {}, s.value === void 0 ? s.defaultValue !== void 0 && (c.defaultChecked = s.defaultValue === o) : c.checked = s.value === o, i[2] = s.defaultValue, i[3] = s.value, i[4] = o, i[5] = c) : c = i[5];
+	let l = s.invalid ? "" : void 0, u;
+	i[6] !== s || i[7] !== a || i[8] !== o ? (u = (e) => {
+		a?.(e), s.onValueChange?.(o);
+	}, i[6] = s, i[7] = a, i[8] = o, i[9] = u) : u = i[9];
+	let d;
+	return i[10] !== s.name || i[11] !== s.required || i[12] !== c || i[13] !== l || i[14] !== u ? (d = {
+		...c,
+		"data-invalid": l,
+		name: s.name,
+		onChange: u,
+		required: s.required
+	}, i[10] = s.name, i[11] = s.required, i[12] = c, i[13] = l, i[14] = u, i[15] = d) : d = i[15], d;
+}
+//#endregion
+export { r as useRadioGroupItem };

package/dist/index.d.ts

@@ -0,0 +1,95 @@
+export { Alert } from "./components/Alert";
+export type { AlertProps, AlertTone } from "./components/Alert";
+export { Avatar } from "./components/Avatar";
+export type { AvatarProps, AvatarSize } from "./components/Avatar";
+export { AvatarGroup } from "./components/AvatarGroup";
+export type { AvatarGroupProps } from "./components/AvatarGroup";
+export { Badge } from "./components/Badge";
+export type { BadgeElement, BadgeProps, BadgeTone, BadgeVariant } from "./components/Badge";
+export { Box } from "./components/Box";
+export type { BoxElement, BoxProps, PolymorphicProps } from "./components/Box";
+export { Button } from "./components/Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./components/Button";
+export { Card } from "./components/Card";
+export type { CardPadding, CardProps } from "./components/Card";
+export { Center } from "./components/Center";
+export type { CenterProps, CenterWidth } from "./components/Center";
+export { Checkbox } from "./components/Checkbox";
+export type { CheckboxProps } from "./components/Checkbox";
+export { Cluster } from "./components/Cluster";
+export type { ClusterProps } from "./components/Cluster";
+export { Code } from "./components/Code";
+export type { CodeProps } from "./components/Code";
+export { Counter } from "./components/Counter";
+export type { CounterProps } from "./components/Counter";
+export { Cover } from "./components/Cover";
+export type { CoverProps } from "./components/Cover";
+export { Divider } from "./components/Divider";
+export type { DividerOrientation, DividerProps } from "./components/Divider";
+export { Field } from "./components/Field";
+export type { FieldElement, FieldProps } from "./components/Field";
+export { Fieldset } from "./components/Fieldset";
+export type { FieldsetProps } from "./components/Fieldset";
+export { Frame } from "./components/Frame";
+export type { FrameProps } from "./components/Frame";
+export { Grid } from "./components/Grid";
+export type { GridProps } from "./components/Grid";
+export { Heading } from "./components/Heading";
+export type { HeadingLevel, HeadingProps, HeadingSize } from "./components/Heading";
+export { AddIcon, ChevronDownIcon, CloseIcon, ColorModeIcon, DeleteIcon, InfoIcon, MoreHorizontalIcon, MoreVerticalIcon, PaletteIcon, RefreshIcon, RemoveIcon, SendIcon, } from "./components/Icon";
+export type { IconProps } from "./components/Icon";
+export { IconButton } from "./components/IconButton";
+export type { IconButtonProps } from "./components/IconButton";
+export { Kbd } from "./components/Kbd";
+export type { KbdProps } from "./components/Kbd";
+export { Link } from "./components/Link";
+export type { LinkElement, LinkProps, LinkTone, LinkUnderline } from "./components/Link";
+export { Listbox, ListboxOption } from "./components/Listbox";
+export type { ListboxOptionProps, ListboxProps } from "./components/Listbox";
+export { NavList, NavListGroup, NavListItem } from "./components/NavList";
+export type { NavListGroupProps, NavListItemElement, NavListItemProps, NavListProps } from "./components/NavList";
+export { PageLayout } from "./components/PageLayout";
+export type { PageLayoutProps } from "./components/PageLayout";
+export { Popover, usePopover } from "./components/Popover";
+export type { PopoverProps, UsePopoverOptions, UsePopoverResult } from "./components/Popover";
+export { Prose } from "./components/Prose";
+export type { ProseCodeOverflow, ProseProps, ProseSize } from "./components/Prose";
+export { Radio } from "./components/Radio";
+export type { RadioProps } from "./components/Radio";
+export { RadioGroup } from "./components/RadioGroup";
+export type { RadioGroupOrientation, RadioGroupProps } from "./components/RadioGroup";
+export { Row } from "./components/Row";
+export type { RowProps } from "./components/Row";
+export { Segment, SegmentedControl } from "./components/SegmentedControl";
+export type { SegmentedControlProps, SegmentProps } from "./components/SegmentedControl";
+export { Select } from "./components/Select";
+export type { SelectProps } from "./components/Select";
+export { Sidebar } from "./components/Sidebar";
+export type { SidebarProps } from "./components/Sidebar";
+export { SkipLink } from "./components/SkipLink";
+export type { SkipLinkProps } from "./components/SkipLink";
+export { Stack } from "./components/Stack";
+export type { StackProps } from "./components/Stack";
+export { StatusDot } from "./components/StatusDot";
+export type { StatusDotProps, StatusDotSize, StatusDotVariant } from "./components/StatusDot";
+export { Switch } from "./components/Switch";
+export type { SwitchProps } from "./components/Switch";
+export { Switcher } from "./components/Switcher";
+export type { SwitcherProps } from "./components/Switcher";
+export { Tab, TabList, TabPanel, Tabs } from "./components/Tabs";
+export type { TabListProps, TabPanelProps, TabProps, TabsActivation, TabsOrientation, TabsProps, TabsVariant, } from "./components/Tabs";
+export { Text } from "./components/Text";
+export type { TextProps, TextSize, TextTone, TextWeight } from "./components/Text";
+export { Textarea } from "./components/Textarea";
+export type { TextareaProps } from "./components/Textarea";
+export { TextInput } from "./components/TextInput";
+export type { TextInputProps, TextInputType } from "./components/TextInput";
+export { Theme } from "./components/Theme";
+export type { PaletteName, ThemeMode, ThemeName, ThemeProps } from "./components/Theme";
+export { Tooltip, useTooltip } from "./components/Tooltip";
+export type { TooltipProps, TooltipRelationship, UseTooltipOptions, UseTooltipResult } from "./components/Tooltip";
+export { VisuallyHidden } from "./components/VisuallyHidden";
+export type { VisuallyHiddenProps } from "./components/VisuallyHidden";
+export type { ControlSize } from "./forms";
+export type { Alignment, Justification, Space } from "./layout";
+export type { OverlayDelay, OverlayPlacement } from "./overlays";

package/dist/index.js

@@ -0,0 +1,67 @@
+import { Box as e } from "./components/Box/Box.js";
+import { Alert as t } from "./components/Alert/Alert.js";
+import { Avatar as n } from "./components/Avatar/Avatar.js";
+import { VisuallyHidden as r } from "./components/VisuallyHidden/VisuallyHidden.js";
+import { AvatarGroup as i } from "./components/AvatarGroup/AvatarGroup.js";
+import { Badge as a } from "./components/Badge/Badge.js";
+import { Button as o } from "./components/Button/Button.js";
+import { Card as s } from "./components/Card/Card.js";
+import { Center as c } from "./components/Center/Center.js";
+import { Checkbox as l } from "./components/Checkbox/Checkbox.js";
+import { Cluster as u } from "./components/Cluster/Cluster.js";
+import { Code as d } from "./components/Code/Code.js";
+import { Counter as f } from "./components/Counter/Counter.js";
+import { Cover as p } from "./components/Cover/Cover.js";
+import { Divider as m } from "./components/Divider/Divider.js";
+import { Field as h } from "./components/Field/Field.js";
+import { Fieldset as g } from "./components/Fieldset/Fieldset.js";
+import { Frame as _ } from "./components/Frame/Frame.js";
+import { Grid as v } from "./components/Grid/Grid.js";
+import { Heading as y } from "./components/Heading/Heading.js";
+import { AddIcon as b } from "./components/Icon/AddIcon.js";
+import { ChevronDownIcon as x } from "./components/Icon/ChevronDownIcon.js";
+import { CloseIcon as S } from "./components/Icon/CloseIcon.js";
+import { ColorModeIcon as C } from "./components/Icon/ColorModeIcon.js";
+import { DeleteIcon as w } from "./components/Icon/DeleteIcon.js";
+import { InfoIcon as T } from "./components/Icon/InfoIcon.js";
+import { MoreHorizontalIcon as E } from "./components/Icon/MoreHorizontalIcon.js";
+import { MoreVerticalIcon as D } from "./components/Icon/MoreVerticalIcon.js";
+import { PaletteIcon as O } from "./components/Icon/PaletteIcon.js";
+import { RefreshIcon as k } from "./components/Icon/RefreshIcon.js";
+import { RemoveIcon as A } from "./components/Icon/RemoveIcon.js";
+import { SendIcon as j } from "./components/Icon/SendIcon.js";
+import { Kbd as M } from "./components/Kbd/Kbd.js";
+import { Tooltip as N } from "./components/Tooltip/Tooltip.js";
+import { useTooltip as P } from "./components/Tooltip/useTooltip.js";
+import { IconButton as F } from "./components/IconButton/IconButton.js";
+import { Link as I } from "./components/Link/Link.js";
+import { Listbox as L } from "./components/Listbox/Listbox.js";
+import { ListboxOption as R } from "./components/Listbox/ListboxOption.js";
+import { NavList as z } from "./components/NavList/NavList.js";
+import { NavListGroup as B } from "./components/NavList/NavListGroup.js";
+import { NavListItem as V } from "./components/NavList/NavListItem.js";
+import { PageLayout as H } from "./components/PageLayout/PageLayout.js";
+import { Popover as U } from "./components/Popover/Popover.js";
+import { usePopover as W } from "./components/Popover/usePopover.js";
+import { Prose as G } from "./components/Prose/Prose.js";
+import { Radio as K } from "./components/Radio/Radio.js";
+import { RadioGroup as q } from "./components/RadioGroup/RadioGroup.js";
+import { Row as J } from "./components/Row/Row.js";
+import { Segment as Y } from "./components/SegmentedControl/Segment.js";
+import { SegmentedControl as X } from "./components/SegmentedControl/SegmentedControl.js";
+import { Select as Z } from "./components/Select/Select.js";
+import { Sidebar as Q } from "./components/Sidebar/Sidebar.js";
+import { SkipLink as $ } from "./components/SkipLink/SkipLink.js";
+import { Stack as ee } from "./components/Stack/Stack.js";
+import { StatusDot as te } from "./components/StatusDot/StatusDot.js";
+import { Switch as ne } from "./components/Switch/Switch.js";
+import { Switcher as re } from "./components/Switcher/Switcher.js";
+import { Tab as ie } from "./components/Tabs/Tab.js";
+import { TabList as ae } from "./components/Tabs/TabList.js";
+import { TabPanel as oe } from "./components/Tabs/TabPanel.js";
+import { Tabs as se } from "./components/Tabs/Tabs.js";
+import { Text as ce } from "./components/Text/Text.js";
+import { Textarea as le } from "./components/Textarea/Textarea.js";
+import { TextInput as ue } from "./components/TextInput/TextInput.js";
+import { Theme as de } from "./components/Theme/Theme.js";
+export { b as AddIcon, t as Alert, n as Avatar, i as AvatarGroup, a as Badge, e as Box, o as Button, s as Card, c as Center, l as Checkbox, x as ChevronDownIcon, S as CloseIcon, u as Cluster, d as Code, C as ColorModeIcon, f as Counter, p as Cover, w as DeleteIcon, m as Divider, h as Field, g as Fieldset, _ as Frame, v as Grid, y as Heading, F as IconButton, T as InfoIcon, M as Kbd, I as Link, L as Listbox, R as ListboxOption, E as MoreHorizontalIcon, D as MoreVerticalIcon, z as NavList, B as NavListGroup, V as NavListItem, H as PageLayout, O as PaletteIcon, U as Popover, G as Prose, K as Radio, q as RadioGroup, k as RefreshIcon, A as RemoveIcon, J as Row, Y as Segment, X as SegmentedControl, Z as Select, j as SendIcon, Q as Sidebar, $ as SkipLink, ee as Stack, te as StatusDot, ne as Switch, re as Switcher, ie as Tab, ae as TabList, oe as TabPanel, se as Tabs, ce as Text, ue as TextInput, le as Textarea, de as Theme, N as Tooltip, r as VisuallyHidden, W as usePopover, P as useTooltip };

package/dist/layout/Space.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Step on the spacing scale, mapped to the `--sui-space-*` tokens; 0 is no space
+ */
+export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;

package/dist/layout/alignment.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Placement of children on a container's cross axis
+ */
+export type Alignment = "start" | "center" | "end" | "stretch" | "baseline";
+/**
+ * Distribution of children along a container's main axis
+ */
+export type Justification = "start" | "center" | "end" | "between";

package/dist/layout/index.d.ts

@@ -0,0 +1,5 @@
+export type { Alignment, Justification } from "./alignment";
+export { listRole } from "./listRole";
+export type { Space } from "./Space";
+export { spaceValue } from "./spaceValue";
+export { withCustomProperties } from "./withCustomProperties";

package/dist/layout/listRole.d.ts

@@ -0,0 +1,11 @@
+import type { AriaRole } from "react";
+import type { BoxElement } from "../components/Box";
+/**
+ * Picks the role for a container that removes list markers, which makes WebKit stop exposing
+ * `ul` and `ol` as lists
+ *
+ * @param element the element the container renders
+ * @param role the role the consumer passed, if any
+ * @returns `list` for a `ul` or `ol` without a role, otherwise the given role
+ */
+export declare function listRole(element: BoxElement, role: AriaRole | undefined): AriaRole | undefined;

package/dist/layout/listRole.js

@@ -0,0 +1,6 @@
+//#region src/layout/listRole.ts
+function e(e, t) {
+	return t === void 0 && (e === "ul" || e === "ol") ? "list" : t;
+}
+//#endregion
+export { e as listRole };

package/dist/layout/spaceValue.d.ts

@@ -0,0 +1,8 @@
+import type { Space } from "./Space";
+/**
+ * Resolves a spacing step to a CSS value
+ *
+ * @param space the spacing step
+ * @returns `0px` (a length, so it stays valid inside `calc()`), or the matching `--sui-space-*` token with the default theme's value as fallback
+ */
+export declare function spaceValue(space: Space): string;

package/dist/layout/spaceValue.js

@@ -0,0 +1,6 @@
+//#region src/layout/spaceValue.ts
+function e(e) {
+	return e === 0 ? "0px" : `var(--sui-space-${e}, ${e * .25}rem)`;
+}
+//#endregion
+export { e as spaceValue };

package/dist/layout/withCustomProperties.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from "react";
+/**
+ * Merges a component's custom properties with the consumer's style
+ *
+ * @param customProperties the component's custom properties; undefined values are not rendered
+ * @param style the consumer's style, whose declarations win on conflict
+ * @returns the merged style
+ */
+export declare function withCustomProperties(customProperties: Record<`--${string}`, string | undefined>, style: CSSProperties | undefined): CSSProperties;

package/dist/layout/withCustomProperties.js

@@ -0,0 +1,9 @@
+//#region src/layout/withCustomProperties.ts
+function e(e, t) {
+	return {
+		...e,
+		...t
+	};
+}
+//#endregion
+export { e as withCustomProperties };

package/dist/overlays/OverlayDelay.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Delays before an overlay shows and hides, in milliseconds
+ */
+export interface OverlayDelay {
+    /**
+     * Time between the pointer leaving the trigger and overlay, and the overlay hiding
+     */
+    hide?: number;
+    /**
+     * Time between the pointer entering the trigger and the overlay showing
+     */
+    show?: number;
+}

package/dist/overlays/OverlayPlacement.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Side of the trigger an overlay opens on. `top` and `bottom` centre it on the trigger, and `top-start`, `top-end`,
+ * `bottom-start` and `bottom-end` line its start or end edge up with the trigger's instead, so it grows away from that
+ * edge. `start` and `end` follow the writing direction.
+ */
+export type OverlayPlacement = "bottom" | "bottom-end" | "bottom-start" | "end" | "start" | "top" | "top-end" | "top-start";

package/dist/overlays/anchorNameFor.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Builds the `anchor-name` that ties an overlay to its trigger
+ *
+ * @param id the overlay's generated id
+ * @returns a dashed ident unique to the id, with the punctuation React's ids contain removed
+ */
+export declare function anchorNameFor(id: string): string;

package/dist/overlays/anchorNameFor.js

@@ -0,0 +1,6 @@
+//#region src/overlays/anchorNameFor.ts
+function e(e) {
+	return `--sui-overlay-${e.replace(/[^\w-]/g, "")}`;
+}
+//#endregion
+export { e as anchorNameFor };

package/dist/overlays/index.d.ts

@@ -0,0 +1,6 @@
+export { anchorNameFor } from "./anchorNameFor";
+export { mergeProps } from "./mergeProps";
+export type { OverlayDelay } from "./OverlayDelay";
+export type { OverlayPlacement } from "./OverlayPlacement";
+export { syncPopover } from "./syncPopover";
+export { useOverlay } from "./useOverlay";

package/dist/overlays/mergeProps.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Combines a consumer's own props with the props an overlay hook sets on the same element
+ *
+ * @param own the consumer's props, if any
+ * @param hook the props the hook sets
+ * @returns the consumer's props with the hook's added. Where both set a prop, both functions run, the consumer's
+ *   first; `aria-describedby` and `aria-labelledby` list the hook's ids before the consumer's; `style` objects merge,
+ *   the hook's properties winning except `anchorName`, which lists the hook's name before the consumer's when the
+ *   consumer's is a list of dashed idents, so one trigger can anchor two overlays, and otherwise takes the hook's name,
+ *   in place of a keyword such as `none` or `inherit`; and any other prop takes the hook's value. A hook value of
+ *   `undefined` keeps the consumer's.
+ */
+export declare function mergeProps<Own extends object, Hook extends object>(own: (Own & Partial<Hook>) | undefined, hook: Hook): Omit<Own, keyof Hook> & Hook;

package/dist/overlays/mergeProps.js

@@ -0,0 +1,30 @@
+//#region src/overlays/mergeProps.ts
+var e = /* @__PURE__ */ new Set(["aria-describedby", "aria-labelledby"]), t = /^--[-\w\u{80}-\u{10FFFF}]+$/u;
+function n(e, t) {
+	let n = { ...e };
+	for (let [e, i] of Object.entries(t)) n[e] = r(e, n[e], i);
+	return n;
+}
+function r(t, n, r) {
+	return n === void 0 ? r : r === void 0 ? n : o(n) && o(r) ? (e) => {
+		n(e), r(e);
+	} : e.has(t) ? `${String(r)} ${String(n)}` : t === "style" && s(n) && s(r) ? i(n, r) : r;
+}
+function i(e, t) {
+	let n = {
+		...e,
+		...t
+	};
+	return t.anchorName !== void 0 && a(e.anchorName) && (n.anchorName = `${t.anchorName}, ${e.anchorName}`), n;
+}
+function a(e) {
+	return e !== void 0 && e.split(",").every((e) => t.test(e.trim()));
+}
+function o(e) {
+	return typeof e == "function";
+}
+function s(e) {
+	return typeof e == "object" && !!e;
+}
+//#endregion
+export { n as mergeProps };

package/dist/overlays/syncPopover.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shows or hides a popover to match `open`, leaving it alone when it already matches. The browser refuses while it
+ * shows or hides another popover, so a refusal is tried again on the next task, unless the popover has left the
+ * document by then. A second refusal is thrown from the timer as a `PopoverRefusedError`, where it is reported without
+ * unmounting the app; any other error is thrown at once.
+ *
+ * @param popover the popover element
+ * @param open whether it should be shown
+ * @returns a function that cancels the retry, for an effect's cleanup
+ */
+export declare function syncPopover(popover: HTMLElement, open: boolean): () => void;

package/dist/overlays/syncPopover.js

@@ -0,0 +1,25 @@
+import { PopoverRefusedError as e } from "../errors/PopoverRefusedError.js";
+//#region src/overlays/syncPopover.ts
+function t(t, r) {
+	if (n(t, r) === null) return () => {};
+	let i = setTimeout(() => {
+		if (!t.isConnected) return;
+		let i = n(t, r);
+		if (i !== null) throw new e(t, r, i);
+	}, 0);
+	return () => {
+		clearTimeout(i);
+	};
+}
+function n(e, t) {
+	let n = e.matches(":popover-open");
+	try {
+		t && !n ? e.showPopover() : !t && n && e.hidePopover();
+	} catch (e) {
+		if (e instanceof DOMException && e.name === "InvalidStateError") return e;
+		throw e;
+	}
+	return null;
+}
+//#endregion
+export { t as syncPopover };

package/dist/overlays/useOverlay.d.ts

@@ -0,0 +1,71 @@
+import type { OverlayDelay } from "./OverlayDelay";
+interface UseOverlayOptions {
+    /**
+     * Whether the overlay starts open when uncontrolled
+     */
+    defaultOpen: boolean;
+    /**
+     * Show and hide delays, in milliseconds
+     */
+    delay: Required<OverlayDelay>;
+    /**
+     * Called with the requested open state whenever the overlay asks to open or close
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Controls whether the overlay is open
+     */
+    open?: boolean;
+}
+/**
+ * An overlay's identity and open state, and the requests that change it. Each request cancels any pending one.
+ */
+interface OverlayState {
+    /**
+     * `anchor-name` that ties the overlay's position to its trigger
+     */
+    anchorName: string;
+    /**
+     * Cancels a pending delayed show or hide
+     */
+    cancelDelay: () => void;
+    /**
+     * Hides the overlay at once
+     */
+    hide: () => void;
+    /**
+     * Hides the overlay after the hide delay, unless another request comes first
+     */
+    hideAfterDelay: () => void;
+    /**
+     * The overlay element's `id`
+     */
+    id: string;
+    /**
+     * Whether the overlay is open
+     */
+    open: boolean;
+    /**
+     * Shows the overlay at once
+     */
+    show: () => void;
+    /**
+     * Shows the overlay after the show delay, unless another request comes first
+     */
+    showAfterDelay: () => void;
+    /**
+     * Shows the overlay once the current task has finished, unless another request comes first
+     */
+    showAfterTask: () => void;
+}
+/**
+ * Holds an overlay's open state, controlled or uncontrolled, and hides an open overlay on Escape. An Escape that
+ * hides the overlay has its default action prevented, so a dialog around the trigger stays open. Escape is left alone
+ * while it ends a text composition, and when the overlay cannot close because it is controlled with no `onOpenChange`.
+ *
+ * @param options the initial or controlled open state, the delays and the change callback
+ * @returns the overlay's id, the `anchor-name` that ties it to its trigger, whether it is open, and the requests that
+ *   change it
+ */
+export declare function useOverlay({ defaultOpen, delay, onOpenChange, open: controlledOpen, }: UseOverlayOptions): OverlayState;
+export {};

package/dist/overlays/useOverlay.js

@@ -0,0 +1,56 @@
+import { anchorNameFor as e } from "./anchorNameFor.js";
+import { useEffect as t, useEffectEvent as n, useId as r, useRef as i, useState as a } from "react";
+//#region src/overlays/useOverlay.ts
+function o({ defaultOpen: o, delay: s, onOpenChange: c, open: l }) {
+	let u = r(), [d, f] = a(o), p = i(void 0), m = l ?? d;
+	function h() {
+		clearTimeout(p.current), p.current = void 0;
+	}
+	function g(e) {
+		l === void 0 && f(e), c?.(e);
+	}
+	function _(e, t) {
+		if (h(), e !== m) {
+			if (t <= 0) {
+				g(e);
+				return;
+			}
+			v(e, t);
+		}
+	}
+	function v(e, t) {
+		p.current = setTimeout(() => {
+			p.current = void 0, g(e);
+		}, t);
+	}
+	function y() {
+		h(), m || v(!0, 0);
+	}
+	let b = n((e) => {
+		let t = l === void 0 || c !== void 0;
+		e.key === "Escape" && !e.isComposing && t && (e.preventDefault(), _(!1, 0));
+	});
+	return t(() => {
+		if (!m) return;
+		function e(e) {
+			b(e);
+		}
+		return document.addEventListener("keydown", e), () => {
+			document.removeEventListener("keydown", e);
+		};
+	}, [m]), t(() => () => {
+		clearTimeout(p.current);
+	}, []), {
+		anchorName: e(u),
+		cancelDelay: h,
+		hide: () => _(!1, 0),
+		hideAfterDelay: () => _(!1, s.hide),
+		id: u,
+		open: m,
+		show: () => _(!0, 0),
+		showAfterDelay: () => _(!0, s.show),
+		showAfterTask: y
+	};
+}
+//#endregion
+export { o as useOverlay };