@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Stepper.js

@@ -0,0 +1,315 @@
+import { C as SpinnerIcon, o as CheckIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Stepper.tsx
+const StepperContext = React.createContext(void 0);
+const StepItemContext = React.createContext(void 0);
+function useStepper() {
+	const context = React.useContext(StepperContext);
+	if (!context) throw new Error("useStepper must be used within a Stepper");
+	return context;
+}
+function useStepItem() {
+	const context = React.useContext(StepItemContext);
+	if (!context) throw new Error("useStepItem must be used within a StepperItem");
+	return context;
+}
+/**
+* A composable stepper for setup flows, onboarding, and other ordered workflows.
+*
+* @example
+* ```tsx
+* <Stepper defaultValue={1}>
+*   <StepperNav>
+*     <StepperItem step={1}>
+*       <StepperTrigger>
+*         <StepperIndicator>1</StepperIndicator>
+*         <StepperTitle>Connect account</StepperTitle>
+*       </StepperTrigger>
+*       <StepperSeparator />
+*     </StepperItem>
+*   </StepperNav>
+* </Stepper>
+* ```
+*
+* @see {@link https://reui.io/docs/components/base/stepper | ReUI Stepper}
+*/
+function Stepper({ defaultValue = 1, value, onValueChange, orientation = "horizontal", indicators = {}, className, children, ref, ...props }) {
+	const idPrefix = `stepper-${React.useId()}`;
+	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+	const triggerNodes = React.useRef(/* @__PURE__ */ new Map());
+	const [triggerSteps, setTriggerSteps] = React.useState([]);
+	const activeStep = value ?? uncontrolledValue;
+	const setActiveStep = React.useCallback((step) => {
+		if (value === void 0) setUncontrolledValue(step);
+		onValueChange?.(step);
+	}, [onValueChange, value]);
+	const registerTrigger = React.useCallback((step, node) => {
+		if (node) {
+			triggerNodes.current.set(step, node);
+			setTriggerSteps((steps) => steps.includes(step) ? steps : [...steps, step]);
+			return;
+		}
+		triggerNodes.current.delete(step);
+		setTriggerSteps((steps) => steps.filter((currentStep) => currentStep !== step));
+	}, []);
+	const focusStep = React.useCallback((step) => {
+		triggerNodes.current.get(step)?.focus();
+	}, []);
+	const getEnabledSteps = React.useCallback(() => triggerSteps.filter((step) => {
+		const node = triggerNodes.current.get(step);
+		return node && !node.disabled;
+	}), [triggerSteps]);
+	const focusNext = React.useCallback((step) => {
+		const enabledSteps = getEnabledSteps();
+		const currentIndex = enabledSteps.indexOf(step);
+		if (currentIndex === -1 || enabledSteps.length === 0) return;
+		focusStep(enabledSteps[(currentIndex + 1) % enabledSteps.length]);
+	}, [focusStep, getEnabledSteps]);
+	const focusPrev = React.useCallback((step) => {
+		const enabledSteps = getEnabledSteps();
+		const currentIndex = enabledSteps.indexOf(step);
+		if (currentIndex === -1 || enabledSteps.length === 0) return;
+		focusStep(enabledSteps[(currentIndex - 1 + enabledSteps.length) % enabledSteps.length]);
+	}, [focusStep, getEnabledSteps]);
+	const focusFirst = React.useCallback(() => {
+		const [firstStep] = getEnabledSteps();
+		if (firstStep !== void 0) focusStep(firstStep);
+	}, [focusStep, getEnabledSteps]);
+	const focusLast = React.useCallback(() => {
+		const enabledSteps = getEnabledSteps();
+		const lastStep = enabledSteps[enabledSteps.length - 1];
+		if (lastStep !== void 0) focusStep(lastStep);
+	}, [focusStep, getEnabledSteps]);
+	const contextValue = React.useMemo(() => ({
+		activeStep,
+		setActiveStep,
+		stepsCount: triggerSteps.length,
+		orientation,
+		indicators,
+		idPrefix,
+		registerTrigger,
+		focusNext,
+		focusPrev,
+		focusFirst,
+		focusLast
+	}), [
+		activeStep,
+		focusFirst,
+		focusLast,
+		focusNext,
+		focusPrev,
+		idPrefix,
+		indicators,
+		orientation,
+		registerTrigger,
+		setActiveStep,
+		triggerSteps.length
+	]);
+	return /* @__PURE__ */ jsx(StepperContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("stepper", className),
+			"data-orientation": orientation,
+			...props,
+			children
+		})
+	});
+}
+function StepperNav({ className, ref, role, ...props }) {
+	const { activeStep, orientation } = useStepper();
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		role: role ?? "tablist",
+		"aria-orientation": orientation,
+		className: cx("stepper__nav", className),
+		"data-active-step": activeStep,
+		"data-orientation": orientation,
+		...props
+	});
+}
+function StepperItem({ step, completed = false, disabled = false, loading = false, className, ref, ...props }) {
+	const { activeStep } = useStepper();
+	const isLoading = loading && step === activeStep;
+	const state = isLoading ? "loading" : completed || step < activeStep ? "completed" : activeStep === step ? "active" : "inactive";
+	return /* @__PURE__ */ jsx(StepItemContext.Provider, {
+		value: {
+			step,
+			state,
+			isDisabled: disabled,
+			isLoading
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			role: "presentation",
+			className: cx("stepper__item", className),
+			"data-disabled": disabled ? "" : void 0,
+			"data-loading": isLoading ? "" : void 0,
+			"data-state": state,
+			...props
+		})
+	});
+}
+function StepperTrigger({ className, children, disabled, id, "aria-controls": ariaControls, tabIndex, onClick, onKeyDown, ref, ...props }) {
+	const { activeStep, focusFirst, focusLast, focusNext, focusPrev, idPrefix, registerTrigger, setActiveStep } = useStepper();
+	const { isDisabled, isLoading, state, step } = useStepItem();
+	const isSelected = activeStep === step;
+	const triggerId = id ?? `${idPrefix}-trigger-${step}`;
+	const setTriggerRef = React.useCallback((node) => {
+		registerTrigger(step, node);
+		assignRef(ref, node);
+	}, [
+		ref,
+		registerTrigger,
+		step
+	]);
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) setActiveStep(step);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowRight":
+				event.preventDefault();
+				focusNext(step);
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				event.preventDefault();
+				focusPrev(step);
+				break;
+			case "End":
+				event.preventDefault();
+				focusLast();
+				break;
+			case "Home":
+				event.preventDefault();
+				focusFirst();
+				break;
+			case " ":
+			case "Enter":
+				event.preventDefault();
+				setActiveStep(step);
+				break;
+		}
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref: setTriggerRef,
+		role: "tab",
+		id: triggerId,
+		"aria-controls": ariaControls,
+		"aria-current": isSelected ? "step" : void 0,
+		"aria-selected": isSelected,
+		className: cx("stepper__trigger", className),
+		"data-loading": isLoading ? "" : void 0,
+		"data-state": state,
+		disabled: disabled ?? isDisabled,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		tabIndex: typeof tabIndex === "number" ? tabIndex : isSelected ? 0 : -1,
+		...props,
+		children
+	});
+}
+function StepperIndicator({ className, children, ref, ...props }) {
+	const { indicators } = useStepper();
+	const { isLoading, state, step } = useStepItem();
+	const indicator = getIndicatorContent({
+		children,
+		indicators,
+		isLoading,
+		state,
+		step
+	});
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"aria-hidden": "true",
+		className: cx("stepper__indicator", className),
+		"data-loading": isLoading ? "" : void 0,
+		"data-state": state,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "stepper__indicator-content",
+			children: indicator
+		})
+	});
+}
+function StepperSeparator({ className, ref, ...props }) {
+	const { state } = useStepItem();
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"aria-hidden": "true",
+		className: cx("stepper__separator", className),
+		"data-state": state,
+		...props
+	});
+}
+function StepperTitle({ className, children, ref, ...props }) {
+	const { state } = useStepItem();
+	return /* @__PURE__ */ jsx("h3", {
+		ref,
+		className: cx("stepper__title", className),
+		"data-state": state,
+		...props,
+		children
+	});
+}
+function StepperDescription({ className, ref, ...props }) {
+	const { state } = useStepItem();
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("stepper__description", className),
+		"data-state": state,
+		...props
+	});
+}
+function StepperPanel({ className, ref, ...props }) {
+	const { activeStep } = useStepper();
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("stepper__panel", className),
+		"data-active-step": activeStep,
+		...props
+	});
+}
+function StepperContent({ value, forceMount = false, className, children, id, "aria-labelledby": ariaLabelledBy, ref, ...props }) {
+	const { activeStep, idPrefix } = useStepper();
+	const isActive = activeStep === value;
+	if (!forceMount && !isActive) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "tabpanel",
+		id: id ?? `${idPrefix}-panel-${value}`,
+		"aria-labelledby": ariaLabelledBy ?? `${idPrefix}-trigger-${value}`,
+		className: cx("stepper__content", !isActive && "stepper__content--hidden", className),
+		"data-state": isActive ? "active" : "inactive",
+		hidden: !isActive,
+		tabIndex: 0,
+		...props,
+		children
+	});
+}
+function getIndicatorContent({ children, indicators, isLoading, state, step }) {
+	if (isLoading && indicators.loading !== void 0) return indicators.loading;
+	if (state === "completed" && indicators.completed !== void 0) return indicators.completed;
+	if (state === "active" && indicators.active !== void 0) return indicators.active;
+	if (state === "inactive" && indicators.inactive !== void 0) return indicators.inactive;
+	if (children !== void 0 && children !== null) return children;
+	if (isLoading) return /* @__PURE__ */ jsx(SpinnerIcon, {});
+	if (state === "completed") return /* @__PURE__ */ jsx(CheckIcon, {});
+	return step;
+}
+function assignRef(ref, value) {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) ref.current = value;
+}
+//#endregion
+export { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTitle, StepperTrigger, useStepItem, useStepper };

package/dist/components/Switch.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+
+//#region src/components/Switch.d.ts
+interface SwitchProps extends Omit<React.ComponentPropsWithRef<typeof Switch$1.Root>, "className"> {
+  className?: string;
+  /**
+   * The size of the switch.
+   * @default 'default'
+   */
+  size?: "sm" | "md" | "lg" | "default";
+}
+interface SwitchThumbProps extends Omit<React.ComponentPropsWithRef<typeof Switch$1.Thumb>, "className"> {
+  className?: string;
+}
+/**
+ * A toggle switch component for binary choices.
+ *
+ * @example
+ * ```tsx
+ * <Switch defaultChecked>
+ *   <SwitchThumb />
+ * </Switch>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled
+ * const [checked, setChecked] = React.useState(false);
+ * <Switch checked={checked} onCheckedChange={setChecked}>
+ *   <SwitchThumb />
+ * </Switch>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/switch | Base UI Switch}
+ */
+declare function Switch({
+  size,
+  className,
+  children,
+  ref,
+  ...props
+}: SwitchProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * The thumb indicator for the Switch component.
+ */
+declare function SwitchThumb({
+  className,
+  ref,
+  ...props
+}: SwitchThumbProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { Switch, SwitchProps, SwitchThumb, SwitchThumbProps };

package/dist/components/Switch.js

@@ -0,0 +1,55 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/components/Switch.tsx
+/**
+* A toggle switch component for binary choices.
+*
+* @example
+* ```tsx
+* <Switch defaultChecked>
+*   <SwitchThumb />
+* </Switch>
+* ```
+*
+* @example
+* ```tsx
+* // Controlled
+* const [checked, setChecked] = React.useState(false);
+* <Switch checked={checked} onCheckedChange={setChecked}>
+*   <SwitchThumb />
+* </Switch>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/switch | Base UI Switch}
+*/
+function Switch({ size = "default", className = "", children, ref, ...props }) {
+	const normalizedSize = size === "md" ? "default" : size;
+	const classes = [
+		"switch",
+		normalizedSize !== "default" && `switch--${normalizedSize}`,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		ref,
+		"data-slot": "switch",
+		"data-size": normalizedSize,
+		className: classes,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(SwitchThumb, {})
+	});
+}
+/**
+* The thumb indicator for the Switch component.
+*/
+function SwitchThumb({ className = "", ref, ...props }) {
+	const classes = ["switch__thumb", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Switch$1.Thumb, {
+		ref,
+		"data-slot": "switch-thumb",
+		className: classes,
+		...props
+	});
+}
+//#endregion
+export { Switch, SwitchThumb };

package/dist/components/Tabs.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+
+//#region src/components/Tabs.d.ts
+interface TabsProps extends Omit<Tabs$1.Root.Props, "className"> {
+  className?: string;
+  /**
+   * The visual style variant.
+   * @default 'default'
+   */
+  variant?: "default" | "bordered";
+}
+interface TabsListProps extends Omit<Tabs$1.List.Props, "className"> {
+  className?: string;
+  variant?: "default" | "line" | null;
+}
+interface TabProps extends Omit<Tabs$1.Tab.Props, "className"> {
+  className?: string;
+}
+interface TabPanelProps extends Omit<Tabs$1.Panel.Props, "className"> {
+  className?: string;
+}
+type TabsTriggerProps = TabProps;
+type TabsContentProps = TabPanelProps;
+interface TabsListVariantsOptions {
+  variant?: "default" | "line" | null;
+  className?: string;
+}
+declare function tabsListVariants({
+  variant,
+  className
+}?: TabsListVariantsOptions): string;
+/**
+ * A tabs component for organizing content into separate views.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <Tab value="tab1">Tab 1</Tab>
+ *     <Tab value="tab2">Tab 2</Tab>
+ *   </TabsList>
+ *   <TabPanel value="tab1">Content 1</TabPanel>
+ *   <TabPanel value="tab2">Content 2</TabPanel>
+ * </Tabs>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
+ */
+declare function Tabs({
+  orientation,
+  variant,
+  className,
+  ref,
+  ...props
+}: TabsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function TabsList({
+  className,
+  variant,
+  ref,
+  ...props
+}: TabsListProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function Tab({
+  className,
+  ref,
+  ...props
+}: TabProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare function TabPanel({
+  className,
+  ref,
+  ...props
+}: TabPanelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const TabsTrigger: typeof Tab;
+declare const TabsContent: typeof TabPanel;
+//#endregion
+export { Tab, TabPanel, TabPanelProps, TabProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsListVariantsOptions, TabsProps, TabsTrigger, TabsTriggerProps, tabsListVariants };

package/dist/components/Tabs.js

@@ -0,0 +1,78 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/components/Tabs.tsx
+function tabsListVariants({ variant = "default", className } = {}) {
+	return [
+		"tabs__list",
+		variant === "line" && "tabs__list--line",
+		className
+	].filter(Boolean).join(" ");
+}
+/**
+* A tabs component for organizing content into separate views.
+*
+* @example
+* ```tsx
+* <Tabs defaultValue="tab1">
+*   <TabsList>
+*     <Tab value="tab1">Tab 1</Tab>
+*     <Tab value="tab2">Tab 2</Tab>
+*   </TabsList>
+*   <TabPanel value="tab1">Content 1</TabPanel>
+*   <TabPanel value="tab2">Content 2</TabPanel>
+* </Tabs>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
+*/
+function Tabs({ orientation = "horizontal", variant = "default", className = "", ref, ...props }) {
+	const classes = [
+		"tabs",
+		variant !== "default" && `tabs--${variant}`,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		ref,
+		"data-orientation": orientation,
+		"data-slot": "tabs",
+		orientation,
+		className: classes,
+		...props
+	});
+}
+function TabsList({ className = "", variant = "default", ref, ...props }) {
+	const classes = tabsListVariants({
+		variant,
+		className
+	});
+	return /* @__PURE__ */ jsx(Tabs$1.List, {
+		ref,
+		"data-slot": "tabs-list",
+		"data-variant": variant,
+		className: classes,
+		...props
+	});
+}
+function Tab({ className = "", ref, ...props }) {
+	const classes = ["tabs__tab", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		ref,
+		"data-slot": "tabs-trigger",
+		className: classes,
+		...props
+	});
+}
+function TabPanel({ className = "", ref, ...props }) {
+	const classes = ["tabs__panel", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		ref,
+		"data-slot": "tabs-content",
+		className: classes,
+		...props
+	});
+}
+const TabsTrigger = Tab;
+const TabsContent = TabPanel;
+//#endregion
+export { Tab, TabPanel, Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

package/dist/components/Task.d.ts

@@ -0,0 +1,100 @@
+import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import * as React from "react";
+
+//#region src/components/Task.d.ts
+interface TaskProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * A collapsible task/workflow list. Compose with TaskTrigger, TaskContent,
+ * TaskItem, and TaskItemFile to show structured progress for a multi-step
+ * workflow like file edits. Adapted from Vercel AI Elements and restyled
+ * with Sigvelo CSS tokens.
+ *
+ * @example
+ * ```tsx
+ * <Task defaultOpen>
+ *   <TaskTrigger title="Refactoring authentication module" />
+ *   <TaskContent>
+ *     <TaskItem>
+ *       Updated <TaskItemFile name="auth.ts" /> to export the new interface
+ *     </TaskItem>
+ *     <TaskItem>
+ *       Added tests in <TaskItemFile name="auth.test.ts" />
+ *     </TaskItem>
+ *   </TaskContent>
+ * </Task>
+ * ```
+ *
+ * @see {@link https://elements.ai-sdk.dev/components/task | AI Elements Task}
+ */
+declare function Task({
+  className,
+  defaultOpen,
+  ref,
+  ...props
+}: TaskProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TaskTriggerProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+  className?: string;
+  /** Heading text shown in the trigger row. */
+  title: string;
+}
+/**
+ * Clickable header that toggles the task content.
+ */
+declare function TaskTrigger({
+  className,
+  title,
+  children,
+  ref,
+  ...props
+}: TaskTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface TaskContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * The collapsible panel containing TaskItem children.
+ */
+declare function TaskContent({
+  className,
+  children,
+  ref,
+  ...props
+}: TaskContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TaskItemProps extends React.HTMLAttributes<HTMLLIElement> {}
+/**
+ * A single task row. Free-form content; compose with TaskItemFile to
+ * reference a file inline.
+ */
+declare function TaskItem({
+  className,
+  children,
+  ref,
+  ...props
+}: TaskItemProps & {
+  ref?: React.Ref<HTMLLIElement>;
+}): React.JSX.Element;
+interface TaskItemFileProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** The file name or path to display. Used to derive the language badge. */
+  name?: string;
+}
+/**
+ * Inline file reference badge used inside TaskItem content.
+ */
+declare function TaskItemFile({
+  className,
+  name,
+  children,
+  ref,
+  ...props
+}: TaskItemFileProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { Task, TaskContent, TaskContentProps, TaskItem, TaskItemFile, TaskItemFileProps, TaskItemProps, TaskProps, TaskTrigger, TaskTriggerProps };