@mcp-b/react-components 0.2.1 → 0.3.0

package/dist/{CodeBlock-BrCoypnc.js → CodeBlock-C2Xjxu9M.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
 import { Select, SelectContent, SelectItem, SelectList, SelectTrigger, SelectValue } from "./components/Select.js";
-import { t as CopyButton } from "./copy-button-DAPlB8Z0.js";
+import { t as CopyButton } from "./copy-button-Dd6DEhOm.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";

package/dist/FileTree-D0c9Yj9U.js

@@ -0,0 +1,310 @@
+import { t as cx } from "./class-names-9UtZwb0J.js";
+import { _ as FolderOpenIcon, g as FolderIcon, h as FileIcon, l as ChevronRightIcon } from "./icons-DQC4Zw5R.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/use-file-tree-nav.ts
+const FileTreeContext = React.createContext(null);
+function useFileTreeContext() {
+	const ctx = React.useContext(FileTreeContext);
+	if (!ctx) throw new Error("FileTree subcomponents must be used inside <FileTree>.");
+	return ctx;
+}
+/**
+* Builds a FileTreeContextValue that tracks registered nodes and dispatches
+* keyboard navigation per the WAI-ARIA Tree Pattern.
+*
+* Call `register` from every FileTreeFolder/FileTreeFile during render. The
+* hook resets its internal list on each render pass so removed nodes don't
+* leave stale entries.
+*/
+function useFileTreeNav({ expanded, selectedPath, onSelect, onExpandedChange }) {
+	const [focusedPath, setFocusedPath] = React.useState(null);
+	const nodesRef = React.useRef([]);
+	nodesRef.current = [];
+	const register = React.useCallback((path, kind, parentExpanded) => {
+		nodesRef.current.push({
+			path,
+			kind,
+			visible: parentExpanded
+		});
+	}, []);
+	const visibleNodes = () => nodesRef.current.filter((n) => n.visible);
+	const moveFocus = React.useCallback((direction, from) => {
+		const visible = visibleNodes();
+		const idx = visible.findIndex((n) => n.path === from);
+		if (idx < 0) return;
+		const next = visible[Math.max(0, Math.min(visible.length - 1, idx + direction))];
+		if (next) setFocusedPath(next.path);
+	}, []);
+	const focusFirstVisibleNode = React.useCallback(() => {
+		const first = visibleNodes()[0];
+		if (first) setFocusedPath(first.path);
+	}, []);
+	const focusLastVisibleNode = React.useCallback(() => {
+		const visible = visibleNodes();
+		const last = visible[visible.length - 1];
+		if (last) setFocusedPath(last.path);
+	}, []);
+	const setFolderExpanded = React.useCallback((path, nextExpanded) => {
+		const next = new Set(expanded);
+		if (nextExpanded) next.add(path);
+		else next.delete(path);
+		onExpandedChange(next);
+	}, [expanded, onExpandedChange]);
+	const toggleFolderExpanded = React.useCallback((path) => {
+		setFolderExpanded(path, !expanded.has(path));
+	}, [expanded, setFolderExpanded]);
+	const keyHandlers = React.useMemo(() => ({
+		ArrowDown(path) {
+			moveFocus(1, path);
+		},
+		ArrowUp(path) {
+			moveFocus(-1, path);
+		},
+		ArrowRight(path, kind) {
+			if (!(kind === "folder")) return;
+			if (expanded.has(path)) moveFocus(1, path);
+			else setFolderExpanded(path, true);
+		},
+		ArrowLeft(path, kind) {
+			if (kind === "folder" && expanded.has(path)) setFolderExpanded(path, false);
+		},
+		Enter(path, kind) {
+			if (kind === "folder") {
+				onSelect(path);
+				toggleFolderExpanded(path);
+			} else onSelect(path);
+		},
+		" "(path, kind) {
+			if (kind === "folder") {
+				onSelect(path);
+				toggleFolderExpanded(path);
+			} else onSelect(path);
+		},
+		Home() {
+			focusFirstVisibleNode();
+		},
+		End() {
+			focusLastVisibleNode();
+		}
+	}), [
+		expanded,
+		focusFirstVisibleNode,
+		focusLastVisibleNode,
+		moveFocus,
+		onSelect,
+		setFolderExpanded,
+		toggleFolderExpanded
+	]);
+	const handleKeyDown = React.useCallback((event, path, kind) => {
+		const keyHandler = keyHandlers[event.key];
+		if (!keyHandler) return;
+		event.preventDefault();
+		keyHandler(path, kind);
+	}, [keyHandlers]);
+	return {
+		focusedPath,
+		selectedPath,
+		expanded,
+		onFocus: React.useCallback((path) => {
+			setFocusedPath(path);
+		}, []),
+		onSelect,
+		onExpandedChange: React.useCallback((path, next) => {
+			setFolderExpanded(path, next);
+		}, [setFolderExpanded]),
+		register,
+		handleKeyDown
+	};
+}
+//#endregion
+//#region src/components/FileTree.tsx
+/**
+* A keyboard-accessible hierarchical file browser. Compose with
+* FileTreeFolder and FileTreeFile children.
+*
+* Keyboard: ↑/↓ move focus, →/← expand/collapse folders, Enter/Space
+* selects files and selects/toggles folders, Home/End jump to first/last node.
+*
+* @example
+* ```tsx
+* <FileTree defaultExpanded={new Set(["src"])}>
+*   <FileTreeFolder path="src" name="src">
+*     <FileTreeFile path="src/index.ts" name="index.ts" />
+*     <FileTreeFolder path="src/lib" name="lib">
+*       <FileTreeFile path="src/lib/utils.ts" name="utils.ts" />
+*     </FileTreeFolder>
+*   </FileTreeFolder>
+* </FileTree>
+* ```
+*/
+function FileTree({ className, "aria-label": ariaLabel = "File tree", expanded, defaultExpanded, selectedPath = null, onSelect, onExpandedChange, children, ref, ...props }) {
+	const [internalExpanded, setInternalExpanded] = React.useState(() => defaultExpanded ?? /* @__PURE__ */ new Set());
+	const isControlled = expanded !== void 0;
+	const currentExpanded = isControlled ? expanded : internalExpanded;
+	const handleExpandedChange = React.useCallback((next) => {
+		if (!isControlled) setInternalExpanded(next);
+		onExpandedChange?.(next);
+	}, [isControlled, onExpandedChange]);
+	const ctx = useFileTreeNav({
+		expanded: currentExpanded,
+		selectedPath,
+		onSelect: React.useCallback((path) => {
+			onSelect?.(path);
+		}, [onSelect]),
+		onExpandedChange: handleExpandedChange
+	});
+	return /* @__PURE__ */ jsx(FileTreeContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("file-tree", className),
+			...props,
+			children: /* @__PURE__ */ jsx("ul", {
+				className: "file-tree__list",
+				role: "tree",
+				"aria-label": ariaLabel,
+				tabIndex: 0,
+				children
+			})
+		})
+	});
+}
+function renderNestedFileTreeChild(child, level) {
+	if (React.isValidElement(child) && (child.type === FileTreeFolder || child.type === FileTreeFile)) return React.cloneElement(child, { level: level + 1 });
+	return child;
+}
+function dataFlag(enabled) {
+	return enabled ? "" : void 0;
+}
+function getFileTreeNodeTabIndex(focusedPath, path, level) {
+	return focusedPath === path || !focusedPath && level === 0 ? 0 : -1;
+}
+function getFileTreeNodeIndent(level, offset) {
+	return `${level * 1.125 + offset}rem`;
+}
+function FileTreeFolder({ className, path, name, level = 0, children, ref, ...props }) {
+	const { expanded, focusedPath, selectedPath, onFocus, onSelect, register, handleKeyDown, onExpandedChange } = useFileTreeContext();
+	const isExpanded = expanded.has(path);
+	const isFocused = focusedPath === path;
+	const isSelected = selectedPath === path;
+	register(path, "folder", true);
+	const toggle = React.useCallback(() => {
+		onExpandedChange(path, !isExpanded);
+	}, [
+		isExpanded,
+		onExpandedChange,
+		path
+	]);
+	const handleClick = React.useCallback(() => {
+		onSelect(path);
+		toggle();
+	}, [
+		onSelect,
+		path,
+		toggle
+	]);
+	return /* @__PURE__ */ jsxs("li", {
+		ref,
+		role: "treeitem",
+		"aria-expanded": isExpanded,
+		"aria-selected": isSelected,
+		className: cx("file-tree__folder", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "file-tree__node file-tree__node--folder",
+			"data-focused": dataFlag(isFocused),
+			"data-selected": dataFlag(isSelected),
+			tabIndex: getFileTreeNodeTabIndex(focusedPath, path, level),
+			onClick: handleClick,
+			onFocus: () => onFocus(path),
+			onKeyDown: (e) => handleKeyDown(e, path, "folder"),
+			style: { paddingInlineStart: getFileTreeNodeIndent(level, .5) },
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: cx("file-tree__chevron", isExpanded && "file-tree__chevron--expanded"),
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "file-tree__icon",
+					"aria-hidden": "true",
+					children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "file-tree__name",
+					children: name
+				})
+			]
+		}), isExpanded ? /* @__PURE__ */ jsx("ul", {
+			className: "file-tree__list",
+			role: "group",
+			children: React.Children.map(children, (child) => renderNestedFileTreeChild(child, level))
+		}) : null]
+	});
+}
+function FileTreeFile({ className, path, name, icon, level = 0, ref, ...props }) {
+	const { selectedPath, focusedPath, onFocus, onSelect, register, handleKeyDown } = useFileTreeContext();
+	const isSelected = selectedPath === path;
+	const isFocused = focusedPath === path;
+	register(path, "file", true);
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		role: "treeitem",
+		"aria-selected": isSelected,
+		className: cx("file-tree__file", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "file-tree__node file-tree__node--file",
+			"data-selected": dataFlag(isSelected),
+			"data-focused": dataFlag(isFocused),
+			tabIndex: getFileTreeNodeTabIndex(focusedPath, path, level),
+			onClick: () => onSelect(path),
+			onFocus: () => onFocus(path),
+			onKeyDown: (e) => handleKeyDown(e, path, "file"),
+			style: { paddingInlineStart: getFileTreeNodeIndent(level, 1.5) },
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "file-tree__icon",
+				"aria-hidden": "true",
+				children: icon ?? /* @__PURE__ */ jsx(FileIcon, {})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "file-tree__name",
+				children: name
+			})]
+		})
+	});
+}
+function FileTreeIcon({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("file-tree__icon", className),
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+}
+function FileTreeName({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("file-tree__name", className),
+		...props,
+		children
+	});
+}
+function FileTreeActions({ className, children, onClick, ref, ...props }) {
+	const handleClick = React.useCallback((e) => {
+		e.stopPropagation();
+		onClick?.(e);
+	}, [onClick]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("file-tree__actions", className),
+		onClick: handleClick,
+		...props,
+		children
+	});
+}
+//#endregion
+export { FileTreeIcon as a, FileTreeFolder as i, FileTreeActions as n, FileTreeName as o, FileTreeFile as r, FileTree as t };