@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/Slider.d.ts

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+
+//#region src/components/Slider.d.ts
+interface SliderProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Root>, "className"> {
+  className?: string;
+}
+interface SliderControlProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Control>, "className"> {
+  className?: string;
+}
+interface SliderTrackProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Track>, "className"> {
+  className?: string;
+}
+interface SliderIndicatorProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Indicator>, "className"> {
+  className?: string;
+}
+interface SliderThumbProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Thumb>, "className"> {
+  className?: string;
+}
+interface SliderOutputProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Value>, "children"> {
+  className?: string;
+  children?: (value: number, values: readonly number[], formattedValues: readonly string[]) => React.ReactNode;
+}
+/**
+ * A slider component for selecting values from a range.
+ *
+ * @example
+ * ```tsx
+ * <Slider defaultValue={50}>
+ *   <SliderControl>
+ *     <SliderTrack>
+ *       <SliderIndicator />
+ *       <SliderThumb />
+ *     </SliderTrack>
+ *   </SliderControl>
+ * </Slider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With output value display
+ * <Slider defaultValue={50}>
+ *   <SliderOutput />
+ *   <SliderControl>
+ *     <SliderTrack>
+ *       <SliderIndicator />
+ *       <SliderThumb />
+ *     </SliderTrack>
+ *   </SliderControl>
+ * </Slider>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/slider | Base UI Slider}
+ */
+declare function Slider({
+  className,
+  children,
+  defaultValue,
+  max,
+  min,
+  ref,
+  value,
+  ...props
+}: SliderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The control area for the Slider (handles interactions).
+ */
+declare function SliderControl({
+  className,
+  ref,
+  ...props
+}: SliderControlProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The track container for the Slider.
+ */
+declare function SliderTrack({
+  className,
+  ref,
+  ...props
+}: SliderTrackProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The filled indicator showing current value position.
+ */
+declare function SliderIndicator({
+  className,
+  ref,
+  ...props
+}: SliderIndicatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The draggable thumb for the Slider.
+ */
+declare function SliderThumb({
+  className,
+  ref,
+  ...props
+}: SliderThumbProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Displays the current value of the Slider.
+ * Note: This must be used inside a Slider component to access the value context.
+ */
+declare function SliderOutput({
+  className,
+  children,
+  ref,
+  ...props
+}: SliderOutputProps & {
+  ref?: React.Ref<HTMLOutputElement>;
+}): React.JSX.Element;
+//#endregion
+export { Slider, SliderControl, SliderControlProps, SliderIndicator, SliderIndicatorProps, SliderOutput, SliderOutputProps, SliderProps, SliderThumb, SliderThumbProps, SliderTrack, SliderTrackProps };

package/dist/components/Slider.js

@@ -0,0 +1,115 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+//#region src/components/Slider.tsx
+/**
+* A slider component for selecting values from a range.
+*
+* @example
+* ```tsx
+* <Slider defaultValue={50}>
+*   <SliderControl>
+*     <SliderTrack>
+*       <SliderIndicator />
+*       <SliderThumb />
+*     </SliderTrack>
+*   </SliderControl>
+* </Slider>
+* ```
+*
+* @example
+* ```tsx
+* // With output value display
+* <Slider defaultValue={50}>
+*   <SliderOutput />
+*   <SliderControl>
+*     <SliderTrack>
+*       <SliderIndicator />
+*       <SliderThumb />
+*     </SliderTrack>
+*   </SliderControl>
+* </Slider>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/slider | Base UI Slider}
+*/
+function Slider({ className = "", children, defaultValue, max = 100, min = 0, ref, value, ...props }) {
+	const classes = ["slider", className].filter(Boolean).join(" ");
+	const resolvedDefaultValue = children == null && value === void 0 && defaultValue === void 0 ? [min, max] : defaultValue;
+	const thumbValues = Array.isArray(value) ? value : Array.isArray(resolvedDefaultValue) ? resolvedDefaultValue : [value ?? resolvedDefaultValue ?? min];
+	return /* @__PURE__ */ jsx(Slider$1.Root, {
+		ref,
+		"data-slot": "slider",
+		className: classes,
+		defaultValue: resolvedDefaultValue,
+		max,
+		min,
+		value,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(SliderControl, { children: /* @__PURE__ */ jsxs(SliderTrack, { children: [/* @__PURE__ */ jsx(SliderIndicator, {}), thumbValues.map((_, index) => /* @__PURE__ */ jsx(SliderThumb, { index }, index))] }) })
+	});
+}
+/**
+* The control area for the Slider (handles interactions).
+*/
+function SliderControl({ className = "", ref, ...props }) {
+	const classes = ["slider__control", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Slider$1.Control, {
+		ref,
+		"data-slot": "slider-control",
+		className: classes,
+		...props
+	});
+}
+/**
+* The track container for the Slider.
+*/
+function SliderTrack({ className = "", ref, ...props }) {
+	const classes = ["slider__track", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Slider$1.Track, {
+		ref,
+		"data-slot": "slider-track",
+		className: classes,
+		...props
+	});
+}
+/**
+* The filled indicator showing current value position.
+*/
+function SliderIndicator({ className = "", ref, ...props }) {
+	const classes = ["slider__indicator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Slider$1.Indicator, {
+		ref,
+		"data-slot": "slider-range",
+		className: classes,
+		...props
+	});
+}
+/**
+* The draggable thumb for the Slider.
+*/
+function SliderThumb({ className = "", ref, ...props }) {
+	const classes = ["slider__thumb", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Slider$1.Thumb, {
+		ref,
+		"data-slot": "slider-thumb",
+		className: classes,
+		...props
+	});
+}
+/**
+* Displays the current value of the Slider.
+* Note: This must be used inside a Slider component to access the value context.
+*/
+function SliderOutput({ className = "", children, ref, ...props }) {
+	const classes = ["slider__output", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Slider$1.Value, {
+		ref,
+		"data-slot": "slider-output",
+		className: classes,
+		...props,
+		children: (formattedValues, values) => typeof children === "function" ? children(values[0] ?? 0, values, formattedValues) : formattedValues.join(" - ")
+	});
+}
+//#endregion
+export { Slider, SliderControl, SliderIndicator, SliderOutput, SliderThumb, SliderTrack };

package/dist/components/Sources.d.ts

@@ -0,0 +1,91 @@
+import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import * as React from "react";
+
+//#region src/components/Sources.d.ts
+/**
+ * Props for the Sources root. Wraps Base UI Collapsible.Root.
+ */
+interface SourcesProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * Displays a collapsible list of citations used by an AI to generate a
+ * response. Compose with SourcesTrigger, SourcesContent, and one or more
+ * Source children. Adapted from Vercel AI Elements and restyled with Sigvelo
+ * CSS tokens.
+ *
+ * @example
+ * ```tsx
+ * <Sources defaultOpen>
+ *   <SourcesTrigger count={3} />
+ *   <SourcesContent>
+ *     <Source href="https://example.com/a" title="Article A" />
+ *     <Source href="https://example.com/b" title="Article B" />
+ *     <Source href="https://example.com/c" title="Article C" />
+ *   </SourcesContent>
+ * </Sources>
+ * ```
+ *
+ * @see {@link https://elements.ai-sdk.dev/components/sources | AI Elements Sources}
+ */
+declare function Sources({
+  className,
+  ref,
+  ...props
+}: SourcesProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface SourcesTriggerProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+  className?: string;
+  /** Number of sources to show in the trigger label. */
+  count: number;
+}
+/**
+ * The clickable header that toggles the sources list. Shows the count and a
+ * chevron that rotates when open.
+ */
+declare function SourcesTrigger({
+  className,
+  count,
+  children,
+  ref,
+  ...props
+}: SourcesTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface SourcesContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * The collapsible panel that contains Source children.
+ */
+declare function SourcesContent({
+  className,
+  children,
+  ref,
+  ...props
+}: SourcesContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface SourceProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "title"> {
+  /** The display title for this citation. */
+  title?: string;
+  /** Optional description rendered beneath the title. */
+  description?: string;
+}
+/**
+ * A single citation item. Renders as an anchor inside the sources list.
+ */
+declare function Source({
+  title,
+  description,
+  children,
+  className,
+  href,
+  ref,
+  ...props
+}: SourceProps & {
+  ref?: React.Ref<HTMLAnchorElement>;
+}): React.JSX.Element;
+//#endregion
+export { Source, SourceProps, Sources, SourcesContent, SourcesContentProps, SourcesProps, SourcesTrigger, SourcesTriggerProps };

package/dist/components/Sources.js

@@ -0,0 +1,121 @@
+import { c as ChevronRightIcon, v as LinkIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Sources.tsx
+/**
+* Displays a collapsible list of citations used by an AI to generate a
+* response. Compose with SourcesTrigger, SourcesContent, and one or more
+* Source children. Adapted from Vercel AI Elements and restyled with Sigvelo
+* CSS tokens.
+*
+* @example
+* ```tsx
+* <Sources defaultOpen>
+*   <SourcesTrigger count={3} />
+*   <SourcesContent>
+*     <Source href="https://example.com/a" title="Article A" />
+*     <Source href="https://example.com/b" title="Article B" />
+*     <Source href="https://example.com/c" title="Article C" />
+*   </SourcesContent>
+* </Sources>
+* ```
+*
+* @see {@link https://elements.ai-sdk.dev/components/sources | AI Elements Sources}
+*/
+function Sources({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+		ref,
+		className: cx("sources", className),
+		...props,
+		unstyled: true
+	});
+}
+/**
+* The clickable header that toggles the sources list. Shows the count and a
+* chevron that rotates when open.
+*/
+function SourcesTrigger({ className, count, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		ref,
+		className: cx("sources__trigger", className),
+		...props,
+		unstyled: true,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			className: "sources__trigger-label",
+			children: [
+				"Used ",
+				count,
+				" ",
+				count === 1 ? "source" : "sources"
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sources__trigger-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		})] })
+	});
+}
+/**
+* The collapsible panel that contains Source children.
+*/
+function SourcesContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+		ref,
+		className: cx("sources__content", className),
+		...props,
+		unstyled: true,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "sources__list",
+			role: "list",
+			children
+		})
+	});
+}
+/**
+* A single citation item. Renders as an anchor inside the sources list.
+*/
+function Source({ title, description, children, className, href, ref, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		className: "sources__item",
+		children: /* @__PURE__ */ jsx("a", {
+			ref,
+			href,
+			className: cx("sources__link", className),
+			target: "_blank",
+			rel: "noreferrer",
+			...props,
+			children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "sources__link-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(LinkIcon, {})
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "sources__link-body",
+				children: [
+					title ? /* @__PURE__ */ jsx("span", {
+						className: "sources__link-title",
+						children: title
+					}) : null,
+					description ? /* @__PURE__ */ jsx("span", {
+						className: "sources__link-description",
+						children: description
+					}) : null,
+					href ? /* @__PURE__ */ jsx("span", {
+						className: "sources__link-host",
+						children: hostnameFrom(href)
+					}) : null
+				]
+			})] })
+		})
+	});
+}
+function hostnameFrom(href) {
+	try {
+		return new URL(href).hostname.replace(/^www\./, "");
+	} catch {
+		return href;
+	}
+}
+//#endregion
+export { Source, Sources, SourcesContent, SourcesTrigger };

package/dist/components/Stepper.d.ts

@@ -0,0 +1,190 @@
+import * as React from "react";
+
+//#region src/components/Stepper.d.ts
+type StepperOrientation = "horizontal" | "vertical";
+type StepperState = "active" | "completed" | "inactive" | "loading";
+type StepIndicators = {
+  active?: React.ReactNode;
+  completed?: React.ReactNode;
+  inactive?: React.ReactNode;
+  loading?: React.ReactNode;
+};
+interface StepperContextValue {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+  stepsCount: number;
+  orientation: StepperOrientation;
+  indicators: StepIndicators;
+  idPrefix: string;
+  registerTrigger: (step: number, node: HTMLButtonElement | null) => void;
+  focusNext: (step: number) => void;
+  focusPrev: (step: number) => void;
+  focusFirst: () => void;
+  focusLast: () => void;
+}
+interface StepItemContextValue {
+  step: number;
+  state: StepperState;
+  isDisabled: boolean;
+  isLoading: boolean;
+}
+declare function useStepper(): StepperContextValue;
+declare function useStepItem(): StepItemContextValue;
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The first active step for uncontrolled steppers.
+   * @default 1
+   */
+  defaultValue?: number;
+  /**
+   * The active step for controlled steppers.
+   */
+  value?: number;
+  /**
+   * Called when a trigger requests a new active step.
+   */
+  onValueChange?: (value: number) => void;
+  /**
+   * The layout direction of the step navigation.
+   * @default "horizontal"
+   */
+  orientation?: StepperOrientation;
+  /**
+   * Optional replacement content for indicator states.
+   */
+  indicators?: StepIndicators;
+}
+/**
+ * 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}
+ */
+declare function Stepper({
+  defaultValue,
+  value,
+  onValueChange,
+  orientation,
+  indicators,
+  className,
+  children,
+  ref,
+  ...props
+}: StepperProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface StepperNavProps extends React.ComponentPropsWithoutRef<"nav"> {}
+declare function StepperNav({
+  className,
+  ref,
+  role,
+  ...props
+}: StepperNavProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number;
+  completed?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+}
+declare function StepperItem({
+  step,
+  completed,
+  disabled,
+  loading,
+  className,
+  ref,
+  ...props
+}: StepperItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface StepperTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+declare function StepperTrigger({
+  className,
+  children,
+  disabled,
+  id,
+  "aria-controls": ariaControls,
+  tabIndex,
+  onClick,
+  onKeyDown,
+  ref,
+  ...props
+}: StepperTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface StepperIndicatorProps extends React.ComponentPropsWithoutRef<"span"> {}
+declare function StepperIndicator({
+  className,
+  children,
+  ref,
+  ...props
+}: StepperIndicatorProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface StepperSeparatorProps extends React.ComponentPropsWithoutRef<"span"> {}
+declare function StepperSeparator({
+  className,
+  ref,
+  ...props
+}: StepperSeparatorProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface StepperTitleProps extends React.ComponentPropsWithoutRef<"h3"> {}
+declare function StepperTitle({
+  className,
+  children,
+  ref,
+  ...props
+}: StepperTitleProps & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}): React.JSX.Element;
+interface StepperDescriptionProps extends React.ComponentPropsWithoutRef<"div"> {}
+declare function StepperDescription({
+  className,
+  ref,
+  ...props
+}: StepperDescriptionProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface StepperPanelProps extends React.ComponentPropsWithoutRef<"div"> {}
+declare function StepperPanel({
+  className,
+  ref,
+  ...props
+}: StepperPanelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface StepperContentProps extends React.ComponentPropsWithoutRef<"div"> {
+  value: number;
+  forceMount?: boolean;
+}
+declare function StepperContent({
+  value,
+  forceMount,
+  className,
+  children,
+  id,
+  "aria-labelledby": ariaLabelledBy,
+  ref,
+  ...props
+}: StepperContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+//#endregion
+export { StepIndicators, StepItemContextValue, Stepper, StepperContent, StepperContentProps, StepperContextValue, StepperDescription, StepperDescriptionProps, StepperIndicator, StepperIndicatorProps, StepperItem, StepperItemProps, StepperNav, StepperNavProps, StepperOrientation, StepperPanel, StepperPanelProps, StepperProps, StepperSeparator, StepperSeparatorProps, StepperState, StepperTitle, StepperTitleProps, StepperTrigger, StepperTriggerProps, useStepItem, useStepper };