@mcp-b/react-components 0.34.1 → 0.36.0

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

@@ -5,15 +5,13 @@ import { Popover as Popover$1 } from "@base-ui/react/popover";
 /**
  * Props for the Popover.Root component.
  */
-interface PopoverProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Root> {}
+type PopoverProps<Payload = unknown> = Popover$1.Root.Props<Payload>;
 /**
  * Props for the Popover.Trigger component.
  */
-interface PopoverTriggerProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Trigger> {
-  /** Keep Base UI trigger behavior without the default popover trigger chrome. */
-  unstyled?: boolean;
-}
-interface PopoverAnchorProps extends React.HTMLAttributes<HTMLDivElement> {}
+type PopoverTriggerProps<Payload = unknown> = Popover$1.Trigger.Props<Payload> & React.RefAttributes<HTMLElement> & {
+  /** Keep Base UI trigger behavior without the default popover trigger chrome. */unstyled?: boolean;
+};
 /**
  * Props for the Popover.Portal component.
  */
@@ -52,25 +50,16 @@ interface PopoverDescriptionProps extends React.ComponentPropsWithoutRef<typeof
  */
 interface PopoverCloseProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Close> {}
 interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
-declare function PopoverAnchor({
-  className,
-  ref,
-  ...props
-}: PopoverAnchorProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
 /**
  * Button that toggles the popover visibility.
  * Renders a `<button>` element.
  */
-declare function PopoverTrigger({
+declare function PopoverTrigger<Payload>({
   className,
   unstyled,
   ref,
   ...props
-}: PopoverTriggerProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
+}: PopoverTriggerProps<Payload>): React.JSX.Element;
 /**
  * Optional backdrop that appears behind the popover.
  */
@@ -94,7 +83,6 @@ declare function PopoverBackdrop({
  */
 declare function PopoverPositioner({
   className,
-  anchor,
   ref,
   ...props
 }: PopoverPositionerProps & {
@@ -215,8 +203,7 @@ declare function PopoverClose({
  */
 declare const Popover: {
   createHandle: typeof Popover$1.createHandle;
-  Root: (props: PopoverProps) => React.JSX.Element;
-  Anchor: typeof PopoverAnchor;
+  Root: typeof Popover$1.Root;
   Trigger: typeof PopoverTrigger;
   Portal: (props: PopoverPortalProps) => React.JSX.Element;
   Backdrop: typeof PopoverBackdrop;
@@ -230,4 +217,4 @@ declare const Popover: {
   Close: typeof PopoverClose;
 };
 //#endregion
-export { Popover, PopoverAnchorProps, PopoverArrowProps, PopoverBackdropProps, PopoverCloseProps, PopoverDescriptionProps, PopoverHeaderProps, PopoverPopupProps, PopoverPortalProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, PopoverViewportProps };
+export { Popover, PopoverArrowProps, PopoverBackdropProps, PopoverCloseProps, PopoverDescriptionProps, PopoverHeaderProps, PopoverPopupProps, PopoverPortalProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, PopoverViewportProps };

package/dist/components/foundations/Popover.js

@@ -1,51 +1,9 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
 import { buttonVariants } from "./Button.js";
-import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
-import * as React from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/components/foundations/Popover.tsx
-const PopoverAnchorContext = React.createContext(null);
-/**
-* Controls the popover's open state and manages triggers.
-*
-* @example
-* ```tsx
-* <Popover.Root>
-*   <Popover.Trigger>Open</Popover.Trigger>
-*   <Popover.Portal>
-*     <Popover.Positioner>
-*       <Popover.Popup>
-*         <Popover.Title>Popover Title</Popover.Title>
-*         <Popover.Description>Content here</Popover.Description>
-*       </Popover.Popup>
-*     </Popover.Positioner>
-*   </Popover.Portal>
-* </Popover.Root>
-* ```
-*
-* @see {@link https://base-ui.com/react/components/popover | Base UI Popover}
-*/
-const PopoverRoot = (props) => {
-	const anchorRef = React.useRef(null);
-	return /* @__PURE__ */ jsx(PopoverAnchorContext.Provider, {
-		value: anchorRef,
-		children: /* @__PURE__ */ jsx(Popover$1.Root, {
-			"data-slot": "popover",
-			...props
-		})
-	});
-};
-function PopoverAnchor({ className, ref, ...props }) {
-	const anchorRef = React.useContext(PopoverAnchorContext);
-	const classes = mergeBaseClassName("popover__anchor", className);
-	return /* @__PURE__ */ jsx("div", {
-		ref: mergeRefs(anchorRef ?? void 0, ref),
-		"data-slot": "popover-anchor",
-		className: classes,
-		...props
-	});
-}
 /**
 * Button that toggles the popover visibility.
 * Renders a `<button>` element.
@@ -89,12 +47,10 @@ function PopoverBackdrop({ className, ref, ...props }) {
 * </Popover.Positioner>
 * ```
 */
-function PopoverPositioner({ className, anchor, ref, ...props }) {
-	const anchorRef = React.useContext(PopoverAnchorContext);
+function PopoverPositioner({ className, ref, ...props }) {
 	const classes = mergeBaseClassName("popover__positioner base-ui-positioner", className);
 	return /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		ref,
-		anchor: anchor ?? anchorRef ?? void 0,
 		className: classes,
 		...props
 	});
@@ -232,8 +188,7 @@ function PopoverClose({ render, className, ref, ...props }) {
 */
 const Popover = {
 	createHandle: Popover$1.createHandle,
-	Root: PopoverRoot,
-	Anchor: PopoverAnchor,
+	Root: Popover$1.Root,
 	Trigger: PopoverTrigger,
 	Portal: PopoverPortal,
 	Backdrop: PopoverBackdrop,

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

@@ -5,46 +5,71 @@ import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
 /**
  * Props for the PreviewCard.Root component.
  */
-interface PreviewCardProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Root> {}
+type PreviewCardProps<Payload = unknown> = PreviewCard$1.Root.Props<Payload>;
 /**
  * Props for the PreviewCard.Trigger component.
  */
-interface PreviewCardTriggerProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Trigger> {}
+type PreviewCardTriggerProps<Payload = unknown> = PreviewCard$1.Trigger.Props<Payload> & React.RefAttributes<HTMLElement>;
 /**
  * Props for the PreviewCard.Portal component.
  */
-interface PreviewCardPortalProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Portal> {}
+interface PreviewCardPortalProps extends React.ComponentPropsWithRef<typeof PreviewCard$1.Portal> {}
 /**
  * Props for the PreviewCard.Backdrop component.
  */
-interface PreviewCardBackdropProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Backdrop> {}
+interface PreviewCardBackdropProps extends React.ComponentPropsWithRef<typeof PreviewCard$1.Backdrop> {}
 /**
  * Props for the PreviewCard.Positioner component.
  */
-interface PreviewCardPositionerProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Positioner> {}
+interface PreviewCardPositionerProps extends React.ComponentPropsWithRef<typeof PreviewCard$1.Positioner> {}
 /**
  * Props for the PreviewCard.Popup component.
  */
-interface PreviewCardPopupProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Popup> {}
+interface PreviewCardPopupProps extends React.ComponentPropsWithRef<typeof PreviewCard$1.Popup> {}
 /**
  * Props for the PreviewCard.Viewport component. Use this only when one
  * preview card moves between triggers and its content changes in place.
  */
-interface PreviewCardViewportProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Viewport> {}
+interface PreviewCardViewportProps extends React.ComponentPropsWithRef<typeof PreviewCard$1.Viewport> {}
 /**
  * Props for the PreviewCard.Arrow component.
  */
-interface PreviewCardArrowProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Arrow> {}
+interface PreviewCardArrowProps extends React.ComponentPropsWithRef<typeof PreviewCard$1.Arrow> {}
+/**
+ * Root component that manages preview card state.
+ *
+ * @example
+ * ```tsx
+ * <PreviewCard.Root>
+ *   <PreviewCard.Trigger href="/profile">
+ *     View Profile
+ *   </PreviewCard.Trigger>
+ *   <PreviewCard.Portal>
+ *     <PreviewCard.Positioner>
+ *       <PreviewCard.Popup>
+ *         <img src="/avatar.jpg" alt="User avatar" />
+ *         <h3>John Doe</h3>
+ *         <p>Software Engineer</p>
+ *       </PreviewCard.Popup>
+ *     </PreviewCard.Positioner>
+ *   </PreviewCard.Portal>
+ * </PreviewCard.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/preview-card | Base UI PreviewCard}
+ */
 /**
  * Link element that triggers the preview card on hover.
  */
-declare function PreviewCardTrigger({
+declare function PreviewCardTrigger<Payload>({
   className,
   ref,
   ...props
-}: PreviewCardTriggerProps & {
-  ref?: React.Ref<HTMLAnchorElement>;
-}): React.JSX.Element;
+}: PreviewCardTriggerProps<Payload>): React.JSX.Element;
+/**
+ * Renders preview card content in a portal.
+ */
+declare function PreviewCardPortal(props: PreviewCardPortalProps): React.JSX.Element;
 /**
  * Optional backdrop behind the preview card.
  */
@@ -52,9 +77,7 @@ declare function PreviewCardBackdrop({
   className,
   ref,
   ...props
-}: PreviewCardBackdropProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: PreviewCardBackdropProps): React.JSX.Element;
 /**
  * Positions the preview card relative to the trigger.
  */
@@ -62,9 +85,7 @@ declare function PreviewCardPositioner({
   className,
   ref,
   ...props
-}: PreviewCardPositionerProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: PreviewCardPositionerProps): React.JSX.Element;
 /**
  * Container for preview card content.
  */
@@ -72,9 +93,7 @@ declare function PreviewCardPopup({
   className,
   ref,
   ...props
-}: PreviewCardPopupProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: PreviewCardPopupProps): React.JSX.Element;
 /**
  * Transition container for content that changes as a preview card moves
  * between triggers. Pair the adaptive classes from `base-ui-motion.css` with
@@ -84,9 +103,7 @@ declare function PreviewCardViewport({
   className,
   ref,
   ...props
-}: PreviewCardViewportProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: PreviewCardViewportProps): React.JSX.Element;
 /**
  * Decorative arrow pointing to the trigger.
  */
@@ -94,9 +111,7 @@ declare function PreviewCardArrow({
   className,
   ref,
   ...props
-}: PreviewCardArrowProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: PreviewCardArrowProps): React.JSX.Element;
 /**
  * A popup that appears when a link is hovered, showing a preview for sighted users.
  * Useful for showing user profiles, link previews, or additional context.
@@ -127,9 +142,9 @@ declare function PreviewCardArrow({
  */
 declare const PreviewCard: {
   createHandle: typeof PreviewCard$1.createHandle;
-  Root: (props: PreviewCardProps) => React.JSX.Element;
+  Root: <Payload>(props: PreviewCard$1.Root.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
   Trigger: typeof PreviewCardTrigger;
-  Portal: (props: PreviewCardPortalProps) => React.JSX.Element;
+  Portal: typeof PreviewCardPortal;
   Backdrop: typeof PreviewCardBackdrop;
   Positioner: typeof PreviewCardPositioner;
   Popup: typeof PreviewCardPopup;

package/dist/components/foundations/PreviewCard.js

@@ -26,9 +26,6 @@ import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
 *
 * @see {@link https://base-ui.com/react/components/preview-card | Base UI PreviewCard}
 */
-const PreviewCardRoot = (props) => {
-	return /* @__PURE__ */ jsx(PreviewCard$1.Root, { ...props });
-};
 /**
 * Link element that triggers the preview card on hover.
 */
@@ -44,12 +41,12 @@ function PreviewCardTrigger({ className, ref, ...props }) {
 /**
 * Renders preview card content in a portal.
 */
-const PreviewCardPortal = (props) => {
+function PreviewCardPortal(props) {
 	return /* @__PURE__ */ jsx(PreviewCard$1.Portal, {
 		"data-slot": "hover-card-portal",
 		...props
 	});
-};
+}
 /**
 * Optional backdrop behind the preview card.
 */
@@ -142,7 +139,7 @@ function PreviewCardArrow({ className, ref, ...props }) {
 */
 const PreviewCard = {
 	createHandle: PreviewCard$1.createHandle,
-	Root: PreviewCardRoot,
+	Root: PreviewCard$1.Root,
 	Trigger: PreviewCardTrigger,
 	Portal: PreviewCardPortal,
 	Backdrop: PreviewCardBackdrop,

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

@@ -3,13 +3,13 @@ import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 import { Radio as Radio$1 } from "@base-ui/react/radio";
 
 //#region src/components/foundations/RadioGroup.d.ts
-interface RadioGroupProps extends React.ComponentPropsWithRef<typeof RadioGroup$1> {
+type RadioGroupProps<Value = unknown> = RadioGroup$1.Props<Value> & {
   /**
    * The orientation of the radio group.
    * @default 'vertical'
    */
   orientation?: "horizontal" | "vertical";
-}
+};
 interface RadioProps extends React.ComponentPropsWithRef<typeof Radio$1.Root> {}
 interface RadioIndicatorProps extends React.ComponentPropsWithRef<typeof Radio$1.Indicator> {}
 /**
@@ -35,14 +35,12 @@ interface RadioIndicatorProps extends React.ComponentPropsWithRef<typeof Radio$1
  *
  * @see {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}
  */
-declare function RadioGroupRoot({
+declare function RadioGroupRoot<Value>({
   orientation,
   className,
   ref,
   ...props
-}: RadioGroupProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: RadioGroupProps<Value>): React.JSX.Element;
 /**
  * A single radio button within a RadioGroup.
  */

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

@@ -1,2 +1,2 @@
-import { _ as SelectSeparatorProps, a as SelectIconProps, c as SelectItemTextProps, d as SelectPopupProps, f as SelectPortalProps, g as SelectScrollUpArrowProps, h as SelectScrollDownArrowProps, i as SelectGroupProps, l as SelectLabelProps, m as SelectProps, n as SelectBackdropProps, o as SelectItemIndicatorProps, p as SelectPositionerProps, r as SelectGroupLabelProps, s as SelectItemProps, t as Select, u as SelectListProps, v as SelectTriggerProps, y as SelectValueProps } from "../../Select-D96d09ww.js";
+import { _ as SelectSeparatorProps, a as SelectIconProps, c as SelectItemTextProps, d as SelectPopupProps, f as SelectPortalProps, g as SelectScrollUpArrowProps, h as SelectScrollDownArrowProps, i as SelectGroupProps, l as SelectLabelProps, m as SelectProps, n as SelectBackdropProps, o as SelectItemIndicatorProps, p as SelectPositionerProps, r as SelectGroupLabelProps, s as SelectItemProps, t as Select, u as SelectListProps, v as SelectTriggerProps, y as SelectValueProps } from "../../Select-RrceeEIe.js";
 export { Select, SelectBackdropProps, SelectGroupLabelProps, SelectGroupProps, SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectListProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectSeparatorProps, SelectTriggerProps, SelectValueProps };

package/dist/components/foundations/Select.js

@@ -1,7 +1,7 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
 import { a as ArrowUpIcon, d as CheckIcon, n as ArrowDownIcon } from "../../icons-B1Qw05te.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/components/foundations/Select.tsx
 /**
@@ -29,12 +29,6 @@ import { Select as Select$1 } from "@base-ui/react/select";
 *
 * @see {@link https://base-ui.com/react/components/select | Base UI Select}
 */
-function SelectRoot(props) {
-	return /* @__PURE__ */ jsx(Select$1.Root, {
-		"data-slot": "select",
-		...props
-	});
-}
 function SelectLabel({ className, ref, ...props }) {
 	const classes = mergeBaseClassName("select__label", className);
 	return /* @__PURE__ */ jsx(Select$1.Label, {
@@ -54,13 +48,11 @@ function SelectTrigger({ size = "sm", className, ref, ...props }) {
 		...props
 	});
 }
-function SelectValue({ placeholder, children, ref, ...props }) {
+function SelectValue({ ref, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Value, {
 		ref,
 		"data-slot": "select-value",
-		placeholder,
-		...props,
-		children
+		...props
 	});
 }
 function SelectIcon({ className, children, ref, ...props }) {
@@ -134,18 +126,13 @@ function SelectItemIndicator({ className, children, ref, ...props }) {
 		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 }
-function SelectGroup({ label, className, children, ref, ...props }) {
+function SelectGroup({ className, ref, ...props }) {
 	const classes = mergeBaseClassName("select__option-group", className);
-	return /* @__PURE__ */ jsxs(Select$1.Group, {
+	return /* @__PURE__ */ jsx(Select$1.Group, {
 		ref,
 		"data-slot": "select-group",
 		className: classes,
-		...props,
-		children: [label && /* @__PURE__ */ jsx(Select$1.GroupLabel, {
-			"data-slot": "select-label",
-			className: "select__group-label",
-			children: label
-		}), children]
+		...props
 	});
 }
 function SelectGroupLabel({ className, ref, ...props }) {
@@ -187,7 +174,7 @@ function SelectScrollDownArrow({ className, children, ref, ...props }) {
 	});
 }
 const Select = {
-	Root: SelectRoot,
+	Root: Select$1.Root,
 	Label: SelectLabel,
 	Trigger: SelectTrigger,
 	Value: SelectValue,
@@ -196,7 +183,6 @@ const Select = {
 	Backdrop: SelectBackdrop,
 	Positioner: SelectPositioner,
 	Popup: SelectPopup,
-	Arrow: Select$1.Arrow,
 	List: SelectList,
 	Item: SelectItem,
 	ItemText: SelectItemText,

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

@@ -2,53 +2,51 @@ import * as React from "react";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
 
 //#region src/components/foundations/Slider.d.ts
-interface SliderProps extends React.ComponentPropsWithRef<typeof Slider$1.Root> {}
+type SliderRootProps<Value extends number | readonly number[] = number | readonly number[]> = Slider$1.Root.Props<Value> & React.RefAttributes<HTMLDivElement>;
 interface SliderControlProps extends React.ComponentPropsWithRef<typeof Slider$1.Control> {}
 interface SliderTrackProps extends React.ComponentPropsWithRef<typeof Slider$1.Track> {}
 interface SliderIndicatorProps extends React.ComponentPropsWithRef<typeof Slider$1.Indicator> {}
 interface SliderThumbProps extends React.ComponentPropsWithRef<typeof Slider$1.Thumb> {}
-interface SliderOutputProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Value>, "children"> {
-  children?: (value: number, values: readonly number[], formattedValues: readonly string[]) => React.ReactNode;
-}
+interface SliderValueProps extends React.ComponentPropsWithRef<typeof Slider$1.Value> {}
 interface SliderLabelProps extends React.ComponentPropsWithRef<typeof Slider$1.Label> {}
 /**
  * A slider component for selecting values from a range.
  *
  * @example
  * ```tsx
- * <Slider defaultValue={50}>
- *   <SliderControl>
- *     <SliderTrack>
- *       <SliderIndicator />
- *       <SliderThumb />
- *     </SliderTrack>
- *   </SliderControl>
- * </Slider>
+ * <Slider.Root defaultValue={50}>
+ *   <Slider.Label>Volume</Slider.Label>
+ *   <Slider.Control>
+ *     <Slider.Track>
+ *       <Slider.Indicator />
+ *       <Slider.Thumb />
+ *     </Slider.Track>
+ *   </Slider.Control>
+ * </Slider.Root>
  * ```
  *
  * @example
  * ```tsx
  * // With output value display
- * <Slider defaultValue={50}>
- *   <SliderOutput />
- *   <SliderControl>
- *     <SliderTrack>
- *       <SliderIndicator />
- *       <SliderThumb />
- *     </SliderTrack>
- *   </SliderControl>
- * </Slider>
+ * <Slider.Root defaultValue={50}>
+ *   <Slider.Label>Volume</Slider.Label>
+ *   <Slider.Value />
+ *   <Slider.Control>
+ *     <Slider.Track>
+ *       <Slider.Indicator />
+ *       <Slider.Thumb />
+ *     </Slider.Track>
+ *   </Slider.Control>
+ * </Slider.Root>
  * ```
  *
  * @see {@link https://base-ui.com/react/components/slider | Base UI Slider}
  */
-declare function SliderRoot({
+declare function SliderRoot<Value extends number | readonly number[]>({
   className,
   ref,
   ...props
-}: SliderProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: SliderRootProps<Value>): React.JSX.Element;
 /**
  * The control area for the Slider (handles interactions).
  */
@@ -56,9 +54,7 @@ declare function SliderControl({
   className,
   ref,
   ...props
-}: SliderControlProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: SliderControlProps): React.JSX.Element;
 /**
  * The track container for the Slider.
  */
@@ -66,9 +62,7 @@ declare function SliderTrack({
   className,
   ref,
   ...props
-}: SliderTrackProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: SliderTrackProps): React.JSX.Element;
 /**
  * The filled indicator showing current value position.
  */
@@ -76,9 +70,7 @@ declare function SliderIndicator({
   className,
   ref,
   ...props
-}: SliderIndicatorProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: SliderIndicatorProps): React.JSX.Element;
 /**
  * The draggable thumb for the Slider.
  */
@@ -86,21 +78,16 @@ declare function SliderThumb({
   className,
   ref,
   ...props
-}: SliderThumbProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: SliderThumbProps): 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({
+declare function SliderValue({
   className,
-  children,
   ref,
   ...props
-}: SliderOutputProps & {
-  ref?: React.Ref<HTMLOutputElement>;
-}): React.JSX.Element;
+}: SliderValueProps): React.JSX.Element;
 /** Visible label that participates in Base UI's slider naming relationship. */
 declare function SliderLabel({
   className,
@@ -110,11 +97,11 @@ declare function SliderLabel({
 declare const Slider: {
   Root: typeof SliderRoot;
   Label: typeof SliderLabel;
-  Value: typeof SliderOutput;
+  Value: typeof SliderValue;
   Control: typeof SliderControl;
   Track: typeof SliderTrack;
   Indicator: typeof SliderIndicator;
   Thumb: typeof SliderThumb;
 };
 //#endregion
-export { Slider, SliderControlProps, SliderIndicatorProps, SliderLabelProps, SliderOutputProps, SliderProps, SliderThumbProps, SliderTrackProps };
+export { Slider, SliderControlProps, SliderIndicatorProps, SliderLabelProps, SliderRootProps, SliderThumbProps, SliderTrackProps, SliderValueProps };