@mcp-b/react-components 0.2.1 → 0.3.0

package/dist/components/FileTree.js

@@ -1,310 +1,2 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { _ as FolderOpenIcon, g as FolderIcon, h as FileIcon, l as ChevronRightIcon } from "../icons-Bf7JMKk-.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
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-D0c9Yj9U.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/Menubar.js

@@ -1,4 +1,4 @@
-import { d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
+import { d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";

package/dist/components/Message.d.ts

@@ -1,9 +1,10 @@
 import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
 import * as React from "react";
+import { UIMessage } from "ai";
 import { StreamdownProps } from "streamdown";
 
 //#region src/components/Message.d.ts
-type MessageRole = "user" | "assistant" | "system" | "tool" | (string & {});
+type MessageRole = UIMessage["role"] | (string & {});
 interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The originating role of the message. Controls alignment and styling via

package/dist/components/Message.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-Bf7JMKk-.js";
+import { n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import * as React from "react";

package/dist/components/ModelSelector.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as SearchIcon, s as ChevronDownIcon } from "../icons-Bf7JMKk-.js";
+import { k as SearchIcon, s as ChevronDownIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./Dialog.js";
 import * as React from "react";

package/dist/components/NavigationMenu.js

@@ -1,4 +1,4 @@
-import { s as ChevronDownIcon } from "../icons-Bf7JMKk-.js";
+import { s as ChevronDownIcon } from "../icons-DQC4Zw5R.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";

package/dist/components/PricingPage.js

@@ -3,13 +3,13 @@ import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";
 import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle } from "./AlertDialog.js";
+import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
 import { Card } from "./Card.js";
 import { Checkbox } from "./Checkbox.js";
 import { Separator } from "./Separator.js";
 import { Switch, SwitchThumb } from "./Switch.js";
 import { Label } from "./Label.js";
 import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
-import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
 import { Progress, ProgressIndicator, ProgressTrack } from "./Progress.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";