@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/NavBar/renderNavBarLink.d.ts

@@ -0,0 +1,12 @@
+import type { JSX, ReactNode } from "react";
+import type { LinkElement } from "../Link";
+/**
+ * Renders the link a `NavBar` entry's `as` names
+ *
+ * @param as the anchor or component to render, or undefined for an anchor
+ * @param className the entry's class names
+ * @param content what the link holds
+ * @param props every other prop the entry was given for its link
+ * @returns the link
+ */
+export declare function renderNavBarLink(as: LinkElement | undefined, className: string, content: ReactNode, props: object): JSX.Element;

package/dist/components/NavBar/renderNavBarLink.js

@@ -0,0 +1,16 @@
+import { Box as e } from "../Box/Box.js";
+import { jsx as t } from "react/jsx-runtime";
+// src/components/NavBar/renderNavBarLink.tsx
+function n(n, r, i, a) {
+	return n === void 0 || n === "a" ? /* @__PURE__ */ t(e, {
+		...a,
+		as: "a",
+		className: r,
+		children: i
+	}) : /* @__PURE__ */ t(n, {
+		...a,
+		className: r,
+		children: i
+	});
+}
+export { n as renderNavBarLink };

package/dist/components/NavBar/useLayoutSwitch.d.ts

@@ -0,0 +1,26 @@
+import type { RefObject } from "react";
+interface UseLayoutSwitchOptions {
+    /**
+     * The bar's collapse width, a change of which can switch the layout with no resize
+     */
+    collapse: string;
+    /**
+     * The bar's layout, whose resizes are watched
+     */
+    layoutRef: RefObject<HTMLElement | null>;
+    /**
+     * The bar's navigation, whose layout is read
+     */
+    navigationRef: RefObject<HTMLElement | null>;
+    /**
+     * Called each time the bar switches between its wide and collapsed layouts
+     */
+    onSwitch: () => void;
+}
+/**
+ * Reports a `NavBar` switching between its wide and collapsed layouts, from a resize or a new collapse width
+ *
+ * @param options the bar's collapse width, its layout and navigation, and what to call on a switch
+ */
+export declare function useLayoutSwitch({ collapse, layoutRef, navigationRef, onSwitch }: UseLayoutSwitchOptions): void;
+export {};

package/dist/components/NavBar/useLayoutSwitch.js

@@ -0,0 +1,25 @@
+import { isNavBarCollapsed as e } from "./isNavBarCollapsed.js";
+import { useEffect as t, useEffectEvent as n, useRef as r } from "react";
+import { c as i } from "react/compiler-runtime";
+// src/components/NavBar/useLayoutSwitch.ts
+function a(a) {
+	let o = i(8), { collapse: s, layoutRef: c, navigationRef: l, onSwitch: u } = a, d = r(null), f = n(u), p;
+	o[0] !== c || o[1] !== l || o[2] !== f ? (p = () => {
+		let t = c.current, n = l.current;
+		if (t === null || n === null) return;
+		let r = () => {
+			let t = e(n);
+			d.current !== null && d.current !== t && f(), d.current = t;
+		};
+		if (r(), typeof ResizeObserver > "u") return;
+		let i = new ResizeObserver(r);
+		return i.observe(t), () => i.disconnect();
+	}, o[0] = c, o[1] = l, o[2] = f, o[3] = p) : p = o[3];
+	let m;
+	o[4] !== s || o[5] !== c || o[6] !== l ? (m = [
+		s,
+		c,
+		l
+	], o[4] = s, o[5] = c, o[6] = l, o[7] = m) : m = o[7], t(p, m);
+}
+export { a as useLayoutSwitch };

package/dist/components/NavBar/useNavBarContext.d.ts

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

package/dist/components/NavBar/useNavBarContext.js

@@ -0,0 +1,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { NavBarContext as t } from "./NavBarContext.js";
+import { useContext as n } from "react";
+// src/components/NavBar/useNavBarContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "NavBar");
+	return i;
+}
+export { r as useNavBarContext };

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,27 @@
+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";
+// 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;
+}
+export { a as NavList };

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

@@ -0,0 +1,11 @@
+import './NavList.css';// 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
+};
+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,39 @@
+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";
+// 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;
+}
+export { c as NavListGroup };

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

@@ -0,0 +1,49 @@
+import type { JSX, ReactNode } from "react";
+import type { LinkOrButtonElement, LinkOrButtonProps } from "../../links";
+/**
+ * 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 = LinkOrButtonElement;
+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;
+}
+/**
+ * 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> & LinkOrButtonProps<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,56 @@
+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";
+// 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
+	});
+}
+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,35 @@
+import { syncPopover as e } from "../../overlays/syncPopover.js";
+import { Box as t } from "../Box/Box.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";
+// 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 t = v.current;
+		if (t !== null && "showPopover" in t) return e(t, 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(t, {
+		...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;
+}
+export { c as Overlay };

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

@@ -0,0 +1,3 @@
+import './Overlay.css';// src/components/Overlay/Overlay.module.css
+var e = "sui-overlay-EkbfA", t = { overlay: e };
+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,17 @@
+import { spaceValue as e } from "../../layout/spaceValue.js";
+import { withCustomProperties as t } from "../../layout/withCustomProperties.js";
+import { Box as n } from "../Box/Box.js";
+import r from "./PageLayout.module.js";
+import { clsx as i } from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+// src/components/PageLayout/PageLayout.tsx
+function o({ as: o, className: s, gap: c = 0, ...l }) {
+	let { style: u, ...d } = l;
+	return /* @__PURE__ */ a(n, {
+		...d,
+		as: o,
+		className: i(r.pageLayout, s),
+		style: t({ "--sui-page-layout-gap": e(c) }, u)
+	});
+}
+export { o as PageLayout };

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

@@ -0,0 +1,3 @@
+import './PageLayout.css';// src/components/PageLayout/PageLayout.module.css
+var e = "sui-pageLayout-5SkLH", t = { pageLayout: e };
+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}}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,52 @@
+import type { JSX, ToggleEventHandler } from "react";
+import type { OverlayPlacement } from "../../overlays";
+import type { BoxProps } from "../Box";
+/**
+ * Props `getOverlayProps` from `usePopover` returns, which every `Popover` takes
+ */
+export interface PopoverOverlayProps {
+    /**
+     * `anchor-name` of the trigger the popover is positioned against. From `getOverlayProps`.
+     */
+    anchorName: string;
+    /**
+     * The popover's id, which the trigger's `popoverTarget` and `aria-controls` point at. From `getOverlayProps`.
+     */
+    id: string;
+    /**
+     * Cancels an opening the parent of a controlled popover has not asked for. From `getOverlayProps`.
+     */
+    onBeforeToggle: ToggleEventHandler<HTMLElement>;
+    /**
+     * Keeps the hook's state in step with the browser. From `getOverlayProps`.
+     */
+    onToggle: ToggleEventHandler<HTMLElement>;
+    /**
+     * Whether the popover is shown. From `getOverlayProps`.
+     */
+    open: boolean;
+    /**
+     * Side of the trigger the popover opens on. From `getOverlayProps`.
+     */
+    placement: OverlayPlacement;
+}
+/**
+ * Props for `Popover`: the props `getOverlayProps` returns plus every `div` prop except `popover` and `ref`
+ */
+export interface PopoverProps extends PopoverOverlayProps, Omit<BoxProps<"div">, "as" | "popover" | "ref" | keyof PopoverOverlayProps> {
+}
+/**
+ * A surface that opens beside a button and holds more content than a tooltip can, such as a short list or a few
+ * actions. `usePopover` connects the two: spread `getTriggerProps()` on a `Button` or `IconButton` and
+ * `getOverlayProps()` on the popover, inside the same `Theme`. It closes on Escape and on a click outside. Closing it
+ * with focus inside gives focus back to what had it before it opened, usually the button, or to the button when the
+ * browser leaves it on the page, and `usePopover`'s `initialFocus` moves focus in as it opens. It has no role of its
+ * own: give it `role="dialog"` and a name when it holds a form or asks for confirmation.
+ *
+ * @example
+ * const popover = usePopover({ placement: "top" });
+ *
+ * <Button {...popover.getTriggerProps()} variant="ghost">2 problems</Button>
+ * <Popover {...popover.getOverlayProps()}>…</Popover>
+ */
+export declare function Popover({ className, ...rest }: PopoverProps): JSX.Element;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,20 @@
+import { Overlay as e } from "../Overlay/Overlay.js";
+import t from "./Popover.module.js";
+import { clsx as n } from "clsx";
+import { c as r } from "react/compiler-runtime";
+import { jsx as i } from "react/jsx-runtime";
+// src/components/Popover/Popover.tsx
+function a(a) {
+	let o = r(8), s, c;
+	o[0] === a ? (s = o[1], c = o[2]) : ({className: s, ...c} = a, o[0] = a, o[1] = s, o[2] = c);
+	let l;
+	o[3] === s ? l = o[4] : (l = n(t.popover, s), o[3] = s, o[4] = l);
+	let u;
+	return o[5] !== c || o[6] !== l ? (u = /* @__PURE__ */ i(e, {
+		...c,
+		as: "div",
+		className: l,
+		popover: "auto"
+	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
+}
+export { a as Popover };

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

@@ -0,0 +1,3 @@
+import './Popover.css';// src/components/Popover/Popover.module.css
+var e = "sui-popover-E9K9X", t = { popover: e };
+export { t as default, e as popover };

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

@@ -0,0 +1,4 @@
+export { Popover } from "./Popover";
+export type { PopoverProps } from "./Popover";
+export { usePopover } from "./usePopover";
+export type { UsePopoverOptions, UsePopoverResult } from "./usePopover";