@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/Badge.js

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Badge.tsx
+const SHADCN_BADGE_VARIANT = {
+	default: ["normal", "primary"],
+	secondary: ["normal", "neutral"],
+	destructive: ["normal", "destructive"],
+	outline: ["outline", "neutral"],
+	ghost: ["ghost", "neutral"],
+	link: ["link", "primary"]
+};
+const BADGE_VARIANT_DEFAULT_COLOR = {
+	normal: "primary",
+	outline: "neutral",
+	ghost: "neutral",
+	link: "primary"
+};
+function badgeVariants({ variant = "default", color, size = "md", className } = {}) {
+	const badgeVariant = variant ?? "default";
+	const mapped = badgeVariant === "normal" || badgeVariant === "outline" || badgeVariant === "ghost" || badgeVariant === "link" ? [badgeVariant, color ?? BADGE_VARIANT_DEFAULT_COLOR[badgeVariant]] : SHADCN_BADGE_VARIANT[badgeVariant];
+	return [
+		"badge",
+		`badge--${mapped[0]}`,
+		`badge--${color ?? mapped[1]}`,
+		size !== "md" && `badge--${size}`,
+		className
+	].filter(Boolean).join(" ");
+}
+function assignRef(ref, value) {
+	if (!ref) return;
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	ref.current = value;
+}
+function mergeRefs(...refs) {
+	const activeRefs = refs.filter(Boolean);
+	if (activeRefs.length === 0) return;
+	return (value) => {
+		for (const activeRef of activeRefs) assignRef(activeRef, value);
+	};
+}
+function isEventHandler(propName, value) {
+	return /^on[A-Z]/.test(propName) && typeof value === "function";
+}
+function mergeSlottedBadgeProps(childProps, badgeProps) {
+	const mergedProps = {
+		...childProps,
+		...badgeProps
+	};
+	const badgePropsRecord = badgeProps;
+	for (const propName of Object.keys(childProps)) {
+		const childValue = childProps[propName];
+		const badgeValue = badgePropsRecord[propName];
+		if (isEventHandler(propName, childValue) && isEventHandler(propName, badgeValue)) mergedProps[propName] = (...args) => {
+			childValue(...args);
+			badgeValue(...args);
+		};
+	}
+	mergedProps.className = [childProps.className, badgeProps.className].filter(Boolean).join(" ");
+	mergedProps.style = childProps.style || badgeProps.style ? {
+		...childProps.style,
+		...badgeProps.style
+	} : void 0;
+	mergedProps.ref = mergeRefs(childProps.ref, badgeProps.ref);
+	mergedProps["data-slot"] = "badge";
+	mergedProps["data-variant"] = badgeProps["data-variant"];
+	return mergedProps;
+}
+/**
+* A badge component for highlighting status, labels, or categories.
+*
+* @example
+* ```tsx
+* <Badge>Default</Badge>
+* <Badge color="success">Active</Badge>
+* <Badge color="warning">Pending</Badge>
+* <Badge variant="outline">Info</Badge>
+* <Badge asChild><a href="/docs">Docs</a></Badge>
+* ```
+*/
+function Badge({ variant = "default", color, size = "md", className, asChild = false, children, ref, ...props }) {
+	const badgeVariant = variant ?? "default";
+	const classes = badgeVariants({
+		variant,
+		color,
+		size,
+		className
+	});
+	if (asChild && React.isValidElement(children)) return React.cloneElement(children, mergeSlottedBadgeProps(children.props, {
+		...props,
+		ref,
+		className: classes,
+		"data-slot": "badge",
+		"data-variant": badgeVariant
+	}));
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "badge",
+		"data-variant": badgeVariant,
+		className: classes,
+		...props,
+		children
+	});
+}
+//#endregion
+export { Badge, badgeVariants };

package/dist/components/Button.d.ts

@@ -0,0 +1,2 @@
+import { a as ButtonVariant, c as ShadcnButtonVariant, i as ButtonSize, l as buttonVariants, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as ShadcnButtonSize, t as Button } from "../Button-QCM8ZKgR.js";
+export { Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, ShadcnButtonSize, ShadcnButtonVariant, buttonVariants };

package/dist/components/Button.js

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { Button as Button$1 } from "@base-ui/react/button";
+//#region src/components/Button.tsx
+const SHADCN_BUTTON_VARIANT = {
+	default: ["normal", "primary"],
+	destructive: ["normal", "destructive"],
+	outline: ["outline", "neutral"],
+	secondary: ["normal", "neutral"],
+	ghost: ["ghost", "neutral"],
+	link: ["link", "primary"]
+};
+const SHADCN_BUTTON_SIZE = {
+	default: "md",
+	xs: "xs",
+	sm: "sm",
+	lg: "lg",
+	icon: "icon",
+	"icon-xs": "icon-xs",
+	"icon-sm": "icon-sm",
+	"icon-lg": "icon-lg"
+};
+function buttonVariants({ variant = "default", color, size = "default", className } = {}) {
+	const buttonVariant = variant ?? "default";
+	const mapped = buttonVariant === "normal" || buttonVariant === "outline" || buttonVariant === "ghost" || buttonVariant === "link" ? [buttonVariant, color ?? "primary"] : SHADCN_BUTTON_VARIANT[buttonVariant];
+	const requestedSize = size ?? "default";
+	const buttonSize = requestedSize === "default" ? "md" : SHADCN_BUTTON_SIZE[requestedSize] ?? requestedSize;
+	return [
+		"button",
+		`button--${mapped[0]}`,
+		`button--${color ?? mapped[1]}`,
+		`button--${buttonSize}`,
+		className
+	].filter(Boolean).join(" ");
+}
+/**
+* A button component built on Base UI with semantic styling variants.
+*
+* Separates visual style (`variant`) from color intent (`color`) for
+* maximum flexibility. Supports keyboard navigation, focus management, and
+* accessibility out of the box. Keeps shadcn-compatible variant and size
+* aliases for migration, while styling through Sigvelo CSS tokens.
+*
+* @example
+* ```tsx
+* <Button color="primary">Save changes</Button>
+* <Button color="destructive">Delete account</Button>
+* <Button variant="outline">Cancel</Button>
+* <Button variant="ghost" size="icon"><SearchIcon /></Button>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/button | Base UI Button}
+* @see {@link https://ui.shadcn.com/docs/components/base/button | shadcn/ui Button}
+*/
+function Button({ variant = "default", color, size = "default", className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Button$1, {
+		ref,
+		"data-slot": "button",
+		className: typeof className === "function" ? (state) => buttonVariants({
+			variant,
+			color,
+			size,
+			className: className(state)
+		}) : buttonVariants({
+			variant,
+			color,
+			size,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+export { Button, buttonVariants };

package/dist/components/Card.d.ts

@@ -0,0 +1,87 @@
+import * as React from "react";
+
+//#region src/components/Card.d.ts
+/**
+ * Props for the Card component.
+ */
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Enable hover animation effects.
+   * @default false
+   */
+  hover?: boolean;
+}
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CardTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CardDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * A container component that provides consistent styling and elevation.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <h3>Title</h3>
+ *   <p>Content</p>
+ * </Card>
+ *
+ * <Card hover onClick={() => navigate('/details')}>
+ *   Clickable card
+ * </Card>
+ * ```
+ */
+declare function Card({
+  hover,
+  className,
+  children,
+  ref,
+  ...props
+}: CardProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CardHeader({
+  className,
+  ref,
+  ...props
+}: CardHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CardTitle({
+  className,
+  ref,
+  ...props
+}: CardTitleProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CardDescription({
+  className,
+  ref,
+  ...props
+}: CardDescriptionProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CardAction({
+  className,
+  ref,
+  ...props
+}: CardActionProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CardContent({
+  className,
+  ref,
+  ...props
+}: CardContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CardFooter({
+  className,
+  ref,
+  ...props
+}: CardFooterProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { Card, CardAction, CardActionProps, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps };

package/dist/components/Card.js

@@ -0,0 +1,81 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card.tsx
+/**
+* A container component that provides consistent styling and elevation.
+*
+* @example
+* ```tsx
+* <Card>
+*   <h3>Title</h3>
+*   <p>Content</p>
+* </Card>
+*
+* <Card hover onClick={() => navigate('/details')}>
+*   Clickable card
+* </Card>
+* ```
+*/
+function Card({ hover = false, className = "", children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "card",
+		className: [
+			"card",
+			hover && "card--hover",
+			className
+		].filter(Boolean).join(" "),
+		...props,
+		children
+	});
+}
+function CardHeader({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "card-header",
+		className: ["card__header", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function CardTitle({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "card-title",
+		className: ["card__title", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function CardDescription({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "card-description",
+		className: ["card__description", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function CardAction({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "card-action",
+		className: ["card__action", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function CardContent({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "card-content",
+		className: ["card__content", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function CardFooter({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "card-footer",
+		className: ["card__footer", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/ChainOfThought.d.ts

@@ -0,0 +1,153 @@
+import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import * as React from "react";
+
+//#region src/components/_internal/icons.d.ts
+/**
+ * Small inline-SVG icon set used across AI chat and code components.
+ *
+ * All icons are 16x16 by default, use `currentColor` for strokes/fills, and
+ * accept standard SVG props so consumers can override size and aria-hidden.
+ */
+type IconProps = Omit<React.SVGAttributes<SVGSVGElement>, "width" | "height"> & {
+  size?: number | string;
+};
+//#endregion
+//#region src/components/ChainOfThought.d.ts
+interface ChainOfThoughtProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * A collapsible display of an AI's step-by-step reasoning trace. Compose
+ * ChainOfThoughtHeader with ChainOfThoughtContent, then nest
+ * ChainOfThoughtStep (and optional ChainOfThoughtSearchResults /
+ * ChainOfThoughtImage) inside the content.
+ *
+ * @example
+ * ```tsx
+ * <ChainOfThought defaultOpen>
+ *   <ChainOfThoughtHeader>Thinking</ChainOfThoughtHeader>
+ *   <ChainOfThoughtContent>
+ *     <ChainOfThoughtStep
+ *       status="complete"
+ *       label="Search docs"
+ *       description="Found 3 relevant pages"
+ *     >
+ *       <ChainOfThoughtSearchResults>
+ *         <ChainOfThoughtSearchResult title="Guide" href="…" />
+ *       </ChainOfThoughtSearchResults>
+ *     </ChainOfThoughtStep>
+ *     <ChainOfThoughtStep status="active" label="Drafting answer" />
+ *   </ChainOfThoughtContent>
+ * </ChainOfThought>
+ * ```
+ */
+declare function ChainOfThought({
+  className,
+  ref,
+  ...props
+}: ChainOfThoughtProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ChainOfThoughtHeaderProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * Clickable header row that toggles the reasoning trace.
+ */
+declare function ChainOfThoughtHeader({
+  className,
+  children,
+  ref,
+  ...props
+}: ChainOfThoughtHeaderProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface ChainOfThoughtContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * Collapsible panel containing step rows.
+ */
+declare function ChainOfThoughtContent({
+  className,
+  children,
+  ref,
+  ...props
+}: ChainOfThoughtContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type ChainOfThoughtStepStatus = "pending" | "active" | "complete";
+interface ChainOfThoughtStepProps extends React.HTMLAttributes<HTMLLIElement> {
+  /** Optional icon component rendered instead of the default status icon. */
+  icon?: React.ComponentType<IconProps>;
+  /** Visual status of this step. */
+  status?: ChainOfThoughtStepStatus;
+  /** Primary label text for the step. */
+  label: React.ReactNode;
+  /** Optional secondary description rendered beneath the label. */
+  description?: React.ReactNode;
+}
+/**
+ * A single step in the reasoning trace. Shows a status indicator, label,
+ * optional description, and any children (e.g. search results).
+ */
+declare function ChainOfThoughtStep({
+  className,
+  icon: Icon,
+  status,
+  label,
+  description,
+  children,
+  ref,
+  ...props
+}: ChainOfThoughtStepProps & {
+  ref?: React.Ref<HTMLLIElement>;
+}): React.JSX.Element;
+interface ChainOfThoughtSearchResultsProps extends React.HTMLAttributes<HTMLUListElement> {}
+/**
+ * Container for a set of search-result chips displayed inside a step.
+ */
+declare function ChainOfThoughtSearchResults({
+  className,
+  children,
+  ref,
+  ...props
+}: ChainOfThoughtSearchResultsProps & {
+  ref?: React.Ref<HTMLUListElement>;
+}): React.JSX.Element;
+interface ChainOfThoughtSearchResultProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "title"> {
+  title?: React.ReactNode;
+}
+/**
+ * A single search-result chip link.
+ */
+declare function ChainOfThoughtSearchResult({
+  className,
+  children,
+  title,
+  href,
+  ref,
+  ...props
+}: ChainOfThoughtSearchResultProps & {
+  ref?: React.Ref<HTMLAnchorElement>;
+}): React.JSX.Element;
+interface ChainOfThoughtImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  /** Optional caption rendered beneath the image. */
+  caption?: string;
+}
+/**
+ * An image thumbnail with optional caption, displayed inside a step's
+ * children area.
+ */
+declare function ChainOfThoughtImage({
+  className,
+  children,
+  caption,
+  alt,
+  ref,
+  ...props
+}: ChainOfThoughtImageProps & {
+  ref?: React.Ref<HTMLImageElement>;
+}): React.JSX.Element;
+//#endregion
+export { ChainOfThought, ChainOfThoughtContent, ChainOfThoughtContentProps, ChainOfThoughtHeader, ChainOfThoughtHeaderProps, ChainOfThoughtImage, ChainOfThoughtImageProps, ChainOfThoughtProps, ChainOfThoughtSearchResult, ChainOfThoughtSearchResultProps, ChainOfThoughtSearchResults, ChainOfThoughtSearchResultsProps, ChainOfThoughtStep, ChainOfThoughtStepProps, ChainOfThoughtStepStatus };

package/dist/components/ChainOfThought.js

@@ -0,0 +1,157 @@
+import { C as SpinnerIcon, c as ChevronRightIcon, o as CheckIcon, u as DotIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ChainOfThought.tsx
+/**
+* A collapsible display of an AI's step-by-step reasoning trace. Compose
+* ChainOfThoughtHeader with ChainOfThoughtContent, then nest
+* ChainOfThoughtStep (and optional ChainOfThoughtSearchResults /
+* ChainOfThoughtImage) inside the content.
+*
+* @example
+* ```tsx
+* <ChainOfThought defaultOpen>
+*   <ChainOfThoughtHeader>Thinking</ChainOfThoughtHeader>
+*   <ChainOfThoughtContent>
+*     <ChainOfThoughtStep
+*       status="complete"
+*       label="Search docs"
+*       description="Found 3 relevant pages"
+*     >
+*       <ChainOfThoughtSearchResults>
+*         <ChainOfThoughtSearchResult title="Guide" href="…" />
+*       </ChainOfThoughtSearchResults>
+*     </ChainOfThoughtStep>
+*     <ChainOfThoughtStep status="active" label="Drafting answer" />
+*   </ChainOfThoughtContent>
+* </ChainOfThought>
+* ```
+*/
+function ChainOfThought({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+		ref,
+		className: cx("chain-of-thought", className),
+		...props,
+		unstyled: true
+	});
+}
+/**
+* Clickable header row that toggles the reasoning trace.
+*/
+function ChainOfThoughtHeader({ className, children = "Chain of Thought", ref, ...props }) {
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		ref,
+		className: cx("chain-of-thought__header", className),
+		...props,
+		unstyled: true,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "chain-of-thought__header-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "chain-of-thought__header-label",
+			children
+		})]
+	});
+}
+/**
+* Collapsible panel containing step rows.
+*/
+function ChainOfThoughtContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+		ref,
+		className: cx("chain-of-thought__content", className),
+		...props,
+		unstyled: true,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "chain-of-thought__steps",
+			children
+		})
+	});
+}
+/**
+* A single step in the reasoning trace. Shows a status indicator, label,
+* optional description, and any children (e.g. search results).
+*/
+function ChainOfThoughtStep({ className, icon: Icon, status = "complete", label, description, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("li", {
+		ref,
+		className: cx("chain-of-thought__step", `chain-of-thought__step--${status}`, className),
+		"data-status": status,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "chain-of-thought__step-indicator",
+			"aria-hidden": "true",
+			children: Icon ? /* @__PURE__ */ jsx(Icon, {}) : status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : status === "active" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(DotIcon, {})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "chain-of-thought__step-body",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "chain-of-thought__step-label",
+					children: label
+				}),
+				description ? /* @__PURE__ */ jsx("div", {
+					className: "chain-of-thought__step-description",
+					children: description
+				}) : null,
+				children ? /* @__PURE__ */ jsx("div", {
+					className: "chain-of-thought__step-children",
+					children
+				}) : null
+			]
+		})]
+	});
+}
+/**
+* Container for a set of search-result chips displayed inside a step.
+*/
+function ChainOfThoughtSearchResults({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		className: cx("chain-of-thought__search-results", className),
+		...props,
+		children
+	});
+}
+/**
+* A single search-result chip link.
+*/
+function ChainOfThoughtSearchResult({ className, children, title, href, ref, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		className: "chain-of-thought__search-result-item",
+		children: /* @__PURE__ */ jsx("a", {
+			ref,
+			href,
+			className: cx("chain-of-thought__search-result", className),
+			target: "_blank",
+			rel: "noreferrer",
+			...props,
+			children: children ?? title
+		})
+	});
+}
+/**
+* An image thumbnail with optional caption, displayed inside a step's
+* children area.
+*/
+function ChainOfThoughtImage({ className, children, caption, alt = "", ref, ...props }) {
+	return /* @__PURE__ */ jsxs("figure", {
+		className: cx("chain-of-thought__image", className),
+		children: [children ? /* @__PURE__ */ jsx("div", {
+			className: "chain-of-thought__image-frame",
+			children
+		}) : /* @__PURE__ */ jsx("img", {
+			ref,
+			alt,
+			className: "chain-of-thought__image-img",
+			...props
+		}), caption ? /* @__PURE__ */ jsx("figcaption", {
+			className: "chain-of-thought__image-caption",
+			children: caption
+		}) : null]
+	});
+}
+//#endregion
+export { ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep };

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { CheckboxRootProps } from "@base-ui/react/checkbox";
+
+//#region src/components/Checkbox.d.ts
+/**
+ * Props for the Checkbox component.
+ */
+interface CheckboxProps extends Omit<CheckboxRootProps, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * An accessible checkbox component with custom styling.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox defaultChecked onChange={(checked) => console.log(checked)} />
+ *
+ * <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+ *   <Checkbox id="terms" checked={agreed} onChange={setAgreed} />
+ *   <Label htmlFor="terms">I agree to the terms</Label>
+ * </div>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/checkbox | Base UI Checkbox}
+ */
+declare function Checkbox({
+  className,
+  ref,
+  ...props
+}: CheckboxProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+//#endregion
+export { Checkbox, CheckboxProps };