@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/checkbox/checkbox.mjs

@@ -0,0 +1,40 @@
+import { tv } from "../../lib/tv.mjs";
+import { CheckboxIndicator } from "./checkbox-indicator.mjs";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/components/checkbox/checkbox.tsx
+const checkbox = tv({ slots: {
+	root: [
+		"relative inline-flex size-5 shrink-0 touch-manipulation items-center justify-center outline-none",
+		"rounded-sticker focus-visible:shadow-focus",
+		"data-disabled:cursor-not-allowed",
+		"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-[''] pointer-coarse:after:-inset-y-3",
+		"[label>&]:my-[max(0px,calc((1lh-1.25rem)/2))]",
+		"[label>&]:after:-inset-y-[calc(max(0px,(1lh-1.25rem)/2)+4px)]"
+	],
+	indicator: "pointer-events-none"
+} });
+function Checkbox$1({ shape = "square", className, ...props }) {
+	const { root, indicator } = checkbox();
+	const renderIndicator = useCallback((indicatorProps, state) => /* @__PURE__ */ jsx(CheckboxIndicator, {
+		...indicatorProps,
+		checked: state.checked || state.indeterminate,
+		disabled: state.disabled,
+		mark: state.indeterminate ? "minus" : "check",
+		shape
+	}), [shape]);
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: root({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			keepMounted: true,
+			"data-slot": "checkbox-indicator",
+			className: indicator(),
+			render: renderIndicator
+		})
+	});
+}
+//#endregion
+export { Checkbox$1 as Checkbox };

package/dist/components/checkbox/index.d.mts

@@ -0,0 +1,3 @@
+import { Checkbox, CheckboxProps } from "./checkbox.mjs";
+import { CheckboxIndicator, CheckboxIndicatorProps } from "./checkbox-indicator.mjs";
+export { Checkbox, CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxProps };

package/dist/components/choice-list/choice-list.d.mts

@@ -0,0 +1,103 @@
+import { ReactNode } from "react";
+//#region src/components/choice-list/choice-list.d.ts
+export type ChoiceListItem = {
+  value: string;
+  /** The row's name. The radio or checkbox is named by this alone. */
+  label: ReactNode;
+  /** What the search matches, case-insensitively. Defaults to `label` when it is a string. */
+  searchText?: string;
+  /**
+   * Up to two lines under the name, each cut to one line. An empty line
+   * (null, false or "") is not drawn. Colour inside a line is the caller's.
+   */
+  description?: ReactNode | readonly ReactNode[];
+  /** Drawn before the radio's or checkbox's row text: an avatar, an icon. */
+  media?: ReactNode;
+  /**
+   * A button at the end of the row, such as one that opens details. It sits
+   * outside the row's label and the group: clicking it chooses nothing, and
+   * it is a Tab stop of its own after the group, in row order.
+   */
+  action?: ReactNode;
+  disabled?: boolean;
+  /** The `value` of the group in `groups` this item is listed under. */
+  group?: string;
+};
+export type ChoiceListGroup = {
+  value: string;
+  /** The small heading over the group's rows, such as "Agents". */
+  label: ReactNode;
+};
+type ChoiceListCommonProps = {
+  items: readonly ChoiceListItem[];
+  /**
+   * When the search box shows. `"always"` when people look for an item they
+   * know by name, such as a person: the box shows at any count, and with a
+   * mouse or trackpad focus starts in it. `"auto"` when people choose by
+   * comparing the rows: the box shows only above 5 items.
+   */
+  search?: "auto" | "always";
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  disabled?: boolean;
+  /**
+   * The search box's accessible name. Required: any list can come to search,
+   * since `"auto"` shows the box once the items, usually from data, pass 5.
+   */
+  searchLabel: string;
+  searchPlaceholder?: string;
+  /** The search box's text when the list first draws, such as a search carried over. */
+  defaultSearchValue?: string;
+  /**
+   * The search box's text, for a caller that uses it: a "Create “…”" row
+   * named after it, or a no-match line that quotes it. With it, the caller
+   * owns the text, and `onSearchValueChange` reports each change.
+   */
+  searchValue?: string;
+  onSearchValueChange?: (value: string) => void;
+  /**
+   * The values of the items that match the search text, in the order to show
+   * them, for a caller with its own search (a ranked people search shared
+   * with mentions). With it ChoiceList doesn't match `searchText` itself; it
+   * still keeps the chosen rows first and says when nothing matches.
+   */
+  matchedValues?: readonly string[];
+  /** The clear button's accessible name. */
+  clearSearchLabel: string;
+  /** The line under the chosen rows when nothing else matches. */
+  noMatchLabel?: ReactNode;
+  /** The line drawn when there are no items at all. */
+  empty?: ReactNode;
+  /**
+   * Headings that split the rows by kind, in this order, such as Agents then
+   * People. Each item names its group; a group with no rows to show, or a
+   * search that leaves it empty, draws no heading.
+   */
+  groups?: readonly ChoiceListGroup[];
+  /**
+   * A row of the caller's under the list, inside its frame, that stays in
+   * view while the rows scroll: the way out when the item isn't there, such
+   * as "Create an agent".
+   */
+  footer?: ReactNode;
+  /**
+   * The list takes the height it is given and its rows scroll inside it, for
+   * a sheet or panel whose main content is the list. Otherwise a list with a
+   * search scrolls past 18rem.
+   */
+  fill?: boolean;
+  className?: string;
+};
+export type ChoiceListSingleProps = ChoiceListCommonProps & {
+  multiple?: false;
+  value: string | null;
+  onValueChange: (value: string) => void;
+};
+export type ChoiceListMultipleProps = ChoiceListCommonProps & {
+  multiple: true;
+  value: readonly string[];
+  onValueChange: (value: string[]) => void;
+};
+export type ChoiceListProps = ChoiceListSingleProps | ChoiceListMultipleProps;
+export declare function ChoiceList(props: ChoiceListProps): import("react").JSX.Element;
+//#endregion

package/dist/components/choice-list/choice-list.mjs

@@ -0,0 +1,301 @@
+import { Button } from "../button/button.mjs";
+import { Checkbox } from "../checkbox/checkbox.mjs";
+import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/input-group.mjs";
+import { RadioGroup, RadioGroupItem } from "../radio-group/radio-group.mjs";
+import { choiceList } from "./choice-list.recipe.mjs";
+import { Search, X } from "lucide-react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+//#region src/components/choice-list/choice-list.tsx
+const SEARCH_ABOVE = 5;
+const MAX_DESCRIPTION_LINES = 2;
+function isDrawn(line) {
+	return line !== null && line !== void 0 && line !== false && line !== "";
+}
+function descriptionLines(description) {
+	return (Array.isArray(description) ? description : [description]).filter(isDrawn);
+}
+function CutLine({ id, slot, className, children }) {
+	const ref = useOverflowTitle();
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		id,
+		"data-slot": slot,
+		className,
+		children
+	});
+}
+const NOT_TEXT_INPUTS = /* @__PURE__ */ new Set([
+	"button",
+	"checkbox",
+	"radio",
+	"submit",
+	"reset",
+	"image",
+	"file",
+	"range",
+	"color"
+]);
+function isTextEntry(element) {
+	if (!(element instanceof HTMLElement)) return false;
+	if (element.isContentEditable || element instanceof HTMLTextAreaElement) return true;
+	if (element instanceof HTMLSelectElement) return true;
+	return element instanceof HTMLInputElement && !NOT_TEXT_INPUTS.has(element.type);
+}
+function searchTextOf(item) {
+	if (item.searchText !== void 0) return item.searchText;
+	return typeof item.label === "string" ? item.label : "";
+}
+function visibleItems(items, needle, pinned, chosen, matchedValues) {
+	if (!needle) return {
+		rows: items,
+		noMatch: false
+	};
+	const matched = matchedValues ? new Set(matchedValues) : null;
+	const matches = (item) => matched ? matched.has(item.value) : searchTextOf(item).toLowerCase().includes(needle);
+	const pinnedSet = new Set(pinned);
+	const isPinned = (item) => pinnedSet.has(item.value);
+	const top = items.filter((item) => isPinned(item) || chosen.includes(item.value) && !matches(item));
+	const byValue = matchedValues ? new Map(items.map((item) => [item.value, item])) : null;
+	const rest = (byValue && matched ? [...matched].flatMap((value) => byValue.get(value) ?? []) : items).filter((item) => !top.includes(item) && matches(item));
+	return {
+		rows: [...top, ...rest],
+		noMatch: !items.some(matches)
+	};
+}
+function layoutSections(rows, groups) {
+	const known = new Set(groups?.map((group) => group.value));
+	const sections = groups ? groups.map((group) => ({
+		group,
+		rows: rows.filter((item) => item.group === group.value)
+	})) : [];
+	sections.push({
+		group: null,
+		rows: rows.filter((item) => !groups || item.group === void 0 || !known.has(item.group))
+	});
+	const drawn = sections.filter((section) => section.rows.length > 0);
+	const gridRowOf = /* @__PURE__ */ new Map();
+	let gridRows = 0;
+	for (const section of drawn) {
+		if (section.group) gridRows += 1;
+		for (const item of section.rows) {
+			gridRows += 1;
+			gridRowOf.set(item.value, gridRows);
+		}
+	}
+	return {
+		sections: drawn,
+		gridRowOf,
+		gridRows
+	};
+}
+function ChoiceList(props) {
+	const { items, search = "auto", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled = false, searchLabel, searchPlaceholder, defaultSearchValue = "", searchValue, onSearchValueChange, matchedValues, clearSearchLabel, noMatchLabel, empty, groups, footer, fill = false, className } = props;
+	const value = props.value;
+	const chosen = useMemo(() => value === null ? [] : typeof value === "string" ? [value] : value, [value]);
+	const [ownQuery, setOwnQuery] = useState(defaultSearchValue);
+	const query = searchValue ?? ownQuery;
+	const setQuery = useCallback((next) => {
+		if (searchValue === void 0) setOwnQuery(next);
+		onSearchValueChange?.(next);
+	}, [searchValue, onSearchValueChange]);
+	const [pinned, setPinned] = useState(chosen);
+	const inputRef = useRef(null);
+	const baseId = useId();
+	const searchable = items.length > 0 && (search === "always" || items.length > SEARCH_ABOVE);
+	const [wasSearchable, setWasSearchable] = useState(searchable);
+	if (wasSearchable !== searchable) {
+		setWasSearchable(searchable);
+		if (!searchable) setOwnQuery("");
+	}
+	useEffect(() => {
+		if (!searchable && searchValue) onSearchValueChange?.("");
+	}, [
+		searchable,
+		searchValue,
+		onSearchValueChange
+	]);
+	const [pinnedFor, setPinnedFor] = useState(query);
+	if (pinnedFor !== query) {
+		setPinnedFor(query);
+		setPinned(chosen);
+	}
+	const { rows, noMatch } = visibleItems(items, searchable ? query.trim().toLowerCase() : "", pinned, chosen, matchedValues);
+	const hasAction = rows.some((item) => item.action !== void 0 && item.action !== null);
+	const slots = choiceList({
+		scroll: searchable && !fill,
+		fill
+	});
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (!ariaLabel && !ariaLabelledBy) console.warn("raft-ui: a ChoiceList has neither aria-label nor aria-labelledby.");
+		if (items.some((item) => descriptionLines(item.description).length > MAX_DESCRIPTION_LINES)) console.warn(`raft-ui: a ChoiceList item has more than ${MAX_DESCRIPTION_LINES} description lines; only the first ${MAX_DESCRIPTION_LINES} are drawn.`);
+	}, [
+		ariaLabel,
+		ariaLabelledBy,
+		items
+	]);
+	const focusSearch = search === "always" && searchable;
+	const focusedSearch = useRef(false);
+	useEffect(() => {
+		if (!focusSearch || focusedSearch.current) return;
+		focusedSearch.current = true;
+		const input = inputRef.current;
+		if (!input || typeof window.matchMedia !== "function") return;
+		if (!window.matchMedia("(pointer: fine)").matches) return;
+		if (isTextEntry(document.activeElement)) return;
+		input.focus({ preventScroll: true });
+	}, [focusSearch]);
+	const changeQuery = useCallback((event) => {
+		setQuery(event.currentTarget.value);
+	}, [setQuery]);
+	const clearQuery = useCallback(() => {
+		setQuery("");
+		inputRef.current?.focus();
+	}, [setQuery]);
+	const { sections, gridRowOf, gridRows } = layoutSections(rows, groups);
+	const groupProps = {
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		disabled,
+		className: slots.group(),
+		style: { gridRow: `1 / span ${gridRows}` }
+	};
+	const rowElement = (item) => {
+		const id = `${baseId}-${items.indexOf(item)}`;
+		const lines = descriptionLines(item.description).slice(0, MAX_DESCRIPTION_LINES);
+		const rowDisabled = disabled || item.disabled === true;
+		const markProps = {
+			value: item.value,
+			disabled: item.disabled,
+			"aria-labelledby": `${id}-label`,
+			"aria-describedby": lines.length > 0 ? `${id}-description` : void 0
+		};
+		return /* @__PURE__ */ jsxs("label", {
+			"data-slot": "choice-list-item",
+			"data-disabled": rowDisabled ? "" : void 0,
+			className: slots.item({ hasAction }),
+			children: [
+				props.multiple ? /* @__PURE__ */ jsx(Checkbox, { ...markProps }) : /* @__PURE__ */ jsx(RadioGroupItem, { ...markProps }),
+				item.media !== void 0 && item.media !== null ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "choice-list-media",
+					className: slots.media(),
+					children: item.media
+				}) : null,
+				/* @__PURE__ */ jsxs("span", {
+					"data-slot": "choice-list-body",
+					className: slots.body(),
+					children: [/* @__PURE__ */ jsx(CutLine, {
+						id: `${id}-label`,
+						slot: "choice-list-label",
+						className: slots.label(),
+						children: item.label
+					}), lines.length > 0 ? /* @__PURE__ */ jsx("span", {
+						id: `${id}-description`,
+						className: "contents",
+						children: lines.map((line, index) => /* @__PURE__ */ jsx(CutLine, {
+							slot: "choice-list-description",
+							className: slots.description(),
+							children: line
+						}, index))
+					}) : null]
+				})
+			]
+		}, item.value);
+	};
+	const rowElements = sections.map((section, index) => {
+		if (!section.group) return section.rows.map(rowElement);
+		const headingId = `${baseId}-group-${index}`;
+		const start = (gridRowOf.get(section.rows[0].value) ?? 1) - 1;
+		return /* @__PURE__ */ jsxs("div", {
+			role: "group",
+			"aria-labelledby": headingId,
+			"data-slot": "choice-list-section",
+			className: slots.section(),
+			style: { gridRow: `${start} / span ${section.rows.length + 1}` },
+			children: [/* @__PURE__ */ jsx("div", {
+				id: headingId,
+				"data-slot": "choice-list-heading",
+				className: slots.heading(),
+				children: section.group.label
+			}), section.rows.map(rowElement)]
+		}, section.group.value);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "choice-list",
+		className: slots.root({ className }),
+		children: [searchable ? /* @__PURE__ */ jsxs(InputGroup, {
+			"data-slot": "choice-list-search",
+			children: [
+				/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Search, { "aria-hidden": true }) }),
+				/* @__PURE__ */ jsx(InputGroupInput, {
+					ref: inputRef,
+					type: "search",
+					value: query,
+					onChange: changeQuery,
+					"aria-label": searchLabel,
+					placeholder: searchPlaceholder,
+					disabled,
+					autoComplete: "off",
+					className: slots.searchInput()
+				}),
+				query ? /* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-end",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-md",
+						"aria-label": clearSearchLabel,
+						onClick: clearQuery,
+						children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+					})
+				}) : null
+			]
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			"data-slot": "choice-list-frame",
+			className: slots.frame(),
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "choice-list-scroller",
+				className: slots.scroller(),
+				children: items.length === 0 ? /* @__PURE__ */ jsx("p", {
+					"data-slot": "choice-list-note",
+					className: slots.note(),
+					children: empty
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [rows.length > 0 ? /* @__PURE__ */ jsxs("div", {
+					"data-slot": "choice-list-rows",
+					className: slots.rows(),
+					children: [props.multiple ? /* @__PURE__ */ jsx(CheckboxGroup, {
+						"data-slot": "choice-list-group",
+						value: props.value,
+						onValueChange: props.onValueChange,
+						...groupProps,
+						children: rowElements
+					}) : /* @__PURE__ */ jsx(RadioGroup, {
+						"data-slot": "choice-list-group",
+						value: props.value,
+						onValueChange: props.onValueChange,
+						...groupProps,
+						children: rowElements
+					}), sections.flatMap((section) => section.rows.map((item) => item.action !== void 0 && item.action !== null ? /* @__PURE__ */ jsx("div", {
+						"data-slot": "choice-list-action",
+						className: slots.action(),
+						style: { gridRow: gridRowOf.get(item.value) },
+						children: item.action
+					}, item.value) : null))]
+				}) : null, searchable ? /* @__PURE__ */ jsx("p", {
+					role: "status",
+					"data-slot": "choice-list-status",
+					className: noMatch ? slots.note() : "sr-only",
+					children: noMatch ? noMatchLabel : null
+				}) : null] })
+			}), footer !== void 0 && footer !== null ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "choice-list-footer",
+				className: slots.footer(),
+				children: footer
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { ChoiceList };

package/dist/components/choice-list/choice-list.recipe.mjs

@@ -0,0 +1,44 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/choice-list/choice-list.recipe.ts
+const choiceList = tv({
+	slots: {
+		root: ["grid min-w-0 gap-2"],
+		searchInput: ["[&::-webkit-search-cancel-button]:appearance-none"],
+		frame: ["flex min-w-0 flex-col overflow-hidden", "rounded-container border border-line-hairline bg-layer-card"],
+		scroller: ["min-h-0 min-w-0 p-1"],
+		rows: ["grid grid-cols-[minmax(0,1fr)_auto] gap-x-0 gap-y-0.5"],
+		group: ["col-span-2 col-start-1 grid grid-cols-subgrid grid-rows-subgrid gap-x-0 gap-y-0.5"],
+		section: ["col-span-2 col-start-1 grid grid-cols-subgrid grid-rows-subgrid"],
+		heading: ["col-span-2 px-2.5 pt-2 pb-1", "font-sans text-caption font-bold text-foreground-hint"],
+		item: [
+			"col-span-2 flex min-w-0 items-start gap-2.5 rounded-chip px-2.5",
+			"min-h-option py-option-inset",
+			"pointer-coarse:min-h-11 pointer-coarse:py-[calc((--spacing(11)-1lh)/2)]",
+			"text-left font-sans text-subhead",
+			"not-data-disabled:hover:bg-brand-soft not-data-disabled:active:overlay-medium",
+			"data-disabled:cursor-not-allowed"
+		],
+		media: ["flex h-lh shrink-0 items-center"],
+		body: ["grid min-w-0 flex-1 gap-0.5"],
+		label: ["truncate font-semibold text-foreground", "in-data-disabled:text-foreground-disabled"],
+		description: ["block truncate font-sans text-footnote font-normal text-foreground-muted", "in-data-disabled:text-foreground-disabled"],
+		action: [
+			"relative z-10 col-start-2 flex h-lh items-center self-start pr-1",
+			"mt-option-inset pointer-coarse:mt-[calc((--spacing(11)-1lh)/2)]",
+			"font-sans text-subhead"
+		],
+		note: ["px-2.5 py-2 font-sans text-callout text-foreground-hint"],
+		footer: ["shrink-0 border-t border-line-seam p-1"]
+	},
+	variants: {
+		scroll: { true: { scroller: ["max-h-72 overflow-y-auto overscroll-contain"] } },
+		fill: { true: {
+			root: ["flex min-h-0 flex-1 flex-col"],
+			frame: ["min-h-0 flex-1"],
+			scroller: ["flex-1 overflow-y-auto overscroll-contain"]
+		} },
+		hasAction: { true: { item: ["pr-11"] } }
+	}
+});
+//#endregion
+export { choiceList };

package/dist/components/choice-list/index.d.mts

@@ -0,0 +1,2 @@
+import { ChoiceList, ChoiceListGroup, ChoiceListItem, ChoiceListMultipleProps, ChoiceListProps, ChoiceListSingleProps } from "./choice-list.mjs";
+export { ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps };

package/dist/components/code-block/code-block.d.mts

@@ -0,0 +1,30 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/code-block/code-block.d.ts
+export type CodeBlockProps = useRender.ComponentProps<"div">;
+/** Framed code surface. Compose a header and a body inside it. */
+export declare function CodeBlock({ className, render, ...props }: CodeBlockProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CodeBlockHeaderProps = useRender.ComponentProps<"div">;
+export declare function CodeBlockHeader({ className, render, ...props }: CodeBlockHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CodeBlockTitleProps = useRender.ComponentProps<"span">;
+export declare function CodeBlockTitle({ className, render, ...props }: CodeBlockTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CodeBlockActionsProps = useRender.ComponentProps<"div">;
+/** Trailing action region. In the header it ends the header; in the body it takes a column of its own beside the code. */
+export declare function CodeBlockActions({ className, render, ...props }: CodeBlockActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CodeBlockActionProps = useRender.ComponentProps<"button">;
+/** Styled action shell. The consumer owns the icon and the behavior. */
+export declare function CodeBlockAction({ className, render, ...props }: CodeBlockActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CodeBlockBodyProps = useRender.ComponentProps<"div">;
+/**
+ * Inner code panel. Render the code in a `CodeBlockPre` (or a complete pre
+ * and code) as children.
+ */
+export declare function CodeBlockBody({ children, className, render, ...props }: CodeBlockBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CodeBlockPreProps = useRender.ComponentProps<"pre">;
+/**
+ * The code's `pre`. A long line scrolls inside it; while it does, it is a
+ * named region the keyboard can reach (`tabindex="0"`, `role="region"`, its
+ * `aria-label`, "Code" by default), since Safari doesn't focus a scroller on
+ * its own. Code that fits adds no Tab stop.
+ */
+export declare function CodeBlockPre({ render, ref, "aria-label": ariaLabel, ...props }: CodeBlockPreProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/code-block/code-block.mjs

@@ -0,0 +1,151 @@
+import { codeBlock } from "./code-block.recipe.mjs";
+import { useCallback, useLayoutEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/code-block/code-block.tsx
+const CORNERS = [
+	{
+		x: "left",
+		y: "top"
+	},
+	{
+		x: "right",
+		y: "top"
+	},
+	{
+		x: "left",
+		y: "bottom"
+	},
+	{
+		x: "right",
+		y: "bottom"
+	}
+];
+/** Framed code surface. Compose a header and a body inside it. */
+function CodeBlock({ className, render, ...props }) {
+	const { root } = codeBlock();
+	const defaultProps = { className: root({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "code-block" }
+	});
+}
+function CodeBlockHeader({ className, render, ...props }) {
+	const { header } = codeBlock();
+	const defaultProps = { className: header({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "code-block-header" }
+	});
+}
+function CodeBlockTitle({ className, render, ...props }) {
+	const { title } = codeBlock();
+	const defaultProps = { className: title({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "code-block-title" }
+	});
+}
+/** Trailing action region. In the header it ends the header; in the body it takes a column of its own beside the code. */
+function CodeBlockActions({ className, render, ...props }) {
+	const { actions } = codeBlock();
+	const defaultProps = { className: actions({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "code-block-actions" }
+	});
+}
+/** Styled action shell. The consumer owns the icon and the behavior. */
+function CodeBlockAction({ className, render, ...props }) {
+	const { action } = codeBlock();
+	const defaultProps = {
+		type: "button",
+		className: action({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "code-block-action" }
+	});
+}
+/**
+* Inner code panel. Render the code in a `CodeBlockPre` (or a complete pre
+* and code) as children.
+*/
+function CodeBlockBody({ children, className, render, ...props }) {
+	const { body, corner } = codeBlock();
+	const defaultProps = {
+		className: body({ className }),
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [CORNERS.map(({ x, y }) => /* @__PURE__ */ jsx("span", {
+			"data-slot": "code-block-corner",
+			"data-x": x,
+			"data-y": y,
+			className: corner(),
+			"aria-hidden": true
+		}, `${y}-${x}`)), children] })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "code-block-body" }
+	});
+}
+/**
+* The code's `pre`. A long line scrolls inside it; while it does, it is a
+* named region the keyboard can reach (`tabindex="0"`, `role="region"`, its
+* `aria-label`, "Code" by default), since Safari doesn't focus a scroller on
+* its own. Code that fits adds no Tab stop.
+*/
+function CodeBlockPre({ render, ref, "aria-label": ariaLabel = "Code", ...props }) {
+	const [pre, setPre] = useState(null);
+	const preRef = useCallback((element) => setPre(element), []);
+	const [overflowing, setOverflowing] = useState(false);
+	useLayoutEffect(() => {
+		if (!pre) return;
+		const measure = () => setOverflowing(pre.scrollWidth > pre.clientWidth);
+		const resize = new ResizeObserver(measure);
+		const observe = () => {
+			resize.disconnect();
+			resize.observe(pre);
+			for (const child of pre.children) resize.observe(child);
+		};
+		observe();
+		const mutation = new MutationObserver(() => {
+			observe();
+			measure();
+		});
+		mutation.observe(pre, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		return () => {
+			resize.disconnect();
+			mutation.disconnect();
+		};
+	}, [pre]);
+	return useRender({
+		defaultTagName: "pre",
+		render,
+		ref: ref ? [preRef, ref] : preRef,
+		props: mergeProps(overflowing ? {
+			tabIndex: 0,
+			role: "region",
+			"aria-label": ariaLabel
+		} : {}, props),
+		state: { slot: "code-block-pre" }
+	});
+}
+//#endregion
+export { CodeBlock, CodeBlockAction, CodeBlockActions, CodeBlockBody, CodeBlockHeader, CodeBlockPre, CodeBlockTitle };