@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/components/RadioGroup.d.ts

@@ -40,7 +40,7 @@ interface RadioIndicatorProps extends Omit<React.ComponentPropsWithRef<typeof Ra
  *
  * @see {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}
  */
-declare function RadioGroup({
+declare function RadioGroupRoot({
   orientation,
   className,
   ref,
@@ -51,19 +51,13 @@ declare function RadioGroup({
 /**
  * A single radio button within a RadioGroup.
  */
-declare function Radio({
+declare function RadioRoot({
   className,
   ref,
   ...props
 }: RadioProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-declare function RadioGroupItem({
-  children,
-  ...props
-}: RadioProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
 /**
  * The visual indicator for a Radio button.
  */
@@ -74,5 +68,12 @@ declare function RadioIndicator({
 }: RadioIndicatorProps & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
+declare const RadioGroup: {
+  Root: typeof RadioGroupRoot;
+};
+declare const Radio: {
+  Root: typeof RadioRoot;
+  Indicator: typeof RadioIndicator;
+};
 //#endregion
-export { Radio, RadioGroup, RadioGroupItem, RadioGroupProps, RadioIndicator, RadioIndicatorProps, RadioProps };
+export { Radio, RadioGroup, RadioGroupProps, RadioIndicatorProps, RadioProps };

package/dist/components/RadioGroup.js

@@ -26,7 +26,7 @@ import { Radio as Radio$1 } from "@base-ui/react/radio";
 *
 * @see {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}
 */
-function RadioGroup({ orientation = "vertical", className = "", ref, ...props }) {
+function RadioGroupRoot({ orientation = "vertical", className = "", ref, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		ref,
 		"data-slot": "radio-group",
@@ -41,7 +41,7 @@ function RadioGroup({ orientation = "vertical", className = "", ref, ...props })
 /**
 * A single radio button within a RadioGroup.
 */
-function Radio({ className = "", ref, ...props }) {
+function RadioRoot({ className = "", ref, ...props }) {
 	const classes = ["radio", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Radio$1.Root, {
 		ref,
@@ -50,12 +50,6 @@ function Radio({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function RadioGroupItem({ children, ...props }) {
-	return /* @__PURE__ */ jsx(Radio, {
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(RadioIndicator, {})
-	});
-}
 /**
 * The visual indicator for a Radio button.
 */
@@ -68,5 +62,10 @@ function RadioIndicator({ className = "", ref, ...props }) {
 		...props
 	});
 }
+const RadioGroup = { Root: RadioGroupRoot };
+const Radio = {
+	Root: RadioRoot,
+	Indicator: RadioIndicator
+};
 //#endregion
-export { Radio, RadioGroup, RadioGroupItem, RadioIndicator };
+export { Radio, RadioGroup };

package/dist/components/Reasoning.d.ts

@@ -1,4 +1,4 @@
-import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import { Collapsible } from "./Collapsible.js";
 import * as React from "react";
 
 //#region src/components/Reasoning.d.ts
@@ -9,7 +9,7 @@ interface ReasoningContextValue {
   duration?: number;
 }
 declare function useReasoning(): ReasoningContextValue;
-interface ReasoningProps extends Omit<CollapsibleRootProps, "className" | "onOpenChange" | "unstyled"> {
+interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "onOpenChange" | "unstyled"> {
   className?: string;
   /**
    * Whether the model is currently generating reasoning. When true the
@@ -52,7 +52,7 @@ declare function Reasoning({
 }: ReasoningProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ReasoningTriggerProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+interface ReasoningTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
   className?: string;
   getThinkingMessage?: (isStreaming: boolean, duration?: number) => React.ReactNode;
 }
@@ -69,7 +69,7 @@ declare function ReasoningTrigger({
 }: ReasoningTriggerProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-interface ReasoningContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+interface ReasoningContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
   className?: string;
 }
 /**

package/dist/components/Reasoning.js

@@ -1,13 +1,9 @@
-import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon } from "../icons-D2Q5n5C1.js";
+import { c as ChevronRightIcon } from "../icons-Ba9THQKz.js";
+import { MessageResponse } from "./Message.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
-import { math } from "@streamdown/math";
-import { mermaid } from "@streamdown/mermaid";
-import { Streamdown } from "streamdown";
 //#region src/components/Reasoning.tsx
 const ReasoningContext = React.createContext(null);
 const AUTO_CLOSE_DELAY_MS = 1e3;
@@ -103,8 +99,9 @@ function Reasoning({ className, isStreaming = false, duration, open, defaultOpen
 	]);
 	return /* @__PURE__ */ jsx(ReasoningContext.Provider, {
 		value: ctx,
-		children: /* @__PURE__ */ jsx(CollapsibleRoot, {
+		children: /* @__PURE__ */ jsx(Collapsible.Root, {
 			ref,
+			"data-slot": "reasoning-trigger",
 			className: cx("reasoning", className),
 			open: currentOpen,
 			onOpenChange: handleOpenChange,
@@ -126,7 +123,7 @@ function defaultGetThinkingMessage(isStreaming, duration) {
 */
 function ReasoningTrigger({ className, children, getThinkingMessage = defaultGetThinkingMessage, ref, ...props }) {
 	const { isStreaming, duration } = useReasoning();
-	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(CollapsibleTrigger, {
+	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(Collapsible.Trigger, {
 		ref,
 		className: cx("reasoning__trigger", className),
 		"data-streaming": isStreaming ? "" : void 0,
@@ -134,8 +131,9 @@ function ReasoningTrigger({ className, children, getThinkingMessage = defaultGet
 		unstyled: true,
 		children
 	});
-	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		ref,
+		"data-slot": "reasoning-trigger",
 		className: cx("reasoning__trigger", className),
 		"data-streaming": isStreaming ? "" : void 0,
 		...props,
@@ -144,34 +142,27 @@ function ReasoningTrigger({ className, children, getThinkingMessage = defaultGet
 			className: "reasoning__trigger-label",
 			children: getThinkingMessage(isStreaming, duration)
 		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "reasoning-trigger-icon",
 			className: "reasoning__trigger-icon",
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 		})]
 	});
 }
-const streamdownPlugins = {
-	cjk,
-	code,
-	math,
-	mermaid
-};
 /**
 * The reasoning text panel. Accepts any React node but is optimized for
 * long-form text; a muted left border visually distinguishes the block.
 */
 function ReasoningContent({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		ref,
+		"data-slot": "reasoning-content",
 		className: cx("reasoning__content", className),
 		...props,
 		unstyled: true,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "reasoning__text",
-			children: typeof children === "string" ? /* @__PURE__ */ jsx(Streamdown, {
-				plugins: streamdownPlugins,
-				children
-			}) : children
+			children: typeof children === "string" ? /* @__PURE__ */ jsx(MessageResponse, { children }) : children
 		})
 	});
 }

package/dist/components/ScrollArea.d.ts

@@ -86,7 +86,6 @@ declare function ScrollAreaScrollbar({
 }: ScrollAreaScrollbarProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare const ScrollBar: typeof ScrollAreaScrollbar;
 /**
  * The draggable scrollbar thumb indicator.
  */
@@ -107,12 +106,6 @@ declare function ScrollAreaCorner({
 }: ScrollAreaCornerProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare function ScrollAreaDefault({
-  children,
-  ...props
-}: ScrollAreaRootProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
 /**
  * A native scroll container with custom-styled scrollbars.
  * Provides smooth scrolling and customizable appearance.
@@ -149,7 +142,7 @@ declare function ScrollAreaDefault({
  *
  * @see {@link https://base-ui.com/react/components/scroll-area | Base UI ScrollArea}
  */
-declare const ScrollArea: typeof ScrollAreaDefault & {
+declare const ScrollArea: {
   Root: typeof ScrollAreaRoot;
   Viewport: typeof ScrollAreaViewport;
   Scrollbar: typeof ScrollAreaScrollbar;
@@ -157,4 +150,4 @@ declare const ScrollArea: typeof ScrollAreaDefault & {
   Corner: typeof ScrollAreaCorner;
 };
 //#endregion
-export { ScrollArea, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps, ScrollBar };
+export { ScrollArea, ScrollAreaCornerProps, ScrollAreaRootProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaViewportProps };

package/dist/components/ScrollArea.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/components/ScrollArea.tsx
 /**
@@ -57,7 +57,6 @@ function ScrollAreaScrollbar({ className = "", orientation = "vertical", ref, ..
 		...props
 	});
 }
-const ScrollBar = ScrollAreaScrollbar;
 /**
 * The draggable scrollbar thumb indicator.
 */
@@ -81,23 +80,6 @@ function ScrollAreaCorner({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function hasScrollAreaParts(children) {
-	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === ScrollAreaViewport || child.type === ScrollAreaScrollbar || child.type === ScrollAreaCorner));
-}
-function ScrollAreaDefault({ children, ...props }) {
-	if (hasScrollAreaParts(children)) return /* @__PURE__ */ jsx(ScrollAreaRoot, {
-		...props,
-		children
-	});
-	return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(ScrollAreaViewport, { children }),
-			/* @__PURE__ */ jsx(ScrollAreaScrollbar, { children: /* @__PURE__ */ jsx(ScrollAreaThumb, {}) }),
-			/* @__PURE__ */ jsx(ScrollAreaCorner, {})
-		]
-	});
-}
 /**
 * A native scroll container with custom-styled scrollbars.
 * Provides smooth scrolling and customizable appearance.
@@ -134,12 +116,12 @@ function ScrollAreaDefault({ children, ...props }) {
 *
 * @see {@link https://base-ui.com/react/components/scroll-area | Base UI ScrollArea}
 */
-const ScrollArea = Object.assign(ScrollAreaDefault, {
+const ScrollArea = {
 	Root: ScrollAreaRoot,
 	Viewport: ScrollAreaViewport,
 	Scrollbar: ScrollAreaScrollbar,
 	Thumb: ScrollAreaThumb,
 	Corner: ScrollAreaCorner
-});
+};
 //#endregion
-export { ScrollArea, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollBar };
+export { ScrollArea };

package/dist/components/Select.d.ts

@@ -1,2 +1,2 @@
-import { A as SelectTriggerProps, C as SelectScrollDownButton, D as SelectSeparator, E as SelectScrollUpButtonProps, M as SelectValueProps, O as SelectSeparatorProps, S as SelectProps, T as SelectScrollUpButton, _ as SelectPopupProps, a as SelectGroupProps, b as SelectPositioner, c as SelectLabel, d as SelectListProps, f as SelectOption, g as SelectPopup, h as SelectOptionProps, i as SelectGroup, j as SelectValue, k as SelectTrigger, l as SelectLabelProps, m as SelectOptionGroupProps, n as SelectContent, o as SelectItem, p as SelectOptionGroup, r as SelectContentProps, s as SelectItemProps, t as Select, u as SelectList, v as SelectPortal, w as SelectScrollDownButtonProps, x as SelectPositionerProps, y as SelectPortalProps } from "../Select-CRsKCJ9x.js";
-export { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectOption, SelectOptionGroup, SelectOptionGroupProps, SelectOptionProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectPositioner, SelectPositionerProps, SelectProps, SelectScrollDownButton, SelectScrollDownButtonProps, SelectScrollUpButton, SelectScrollUpButtonProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps };
+import { _ as SelectTriggerProps, a as SelectIconProps, c as SelectItemTextProps, d as SelectPortalProps, f as SelectPositionerProps, g as SelectSeparatorProps, h as SelectScrollUpArrowProps, i as SelectGroupProps, l as SelectListProps, m as SelectScrollDownArrowProps, n as SelectBackdropProps, o as SelectItemIndicatorProps, p as SelectProps, r as SelectGroupLabelProps, s as SelectItemProps, t as Select, u as SelectPopupProps, v as SelectValueProps } from "../Select-Dl_vF_Bt.js";
+export { Select, SelectBackdropProps, SelectGroupLabelProps, SelectGroupProps, SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectListProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectSeparatorProps, SelectTriggerProps, SelectValueProps };

package/dist/components/Select.js

@@ -1,124 +1,90 @@
-import { a as CheckIcon, i as ArrowUpIcon, t as ArrowDownIcon } from "../icons-D2Q5n5C1.js";
-import * as React from "react";
+import { a as CheckIcon, i as ArrowUpIcon, t as ArrowDownIcon } from "../icons-Ba9THQKz.js";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/components/Select.tsx
-const SelectLabelsContext = React.createContext(null);
 /**
 * A select component for choosing from a list of options.
 *
 * @example
 * ```tsx
-* <Select defaultValue="option1">
-*   <SelectTrigger>
-*     <SelectValue placeholder="Select..." />
-*   </SelectTrigger>
-*   <SelectPortal>
-*     <SelectPositioner>
-*       <SelectPopup>
-*         <SelectList>
-*           <SelectOption value="option1">Option 1</SelectOption>
-*           <SelectOption value="option2">Option 2</SelectOption>
-*         </SelectList>
-*       </SelectPopup>
-*     </SelectPositioner>
-*   </SelectPortal>
-* </Select>
+* <Select.Root defaultValue="option1">
+*   <Select.Trigger>
+*     <Select.Value placeholder="Select..." />
+*     <Select.Icon />
+*   </Select.Trigger>
+*   <Select.Portal>
+*     <Select.Positioner>
+*       <Select.Popup>
+*         <Select.List>
+*           <Select.Item value="option1"><Select.ItemText>Option 1</Select.ItemText></Select.Item>
+*           <Select.Item value="option2"><Select.ItemText>Option 2</Select.ItemText></Select.Item>
+*         </Select.List>
+*       </Select.Popup>
+*     </Select.Positioner>
+*   </Select.Portal>
+* </Select.Root>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/select | Base UI Select}
 */
-function Select({ items, ...props }) {
-	const [labels, setLabels] = React.useState(() => /* @__PURE__ */ new Map());
-	const itemLabels = React.useMemo(() => {
-		if (!items) return null;
-		const map = /* @__PURE__ */ new Map();
-		for (const item of items) map.set(item.value, item.label);
-		return map;
-	}, [items]);
-	const registerLabel = React.useCallback((value, label) => {
-		setLabels((prev) => {
-			if (prev.get(value) === label && prev.has(value)) return prev;
-			const next = new Map(prev);
-			next.set(value, label);
-			return next;
-		});
-	}, []);
-	const unregisterLabel = React.useCallback((value) => {
-		setLabels((prev) => {
-			if (!prev.has(value)) return prev;
-			const next = new Map(prev);
-			next.delete(value);
-			return next;
-		});
-	}, []);
-	const mergedLabels = React.useMemo(() => {
-		if (!itemLabels) return labels;
-		const merged = new Map(itemLabels);
-		for (const [k, v] of labels) merged.set(k, v);
-		return merged;
-	}, [labels, itemLabels]);
-	const contextValue = React.useMemo(() => ({
-		labels: mergedLabels,
-		registerLabel,
-		unregisterLabel
-	}), [
-		mergedLabels,
-		registerLabel,
-		unregisterLabel
-	]);
-	return /* @__PURE__ */ jsx(SelectLabelsContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx(Select$1.Root, {
-			"data-slot": "select",
-			...props
-		})
+function SelectRoot(props) {
+	return /* @__PURE__ */ jsx(Select$1.Root, {
+		"data-slot": "select",
+		...props
 	});
 }
-function SelectTrigger({ size = "default", className = "", children, ref, ...props }) {
+function SelectTrigger({ size = "default", className = "", ref, ...props }) {
 	const normalizedSize = size === "md" ? "default" : size;
 	const classes = [
 		"select__trigger",
 		normalizedSize === "sm" && "select__trigger--sm",
 		className
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+	return /* @__PURE__ */ jsx(Select$1.Trigger, {
 		ref,
 		"data-slot": "select-trigger",
 		"data-size": normalizedSize,
 		className: classes,
-		...props,
-		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {
-			className: "select__icon",
-			children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
-		})]
+		...props
 	});
 }
 function SelectValue({ placeholder, children, ref, ...props }) {
-	const context = React.useContext(SelectLabelsContext);
-	if (children) return /* @__PURE__ */ jsx(Select$1.Value, {
+	return /* @__PURE__ */ jsx(Select$1.Value, {
 		ref,
 		"data-slot": "select-value",
 		placeholder,
 		...props,
 		children
 	});
-	return /* @__PURE__ */ jsx(Select$1.Value, {
+}
+function SelectIcon({ className = "", children, ref, ...props }) {
+	const classes = ["select__icon", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.Icon, {
 		ref,
-		"data-slot": "select-value",
+		className: classes,
 		...props,
-		children: (value) => {
-			if (value === null || value === void 0 || value === "") return placeholder ? /* @__PURE__ */ jsx("span", {
-				className: "select__placeholder",
-				children: placeholder
-			}) : null;
-			return context?.labels.get(value) ?? value;
-		}
+		children: children ?? /* @__PURE__ */ jsx(ArrowDownIcon, {})
+	});
+}
+function SelectBackdrop({ className = "", ref, ...props }) {
+	const classes = [
+		"select__backdrop",
+		"base-ui-backdrop",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.Backdrop, {
+		ref,
+		className: classes,
+		...props
 	});
 }
-const SelectPortal = Select$1.Portal;
 function SelectPositioner({ className = "", ref, ...props }) {
-	const classes = ["select__positioner", className].filter(Boolean).join(" ");
+	const classes = [
+		"select__positioner",
+		"base-ui-positioner",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Select$1.Positioner, {
 		ref,
 		className: classes,
@@ -126,7 +92,11 @@ function SelectPositioner({ className = "", ref, ...props }) {
 	});
 }
 function SelectPopup({ className = "", ref, ...props }) {
-	const classes = ["select__popup", className].filter(Boolean).join(" ");
+	const classes = [
+		"select__popup",
+		"base-ui-popup",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Select$1.Popup, {
 		ref,
 		"data-slot": "select-content",
@@ -134,30 +104,6 @@ function SelectPopup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function SelectContent({ anchor, positionMethod, side, sideOffset = 4, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, position, children, ...props }) {
-	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(SelectPositioner, {
-		anchor,
-		positionMethod,
-		side,
-		sideOffset: position === "item-aligned" ? 0 : sideOffset,
-		align,
-		alignOffset,
-		collisionBoundary,
-		collisionPadding,
-		sticky,
-		arrowPadding,
-		disableAnchorTracking,
-		collisionAvoidance,
-		children: /* @__PURE__ */ jsxs(SelectPopup, {
-			...props,
-			children: [
-				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-				/* @__PURE__ */ jsx(SelectList, { children }),
-				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
-			]
-		})
-	}) });
-}
 function SelectList({ className = "", ref, ...props }) {
 	const classes = ["select__list", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Select$1.List, {
@@ -167,35 +113,35 @@ function SelectList({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function SelectOption({ className = "", value, children, ref, ...props }) {
-	const context = React.useContext(SelectLabelsContext);
-	const contextRef = React.useRef(context);
-	contextRef.current = context;
-	const childrenRef = React.useRef(children);
-	childrenRef.current = children;
-	React.useEffect(() => {
-		const ctx = contextRef.current;
-		if (ctx && value !== void 0) {
-			ctx.registerLabel(value, childrenRef.current);
-			return () => ctx.unregisterLabel(value);
-		}
-	}, [value]);
+function SelectItem({ className = "", value, ref, ...props }) {
 	const classes = ["select__option", className].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs(Select$1.Item, {
+	return /* @__PURE__ */ jsx(Select$1.Item, {
 		ref,
 		"data-slot": "select-item",
 		className: classes,
 		value,
+		...props
+	});
+}
+function SelectItemText({ className = "", ref, ...props }) {
+	const classes = ["select__item-text", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.ItemText, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+function SelectItemIndicator({ className = "", children, ref, ...props }) {
+	const classes = ["select__item-indicator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
+		ref,
+		"data-slot": "select-item-indicator",
+		className: classes,
 		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			"data-slot": "select-item-indicator",
-			className: "select__item-indicator",
-			children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
-		}), /* @__PURE__ */ jsx(Select$1.ItemText, { children })]
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 }
-const SelectItem = SelectOption;
-function SelectOptionGroup({ label, className = "", children, ref, ...props }) {
+function SelectGroup({ label, className = "", children, ref, ...props }) {
 	const classes = ["select__option-group", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs(Select$1.Group, {
 		ref,
@@ -209,8 +155,7 @@ function SelectOptionGroup({ label, className = "", children, ref, ...props }) {
 		}), children]
 	});
 }
-const SelectGroup = SelectOptionGroup;
-function SelectLabel({ className = "", ref, ...props }) {
+function SelectGroupLabel({ className = "", ref, ...props }) {
 	const classes = ["select__group-label", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
 		ref,
@@ -228,7 +173,7 @@ function SelectSeparator({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function SelectScrollUpButton({ className = "", children, ref, ...props }) {
+function SelectScrollUpArrow({ className = "", children, ref, ...props }) {
 	const classes = [
 		"select__scroll-button",
 		"select__scroll-button--up",
@@ -242,7 +187,7 @@ function SelectScrollUpButton({ className = "", children, ref, ...props }) {
 		children: children ?? /* @__PURE__ */ jsx(ArrowUpIcon, {})
 	});
 }
-function SelectScrollDownButton({ className = "", children, ref, ...props }) {
+function SelectScrollDownArrow({ className = "", children, ref, ...props }) {
 	const classes = [
 		"select__scroll-button",
 		"select__scroll-button--down",
@@ -256,5 +201,26 @@ function SelectScrollDownButton({ className = "", children, ref, ...props }) {
 		children: children ?? /* @__PURE__ */ jsx(ArrowDownIcon, {})
 	});
 }
+const Select = {
+	Root: SelectRoot,
+	Label: Select$1.Label,
+	Trigger: SelectTrigger,
+	Value: SelectValue,
+	Icon: SelectIcon,
+	Portal: Select$1.Portal,
+	Backdrop: SelectBackdrop,
+	Positioner: SelectPositioner,
+	Popup: SelectPopup,
+	Arrow: Select$1.Arrow,
+	List: SelectList,
+	Item: SelectItem,
+	ItemText: SelectItemText,
+	ItemIndicator: SelectItemIndicator,
+	Separator: SelectSeparator,
+	Group: SelectGroup,
+	GroupLabel: SelectGroupLabel,
+	ScrollUpArrow: SelectScrollUpArrow,
+	ScrollDownArrow: SelectScrollDownArrow
+};
 //#endregion
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectList, SelectOption, SelectOptionGroup, SelectPopup, SelectPortal, SelectPositioner, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export { Select };

package/dist/components/Slider.d.ts

@@ -52,14 +52,9 @@ interface SliderOutputProps extends Omit<React.ComponentPropsWithRef<typeof Slid
  *
  * @see {@link https://base-ui.com/react/components/slider | Base UI Slider}
  */
-declare function Slider({
+declare function SliderRoot({
   className,
-  children,
-  defaultValue,
-  max,
-  min,
   ref,
-  value,
   ...props
 }: SliderProps & {
   ref?: React.Ref<HTMLDivElement>;
@@ -116,5 +111,13 @@ declare function SliderOutput({
 }: SliderOutputProps & {
   ref?: React.Ref<HTMLOutputElement>;
 }): React.JSX.Element;
+declare const Slider: {
+  Root: typeof SliderRoot;
+  Value: typeof SliderOutput;
+  Control: typeof SliderControl;
+  Track: typeof SliderTrack;
+  Indicator: typeof SliderIndicator;
+  Thumb: typeof SliderThumb;
+};
 //#endregion
-export { Slider, SliderControl, SliderControlProps, SliderIndicator, SliderIndicatorProps, SliderOutput, SliderOutputProps, SliderProps, SliderThumb, SliderThumbProps, SliderTrack, SliderTrackProps };
+export { Slider, SliderControlProps, SliderIndicatorProps, SliderOutputProps, SliderProps, SliderThumbProps, SliderTrackProps };