@nsaa/core 0.1.0-alpha.1 → 0.1.0-alpha.3

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/accordion/accordion.d.ts

@@ -0,0 +1,7 @@
+
+import { Accordion } from "@base-ui/react/accordion";
+declare function Accordion$1({ className, ...props }: Accordion.Root.Props): import("react").JSX.Element;
+declare function AccordionItem({ className, ...props }: Accordion.Item.Props): import("react").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: Accordion.Trigger.Props): import("react").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: Accordion.Panel.Props): import("react").JSX.Element;
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/accordion/accordion.js

@@ -0,0 +1,54 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Accordion } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/accordion/accordion.tsx
+function Accordion$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		"data-slot": "accordion",
+		className: cn("flex w-full flex-col", className),
+		...props
+	});
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		"data-slot": "accordion-item",
+		className: cn("not-last:border-b", className),
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"data-slot": "accordion-trigger-icon",
+				className: "pointer-events-none shrink-0",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+			})]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		"data-slot": "accordion-content",
+		className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+			children
+		})
+	});
+}
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/accordion/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion.js";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/alert/alert.d.ts

@@ -0,0 +1,19 @@
+
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const alertVariants: (props?: ({
+  variant?: "success" | "warning" | "default" | "destructive" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, announce, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+  /**
+   * 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. Success and
+   * warning are silent unless `announce` is set, then play feedback.success / feedback.warning.
+   */
+  announce?: boolean;
+}): React.JSX.Element;
+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 };

package/dist/alert/alert.js

@@ -0,0 +1,58 @@
+"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 { 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",
+		success: "border-positive-subtle-active bg-positive-subtle text-on-positive-subtle-foreground *:data-[slot=alert-description]:text-on-positive-subtle-foreground",
+		warning: "border-warning-subtle-active bg-warning-subtle text-on-warning-subtle-foreground *:data-[slot=alert-description]:text-on-warning-subtle-foreground",
+		info: "border-info-subtle-active bg-info-subtle text-on-info-subtle-foreground *:data-[slot=alert-description]:text-on-info-subtle-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Alert({ className, variant, announce, ...props }) {
+	const cue = useCue("alert");
+	const destructive = variant === "destructive";
+	const announceCue = variant === "success" || variant === "warning" ? variant : "destructive";
+	const appear = React.useEffectEvent(() => {
+		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
+	});
+}
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-title",
+		className: cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className),
+		...props
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-description",
+		className: cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+		...props
+	});
+}
+function AlertAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-action",
+		className: cn("absolute top-2 right-2", className),
+		...props
+	});
+}
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/alert/index.d.ts

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

package/dist/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,19 @@
+
+import { Button } from "../button/button.js";
+import * as React from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+declare function AlertDialog$1({ onOpenChange, ...props }: AlertDialog.Root.Props): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialog.Trigger.Props): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: AlertDialog.Portal.Props): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialog.Backdrop.Props): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialog.Popup.Props & {
+  size?: "default" | "sm";
+}): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialog.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialog.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialog.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

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

@@ -0,0 +1,106 @@
+"use client";
+"use client";
+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");
+	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 }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+}
+function AlertDialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", 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,
+		className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]: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),
+		...props
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function AlertDialogMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-media",
+		className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn("cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+}
+function AlertDialogAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "alert-dialog-action",
+		className: cn(className),
+		...props
+	});
+}
+function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		"data-slot": "alert-dialog-cancel",
+		className: cn(className),
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size
+		}),
+		...props
+	});
+}
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/alert-dialog/index.d.ts

@@ -0,0 +1,3 @@
+
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog.js";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,12 @@
+
+import * as React from "react";
+import { Avatar } from "@base-ui/react/avatar";
+declare function Avatar$1({ className, size, ...props }: Avatar.Root.Props & {
+  size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: Avatar.Image.Props): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: Avatar.Fallback.Props): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Avatar$1 as Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/avatar/avatar.js

@@ -0,0 +1,50 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+// src/avatar/avatar.tsx
+function Avatar$1({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full rounded-full object-cover", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className),
+		...props
+	});
+}
+function AvatarBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-badge",
+		className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		...props
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
+		...props
+	});
+}
+function AvatarGroupCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group-count",
+		className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+		...props
+	});
+}
+export { Avatar$1 as Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/avatar/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar.js";
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/badge/badge.d.ts

@@ -0,0 +1,8 @@
+
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+declare const badgeVariants: (props?: ({
+  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "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

@@ -0,0 +1,29 @@
+"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";
+// 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: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:text-destructive-hover-foreground",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant = "default", render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({ className: cn(badgeVariants({ variant }), className) }, props),
+		render,
+		state: {
+			slot: "badge",
+			variant
+		}
+	});
+}
+export { Badge, badgeVariants };

package/dist/badge/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Badge, badgeVariants } from "./badge.js";
+export { Badge, badgeVariants };

package/dist/button/button.d.ts

@@ -0,0 +1,25 @@
+
+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;
+} & 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> & {
+  /**
+   * Shows the Arc spinner in place of the start icon and ignores presses, keeping focus and the
+   * accessible name (`aria-busy`, `data-loading`; not `disabled`).
+   */
+  loading?: boolean | undefined;
+  /** Announced through the spinner while loading. Default "Loading". */
+  loadingLabel?: string | undefined;
+  /**
+   * Where the spinner goes while loading (#130). `start` takes the start icon's place, or sits
+   * before the label and the button grows; `center` overlays it and keeps the content's space, so
+   * the width never changes. `auto` (default): `start` with a start icon or on an icon size, else
+   * `center`. The resolved value is set as `data-loading-placement`.
+   */
+  loadingPlacement?: LoadingPlacement | undefined;
+}): import("react").JSX.Element;
+export { Button$1 as Button, buttonVariants };

package/dist/button/button.js

@@ -0,0 +1,136 @@
+"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 { Spinner } from "../spinner/spinner.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Children, isValidElement } from "react";
+import { Button } from "@base-ui/react/button";
+// src/button/button.tsx
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:text-destructive-hover-foreground focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const SPINNER_SIZE = {
+	default: "md",
+	xs: "xs",
+	sm: "sm",
+	lg: "md",
+	icon: "md",
+	"icon-xs": "xs",
+	"icon-sm": "md",
+	"icon-lg": "md"
+};
+function hasStartIcon(children) {
+	return Children.toArray(children).some((child) => isValidElement(child) && child.props["data-icon"] === "inline-start");
+}
+/** `auto` (#130): `start` with a start icon or on an icon size, else `center`. */
+function resolvePlacement(placement, children, size) {
+	if (placement !== "auto") return placement;
+	return size.startsWith("icon") || hasStartIcon(children) ? "start" : "center";
+}
+/**
+* Loading content. `start` (#128): the Arc spinner takes the start icon's place at once, so the
+* width stays the same; icon-only sizes swap their icon; with no start icon it sits before the
+* label and the button grows. `center` (#130): the spinner sits over the middle and the content
+* keeps its place, transparent (opacity, not visibility, so it still names the button).
+*/
+function loadingContent(children, size, label, placement) {
+	if (placement === "center") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"data-slot": "button-spinner",
+		className: "absolute inset-0 flex items-center justify-center",
+		children: /* @__PURE__ */ jsx(Spinner, {
+			size: SPINNER_SIZE[size],
+			label
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		"data-slot": "button-content",
+		className: "inline-flex items-center gap-[inherit] opacity-0",
+		children
+	})] });
+	const spinner = /* @__PURE__ */ jsx(Spinner, {
+		"data-icon": "inline-start",
+		size: SPINNER_SIZE[size],
+		label
+	}, "spinner");
+	if (size.startsWith("icon")) return spinner;
+	let swapped = false;
+	const rest = Children.map(children, (child) => {
+		if (!swapped && isValidElement(child) && child.props["data-icon"] === "inline-start") {
+			swapped = true;
+			return spinner;
+		}
+		return child;
+	});
+	return swapped ? rest : [spinner, ...rest ?? []];
+}
+function Button$1({ className, variant = "default", size = "default", loading = false, loadingLabel = "Loading", loadingPlacement = "auto", children, onClick, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, ...props }) {
+	const press = usePress();
+	const cue = useCue("button");
+	const { sound = true } = useControlDefaults();
+	const placement = loading ? resolvePlacement(loadingPlacement, children, size ?? "default") : null;
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), placement === "center" && "relative", className),
+		"aria-busy": loading || void 0,
+		"data-loading": loading ? "" : void 0,
+		"data-loading-placement": placement ?? void 0,
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (!loading) press.onPointerDown(event);
+		},
+		onPointerUp: (event) => {
+			onPointerUp?.(event);
+			press.onPointerUp();
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			press.onPointerLeave();
+		},
+		onPointerCancel: (event) => {
+			onPointerCancel?.(event);
+			press.onPointerCancel();
+		},
+		onClick: (event) => {
+			if (loading) {
+				event.preventDefault();
+				event.preventBaseUIHandler();
+				return;
+			}
+			onClick?.(event);
+			const el = event.currentTarget;
+			const trigger = el.hasAttribute("aria-haspopup") || el.hasAttribute("aria-expanded");
+			if (sound && !event.defaultPrevented && !trigger) cue("press", { yield: true });
+		},
+		...props,
+		children: placement ? loadingContent(children, size ?? "default", loadingLabel, placement) : children
+	});
+}
+export { Button$1 as Button, buttonVariants };

package/dist/button/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Button, buttonVariants } from "./button.js";
+export { Button, buttonVariants };