@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/components/RadioGroup.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
@@ -26,23 +27,19 @@ 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 RadioGroupRoot({ orientation = "vertical", className = "", ref, ...props }) {
+function RadioGroupRoot({ orientation = "vertical", className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		ref,
 		"data-slot": "radio-group",
-		className: [
-			"radio-group",
-			`radio-group--${orientation}`,
-			className
-		].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["radio-group", `radio-group--${orientation}`].filter(Boolean).join(" "), className),
 		...props
 	});
 }
 /**
 * A single radio button within a RadioGroup.
 */
-function RadioRoot({ className = "", ref, ...props }) {
-	const classes = ["radio", className].filter(Boolean).join(" ");
+function RadioRoot({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["radio"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Radio$1.Root, {
 		ref,
 		"data-slot": "radio-group-item",
@@ -53,8 +50,8 @@ function RadioRoot({ className = "", ref, ...props }) {
 /**
 * The visual indicator for a Radio button.
 */
-function RadioIndicator({ className = "", ref, ...props }) {
-	const classes = ["radio__indicator", className].filter(Boolean).join(" ");
+function RadioIndicator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["radio__indicator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Radio$1.Indicator, {
 		ref,
 		"data-slot": "radio-group-indicator",

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-Bk-QLWWI.js";
 import { Collapsible } from "./Collapsible.js";
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon } from "../icons-CpfUer49.js";
+import { V as SpinnerIcon } from "../icons--FqCZEc3.js";
 import { ActivityContent, ActivityText, ActivityTrigger } from "./Activity.js";
-import { f as MessageResponse } from "../Message-BkMdE3bS.js";
+import { f as MessageResponse } from "../Message-C4eYRogZ.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Reasoning.tsx

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-Bk-QLWWI.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-Bk-QLWWI.js";
+import { B as SidebarIcon } from "../icons--FqCZEc3.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();
@@ -79,6 +80,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 +99,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-Bk-QLWWI.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,8 +73,8 @@ 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,
 		className: classes,

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-CwSqP07Y.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-Bk-QLWWI.js";
+import { i as ArrowUpIcon, s as CheckIcon, t as ArrowDownIcon } from "../icons--FqCZEc3.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,13 +44,9 @@ function SelectLabel({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function SelectTrigger({ size = "default", className = "", 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(" ");
+	const classes = mergeBaseClassName(["select__trigger", normalizedSize === "sm" && "select__trigger--sm"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Select$1.Trigger, {
 		ref,
 		"data-slot": "select-trigger",
@@ -67,8 +64,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 +73,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 +98,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 +107,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 +117,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 +135,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 +149,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 +158,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 +167,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 +177,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-Bk-QLWWI.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.
  *

package/dist/components/Slider.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
@@ -33,8 +34,8 @@ import { Slider as Slider$1 } from "@base-ui/react/slider";
 *
 * @see {@link https://base-ui.com/react/components/slider | Base UI Slider}
 */
-function SliderRoot({ className = "", ref, ...props }) {
-	const classes = ["slider", className].filter(Boolean).join(" ");
+function SliderRoot({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["slider"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Slider$1.Root, {
 		ref,
 		"data-slot": "slider",
@@ -45,8 +46,8 @@ function SliderRoot({ className = "", ref, ...props }) {
 /**
 * The control area for the Slider (handles interactions).
 */
-function SliderControl({ className = "", ref, ...props }) {
-	const classes = ["slider__control", className].filter(Boolean).join(" ");
+function SliderControl({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["slider__control"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Slider$1.Control, {
 		ref,
 		"data-slot": "slider-control",
@@ -57,8 +58,8 @@ function SliderControl({ className = "", ref, ...props }) {
 /**
 * The track container for the Slider.
 */
-function SliderTrack({ className = "", ref, ...props }) {
-	const classes = ["slider__track", className].filter(Boolean).join(" ");
+function SliderTrack({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["slider__track"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Slider$1.Track, {
 		ref,
 		"data-slot": "slider-track",
@@ -69,8 +70,8 @@ function SliderTrack({ className = "", ref, ...props }) {
 /**
 * The filled indicator showing current value position.
 */
-function SliderIndicator({ className = "", ref, ...props }) {
-	const classes = ["slider__indicator", className].filter(Boolean).join(" ");
+function SliderIndicator({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["slider__indicator"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Slider$1.Indicator, {
 		ref,
 		"data-slot": "slider-range",
@@ -81,8 +82,8 @@ function SliderIndicator({ className = "", ref, ...props }) {
 /**
 * The draggable thumb for the Slider.
 */
-function SliderThumb({ className = "", ref, ...props }) {
-	const classes = ["slider__thumb", className].filter(Boolean).join(" ");
+function SliderThumb({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["slider__thumb"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Slider$1.Thumb, {
 		ref,
 		"data-slot": "slider-thumb",
@@ -94,8 +95,8 @@ function SliderThumb({ className = "", ref, ...props }) {
 * Displays the current value of the Slider.
 * Note: This must be used inside a Slider component to access the value context.
 */
-function SliderOutput({ className = "", children, ref, ...props }) {
-	const classes = ["slider__output", className].filter(Boolean).join(" ");
+function SliderOutput({ className, children, ref, ...props }) {
+	const classes = mergeBaseClassName(["slider__output"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Slider$1.Value, {
 		ref,
 		"data-slot": "slider-output",
@@ -105,8 +106,8 @@ function SliderOutput({ className = "", children, ref, ...props }) {
 	});
 }
 /** Visible label that participates in Base UI's slider naming relationship. */
-function SliderLabel({ className = "", ref, ...props }) {
-	const classes = ["slider__label", className].filter(Boolean).join(" ");
+function SliderLabel({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["slider__label"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Slider$1.Label, {
 		ref,
 		"data-slot": "slider-label",

package/dist/components/Sources.d.ts

@@ -1,13 +1,11 @@
-import { Collapsible } from "./Collapsible.js";
+import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
 import * as React from "react";
 
 //#region src/components/Sources.d.ts
 /**
  * Props for the Sources root. Wraps Base UI Collapsible.Root.
  */
-interface SourcesProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
-  className?: string;
-}
+interface SourcesProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "unstyled"> {}
 /**
  * Displays a collapsible list of citations used by an AI to generate a
  * response. Compose with SourcesTrigger, SourcesContent, and one or more
@@ -35,8 +33,7 @@ declare function Sources({
 }: SourcesProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface SourcesTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
-  className?: string;
+interface SourcesTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "unstyled"> {
   /** Number of sources to show in the trigger label. */
   count: number;
 }
@@ -53,9 +50,7 @@ declare function SourcesTrigger({
 }: SourcesTriggerProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-interface SourcesContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
-  className?: string;
-}
+interface SourcesContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "unstyled"> {}
 /**
  * The collapsible panel that contains Source children.
  */