@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/Reasoning.d.ts

@@ -1,4 +1,4 @@
-import { Collapsible } from "./Collapsible.js";
+import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
 import * as React from "react";
 
 //#region src/components/Reasoning.d.ts
@@ -9,8 +9,7 @@ interface ReasoningContextValue {
   duration?: number;
 }
 declare function useReasoning(): ReasoningContextValue;
-interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "onOpenChange" | "unstyled"> {
-  className?: string;
+interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "onOpenChange" | "unstyled"> {
   /**
    * Whether the model is currently generating reasoning. When true the
    * component auto-opens; it auto-closes once streaming ends.
@@ -53,8 +52,7 @@ declare function Reasoning({
 }: ReasoningProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ReasoningTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
-  className?: string;
+interface ReasoningTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "unstyled"> {
   getThinkingMessage?: (isStreaming: boolean, duration?: number) => React.ReactNode;
 }
 /**
@@ -70,9 +68,7 @@ declare function ReasoningTrigger({
 }: ReasoningTriggerProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-interface ReasoningContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
-  className?: string;
-}
+interface ReasoningContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "unstyled"> {}
 /**
  * The reasoning text panel. Accepts any React node but is optimized for
  * long-form text; a muted left border visually distinguishes the block.

package/dist/components/Reasoning.js

@@ -1,8 +1,8 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon } from "../icons-CpfUer49.js";
+import { G as SpinnerIcon } from "../icons-CQJ-aMnI.js";
 import { ActivityContent, ActivityText, ActivityTrigger } from "./Activity.js";
-import { f as MessageResponse } from "../Message-BkMdE3bS.js";
+import { f as MessageResponse } from "../Message-BXtmfc9Q.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Reasoning.tsx
@@ -50,9 +50,6 @@ function Reasoning({ className, isStreaming = false, duration, open, defaultOpen
 		isControlled,
 		onOpenChange
 	]);
-	React.useEffect(() => {
-		if (duration !== void 0) setInternalDuration(duration);
-	}, [duration]);
 	React.useEffect(() => {
 		if (isStreaming) {
 			hasEverStreamedRef.current = true;

package/dist/components/ResizableSidePanel.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
 import { Separator } from "./Separator.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -118,7 +118,7 @@ function ResizableSidePanelHandle({ className, onKeyDown, onPointerDown, ref, ..
 		"aria-valuemin": minSize,
 		"aria-valuemax": maxSize,
 		"aria-valuenow": size,
-		className: cx("resizable-side-panel__handle", className),
+		className: mergeBaseClassName("resizable-side-panel__handle", className),
 		onPointerDown: (event) => {
 			onPointerDown?.(event);
 			if (!event.defaultPrevented) beginResize(event);

package/dist/components/ResponsiveSidebarShell.d.ts

@@ -1,2 +1,2 @@
-import { i as ResponsiveSidebarShellTopBarControls, n as ResponsiveSidebarShellControls, r as ResponsiveSidebarShellProps, t as ResponsiveSidebarShell } from "../ResponsiveSidebarShell-Dd9DCcBT.js";
+import { i as ResponsiveSidebarShellTopBarControls, n as ResponsiveSidebarShellControls, r as ResponsiveSidebarShellProps, t as ResponsiveSidebarShell } from "../ResponsiveSidebarShell-CsAh4NyL.js";
 export { ResponsiveSidebarShell, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps, ResponsiveSidebarShellTopBarControls };

package/dist/components/ResponsiveSidebarShell.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { z as SidebarIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { W as SidebarIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import { AppTopBar } from "./AppTopBar.js";
@@ -26,6 +26,7 @@ function isCompactSidebar(root) {
 /**
 * Responsive master-detail shell with a resizable desktop sidebar and a compact
 * floating sidebar that leaves the main content in place as a dismiss target.
+* The root exposes `data-sidebar-open="true" | "false"` as its public styling hook.
 */
 function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, defaultSidebarOpen, defaultSidebarWidth = sidebarDefaultWidth, onSidebarOpenChange, toolbarLabel = "Sidebar controls", showMainLabel = "Show main content", className, children, ref, style, ...props }) {
 	const sidebarId = React.useId();
@@ -39,21 +40,27 @@ function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, de
 	});
 	const toggleLabel = `${sidebarLabel.charAt(0).toUpperCase()}${sidebarLabel.slice(1)}`;
 	const toggleTooltip = `${isSidebarOpen ? "Hide" : "Show"} ${sidebarLabel}`;
+	const updateSidebar = React.useCallback((update, restoreFocus) => {
+		update();
+		if (restoreFocus) queueMicrotask(restoreFocus);
+	}, []);
 	const closeSidebar = React.useCallback(() => {
-		setSidebarOpen(false);
-		queueMicrotask(() => mainRef.current?.focus({ preventScroll: true }));
-	}, [setSidebarOpen]);
+		updateSidebar(() => setSidebarOpen(false), () => mainRef.current?.focus({ preventScroll: true }));
+	}, [setSidebarOpen, updateSidebar]);
 	const closeSidebarOnCompact = React.useCallback(() => {
 		if (rootRef.current && isCompactSidebar(rootRef.current)) closeSidebar();
 	}, [closeSidebar]);
 	const toggleSidebar = React.useCallback((trigger) => {
 		if (trigger) openerRef.current = trigger;
-		setSidebarOpen(!isSidebarOpen);
-	}, [isSidebarOpen, setSidebarOpen]);
+		updateSidebar(() => setSidebarOpen(!isSidebarOpen));
+	}, [
+		isSidebarOpen,
+		setSidebarOpen,
+		updateSidebar
+	]);
 	const dismissSidebar = React.useCallback(() => {
-		setSidebarOpen(false);
-		queueMicrotask(() => openerRef.current?.focus({ preventScroll: true }));
-	}, [setSidebarOpen]);
+		updateSidebar(() => setSidebarOpen(false), () => openerRef.current?.focus({ preventScroll: true }));
+	}, [setSidebarOpen, updateSidebar]);
 	const sidebarContent = typeof sidebar === "function" ? sidebar({
 		closeSidebar,
 		closeSidebarOnCompact
@@ -79,6 +86,7 @@ function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, de
 		className: cx("responsive-sidebar-shell", className),
 		style,
 		...props,
+		"data-sidebar-open": isSidebarOpen ? "true" : "false",
 		onKeyDown: (event) => {
 			props.onKeyDown?.(event);
 			if (!event.defaultPrevented && event.key === "Escape" && isSidebarOpen && rootRef.current && isCompactSidebar(rootRef.current)) {
@@ -97,7 +105,6 @@ function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, de
 			minSize: sidebarMinWidth,
 			maxSize: sidebarMaxWidth,
 			keyboardStep: sidebarKeyboardStep,
-			"data-sidebar-open": isSidebarOpen ? "true" : "false",
 			children: [
 				isSidebarOpen ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "responsive-sidebar-shell__resizer" }) : null,
 				/* @__PURE__ */ jsx("div", {

package/dist/components/ScrollArea.d.ts

@@ -5,38 +5,23 @@ import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 /**
  * Props for the ScrollArea.Root component.
  */
-interface ScrollAreaRootProps extends Omit<React.ComponentPropsWithoutRef<typeof ScrollArea$1.Root>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ScrollAreaRootProps extends React.ComponentPropsWithoutRef<typeof ScrollArea$1.Root> {}
 /**
  * Props for the ScrollArea.Viewport component.
  */
-interface ScrollAreaViewportProps extends Omit<React.ComponentPropsWithoutRef<typeof ScrollArea$1.Viewport>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ScrollAreaViewportProps extends React.ComponentPropsWithoutRef<typeof ScrollArea$1.Viewport> {}
 /**
  * Props for the ScrollArea.Scrollbar component.
  */
-interface ScrollAreaScrollbarProps extends Omit<React.ComponentPropsWithoutRef<typeof ScrollArea$1.Scrollbar>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ScrollAreaScrollbarProps extends React.ComponentPropsWithoutRef<typeof ScrollArea$1.Scrollbar> {}
 /**
  * Props for the ScrollArea.Thumb component.
  */
-interface ScrollAreaThumbProps extends Omit<React.ComponentPropsWithoutRef<typeof ScrollArea$1.Thumb>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ScrollAreaThumbProps extends React.ComponentPropsWithoutRef<typeof ScrollArea$1.Thumb> {}
 /**
  * Props for the ScrollArea.Corner component.
  */
-interface ScrollAreaCornerProps extends Omit<React.ComponentPropsWithoutRef<typeof ScrollArea$1.Corner>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface ScrollAreaCornerProps extends React.ComponentPropsWithoutRef<typeof ScrollArea$1.Corner> {}
 /**
  * Container that groups all scroll area parts. Renders a `<div>` element.
  *

package/dist/components/ScrollArea.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
@@ -19,8 +20,8 @@ import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 *
 * @see {@link https://base-ui.com/react/components/scroll-area | Base UI ScrollArea}
 */
-function ScrollAreaRoot({ className = "", ref, ...props }) {
-	const classes = ["scroll-area", className].filter(Boolean).join(" ");
+function ScrollAreaRoot({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["scroll-area"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Root, {
 		ref,
 		"data-slot": "scroll-area",
@@ -31,8 +32,8 @@ function ScrollAreaRoot({ className = "", ref, ...props }) {
 /**
 * The scrollable viewport container.
 */
-function ScrollAreaViewport({ className = "", tabIndex = 0, role = "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }) {
-	const classes = ["scroll-area__viewport", className].filter(Boolean).join(" ");
+function ScrollAreaViewport({ className, tabIndex = 0, role = "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }) {
+	const classes = mergeBaseClassName(["scroll-area__viewport"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 		ref,
 		"data-slot": "scroll-area-viewport",
@@ -47,8 +48,8 @@ function ScrollAreaViewport({ className = "", tabIndex = 0, role = "group", "ari
 /**
 * The scrollbar track, either vertical or horizontal.
 */
-function ScrollAreaScrollbar({ className = "", orientation = "vertical", ref, ...props }) {
-	const classes = ["scroll-area__scrollbar", className].filter(Boolean).join(" ");
+function ScrollAreaScrollbar({ className, orientation = "vertical", ref, ...props }) {
+	const classes = mergeBaseClassName(["scroll-area__scrollbar"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
 		ref,
 		"data-slot": "scroll-area-scrollbar",
@@ -60,8 +61,8 @@ function ScrollAreaScrollbar({ className = "", orientation = "vertical", ref, ..
 /**
 * The draggable scrollbar thumb indicator.
 */
-function ScrollAreaThumb({ className = "", ref, ...props }) {
-	const classes = ["scroll-area__thumb", className].filter(Boolean).join(" ");
+function ScrollAreaThumb({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["scroll-area__thumb"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
 		ref,
 		"data-slot": "scroll-area-thumb",
@@ -72,10 +73,11 @@ function ScrollAreaThumb({ className = "", ref, ...props }) {
 /**
 * Small rectangle at the intersection of scrollbars.
 */
-function ScrollAreaCorner({ className = "", ref, ...props }) {
-	const classes = ["scroll-area__corner", className].filter(Boolean).join(" ");
+function ScrollAreaCorner({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["scroll-area__corner"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(ScrollArea$1.Corner, {
 		ref,
+		"data-slot": "scroll-area-corner",
 		className: classes,
 		...props
 	});

package/dist/components/SearchField.d.ts

@@ -0,0 +1,43 @@
+import { FieldControlProps, FieldLabelProps, FieldRootProps } from "./Field.js";
+import * as React from "react";
+
+//#region src/components/SearchField.d.ts
+interface SearchFieldRootProps extends FieldRootProps {}
+interface SearchFieldLabelProps extends FieldLabelProps {}
+interface SearchFieldControlProps extends Omit<FieldControlProps, "type"> {}
+/**
+ * Field root for a labelled search input. Product-specific sizing can be
+ * applied through the shared field recipe variables without rebuilding the
+ * search icon anatomy.
+ */
+declare function SearchFieldRoot({
+  className,
+  ref,
+  ...props
+}: SearchFieldRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/** Label associated with the search control through the underlying Field. */
+declare function SearchFieldLabel({
+  className,
+  ref,
+  ...props
+}: SearchFieldLabelProps & {
+  ref?: React.Ref<HTMLLabelElement>;
+}): React.JSX.Element;
+/** Search input with the design-system search icon and logical inset. */
+declare function SearchFieldControl({
+  className,
+  ref,
+  ...props
+}: SearchFieldControlProps & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.JSX.Element;
+/** Composable, accessible search field with stable anatomy slots. */
+declare const SearchField: {
+  Root: typeof SearchFieldRoot;
+  Label: typeof SearchFieldLabel;
+  Control: typeof SearchFieldControl;
+};
+//#endregion
+export { SearchField, SearchFieldControlProps, SearchFieldLabelProps, SearchFieldRootProps };

package/dist/components/SearchField.js

@@ -0,0 +1,52 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { U as SearchIcon } from "../icons-CQJ-aMnI.js";
+import { Field } from "./Field.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SearchField.tsx
+/**
+* Field root for a labelled search input. Product-specific sizing can be
+* applied through the shared field recipe variables without rebuilding the
+* search icon anatomy.
+*/
+function SearchFieldRoot({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Root, {
+		ref,
+		"data-slot": "search-field",
+		className: mergeBaseClassName("search-field", className),
+		...props
+	});
+}
+/** Label associated with the search control through the underlying Field. */
+function SearchFieldLabel({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Label, {
+		ref,
+		"data-slot": "search-field-label",
+		className: mergeBaseClassName("search-field__label", className),
+		...props
+	});
+}
+/** Search input with the design-system search icon and logical inset. */
+function SearchFieldControl({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "search-field-control",
+		className: "search-field__control",
+		children: [/* @__PURE__ */ jsx(SearchIcon, {
+			"data-slot": "search-field-icon",
+			className: "search-field__icon",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx(Field.Control, {
+			ref,
+			type: "search",
+			className: mergeBaseClassName("search-field__input", className),
+			...props
+		})]
+	});
+}
+/** Composable, accessible search field with stable anatomy slots. */
+const SearchField = {
+	Root: SearchFieldRoot,
+	Label: SearchFieldLabel,
+	Control: SearchFieldControl
+};
+//#endregion
+export { SearchField };

package/dist/components/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-BeEsefzh.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-B_13gg_J.js";
 export { Select, SelectBackdropProps, SelectGroupLabelProps, SelectGroupProps, SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectListProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectSeparatorProps, SelectTriggerProps, SelectValueProps };

package/dist/components/Select.js

@@ -1,4 +1,5 @@
-import { i as ArrowUpIcon, o as CheckIcon, t as ArrowDownIcon } from "../icons-CpfUer49.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { a as ArrowUpIcon, l as CheckIcon, n as ArrowDownIcon } from "../icons-CQJ-aMnI.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
@@ -34,8 +35,8 @@ function SelectRoot(props) {
 		...props
 	});
 }
-function SelectLabel({ className = "", ref, ...props }) {
-	const classes = ["select__label", className].filter(Boolean).join(" ");
+function SelectLabel({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__label"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.Label, {
 		ref,
 		"data-slot": "select-label",
@@ -43,17 +44,12 @@ function SelectLabel({ className = "", ref, ...props }) {
 		...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(" ");
+function SelectTrigger({ size = "sm", className, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__trigger", size === "sm" && "select__trigger--sm"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.Trigger, {
 		ref,
 		"data-slot": "select-trigger",
-		"data-size": normalizedSize,
+		"data-size": size,
 		className: classes,
 		...props
 	});
@@ -67,8 +63,8 @@ function SelectValue({ placeholder, children, ref, ...props }) {
 		children
 	});
 }
-function SelectIcon({ className = "", children, ref, ...props }) {
-	const classes = ["select__icon", className].filter(Boolean).join(" ");
+function SelectIcon({ className, children, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__icon"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.Icon, {
 		ref,
 		className: classes,
@@ -76,36 +72,24 @@ function SelectIcon({ className = "", children, ref, ...props }) {
 		children: children ?? /* @__PURE__ */ jsx(ArrowDownIcon, {})
 	});
 }
-function SelectBackdrop({ className = "", ref, ...props }) {
-	const classes = [
-		"select__backdrop",
-		"base-ui-backdrop",
-		className
-	].filter(Boolean).join(" ");
+function SelectBackdrop({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__backdrop", "base-ui-backdrop"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.Backdrop, {
 		ref,
 		className: classes,
 		...props
 	});
 }
-function SelectPositioner({ className = "", ref, ...props }) {
-	const classes = [
-		"select__positioner",
-		"base-ui-positioner",
-		className
-	].filter(Boolean).join(" ");
+function SelectPositioner({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.Positioner, {
 		ref,
 		className: classes,
 		...props
 	});
 }
-function SelectPopup({ className = "", ref, ...props }) {
-	const classes = [
-		"select__popup",
-		"base-ui-popup",
-		className
-	].filter(Boolean).join(" ");
+function SelectPopup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.Popup, {
 		ref,
 		"data-slot": "select-content",
@@ -113,8 +97,8 @@ function SelectPopup({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function SelectList({ className = "", ref, ...props }) {
-	const classes = ["select__list", className].filter(Boolean).join(" ");
+function SelectList({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__list"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.List, {
 		ref,
 		"data-slot": "select-viewport",
@@ -122,8 +106,8 @@ function SelectList({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function SelectItem({ className = "", value, ref, ...props }) {
-	const classes = ["select__option", className].filter(Boolean).join(" ");
+function SelectItem({ className, value, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__option"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.Item, {
 		ref,
 		"data-slot": "select-item",
@@ -132,16 +116,16 @@ function SelectItem({ className = "", value, ref, ...props }) {
 		...props
 	});
 }
-function SelectItemText({ className = "", ref, ...props }) {
-	const classes = ["select__item-text", className].filter(Boolean).join(" ");
+function SelectItemText({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__item-text"].filter(Boolean).join(" "), className);
 	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(" ");
+function SelectItemIndicator({ className, children, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__item-indicator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
 		ref,
 		"data-slot": "select-item-indicator",
@@ -150,8 +134,8 @@ function SelectItemIndicator({ className = "", children, ref, ...props }) {
 		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 }
-function SelectGroup({ label, className = "", children, ref, ...props }) {
-	const classes = ["select__option-group", className].filter(Boolean).join(" ");
+function SelectGroup({ label, className, children, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__option-group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsxs(Select$1.Group, {
 		ref,
 		"data-slot": "select-group",
@@ -164,8 +148,8 @@ function SelectGroup({ label, className = "", children, ref, ...props }) {
 		}), children]
 	});
 }
-function SelectGroupLabel({ className = "", ref, ...props }) {
-	const classes = ["select__group-label", className].filter(Boolean).join(" ");
+function SelectGroupLabel({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__group-label"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
 		ref,
 		"data-slot": "select-label",
@@ -173,8 +157,8 @@ function SelectGroupLabel({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function SelectSeparator({ className = "", ref, ...props }) {
-	const classes = ["select__separator", className].filter(Boolean).join(" ");
+function SelectSeparator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__separator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.Separator, {
 		ref,
 		"data-slot": "select-separator",
@@ -182,12 +166,8 @@ function SelectSeparator({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function SelectScrollUpArrow({ className = "", children, ref, ...props }) {
-	const classes = [
-		"select__scroll-button",
-		"select__scroll-button--up",
-		className
-	].filter(Boolean).join(" ");
+function SelectScrollUpArrow({ className, children, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__scroll-button", "select__scroll-button--up"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
 		ref,
 		"data-slot": "select-scroll-up-button",
@@ -196,12 +176,8 @@ function SelectScrollUpArrow({ className = "", children, ref, ...props }) {
 		children: children ?? /* @__PURE__ */ jsx(ArrowUpIcon, {})
 	});
 }
-function SelectScrollDownArrow({ className = "", children, ref, ...props }) {
-	const classes = [
-		"select__scroll-button",
-		"select__scroll-button--down",
-		className
-	].filter(Boolean).join(" ");
+function SelectScrollDownArrow({ className, children, ref, ...props }) {
+	const classes = mergeBaseClassName(["select__scroll-button", "select__scroll-button--down"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
 		ref,
 		"data-slot": "select-scroll-down-button",

package/dist/components/Separator.d.ts

@@ -5,16 +5,12 @@ import { Separator as Separator$1 } from "@base-ui/react/separator";
 /**
  * Props for the Separator component.
  */
-interface SeparatorProps extends Omit<React.ComponentPropsWithRef<typeof Separator$1>, "className"> {
+interface SeparatorProps extends React.ComponentPropsWithRef<typeof Separator$1> {
   /**
    * Whether the separator is purely visual.
    * @default true
    */
   decorative?: boolean;
-  /**
-   * Additional CSS class names.
-   */
-  className?: string;
 }
 /**
  * A visual divider component that separates content sections.

package/dist/components/Separator.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
@@ -18,12 +19,8 @@ import { Separator as Separator$1 } from "@base-ui/react/separator";
 *
 * @see {@link https://base-ui.com/react/components/separator | Base UI Separator}
 */
-function Separator({ orientation = "horizontal", decorative = true, className = "", ref, ...props }) {
-	const classes = [
-		"separator",
-		`separator--${orientation}`,
-		className
-	].filter(Boolean).join(" ");
+function Separator({ orientation = "horizontal", decorative = true, className, ref, ...props }) {
+	const classes = mergeBaseClassName(`separator separator--${orientation}`, className);
 	return /* @__PURE__ */ jsx(Separator$1, {
 		ref,
 		"data-slot": "separator",

package/dist/components/Slider.d.ts

@@ -2,28 +2,15 @@ import * as React from "react";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
 
 //#region src/components/Slider.d.ts
-interface SliderProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Root>, "className"> {
-  className?: string;
-}
-interface SliderControlProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Control>, "className"> {
-  className?: string;
-}
-interface SliderTrackProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Track>, "className"> {
-  className?: string;
-}
-interface SliderIndicatorProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Indicator>, "className"> {
-  className?: string;
-}
-interface SliderThumbProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Thumb>, "className"> {
-  className?: string;
-}
+interface SliderProps extends React.ComponentPropsWithRef<typeof Slider$1.Root> {}
+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"> {
-  className?: string;
   children?: (value: number, values: readonly number[], formattedValues: readonly string[]) => React.ReactNode;
 }
-interface SliderLabelProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Label>, "className"> {
-  className?: string;
-}
+interface SliderLabelProps extends React.ComponentPropsWithRef<typeof Slider$1.Label> {}
 /**
  * A slider component for selecting values from a range.
  *