@krelborn/stylesui 0.0.0-stage → 0.8.1

package/dist/components/Listbox/renderedOptions.d.ts

@@ -0,0 +1,30 @@
+/**
+ * An option as a listbox renders it
+ */
+export interface RenderedOption {
+    /**
+     * Whether the option can be reached but not selected
+     */
+    disabled: boolean;
+    /**
+     * The option element
+     */
+    element: HTMLElement;
+    /**
+     * The text type-ahead matches: the option's `textValue`, else the text of the elements its `aria-labelledby` names,
+     * else its own text
+     */
+    textValue: string;
+    /**
+     * The option's value
+     */
+    value: string;
+}
+/**
+ * Reads the options a listbox renders
+ *
+ * @param listbox the listbox element
+ * @returns each option that is not hidden or inert, in document order, with its value, its type-ahead text and
+ *   whether it is disabled
+ */
+export declare function renderedOptions(listbox: HTMLElement): RenderedOption[];

package/dist/components/Listbox/renderedOptions.js

@@ -0,0 +1,15 @@
+//#region src/components/Listbox/renderedOptions.ts
+function e(e) {
+	return Array.from(e.querySelectorAll("[role=\"option\"]")).filter((e) => e.closest("[hidden], [inert]") === null).map((e) => ({
+		disabled: e.getAttribute("aria-disabled") === "true",
+		element: e,
+		textValue: e.dataset.textValue ?? t(e) ?? e.textContent ?? "",
+		value: e.dataset.value ?? ""
+	}));
+}
+function t(e) {
+	let t = e.getRootNode(), n = t instanceof ShadowRoot ? t : e.ownerDocument, r = (e.getAttribute("aria-labelledby") ?? "").split(/\s+/).map((e) => n.getElementById(e)).filter((e) => e !== null);
+	return r.length === 0 ? void 0 : r.map((e) => e.textContent).join(" ");
+}
+//#endregion
+export { e as renderedOptions };

package/dist/components/Listbox/useListbox.d.ts

@@ -0,0 +1,54 @@
+import type { FocusEvent, KeyboardEvent } from "react";
+import type { ListboxContextValue } from "./ListboxContext";
+interface UseListboxOptions {
+    /**
+     * The value selected at first when uncontrolled
+     */
+    defaultValue: string | null;
+    /**
+     * Called with an option's value when Enter or a double-click acts on it
+     */
+    onAction: ((value: string) => void) | undefined;
+    /**
+     * Called with the value of the option the user selects
+     */
+    onValueChange: ((value: string) => void) | undefined;
+    /**
+     * The selected value when controlled, or undefined when uncontrolled
+     */
+    value: string | null | undefined;
+}
+/**
+ * A listbox's state for its options, and the handlers for the listbox element
+ */
+export interface ListboxState extends ListboxContextValue {
+    /**
+     * Notes that focus has left, and forgets a press, so the next focus scrolls
+     */
+    handleBlur: () => void;
+    /**
+     * Makes the selected option, or the first, active as focus enters, and scrolls it into view unless a press or a
+     * click caused the focus
+     */
+    handleFocus: (event: FocusEvent<HTMLDivElement>) => void;
+    /**
+     * Handles the arrow keys, Home, End, Space, Enter and type-ahead
+     */
+    handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * Forgets a press the browser cancelled, so the next focus scrolls
+     */
+    handlePointerCancel: () => void;
+    /**
+     * Notes that a press has started, so the focus it causes does not scroll
+     */
+    handlePointerDown: () => void;
+}
+/**
+ * Holds a listbox's selection, controlled or uncontrolled, and its active option, and handles its keyboard
+ *
+ * @param options the selection props and callbacks
+ * @returns the state options read and the listbox element's handlers
+ */
+export declare function useListbox({ defaultValue, onAction, onValueChange, value }: UseListboxOptions): ListboxState;
+export {};

package/dist/components/Listbox/useListbox.js

@@ -0,0 +1,104 @@
+import { targetIndexForKey as e } from "../../collections/targetIndexForKey.js";
+import { extendTypeAheadQuery as t, isTypeAheadQueryLive as n, typeAheadTarget as r } from "../../collections/typeAhead.js";
+import { renderedOptions as i } from "./renderedOptions.js";
+import { useId as a, useRef as o, useState as s } from "react";
+//#region src/components/Listbox/useListbox.ts
+var c = {
+	block: "nearest",
+	container: "nearest"
+};
+function l({ defaultValue: l, onAction: f, onValueChange: p, value: m }) {
+	let h = a(), g = o(null), _ = o(!1), v = o(null), y = o(null), [b, x] = s(l), [S, C] = s(null), w = m === void 0 ? b : m;
+	function T(e) {
+		e !== w && (m === void 0 && x(e), p?.(e));
+	}
+	function E(e, t) {
+		C(e[t].value), y.current = t;
+	}
+	function D(e, t) {
+		let n = e[t];
+		E(e, t), n.element.scrollIntoView(c), n.disabled || T(n.value);
+	}
+	function O(e) {
+		let t = v.current;
+		if (t === null) return;
+		let n = i(t), r = n.findIndex((t) => t.value === e);
+		r !== -1 && E(n, r);
+	}
+	function k(e) {
+		if (e.target !== e.currentTarget) return;
+		v.current = e.currentTarget;
+		let t = i(e.currentTarget);
+		if (t.length === 0) {
+			C(null), y.current = null;
+			return;
+		}
+		let n = Math.max(t.findIndex((e) => e.value === w), 0);
+		E(t, n), _.current || t[n].element.scrollIntoView(c);
+	}
+	function A() {
+		v.current = null, M();
+	}
+	function j() {
+		_.current = !0;
+	}
+	function M() {
+		_.current = !1;
+	}
+	function N(e) {
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = i(e.currentTarget), n = u(t, S, w), r = Date.now();
+		(P(e, t[n]) || F(e.key, t[n], r) || I(e.key, t, n) || L(e.key, t, n, r)) && e.preventDefault();
+	}
+	function P(e, t) {
+		return e.key === "Enter" && (!e.repeat && t !== void 0 && !t.disabled && f?.(t.value), !0);
+	}
+	function F(e, t, r) {
+		return e !== " " || n(g.current, r) ? !1 : (t !== void 0 && !t.disabled && T(t.value), !0);
+	}
+	function I(t, n, r) {
+		let i = (r === -1 ? d(t, n.length, y.current) : null) ?? e({
+			count: n.length,
+			currentIndex: r,
+			key: t,
+			orientation: "vertical",
+			wraps: !1
+		});
+		return i !== null && (D(n, i), !0);
+	}
+	function L(e, n, i, a) {
+		if (Array.from(e).length !== 1) return !1;
+		g.current = t(g.current, e, a);
+		let o = n.map((e) => e.textValue), s = r(o, i, g.current.text);
+		return s !== null && D(n, s), !0;
+	}
+	function R(e) {
+		f?.(e);
+	}
+	function z(e, t, n) {
+		_.current = !0, e.closest("[role=\"listbox\"]")?.focus(), _.current = !1, O(t), n || T(t);
+	}
+	return {
+		act: R,
+		activeValue: S,
+		baseId: h,
+		choose: z,
+		claim: O,
+		handleBlur: A,
+		handleFocus: k,
+		handleKeyDown: N,
+		handlePointerCancel: M,
+		handlePointerDown: j,
+		selectedValue: w,
+		setActiveValue: C
+	};
+}
+function u(e, t, n) {
+	let r = e.findIndex((e) => e.value === t);
+	return r === -1 ? e.findIndex((e) => e.value === n) : r;
+}
+function d(e, t, n) {
+	return n === null || t === 0 ? null : e === "ArrowDown" ? Math.min(n, t - 1) : e === "ArrowUp" ? Math.min(Math.max(n - 1, 0), t - 1) : null;
+}
+//#endregion
+export { l as useListbox };

package/dist/components/Listbox/useListboxContext.d.ts

@@ -0,0 +1,9 @@
+import type { ListboxContextValue } from "./ListboxContext";
+/**
+ * Reads the state of the surrounding `Listbox`
+ *
+ * @param part the name of the part reading it, for the error message
+ * @returns the surrounding `Listbox`'s state
+ * @throws MissingContextError when the part is not inside a `Listbox`
+ */
+export declare function useListboxContext(part: string): ListboxContextValue;

package/dist/components/Listbox/useListboxContext.js

@@ -0,0 +1,11 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { ListboxContext as t } from "./ListboxContext.js";
+import { useContext as n } from "react";
+//#region src/components/Listbox/useListboxContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "Listbox");
+	return i;
+}
+//#endregion
+export { r as useListboxContext };

package/dist/components/NavList/NavList.css

@@ -0,0 +1 @@
+.sui-navList-MII8M{font-family:var(--sui-font-body,system-ui, sans-serif);line-height:var(--sui-line-height-tight,1.25)}.sui-list-oNLze{gap:var(--sui-space-1,.25rem);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.sui-navList-MII8M>.sui-list-oNLze{padding:var(--sui-space-2,.5rem)}.sui-group-18cks+.sui-group-18cks{margin-block-start:var(--sui-space-3,.75rem)}.sui-groupTitle-Ftg7C{padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem)}.sui-item-2Rc1V{box-sizing:border-box;align-items:center;gap:var(--sui-space-2,.5rem);min-block-size:1.75rem;inline-size:100%;padding:var(--sui-space-1,.25rem) var(--sui-space-2,.5rem);border-radius:var(--sui-radius-md,4px);color:var(--sui-color-text,#111827);font:inherit;text-align:start;cursor:pointer;scroll-margin-block:var(--sui-space-2,.5rem);background-color:#0000;border:0;text-decoration:none;transition:background-color .12s,color .12s;display:flex;position:relative}.sui-item-2Rc1V:hover{background-color:var(--sui-color-secondary-subtle,#f3f4f6)}.sui-item-2Rc1V[aria-current]:not([aria-current=false]){background-color:var(--sui-color-primary-subtle,#edf5ff);color:var(--sui-color-primary,#2563eb);font-weight:var(--sui-font-weight-bold,700)}.sui-item-2Rc1V:before{inset-block:var(--sui-space-1,.25rem);inline-size:calc(var(--sui-border-width,1px) * 2);border-radius:var(--sui-radius-full,9999px);background-color:var(--sui-color-primary,#2563eb);content:"";transition:transform .12s ease-out;position:absolute;inset-inline-start:0;transform:scaleY(0)}.sui-item-2Rc1V[aria-current]:not([aria-current=false]):before{transition:transform var(--sui-motion-spring,.12s ease-out);transform:scaleY(1)}.sui-item-2Rc1V:focus-visible{outline:var(--sui-focus-ring-width,2px) solid var(--sui-color-focus-ring,#3b82f6);outline-offset:2px}.sui-label-WQWVq{overflow-wrap:anywhere;flex:1;min-inline-size:0}.sui-trailing-g7A1F{flex:none}.sui-trailing-g7A1F:empty{display:none}@media (prefers-reduced-motion:reduce){.sui-item-2Rc1V:before,.sui-item-2Rc1V[aria-current]:not([aria-current=false]):before{transition:none}}@media (forced-colors:active){.sui-item-2Rc1V[aria-current]:not([aria-current=false]):before{forced-color-adjust:none;background-color:highlight}}

package/dist/components/NavList/NavList.d.ts

@@ -0,0 +1,20 @@
+import type { JSX } from "react";
+import type { RequiredAccessibleName } from "../../accessibility";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `NavList`: a required `aria-label` or `aria-labelledby` and every other `nav` prop except
+ * `dangerouslySetInnerHTML`
+ */
+export type NavListProps = RequiredAccessibleName & Omit<BoxProps<"nav">, "aria-label" | "aria-labelledby" | "as" | "dangerouslySetInnerHTML">;
+/**
+ * A navigation landmark holding a list of `NavListItem`s, optionally in `NavListGroup`s, such as an app's sidebar.
+ * Name it with `aria-label` or `aria-labelledby`.
+ *
+ * @example
+ * <NavList aria-label="Lists">
+ *   <NavListGroup headingLevel={2} title="For review">
+ *     <NavListItem href="/needs-you" aria-current="page">Needs you</NavListItem>
+ *   </NavListGroup>
+ * </NavList>
+ */
+export declare function NavList({ children, className, ...rest }: NavListProps): JSX.Element;

package/dist/components/NavList/NavList.js

@@ -0,0 +1,28 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./NavList.module.js";
+import { clsx as n } from "clsx";
+import { c as r } from "react/compiler-runtime";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/NavList/NavList.tsx
+function a(a) {
+	let o = r(12), s, c, l;
+	o[0] === a ? (s = o[1], c = o[2], l = o[3]) : ({children: s, className: c, ...l} = a, o[0] = a, o[1] = s, o[2] = c, o[3] = l);
+	let u;
+	o[4] === c ? u = o[5] : (u = n(t.navList, c), o[4] = c, o[5] = u);
+	let d;
+	o[6] === s ? d = o[7] : (d = /* @__PURE__ */ i(e, {
+		as: "ul",
+		className: t.list,
+		role: "list",
+		children: s
+	}), o[6] = s, o[7] = d);
+	let f;
+	return o[8] !== l || o[9] !== u || o[10] !== d ? (f = /* @__PURE__ */ i(e, {
+		...l,
+		as: "nav",
+		className: u,
+		children: d
+	}), o[8] = l, o[9] = u, o[10] = d, o[11] = f) : f = o[11], f;
+}
+//#endregion
+export { a as NavList };

package/dist/components/NavList/NavList.module.js

@@ -0,0 +1,12 @@
+import './NavList.css';//#region src/components/NavList/NavList.module.css
+var e = "sui-navList-MII8M", t = "sui-list-oNLze", n = "sui-group-18cks", r = "sui-groupTitle-Ftg7C", i = "sui-item-2Rc1V", a = "sui-label-WQWVq", o = "sui-trailing-g7A1F", s = {
+	navList: e,
+	list: t,
+	group: n,
+	groupTitle: r,
+	item: i,
+	label: a,
+	trailing: o
+};
+//#endregion
+export { s as default, n as group, r as groupTitle, i as item, a as label, t as list, e as navList, o as trailing };

package/dist/components/NavList/NavListGroup.d.ts

@@ -0,0 +1,25 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+import type { HeadingLevel } from "../Heading";
+/**
+ * Props for `NavListGroup`: its own props plus every `li` prop except `dangerouslySetInnerHTML` and `title`
+ */
+export interface NavListGroupProps extends Omit<BoxProps<"li">, "as" | "dangerouslySetInnerHTML" | "title"> {
+    /**
+     * The group's heading level, which the page outline decides: in a sidebar beside the page's `h1`, usually 2
+     */
+    headingLevel: HeadingLevel;
+    /**
+     * The group's heading, which also names its list
+     */
+    title: ReactNode;
+}
+/**
+ * A titled group of `NavListItem`s inside a `NavList`
+ *
+ * @example
+ * <NavListGroup headingLevel={2} title="For review">
+ *   <NavListItem href="/needs-you">Needs you</NavListItem>
+ * </NavListGroup>
+ */
+export declare function NavListGroup({ children, className, headingLevel, title, ...rest }: NavListGroupProps): JSX.Element;

package/dist/components/NavList/NavListGroup.js

@@ -0,0 +1,40 @@
+import { Box as e } from "../Box/Box.js";
+import { Heading as t } from "../Heading/Heading.js";
+import n from "./NavList.module.js";
+import { clsx as r } from "clsx";
+import { useId as i } from "react";
+import { c as a } from "react/compiler-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/NavList/NavListGroup.tsx
+function c(c) {
+	let l = a(20), u, d, f, p, m;
+	l[0] === c ? (u = l[1], d = l[2], f = l[3], p = l[4], m = l[5]) : ({children: u, className: d, headingLevel: f, title: m, ...p} = c, l[0] = c, l[1] = u, l[2] = d, l[3] = f, l[4] = p, l[5] = m);
+	let h = i(), g;
+	l[6] === d ? g = l[7] : (g = r(n.group, d), l[6] = d, l[7] = g);
+	let _;
+	l[8] !== h || l[9] !== f || l[10] !== m ? (_ = /* @__PURE__ */ o(t, {
+		className: n.groupTitle,
+		id: h,
+		level: f,
+		size: "xs",
+		tone: "muted",
+		children: m
+	}), l[8] = h, l[9] = f, l[10] = m, l[11] = _) : _ = l[11];
+	let v;
+	l[12] !== u || l[13] !== h ? (v = /* @__PURE__ */ o(e, {
+		as: "ul",
+		className: n.list,
+		role: "list",
+		"aria-labelledby": h,
+		children: u
+	}), l[12] = u, l[13] = h, l[14] = v) : v = l[14];
+	let y;
+	return l[15] !== p || l[16] !== g || l[17] !== _ || l[18] !== v ? (y = /* @__PURE__ */ s(e, {
+		...p,
+		as: "li",
+		className: g,
+		children: [_, v]
+	}), l[15] = p, l[16] = g, l[17] = _, l[18] = v, l[19] = y) : y = l[19], y;
+}
+//#endregion
+export { c as NavListGroup };

package/dist/components/NavList/NavListItem.d.ts

@@ -0,0 +1,53 @@
+import type { ComponentPropsWithRef, JSX, JSXElementConstructor, ReactNode } from "react";
+/**
+ * What a `NavListItem` can render: a link, a button for switching views, or a component that renders an anchor, such
+ * as a router's link
+ */
+export type NavListItemElement = "a" | "button" | JSXElementConstructor<never>;
+interface NavListItemOwnProps {
+    /**
+     * The label. It is never a render function, even when the component given in `as` takes one, because the item
+     * renders it inside a `span`.
+     */
+    children?: ReactNode;
+    /**
+     * Shown after the label, such as a `Counter`. A space separates it from the label, so it is read after it.
+     */
+    trailing?: ReactNode;
+}
+interface NavListItemElementOwnProps<E extends NavListItemElement> {
+    /**
+     * What to render: `a`, `button`, or a component that renders an anchor. Defaults to `a`.
+     */
+    as?: E;
+    /**
+     * Class names merged with the item's base class
+     */
+    className?: string;
+}
+type PropsOnlyOn<Element extends "a" | "button", Other extends "a" | "button"> = {
+    [Name in Exclude<keyof ComponentPropsWithRef<Element>, keyof ComponentPropsWithRef<Other>>]?: never;
+};
+type NavListItemElementProps<E extends NavListItemElement> = E extends JSXElementConstructor<infer Props> ? Props : E extends "button" ? ComponentPropsWithRef<"button"> & PropsOnlyOn<"a", "button"> : ComponentPropsWithRef<"a"> & PropsOnlyOn<"button", "a">;
+type OmitFromEach<Props, Name extends PropertyKey> = Props extends unknown ? Omit<Props, Name> : never;
+/**
+ * Props for `NavListItem`: `children` and `trailing` plus every other prop of the link, button or component given in
+ * `as`, except `dangerouslySetInnerHTML`. When `as` may be either a link or a button, only props both accept are
+ * allowed.
+ */
+export type NavListItemProps<E extends NavListItemElement = "a"> = E extends NavListItemElement ? NavListItemPropsFor<E> : never;
+type NavListItemPropsFor<E extends NavListItemElement> = NavListItemOwnProps & NavListItemElementOwnProps<E> & OmitFromEach<NavListItemElementProps<E>, "dangerouslySetInnerHTML" | keyof NavListItemOwnProps | keyof NavListItemElementOwnProps<E>>;
+/**
+ * One item in a `NavList`. Every prop but `children` and `trailing` goes to the link, button or component given in
+ * `as`, not the list item around it. A component given in `as` must pass the `className` it is given on to its anchor,
+ * or the item is unstyled. Mark the current item with `aria-current` (`"page"` for a link, `"true"` for a view
+ * switched by a button).
+ *
+ * @example
+ * <NavListItem href="/needs-you" trailing={<Counter count={3} />} aria-current="page">Needs you</NavListItem>
+ *
+ * @example
+ * <NavListItem as="button" onClick={() => setView("mine")} aria-current={view === "mine"}>Mine</NavListItem>
+ */
+export declare function NavListItem<E extends NavListItemElement = "a">({ as, children, className, trailing, ...rest }: NavListItemProps<E>): JSX.Element;
+export {};

package/dist/components/NavList/NavListItem.js

@@ -0,0 +1,57 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./NavList.module.js";
+import { clsx as r } from "clsx";
+import { c as i } from "react/compiler-runtime";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/NavList/NavListItem.tsx
+function c(c) {
+	let u = i(15), d, f, p;
+	if (u[0] !== c) {
+		let { as: i, children: m, className: h, trailing: g, ..._ } = c, v = r(n.item, h), y;
+		u[4] === m ? y = u[5] : (y = /* @__PURE__ */ o(t, {
+			as: "span",
+			className: n.label,
+			children: m
+		}), u[4] = m, u[5] = y);
+		let b;
+		u[6] === g ? b = u[7] : (b = e(g) && /* @__PURE__ */ s(a, { children: [" ", /* @__PURE__ */ o(t, {
+			as: "span",
+			className: n.trailing,
+			children: g
+		})] }), u[6] = g, u[7] = b);
+		let x;
+		u[8] !== y || u[9] !== b ? (x = /* @__PURE__ */ s(a, { children: [y, b] }), u[8] = y, u[9] = b, u[10] = x) : x = u[10];
+		let S = x;
+		d = t, f = "li", p = l(i, v, S, _), u[0] = c, u[1] = d, u[2] = f, u[3] = p;
+	} else d = u[1], f = u[2], p = u[3];
+	let m;
+	return u[11] !== d || u[12] !== f || u[13] !== p ? (m = /* @__PURE__ */ o(d, {
+		as: f,
+		children: p
+	}), u[11] = d, u[12] = f, u[13] = p, u[14] = m) : m = u[14], m;
+}
+function l(e, n, r, i) {
+	if (e === "button") {
+		let { type: e = "button", ...a } = i;
+		return /* @__PURE__ */ o(t, {
+			...a,
+			as: "button",
+			className: n,
+			type: e,
+			children: r
+		});
+	}
+	return e === void 0 || e === "a" ? /* @__PURE__ */ o(t, {
+		...i,
+		as: "a",
+		className: n,
+		children: r
+	}) : /* @__PURE__ */ o(e, {
+		...i,
+		className: n,
+		children: r
+	});
+}
+//#endregion
+export { c as NavListItem };

package/dist/components/NavList/index.d.ts

@@ -0,0 +1,6 @@
+export { NavList } from "./NavList";
+export type { NavListProps } from "./NavList";
+export { NavListGroup } from "./NavListGroup";
+export type { NavListGroupProps } from "./NavListGroup";
+export { NavListItem } from "./NavListItem";
+export type { NavListItemElement, NavListItemProps } from "./NavListItem";

package/dist/components/Overlay/Overlay.css

@@ -0,0 +1 @@
+:where(.sui-overlay-EkbfA){margin:var(--sui-space-2,.5rem);color:inherit;background:0 0;border:0;padding:0;inset:auto;overflow:visible}.sui-overlay-EkbfA[data-placement=top]{justify-self:anchor-center;position-area:top;position-try-fallbacks:flip-block}.sui-overlay-EkbfA[data-placement=bottom]{justify-self:anchor-center;position-area:bottom;position-try-fallbacks:flip-block}.sui-overlay-EkbfA[data-placement=start]{align-self:anchor-center;position-area:self-inline-start;position-try-fallbacks:flip-inline}.sui-overlay-EkbfA[data-placement=end]{align-self:anchor-center;position-area:self-inline-end;position-try-fallbacks:flip-inline}.sui-overlay-EkbfA[data-placement$=-start]{margin-inline-start:0}.sui-overlay-EkbfA[data-placement$=-end]{margin-inline-end:0}.sui-overlay-EkbfA:is([data-placement$=-start],[data-placement$=-end]){position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline}.sui-overlay-EkbfA[data-placement=top-start]{position-area:self-block-start span-self-inline-end}.sui-overlay-EkbfA[data-placement=top-end]{position-area:self-block-start span-self-inline-start}.sui-overlay-EkbfA[data-placement=bottom-start]{position-area:self-block-end span-self-inline-end}.sui-overlay-EkbfA[data-placement=bottom-end]{position-area:self-block-end span-self-inline-start}

package/dist/components/Overlay/Overlay.d.ts

@@ -0,0 +1,33 @@
+import type { JSX } from "react";
+import type { OverlayPlacement } from "../../overlays";
+import type { BoxProps } from "../Box";
+interface OverlayOwnProps {
+    /**
+     * `anchor-name` of the trigger the overlay is positioned against
+     */
+    anchorName: string;
+    /**
+     * Element to render: a `span` for text-only content that may sit inside a paragraph, or a `div`
+     */
+    as: "div" | "span";
+    /**
+     * Whether the overlay is shown
+     */
+    open: boolean;
+    /**
+     * Side of the trigger the overlay opens on. It flips to the opposite side when there is no room.
+     */
+    placement: OverlayPlacement;
+    /**
+     * How the overlay closes: `auto` also closes on Escape, on a click outside and when another `auto` overlay opens;
+     * `manual` only when `open` turns false
+     */
+    popover: "auto" | "manual";
+}
+type OverlayProps = OverlayOwnProps & Omit<BoxProps<"span">, "as" | "popover" | "ref" | keyof OverlayOwnProps>;
+/**
+ * Floating surface shared by the overlay components. It shows in the top layer beside its trigger but stays in place
+ * in the DOM, so it inherits the theme and mode around it.
+ */
+export declare function Overlay({ anchorName, as, className, open, placement, popover, style, ...rest }: OverlayProps): JSX.Element;
+export {};

package/dist/components/Overlay/Overlay.js

@@ -0,0 +1,36 @@
+import { Box as e } from "../Box/Box.js";
+import { syncPopover as t } from "../../overlays/syncPopover.js";
+import n from "./Overlay.module.js";
+import { clsx as r } from "clsx";
+import { useEffect as i, useRef as a } from "react";
+import { c as o } from "react/compiler-runtime";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/Overlay/Overlay.tsx
+function c(c) {
+	let l = o(24), u, d, f, p, m, h, g, _;
+	l[0] === c ? (u = l[1], d = l[2], f = l[3], p = l[4], m = l[5], h = l[6], g = l[7], _ = l[8]) : ({anchorName: u, as: d, className: f, open: p, placement: m, popover: h, style: _, ...g} = c, l[0] = c, l[1] = u, l[2] = d, l[3] = f, l[4] = p, l[5] = m, l[6] = h, l[7] = g, l[8] = _);
+	let v = a(null), y, b;
+	l[9] === p ? (y = l[10], b = l[11]) : (y = () => {
+		let e = v.current;
+		if (e !== null && "showPopover" in e) return t(e, p);
+	}, b = [p], l[9] = p, l[10] = y, l[11] = b), i(y, b);
+	let x = d, S;
+	l[12] === f ? S = l[13] : (S = r(n.overlay, f), l[12] = f, l[13] = S);
+	let C;
+	l[14] !== u || l[15] !== _ ? (C = {
+		..._,
+		positionAnchor: u
+	}, l[14] = u, l[15] = _, l[16] = C) : C = l[16];
+	let w;
+	return l[17] !== m || l[18] !== h || l[19] !== g || l[20] !== x || l[21] !== S || l[22] !== C ? (w = /* @__PURE__ */ s(e, {
+		...g,
+		as: x,
+		className: S,
+		popover: h,
+		ref: v,
+		style: C,
+		"data-placement": m
+	}), l[17] = m, l[18] = h, l[19] = g, l[20] = x, l[21] = S, l[22] = C, l[23] = w) : w = l[23], w;
+}
+//#endregion
+export { c as Overlay };

package/dist/components/Overlay/Overlay.module.js

@@ -0,0 +1,4 @@
+import './Overlay.css';//#region src/components/Overlay/Overlay.module.css
+var e = "sui-overlay-EkbfA", t = { overlay: e };
+//#endregion
+export { t as default, e as overlay };

package/dist/components/Overlay/index.d.ts

@@ -0,0 +1 @@
+export { Overlay } from "./Overlay";

package/dist/components/PageLayout/PageLayout.css

@@ -0,0 +1 @@
+.sui-pageLayout-5SkLH{gap:var(--sui-page-layout-gap);flex-direction:column;min-block-size:100dvh;display:flex}.sui-pageLayout-5SkLH>main{flex-grow:1}

package/dist/components/PageLayout/PageLayout.d.ts

@@ -0,0 +1,26 @@
+import type { JSX } from "react";
+import type { Space } from "../../layout";
+import type { BoxElement, BoxProps } from "../Box";
+interface PageLayoutOwnProps {
+    /**
+     * Space between the page regions. Defaults to `0`.
+     */
+    gap?: Space;
+}
+/**
+ * Props for `PageLayout`: its own props plus every prop supported by the element given in `as`
+ */
+export type PageLayoutProps<E extends BoxElement = "div"> = PageLayoutOwnProps & Omit<BoxProps<E>, keyof PageLayoutOwnProps>;
+/**
+ * Full-height page shell that keeps the footer at the bottom of short pages. Pass the page
+ * regions as direct children; a direct `main` child grows to fill the free space.
+ *
+ * @example
+ * <PageLayout>
+ *   <header>...</header>
+ *   <main>...</main>
+ *   <footer>...</footer>
+ * </PageLayout>
+ */
+export declare function PageLayout<E extends BoxElement = "div">({ as, className, gap, ...rest }: PageLayoutProps<E>): JSX.Element;
+export {};

package/dist/components/PageLayout/PageLayout.js

@@ -0,0 +1,18 @@
+import { Box as e } from "../Box/Box.js";
+import { spaceValue as t } from "../../layout/spaceValue.js";
+import { withCustomProperties as n } from "../../layout/withCustomProperties.js";
+import r from "./PageLayout.module.js";
+import { clsx as i } from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/PageLayout/PageLayout.tsx
+function o({ as: o, className: s, gap: c = 0, ...l }) {
+	let { style: u, ...d } = l;
+	return /* @__PURE__ */ a(e, {
+		...d,
+		as: o,
+		className: i(r.pageLayout, s),
+		style: n({ "--sui-page-layout-gap": t(c) }, u)
+	});
+}
+//#endregion
+export { o as PageLayout };

package/dist/components/PageLayout/PageLayout.module.js

@@ -0,0 +1,4 @@
+import './PageLayout.css';//#region src/components/PageLayout/PageLayout.module.css
+var e = "sui-pageLayout-5SkLH", t = { pageLayout: e };
+//#endregion
+export { t as default, e as pageLayout };

package/dist/components/PageLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { PageLayout } from "./PageLayout";
+export type { PageLayoutProps } from "./PageLayout";

package/dist/components/Popover/Popover.css

@@ -0,0 +1 @@
+.sui-popover-E9K9X{max-inline-size:var(--sui-popover-max-width,20rem);padding:var(--sui-space-3,.75rem);border:var(--sui-border-width,1px) solid var(--sui-color-border,#d1d5db);border-radius:var(--sui-radius-lg,8px);background-color:var(--sui-color-overlay,#fff);box-shadow:var(--sui-shadow-sm,0 1px 3px #0000001f);color:var(--sui-color-text,#111827);font-family:var(--sui-font-body,system-ui, sans-serif);font-size:var(--sui-font-size-sm,.875rem);line-height:var(--sui-line-height-normal,1.5);transition:opacity .12s ease-out, translate var(--sui-motion-spring,.12s ease-out)}@starting-style{.sui-popover-E9K9X{opacity:0}.sui-popover-E9K9X[data-placement^=top]{translate:0 var(--sui-popover-offset,4px)}.sui-popover-E9K9X[data-placement^=bottom]{translate:0 calc(var(--sui-popover-offset,4px) * -1)}.sui-popover-E9K9X[data-placement=start]{translate:var(--sui-popover-offset,4px) 0}.sui-popover-E9K9X[data-placement=end],.sui-popover-E9K9X[data-placement=start]:dir(rtl){translate:calc(var(--sui-popover-offset,4px) * -1) 0}.sui-popover-E9K9X[data-placement=end]:dir(rtl){translate:var(--sui-popover-offset,4px) 0}}@media (prefers-reduced-motion:reduce){.sui-popover-E9K9X{transition:opacity .12s ease-out}}