@mcp-b/react-components 0.12.0 → 0.13.0

package/dist/components/AlertDialog.js

@@ -1,5 +1,5 @@
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 //#region src/components/AlertDialog.tsx
 /**
@@ -8,27 +8,28 @@ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 *
 * @example
 * ```tsx
-* <AlertDialog>
-*   <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
-*   <AlertDialogPortal>
-*     <AlertDialogBackdrop />
-*     <AlertDialogPopup>
-*       <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-*       <AlertDialogDescription>
+* <AlertDialog.Root>
+*   <AlertDialog.Trigger>Delete Account</AlertDialog.Trigger>
+*   <AlertDialog.Portal>
+*     <AlertDialog.Backdrop />
+*     <AlertDialog.Viewport>
+*       <AlertDialog.Popup>
+*       <AlertDialog.Title>Are you sure?</AlertDialog.Title>
+*       <AlertDialog.Description>
 *         This action cannot be undone.
-*       </AlertDialogDescription>
+*       </AlertDialog.Description>
 *       <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
-*         <AlertDialogClose>Cancel</AlertDialogClose>
-*         <AlertDialogClose variant="destructive">Delete</AlertDialogClose>
+*         <AlertDialog.Close>Cancel</AlertDialog.Close>
+*         <AlertDialog.Close variant="destructive">Delete</AlertDialog.Close>
 *       </div>
-*     </AlertDialogPopup>
-*   </AlertDialogPortal>
-* </AlertDialog>
+*       </AlertDialog.Popup>
+*     </AlertDialog.Viewport>
+*   </AlertDialog.Portal>
+* </AlertDialog.Root>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 */
-const AlertDialog = AlertDialog$1.Root;
 function AlertDialogTrigger({ className = "", ref, ...props }) {
 	const classes = ["alert-dialog__trigger", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
@@ -38,9 +39,12 @@ function AlertDialogTrigger({ className = "", ref, ...props }) {
 		...props
 	});
 }
-const AlertDialogPortal = AlertDialog$1.Portal;
 function AlertDialogBackdrop({ className = "", ref, ...props }) {
-	const classes = ["alert-dialog__backdrop", className].filter(Boolean).join(" ");
+	const classes = [
+		"alert-dialog__backdrop",
+		"base-ui-backdrop",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
 		ref,
 		"data-slot": "alert-dialog-overlay",
@@ -48,7 +52,15 @@ function AlertDialogBackdrop({ className = "", ref, ...props }) {
 		...props
 	});
 }
-const AlertDialogOverlay = AlertDialogBackdrop;
+function AlertDialogViewport({ className = "", ref, ...props }) {
+	const classes = ["alert-dialog__viewport", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(AlertDialog$1.Viewport, {
+		ref,
+		"data-slot": "alert-dialog-viewport",
+		className: classes,
+		...props
+	});
+}
 function AlertDialogPopup({ size = "md", className = "", ref, ...props }) {
 	const classes = [
 		"alert-dialog__popup",
@@ -62,12 +74,6 @@ function AlertDialogPopup({ size = "md", className = "", ref, ...props }) {
 		...props
 	});
 }
-function AlertDialogContent({ ref, ...props }) {
-	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogPopup, {
-		ref,
-		...props
-	})] });
-}
 function AlertDialogHeader({ className = "", ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -123,19 +129,20 @@ function AlertDialogClose({ variant = "secondary", className = "", ref, ...props
 		...props
 	});
 }
-function AlertDialogAction(props) {
-	return /* @__PURE__ */ jsx(AlertDialogClose, {
-		"data-slot": "alert-dialog-action",
-		variant: "primary",
-		...props
-	});
-}
-function AlertDialogCancel(props) {
-	return /* @__PURE__ */ jsx(AlertDialogClose, {
-		"data-slot": "alert-dialog-cancel",
-		variant: "outline",
-		...props
-	});
-}
+const AlertDialog = {
+	Root: AlertDialog$1.Root,
+	Trigger: AlertDialogTrigger,
+	Portal: AlertDialog$1.Portal,
+	Backdrop: AlertDialogBackdrop,
+	Viewport: AlertDialogViewport,
+	Popup: AlertDialogPopup,
+	Header: AlertDialogHeader,
+	Footer: AlertDialogFooter,
+	Media: AlertDialogMedia,
+	Title: AlertDialogTitle,
+	Description: AlertDialogDescription,
+	Close: AlertDialogClose,
+	createHandle: AlertDialog$1.createHandle
+};
 //#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogBackdrop, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
+export { AlertDialog };

package/dist/components/Artifact.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
+import { r as ButtonProps } from "../Button-FX_hpqxm.js";
 import * as React from "react";
 
 //#region src/components/Artifact.d.ts

package/dist/components/Artifact.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { L as XIcon } from "../icons-D2Q5n5C1.js";
+import { z as XIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { Tooltip } from "./Tooltip.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Artifact.tsx
@@ -91,17 +91,17 @@ function ArtifactAction({ className, label, tooltip, icon, children, ...props })
 		}) : null]
 	});
 	if (!tooltip) return button;
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: tooltip }) }) })] });
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: button }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: tooltip }) }) })] });
 }
 function ArtifactClose({ className, label = "Close", children, ...props }) {
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
 		variant: "ghost",
 		size: "icon",
 		"aria-label": label,
 		className: cx("artifact__close", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(XIcon, {})
-	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: label }) }) })] });
+	}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: label }) }) })] });
 }
 function ArtifactContent({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/components/Autocomplete.js

@@ -30,7 +30,11 @@ function Clear({ className = "", ref, ...props }) {
 	});
 }
 function Positioner({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__positioner", className].filter(Boolean).join(" ");
+	const classes = [
+		"autocomplete__positioner",
+		"base-ui-positioner",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
 		ref,
 		"data-slot": "autocomplete-positioner",
@@ -39,7 +43,11 @@ function Positioner({ className = "", ref, ...props }) {
 	});
 }
 function Popup({ className = "", ref, ...props }) {
-	const classes = ["autocomplete__popup", className].filter(Boolean).join(" ");
+	const classes = [
+		"autocomplete__popup",
+		"base-ui-popup",
+		className
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
 		ref,
 		"data-slot": "autocomplete-content",

package/dist/components/Avatar.d.ts

@@ -122,7 +122,7 @@ declare function AvatarBadge({
  *
  * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
  */
-declare const Avatar: typeof AvatarRoot & {
+declare const Avatar: {
   Root: typeof AvatarRoot;
   Image: typeof AvatarImage;
   Fallback: typeof AvatarFallback;
@@ -131,4 +131,4 @@ declare const Avatar: typeof AvatarRoot & {
   Badge: typeof AvatarBadge;
 };
 //#endregion
-export { Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupCount, AvatarGroupCountProps, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarRoot, AvatarRootProps };
+export { Avatar, AvatarBadgeProps, AvatarFallbackProps, AvatarGroupCountProps, AvatarGroupProps, AvatarImageProps, AvatarRootProps };

package/dist/components/Avatar.js

@@ -106,13 +106,13 @@ function AvatarBadge({ className = "", ref, ...props }) {
 *
 * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
 */
-const Avatar = Object.assign(AvatarRoot, {
+const Avatar = {
 	Root: AvatarRoot,
 	Image: AvatarImage,
 	Fallback: AvatarFallback,
 	Group: AvatarGroup,
 	GroupCount: AvatarGroupCount,
 	Badge: AvatarBadge
-});
+};
 //#endregion
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot };
+export { Avatar };

package/dist/components/Badge.d.ts

@@ -3,9 +3,8 @@ import * as React from "react";
 //#region src/components/Badge.d.ts
 type BadgeVariant = "normal" | "outline" | "ghost" | "link";
 type BadgeColor = "neutral" | "primary" | "success" | "destructive" | "warning";
-type ShadcnBadgeVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
 interface BadgeVariantsOptions {
-  variant?: ShadcnBadgeVariant | BadgeVariant | null;
+  variant?: BadgeVariant | null;
   color?: BadgeColor | null;
   size?: "sm" | "md" | null;
   className?: string;
@@ -16,12 +15,15 @@ declare function badgeVariants({
   size,
   className
 }?: BadgeVariantsOptions): string;
+type SlottableBadgeProps = React.HTMLAttributes<HTMLElement> & {
+  ref?: React.Ref<HTMLElement>;
+};
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
    * The visual rendering style of the badge.
-   * @default 'default'
+   * @default 'normal'
    */
-  variant?: ShadcnBadgeVariant | BadgeVariant;
+  variant?: BadgeVariant;
   /**
    * The semantic color intent of the badge.
    * @default 'primary'
@@ -32,13 +34,8 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
    * @default 'md'
    */
   size?: "sm" | "md";
-  /**
-   * Render the badge styles onto the child element.
-   *
-   * Mirrors shadcn's `asChild` API for link badges and custom elements.
-   * @default false
-   */
-  asChild?: boolean;
+  /** Replaces the default span while preserving badge props and styles. */
+  render?: React.ReactElement<SlottableBadgeProps>;
 }
 /**
  * A badge component for highlighting status, labels, or categories.
@@ -49,7 +46,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  * <Badge color="success">Active</Badge>
  * <Badge color="warning">Pending</Badge>
  * <Badge variant="outline">Info</Badge>
- * <Badge asChild><a href="/docs">Docs</a></Badge>
+ * <Badge render={<a href="/docs" />}>Docs</Badge>
  * ```
  */
 declare function Badge({
@@ -57,7 +54,7 @@ declare function Badge({
   color,
   size,
   className,
-  asChild,
+  render,
   children,
   ref,
   ...props
@@ -65,4 +62,4 @@ declare function Badge({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 //#endregion
-export { Badge, BadgeColor, BadgeProps, BadgeVariant, BadgeVariantsOptions, ShadcnBadgeVariant, badgeVariants };
+export { Badge, BadgeColor, BadgeProps, BadgeVariant, BadgeVariantsOptions, badgeVariants };

package/dist/components/Badge.js

@@ -2,27 +2,18 @@ import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Badge.tsx
-const SHADCN_BADGE_VARIANT = {
-	default: ["normal", "primary"],
-	secondary: ["normal", "neutral"],
-	destructive: ["normal", "destructive"],
-	outline: ["outline", "neutral"],
-	ghost: ["ghost", "neutral"],
-	link: ["link", "primary"]
-};
 const BADGE_VARIANT_DEFAULT_COLOR = {
 	normal: "primary",
 	outline: "neutral",
 	ghost: "neutral",
 	link: "primary"
 };
-function badgeVariants({ variant = "default", color, size = "md", className } = {}) {
-	const badgeVariant = variant ?? "default";
-	const mapped = badgeVariant === "normal" || badgeVariant === "outline" || badgeVariant === "ghost" || badgeVariant === "link" ? [badgeVariant, color ?? BADGE_VARIANT_DEFAULT_COLOR[badgeVariant]] : SHADCN_BADGE_VARIANT[badgeVariant];
+function badgeVariants({ variant = "normal", color, size = "md", className } = {}) {
+	const badgeVariant = variant ?? "normal";
 	return [
 		"badge",
-		`badge--${mapped[0]}`,
-		`badge--${color ?? mapped[1]}`,
+		`badge--${badgeVariant}`,
+		`badge--${color ?? BADGE_VARIANT_DEFAULT_COLOR[badgeVariant]}`,
 		size !== "md" && `badge--${size}`,
 		className
 	].filter(Boolean).join(" ");
@@ -63,23 +54,24 @@ function mergeSlottedBadgeProps(childProps, badgeProps) {
 * <Badge color="success">Active</Badge>
 * <Badge color="warning">Pending</Badge>
 * <Badge variant="outline">Info</Badge>
-* <Badge asChild><a href="/docs">Docs</a></Badge>
+* <Badge render={<a href="/docs" />}>Docs</Badge>
 * ```
 */
-function Badge({ variant = "default", color, size = "md", className, asChild = false, children, ref, ...props }) {
-	const badgeVariant = variant ?? "default";
+function Badge({ variant = "normal", color, size = "md", className, render, children, ref, ...props }) {
+	const badgeVariant = variant ?? "normal";
 	const classes = badgeVariants({
 		variant,
 		color,
 		size,
 		className
 	});
-	if (asChild && React.isValidElement(children)) return React.cloneElement(children, mergeSlottedBadgeProps(children.props, {
+	if (React.isValidElement(render)) return React.cloneElement(render, mergeSlottedBadgeProps(render.props, {
 		...props,
 		ref,
 		className: classes,
 		"data-slot": "badge",
-		"data-variant": badgeVariant
+		"data-variant": badgeVariant,
+		children
 	}));
 	return /* @__PURE__ */ jsx("span", {
 		ref,

package/dist/components/BrowserLiveView.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as SpinnerIcon, x as MaximizeIcon } from "../icons-D2Q5n5C1.js";
+import { N as SpinnerIcon, x as MaximizeIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { Dialog, DialogContent, DialogTitle } from "./Dialog.js";
+import { Dialog } from "./Dialog.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -42,7 +42,6 @@ function EndedState({ title, detail }) {
 function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, ...props }) {
 	const [expired, setExpired] = React.useState(() => receivedAt !== void 0 && receivedAt + source.expiresInMs <= Date.now());
 	const [frameState, setFrameState] = React.useState("loading");
-	const [expandedOpen, setExpandedOpen] = React.useState(false);
 	React.useEffect(() => {
 		const remaining = (receivedAt ?? Date.now()) + source.expiresInMs - Date.now();
 		if (remaining <= 0) {
@@ -99,40 +98,31 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 		...props,
 		className: cx("browser-live-view", className),
 		"data-expired": expired || failed || void 0,
-		children: [
-			view,
-			/* @__PURE__ */ jsx(Button, {
-				variant: "ghost",
-				color: "neutral",
-				size: "icon-xs",
-				className: "browser-live-view__expand",
-				"aria-label": "Expand browser view",
-				onClick: () => setExpandedOpen(true),
-				children: /* @__PURE__ */ jsx(MaximizeIcon, {})
-			}),
-			/* @__PURE__ */ jsx(Dialog, {
-				open: expandedOpen,
-				onOpenChange: setExpandedOpen,
-				children: /* @__PURE__ */ jsxs(DialogContent, {
-					size: "fullscreen",
-					className: "browser-live-view__dialog",
-					children: [/* @__PURE__ */ jsx(DialogTitle, {
-						className: "browser-live-view__dialog-title",
-						children: frameTitle
-					}), /* @__PURE__ */ jsx("div", {
-						className: "browser-live-view__dialog-body",
-						children: live ? /* @__PURE__ */ jsx("iframe", {
-							src: source.url,
-							title: frameTitle,
-							allow: "clipboard-read; clipboard-write"
-						}) : fallback ?? /* @__PURE__ */ jsx(EndedState, {
-							title: failed ? "Live view unavailable" : "Live view ended",
-							detail: pageTitle
-						})
-					})]
+		children: [view, /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Dialog.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			color: "neutral",
+			size: "icon-xs",
+			className: "browser-live-view__expand",
+			"aria-label": "Expand browser view",
+			children: /* @__PURE__ */ jsx(MaximizeIcon, {})
+		}) }), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+			size: "fullscreen",
+			className: "browser-live-view__dialog",
+			children: [/* @__PURE__ */ jsx(Dialog.Title, {
+				className: "browser-live-view__dialog-title",
+				children: frameTitle
+			}), /* @__PURE__ */ jsx("div", {
+				className: "browser-live-view__dialog-body",
+				children: live ? /* @__PURE__ */ jsx("iframe", {
+					src: source.url,
+					title: frameTitle,
+					allow: "clipboard-read; clipboard-write"
+				}) : fallback ?? /* @__PURE__ */ jsx(EndedState, {
+					title: failed ? "Live view unavailable" : "Live view ended",
+					detail: pageTitle
 				})
-			})
-		]
+			})]
+		}) })] })] })]
 	});
 }
 //#endregion

package/dist/components/BrowserReplay.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { D as PlayIcon, T as PauseIcon } from "../icons-D2Q5n5C1.js";
+import { E as PauseIcon, O as PlayIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
+import { Slider } from "./Slider.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Replayer } from "@rrweb/replay";
@@ -161,7 +161,7 @@ function BrowserReplay({ className, events, autoPlay, ref, ...props }) {
 					onClick: handlePlayPause,
 					children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
 				}),
-				/* @__PURE__ */ jsx(Slider, {
+				/* @__PURE__ */ jsx(Slider.Root, {
 					className: "browser-replay__scrubber",
 					min: 0,
 					max: Math.max(duration, 1),
@@ -169,7 +169,7 @@ function BrowserReplay({ className, events, autoPlay, ref, ...props }) {
 					value: Math.min(currentTime, duration),
 					disabled,
 					onValueChange: handleScrub,
-					children: /* @__PURE__ */ jsx(SliderControl, { children: /* @__PURE__ */ jsxs(SliderTrack, { children: [/* @__PURE__ */ jsx(SliderIndicator, {}), /* @__PURE__ */ jsx(SliderThumb, { "aria-label": "Replay position" })] }) })
+					children: /* @__PURE__ */ jsx(Slider.Control, { children: /* @__PURE__ */ jsxs(Slider.Track, { children: [/* @__PURE__ */ jsx(Slider.Indicator, {}), /* @__PURE__ */ jsx(Slider.Thumb, { "aria-label": "Replay position" })] }) })
 				}),
 				/* @__PURE__ */ jsxs("span", {
 					className: "browser-replay__time",

package/dist/components/BrowserRunPanel.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { L as XIcon, M as SpinnerIcon } from "../icons-D2Q5n5C1.js";
+import { N as SpinnerIcon, z as XIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
 import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "./WebPreview.js";

package/dist/components/Button.d.ts

@@ -1,2 +1,2 @@
-import { a as ButtonVariant, c as ShadcnButtonVariant, i as ButtonSize, l as buttonVariants, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as ShadcnButtonSize, t as Button } from "../Button-Ct5I6aTu.js";
-export { Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, ShadcnButtonSize, ShadcnButtonVariant, buttonVariants };
+import { a as ButtonVariant, i as ButtonSize, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as buttonVariants, t as Button } from "../Button-FX_hpqxm.js";
+export { Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, buttonVariants };

package/dist/components/Button.js

@@ -1,34 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/components/Button.tsx
-const SHADCN_BUTTON_VARIANT = {
-	default: ["normal", "primary"],
-	destructive: ["normal", "destructive"],
-	outline: ["outline", "neutral"],
-	secondary: ["normal", "neutral"],
-	ghost: ["ghost", "neutral"],
-	link: ["link", "primary"]
-};
-const SHADCN_BUTTON_SIZE = {
-	default: "md",
-	xs: "xs",
-	sm: "sm",
-	lg: "lg",
-	icon: "icon",
-	"icon-xs": "icon-xs",
-	"icon-sm": "icon-sm",
-	"icon-lg": "icon-lg"
-};
-function buttonVariants({ variant = "default", color, size = "default", className } = {}) {
-	const buttonVariant = variant ?? "default";
-	const mapped = buttonVariant === "normal" || buttonVariant === "outline" || buttonVariant === "ghost" || buttonVariant === "link" ? [buttonVariant, color ?? "primary"] : SHADCN_BUTTON_VARIANT[buttonVariant];
-	const requestedSize = size ?? "default";
-	const buttonSize = requestedSize === "default" ? "md" : SHADCN_BUTTON_SIZE[requestedSize] ?? requestedSize;
+function buttonVariants({ variant = "normal", color = "primary", size = "md", className } = {}) {
 	return [
 		"button",
-		`button--${mapped[0]}`,
-		`button--${color ?? mapped[1]}`,
-		`button--${buttonSize}`,
+		`button--${variant ?? "normal"}`,
+		`button--${color ?? "primary"}`,
+		`button--${size ?? "md"}`,
 		className
 	].filter(Boolean).join(" ");
 }
@@ -37,8 +15,8 @@ function buttonVariants({ variant = "default", color, size = "default", classNam
 *
 * Separates visual style (`variant`) from color intent (`color`) for
 * maximum flexibility. Supports keyboard navigation, focus management, and
-* accessibility out of the box. Keeps shadcn-compatible variant and size
-* aliases for migration, while styling through Sigvelo CSS tokens.
+* accessibility out of the box. Styling uses the design system's canonical
+* visual variant, semantic color, and size axes.
 *
 * @example
 * ```tsx
@@ -49,9 +27,8 @@ function buttonVariants({ variant = "default", color, size = "default", classNam
 * ```
 *
 * @see {@link https://base-ui.com/react/components/button | Base UI Button}
-* @see {@link https://ui.shadcn.com/docs/components/base/button | shadcn/ui Button}
 */
-function Button({ variant = "default", color, size = "default", className, nativeButton, ref, ...props }) {
+function Button({ variant = "normal", color = "primary", size = "md", className, nativeButton, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Button$1, {
 		ref,
 		"data-slot": "button",

package/dist/components/ChainOfThought.d.ts

@@ -1,9 +1,9 @@
-import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
-import { v as IconProps } from "../icons-CbjtbIJK.js";
+import { Collapsible } from "./Collapsible.js";
+import { v as IconProps } from "../icons-CUCz_Sft.js";
 import * as React from "react";
 
 //#region src/components/ChainOfThought.d.ts
-interface ChainOfThoughtProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+interface ChainOfThoughtProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
   className?: string;
 }
 /**
@@ -38,7 +38,7 @@ declare function ChainOfThought({
 }: ChainOfThoughtProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ChainOfThoughtHeaderProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+interface ChainOfThoughtHeaderProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
   className?: string;
 }
 /**
@@ -52,7 +52,7 @@ declare function ChainOfThoughtHeader({
 }: ChainOfThoughtHeaderProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-interface ChainOfThoughtContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+interface ChainOfThoughtContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
   className?: string;
 }
 /**

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
-import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as SpinnerIcon, a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-D2Q5n5C1.js";
+import { N as SpinnerIcon, a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-Ba9THQKz.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx
@@ -30,7 +30,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * ```
 */
 function ChainOfThought({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
 		ref,
 		className: cx("chain-of-thought", className),
 		...props,
@@ -41,12 +41,14 @@ function ChainOfThought({ className, ref, ...props }) {
 * Clickable header row that toggles the reasoning trace.
 */
 function ChainOfThoughtHeader({ className, children = "Chain of Thought", ref, ...props }) {
-	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		ref,
+		"data-slot": "chain-of-thought-trigger",
 		className: cx("chain-of-thought__header", className),
 		...props,
 		unstyled: true,
 		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "chain-of-thought-trigger-icon",
 			className: "chain-of-thought__header-icon",
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
@@ -60,8 +62,9 @@ function ChainOfThoughtHeader({ className, children = "Chain of Thought", ref, .
 * Collapsible panel containing step rows.
 */
 function ChainOfThoughtContent({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		ref,
+		"data-slot": "chain-of-thought-content",
 		className: cx("chain-of-thought__content", className),
 		...props,
 		unstyled: true,

package/dist/components/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as SpinnerIcon } from "../icons-D2Q5n5C1.js";
+import { N as SpinnerIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { u as ModelSelectorLogo } from "../ModelSelector-BB-xB-Es.js";
+import { u as ModelSelectorLogo } from "../ModelSelector-DVgVBdvw.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx
@@ -40,7 +40,7 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 				] })]
 			}), /* @__PURE__ */ jsxs(Button, {
 				type: "button",
-				variant: "default",
+				variant: "normal",
 				color: error ? "destructive" : "primary",
 				size: "lg",
 				className: "chatgpt-sign-in__button",