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

package/dist/toggle-group/toggle-group.d.ts

@@ -0,0 +1,64 @@
+
+import { OverflowPriority } from "../toolbar/overflow.js";
+import { ToolbarItemProps } from "../toolbar/toolbar-item.js";
+import { ComponentProps } from "react";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+export type ToggleGroupSize = "xs" | "sm" | "md" | "lg";
+export type ToggleGroupVariant = "ghost" | "outline";
+interface BaseProps extends Omit<ComponentProps<typeof ToggleGroup>, "value" | "defaultValue" | "onValueChange" | "multiple"> {
+  /** Names the group for screen readers. */
+  "aria-label": string;
+  /** `outline`: items joined in one bordered track. */
+  variant?: ToggleGroupVariant | undefined;
+  /** Inherits the Toolbar's size inside one; `md` otherwise. */
+  size?: ToggleGroupSize | undefined;
+  /**
+   * Inside an `overflow="menu"` Toolbar the group moves into the More menu as one unit: radio
+   * items (single) or checkbox items (multiple), so its state survives. `"never"` keeps it.
+   */
+  overflowPriority?: OverflowPriority | undefined;
+}
+export interface ToggleGroupSingleProps extends BaseProps {
+  /** `"single"` (default): one item on at a time; `"multiple"`: any number. */
+  type?: "single" | undefined;
+  /** Single: the pressed item's value, or `null` for none. Controlled. */
+  value?: string | null | undefined;
+  /** Single: the item pressed at first (uncontrolled). */
+  defaultValue?: string | null | undefined;
+  /** Single: called with the new value, `null` when the last item is switched off. */
+  onValueChange?: ((value: string | null) => void) | undefined;
+  /** The pressed item can't be switched off (alignment, view switchers). */
+  required?: boolean | undefined;
+}
+export interface ToggleGroupMultipleProps extends BaseProps {
+  /** `"single"` (default): one item on at a time; `"multiple"`: any number. */
+  type: "multiple";
+  /** Multiple: the pressed items' values. Controlled. */
+  value?: string[] | undefined;
+  /** Multiple: the items pressed at first (uncontrolled). */
+  defaultValue?: string[] | undefined;
+  /** Multiple: called with the new array of pressed values. */
+  onValueChange?: ((value: string[]) => void) | undefined;
+  required?: never;
+}
+export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+/**
+ * A set of toggles where one (`type="single"`) or several (`"multiple"`) can be on, on Base UI
+ * `ToggleGroup`. Inside a `Toolbar` its items join the toolbar's arrow-key navigation.
+ */
+declare function ToggleGroup$1(props: ToggleGroupProps): import("react").JSX.Element | null;
+declare namespace ToggleGroup$1 {
+  var Item: typeof ToggleGroupItem;
+}
+export interface ToggleGroupItemProps extends Omit<ToolbarItemProps, "value" | "pressed" | "onPressedChange"> {
+  /** Identifies the item in the group's value. Required. */
+  value: string;
+  /** Display-only shortcut, shown in the tooltip. */
+  shortcut?: string | undefined;
+}
+/**
+ * One toggle in a `ToggleGroup`: a ghost Button (#84), icon-only (with a tooltip) when it has
+ * only an `icon`, a text toggle otherwise. A shortcut shows in the tooltip for both.
+ */
+declare function ToggleGroupItem({ shortcut, tooltip, ...rest }: ToggleGroupItemProps): import("react").JSX.Element;
+export { ToggleGroup$1 as ToggleGroup };

package/dist/toggle-group/toggle-group.js

@@ -0,0 +1,95 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ControlDefaultsContext, useControlDefaults } from "../lib/control-defaults.js";
+import { DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "../dropdown-menu/dropdown-menu.js";
+import { tv } from "../lib/tv.js";
+import { ToolbarItem } from "../toolbar/toolbar-item.js";
+import { useOverflowUnit } from "../toolbar/overflow.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useState } from "react";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+// src/toggle-group/toggle-group.tsx
+const groupStyles = tv({
+	base: ["inline-flex items-center data-[orientation=vertical]:flex-col", "data-[orientation=horizontal]:pointer-coarse:[&_button]:before:min-w-0 data-[orientation=vertical]:pointer-coarse:[&_button]:before:min-h-0"],
+	variants: { variant: {
+		ghost: "gap-0.5",
+		outline: "gap-0 rounded-control border border-border-default [&>*]:rounded-none [&>*:first-child]:rounded-s-control [&>*:last-child]:rounded-e-control [&>*+*]:border-s-border-default data-[orientation=vertical]:[&>*+*]:border-s-transparent data-[orientation=vertical]:[&>*+*]:border-t-border-default"
+	} },
+	defaultVariants: { variant: "ghost" }
+});
+/**
+* A set of toggles where one (`type="single"`) or several (`"multiple"`) can be on, on Base UI
+* `ToggleGroup`. Inside a `Toolbar` its items join the toolbar's arrow-key navigation.
+*/
+function ToggleGroup$1(props) {
+	const { type = "single", value: valueProp, defaultValue, onValueChange, required = false, variant = "ghost", size: sizeProp, overflowPriority, orientation: orientationProp, className, children, ...rest } = props;
+	const defaults = useControlDefaults();
+	const multiple = type === "multiple";
+	const toArray = (v) => Array.isArray(v) ? v : v === null || v === void 0 ? [] : [v];
+	const [inner, setInner] = useState(() => toArray(defaultValue));
+	const controlled = valueProp !== void 0;
+	const current = controlled ? toArray(valueProp) : inner;
+	const handleChange = (next) => {
+		if (!multiple && required && next.length === 0) return;
+		if (!controlled) setInner(next);
+		onValueChange?.(multiple ? next : next[0] ?? null);
+	};
+	const size = sizeProp ?? defaults.size ?? "md";
+	const orientation = orientationProp ?? defaults.orientation ?? "horizontal";
+	const items = Children.toArray(children).flatMap((child) => isValidElement(child) && child.type === ToggleGroupItem ? [child.props] : []);
+	const label = rest["aria-label"];
+	const menu = multiple ? /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [label && /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+		disabled: item.disabled,
+		checked: current.includes(item.value),
+		onCheckedChange: (on) => handleChange(on ? [...current, item.value] : current.filter((v) => v !== item.value)),
+		children: [item.icon, item["aria-label"] ?? item.children ?? item.value]
+	}, item.value))] }) : /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [label && /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+		value: current[0] ?? null,
+		onValueChange: (next) => handleChange(next ? [next] : []),
+		children: items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+			value: item.value,
+			disabled: item.disabled,
+			children: [item.icon, item["aria-label"] ?? item.children ?? item.value]
+		}, item.value))
+	})] });
+	const { hidden, unitProps, placeholder } = useOverflowUnit({
+		kind: "group",
+		priority: overflowPriority,
+		menu
+	});
+	if (hidden) return placeholder;
+	return /* @__PURE__ */ jsx(ControlDefaultsContext.Provider, {
+		value: {
+			...defaults,
+			size,
+			iconTransition: defaults.iconTransition ?? "instant",
+			sound: defaults.sound ?? false
+		},
+		children: /* @__PURE__ */ jsx(ToggleGroup, {
+			"data-slot": "toggle-group",
+			"data-variant": variant,
+			"data-size": size,
+			multiple,
+			orientation,
+			value: current,
+			onValueChange: handleChange,
+			className: cn(groupStyles({ variant }), className),
+			...unitProps,
+			...rest,
+			children
+		})
+	});
+}
+/**
+* One toggle in a `ToggleGroup`: a ghost Button (#84), icon-only (with a tooltip) when it has
+* only an `icon`, a text toggle otherwise. A shortcut shows in the tooltip for both.
+*/
+function ToggleGroupItem({ shortcut, tooltip, ...rest }) {
+	return /* @__PURE__ */ jsx(ToolbarItem, {
+		...rest,
+		"data-slot": "toggle-group-item",
+		tooltip: tooltip ?? (shortcut ? { shortcut } : void 0)
+	});
+}
+ToggleGroup$1.Item = ToggleGroupItem;
+export { ToggleGroup$1 as ToggleGroup };

package/dist/tokens/dist/motion.d.ts

@@ -0,0 +1,24 @@
+
+export declare const sound: {
+  readonly $note: "On by default (decision #30): plays only after a user action, never on load; quiet; one remembered global mute; silent under prefers-reduced-motion; apps can turn the default off. Cue values are UISFX 0.4.0 cue names (MIT code, CC0 audio), checked against its CUES export; feel is a UISFX pack name (decision #57).";
+  readonly enabled: true;
+  readonly volume: 0.35;
+  readonly feel: "zen";
+  readonly library: "uisfx";
+  readonly libraryVersion: "0.4.0";
+  readonly cue: {
+    readonly "input.press": "press";
+    readonly "input.toggle-on": "toggle-on";
+    readonly "input.toggle-off": "toggle-off";
+    readonly "selection.select": "select";
+    readonly "navigation.open": "open";
+    readonly "navigation.close": "close";
+    readonly "movement.snap": "snap";
+    readonly "movement.drop": "drop";
+    readonly "feedback.success": "success";
+    readonly "feedback.warning": "warning";
+    readonly "feedback.error": "error";
+    readonly "commerce.payment": "purchase";
+    readonly "progress.loop": "loading";
+  };
+};

package/dist/{motion-NQq2BA78.js → tokens/dist/motion.js}

@@ -123,4 +123,4 @@ const sound = {
 		"progress.loop": "loading"
 	}
 };
-export { spring as a, sound as i, loader as n, scale as r, blur as t };
+export { blur, loader, scale, sound, spring };

package/dist/toolbar/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarInputProps, ToolbarLinkProps, ToolbarProps, ToolbarSize } from "./toolbar.js";
+export { Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSize };

package/dist/toolbar/overflow.d.ts

@@ -0,0 +1,4 @@
+
+import { ReactNode } from "react";
+/** `"never"` keeps an item visible; higher numbers collapse into the More menu first. */
+export type OverflowPriority = number | "never";

package/dist/toolbar/overflow.js

@@ -0,0 +1,242 @@
+"use client";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
+import { ToolbarItem } from "./toolbar-item.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, createContext, useCallback, useContext, useId, useLayoutEffect, useRef, useSyncExternalStore } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+// src/toolbar/overflow.tsx
+/**
+* Units register here; the Toolbar measures them and decides which are hidden. Hidden units stay
+* mounted (so a ToggleGroup keeps its state) but render nothing inline and show their `menu`
+* form in the More menu instead.
+*/
+var OverflowStore = class {
+	units = /* @__PURE__ */ new Map();
+	hidden = /* @__PURE__ */ new Set();
+	listeners = /* @__PURE__ */ new Set();
+	version = 0;
+	moreWidth = 0;
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	};
+	getVersion = () => this.version;
+	isHidden = (id) => this.hidden.has(id);
+	emit() {
+		this.version++;
+		for (const listener of this.listeners) listener();
+	}
+	ensure(id) {
+		let unit = this.units.get(id);
+		if (!unit) {
+			unit = {
+				kind: "item",
+				priority: 0,
+				menu: null,
+				el: null,
+				width: 0,
+				rank: Number.MAX_SAFE_INTEGER
+			};
+			this.units.set(id, unit);
+		}
+		return unit;
+	}
+	upsert(id, patch) {
+		Object.assign(this.ensure(id), patch);
+		if (this.hidden.has(id)) this.emit();
+	}
+	remove(id) {
+		this.units.delete(id);
+		if (this.hidden.delete(id)) this.emit();
+	}
+	elementOf(id) {
+		return this.units.get(id)?.el ?? null;
+	}
+	setElement(id, el) {
+		this.ensure(id).el = el;
+	}
+	setMoreWidth(width) {
+		if (width > 0) this.moreWidth = width;
+	}
+	/** Hidden units' menu forms in toolbar order, for the More menu. */
+	hiddenMenus() {
+		return [...this.units.entries()].filter(([id, unit]) => this.hidden.has(id) && unit.kind !== "separator").sort(([, a], [, b]) => a.rank - b.rank).map(([id, unit]) => ({
+			id,
+			kind: unit.kind,
+			menu: unit.menu
+		}));
+	}
+	/** Measures the toolbar and hides the fewest units (highest priority number first). */
+	layout(root) {
+		const parent = root.parentElement;
+		if (!parent) return;
+		const rootStyle = getComputedStyle(root);
+		const parentStyle = getComputedStyle(parent);
+		const px = (value) => Number.parseFloat(value) || 0;
+		const room = parent.clientWidth - px(parentStyle.paddingLeft) - px(parentStyle.paddingRight) - (root.offsetWidth - root.clientWidth) - px(rootStyle.paddingLeft) - px(rootStyle.paddingRight);
+		const gap = px(rootStyle.columnGap);
+		const unitEls = [...root.querySelectorAll("[data-overflow-unit]")];
+		for (const [id, unit] of this.units) {
+			if (!unit.el?.isConnected) continue;
+			unit.rank = unitEls.indexOf(unit.el);
+			if (!this.hidden.has(id)) unit.width = unit.el.getBoundingClientRect().width;
+		}
+		const more = this.moreWidth || Math.max(0, ...[...this.units.values()].map((u) => u.el?.getBoundingClientRect().height ?? 0));
+		const ordered = [...this.units.entries()].sort(([, a], [, b]) => a.rank - b.rank);
+		const needs = (hidden) => {
+			const shown = ordered.filter(([id]) => !hidden.has(id));
+			const items = shown.reduce((sum, [, u]) => sum + u.width, 0);
+			const slots = shown.length + (hidden.size > 0 ? 1 : 0);
+			return items + (hidden.size > 0 ? more : 0) + gap * Math.max(0, slots - 1);
+		};
+		const hidden = /* @__PURE__ */ new Set();
+		if (needs(hidden) > room) {
+			const candidates = ordered.filter(([, u]) => u.kind !== "separator" && u.priority !== "never").sort(([, a], [, b]) => {
+				const pa = a.priority;
+				return b.priority - pa || b.rank - a.rank;
+			});
+			for (const [id] of candidates) {
+				hidden.add(id);
+				hideOrphanSeparators(ordered, hidden);
+				if (needs(hidden) <= room) break;
+			}
+		}
+		if (!(hidden.size === this.hidden.size && [...hidden].every((id) => this.hidden.has(id)))) {
+			const active = root.ownerDocument.activeElement;
+			this.refocus = [...hidden].some((id) => {
+				const el = this.units.get(id)?.el;
+				return !this.hidden.has(id) && el !== null && el !== void 0 && el.contains(active);
+			});
+			const more = this.moreEl;
+			const onMore = more?.isConnected && (more.contains(active) || more.getAttribute("aria-expanded") === "true" && active?.closest("[role=\"menu\"]")?.id === more.getAttribute("aria-controls"));
+			const returning = hidden.size === 0 && onMore ? ordered.find(([id]) => this.hidden.has(id) && this.units.get(id)?.kind !== "separator") : void 0;
+			this.focusOnReturn = returning?.[0] ?? null;
+			this.hidden = hidden;
+			this.emit();
+		}
+	}
+	refocus = false;
+	focusOnReturn = null;
+	/** True once for the unit that should take focus when it renders again (see `layout`). */
+	takeFocusOnReturn(id) {
+		if (this.focusOnReturn !== id) return false;
+		this.focusOnReturn = null;
+		return true;
+	}
+	/** The More button, while it is shown. */
+	moreEl = null;
+	setMoreElement(el) {
+		this.moreEl = el;
+	}
+	/** True once after a layout hid the focused item; the More button then takes focus. */
+	takeRefocus() {
+		const refocus = this.refocus;
+		this.refocus = false;
+		return refocus;
+	}
+};
+/** A separator hides when the unit on either side of it is hidden or missing. */
+function hideOrphanSeparators(ordered, hidden) {
+	const items = (list) => list.filter(([, u]) => u.kind !== "separator");
+	ordered.forEach(([id, u], index) => {
+		if (u.kind !== "separator") return;
+		const before = items(ordered.slice(0, index)).at(-1);
+		const after = items(ordered.slice(index + 1))[0];
+		if (!before || !after || hidden.has(before[0]) || hidden.has(after[0])) hidden.add(id);
+	});
+}
+const OverflowContext = createContext(null);
+/**
+* Registers a toolbar part for overflow. Returns `hidden` (render nothing inline) and the props
+* for its element. Outside an `overflow="menu"` toolbar it does nothing.
+*/
+function useOverflowUnit({ kind, priority = 0, menu }) {
+	const store = useContext(OverflowContext);
+	const id = useId();
+	const hidden = useSyncExternalStore(store?.subscribe ?? noopSubscribe, () => store?.isHidden(id) ?? false, () => false);
+	useLayoutEffect(() => {
+		store?.upsert(id, {
+			kind,
+			priority,
+			menu
+		});
+	});
+	useLayoutEffect(() => store ? () => store.remove(id) : void 0, [store, id]);
+	const ref = useCallback((el) => store?.setElement(id, el), [store, id]);
+	const shown = store !== null && !hidden;
+	useLayoutEffect(() => {
+		if (!shown || !store?.takeFocusOnReturn(id)) return;
+		const el = store.elementOf(id);
+		(el?.matches("button, a[href]") ? el : el?.querySelector("button:not(:disabled), a[href]"))?.focus();
+	}, [
+		shown,
+		store,
+		id
+	]);
+	return {
+		hidden: store !== null && hidden,
+		unitProps: store ? {
+			ref,
+			"data-overflow-unit": ""
+		} : {},
+		/** Render this while hidden: it keeps the unit's place in the toolbar order. */
+		placeholder: store ? /* @__PURE__ */ jsx("span", {
+			hidden: true,
+			ref,
+			"data-overflow-unit": ""
+		}) : null
+	};
+}
+const noopSubscribe = () => () => {};
+const Ellipsis = () => /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 16 16",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "3.5",
+			cy: "8",
+			r: "1.25",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "1.25",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12.5",
+			cy: "8",
+			r: "1.25",
+			fill: "currentColor"
+		})
+	]
+});
+/** The trailing More button: shows the hidden units' menu forms, in toolbar order. */
+function OverflowMore({ store, label }) {
+	const version = useSyncExternalStore(store.subscribe, store.getVersion, store.getVersion);
+	const menus = store.hiddenMenus();
+	const button = useRef(null);
+	const measure = useCallback((el) => {
+		button.current = el;
+		store.setMoreElement(el);
+		if (el) store.setMoreWidth(el.getBoundingClientRect().width);
+	}, [store]);
+	useLayoutEffect(() => {
+		if (version && store.takeRefocus()) button.current?.focus();
+	}, [store, version]);
+	if (menus.length === 0) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Toolbar.Button, {
+		"data-slot": "toolbar-overflow",
+		ref: measure,
+		render: /* @__PURE__ */ jsx(ToolbarItem, {
+			icon: /* @__PURE__ */ jsx(Ellipsis, {}),
+			"aria-label": label
+		})
+	}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		className: "w-auto",
+		children: menus.map(({ id, kind, menu }, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 && (kind === "group" || menus[index - 1]?.kind === "group") && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), menu] }, id))
+	})] });
+}
+export { OverflowContext, OverflowMore, OverflowStore, useOverflowUnit };

package/dist/toolbar/toolbar-item.d.ts

@@ -0,0 +1,29 @@
+
+import { ComponentPropsWithRef, ReactNode } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+export type ToolbarItemSize = "xs" | "sm" | "md" | "lg";
+/** `left` / `right` are logical: they follow the reading direction, so they mirror in RTL. */
+export type ToolbarTooltipSide = "top" | "bottom" | "left" | "right";
+export interface ToolbarItemTooltip {
+  /** Defaults to the `aria-label`. */
+  content?: ReactNode;
+  /** Display-only shortcut, e.g. `"mod+B"`. */
+  shortcut?: string | undefined;
+  side?: ToolbarTooltipSide | undefined;
+}
+export type PressedChangeDetails = Parameters<NonNullable<ComponentPropsWithRef<typeof Toggle>["onPressedChange"]>>[1];
+export interface ToolbarItemProps extends Omit<ComponentPropsWithRef<"button">, "children" | "value" | "color"> {
+  /** Icon-only when there are no children; then `aria-label` is required. */
+  icon?: ReactNode;
+  children?: ReactNode;
+  /** Controlled toggle state (`aria-pressed`). */
+  pressed?: boolean | undefined;
+  /** Called when the toggle is pressed or released; makes the item a toggle. */
+  onPressedChange?: ((pressed: boolean, details: PressedChangeDetails) => void) | undefined;
+  /** Makes it a ToggleGroup item (Base UI `Toggle` reads the group's state). */
+  value?: string | undefined;
+  /** On by default for icon-only items (shows the `aria-label`); off for text items. */
+  tooltip?: boolean | ToolbarItemTooltip | undefined;
+  /** Defaults to the Toolbar's or ToggleGroup's size. */
+  size?: ToolbarItemSize | undefined;
+}

package/dist/toolbar/toolbar-item.js

@@ -0,0 +1,71 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useControlDefaults } from "../lib/control-defaults.js";
+import { Button } from "../button/button.js";
+import { Kbd } from "../kbd/kbd.js";
+import { ariaShortcut, formatShortcut } from "../lib/shortcut.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+// src/toolbar/toolbar-item.tsx
+const ICON_SIZE = {
+	xs: "icon-xs",
+	sm: "icon-sm",
+	md: "icon",
+	lg: "icon-lg"
+};
+const TEXT_SIZE = {
+	xs: "xs",
+	sm: "sm",
+	md: "default",
+	lg: "lg"
+};
+const SIDE = {
+	top: "top",
+	bottom: "bottom",
+	left: "inline-start",
+	right: "inline-end"
+};
+/**
+* A ghost Button (#84) sized to its toolbar, as a toggle when it has `pressed`, `onPressedChange`
+* or a `value`, with a tooltip for icon-only items. On-state: shadcn's toggle (`bg-muted`).
+*/
+function ToolbarItem({ icon, children, pressed, onPressedChange, value, tooltip, size: sizeProp, className, type, ...rest }) {
+	const defaults = useControlDefaults();
+	const size = sizeProp ?? defaults.size ?? "md";
+	const iconOnly = icon !== void 0 && (children === void 0 || children === null);
+	const toggle = pressed !== void 0 || onPressedChange !== void 0 || value !== void 0;
+	const label = rest["aria-label"];
+	const button = /* @__PURE__ */ jsx(Button, {
+		...rest,
+		type: type ?? "button",
+		variant: "ghost",
+		size: iconOnly ? ICON_SIZE[size] : TEXT_SIZE[size],
+		className: cn("data-pressed:bg-muted data-pressed:text-foreground", defaults.instantColors && "transition-none", className),
+		children: iconOnly ? icon : /* @__PURE__ */ jsxs(Fragment, { children: [icon !== void 0 && /* @__PURE__ */ jsx("span", {
+			"data-icon": "inline-start",
+			"aria-hidden": "true",
+			className: "contents",
+			children: icon
+		}), children] })
+	});
+	let root = button;
+	if (toggle) root = /* @__PURE__ */ jsx(Toggle, {
+		disabled: rest.disabled,
+		value,
+		pressed,
+		onPressedChange,
+		render: button
+	});
+	const options = tooltip === false ? void 0 : tooltip === true ? {} : tooltip;
+	const content = options?.content ?? (iconOnly || options ? label?.trim() : void 0);
+	if ((iconOnly || tooltip !== void 0) && options && content) root = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: root,
+		"aria-keyshortcuts": options.shortcut ? ariaShortcut(options.shortcut) : void 0
+	}), /* @__PURE__ */ jsxs(TooltipContent, {
+		side: SIDE[options.side ?? "top"],
+		children: [content, options.shortcut && /* @__PURE__ */ jsx(Kbd, { children: formatShortcut(options.shortcut) })]
+	})] });
+	return root;
+}
+export { ToolbarItem };

package/dist/toolbar/toolbar.d.ts

@@ -0,0 +1,73 @@
+
+import { Input } from "../input/input.js";
+import { OverflowPriority } from "./overflow.js";
+import { ToolbarItemProps } from "./toolbar-item.js";
+import { ComponentProps, ReactNode } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+export type ToolbarSize = "xs" | "sm" | "md" | "lg";
+export interface ToolbarProps extends Omit<ComponentProps<typeof Toolbar.Root>, "className"> {
+  /** Names the toolbar for screen readers. */
+  "aria-label": string;
+  /** Passed to every item. Default `sm`. */
+  size?: ToolbarSize | undefined;
+  /** `floating`: a raised surface for selection and bubble toolbars. */
+  surface?: "none" | "floating" | undefined;
+  /**
+   * What happens when items don't fit. `menu` (default): items move, highest `overflowPriority`
+   * first, into a trailing More menu (horizontal toolbars). `scroll`: one row that scrolls
+   * sideways with edge fades. `none`: items wrap.
+   */
+  overflow?: "menu" | "scroll" | "none" | undefined;
+  /** Accessible name of the More button. Default "More". */
+  overflowLabel?: string | undefined;
+  /** Play sounds for the items (toolbars are silent by default). */
+  sound?: boolean | undefined;
+  /** Classes for the toolbar root. */
+  className?: string | undefined;
+  children?: ReactNode;
+}
+/**
+ * Groups related controls behind one Tab stop, with arrow keys, Home and End moving between items
+ * (Base UI `Toolbar`). Items get the toolbar's size, swap icons instantly, change colour without
+ * transitions and stay silent unless `sound` is set: a toolbar is high-frequency.
+ */
+declare function ToolbarRoot({ size, surface, overflow, overflowLabel, sound, orientation, className, children, onKeyDown, ref, ...props }: ToolbarProps): import("react").JSX.Element;
+interface OverflowProps {
+  /** `"never"` keeps the item visible; higher numbers move into the More menu first. Default 0. */
+  overflowPriority?: OverflowPriority | undefined;
+}
+export type ToolbarButtonProps = OverflowProps & ToolbarItemProps;
+/**
+ * A ghost Button (#84): icon-only (with a tooltip) when it has only an `icon`, labelled otherwise;
+ * a toggle with `pressed`. Disabled items stay focusable so people can discover them.
+ */
+declare function ToolbarButton({ disabled, overflowPriority, ...props }: ToolbarButtonProps): import("react").JSX.Element | null;
+export interface ToolbarLinkProps extends ComponentProps<typeof Toolbar.Link>, OverflowProps {
+  className?: string | undefined;
+}
+/** A link styled like a ghost toolbar item. */
+declare function ToolbarLink({ className, overflowPriority, ...props }: ToolbarLinkProps): import("react").JSX.Element | null;
+export interface ToolbarGroupProps extends ComponentProps<typeof Toolbar.Group> {
+  /** Names the cluster (`role="group"`). */
+  "aria-label"?: string | undefined;
+  className?: string | undefined;
+}
+/** A labelled cluster of items. */
+declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
+/** 1 px `border-default`, 60% of the item height, perpendicular to the toolbar. */
+declare function ToolbarSeparator({ className, ...props }: ComponentProps<typeof Toolbar.Separator>): import("react").JSX.Element | null;
+export type ToolbarInputProps = ComponentProps<typeof Input>;
+/**
+ * A text input in the toolbar (search, find, a URL). At most one, placed last: arrow keys move
+ * the caret inside it (Base UI). The base-nova Input (#84) without its resting border; never
+ * collapses.
+ */
+declare function ToolbarInput({ className, ...props }: ToolbarInputProps): import("react").JSX.Element;
+declare const Toolbar$1: typeof ToolbarRoot & {
+  Button: typeof ToolbarButton;
+  Input: typeof ToolbarInput;
+  Link: typeof ToolbarLink;
+  Group: typeof ToolbarGroup;
+  Separator: typeof ToolbarSeparator;
+};
+export { Toolbar$1 as Toolbar };