@nsaa/core 0.1.0-alpha.2 → 0.1.0-alpha.4

package/LICENSE

@@ -25,4 +25,4 @@ SOFTWARE.
 This licence covers the free packages in this repository. The Pro package
 (`packages/blocks`, when it exists) ships under its own commercial licence,
 stated in that folder. Third-party code adapted into Nsaa keeps its original
-notice in the file header; colour scales come from Radix Colors (MIT).
+notice in the file header; colour scales come from Tailwind CSS (MIT).

package/NOTICE

@@ -152,3 +152,30 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+-------------------------------------------------------------------------------
+Tailwind CSS (https://github.com/tailwindlabs/tailwindcss), v4.3.3. Its default colour palette
+(theme.css) is the source of the colour primitives in packages/tokens (src/primitives.json and
+dist/), #149.
+
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -17,7 +17,20 @@ import { Button, SoundProvider } from "@nsaa/core";
 ```
 
 Fonts are yours to load: the tokens name Geist (body), Newsreader (the editorial theme) and Geist
-Mono, and fall back to the system sans. For example, in your HTML `<head>`:
+Mono, and fall back to the system sans. Self-host them with Fontsource (works under a strict CSP such
+as `font-src 'self'`; the tokens list the Fontsource names first, so no `@font-face` is needed):
+
+```sh
+pnpm add @fontsource-variable/geist @fontsource-variable/geist-mono @fontsource-variable/newsreader
+```
+
+```css
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/geist-mono";
+@import "@fontsource-variable/newsreader"; /* editorial theme only */
+```
+
+Or link Google Fonts in your HTML `<head>`:
 
 ```html
 <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -28,12 +41,21 @@ Mono, and fall back to the system sans. For example, in your HTML `<head>`:
 />
 ```
 
-| Entry                     | What                                                                          |
-| ------------------------- | ----------------------------------------------------------------------------- |
-| `@nsaa/core`              | components, `SoundProvider`, `LoaderProvider`, `Spinner` (featured 8 loaders) |
-| `@nsaa/core/loaders`      | all 29 loading.dev loaders, `registerLoaders`                                 |
-| `@nsaa/core/loaders/text` | text and AI loaders (ShimmerText, Typing, …)                                  |
-| `@nsaa/core/sound-uisfx`  | the UISFX sound engine for `SoundProvider`                                    |
-| `@nsaa/core/styles.css`   | tokens, the shadcn alias layer and the feel layer                             |
+Sound: `lazyUisfxPlayer()` (recommended) loads the UISFX engine on the first interaction;
+`createUisfxPlayer()` from `@nsaa/core/sound-uisfx` loads it up front.
+
+```tsx
+const player = lazyUisfxPlayer();
+<SoundProvider player={player}>…</SoundProvider>;
+```
+
+| Entry                        | What                                                                                 |
+| ---------------------------- | ------------------------------------------------------------------------------------ |
+| `@nsaa/core`                 | components, `SoundProvider`, `lazyUisfxPlayer`, `LoaderProvider`, `Spinner`          |
+| `@nsaa/core/loaders`         | all 29 loading.dev loaders, `registerLoaders`                                        |
+| `@nsaa/core/loaders/text`    | text and AI loaders (ShimmerText, Typing, …)                                         |
+| `@nsaa/core/sound-uisfx`     | the UISFX sound engine for `SoundProvider`                                           |
+| `@nsaa/core/styles.css`      | tokens, the shadcn alias layer, the feel layer, every component's sources            |
+| `@nsaa/core/styles-base.css` | the same without Tailwind sources; add `@nsaa/core/sources/<name>.css` per component |
 
 Peer dependencies: `react` and `react-dom` 19. MIT; third-party notices in `NOTICE`.

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+"use client";
+// \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+export { __exportAll };

package/dist/alert/alert.d.ts

@@ -1,18 +1,43 @@
 
+import { Button } from "../button/button.js";
+import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const alertVariants: (props?: ({
-  variant?: "default" | "destructive" | null | undefined;
+  variant?: "success" | "warning" | "default" | "destructive" | "info" | null | undefined;
+  appearance?: "soft" | "outline" | "solid" | null | undefined;
+  size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Alert({ className, variant, announce, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+type AlertAppearance = NonNullable<VariantProps<typeof alertVariants>["appearance"]>;
+declare function Alert({ className, variant, appearance, size, announce, open, defaultOpen, onOpenChange, ref, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+  /**
+   * How loud it is: `outline`, `soft` or `solid`. Defaults by variant: outline for default and
+   * destructive (base-nova), soft for success, warning and info.
+   */
+  appearance?: AlertAppearance | null;
+  /** `default`, or `sm`: one compact line (icon, title, description, close) for tight places. */
+  size?: "default" | "sm" | null;
   /**
    * The error sound (feedback.error) when the Alert appears (#114). Left unset it's automatic: a
    * destructive Alert plays it when a person's action caused it (within the browser's transient
-   * activation window), never on load. `true` always plays it, `false` never does.
+   * activation window), never on load. `true` always plays it, `false` never does. Success and
+   * warning are silent unless `announce` is set, then play feedback.success / feedback.warning.
    */
   announce?: boolean;
-}): React.JSX.Element;
+  /** Whether the Alert is shown (controlled). Only matters with an `AlertClose`. */
+  open?: boolean;
+  /** Whether the Alert starts shown when uncontrolled. Defaults to `true`. */
+  defaultOpen?: boolean;
+  /** Called with `false` when `AlertClose` is pressed. */
+  onOpenChange?: (open: boolean) => void;
+}): React.JSX.Element | null;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Alert, AlertAction, AlertDescription, AlertTitle };
+/** Nsaa (#148): dismisses the Alert. A ghost icon Button named "Dismiss", at the inline end. */
+declare function AlertClose({ className, children, onClick, ...props }: Omit<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+/** Nsaa (#148): a row of `AlertLink`s under the description. The ∙ between them is CSS, never read. */
+declare function AlertLinks({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Nsaa (#148): a real link in the Alert's own text colour, medium weight, underlined. */
+declare function AlertLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle };

package/dist/alert/alert.js

@@ -1,32 +1,174 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { recentUserAction } from "../lib/user-action.js";
 import { useCue } from "../sound/sound-map.js";
-import { jsx } from "react/jsx-runtime";
+import { Button } from "../button/button.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { recentUserAction } from "../lib/user-action.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 // src/alert/alert.tsx
 const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
-	variants: { variant: {
-		default: "bg-card text-card-foreground",
-		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
-	} },
-	defaultVariants: { variant: "default" }
+	variants: {
+		variant: {
+			default: "bg-card text-card-foreground",
+			destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			success: "",
+			warning: "",
+			info: ""
+		},
+		appearance: {
+			outline: "",
+			soft: "",
+			solid: ""
+		},
+		size: {
+			default: "has-data-[slot=alert-close]:pr-10 has-data-[slot=alert-action]:has-data-[slot=alert-close]:pr-25 rtl:has-data-[slot=alert-close]:pr-2.5 rtl:has-data-[slot=alert-close]:pl-10 rtl:has-data-[slot=alert-action]:has-data-[slot=alert-close]:pl-25",
+			sm: "block rounded-md px-2 py-1.5 text-xs has-data-[slot=alert-close]:pr-8 rtl:has-data-[slot=alert-close]:pr-2 rtl:has-data-[slot=alert-close]:pl-8 *:[svg]:float-start *:[svg]:me-2 *:[svg]:translate-y-0 *:data-[slot=alert-title]:inline *:data-[slot=alert-description]:ms-1 *:data-[slot=alert-description]:inline *:data-[slot=alert-description]:text-xs"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			appearance: "soft",
+			className: "bg-muted border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-muted-foreground"
+		},
+		{
+			variant: "destructive",
+			appearance: "soft",
+			className: "bg-danger-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-danger-foreground)"
+		},
+		{
+			variant: "success",
+			appearance: "soft",
+			className: "bg-positive-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-positive-foreground)"
+		},
+		{
+			variant: "warning",
+			appearance: "soft",
+			className: "bg-warning-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-warning-foreground)"
+		},
+		{
+			variant: "info",
+			appearance: "soft",
+			className: "bg-info-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-info-foreground)"
+		},
+		{
+			variant: "default",
+			appearance: "solid",
+			className: "border-inverted-solid bg-inverted-solid text-on-inverted-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-background *:data-[slot=alert-action]:text-foreground *:data-[slot=alert-description]:text-on-inverted-foreground"
+		},
+		{
+			variant: "destructive",
+			appearance: "outline",
+			className: "border-danger-border-default bg-card"
+		},
+		{
+			variant: "success",
+			appearance: "outline",
+			className: "border-positive-border-default bg-card text-card-foreground *:[svg]:text-(--nsaa-color-positive-foreground)"
+		},
+		{
+			variant: "warning",
+			appearance: "outline",
+			className: "border-warning-border-default bg-card text-card-foreground *:[svg]:text-(--nsaa-color-warning-foreground)"
+		},
+		{
+			variant: "info",
+			appearance: "outline",
+			className: "border-info-border-default bg-card text-card-foreground *:[svg]:text-(--nsaa-color-info-foreground)"
+		},
+		{
+			variant: "destructive",
+			appearance: "solid",
+			className: "border-transparent bg-danger-solid text-on-danger-solid-foreground *:data-[slot=alert-description]:text-on-danger-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-danger-solid-foreground *:data-[slot=alert-action]:text-danger-solid **:data-[slot=button]:text-danger-solid!"
+		},
+		{
+			variant: "success",
+			appearance: "solid",
+			className: "border-transparent bg-positive-solid text-on-positive-solid-foreground *:data-[slot=alert-description]:text-on-positive-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-positive-solid-foreground *:data-[slot=alert-action]:text-positive-solid **:data-[slot=button]:text-positive-solid!"
+		},
+		{
+			variant: "warning",
+			appearance: "solid",
+			className: "border-transparent bg-warning-solid text-on-warning-solid-foreground *:data-[slot=alert-description]:text-on-warning-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-warning-solid-foreground *:data-[slot=alert-action]:text-warning-solid **:data-[slot=button]:text-warning-solid!"
+		},
+		{
+			variant: "info",
+			appearance: "solid",
+			className: "border-transparent bg-info-solid text-on-info-solid-foreground *:data-[slot=alert-description]:text-on-info-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-info-solid-foreground *:data-[slot=alert-action]:text-info-solid **:data-[slot=button]:text-info-solid!"
+		},
+		{
+			appearance: ["soft", "solid"],
+			className: "[&_a:hover]:text-current!"
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
 });
-function Alert({ className, variant, announce, ...props }) {
+const AlertContext = React.createContext(null);
+const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/** The next focusable element after `el` in the page, or the previous one if there is none. */
+function neighbour(el) {
+	const all = [...el.ownerDocument.querySelectorAll(FOCUSABLE)].filter((node) => !el.contains(node) && (node.checkVisibility?.() ?? true));
+	return all.find((node) => el.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) ?? all.filter((node) => el.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING).at(-1) ?? null;
+}
+function Alert({ className, variant, appearance, size, announce, open, defaultOpen = true, onOpenChange, ref, ...props }) {
 	const cue = useCue("alert");
 	const destructive = variant === "destructive";
+	const announceCue = variant === "success" || variant === "warning" ? variant : "destructive";
 	const appear = React.useEffectEvent(() => {
-		if (announce === true || destructive && recentUserAction()) cue("destructive");
+		if (variant === "info") return;
+		if (announce === true || destructive && recentUserAction()) cue(announceCue);
 	});
 	React.useEffect(() => {
 		if (announce !== false && (destructive || announce)) appear();
 	}, [destructive, announce]);
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "alert",
-		role: "alert",
-		className: cn(alertVariants({ variant }), className),
-		...props
+	const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+	const shown = open ?? uncontrolled;
+	const [mounted, setMounted] = React.useState(shown);
+	const node = React.useRef(null);
+	if (shown && !mounted) setMounted(true);
+	React.useLayoutEffect(() => {
+		const el = node.current;
+		if (shown || !el) return;
+		let live = true;
+		const running = el.getAnimations?.() ?? [];
+		Promise.allSettled(running.map((a) => a.finished)).then(() => {
+			if (!live) return;
+			if (el.contains(el.ownerDocument.activeElement)) neighbour(el)?.focus();
+			setMounted(false);
+		});
+		return () => {
+			live = false;
+		};
+	}, [shown]);
+	const context = React.useMemo(() => ({ close: () => {
+		if (open === void 0) setUncontrolled(false);
+		onOpenChange?.(false);
+	} }), [open, onOpenChange]);
+	if (!mounted) return null;
+	const status = variant ?? "default";
+	const look = appearance ?? (status === "success" || status === "warning" || status === "info" ? "soft" : "outline");
+	return /* @__PURE__ */ jsx(AlertContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: mergeRefs(node, ref),
+			"data-slot": "alert",
+			"data-size": size ?? "default",
+			"data-ending-style": shown ? void 0 : "",
+			role: destructive || status === "warning" ? "alert" : "status",
+			className: cn(alertVariants({
+				variant,
+				appearance: look,
+				size
+			}), "rtl:text-right rtl:has-data-[slot=alert-action]:pr-2.5 rtl:has-data-[slot=alert-action]:pl-18 rtl:*:data-[slot=alert-action]:right-auto rtl:*:data-[slot=alert-action]:left-2", "has-data-[slot=alert-close]:*:data-[slot=alert-action]:right-10 rtl:has-data-[slot=alert-close]:*:data-[slot=alert-action]:left-10", className),
+			...props
+		})
 	});
 }
 function AlertTitle({ className, ...props }) {
@@ -50,4 +192,48 @@ function AlertAction({ className, ...props }) {
 		...props
 	});
 }
-export { Alert, AlertAction, AlertDescription, AlertTitle };
+/** Nsaa (#148): dismisses the Alert. A ghost icon Button named "Dismiss", at the inline end. */
+function AlertClose({ className, children, onClick, ...props }) {
+	const alert = React.useContext(AlertContext);
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "alert-close",
+		variant: "ghost",
+		size: "icon-xs",
+		"aria-label": "Dismiss",
+		className: cn("absolute top-2 right-2 text-current rtl:right-auto rtl:left-2 group-data-[size=sm]/alert:top-1 group-data-[size=sm]/alert:right-1 rtl:group-data-[size=sm]/alert:right-auto rtl:group-data-[size=sm]/alert:left-1", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) alert?.close();
+		},
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+		})
+	});
+}
+/** Nsaa (#148): a row of `AlertLink`s under the description. The ∙ between them is CSS, never read. */
+function AlertLinks({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-links",
+		className: cn("mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 group-has-[>svg]/alert:col-start-2", className),
+		...props
+	});
+}
+/** Nsaa (#148): a real link in the Alert's own text colour, medium weight, underlined. */
+function AlertLink({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({ className: cn("relative font-medium text-current underline underline-offset-3 hover:decoration-2", "not-first:before:pointer-events-none not-first:before:absolute not-first:before:-start-2.5 not-first:before:no-underline not-first:before:content-['∙'_/_'']", className) }, props),
+		render,
+		state: { slot: "alert-link" }
+	});
+}
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle };

package/dist/alert/index.d.ts

@@ -1,3 +1,3 @@
 
-import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert.js";
-export { Alert, AlertAction, AlertDescription, AlertTitle };
+import { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle } from "./alert.js";
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle };

package/dist/alert-dialog/alert-dialog.js

@@ -3,18 +3,23 @@
 import { cn } from "../lib/cn.js";
 import { useCue } from "../sound/sound-map.js";
 import { Button } from "../button/button.js";
+import { OpenerContext, useFinalFocus, useOpener } from "../lib/opener.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 // src/alert-dialog/alert-dialog.tsx
 function AlertDialog$1({ onOpenChange, ...props }) {
 	const cue = useCue("alert-dialog");
-	return /* @__PURE__ */ jsx(AlertDialog.Root, {
-		"data-slot": "alert-dialog",
-		onOpenChange: (open, details) => {
-			onOpenChange?.(open, details);
-			if (!details.isCanceled) cue(open ? "open" : "close");
-		},
-		...props
+	const opener = useOpener(props.open);
+	return /* @__PURE__ */ jsx(OpenerContext.Provider, {
+		value: opener,
+		children: /* @__PURE__ */ jsx(AlertDialog.Root, {
+			"data-slot": "alert-dialog",
+			onOpenChange: (open, details) => {
+				onOpenChange?.(open, details);
+				if (!details.isCanceled) cue(open ? "open" : "close");
+			},
+			...props
+		})
 	});
 }
 function AlertDialogTrigger({ ...props }) {
@@ -37,6 +42,7 @@ function AlertDialogOverlay({ className, ...props }) {
 	});
 }
 function AlertDialogContent({ className, size = "default", ...props }) {
+	props.finalFocus = useFinalFocus(props.finalFocus);
 	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog.Popup, {
 		"data-slot": "alert-dialog-content",
 		"data-size": size,

package/dist/badge/badge.d.ts

@@ -1,8 +1,8 @@
 
-import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

package/dist/badge/badge.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
 // src/badge/badge.tsx
 const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
 	variants: { variant: {

package/dist/button/button.d.ts

@@ -2,8 +2,8 @@
 import { VariantProps } from "class-variance-authority";
 import { Button } from "@base-ui/react/button";
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
-  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type LoadingPlacement = "auto" | "start" | "center";
 declare function Button$1({ className, variant, size, loading, loadingLabel, loadingPlacement, children, onClick, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, ...props }: Button.Props & VariantProps<typeof buttonVariants> & {

package/dist/button/button.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useCue } from "../sound/sound-map.js";
 import { useControlDefaults } from "../lib/control-defaults.js";
 import { usePress } from "../lib/use-press.js";
+import { useCue } from "../sound/sound-map.js";
 import { Spinner } from "../spinner/spinner.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/dialog/dialog.js

@@ -3,18 +3,23 @@
 import { cn } from "../lib/cn.js";
 import { useCue } from "../sound/sound-map.js";
 import { Button } from "../button/button.js";
+import { OpenerContext, useFinalFocus, useOpener } from "../lib/opener.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 // src/dialog/dialog.tsx
 function Dialog$1({ onOpenChange, ...props }) {
 	const cue = useCue("dialog");
-	return /* @__PURE__ */ jsx(Dialog.Root, {
-		"data-slot": "dialog",
-		onOpenChange: (open, details) => {
-			onOpenChange?.(open, details);
-			if (!details.isCanceled) cue(open ? "open" : "close");
-		},
-		...props
+	const opener = useOpener(props.open);
+	return /* @__PURE__ */ jsx(OpenerContext.Provider, {
+		value: opener,
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			"data-slot": "dialog",
+			onOpenChange: (open, details) => {
+				onOpenChange?.(open, details);
+				if (!details.isCanceled) cue(open ? "open" : "close");
+			},
+			...props
+		})
 	});
 }
 function DialogTrigger({ ...props }) {
@@ -43,6 +48,7 @@ function DialogOverlay({ className, ...props }) {
 	});
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
+	props.finalFocus = useFinalFocus(props.finalFocus);
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 		"data-slot": "dialog-content",
 		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),

package/dist/empty/empty.d.ts

@@ -1,7 +1,7 @@
 
+import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
-import { useRender } from "@base-ui/react/use-render";
 declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const emptyMediaVariants: (props?: ({

package/dist/empty/empty.js

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import * as React from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import * as React from "react";
 // src/empty/empty.tsx
 function Empty({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion/accordion.js";
 import "./accordion/index.js";
-import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert/alert.js";
-import "./alert/index.js";
 import { Button, buttonVariants } from "./button/button.js";
+import { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle } from "./alert/alert.js";
+import "./alert/index.js";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog/alert-dialog.js";
 import "./alert-dialog/index.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar/avatar.js";
@@ -65,6 +65,7 @@ import "./skeleton/index.js";
 import { Slider } from "./slider/slider.js";
 import "./slider/index.js";
 import { SoundCue, SoundPlayer, SoundProvider, SoundProviderProps, useSound } from "./sound/sound.js";
+import { lazyUisfxPlayer } from "./sound/lazy-uisfx.js";
 import { SOUND_MAP, SoundComponent } from "./sound/sound-map.js";
 import { LoaderProvider, LoaderProviderProps } from "./spinner/loader-provider.js";
 import { LoaderComponent, registerLoader, registerLoaders } from "./spinner/registry.js";
@@ -87,4 +88,4 @@ import "./toolbar/index.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip/tooltip.js";
 import "./tooltip/index.js";
 import "./lib/track-input-modality.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, type EmptyIllustrationOptions, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, type IconSwapProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, type LoaderComponent, LoaderProvider, type LoaderProviderProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, type SoundComponent, type SoundCue, type SoundPlayer, SoundProvider, type SoundProviderProps, Spinner, type SpinnerProps, type SpinnerVariant, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSize, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertClose, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertLink, AlertLinks, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, type EmptyIllustrationOptions, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, type IconSwapProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, type LoaderComponent, LoaderProvider, type LoaderProviderProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, type SoundComponent, type SoundCue, type SoundPlayer, SoundProvider, type SoundProviderProps, Spinner, type SpinnerProps, type SpinnerVariant, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSize, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, lazyUisfxPlayer, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };