@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Fieldset.js

@@ -0,0 +1,81 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
+//#region src/components/Fieldset.tsx
+/**
+* Groups the fieldset legend and associated fields.
+* Renders a `<fieldset>` element.
+*
+* @example
+* ```tsx
+* <Fieldset.Root>
+*   <Fieldset.Legend>Contact Information</Fieldset.Legend>
+*   <Field.Root>
+*     <Field.Label>Email</Field.Label>
+*     <Field.Control type="email" />
+*   </Field.Root>
+* </Fieldset.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/fieldset | Base UI Fieldset}
+*/
+function FieldsetRoot({ className = "", ref, ...props }) {
+	const classes = ["fieldset", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Fieldset$1.Root, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Accessible label for the fieldset, automatically associated with it.
+* Renders a `<div>` element (styled as legend).
+*/
+function FieldsetLegend({ className = "", ref, ...props }) {
+	const classes = ["fieldset__legend", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Fieldset$1.Legend, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* A native fieldset element with an easily stylable legend.
+* Useful for grouping related form controls.
+*
+* @example
+* ```tsx
+* // Basic fieldset
+* <Fieldset.Root>
+*   <Fieldset.Legend>Personal Information</Fieldset.Legend>
+*   <Field.Root name="firstName">
+*     <Field.Label>First Name</Field.Label>
+*     <Field.Control />
+*   </Field.Root>
+*   <Field.Root name="lastName">
+*     <Field.Label>Last Name</Field.Label>
+*     <Field.Control />
+*   </Field.Root>
+* </Fieldset.Root>
+* ```
+*
+* @example
+* ```tsx
+* // With checkbox group
+* <Fieldset.Root>
+*   <Fieldset.Legend>Notification Preferences</Fieldset.Legend>
+*   <CheckboxGroup>
+*     <label><Checkbox name="email" /> Email</label>
+*     <label><Checkbox name="sms" /> SMS</label>
+*   </CheckboxGroup>
+* </Fieldset.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/fieldset | Base UI Fieldset}
+*/
+const Fieldset = {
+	Root: FieldsetRoot,
+	Legend: FieldsetLegend
+};
+//#endregion
+export { Fieldset };

package/dist/components/FileTree.d.ts

@@ -0,0 +1,116 @@
+import * as React from "react";
+
+//#region src/components/FileTree.d.ts
+interface FileTreeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** Set of folder paths that should be expanded. Controlled mode. */
+  expanded?: Set<string>;
+  /** Initial set of expanded folder paths. Uncontrolled mode. */
+  defaultExpanded?: Set<string>;
+  /** Currently selected file path. Controlled mode. */
+  selectedPath?: string | null;
+  /** Called when a file is selected. */
+  onSelect?: (path: string) => void;
+  /** Called when the expanded set changes. */
+  onExpandedChange?: (next: Set<string>) => void;
+}
+/**
+ * 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>
+ * ```
+ */
+declare function FileTree({
+  className,
+  "aria-label": ariaLabel,
+  expanded,
+  defaultExpanded,
+  selectedPath,
+  onSelect,
+  onExpandedChange,
+  children,
+  ref,
+  ...props
+}: FileTreeProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface FileTreeFolderProps extends React.HTMLAttributes<HTMLLIElement> {
+  /** Unique path identifier for this folder. */
+  path: string;
+  /** Display name. */
+  name: string;
+  /** Depth level (0 for top-level). Auto-incremented by nested folders. */
+  level?: number;
+}
+declare function FileTreeFolder({
+  className,
+  path,
+  name,
+  level,
+  children,
+  ref,
+  ...props
+}: FileTreeFolderProps & {
+  ref?: React.Ref<HTMLLIElement>;
+}): React.JSX.Element;
+interface FileTreeFileProps extends React.HTMLAttributes<HTMLLIElement> {
+  path: string;
+  name: string;
+  /** Optional custom icon; defaults to a generic file icon. */
+  icon?: React.ReactNode;
+  /** Depth level, auto-set by parent folder. */
+  level?: number;
+}
+declare function FileTreeFile({
+  className,
+  path,
+  name,
+  icon,
+  level,
+  ref,
+  ...props
+}: FileTreeFileProps & {
+  ref?: React.Ref<HTMLLIElement>;
+}): React.JSX.Element;
+interface FileTreeIconProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function FileTreeIcon({
+  className,
+  children,
+  ref,
+  ...props
+}: FileTreeIconProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface FileTreeNameProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function FileTreeName({
+  className,
+  children,
+  ref,
+  ...props
+}: FileTreeNameProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface FileTreeActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function FileTreeActions({
+  className,
+  children,
+  onClick,
+  ref,
+  ...props
+}: FileTreeActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { FileTree, FileTreeActions, FileTreeActionsProps, FileTreeFile, FileTreeFileProps, FileTreeFolder, FileTreeFolderProps, FileTreeIcon, FileTreeIconProps, FileTreeName, FileTreeNameProps, FileTreeProps };

package/dist/components/FileTree.js

@@ -0,0 +1,310 @@
+import { c as ChevronRightIcon, g as FolderOpenIcon, h as FolderIcon, m as FileIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.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 { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/Form.d.ts

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { Form as Form$1 } from "@base-ui/react/form";
+
+//#region src/components/Form.d.ts
+/**
+ * Props for the Form component.
+ */
+interface FormProps extends Omit<React.ComponentPropsWithoutRef<typeof Form$1>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * A form component that provides consolidated error handling and validation
+ * for form controls. Works seamlessly with the Field component.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with Field components
+ * <Form onFormSubmit={(values) => console.log(values)}>
+ *   <Field.Root name="username">
+ *     <Field.Label>Username</Field.Label>
+ *     <Field.Control required />
+ *     <Field.Error match="valueMissing">Username is required</Field.Error>
+ *   </Field.Root>
+ *
+ *   <Field.Root name="email">
+ *     <Field.Label>Email</Field.Label>
+ *     <Field.Control type="email" required />
+ *     <Field.Error match="valueMissing">Email is required</Field.Error>
+ *     <Field.Error match="typeMismatch">Invalid email format</Field.Error>
+ *   </Field.Root>
+ *
+ *   <Button type="submit">Submit</Button>
+ * </Form>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With external/server errors
+ * const [errors, setErrors] = useState({});
+ *
+ * async function handleSubmit(values) {
+ *   const result = await api.submit(values);
+ *   if (result.errors) {
+ *     setErrors(result.errors); // { email: "Already registered" }
+ *   }
+ * }
+ *
+ * <Form errors={errors} onFormSubmit={handleSubmit}>
+ *   <Field.Root name="email">
+ *     <Field.Control type="email" />
+ *     <Field.Error />
+ *   </Field.Root>
+ * </Form>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Native submit handlers remain native, so TanStack Form can own state.
+ * <Form
+ *   onSubmit={(event) => {
+ *     event.preventDefault();
+ *     void form.handleSubmit();
+ *   }}
+ * >
+ *   ...
+ * </Form>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With validation modes
+ * // Fields validate when they lose focus
+ * <Form validationMode="onBlur">
+ *   ...
+ * </Form>
+ *
+ * // Fields validate as user types
+ * <Form validationMode="onChange">
+ *   ...
+ * </Form>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/form | Base UI Form}
+ */
+declare function Form({
+  className,
+  ref,
+  ...props
+}: FormProps & {
+  ref?: React.Ref<HTMLFormElement>;
+}): React.JSX.Element;
+//#endregion
+export { Form, FormProps };

package/dist/components/Form.js

@@ -0,0 +1,88 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Form as Form$1 } from "@base-ui/react/form";
+//#region src/components/Form.tsx
+/**
+* A form component that provides consolidated error handling and validation
+* for form controls. Works seamlessly with the Field component.
+*
+* @example
+* ```tsx
+* // Basic usage with Field components
+* <Form onFormSubmit={(values) => console.log(values)}>
+*   <Field.Root name="username">
+*     <Field.Label>Username</Field.Label>
+*     <Field.Control required />
+*     <Field.Error match="valueMissing">Username is required</Field.Error>
+*   </Field.Root>
+*
+*   <Field.Root name="email">
+*     <Field.Label>Email</Field.Label>
+*     <Field.Control type="email" required />
+*     <Field.Error match="valueMissing">Email is required</Field.Error>
+*     <Field.Error match="typeMismatch">Invalid email format</Field.Error>
+*   </Field.Root>
+*
+*   <Button type="submit">Submit</Button>
+* </Form>
+* ```
+*
+* @example
+* ```tsx
+* // With external/server errors
+* const [errors, setErrors] = useState({});
+*
+* async function handleSubmit(values) {
+*   const result = await api.submit(values);
+*   if (result.errors) {
+*     setErrors(result.errors); // { email: "Already registered" }
+*   }
+* }
+*
+* <Form errors={errors} onFormSubmit={handleSubmit}>
+*   <Field.Root name="email">
+*     <Field.Control type="email" />
+*     <Field.Error />
+*   </Field.Root>
+* </Form>
+* ```
+*
+* @example
+* ```tsx
+* // Native submit handlers remain native, so TanStack Form can own state.
+* <Form
+*   onSubmit={(event) => {
+*     event.preventDefault();
+*     void form.handleSubmit();
+*   }}
+* >
+*   ...
+* </Form>
+* ```
+*
+* @example
+* ```tsx
+* // With validation modes
+* // Fields validate when they lose focus
+* <Form validationMode="onBlur">
+*   ...
+* </Form>
+*
+* // Fields validate as user types
+* <Form validationMode="onChange">
+*   ...
+* </Form>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/form | Base UI Form}
+*/
+function Form({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx(Form$1, {
+		ref,
+		"data-slot": "form",
+		className: ["form", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+//#endregion
+export { Form };

package/dist/components/GithubMotionMark.d.ts

@@ -0,0 +1,13 @@
+//#region src/components/GithubMotionMark.d.ts
+/**
+ * Small GitHub motion mark used next to install or repository connection text.
+ */
+declare function GithubMotionMark({
+  className,
+  size
+}: {
+  readonly className?: string;
+  readonly size?: number;
+}): import("react").JSX.Element;
+//#endregion
+export { GithubMotionMark };