@mcp-b/react-components 0.47.0 → 0.49.0

package/dist/components/foundations/Card.js

@@ -1,10 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/foundations/Card.tsx
 /**
 * A container component that provides consistent styling and elevation.
+* Every part accepts Base UI's `render` prop, so semantic elements and existing
+* behavior owners share the same node, props, and refs without an extra wrapper.
 *
 * @example
 * ```tsx
@@ -13,27 +13,34 @@ import { useRender } from "@base-ui/react/use-render";
 *   <p>Content</p>
 * </Card>
 *
-* <a href="/details">
-*   <Card hover>View details</Card>
-* </a>
+* <Card hover render={<a href="/details" />}>View details</Card>
 * ```
+*
+* @see {@link https://base-ui.com/react/handbook/composition | Base UI composition}
 */
-function Card({ hover = false, size = "default", className = "", children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function Card({ hover = false, size = "default", className = "", render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		"data-slot": "card",
-		"data-size": size,
-		className: cx("card", hover && "card--hover", className),
-		...props,
-		children
+		props: {
+			"data-slot": "card",
+			"data-size": size,
+			...props,
+			className: cx("card", hover && "card--hover", className)
+		}
 	});
 }
-function CardHeader({ className = "", ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function CardHeader({ className, render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		"data-slot": "card-header",
-		className: cx("card__header", className),
-		...props
+		props: {
+			"data-slot": "card-header",
+			...props,
+			className: cx("card__header", className)
+		}
 	});
 }
 function CardTitle({ className = "", render, ref, ...props }) {
@@ -60,28 +67,40 @@ function CardDescription({ className = "", render, ref, ...props }) {
 		}
 	});
 }
-function CardAction({ className = "", ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function CardAction({ className, render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		"data-slot": "card-action",
-		className: cx("card__action", className),
-		...props
+		props: {
+			"data-slot": "card-action",
+			...props,
+			className: cx("card__action", className)
+		}
 	});
 }
-function CardContent({ className = "", ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function CardContent({ className, render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		"data-slot": "card-content",
-		className: cx("card__content", className),
-		...props
+		props: {
+			"data-slot": "card-content",
+			...props,
+			className: cx("card__content", className)
+		}
 	});
 }
-function CardFooter({ className = "", ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+function CardFooter({ className, render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		"data-slot": "card-footer",
-		className: cx("card__footer", className),
-		...props
+		props: {
+			"data-slot": "card-footer",
+			...props,
+			className: cx("card__footer", className)
+		}
 	});
 }
 //#endregion

package/dist/components/foundations/CheckboxGroup.d.ts

@@ -73,7 +73,7 @@ declare function CheckboxGroupRoot({
   ref,
   ...props
 }: CheckboxGroupProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function CheckboxGroupItem({
   className,

package/dist/components/foundations/Collapsible.d.ts

@@ -42,7 +42,7 @@ declare function CollapsibleRoot({
   ref,
   ...props
 }: CollapsibleRootProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 /**
  * Button that toggles the panel visibility. Renders a `<button>` element.

package/dist/components/foundations/Combobox.js

@@ -3,6 +3,11 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/components/foundations/Combobox.tsx
+/**
+* Direct Base UI generic state root; its composed anatomy is documented in the Storybook entry.
+* @oversightIgnore prop-descriptions-missing
+*/
+const ComboboxRoot = Combobox$1.Root;
 function ComboboxInputGroup({ className, ref, ...props }) {
 	const classes = mergeBaseClassName("combobox__input-group", className);
 	return /* @__PURE__ */ jsx(Combobox$1.InputGroup, {
@@ -145,7 +150,7 @@ function ComboboxGroupLabel({ className, ref, ...props }) {
 * @see {@link https://base-ui.com/react/components/combobox | Base UI Combobox}
 */
 const Combobox = {
-	Root: Combobox$1.Root,
+	Root: ComboboxRoot,
 	InputGroup: ComboboxInputGroup,
 	Input: ComboboxInput,
 	Trigger: ComboboxTrigger,

package/dist/components/foundations/Dialog.d.ts

@@ -1,2 +1,107 @@
-import { a as DialogFooterProps, c as DialogPortalProps, d as DialogTriggerProps, f as DialogViewportProps, i as DialogDescriptionProps, l as DialogProps, n as DialogBackdropProps, o as DialogHeaderProps, r as DialogCloseProps, s as DialogPopupProps, t as Dialog, u as DialogTitleProps } from "../../Dialog-B_FhRWaz.js";
+import * as React from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+
+//#region src/components/foundations/Dialog.d.ts
+type DialogProps<Payload = unknown> = Dialog$1.Root.Props<Payload>;
+type DialogTriggerProps<Payload = unknown> = Dialog$1.Trigger.Props<Payload> & React.RefAttributes<HTMLElement>;
+interface DialogPortalProps extends React.ComponentPropsWithRef<typeof Dialog$1.Portal> {}
+interface DialogBackdropProps extends React.ComponentPropsWithRef<typeof Dialog$1.Backdrop> {}
+interface DialogViewportProps extends React.ComponentPropsWithRef<typeof Dialog$1.Viewport> {}
+interface DialogPopupProps extends React.ComponentPropsWithRef<typeof Dialog$1.Popup> {
+  /**
+   * The size of the dialog.
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg" | "fullscreen";
+}
+interface DialogTitleProps extends React.ComponentPropsWithRef<typeof Dialog$1.Title> {}
+interface DialogDescriptionProps extends React.ComponentPropsWithRef<typeof Dialog$1.Description> {}
+interface DialogCloseProps extends React.ComponentPropsWithRef<typeof Dialog$1.Close> {}
+interface DialogHeaderProps extends React.ComponentPropsWithRef<"div"> {}
+interface DialogFooterProps extends React.ComponentPropsWithRef<"div"> {}
+/**
+ * A dialog component for modal interactions.
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+ *   <Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
+ *   <Dialog.Portal>
+ *     <Dialog.Backdrop />
+ *     <Dialog.Viewport>
+ *       <Dialog.Popup>
+ *         <Dialog.Title>Confirm</Dialog.Title>
+ *         <Dialog.Description>Are you sure?</Dialog.Description>
+ *         <Dialog.Close>Cancel</Dialog.Close>
+ *       </Dialog.Popup>
+ *     </Dialog.Viewport>
+ *   </Dialog.Portal>
+ * </Dialog.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
+ */
+declare function DialogTrigger<Payload>({
+  render,
+  className,
+  ref,
+  ...props
+}: DialogTriggerProps<Payload>): React.JSX.Element;
+declare function DialogBackdrop({
+  className,
+  ref,
+  ...props
+}: DialogBackdropProps): React.JSX.Element;
+declare function DialogViewport({
+  className,
+  ref,
+  ...props
+}: DialogViewportProps): React.JSX.Element;
+declare function DialogPopup({
+  size,
+  className,
+  ref,
+  ...props
+}: DialogPopupProps): React.JSX.Element;
+declare function DialogHeader({
+  className,
+  ref,
+  ...props
+}: DialogHeaderProps): React.JSX.Element;
+declare function DialogFooter({
+  className,
+  ref,
+  ...props
+}: DialogFooterProps): React.JSX.Element;
+declare function DialogTitle({
+  className,
+  ref,
+  ...props
+}: DialogTitleProps): React.JSX.Element;
+declare function DialogDescription({
+  className,
+  ref,
+  ...props
+}: DialogDescriptionProps): React.JSX.Element;
+declare function DialogClose({
+  render,
+  className,
+  ref,
+  ...props
+}: DialogCloseProps): React.JSX.Element;
+declare const Dialog: {
+  Root: typeof Dialog$1.Root;
+  Trigger: typeof DialogTrigger;
+  Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Backdrop: typeof DialogBackdrop;
+  Viewport: typeof DialogViewport;
+  Popup: typeof DialogPopup;
+  Header: typeof DialogHeader;
+  Footer: typeof DialogFooter;
+  Title: typeof DialogTitle;
+  Description: typeof DialogDescription;
+  Close: typeof DialogClose;
+  createHandle: typeof Dialog$1.createHandle;
+};
+//#endregion
 export { Dialog, DialogBackdropProps, DialogCloseProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogPopupProps, DialogPortalProps, DialogProps, DialogTitleProps, DialogTriggerProps, DialogViewportProps };

package/dist/components/foundations/EmptyState.d.ts

@@ -53,7 +53,7 @@ declare function EmptyState({
   ref,
   ...props
 }: EmptyStateProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
 export { EmptyState, EmptyStateProps };

package/dist/components/foundations/Field.d.ts

@@ -6,6 +6,7 @@ import { Field as Field$1 } from "@base-ui/react/field";
  * Props for the Field.Root component.
  */
 interface FieldRootProps extends React.ComponentPropsWithoutRef<typeof Field$1.Root> {
+  /** Places label and control vertically, horizontally, or responsively by container width. */
   orientation?: "vertical" | "horizontal" | "responsive";
 }
 /**
@@ -62,7 +63,7 @@ declare function FieldRoot({
   ref,
   ...props
 }: FieldRootProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 /**
  * Accessible label that is automatically associated with the field control.

package/dist/components/foundations/Fieldset.d.ts

@@ -37,7 +37,7 @@ declare function FieldsetRoot({
   variant,
   ...props
 }: FieldsetRootProps & {
-  ref?: React.Ref<HTMLFieldSetElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLFieldSetElement>;
 }): React.JSX.Element;
 /**
  * Accessible label for the fieldset, automatically associated with it.

package/dist/components/foundations/Form.d.ts

@@ -5,7 +5,7 @@ import { Form as Form$1 } from "@base-ui/react/form";
 /**
  * Props for the Form component.
  */
-interface FormProps extends React.ComponentPropsWithoutRef<typeof Form$1> {}
+interface FormProps<Values extends Record<string, unknown> = Record<string, unknown>> extends React.ComponentPropsWithoutRef<typeof Form$1<Values>> {}
 /**
  * A form component that provides consolidated error handling and validation
  * for form controls. Works seamlessly with the Field component.
@@ -80,12 +80,12 @@ interface FormProps extends React.ComponentPropsWithoutRef<typeof Form$1> {}
  *
  * @see {@link https://base-ui.com/react/components/form | Base UI Form}
  */
-declare function Form({
+declare function Form<Values extends Record<string, unknown> = Record<string, unknown>>({
   className,
   ref,
   ...props
-}: FormProps & {
-  ref?: React.Ref<HTMLFormElement>;
+}: FormProps<Values> & {
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLFormElement>;
 }): React.JSX.Element;
 //#endregion
 export { Form, FormProps };

package/dist/components/foundations/IconButton.d.ts

@@ -1,2 +1,2 @@
-import { n as IconButtonProps, t as IconButton } from "../../IconButton-BAUFhUk8.js";
+import { n as IconButtonProps, t as IconButton } from "../../IconButton-ByiyjkYE.js";
 export { IconButton, IconButtonProps };

package/dist/components/foundations/Label.d.ts

@@ -38,7 +38,7 @@ declare function Label({
   ref,
   ...props
 }: LabelProps & {
-  ref?: React.Ref<HTMLLabelElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLLabelElement>;
 }): React.JSX.Element;
 //#endregion
 export { Label, LabelProps };

package/dist/components/foundations/LinkButton.d.ts

@@ -1,4 +1,4 @@
-import { a as ButtonVariant, i as ButtonSize, n as ButtonColor } from "../../Button-CZt3yywF.js";
+import { a as ButtonVariant, i as ButtonSize, n as ButtonColor } from "../../Button-DjONW5UW.js";
 import { AnchorHTMLAttributes, ReactElement } from "react";
 
 //#region src/components/foundations/LinkButton.d.ts
@@ -42,7 +42,7 @@ declare function LinkButton({
   ref,
   ...props
 }: LinkButtonProps & {
-  ref?: React.Ref<HTMLAnchorElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLAnchorElement>;
 }): import("react").JSX.Element;
 //#endregion
 export { LinkButton, LinkButtonProps };

package/dist/components/foundations/Meter.d.ts

@@ -43,7 +43,7 @@ declare function MeterRoot({
   ref,
   ...props
 }: MeterRootProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 /**
  * The track that contains the indicator. Represents the full range.

package/dist/components/foundations/NumberField.d.ts

@@ -47,7 +47,7 @@ declare function NumberFieldRoot({
   ref,
   ...props
 }: NumberFieldRootProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 /**
  * Groups the input with increment and decrement buttons.

package/dist/components/foundations/ScrollArea.d.ts

@@ -48,7 +48,7 @@ declare function ScrollAreaRoot({
   ref,
   ...props
 }: ScrollAreaRootProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 /**
  * The scrollable viewport container.

package/dist/components/foundations/SearchField.d.ts

@@ -15,7 +15,7 @@ declare function SearchFieldRoot({
   ref,
   ...props
 }: SearchFieldRootProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 /** Label associated with the search control through the underlying Field. */
 declare function SearchFieldLabel({

package/dist/components/foundations/Select.js

@@ -5,6 +5,11 @@ import { jsx } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/components/foundations/Select.tsx
 /**
+* Direct Base UI generic state root; its composed anatomy is documented in the Storybook entry.
+* @oversightIgnore prop-descriptions-missing
+*/
+const SelectRoot = Select$1.Root;
+/**
 * A select component for choosing from a list of options.
 *
 * @example
@@ -174,7 +179,7 @@ function SelectScrollDownArrow({ className, children, ref, ...props }) {
 	});
 }
 const Select = {
-	Root: Select$1.Root,
+	Root: SelectRoot,
 	Label: SelectLabel,
 	Trigger: SelectTrigger,
 	Value: SelectValue,

package/dist/components/foundations/Separator.d.ts

@@ -1,41 +1,2 @@
-import * as React from "react";
-import { Separator as Separator$1 } from "@base-ui/react/separator";
-
-//#region src/components/foundations/Separator.d.ts
-/**
- * Props for the Separator component.
- */
-interface SeparatorProps extends React.ComponentPropsWithRef<typeof Separator$1> {
-  /**
-   * Whether the separator is purely visual.
-   * @default true
-   */
-  decorative?: boolean;
-}
-/**
- * A visual divider component that separates content sections.
- *
- * @example
- * ```tsx
- * <Separator />
- *
- * <nav style={{ display: 'flex', alignItems: 'center' }}>
- *   <a href="/home">Home</a>
- *   <Separator orientation="vertical" />
- *   <a href="/about">About</a>
- * </nav>
- * ```
- *
- * @see {@link https://base-ui.com/react/components/separator | Base UI Separator}
- */
-declare function Separator({
-  orientation,
-  decorative,
-  className,
-  ref,
-  ...props
-}: SeparatorProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
+import { n as SeparatorProps, t as Separator } from "../../Separator-CzhtLYE1.js";
 export { Separator, SeparatorProps };

package/dist/components/foundations/Stepper.d.ts

@@ -79,7 +79,7 @@ declare function Stepper({
   ref,
   ...props
 }: StepperProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface StepperNavProps extends Omit<React.ComponentPropsWithoutRef<typeof Tabs.List>, "unstyled"> {}
 declare function StepperNav({

package/dist/components/foundations/Textarea.d.ts

@@ -15,7 +15,7 @@ declare function Textarea({
   resize,
   ...props
 }: TextareaProps & {
-  ref?: React.Ref<HTMLTextAreaElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLTextAreaElement>;
 }): React.JSX.Element;
 //#endregion
 export { Textarea, TextareaProps };

package/dist/components/foundations/Toast.d.ts

@@ -5,7 +5,11 @@ import { Toast as Toast$1 } from "@base-ui/react/toast";
 /**
  * Props for the Toast.Provider component.
  */
-interface ToastProviderProps extends React.ComponentPropsWithoutRef<typeof Toast$1.Provider> {}
+type BaseToastProviderProps = React.ComponentPropsWithoutRef<typeof Toast$1.Provider>;
+interface ToastProviderProps extends Omit<BaseToastProviderProps, "children"> {
+  /** Application subtree whose toast state is managed by this provider. */
+  children?: BaseToastProviderProps["children"];
+}
 /**
  * Props for the Toast.Viewport component.
  */

package/dist/components/foundations/Toggle.d.ts

@@ -1,2 +1,71 @@
-import { i as toggleVariants, n as ToggleProps, r as ToggleVariantsOptions, t as Toggle } from "../../Toggle-DLrIf5YH.js";
+import * as React from "react";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+
+//#region src/components/foundations/Toggle.d.ts
+interface ToggleVariantsOptions {
+  /** Visual treatment; `outline` adds a bordered control surface. */
+  variant?: "default" | "outline" | null;
+  /** Control height and inline spacing. */
+  size?: "sm" | "md" | "lg" | null;
+  className?: string;
+}
+/**
+ * Props for the Toggle component.
+ */
+interface ToggleProps extends React.ComponentPropsWithoutRef<typeof Toggle$1>, Omit<ToggleVariantsOptions, "className"> {}
+declare function toggleVariants({
+  variant,
+  size,
+  className
+}?: ToggleVariantsOptions): string;
+/**
+ * A two-state button that can be on (pressed) or off.
+ * Useful for toggling a setting or mode.
+ *
+ * @example
+ * ```tsx
+ * // Basic toggle
+ * <Toggle>
+ *   Bold
+ * </Toggle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled toggle
+ * const [pressed, setPressed] = useState(false);
+ *
+ * <Toggle pressed={pressed} onPressedChange={setPressed}>
+ *   {pressed ? 'On' : 'Off'}
+ * </Toggle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With icons
+ * <Toggle>
+ *   {({ pressed }) => pressed ? <BoldIcon filled /> : <BoldIcon />}
+ * </Toggle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Default pressed state
+ * <Toggle defaultPressed>
+ *   Enabled
+ * </Toggle>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toggle | Base UI Toggle}
+ */
+declare function Toggle({
+  className,
+  variant,
+  size,
+  ref,
+  ...props
+}: ToggleProps & {
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+//#endregion
 export { Toggle, ToggleProps, ToggleVariantsOptions, toggleVariants };

package/dist/components/foundations/ToggleGroup.d.ts

@@ -1,4 +1,4 @@
-import { r as ToggleVariantsOptions } from "../../Toggle-DLrIf5YH.js";
+import { ToggleVariantsOptions } from "./Toggle.js";
 import * as React from "react";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { Toggle } from "@base-ui/react/toggle";
@@ -6,12 +6,13 @@ import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/foundations/ToggleGroup.d.ts
 type ToggleGroupSize = ToggleVariantsOptions["size"];
 type ToggleGroupProps<Value extends string = string> = ToggleGroup$1.Props<Value> & {
+  /** Axis used for roving focus and group layout. */orientation?: ToggleGroup$1.Props<Value>["orientation"]; /** Visual treatment inherited by every item in the group. */
   variant?: ToggleVariantsOptions["variant"];
   /**
    * The size of the toggle group.
    * @default 'md'
    */
-  size?: ToggleGroupSize;
+  size?: ToggleGroupSize; /** Gap between items in CSS pixels; use `0` for a connected segmented control. */
   spacing?: number;
   /**
    * Draws one shared thumb that slides between segments rather than lighting up