@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Reasoning.js

@@ -0,0 +1,187 @@
+import { a as BrainIcon, c as ChevronRightIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { Streamdown } from "streamdown";
+//#region src/components/Reasoning.tsx
+const ReasoningContext = React.createContext(null);
+const AUTO_CLOSE_DELAY_MS = 1e3;
+const MS_IN_S = 1e3;
+function useReasoning() {
+	const ctx = React.useContext(ReasoningContext);
+	if (!ctx) throw new Error("Reasoning subcomponents must be used inside <Reasoning>.");
+	return ctx;
+}
+/**
+* A collapsible "thinking" block for showing model reasoning (e.g. DeepSeek
+* R1, OpenAI o-series). Auto-expands while streaming and collapses when done.
+* Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+*
+* @example
+* ```tsx
+* <Reasoning isStreaming={isThinking} duration={elapsed}>
+*   <ReasoningTrigger />
+*   <ReasoningContent>{reasoningText}</ReasoningContent>
+* </Reasoning>
+* ```
+*
+* @see {@link https://elements.ai-sdk.dev/components/reasoning | AI Elements Reasoning}
+*/
+function Reasoning({ className, isStreaming = false, duration, open, defaultOpen, onOpenChange, children, ref, ...props }) {
+	const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? isStreaming);
+	const [internalDuration, setInternalDuration] = React.useState(duration);
+	const previousStreamingRef = React.useRef(isStreaming);
+	const startTimeRef = React.useRef(isStreaming ? Date.now() : null);
+	const hasEverStreamedRef = React.useRef(isStreaming);
+	const [hasAutoClosed, setHasAutoClosed] = React.useState(false);
+	const isControlled = open !== void 0;
+	const currentOpen = isControlled ? open : internalOpen;
+	const preventAutoOpen = defaultOpen === false;
+	const resolvedDuration = duration ?? internalDuration;
+	const setOpenState = React.useCallback((next) => {
+		if (next === currentOpen) return;
+		if (!isControlled) setInternalOpen(next);
+		onOpenChange?.(next);
+	}, [
+		currentOpen,
+		isControlled,
+		onOpenChange
+	]);
+	React.useEffect(() => {
+		if (duration !== void 0) setInternalDuration(duration);
+	}, [duration]);
+	React.useEffect(() => {
+		if (isStreaming) {
+			hasEverStreamedRef.current = true;
+			setHasAutoClosed(false);
+			if (duration === void 0) setInternalDuration(void 0);
+			if (startTimeRef.current === null) startTimeRef.current = Date.now();
+			return;
+		}
+		if (startTimeRef.current !== null) {
+			if (duration === void 0) setInternalDuration(Math.max(1, Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S)));
+			startTimeRef.current = null;
+		}
+	}, [duration, isStreaming]);
+	React.useEffect(() => {
+		const wasStreaming = previousStreamingRef.current;
+		if (isStreaming && !currentOpen && !preventAutoOpen) setOpenState(true);
+		if (!isStreaming && wasStreaming && hasEverStreamedRef.current && currentOpen && !hasAutoClosed) {
+			const closeTimer = window.setTimeout(() => {
+				setOpenState(false);
+				setHasAutoClosed(true);
+			}, AUTO_CLOSE_DELAY_MS);
+			previousStreamingRef.current = isStreaming;
+			return () => window.clearTimeout(closeTimer);
+		}
+		previousStreamingRef.current = isStreaming;
+	}, [
+		currentOpen,
+		hasAutoClosed,
+		isStreaming,
+		preventAutoOpen,
+		setOpenState
+	]);
+	const handleOpenChange = React.useCallback((next) => {
+		setOpenState(next);
+	}, [setOpenState]);
+	const ctx = React.useMemo(() => ({
+		isStreaming,
+		isOpen: currentOpen,
+		setIsOpen: setOpenState,
+		duration: resolvedDuration
+	}), [
+		currentOpen,
+		isStreaming,
+		resolvedDuration,
+		setOpenState
+	]);
+	return /* @__PURE__ */ jsx(ReasoningContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx(CollapsibleRoot, {
+			ref,
+			className: cx("reasoning", className),
+			open: currentOpen,
+			onOpenChange: handleOpenChange,
+			"data-streaming": isStreaming ? "" : void 0,
+			...props,
+			unstyled: true,
+			children
+		})
+	});
+}
+function defaultGetThinkingMessage(isStreaming, duration) {
+	if (isStreaming || duration === 0) return "Thinking...";
+	if (duration === void 0) return "Thought for a few seconds";
+	return `Thought for ${duration} second${duration === 1 ? "" : "s"}`;
+}
+/**
+* Trigger that toggles the reasoning panel. Shows "Thinking..." while
+* streaming and "Thought for Ns" afterward.
+*/
+function ReasoningTrigger({ className, children, getThinkingMessage = defaultGetThinkingMessage, ref, ...props }) {
+	const { isStreaming, duration } = useReasoning();
+	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		ref,
+		className: cx("reasoning__trigger", className),
+		"data-streaming": isStreaming ? "" : void 0,
+		...props,
+		unstyled: true,
+		children
+	});
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		ref,
+		className: cx("reasoning__trigger", className),
+		"data-streaming": isStreaming ? "" : void 0,
+		...props,
+		unstyled: true,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "reasoning__trigger-leading-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(BrainIcon, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "reasoning__trigger-label",
+				children: getThinkingMessage(isStreaming, duration)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "reasoning__trigger-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			})
+		]
+	});
+}
+const streamdownPlugins = {
+	cjk,
+	code,
+	math,
+	mermaid
+};
+/**
+* The reasoning text panel. Accepts any React node but is optimized for
+* long-form text; a muted left border visually distinguishes the block.
+*/
+function ReasoningContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+		ref,
+		className: cx("reasoning__content", className),
+		...props,
+		unstyled: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "reasoning__text",
+			children: typeof children === "string" ? /* @__PURE__ */ jsx(Streamdown, {
+				plugins: streamdownPlugins,
+				children
+			}) : children
+		})
+	});
+}
+//#endregion
+export { Reasoning, ReasoningContent, ReasoningTrigger, useReasoning };

package/dist/components/ScrollArea.d.ts

@@ -0,0 +1,160 @@
+import * as React from "react";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+
+//#region src/components/ScrollArea.d.ts
+/**
+ * Props for the ScrollArea.Root component.
+ */
+interface ScrollAreaRootProps extends Omit<React.ComponentPropsWithoutRef<typeof ScrollArea$1.Root>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the ScrollArea.Viewport component.
+ */
+interface ScrollAreaViewportProps extends Omit<React.ComponentPropsWithoutRef<typeof ScrollArea$1.Viewport>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the ScrollArea.Scrollbar component.
+ */
+interface ScrollAreaScrollbarProps extends Omit<React.ComponentPropsWithoutRef<typeof ScrollArea$1.Scrollbar>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the ScrollArea.Thumb component.
+ */
+interface ScrollAreaThumbProps extends Omit<React.ComponentPropsWithoutRef<typeof ScrollArea$1.Thumb>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the ScrollArea.Corner component.
+ */
+interface ScrollAreaCornerProps extends Omit<React.ComponentPropsWithoutRef<typeof ScrollArea$1.Corner>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Container that groups all scroll area parts. Renders a `<div>` element.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea.Root>
+ *   <ScrollArea.Viewport>
+ *     <div>Scrollable content...</div>
+ *   </ScrollArea.Viewport>
+ *   <ScrollArea.Scrollbar>
+ *     <ScrollArea.Thumb />
+ *   </ScrollArea.Scrollbar>
+ * </ScrollArea.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/scroll-area | Base UI ScrollArea}
+ */
+declare function ScrollAreaRoot({
+  className,
+  ref,
+  ...props
+}: ScrollAreaRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The scrollable viewport container.
+ */
+declare function ScrollAreaViewport({
+  className,
+  tabIndex,
+  role,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ref,
+  ...props
+}: ScrollAreaViewportProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The scrollbar track, either vertical or horizontal.
+ */
+declare function ScrollAreaScrollbar({
+  className,
+  orientation,
+  ref,
+  ...props
+}: ScrollAreaScrollbarProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const ScrollBar: typeof ScrollAreaScrollbar;
+/**
+ * The draggable scrollbar thumb indicator.
+ */
+declare function ScrollAreaThumb({
+  className,
+  ref,
+  ...props
+}: ScrollAreaThumbProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Small rectangle at the intersection of scrollbars.
+ */
+declare function ScrollAreaCorner({
+  className,
+  ref,
+  ...props
+}: ScrollAreaCornerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ScrollAreaDefault({
+  children,
+  ...props
+}: ScrollAreaRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A native scroll container with custom-styled scrollbars.
+ * Provides smooth scrolling and customizable appearance.
+ *
+ * @example
+ * ```tsx
+ * // Vertical scroll
+ * <ScrollArea.Root style={{ height: 200 }}>
+ *   <ScrollArea.Viewport>
+ *     <div>Long content...</div>
+ *   </ScrollArea.Viewport>
+ *   <ScrollArea.Scrollbar>
+ *     <ScrollArea.Thumb />
+ *   </ScrollArea.Scrollbar>
+ * </ScrollArea.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Both scrollbars
+ * <ScrollArea.Root style={{ height: 200, width: 300 }}>
+ *   <ScrollArea.Viewport>
+ *     <div style={{ width: 600 }}>Wide and tall content...</div>
+ *   </ScrollArea.Viewport>
+ *   <ScrollArea.Scrollbar orientation="vertical">
+ *     <ScrollArea.Thumb />
+ *   </ScrollArea.Scrollbar>
+ *   <ScrollArea.Scrollbar orientation="horizontal">
+ *     <ScrollArea.Thumb />
+ *   </ScrollArea.Scrollbar>
+ *   <ScrollArea.Corner />
+ * </ScrollArea.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/scroll-area | Base UI ScrollArea}
+ */
+declare const ScrollArea: typeof ScrollAreaDefault & {
+  Root: typeof ScrollAreaRoot;
+  Viewport: typeof ScrollAreaViewport;
+  Scrollbar: typeof ScrollAreaScrollbar;
+  Thumb: typeof ScrollAreaThumb;
+  Corner: typeof ScrollAreaCorner;
+};
+//#endregion
+export { ScrollArea, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps, ScrollBar };

package/dist/components/ScrollArea.js

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+//#region src/components/ScrollArea.tsx
+/**
+* Container that groups all scroll area parts. Renders a `<div>` element.
+*
+* @example
+* ```tsx
+* <ScrollArea.Root>
+*   <ScrollArea.Viewport>
+*     <div>Scrollable content...</div>
+*   </ScrollArea.Viewport>
+*   <ScrollArea.Scrollbar>
+*     <ScrollArea.Thumb />
+*   </ScrollArea.Scrollbar>
+* </ScrollArea.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/scroll-area | Base UI ScrollArea}
+*/
+function ScrollAreaRoot({ className = "", ref, ...props }) {
+	const classes = ["scroll-area", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ScrollArea$1.Root, {
+		ref,
+		"data-slot": "scroll-area",
+		className: classes,
+		...props
+	});
+}
+/**
+* The scrollable viewport container.
+*/
+function ScrollAreaViewport({ className = "", tabIndex = 0, role = "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }) {
+	const classes = ["scroll-area__viewport", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+		ref,
+		"data-slot": "scroll-area-viewport",
+		role,
+		"aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Scrollable content"),
+		"aria-labelledby": ariaLabelledBy,
+		tabIndex,
+		className: classes,
+		...props
+	});
+}
+/**
+* The scrollbar track, either vertical or horizontal.
+*/
+function ScrollAreaScrollbar({ className = "", orientation = "vertical", ref, ...props }) {
+	const classes = ["scroll-area__scrollbar", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
+		ref,
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: classes,
+		...props
+	});
+}
+const ScrollBar = ScrollAreaScrollbar;
+/**
+* The draggable scrollbar thumb indicator.
+*/
+function ScrollAreaThumb({ className = "", ref, ...props }) {
+	const classes = ["scroll-area__thumb", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
+		ref,
+		"data-slot": "scroll-area-thumb",
+		className: classes,
+		...props
+	});
+}
+/**
+* Small rectangle at the intersection of scrollbars.
+*/
+function ScrollAreaCorner({ className = "", ref, ...props }) {
+	const classes = ["scroll-area__corner", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ScrollArea$1.Corner, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+function hasScrollAreaParts(children) {
+	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === ScrollAreaViewport || child.type === ScrollAreaScrollbar || child.type === ScrollAreaCorner));
+}
+function ScrollAreaDefault({ children, ...props }) {
+	if (hasScrollAreaParts(children)) return /* @__PURE__ */ jsx(ScrollAreaRoot, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScrollAreaViewport, { children }),
+			/* @__PURE__ */ jsx(ScrollAreaScrollbar, { children: /* @__PURE__ */ jsx(ScrollAreaThumb, {}) }),
+			/* @__PURE__ */ jsx(ScrollAreaCorner, {})
+		]
+	});
+}
+/**
+* A native scroll container with custom-styled scrollbars.
+* Provides smooth scrolling and customizable appearance.
+*
+* @example
+* ```tsx
+* // Vertical scroll
+* <ScrollArea.Root style={{ height: 200 }}>
+*   <ScrollArea.Viewport>
+*     <div>Long content...</div>
+*   </ScrollArea.Viewport>
+*   <ScrollArea.Scrollbar>
+*     <ScrollArea.Thumb />
+*   </ScrollArea.Scrollbar>
+* </ScrollArea.Root>
+* ```
+*
+* @example
+* ```tsx
+* // Both scrollbars
+* <ScrollArea.Root style={{ height: 200, width: 300 }}>
+*   <ScrollArea.Viewport>
+*     <div style={{ width: 600 }}>Wide and tall content...</div>
+*   </ScrollArea.Viewport>
+*   <ScrollArea.Scrollbar orientation="vertical">
+*     <ScrollArea.Thumb />
+*   </ScrollArea.Scrollbar>
+*   <ScrollArea.Scrollbar orientation="horizontal">
+*     <ScrollArea.Thumb />
+*   </ScrollArea.Scrollbar>
+*   <ScrollArea.Corner />
+* </ScrollArea.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/scroll-area | Base UI ScrollArea}
+*/
+const ScrollArea = Object.assign(ScrollAreaDefault, {
+	Root: ScrollAreaRoot,
+	Viewport: ScrollAreaViewport,
+	Scrollbar: ScrollAreaScrollbar,
+	Thumb: ScrollAreaThumb,
+	Corner: ScrollAreaCorner
+});
+//#endregion
+export { ScrollArea, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollBar };

package/dist/components/Select.d.ts

@@ -0,0 +1,2 @@
+import { A as SelectTriggerProps, C as SelectScrollDownButton, D as SelectSeparator, E as SelectScrollUpButtonProps, M as SelectValueProps, O as SelectSeparatorProps, S as SelectProps, T as SelectScrollUpButton, _ as SelectPopupProps, a as SelectGroupProps, b as SelectPositioner, c as SelectLabel, d as SelectListProps, f as SelectOption, g as SelectPopup, h as SelectOptionProps, i as SelectGroup, j as SelectValue, k as SelectTrigger, l as SelectLabelProps, m as SelectOptionGroupProps, n as SelectContent, o as SelectItem, p as SelectOptionGroup, r as SelectContentProps, s as SelectItemProps, t as Select, u as SelectList, v as SelectPortal, w as SelectScrollDownButtonProps, x as SelectPositionerProps, y as SelectPortalProps } from "../Select-CRsKCJ9x.js";
+export { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectOption, SelectOptionGroup, SelectOptionGroupProps, SelectOptionProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectPositioner, SelectPositionerProps, SelectProps, SelectScrollDownButton, SelectScrollDownButtonProps, SelectScrollUpButton, SelectScrollUpButtonProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps };