@lar-works/design-system 0.2.1 → 0.3.0

package/dist/feedback/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","names":["Loading","NinnaLoading"],"sources":["../../src/feedback/Loading.tsx"],"sourcesContent":["import { Loading as NinnaLoading, type LoadingProps as NinnaLoadingProps } from '@ninna-ui/feedback';\nimport { LoaderCircleIcon, type LucideProps } from 'lucide-react';\nimport { forwardRef } from 'react';\n\nimport { ambientMotion } from '../foundations/AmbientMotion';\n\nconst motions = {\n    spin: 'motion-safe:animate-spin',\n    always: 'animate-spin',\n    status: 'status-spin',\n    still: '',\n} as const;\n\ntype SpinnerIconProps = LucideProps & {\n    /** The spin: `spin` turns unless the user prefers reduced motion, `always` turns regardless, as a pending action's\n     *  does, `status` is a status glyph's own spin (its page defines `status-spin`), and `still` doesn't turn. */\n    motion?: keyof typeof motions;\n};\n\n/**\n * The loader icon, spinning on a box around it: above a device scale of 1 Chromium can't run a root svg's transform on\n * the compositor, so the page would render every frame. It pauses while out of view or in a hidden window.\n */\nexport function SpinnerIcon({ motion = 'spin', ...icon }: SpinnerIconProps) {\n    const spin = motions[motion];\n\n    return (\n        <span ref={spin ? ambientMotion : undefined} className={`flex w-fit shrink-0 ${spin}`}>\n            <LoaderCircleIcon {...icon} />\n        </span>\n    );\n}\n\ntype LoadingProps = Omit<NinnaLoadingProps, 'title'> & {\n    /** What loads. Without a `presentation` it names ninna-ui's spinner for screen readers only; with one it shows\n     *  beside the spinner. */\n    label?: string;\n    /** With no label, names the spinner alone, as a cue beside values already shown. */\n    title?: string | undefined;\n    /** Stops it spinning. */\n    still?: boolean;\n    /** Without it, ninna-ui's announced spinner. `inline` is a small spinner and what loads in a line of 12px text;\n     *  `line` stands on its own line of body text; `status` is a step's own loading line, announced, muted body text\n     *  with room above and below that keeps turning as a pending action's spinner does. */\n    presentation?: 'inline' | 'line' | 'status';\n};\n\n/** What shows in place of something still loading: ninna-ui's announced spinner, or with a `presentation`, a small\n *  spinner, still under reduced motion, and what loads. */\nexport const Loading = forwardRef<HTMLDivElement, LoadingProps>(\n    ({ presentation, label, title, still = false, ...props }, ref) => {\n        if (!presentation) return <NinnaLoading ref={ref} label={label} title={title} {...props} />;\n\n        if (presentation === 'status')\n            return (\n                <p role=\"status\" className=\"text-base-700 m-0 flex items-center gap-2 py-4 text-sm\">\n                    <SpinnerIcon motion={still ? 'still' : 'always'} aria-hidden=\"true\" className=\"size-4\" />\n                    {label}\n                </p>\n            );\n\n        return (\n            <span data-loader className=\"inline-flex min-w-0 items-center gap-1.5\" title={title}>\n                <SpinnerIcon\n                    motion={still ? 'still' : 'spin'}\n                    aria-hidden=\"true\"\n                    className={presentation === 'line' ? 'size-4' : 'size-3'}\n                />\n                {label ? <span className=\"truncate\">{label}</span> : title && <span className=\"sr-only\">{title}</span>}\n            </span>\n        );\n    },\n);\n\nLoading.displayName = 'Loading';\n"],"mappings":";;;;;;AAMA,MAAM,UAAU;CACZ,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,OAAO;AACX;;;;;AAYA,SAAgB,YAAY,EAAE,SAAS,QAAQ,GAAG,QAA0B;CACxE,MAAM,OAAO,QAAQ;CAErB,OACI,oBAAC,QAAD;EAAM,KAAK,OAAO,gBAAgB,KAAA;EAAW,WAAW,uBAAuB;EAC3E,UAAA,oBAAC,kBAAD,EAAkB,GAAI,KAAO,CAAA;CAC3B,CAAA;AAEd;;;AAkBA,MAAaA,YAAU,YAClB,EAAE,cAAc,OAAO,OAAO,QAAQ,OAAO,GAAG,SAAS,QAAQ;CAC9D,IAAI,CAAC,cAAc,OAAO,oBAACC,SAAD;EAAmB;EAAY;EAAc;EAAO,GAAI;CAAQ,CAAA;CAE1F,IAAI,iBAAiB,UACjB,OACI,qBAAC,KAAD;EAAG,MAAK;EAAS,WAAU;EAA3B,UAAA,CACI,oBAAC,aAAD;GAAa,QAAQ,QAAQ,UAAU;GAAU,eAAY;GAAO,WAAU;EAAU,CAAA,GACvF,KACF;;CAGX,OACI,qBAAC,QAAD;EAAM,eAAA;EAAY,WAAU;EAAkD;EAA9E,UAAA,CACI,oBAAC,aAAD;GACI,QAAQ,QAAQ,UAAU;GAC1B,eAAY;GACZ,WAAW,iBAAiB,SAAS,WAAW;EACnD,CAAA,GACA,QAAQ,oBAAC,QAAD;GAAM,WAAU;GAAY,UAAA;EAAY,CAAA,IAAI,SAAS,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA,CACnG;;AAEd,CACJ;AAEA,UAAQ,cAAc"}

package/dist/feedback/Notifications.d.ts

@@ -1,2 +1,36 @@
-export declare function Notifications(): import("react").JSX.Element;
+import { ReactNode } from "react";
+/**
+ * The page's notifications. `corner` shows a few at a time in the bottom right corner. `stack` keeps every one, oldest
+ * above the newest, above every dialog: when they don't fit, the stack scrolls, follows the newest while you are at the
+ * bottom, and fades those scrolled past at its edges, as a Modal's body does. Mount one, once, outside the page's root.
+ */
+export declare function Notifications({ presentation }: {
+  presentation?: 'corner' | 'stack';
+}): import("react").JSX.Element;
+export interface Notification {
+  /** One notification per slot: a new one replaces the last. */
+  slot: string;
+  /** A failure is red and stays until it's closed; a success is green and clears itself five seconds after the
+   *  pointer and the keyboard focus leave it. */
+  tone?: 'success' | 'danger';
+  /** Names the close button, such as "Dismiss: Moved #61". */
+  dismissLabel: string;
+  /** What it says: text, links and buttons. */
+  body: ReactNode;
+  /** Called after it closes while the keyboard focus was inside it, to put the focus somewhere useful. */
+  onFocusLost?: () => void;
+}
+interface NotificationControls {
+  /** Keeps a success from clearing itself while `held`, such as while an action it offers is under way. */
+  hold: (held: boolean) => void;
+  /** Shows a success as a failure while `failed`, such as when an action it offers failed. */
+  fail: (failed: boolean) => void;
+}
+/** For a notification's body: what it can change about the notification it sits in. */
+export declare function useNotificationControls(): NotificationControls;
+/** Shows `notification` in its slot, replacing the one there. */
+export declare function showNotification(notification: Notification): void;
+/** Closes whatever notification holds this slot. */
+export declare function clearNotification(slot: string): void;
+export {};
 //# sourceMappingURL=Notifications.d.ts.map

package/dist/feedback/Notifications.js

@@ -1,9 +1,201 @@
-import { jsx } from "react/jsx-runtime";
-import { Toaster } from "@ninna-ui/feedback";
+import { DismissButton } from "./DismissButton.js";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Toaster, toast } from "@ninna-ui/feedback";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
 // src/feedback/Notifications.tsx
-function Notifications() {
+/** How long a success stays once the pointer and the focus have left it. */
+const SUCCESS_MS = 5e3;
+/** Each notification's fade, as wide as a Modal body's: notifications scrolled past fade out at the stack's edges. */
+const FADE_PX = 24;
+/**
+* The page's notifications. `corner` shows a few at a time in the bottom right corner. `stack` keeps every one, oldest
+* above the newest, above every dialog: when they don't fit, the stack scrolls, follows the newest while you are at the
+* bottom, and fades those scrolled past at its edges, as a Modal's body does. Mount one, once, outside the page's root.
+*/
+function Notifications({ presentation = "corner" }) {
+	if (presentation === "stack") return /* @__PURE__ */ jsx(Toaster, {
+		ref: followNewest,
+		position: "bottom-right",
+		max: Infinity,
+		className: "notification-stack",
+		offset: "calc(var(--spacing) * 1)"
+	});
 	return /* @__PURE__ */ jsx(Toaster, { position: "bottom-right" });
 }
-export { Notifications };
+/**
+* Follows the newest notification while the user is at the bottom: a new entry, a narrower or shorter window and a
+* notification growing all keep it in view. Once the user scrolls away the stack stays where they left it, until they
+* scroll back. Each notification carries its own slice of the edge fade: a mask on the stack would make it the
+* notifications' backdrop root and cut their blur off from the page behind.
+*/
+function followNewest(viewport) {
+	if (!viewport) return;
+	let following = true;
+	const entries = () => Array.from(viewport.children).filter((el) => el instanceof HTMLElement);
+	const fade = () => {
+		const { scrollTop, scrollHeight, clientHeight } = viewport;
+		const stack = viewport.getBoundingClientRect();
+		const top = Math.min(FADE_PX, Math.max(0, scrollTop));
+		const bottom = Math.min(FADE_PX, Math.max(0, scrollHeight - clientHeight - scrollTop));
+		for (const entry of entries()) {
+			const y = entry.getBoundingClientRect().top - stack.top;
+			entry.style.setProperty("--fade-from", `${-y}px`);
+			entry.style.setProperty("--fade-top", `${top - y}px`);
+			entry.style.setProperty("--fade-bottom", `${stack.height - bottom - y}px`);
+			entry.style.setProperty("--fade-to", `${stack.height - y}px`);
+		}
+	};
+	const toNewest = () => {
+		if (following) viewport.scrollTop = viewport.scrollHeight;
+		fade();
+	};
+	const scrolled = () => {
+		following = viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= 1;
+		fade();
+	};
+	const resizes = new ResizeObserver(toNewest);
+	const observe = () => {
+		resizes.disconnect();
+		resizes.observe(viewport);
+		entries().forEach((entry) => resizes.observe(entry));
+	};
+	const arrivals = new MutationObserver((changes) => {
+		observe();
+		const newest = viewport.lastElementChild;
+		if (changes.some(({ addedNodes }) => Array.from(addedNodes).includes(newest))) toNewest();
+		else fade();
+	});
+	arrivals.observe(viewport, { childList: true });
+	viewport.addEventListener("scroll", scrolled, { passive: true });
+	viewport.addEventListener("animationend", fade);
+	viewport.addEventListener("transitionend", fade);
+	observe();
+	toNewest();
+	return () => {
+		arrivals.disconnect();
+		resizes.disconnect();
+		viewport.removeEventListener("scroll", scrolled);
+		viewport.removeEventListener("animationend", fade);
+		viewport.removeEventListener("transitionend", fade);
+	};
+}
+const Controls = createContext({
+	hold: () => {},
+	fail: () => {}
+});
+/** For a notification's body: what it can change about the notification it sits in. */
+function useNotificationControls() {
+	return useContext(Controls);
+}
+/** The id of the notification in each slot, in the toast manager. */
+const slots = /* @__PURE__ */ new Map();
+/** Forgets every slot, as the toasts they named are gone. */
+function forgetNotificationSlots() {
+	slots.clear();
+}
+/** Closes the notification `id` in `slot`; if the focus was in it, `onFocusLost` puts it somewhere else. */
+function close(slot, id, onFocusLost) {
+	const hadFocus = Boolean(document.querySelector(`[data-toast-id="${id}"]`)?.contains(document.activeElement));
+	flushSync(() => {
+		if (slots.get(slot) === id) slots.delete(slot);
+		toast.dismiss(id);
+	});
+	if (hadFocus) onFocusLost?.();
+}
+/** Shows `notification` in its slot, replacing the one there. */
+function showNotification(notification) {
+	clearNotification(notification.slot);
+	const id = toast.create({
+		color: notification.tone === "danger" ? "danger" : "success",
+		duration: 0,
+		closable: false,
+		description: /* @__PURE__ */ jsx(NotificationBody, {
+			...notification,
+			onClose: () => close(notification.slot, id, notification.onFocusLost)
+		})
+	});
+	slots.set(notification.slot, id);
+}
+/** Closes whatever notification holds this slot. */
+function clearNotification(slot) {
+	const id = slots.get(slot);
+	if (id) close(slot, id);
+}
+/** Gives a success five seconds after hover and keyboard focus leave it. */
+function useSuccessClose(ref, enabled, onClose) {
+	const latest = useRef(onClose);
+	useLayoutEffect(() => {
+		latest.current = onClose;
+	});
+	useEffect(() => {
+		if (!enabled) return;
+		const entry = ref.current?.closest("[data-slot=\"toast\"]");
+		if (!entry) return;
+		const held = {
+			hovered: entry.matches(":hover"),
+			focused: entry.contains(document.activeElement),
+			timer: void 0
+		};
+		const restart = () => {
+			clearTimeout(held.timer);
+			if (!held.hovered && !held.focused) held.timer = setTimeout(() => latest.current(), SUCCESS_MS);
+		};
+		const enter = () => {
+			held.hovered = true;
+			restart();
+		};
+		const leave = () => {
+			held.hovered = false;
+			restart();
+		};
+		const focus = () => {
+			held.focused = true;
+			restart();
+		};
+		const blur = (event) => {
+			held.focused = event.relatedTarget instanceof Node && entry.contains(event.relatedTarget);
+			restart();
+		};
+		entry.addEventListener("mouseenter", enter);
+		entry.addEventListener("mouseleave", leave);
+		entry.addEventListener("focusin", focus);
+		entry.addEventListener("focusout", blur);
+		restart();
+		return () => {
+			clearTimeout(held.timer);
+			entry.removeEventListener("mouseenter", enter);
+			entry.removeEventListener("mouseleave", leave);
+			entry.removeEventListener("focusin", focus);
+			entry.removeEventListener("focusout", blur);
+		};
+	}, [enabled, ref]);
+}
+/** One notification's content. `onClose` runs when its close button is clicked or, for a success, when its time is up. */
+function NotificationBody({ slot, dismissLabel, tone = "success", body, onClose }) {
+	const ref = useRef(null);
+	const [held, setHeld] = useState(false);
+	const [bodyFailed, setBodyFailed] = useState(false);
+	const failed = tone === "danger" || bodyFailed;
+	useEffect(() => {
+		ref.current?.closest("[data-slot=\"toast\"]")?.setAttribute("data-toast-color", failed ? "danger" : "success");
+	}, [failed]);
+	useSuccessClose(ref, !failed && !held, onClose);
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-toast": slot,
+		children: [/* @__PURE__ */ jsx(DismissButton, {
+			label: dismissLabel,
+			onClick: onClose
+		}), /* @__PURE__ */ jsx(Controls.Provider, {
+			value: {
+				hold: setHeld,
+				fail: setBodyFailed
+			},
+			children: body
+		})]
+	});
+}
+export { Notifications, clearNotification, forgetNotificationSlots, showNotification, useNotificationControls };
 
 //# sourceMappingURL=Notifications.js.map

package/dist/feedback/Notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notifications.js","names":[],"sources":["../../src/feedback/Notifications.tsx"],"sourcesContent":["import { Toaster } from '@ninna-ui/feedback';\n\nexport function Notifications() {\n    return <Toaster position=\"bottom-right\" />;\n}\n"],"mappings":";;;AAEA,SAAgB,gBAAgB;CAC5B,OAAO,oBAAC,SAAD,EAAS,UAAS,eAAgB,CAAA;AAC7C"}
+{"version":3,"file":"Notifications.js","names":[],"sources":["../../src/feedback/Notifications.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- The slot functions and the body's controls belong to the toaster. */\n\nimport { toast, Toaster } from '@ninna-ui/feedback';\nimport {\n    createContext,\n    type ReactNode,\n    type RefObject,\n    useContext,\n    useEffect,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { flushSync } from 'react-dom';\n\nimport { DismissButton } from './DismissButton';\n\n/** How long a success stays once the pointer and the focus have left it. */\nconst SUCCESS_MS = 5_000;\n\n/** Each notification's fade, as wide as a Modal body's: notifications scrolled past fade out at the stack's edges. */\nconst FADE_PX = 24;\n\n/**\n * The page's notifications. `corner` shows a few at a time in the bottom right corner. `stack` keeps every one, oldest\n * above the newest, above every dialog: when they don't fit, the stack scrolls, follows the newest while you are at the\n * bottom, and fades those scrolled past at its edges, as a Modal's body does. Mount one, once, outside the page's root.\n */\nexport function Notifications({ presentation = 'corner' }: { presentation?: 'corner' | 'stack' }) {\n    if (presentation === 'stack')\n        return (\n            <Toaster\n                ref={followNewest}\n                position=\"bottom-right\"\n                max={Infinity}\n                className=\"notification-stack\"\n                offset=\"calc(var(--spacing) * 1)\"\n            />\n        );\n\n    return <Toaster position=\"bottom-right\" />;\n}\n\n/**\n * Follows the newest notification while the user is at the bottom: a new entry, a narrower or shorter window and a\n * notification growing all keep it in view. Once the user scrolls away the stack stays where they left it, until they\n * scroll back. Each notification carries its own slice of the edge fade: a mask on the stack would make it the\n * notifications' backdrop root and cut their blur off from the page behind.\n */\nfunction followNewest(viewport: HTMLDivElement | null) {\n    if (!viewport) return;\n\n    let following = true;\n    const entries = () => Array.from(viewport.children).filter((el): el is HTMLElement => el instanceof HTMLElement);\n    const fade = () => {\n        const { scrollTop, scrollHeight, clientHeight } = viewport;\n        const stack = viewport.getBoundingClientRect();\n        const top = Math.min(FADE_PX, Math.max(0, scrollTop));\n        const bottom = Math.min(FADE_PX, Math.max(0, scrollHeight - clientHeight - scrollTop));\n\n        for (const entry of entries()) {\n            const y = entry.getBoundingClientRect().top - stack.top;\n\n            entry.style.setProperty('--fade-from', `${-y}px`);\n            entry.style.setProperty('--fade-top', `${top - y}px`);\n            entry.style.setProperty('--fade-bottom', `${stack.height - bottom - y}px`);\n            entry.style.setProperty('--fade-to', `${stack.height - y}px`);\n        }\n    };\n    const toNewest = () => {\n        if (following) viewport.scrollTop = viewport.scrollHeight;\n\n        fade();\n    };\n    const scrolled = () => {\n        following = viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= 1;\n        fade();\n    };\n    const resizes = new ResizeObserver(toNewest);\n    const observe = () => {\n        resizes.disconnect();\n        resizes.observe(viewport);\n        entries().forEach((entry) => resizes.observe(entry));\n    };\n    const arrivals = new MutationObserver((changes) => {\n        observe();\n\n        const newest = viewport.lastElementChild;\n        const arrived = changes.some(({ addedNodes }) => Array.from(addedNodes).includes(newest as Node));\n\n        // Only a new entry moves the stack; one closing or changing above leaves the user where they are.\n        if (arrived) toNewest();\n        else fade();\n    });\n\n    arrivals.observe(viewport, { childList: true });\n    viewport.addEventListener('scroll', scrolled, { passive: true });\n    // Entering notifications slide in; measure them where they land.\n    viewport.addEventListener('animationend', fade);\n    viewport.addEventListener('transitionend', fade);\n    observe();\n    toNewest();\n\n    return () => {\n        arrivals.disconnect();\n        resizes.disconnect();\n        viewport.removeEventListener('scroll', scrolled);\n        viewport.removeEventListener('animationend', fade);\n        viewport.removeEventListener('transitionend', fade);\n    };\n}\n\nexport interface Notification {\n    /** One notification per slot: a new one replaces the last. */\n    slot: string;\n    /** A failure is red and stays until it's closed; a success is green and clears itself five seconds after the\n     *  pointer and the keyboard focus leave it. */\n    tone?: 'success' | 'danger';\n    /** Names the close button, such as \"Dismiss: Moved #61\". */\n    dismissLabel: string;\n    /** What it says: text, links and buttons. */\n    body: ReactNode;\n    /** Called after it closes while the keyboard focus was inside it, to put the focus somewhere useful. */\n    onFocusLost?: () => void;\n}\n\ninterface NotificationControls {\n    /** Keeps a success from clearing itself while `held`, such as while an action it offers is under way. */\n    hold: (held: boolean) => void;\n    /** Shows a success as a failure while `failed`, such as when an action it offers failed. */\n    fail: (failed: boolean) => void;\n}\n\nconst Controls = createContext<NotificationControls>({ hold: () => {}, fail: () => {} });\n\n/** For a notification's body: what it can change about the notification it sits in. */\nexport function useNotificationControls(): NotificationControls {\n    return useContext(Controls);\n}\n\n/** The id of the notification in each slot, in the toast manager. */\nconst slots = new Map<string, string>();\n\n/** Forgets every slot, as the toasts they named are gone. */\nexport function forgetNotificationSlots(): void {\n    slots.clear();\n}\n\n/** Closes the notification `id` in `slot`; if the focus was in it, `onFocusLost` puts it somewhere else. */\nfunction close(slot: string, id: string, onFocusLost?: () => void): void {\n    const hadFocus = Boolean(document.querySelector(`[data-toast-id=\"${id}\"]`)?.contains(document.activeElement));\n\n    flushSync(() => {\n        if (slots.get(slot) === id) slots.delete(slot);\n\n        toast.dismiss(id);\n    });\n\n    if (hadFocus) onFocusLost?.();\n}\n\n/** Shows `notification` in its slot, replacing the one there. */\nexport function showNotification(notification: Notification): void {\n    clearNotification(notification.slot);\n\n    const id: string = toast.create({\n        color: notification.tone === 'danger' ? 'danger' : 'success',\n        // The body's own clock closes successes and its own button closes every notification, so the manager never does.\n        duration: 0,\n        closable: false,\n        description: (\n            <NotificationBody\n                {...notification}\n                onClose={() => close(notification.slot, id, notification.onFocusLost)}\n            />\n        ),\n    });\n\n    slots.set(notification.slot, id);\n}\n\n/** Closes whatever notification holds this slot. */\nexport function clearNotification(slot: string): void {\n    const id = slots.get(slot);\n\n    if (id) close(slot, id);\n}\n\n/** Gives a success five seconds after hover and keyboard focus leave it. */\nfunction useSuccessClose(ref: RefObject<Element | null>, enabled: boolean, onClose: () => void): void {\n    const latest = useRef(onClose);\n\n    useLayoutEffect(() => {\n        latest.current = onClose;\n    });\n    useEffect(() => {\n        if (!enabled) return;\n\n        const entry = ref.current?.closest<HTMLElement>('[data-slot=\"toast\"]');\n\n        if (!entry) return;\n\n        const held = {\n            hovered: entry.matches(':hover'),\n            focused: entry.contains(document.activeElement),\n            timer: undefined as ReturnType<typeof setTimeout> | undefined,\n        };\n        const restart = () => {\n            clearTimeout(held.timer);\n\n            if (!held.hovered && !held.focused) held.timer = setTimeout(() => latest.current(), SUCCESS_MS);\n        };\n        const enter = () => {\n            held.hovered = true;\n            restart();\n        };\n        const leave = () => {\n            held.hovered = false;\n            restart();\n        };\n        const focus = () => {\n            held.focused = true;\n            restart();\n        };\n        const blur = (event: FocusEvent) => {\n            held.focused = event.relatedTarget instanceof Node && entry.contains(event.relatedTarget);\n            restart();\n        };\n\n        entry.addEventListener('mouseenter', enter);\n        entry.addEventListener('mouseleave', leave);\n        entry.addEventListener('focusin', focus);\n        entry.addEventListener('focusout', blur);\n        restart();\n\n        return () => {\n            clearTimeout(held.timer);\n            entry.removeEventListener('mouseenter', enter);\n            entry.removeEventListener('mouseleave', leave);\n            entry.removeEventListener('focusin', focus);\n            entry.removeEventListener('focusout', blur);\n        };\n    }, [enabled, ref]);\n}\n\n/** One notification's content. `onClose` runs when its close button is clicked or, for a success, when its time is up. */\nfunction NotificationBody({\n    slot,\n    dismissLabel,\n    tone = 'success',\n    body,\n    onClose,\n}: Notification & { onClose: () => void }) {\n    const ref = useRef<HTMLSpanElement>(null);\n    const [held, setHeld] = useState(false);\n    const [bodyFailed, setBodyFailed] = useState(false);\n    const failed = tone === 'danger' || bodyFailed;\n\n    useEffect(() => {\n        ref.current?.closest('[data-slot=\"toast\"]')?.setAttribute('data-toast-color', failed ? 'danger' : 'success');\n    }, [failed]);\n    useSuccessClose(ref, !failed && !held, onClose);\n\n    return (\n        <span ref={ref} data-toast={slot}>\n            <DismissButton label={dismissLabel} onClick={onClose} />\n            <Controls.Provider value={{ hold: setHeld, fail: setBodyFailed }}>{body}</Controls.Provider>\n        </span>\n    );\n}\n"],"mappings":"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"}

package/dist/feedback/Progress.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, ReactNode } from "react";
+type ProgressProps = Omit<ComponentProps<'div'>, 'children' | 'className' | 'style'> & {
+  value: number;
+  max?: number;
+  /** Muted text after the bar, such as "Step 2 of 4". */
+  caption?: ReactNode;
+};
+/**
+ * A determinate progress bar: a rounded track filled to value / max, then an optional caption. Its props (an
+ * `aria-label`, say) go on the progressbar. Use ProgressStatusRow for a task's status row and StackedMeter for shares
+ * of a whole.
+ */
+export declare function Progress({ caption, value, max, ...props }: ProgressProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Progress.d.ts.map

package/dist/feedback/Progress.js

@@ -0,0 +1,38 @@
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/feedback/Progress.tsx
+/**
+* A determinate progress bar: a rounded track filled to value / max, then an optional caption. Its props (an
+* `aria-label`, say) go on the progressbar. Use ProgressStatusRow for a task's status row and StackedMeter for shares
+* of a whole.
+*/
+function Progress({ caption, value, max = 100, ...props }) {
+	const share = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		"data-slot": "progress",
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "progressbar",
+			"aria-valuemin": 0,
+			"aria-valuemax": max,
+			"aria-valuenow": value,
+			className: "bg-base-200 h-2 max-w-65 flex-1 overflow-hidden rounded-full",
+			"data-slot": "progress-bar",
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "bg-primary h-full rounded-[inherit]",
+				style: { width: `${share * 100}%` },
+				"data-slot": "progress-indicator"
+			})
+		}), caption && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			variant: "caption",
+			tone: "muted",
+			"data-slot": "progress-caption",
+			children: caption
+		})]
+	});
+}
+export { Progress };
+
+//# sourceMappingURL=Progress.js.map

package/dist/feedback/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","names":[],"sources":["../../src/feedback/Progress.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Text } from '../typography/Typography';\n\ntype ProgressProps = Omit<ComponentProps<'div'>, 'children' | 'className' | 'style'> & {\n    value: number;\n    max?: number;\n    /** Muted text after the bar, such as \"Step 2 of 4\". */\n    caption?: ReactNode;\n};\n\n/**\n * A determinate progress bar: a rounded track filled to value / max, then an optional caption. Its props (an\n * `aria-label`, say) go on the progressbar. Use ProgressStatusRow for a task's status row and StackedMeter for shares\n * of a whole.\n */\nexport function Progress({ caption, value, max = 100, ...props }: ProgressProps) {\n    const share = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0;\n\n    return (\n        <div className=\"flex items-center gap-2\" data-slot=\"progress\">\n            <div\n                role=\"progressbar\"\n                aria-valuemin={0}\n                aria-valuemax={max}\n                aria-valuenow={value}\n                className=\"bg-base-200 h-2 max-w-65 flex-1 overflow-hidden rounded-full\"\n                data-slot=\"progress-bar\"\n                {...props}\n            >\n                <div\n                    className=\"bg-primary h-full rounded-[inherit]\"\n                    style={{ width: `${share * 100}%` }}\n                    data-slot=\"progress-indicator\"\n                />\n            </div>\n            {caption && (\n                <Text as=\"span\" variant=\"caption\" tone=\"muted\" data-slot=\"progress-caption\">\n                    {caption}\n                </Text>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,SAAS,EAAE,SAAS,OAAO,MAAM,KAAK,GAAG,SAAwB;CAC7E,MAAM,QAAQ,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,QAAQ,KAAK,CAAC,GAAG,CAAC,IAAI;CAEhE,OACI,qBAAC,OAAD;EAAK,WAAU;EAA0B,aAAU;EAAnD,UAAA,CACI,oBAAC,OAAD;GACI,MAAK;GACL,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,WAAU;GACV,aAAU;GACV,GAAI;GAEJ,UAAA,oBAAC,OAAD;IACI,WAAU;IACV,OAAO,EAAE,OAAO,GAAG,QAAQ,IAAI,GAAG;IAClC,aAAU;GACb,CAAA;EACA,CAAA,GACJ,WACG,oBAAC,MAAD;GAAM,IAAG;GAAO,SAAQ;GAAU,MAAK;GAAQ,aAAU;GACpD,UAAA;EACC,CAAA,CAET;;AAEb"}

package/dist/feedback/ProgressStatusRow.js

@@ -1,7 +1,7 @@
 import { Button } from "../actions/Button.js";
 import { StatusIndicator } from "./StatusIndicator.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/feedback/ProgressStatusRow.tsx
 /** Ledger rows reserve the count line and track so updates never displace controls. */
 function ProgressStatusRow({ active, detail, secondaryDetail, issue, label, progress, tone = "info", trailing, onDetails, detailsLabel, progressLabel, compact = false }) {

package/dist/feedback/StatusIndicator.d.ts

@@ -3,7 +3,12 @@ interface StatusIndicatorProps {
   className?: string;
   size?: 'sm' | 'md';
   tone: StatusTone;
+  /** A colour that comes with data, such as a tracker label's own, in place of the tone's; none keeps the tone. */
+  labelColor?: string | undefined;
+  /** A short word after the dot in the tone's text colour, such as a check's "Installed"; the neutral tone mutes it,
+   *  for a check that didn't run. */
+  label?: string;
 }
-export declare function StatusIndicator({ className, size, tone }: StatusIndicatorProps): import("react").JSX.Element;
+export declare function StatusIndicator({ className, size, tone, labelColor, label }: StatusIndicatorProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/feedback/StatusIndicator.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/feedback/StatusIndicator.tsx
 const toneClasses = {
 	neutral: "bg-base-400",
@@ -7,20 +7,34 @@ const toneClasses = {
 	danger: "bg-danger",
 	info: "bg-info"
 };
+const labelClasses = {
+	neutral: "text-base-700",
+	success: "text-(--lar-success-text)",
+	warning: "text-(--lar-warning-text)",
+	danger: "text-(--lar-danger-text)",
+	info: "text-(--lar-info-text)"
+};
 const sizeClasses = {
 	sm: "size-1.5",
 	md: "size-2"
 };
-function StatusIndicator({ className, size = "md", tone }) {
+function StatusIndicator({ className, size = "md", tone, labelColor, label }) {
 	const classes = [
 		"inline-block shrink-0 rounded-full",
 		sizeClasses[size],
 		toneClasses[tone],
-		className
+		label ? null : className
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsx("span", {
+	const dot = /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: classes
+		className: classes,
+		style: labelColor ? { background: labelColor } : void 0
+	});
+	if (label === void 0) return dot;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "status-indicator",
+		className: `inline-flex items-center gap-1.5 text-xs font-medium whitespace-nowrap ${labelClasses[tone]} ${className ?? ""}`,
+		children: [dot, label]
 	});
 }
 export { StatusIndicator };

package/dist/feedback/StatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","names":[],"sources":["../../src/feedback/StatusIndicator.tsx"],"sourcesContent":["export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';\n\ninterface StatusIndicatorProps {\n    className?: string;\n    size?: 'sm' | 'md';\n    tone: StatusTone;\n}\n\nconst toneClasses: Record<StatusTone, string> = {\n    neutral: 'bg-base-400',\n    success: 'bg-success',\n    warning: 'bg-warning',\n    danger: 'bg-danger',\n    info: 'bg-info',\n};\n\nconst sizeClasses: Record<NonNullable<StatusIndicatorProps['size']>, string> = {\n    sm: 'size-1.5',\n    md: 'size-2',\n};\n\nexport function StatusIndicator({ className, size = 'md', tone }: StatusIndicatorProps) {\n    const classes = ['inline-block shrink-0 rounded-full', sizeClasses[size], toneClasses[tone], className]\n        .filter(Boolean)\n        .join(' ');\n\n    return <span aria-hidden=\"true\" className={classes} />;\n}\n"],"mappings":";;AAQA,MAAM,cAA0C;CAC5C,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACV;AAEA,MAAM,cAAyE;CAC3E,IAAI;CACJ,IAAI;AACR;AAEA,SAAgB,gBAAgB,EAAE,WAAW,OAAO,MAAM,QAA8B;CACpF,MAAM,UAAU;EAAC;EAAsC,YAAY;EAAO,YAAY;EAAO;CAAS,CAAC,CAClG,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEb,OAAO,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAW;CAAU,CAAA;AACzD"}
+{"version":3,"file":"StatusIndicator.js","names":[],"sources":["../../src/feedback/StatusIndicator.tsx"],"sourcesContent":["export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';\n\ninterface StatusIndicatorProps {\n    className?: string;\n    size?: 'sm' | 'md';\n    tone: StatusTone;\n    /** A colour that comes with data, such as a tracker label's own, in place of the tone's; none keeps the tone. */\n    labelColor?: string | undefined;\n    /** A short word after the dot in the tone's text colour, such as a check's \"Installed\"; the neutral tone mutes it,\n     *  for a check that didn't run. */\n    label?: string;\n}\n\nconst toneClasses: Record<StatusTone, string> = {\n    neutral: 'bg-base-400',\n    success: 'bg-success',\n    warning: 'bg-warning',\n    danger: 'bg-danger',\n    info: 'bg-info',\n};\n\nconst labelClasses: Record<StatusTone, string> = {\n    neutral: 'text-base-700',\n    success: 'text-(--lar-success-text)',\n    warning: 'text-(--lar-warning-text)',\n    danger: 'text-(--lar-danger-text)',\n    info: 'text-(--lar-info-text)',\n};\n\nconst sizeClasses: Record<NonNullable<StatusIndicatorProps['size']>, string> = {\n    sm: 'size-1.5',\n    md: 'size-2',\n};\n\nexport function StatusIndicator({ className, size = 'md', tone, labelColor, label }: StatusIndicatorProps) {\n    const classes = [\n        'inline-block shrink-0 rounded-full',\n        sizeClasses[size],\n        toneClasses[tone],\n        label ? null : className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n    const dot = (\n        <span aria-hidden=\"true\" className={classes} style={labelColor ? { background: labelColor } : undefined} />\n    );\n\n    if (label === undefined) return dot;\n\n    return (\n        <span\n            data-slot=\"status-indicator\"\n            className={`inline-flex items-center gap-1.5 text-xs font-medium whitespace-nowrap ${labelClasses[tone]} ${className ?? ''}`}\n        >\n            {dot}\n            {label}\n        </span>\n    );\n}\n"],"mappings":";;AAaA,MAAM,cAA0C;CAC5C,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACV;AAEA,MAAM,eAA2C;CAC7C,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACV;AAEA,MAAM,cAAyE;CAC3E,IAAI;CACJ,IAAI;AACR;AAEA,SAAgB,gBAAgB,EAAE,WAAW,OAAO,MAAM,MAAM,YAAY,SAA+B;CACvG,MAAM,UAAU;EACZ;EACA,YAAY;EACZ,YAAY;EACZ,QAAQ,OAAO;CACnB,CAAC,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,MAAM,MACF,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAW;EAAS,OAAO,aAAa,EAAE,YAAY,WAAW,IAAI,KAAA;CAAY,CAAA;CAG9G,IAAI,UAAU,KAAA,GAAW,OAAO;CAEhC,OACI,qBAAC,QAAD;EACI,aAAU;EACV,WAAW,0EAA0E,aAAa,MAAM,GAAG,aAAa;EAF5H,UAAA,CAIK,KACA,KACC;;AAEd"}

package/dist/feedback/index.d.ts

@@ -1,11 +1,15 @@
 import { StatusIndicator, StatusTone } from "./StatusIndicator.js";
-import { Alert as Alert$1 } from "./Alert.js";
+import { Alert } from "./Alert.js";
 import { AsyncState } from "./AsyncState.js";
 import { ErrorNotification, dismissAllNotifications, showErrorNotification, showSuccessNotification } from "./ErrorNotification.js";
-import { Notifications } from "./Notifications.js";
+import { DismissButton } from "./DismissButton.js";
+import { FormResult } from "./FormResult.js";
+import { LiveRegion } from "./LiveRegion.js";
+import { Notification, Notifications, clearNotification, showNotification, useNotificationControls } from "./Notifications.js";
+import { Progress } from "./Progress.js";
 import { ProgressStatusRow } from "./ProgressStatusRow.js";
 import { SkeletonLoader } from "./SkeletonLoader.js";
+import { Loading } from "./Loading.js";
 import { StatusPopoverContent } from "./StatusPopoverContent.js";
 import { StatusRow } from "./StatusRow.js";
-import { Loading as Loading$1 } from "@ninna-ui/feedback";
-export { Alert$1 as Alert, AsyncState, type ErrorNotification, Loading$1 as Loading, Notifications, ProgressStatusRow, SkeletonLoader, StatusIndicator, StatusPopoverContent, StatusRow, type StatusTone, dismissAllNotifications, showErrorNotification, showSuccessNotification };
+export { Alert, AsyncState, DismissButton, type ErrorNotification, FormResult, LiveRegion, Loading, type Notification, Notifications, Progress, ProgressStatusRow, SkeletonLoader, StatusIndicator, StatusPopoverContent, StatusRow, type StatusTone, clearNotification, dismissAllNotifications, showErrorNotification, showNotification, showSuccessNotification, useNotificationControls };

package/dist/forms/Checkbox.js

@@ -1,8 +1,8 @@
 import { tabbable } from "../foundations/KeyboardFocus.js";
 import { formChoiceClasses } from "./FormControlStyles.js";
 import { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/forms/Checkbox.tsx
 const Checkbox = forwardRef(({ label, indeterminate = false, "aria-checked": ariaChecked, className, onChange, ...props }, ref) => {
 	const inputRef = useRef(null);

package/dist/forms/ColorSwatches.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+export interface ColorSwatch {
+  /** What picking it sets, such as a hex colour without its #. */
+  value: string;
+  /** The CSS colour it shows. */
+  color: string;
+  /** Its accessible name, such as "Colour #D73A4A". */
+  label: string;
+}
+/**
+ * A row of round colour swatches, the one matching `value` (ignoring case) pressed and ringed, then `children`, such as
+ * a field for any other colour, wrapping when they don't fit.
+ */
+export declare function ColorSwatches({ swatches, value, disabled, onPick, children }: {
+  swatches: readonly ColorSwatch[];
+  value: string;
+  disabled?: boolean;
+  onPick: (value: string) => void;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ColorSwatches.d.ts.map

package/dist/forms/ColorSwatches.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/forms/ColorSwatches.tsx
+/**
+* A row of round colour swatches, the one matching `value` (ignoring case) pressed and ringed, then `children`, such as
+* a field for any other colour, wrapping when they don't fit.
+*/
+function ColorSwatches({ swatches, value, disabled = false, onPick, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex flex-wrap items-center gap-1.5",
+		children: [swatches.map((swatch) => {
+			const picked = swatch.value.toLowerCase() === value.toLowerCase();
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": swatch.label,
+				"aria-pressed": picked,
+				disabled,
+				className: `size-5 rounded-full border ${picked ? "ring-2 ring-(--primary) ring-offset-1 ring-offset-(--card)" : ""}`,
+				style: { background: swatch.color },
+				onClick: () => onPick(swatch.value)
+			}, swatch.value);
+		}), children]
+	});
+}
+export { ColorSwatches };
+
+//# sourceMappingURL=ColorSwatches.js.map

package/dist/forms/ColorSwatches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatches.js","names":[],"sources":["../../src/forms/ColorSwatches.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport interface ColorSwatch {\n    /** What picking it sets, such as a hex colour without its #. */\n    value: string;\n    /** The CSS colour it shows. */\n    color: string;\n    /** Its accessible name, such as \"Colour #D73A4A\". */\n    label: string;\n}\n\n/**\n * A row of round colour swatches, the one matching `value` (ignoring case) pressed and ringed, then `children`, such as\n * a field for any other colour, wrapping when they don't fit.\n */\nexport function ColorSwatches({\n    swatches,\n    value,\n    disabled = false,\n    onPick,\n    children,\n}: {\n    swatches: readonly ColorSwatch[];\n    value: string;\n    disabled?: boolean;\n    onPick: (value: string) => void;\n    children?: ReactNode;\n}) {\n    return (\n        <span className=\"flex flex-wrap items-center gap-1.5\">\n            {swatches.map((swatch) => {\n                const picked = swatch.value.toLowerCase() === value.toLowerCase();\n\n                return (\n                    <button\n                        key={swatch.value}\n                        type=\"button\"\n                        aria-label={swatch.label}\n                        aria-pressed={picked}\n                        disabled={disabled}\n                        className={`size-5 rounded-full border ${picked ? 'ring-2 ring-(--primary) ring-offset-1 ring-offset-(--card)' : ''}`}\n                        style={{ background: swatch.color }}\n                        onClick={() => onPick(swatch.value)}\n                    />\n                );\n            })}\n            {children}\n        </span>\n    );\n}\n"],"mappings":";;;;;;AAeA,SAAgB,cAAc,EAC1B,UACA,OACA,WAAW,OACX,QACA,YAOD;CACC,OACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACK,SAAS,KAAK,WAAW;GACtB,MAAM,SAAS,OAAO,MAAM,YAAY,MAAM,MAAM,YAAY;GAEhE,OACI,oBAAC,UAAD;IAEI,MAAK;IACL,cAAY,OAAO;IACnB,gBAAc;IACJ;IACV,WAAW,8BAA8B,SAAS,+DAA+D;IACjH,OAAO,EAAE,YAAY,OAAO,MAAM;IAClC,eAAe,OAAO,OAAO,KAAK;GACrC,GARQ,OAAO,KAQf;EAET,CAAC,GACA,QACC;;AAEd"}

package/dist/forms/FormSection.d.ts

@@ -1,6 +1,9 @@
 import { ButtonProps } from "../actions/Button.js";
 import { FieldProps } from "./Field.js";
-import { ReactNode } from "react";
+import { ComponentProps, ReactNode } from "react";
+type DataAttributes = {
+  [key: `data-${string}`]: string | undefined;
+};
 export declare function FormContent({ children }: {
   children: ReactNode;
 }): import("react").JSX.Element;
@@ -14,18 +17,55 @@ interface FormSectionProps {
   description?: string;
   loading?: boolean;
   loadingLabel?: string;
+  presentation?: 'default';
   title: ReactNode;
 }
-export declare function FormSection({ action, badges, children, description, loading, loadingLabel, title }: FormSectionProps): import("react").JSX.Element;
-interface FormRowProps {
+/** A dense tool's settings group: its title (with an optional help popover) and description over the content as
+ *  given, such as one or more settings panels and their notes. */
+interface DenseFormSectionProps extends DataAttributes {
+  presentation: 'dense';
+  title?: ReactNode;
+  /** Explains the group in a popover from a help button after the title; `helpLabel` names that button. */
+  help?: ReactNode;
+  helpLabel?: string;
+  description?: ReactNode;
+  /** Names the group when its title doesn't, or when it has none. */
+  'aria-label'?: string;
+  children?: ReactNode;
+}
+export declare function FormSection(props: FormSectionProps | DenseFormSectionProps): import("react").JSX.Element;
+interface FormRowColumnsProps {
   badges?: ReactNode;
   children: ReactNode;
   description: string;
   /** The row's element id, for linking or scrolling to it; a row with one can take focus when it is opened. */
   id?: string;
   label: ReactNode;
+  layout?: 'columns';
+}
+/** A dense tool's settings row: the label (with an optional help popover) and description, then its controls flowing
+ *  beside them and wrapping under them when they don't fit, then content below and an error. */
+interface FormRowFlowProps extends DataAttributes {
+  layout: 'flow';
+  label: ReactNode;
+  /** Explains the setting in a popover from a help button after the label; `helpLabel` names that button. */
+  help?: ReactNode;
+  helpLabel?: string;
+  description?: ReactNode;
+  children?: ReactNode;
+  /** Full-width content under the label and controls, such as a list the setting governs. */
+  below?: ReactNode;
+  error?: string | undefined;
+  /** The error's element id, for a control's aria-describedby. */
+  errorId?: string;
 }
-export declare function FormRow({ badges, children, description, id, label }: FormRowProps): import("react").JSX.Element;
+type FormRowProps = FormRowColumnsProps | FormRowFlowProps;
+export declare function FormRow(props: FormRowProps): import("react").JSX.Element;
+/** A value and its unit beside it in a row's controls, such as a number field and "days". */
+export declare function FormUnit({ children, unit }: {
+  children: ReactNode;
+  unit: ReactNode;
+}): import("react").JSX.Element;
 type FormFieldProps = Omit<FieldProps, 'children' | 'className'> & {
   action?: ReactNode;
 } & ({
@@ -39,10 +79,32 @@ type FormFieldProps = Omit<FieldProps, 'children' | 'className'> & {
 });
 export declare function FormField({ action, children, loading, loadingLabel, ...props }: FormFieldProps): import("react").JSX.Element;
 export declare function FormAction(props: Omit<ButtonProps, 'type' | 'size' | 'variant' | 'color'>): import("react").JSX.Element;
-export declare function Disclosure({ children, label, lazy }: {
+export declare function Disclosure({ children, label, lazy, presentation, defaultOpen, badge, onOpenChange, ...data }: {
   children: ReactNode;
   label: string;
   lazy?: boolean;
-}): import("react").JSX.Element;
+  /** `note` folds small muted text behind a chevron; `section` folds a section's own content, such as an earlier
+   *  version of a text, behind a muted label in the body size; `group` folds a form's optional group behind its
+   *  heading, such as optional settings; `framed` folds a short list in a frame, such as entries that can't be
+   *  picked. */
+  presentation?: 'note' | 'section' | 'group' | 'framed';
+  /** Starts open, such as a group whose kept answers may need a look. */
+  defaultOpen?: boolean;
+  /** A `group`'s badge after its heading, such as "Optional". */
+  badge?: string | undefined;
+  /** Hears each time it opens or closes, such as to read what it shows once it opens. */
+  onOpenChange?: (open: boolean) => void;
+} & DataAttributes): import("react").JSX.Element;
+type FormFieldsetProps = Omit<ComponentProps<'fieldset'>, 'style'> & {
+  /** The legend over the group. */
+  legend?: ReactNode;
+  /** Names the group for assistive technology only, where what's around it already says what it is. */
+  hiddenLegend?: boolean;
+  /** `group` only groups and disables its fields, with no frame. */
+  presentation?: 'bordered' | 'group';
+};
+/** The form section's fieldset: a bordered group of controls under a legend, on the native fieldset, which also
+ *  disables every control inside it. As a `group`, it only groups and disables its fields. */
+export declare function FormFieldset({ legend, hiddenLegend, presentation, className, children, ...props }: FormFieldsetProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=FormSection.d.ts.map