@api7/ui-components 0.6.0 → 0.8.0

package/dist/components/cascader/cascader.js

@@ -0,0 +1,513 @@
+"use client";
+import { isBranch, pathKey, useCascaderData } from "./cascader-data.js";
+import { Popover as Popover$1, PopoverContent } from "../popover/popover.js";
+import { useMessages } from "../../config/config-provider.js";
+import { cn } from "../../lib/cn.js";
+import { controlFocus, controlSurface } from "../../lib/control.js";
+import { listItemClassName } from "../../lib/popup.js";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, XIcon } from "lucide-react";
+import { Popover } from "@base-ui/react/popover";
+import { Select } from "@base-ui/react/select";
+// src/components/cascader/cascader.tsx
+const EMPTY = [];
+function scrollSelectedOptions(lists) {
+	for (const list of lists) {
+		const selected = list?.querySelector("[aria-selected=\"true\"]");
+		const scroller = list?.parentElement;
+		if (!selected || !scroller) continue;
+		const item = selected.getBoundingClientRect();
+		const viewport = scroller.getBoundingClientRect();
+		if (item.top < viewport.top) scroller.scrollTop += item.top - viewport.top;
+		else if (item.bottom > viewport.bottom) scroller.scrollTop += item.bottom - viewport.bottom;
+	}
+}
+function setRef(ref, value) {
+	if (typeof ref === "function") {
+		const cleanup = ref(value);
+		return typeof cleanup === "function" ? cleanup : () => ref(null);
+	}
+	if (ref) ref.current = value;
+	return () => {
+		if (ref) ref.current = null;
+	};
+}
+function Cascader(props) {
+	const { value, defaultValue, onValueChange, ...controlOptions } = props;
+	const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+	const currentValue = ("value" in props ? value : internalValue) ?? EMPTY;
+	const changeValue = (value, options) => {
+		if (!("value" in props)) setInternalValue(value);
+		onValueChange?.(value, options);
+	};
+	return /* @__PURE__ */ jsx(Select.Root, {
+		id: props.id,
+		name: props.name,
+		form: props.form,
+		disabled: props.disabled,
+		readOnly: props.readOnly,
+		required: props.required,
+		value: currentValue.length ? JSON.stringify(currentValue) : "",
+		open: false,
+		onOpenChange: (_, details) => details.cancel(),
+		children: /* @__PURE__ */ jsx(Select.Trigger, {
+			nativeButton: false,
+			render: (controlProps, state) => /* @__PURE__ */ jsx(CascaderControl, {
+				...controlOptions,
+				disabled: props.disabled || state.disabled,
+				currentValue,
+				changeValue,
+				resetValue: () => {
+					if (!("value" in props)) setInternalValue(defaultValue ?? null);
+				},
+				controlProps: {
+					id: controlProps.id,
+					ref: controlProps.ref,
+					"aria-labelledby": controlProps["aria-labelledby"],
+					"aria-describedby": controlProps["aria-describedby"],
+					"aria-invalid": controlProps["aria-invalid"],
+					"aria-required": controlProps["aria-required"],
+					onFocus: controlProps.onFocus,
+					onBlur: controlProps.onBlur
+				}
+			})
+		})
+	});
+}
+function CascaderControl({ options, loadChildren, resetKey, currentValue, changeValue, resetValue, controlProps, changeOnSelect = false, searchable = false, loading = false, clearable = false, disabled = false, readOnly = false, placeholder, open: controlledOpen, defaultOpen = false, onOpenChange, displayValue, popupProps, className, ref: externalRef, form, ...inputProps }) {
+	const messages = useMessages().cascader;
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const open = !disabled && !readOnly && (controlledOpen ?? internalOpen);
+	const [expanded, setExpanded] = useState(currentValue);
+	const [query, setQuery] = useState("");
+	const [active, setActive] = useState({});
+	const listRefs = useRef([]);
+	const columnsRef = useRef(null);
+	const pendingFocus = useRef(null);
+	const typeahead = useRef({
+		text: "",
+		time: 0
+	});
+	const id = useId();
+	const triggerRef = useRef(null);
+	const labelledBy = inputProps["aria-labelledby"] ?? controlProps["aria-labelledby"];
+	const triggerRefCallback = useMemo(() => (node) => {
+		triggerRef.current = node;
+		if (!node) return;
+		const cleanups = [setRef(controlProps.ref, node), setRef(externalRef, node)];
+		return () => {
+			triggerRef.current = null;
+			cleanups.forEach((cleanup) => cleanup());
+		};
+	}, [
+		controlProps.ref,
+		externalRef,
+		triggerRef
+	]);
+	const data = useCascaderData(options, loadChildren, resetKey, !disabled && !readOnly && (open || currentValue.length > 1));
+	const selectedOptions = data.resolve(currentValue);
+	const selectedKey = pathKey(currentValue);
+	const optionsKey = data.optionsKey;
+	const [previous, setPrevious] = useState({
+		selectedKey,
+		optionsKey,
+		resetKey,
+		open
+	});
+	if (previous.selectedKey !== selectedKey || previous.optionsKey !== optionsKey || !Object.is(previous.resetKey, resetKey) || previous.open !== open) {
+		setPrevious({
+			selectedKey,
+			optionsKey,
+			resetKey,
+			open
+		});
+		setExpanded(currentValue);
+		setActive({});
+		if (previous.open !== open && !open) setQuery("");
+	}
+	const resetRef = useRef(resetValue);
+	useLayoutEffect(() => {
+		resetRef.current = resetValue;
+	}, [resetValue]);
+	useEffect(() => {
+		const element = triggerRef.current?.form;
+		let timer;
+		const reset = (event) => {
+			timer = setTimeout(() => {
+				if (!event.defaultPrevented) resetRef.current();
+			}, 0);
+		};
+		element?.addEventListener("reset", reset);
+		return () => {
+			element?.removeEventListener("reset", reset);
+			clearTimeout(timer);
+		};
+	}, [form, triggerRef]);
+	useEffect(() => {
+		if (disabled || readOnly || loading || !loadChildren) return;
+		for (const path of [currentValue, ...open ? [expanded] : []]) {
+			const resolved = data.resolve(path);
+			const last = resolved.at(-1);
+			if (!last || last.disabled || !isBranch(last)) continue;
+			const values = resolved.map((item) => item.value);
+			if ((resolved.length < path.length || open && path === expanded) && !data.children(last, values) && data.entries.get(pathKey(values))?.status !== "error") data.load(resolved);
+		}
+	}, [
+		data,
+		currentValue,
+		expanded,
+		open,
+		disabled,
+		readOnly,
+		loading,
+		loadChildren
+	]);
+	const changeOpen = (next) => {
+		if (next && (disabled || readOnly)) return;
+		if (controlledOpen === void 0) setInternalOpen(next);
+		onOpenChange?.(next);
+	};
+	const choose = (path, commit) => {
+		if (disabled || readOnly || path.some((item) => item.disabled)) return;
+		const values = path.map((item) => item.value);
+		const last = path.at(-1);
+		setExpanded(values);
+		setActive((prev) => Object.fromEntries(Object.entries(prev).filter(([level]) => Number(level) < values.length)));
+		if (commit && (changeOnSelect || !isBranch(last))) {
+			changeValue(values, path);
+			if (!isBranch(last) || query.trim()) changeOpen(false);
+		}
+	};
+	const columns = [{
+		parent: [],
+		items: loading ? [] : options
+	}];
+	let parent = [];
+	for (const value of expanded) {
+		const option = columns.at(-1).items.find((item) => item.value === value);
+		if (!option || option.disabled || !isBranch(option)) break;
+		parent = [...parent, option];
+		columns.push({
+			parent,
+			items: data.children(option, parent.map((item) => item.value)) ?? []
+		});
+	}
+	const searchPaths = [];
+	const search = query.trim().toLowerCase();
+	const collect = (items, ancestors) => {
+		for (const item of items) {
+			if (item.disabled) continue;
+			const path = [...ancestors, item];
+			if ((changeOnSelect || !isBranch(item)) && path.some((part) => part.label.toLowerCase().includes(search))) searchPaths.push(path);
+			const children = data.children(item, path.map((part) => part.value));
+			if (children) collect(children, path);
+		}
+	};
+	if (search) collect(loading ? [] : options, []);
+	const visibleColumns = search ? [{
+		parent: [],
+		items: searchPaths.map((path) => path.at(-1))
+	}] : columns;
+	const columnCount = visibleColumns.length;
+	useLayoutEffect(() => {
+		if (!open || search) return;
+		const revealLastColumn = () => {
+			const scroller = columnsRef.current;
+			if (scroller) scroller.scrollLeft = getComputedStyle(scroller).direction === "rtl" ? -scroller.scrollWidth : scroller.scrollWidth;
+		};
+		revealLastColumn();
+		const frame = requestAnimationFrame(revealLastColumn);
+		return () => cancelAnimationFrame(frame);
+	}, [
+		open,
+		search,
+		columnCount
+	]);
+	useLayoutEffect(() => {
+		if (open && !search) scrollSelectedOptions(listRefs.current.slice(0, columnCount));
+	}, [
+		open,
+		search,
+		columnCount,
+		selectedKey,
+		data.entries,
+		options
+	]);
+	const rowIndex = (items, level) => {
+		const index = active[level];
+		const expandedIndex = search ? -1 : items.findIndex((item) => !item.disabled && item.value === expanded[level]);
+		return index !== void 0 && items[index] && !items[index].disabled ? index : expandedIndex >= 0 ? expandedIndex : items.findIndex((item) => !item.disabled);
+	};
+	useLayoutEffect(() => {
+		if (pendingFocus.current !== null) {
+			listRefs.current[pendingFocus.current]?.focus();
+			pendingFocus.current = null;
+		}
+		for (const [level, index] of Object.entries(active)) if (document.activeElement === listRefs.current[Number(level)]) document.getElementById(`${id}-${level}-${index}`)?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	});
+	const handleKey = (event, column, level) => {
+		event.currentTarget.focus();
+		const { items } = column;
+		const index = rowIndex(items, level);
+		const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+		const forward = rtl ? "ArrowLeft" : "ArrowRight";
+		const back = rtl ? "ArrowRight" : "ArrowLeft";
+		let next = index;
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			const step = event.key === "ArrowDown" ? 1 : -1;
+			for (let count = 1; count <= items.length; count += 1) {
+				const candidate = (index + step * count + items.length) % items.length;
+				if (!items[candidate].disabled) {
+					next = candidate;
+					break;
+				}
+			}
+		} else if (event.key === "Home" || event.key === "End") next = event.key === "Home" ? items.findIndex((item) => !item.disabled) : items.reduce((last, item, position) => item.disabled ? last : position, -1);
+		else if (event.key === back && !search) {
+			event.preventDefault();
+			listRefs.current[level - 1]?.focus();
+			return;
+		} else if ([
+			"Enter",
+			" ",
+			forward
+		].includes(event.key) && index >= 0) {
+			event.preventDefault();
+			const path = search ? searchPaths[index] : [...column.parent, items[index]];
+			if (event.key === forward && (search || !isBranch(items[index]))) return;
+			choose(path, event.key !== forward);
+			if (event.key === forward) pendingFocus.current = level + 1;
+			return;
+		} else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			const now = event.timeStamp;
+			typeahead.current = {
+				text: (now - typeahead.current.time < 700 ? typeahead.current.text : "") + event.key.toLowerCase(),
+				time: now
+			};
+			const match = items.findIndex((item) => !item.disabled && item.label.toLowerCase().startsWith(typeahead.current.text));
+			if (match >= 0) next = match;
+		} else return;
+		event.preventDefault();
+		setActive((prev) => ({
+			...prev,
+			[level]: next
+		}));
+	};
+	const label = placeholder ?? messages.placeholder;
+	const renderedValue = displayValue?.(currentValue, selectedOptions) ?? currentValue.map((value, index) => selectedOptions[index]?.label ?? String(value)).join(" / ");
+	const clear = () => {
+		changeValue(null, []);
+		setExpanded([]);
+		setQuery("");
+		triggerRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsxs(Popover$1, {
+		open,
+		onOpenChange: changeOpen,
+		onOpenChangeComplete: (opened) => {
+			if (opened && !search) scrollSelectedOptions(listRefs.current.slice(0, columnCount));
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("relative w-full", className),
+			"data-slot": "cascader",
+			children: [
+				/* @__PURE__ */ jsx(Popover.Trigger, {
+					nativeButton: false,
+					role: "combobox",
+					disabled,
+					"aria-readonly": readOnly || void 0,
+					"aria-autocomplete": searchable ? "list" : "none",
+					"aria-labelledby": labelledBy,
+					"aria-label": inputProps["aria-label"] ?? (labelledBy ? void 0 : label),
+					"aria-busy": loading || void 0,
+					className: cn(controlSurface, controlFocus, "h-8 truncate ps-3 pe-10 text-start", !searchable && "cursor-pointer", clearable && currentValue.length > 0 && !disabled && !readOnly && "pe-16"),
+					"data-slot": "cascader-trigger",
+					render: /* @__PURE__ */ jsx("input", {
+						...controlProps,
+						...inputProps,
+						ref: triggerRefCallback,
+						name: void 0,
+						required: false,
+						form,
+						type: "text",
+						readOnly: !searchable || readOnly,
+						autoComplete: "off",
+						value: searchable && open ? query : renderedValue,
+						placeholder: searchable && open && currentValue.length ? renderedValue : label,
+						onFocus: (event) => {
+							controlProps.onFocus?.(event);
+							inputProps.onFocus?.(event);
+							if (searchable && !open) event.currentTarget.select();
+						},
+						onBlur: (event) => {
+							controlProps.onBlur?.(event);
+							inputProps.onBlur?.(event);
+						},
+						onChange: (event) => {
+							if (!open) changeOpen(true);
+							setQuery(event.target.value);
+							setActive({});
+						}
+					}),
+					onClick: (event) => {
+						event.preventBaseUIHandler();
+						if (!event.defaultPrevented && !open) changeOpen(true);
+					},
+					onKeyDown: (event) => {
+						event.preventBaseUIHandler();
+						if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+						if ([
+							"ArrowDown",
+							"ArrowUp",
+							"Enter"
+						].includes(event.key) || !searchable && event.key === " ") {
+							event.preventDefault();
+							if (open) listRefs.current[0]?.focus();
+							else changeOpen(true);
+						}
+					},
+					onKeyUp: (event) => event.preventBaseUIHandler()
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					"aria-hidden": true,
+					className: "pointer-events-none absolute end-3 top-1/2 size-5 -translate-y-1/2"
+				}),
+				clearable && currentValue.length > 0 && !disabled && !readOnly && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": messages.clear,
+					className: cn("absolute end-10 top-1/2 -translate-y-1/2 rounded-sm text-muted-foreground hover:text-foreground", "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 aria-invalid:focus-visible:ring-destructive/40 data-invalid:focus-visible:ring-destructive/40"),
+					onClick: clear,
+					children: /* @__PURE__ */ jsx(XIcon, {
+						"aria-hidden": true,
+						className: "size-3"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			"aria-label": inputProps["aria-label"] ?? label,
+			initialFocus: () => searchable ? triggerRef.current : listRefs.current[0],
+			...popupProps,
+			className: cn("w-auto min-w-(--anchor-width) overflow-hidden p-0", popupProps?.className),
+			children: [
+				searchable && loadChildren && /* @__PURE__ */ jsx("p", {
+					className: "border-b border-border p-2 text-xs text-muted-foreground",
+					children: messages.searchHint
+				}),
+				/* @__PURE__ */ jsx("span", {
+					id: `${id}-branch`,
+					className: "sr-only",
+					children: messages.branch
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: columnsRef,
+					className: "flex max-w-[calc(100vw-2rem)] overflow-x-auto",
+					"data-slot": "cascader-columns",
+					children: visibleColumns.map((column, level) => {
+						const values = column.parent.map((item) => item.value);
+						const entry = data.entries.get(pathKey(values));
+						const busy = loading || entry?.status === "loading";
+						const failed = entry?.status === "error";
+						const index = rowIndex(column.items, level);
+						return /* @__PURE__ */ jsxs("div", {
+							className: "max-h-[300px] min-w-44 flex-1 overflow-y-auto border-e border-border bg-muted last:border-e-0",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									role: "listbox",
+									tabIndex: 0,
+									ref: (node) => {
+										listRefs.current[level] = node;
+									},
+									"aria-label": search ? messages.results : messages.level({
+										level: level + 1,
+										label: column.parent.at(-1)?.label ?? label
+									}),
+									"aria-activedescendant": index >= 0 ? `${id}-${level}-${index}` : void 0,
+									"aria-busy": busy || void 0,
+									className: "min-h-1 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/40",
+									onKeyDown: (event) => handleKey(event, column, level),
+									children: column.items.map((item, itemIndex) => {
+										const path = search ? searchPaths[itemIndex] : [...column.parent, item];
+										const pathValues = path.map((part) => part.value);
+										const selected = pathKey(pathValues) === pathKey(search ? currentValue : currentValue.slice(0, path.length));
+										return /* @__PURE__ */ jsxs("div", {
+											id: `${id}-${level}-${itemIndex}`,
+											role: "option",
+											tabIndex: -1,
+											"aria-selected": selected,
+											"aria-describedby": !search && isBranch(item) ? `${id}-branch` : void 0,
+											"aria-disabled": item.disabled || void 0,
+											"data-selected": selected || void 0,
+											"data-disabled": item.disabled || void 0,
+											"data-highlighted": index === itemIndex || void 0,
+											className: cn(listItemClassName, "min-w-44 hover:bg-accent-hover"),
+											onMouseDown: (event) => {
+												if (searchable) event.preventDefault();
+											},
+											onClick: () => {
+												if (searchable) triggerRef.current?.focus();
+												else listRefs.current[level]?.focus();
+												setActive((prev) => ({
+													...prev,
+													[level]: itemIndex
+												}));
+												choose(path, true);
+											},
+											onKeyDown: (event) => {
+												if (event.key === "Enter" || event.key === " ") {
+													event.preventDefault();
+													event.stopPropagation();
+													choose(path, true);
+												}
+											},
+											children: [
+												/* @__PURE__ */ jsx("span", {
+													className: "min-w-0 flex-1 break-words",
+													children: search ? path.map((part) => part.label).join(" / ") : item.label
+												}),
+												selected && /* @__PURE__ */ jsx(CheckIcon, {
+													"aria-hidden": true,
+													className: "size-4 shrink-0"
+												}),
+												!search && isBranch(item) && /* @__PURE__ */ jsx(ChevronRightIcon, {
+													"aria-hidden": true,
+													className: "size-4 shrink-0 rtl:rotate-180"
+												})
+											]
+										}, pathKey(path.map((part) => part.value)));
+									})
+								}),
+								busy && /* @__PURE__ */ jsx("p", {
+									role: "status",
+									className: "px-4 py-3 text-sm text-muted-foreground",
+									children: messages.loading
+								}),
+								failed && /* @__PURE__ */ jsxs("div", {
+									className: "px-4 py-3 text-sm",
+									children: [/* @__PURE__ */ jsx("p", {
+										role: "status",
+										children: messages.error
+									}), /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: cn("mt-2 text-primary-text hover:underline", "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 aria-invalid:focus-visible:ring-destructive/40 data-invalid:focus-visible:ring-destructive/40"),
+										onClick: () => void data.load(column.parent),
+										children: messages.retry
+									})]
+								}),
+								!busy && !failed && column.items.length === 0 && /* @__PURE__ */ jsx("p", {
+									role: "status",
+									className: "px-4 py-3 text-sm text-muted-foreground",
+									children: messages.empty
+								})
+							]
+						}, search ? "search" : pathKey(values));
+					})
+				})
+			]
+		})]
+	});
+}
+export { Cascader };

package/dist/components/code/code.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+export interface CodeProps extends Omit<ComponentProps<'code'>, 'children'> {
+  children: string;
+  /** Show a copy button beside the inline code. Defaults to false. */
+  copyable?: boolean;
+  /** Text to copy instead of the displayed code, including an empty string. */
+  copyValue?: string;
+}
+export declare function Code({ children, copyable, copyValue, className, ...props }: CodeProps): import("react").JSX.Element;

package/dist/components/code/code.js

@@ -0,0 +1,20 @@
+"use client";
+import { CopyButton } from "./copy-button.js";
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/code/code.tsx
+function Code({ children, copyable = false, copyValue, className, ...props }) {
+	return /* @__PURE__ */ jsxs("code", {
+		className: cn("inline-flex max-w-full items-center gap-1 rounded-sm bg-muted px-1 py-0.5 align-baseline font-mono text-xs text-foreground", className),
+		...props,
+		"data-slot": "code",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 whitespace-pre-wrap wrap-anywhere",
+			children
+		}), copyable && /* @__PURE__ */ jsx(CopyButton, {
+			value: copyValue ?? children,
+			className: "size-5"
+		})]
+	});
+}
+export { Code };

package/dist/components/code/copy-button.js

@@ -0,0 +1,42 @@
+"use client";
+import { Button } from "../button/button.js";
+import { useMessages } from "../../config/config-provider.js";
+import { useClipboard } from "../../hooks/use-clipboard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy, TriangleAlert } from "lucide-react";
+// src/components/code/copy-button.tsx
+function CopyButtonContent({ value, className }) {
+	const { copy, status } = useClipboard();
+	const { code: messages } = useMessages();
+	const label = status === "copied" ? messages.copied : status === "error" ? messages.copyError : messages.copy;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex shrink-0 align-middle",
+		"data-slot": "code-copy",
+		children: [/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			className,
+			"aria-label": label,
+			title: label,
+			"aria-busy": status === "copying" || void 0,
+			onClick: () => {
+				copy(value);
+			},
+			"data-status": status,
+			children: /* @__PURE__ */ jsx(status === "copied" ? Check : status === "error" ? TriangleAlert : Copy, {
+				"aria-hidden": "true",
+				className: status === "error" ? "text-destructive-text" : void 0
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			role: "status",
+			"aria-live": "polite",
+			children: status === "copied" || status === "error" ? label : ""
+		})]
+	});
+}
+function CopyButton(props) {
+	return /* @__PURE__ */ jsx(CopyButtonContent, { ...props }, props.value);
+}
+export { CopyButton };

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+export interface CodeBlockProps extends Omit<ComponentProps<'div'>, 'children'> {
+  code: string;
+  /** Syntax language or alias. Unknown languages render as plain text. */
+  language?: string;
+  /** Show a copy button. Defaults to true. */
+  copyable?: boolean;
+  /** Text to copy instead of the displayed code, including an empty string. */
+  copyValue?: string;
+  showLineNumbers?: boolean;
+  /** Wrap long lines instead of scrolling horizontally. */
+  wrapLines?: boolean;
+  /** Props for the scrollable pre element, including its accessible name and maximum height. */
+  preProps?: ComponentProps<'pre'>;
+}
+export declare function CodeBlock({ code, language, copyable, copyValue, showLineNumbers, wrapLines, preProps, className, ...props }: CodeBlockProps): import("react").JSX.Element;

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

@@ -0,0 +1,45 @@
+"use client";
+import { highlightLines, tokenClassName } from "./highlight.js";
+import { CopyButton } from "../code/copy-button.js";
+import { cn } from "../../lib/cn.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/code-block/code-block.tsx
+function CodeBlock({ code, language = "text", copyable = true, copyValue, showLineNumbers = false, wrapLines = false, preProps, className, ...props }) {
+	const lines = useMemo(() => highlightLines(code, language), [code, language]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 max-w-full items-start overflow-hidden rounded-lg bg-muted text-foreground", className),
+		...props,
+		"data-slot": "code-block",
+		children: [/* @__PURE__ */ jsx("pre", {
+			tabIndex: 0,
+			...preProps,
+			className: cn("m-0 min-w-0 flex-1 overflow-auto p-3 font-mono text-sm leading-6 outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-inset", preProps?.className),
+			"data-slot": "code-block-pre",
+			children: /* @__PURE__ */ jsx("code", {
+				className: cn("block", wrapLines ? "whitespace-pre-wrap wrap-anywhere" : "w-max min-w-full whitespace-pre"),
+				children: lines.map((line, index) => /* @__PURE__ */ jsxs("span", {
+					className: "flex min-h-6",
+					"data-slot": "code-block-line",
+					children: [showLineNumbers && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "me-4 shrink-0 text-end text-muted-foreground select-none",
+						style: { width: `${String(lines.length).length}ch` },
+						"data-slot": "code-block-line-number",
+						children: index + 1
+					}), /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1",
+						children: line.map((token, tokenIndex) => /* @__PURE__ */ jsx("span", {
+							className: tokenClassName(token.types),
+							children: token.content
+						}, tokenIndex))
+					})]
+				}, index))
+			})
+		}), copyable && /* @__PURE__ */ jsx(CopyButton, {
+			value: copyValue ?? code,
+			className: "m-1"
+		})]
+	});
+}
+export { CodeBlock };