@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/components/NumberField.d.ts

@@ -5,45 +5,27 @@ import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
 /**
  * Props for the NumberField.Root component.
  */
-interface NumberFieldRootProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.Root>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface NumberFieldRootProps extends React.ComponentPropsWithoutRef<typeof NumberField$1.Root> {}
 /**
  * Props for the NumberField.Group component.
  */
-interface NumberFieldGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.Group>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface NumberFieldGroupProps extends React.ComponentPropsWithoutRef<typeof NumberField$1.Group> {}
 /**
  * Props for the NumberField.Input component.
  */
-interface NumberFieldInputProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.Input>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface NumberFieldInputProps extends React.ComponentPropsWithoutRef<typeof NumberField$1.Input> {}
 /**
  * Props for the NumberField.Increment component.
  */
-interface NumberFieldIncrementProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.Increment>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface NumberFieldIncrementProps extends React.ComponentPropsWithoutRef<typeof NumberField$1.Increment> {}
 /**
  * Props for the NumberField.Decrement component.
  */
-interface NumberFieldDecrementProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.Decrement>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface NumberFieldDecrementProps extends React.ComponentPropsWithoutRef<typeof NumberField$1.Decrement> {}
 /**
  * Props for the NumberField.ScrubArea component.
  */
-interface NumberFieldScrubAreaProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.ScrubArea>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface NumberFieldScrubAreaProps extends React.ComponentPropsWithoutRef<typeof NumberField$1.ScrubArea> {}
 /**
  * Container that groups all parts and manages state. Renders a `<div>` element.
  *

package/dist/components/NumberField.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
@@ -18,8 +19,8 @@ import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
 *
 * @see {@link https://base-ui.com/react/components/number-field | Base UI NumberField}
 */
-function NumberFieldRoot({ className = "", ref, ...props }) {
-	const classes = ["number-field", className].filter(Boolean).join(" ");
+function NumberFieldRoot({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["number-field"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NumberField$1.Root, {
 		ref,
 		"data-slot": "number-field",
@@ -30,8 +31,8 @@ function NumberFieldRoot({ className = "", ref, ...props }) {
 /**
 * Groups the input with increment and decrement buttons.
 */
-function NumberFieldGroup({ className = "", ref, ...props }) {
-	const classes = ["number-field__group", className].filter(Boolean).join(" ");
+function NumberFieldGroup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["number-field__group"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NumberField$1.Group, {
 		ref,
 		"data-slot": "number-field-group",
@@ -42,8 +43,8 @@ function NumberFieldGroup({ className = "", ref, ...props }) {
 /**
 * The native input control for the number field.
 */
-function NumberFieldInput({ className = "", ref, ...props }) {
-	const classes = ["number-field__input", className].filter(Boolean).join(" ");
+function NumberFieldInput({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["number-field__input"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NumberField$1.Input, {
 		ref,
 		"data-slot": "number-field-input",
@@ -54,8 +55,8 @@ function NumberFieldInput({ className = "", ref, ...props }) {
 /**
 * Button that increases the value.
 */
-function NumberFieldIncrement({ className = "", ref, ...props }) {
-	const classes = ["number-field__increment", className].filter(Boolean).join(" ");
+function NumberFieldIncrement({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["number-field__increment"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NumberField$1.Increment, {
 		ref,
 		"data-slot": "number-field-increment",
@@ -66,8 +67,8 @@ function NumberFieldIncrement({ className = "", ref, ...props }) {
 /**
 * Button that decreases the value.
 */
-function NumberFieldDecrement({ className = "", ref, ...props }) {
-	const classes = ["number-field__decrement", className].filter(Boolean).join(" ");
+function NumberFieldDecrement({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["number-field__decrement"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NumberField$1.Decrement, {
 		ref,
 		"data-slot": "number-field-decrement",
@@ -78,8 +79,8 @@ function NumberFieldDecrement({ className = "", ref, ...props }) {
 /**
 * Interactive area for click-and-drag value changes.
 */
-function NumberFieldScrubArea({ className = "", ref, ...props }) {
-	const classes = ["number-field__scrub-area", className].filter(Boolean).join(" ");
+function NumberFieldScrubArea({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["number-field__scrub-area"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(NumberField$1.ScrubArea, {
 		ref,
 		"data-slot": "number-field-scrub-area",

package/dist/components/Plan.d.ts

@@ -0,0 +1,103 @@
+import { ChainOfThoughtStepStatus } from "./ChainOfThought.js";
+import * as React from "react";
+
+//#region src/components/Plan.d.ts
+/** Presentation state shared with the existing reasoning-step primitive. */
+type PlanStepStatus = ChainOfThoughtStepStatus;
+interface PlanProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Plan header and ordered steps composed from application-owned plan data. */
+  children?: React.ReactNode;
+}
+/**
+ * Presentation-only container for an application-owned plan.
+ *
+ * Think, Agents, and the AI SDK do not export a generic plan model. Map a
+ * concrete app or tool result directly into this compositional anatomy.
+ */
+declare function Plan({
+  className,
+  ref,
+  ...props
+}: PlanProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface PlanHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function PlanHeader({
+  className,
+  ref,
+  ...props
+}: PlanHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface PlanTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  /** Choose the level that fits the surrounding document outline. */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+declare function PlanTitle({
+  className,
+  headingLevel,
+  ref,
+  ...props
+}: PlanTitleProps & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}): React.JSX.Element;
+interface PlanDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+declare function PlanDescription({
+  className,
+  ref,
+  ...props
+}: PlanDescriptionProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}): React.JSX.Element;
+interface PlanContentProps extends React.OlHTMLAttributes<HTMLOListElement> {}
+/** Ordered sequence of PlanStep children. */
+declare function PlanContent({
+  className,
+  ref,
+  ...props
+}: PlanContentProps & {
+  ref?: React.Ref<HTMLOListElement>;
+}): React.JSX.Element;
+interface PlanStepProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  /** Visual presentation state; this is not a Think or AI SDK execution status. */
+  status?: PlanStepStatus;
+}
+declare function PlanStep({
+  className,
+  status,
+  ref,
+  ...props
+}: PlanStepProps & {
+  ref?: React.Ref<HTMLLIElement>;
+}): React.JSX.Element;
+interface PlanStepIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Accessible label for the visual state indicator. */
+  label?: string;
+}
+declare function PlanStepIndicator({
+  children,
+  className,
+  label,
+  ref,
+  ...props
+}: PlanStepIndicatorProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface PlanStepTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function PlanStepTitle({
+  className,
+  ref,
+  ...props
+}: PlanStepTitleProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface PlanStepDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+declare function PlanStepDescription({
+  className,
+  ref,
+  ...props
+}: PlanStepDescriptionProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}): React.JSX.Element;
+//#endregion
+export { Plan, PlanContent, PlanContentProps, PlanDescription, PlanDescriptionProps, PlanHeader, PlanHeaderProps, PlanProps, PlanStep, PlanStepDescription, PlanStepDescriptionProps, PlanStepIndicator, PlanStepIndicatorProps, PlanStepProps, PlanStepStatus, PlanStepTitle, PlanStepTitleProps, PlanTitle, PlanTitleProps };

package/dist/components/Plan.js

@@ -0,0 +1,113 @@
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { m as DotIcon, r as ArrowRightIcon, s as CheckIcon } from "../icons--FqCZEc3.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Plan.tsx
+const PlanStepContext = React.createContext("pending");
+/**
+* Presentation-only container for an application-owned plan.
+*
+* Think, Agents, and the AI SDK do not export a generic plan model. Map a
+* concrete app or tool result directly into this compositional anatomy.
+*/
+function Plan({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "plan",
+		"data-recipe": "framed-panel",
+		className: cx("plan", className),
+		...props
+	});
+}
+function PlanHeader({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "plan-header",
+		className: cx("plan__header", className),
+		...props
+	});
+}
+function PlanTitle({ className, headingLevel = 3, ref, ...props }) {
+	return /* @__PURE__ */ jsx(`h${headingLevel}`, {
+		ref,
+		"data-slot": "plan-title",
+		className: cx("plan__title", className),
+		...props
+	});
+}
+function PlanDescription({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		"data-slot": "plan-description",
+		className: cx("plan__description", className),
+		...props
+	});
+}
+/** Ordered sequence of PlanStep children. */
+function PlanContent({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		ref,
+		"data-slot": "plan-content",
+		className: cx("plan__content", className),
+		role: "list",
+		...props
+	});
+}
+function PlanStep({ className, status = "pending", ref, ...props }) {
+	return /* @__PURE__ */ jsx(PlanStepContext.Provider, {
+		value: status,
+		children: /* @__PURE__ */ jsx("li", {
+			ref,
+			"data-slot": "plan-step",
+			"data-status": status,
+			"aria-current": status === "active" ? "step" : void 0,
+			className: cx("plan__step", className),
+			...props
+		})
+	});
+}
+const STATUS_LABELS = {
+	active: "Current step",
+	complete: "Completed step",
+	pending: "Pending step"
+};
+function defaultStepIcon(status) {
+	if (status === "complete") return /* @__PURE__ */ jsx(CheckIcon, {});
+	if (status === "active") return /* @__PURE__ */ jsx(ArrowRightIcon, {});
+	return /* @__PURE__ */ jsx(DotIcon, {});
+}
+function PlanStepIndicator({ children, className, label, ref, ...props }) {
+	const status = React.useContext(PlanStepContext);
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-slot": "plan-step-indicator",
+		className: cx("plan__step-indicator", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "plan__step-indicator-visual",
+			"aria-hidden": "true",
+			children: children ?? defaultStepIcon(status)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sigvelo-visually-hidden",
+			children: label ?? STATUS_LABELS[status]
+		})]
+	});
+}
+function PlanStepTitle({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "plan-step-title",
+		className: cx("plan__step-title", className),
+		...props
+	});
+}
+function PlanStepDescription({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		"data-slot": "plan-step-description",
+		className: cx("plan__step-description", className),
+		...props
+	});
+}
+//#endregion
+export { Plan, PlanContent, PlanDescription, PlanHeader, PlanStep, PlanStepDescription, PlanStepIndicator, PlanStepTitle, PlanTitle };

package/dist/components/Popover.d.ts

@@ -9,10 +9,7 @@ interface PopoverProps extends React.ComponentPropsWithoutRef<typeof Popover$1.R
 /**
  * Props for the Popover.Trigger component.
  */
-interface PopoverTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Trigger>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PopoverTriggerProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Trigger> {}
 interface PopoverAnchorProps extends React.HTMLAttributes<HTMLDivElement> {}
 /**
  * Props for the Popover.Portal component.
@@ -21,60 +18,36 @@ interface PopoverPortalProps extends React.ComponentPropsWithoutRef<typeof Popov
 /**
  * Props for the Popover.Backdrop component.
  */
-interface PopoverBackdropProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Backdrop>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PopoverBackdropProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Backdrop> {}
 /**
  * Props for the Popover.Positioner component.
  */
-interface PopoverPositionerProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Positioner>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PopoverPositionerProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Positioner> {}
 /**
  * Props for the Popover.Popup component.
  */
-interface PopoverPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Popup>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PopoverPopupProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Popup> {}
 /**
  * Props for the Popover.Viewport component. Use this only when one popover
  * moves between triggers and its content changes during that transition.
  */
-interface PopoverViewportProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Viewport>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PopoverViewportProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Viewport> {}
 /**
  * Props for the Popover.Arrow component.
  */
-interface PopoverArrowProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Arrow>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PopoverArrowProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Arrow> {}
 /**
  * Props for the Popover.Title component.
  */
-interface PopoverTitleProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Title>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PopoverTitleProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Title> {}
 /**
  * Props for the Popover.Description component.
  */
-interface PopoverDescriptionProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Description>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PopoverDescriptionProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Description> {}
 /**
  * Props for the Popover.Close component.
  */
-interface PopoverCloseProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Close>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PopoverCloseProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Close> {}
 interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 declare function PopoverAnchor({
   className,

package/dist/components/Popover.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
@@ -37,12 +38,12 @@ const PopoverRoot = (props) => {
 		})
 	});
 };
-function PopoverAnchor({ className = "", ref, ...props }) {
+function PopoverAnchor({ className, ref, ...props }) {
 	const anchorRef = React.useContext(PopoverAnchorContext);
 	return /* @__PURE__ */ jsx("div", {
 		ref: (node) => setRefs(node, anchorRef, ref),
 		"data-slot": "popover-anchor",
-		className: ["popover__anchor", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["popover__anchor"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
@@ -50,8 +51,8 @@ function PopoverAnchor({ className = "", ref, ...props }) {
 * Button that toggles the popover visibility.
 * Renders a `<button>` element.
 */
-function PopoverTrigger({ className = "", ref, ...props }) {
-	const classes = ["popover__trigger", className].filter(Boolean).join(" ");
+function PopoverTrigger({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["popover__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
 		ref,
 		"data-slot": "popover-trigger",
@@ -68,12 +69,8 @@ const PopoverPortal = (props) => {
 /**
 * Optional backdrop that appears behind the popover.
 */
-function PopoverBackdrop({ className = "", ref, ...props }) {
-	const classes = [
-		"popover__backdrop",
-		"base-ui-backdrop",
-		className
-	].filter(Boolean).join(" ");
+function PopoverBackdrop({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["popover__backdrop", "base-ui-backdrop"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Popover$1.Backdrop, {
 		ref,
 		"data-slot": "popover-backdrop",
@@ -92,13 +89,9 @@ function PopoverBackdrop({ className = "", ref, ...props }) {
 * </Popover.Positioner>
 * ```
 */
-function PopoverPositioner({ className = "", anchor, ref, ...props }) {
+function PopoverPositioner({ className, anchor, ref, ...props }) {
 	const anchorRef = React.useContext(PopoverAnchorContext);
-	const classes = [
-		"popover__positioner",
-		"base-ui-positioner",
-		className
-	].filter(Boolean).join(" ");
+	const classes = mergeBaseClassName(["popover__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		ref,
 		anchor: anchor ?? anchorRef ?? void 0,
@@ -109,12 +102,8 @@ function PopoverPositioner({ className = "", anchor, ref, ...props }) {
 /**
 * The popup container that holds the popover content.
 */
-function PopoverPopup({ className = "", ref, ...props }) {
-	const classes = [
-		"popover__popup",
-		"base-ui-popup",
-		className
-	].filter(Boolean).join(" ");
+function PopoverPopup({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["popover__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Popover$1.Popup, {
 		ref,
 		"data-slot": "popover-content",
@@ -127,8 +116,8 @@ function PopoverPopup({ className = "", ref, ...props }) {
 * triggers. Pair the adaptive classes from `base-ui-motion.css` with the
 * positioner, popup, and this viewport when that behavior is needed.
 */
-function PopoverViewport({ className = "", ref, ...props }) {
-	const classes = ["popover__viewport", className].filter(Boolean).join(" ");
+function PopoverViewport({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["popover__viewport"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Popover$1.Viewport, {
 		ref,
 		"data-slot": "popover-viewport",
@@ -136,19 +125,19 @@ function PopoverViewport({ className = "", ref, ...props }) {
 		...props
 	});
 }
-function PopoverHeader({ className = "", ref, ...props }) {
+function PopoverHeader({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "popover-header",
-		className: ["popover__header", className].filter(Boolean).join(" "),
+		className: mergeBaseClassName(["popover__header"].filter(Boolean).join(" "), className),
 		...props
 	});
 }
 /**
 * Directional arrow pointing to the trigger element.
 */
-function PopoverArrow({ className = "", ref, ...props }) {
-	const classes = ["popover__arrow", className].filter(Boolean).join(" ");
+function PopoverArrow({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["popover__arrow"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Popover$1.Arrow, {
 		ref,
 		"data-slot": "popover-arrow",
@@ -160,8 +149,8 @@ function PopoverArrow({ className = "", ref, ...props }) {
 * Semantic title for the popover content.
 * Renders an `<h2>` element.
 */
-function PopoverTitle({ className = "", ref, ...props }) {
-	const classes = ["popover__title", className].filter(Boolean).join(" ");
+function PopoverTitle({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["popover__title"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Popover$1.Title, {
 		ref,
 		"data-slot": "popover-title",
@@ -173,8 +162,8 @@ function PopoverTitle({ className = "", ref, ...props }) {
 * Description text for the popover content.
 * Renders a `<p>` element.
 */
-function PopoverDescription({ className = "", ref, ...props }) {
-	const classes = ["popover__description", className].filter(Boolean).join(" ");
+function PopoverDescription({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["popover__description"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Popover$1.Description, {
 		ref,
 		"data-slot": "popover-description",
@@ -185,8 +174,8 @@ function PopoverDescription({ className = "", ref, ...props }) {
 /**
 * Button that closes the popover.
 */
-function PopoverClose({ className = "", ref, ...props }) {
-	const classes = ["popover__close", className].filter(Boolean).join(" ");
+function PopoverClose({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["popover__close"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Popover$1.Close, {
 		ref,
 		"data-slot": "popover-close",

package/dist/components/PreviewCard.d.ts

@@ -9,10 +9,7 @@ interface PreviewCardProps extends React.ComponentPropsWithoutRef<typeof Preview
 /**
  * Props for the PreviewCard.Trigger component.
  */
-interface PreviewCardTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Trigger>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PreviewCardTriggerProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Trigger> {}
 /**
  * Props for the PreviewCard.Portal component.
  */
@@ -20,39 +17,24 @@ interface PreviewCardPortalProps extends React.ComponentPropsWithoutRef<typeof P
 /**
  * Props for the PreviewCard.Backdrop component.
  */
-interface PreviewCardBackdropProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Backdrop>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PreviewCardBackdropProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Backdrop> {}
 /**
  * Props for the PreviewCard.Positioner component.
  */
-interface PreviewCardPositionerProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Positioner>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PreviewCardPositionerProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Positioner> {}
 /**
  * Props for the PreviewCard.Popup component.
  */
-interface PreviewCardPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Popup>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PreviewCardPopupProps extends React.ComponentPropsWithoutRef<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 Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Viewport>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PreviewCardViewportProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Viewport> {}
 /**
  * Props for the PreviewCard.Arrow component.
  */
-interface PreviewCardArrowProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Arrow>, "className"> {
-  /** Additional CSS class names */
-  className?: string;
-}
+interface PreviewCardArrowProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Arrow> {}
 /**
  * Link element that triggers the preview card on hover.
  */