@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Menubar.js

@@ -0,0 +1,299 @@
+import { c as ChevronRightIcon, o as CheckIcon, u as DotIcon } from "../icons-BsWc8g4E.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
+//#region src/components/Menubar.tsx
+/**
+* Root menubar container.
+*
+* @example
+* ```tsx
+* <Menubar.Root>
+*   <Menubar.Menu>
+*     <Menubar.Trigger>File</Menubar.Trigger>
+*     <Menubar.Portal>
+*       <Menubar.Positioner>
+*         <Menubar.Popup>
+*           <Menubar.Item>New</Menubar.Item>
+*           <Menubar.Item>Open</Menubar.Item>
+*           <Menubar.Item>Save</Menubar.Item>
+*         </Menubar.Popup>
+*       </Menubar.Positioner>
+*     </Menubar.Portal>
+*   </Menubar.Menu>
+* </Menubar.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/menubar | Base UI Menubar}
+*/
+function MenubarRoot({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1, {
+		ref,
+		"data-slot": "menubar",
+		className: ["menubar", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+/**
+* Individual menu within the menubar.
+*/
+const MenubarMenu = (props) => {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+};
+/**
+* Button that opens the menu.
+*/
+function MenubarTrigger({ className = "", ref, ...props }) {
+	const classes = ["menubar__trigger", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		ref,
+		"data-slot": "menubar-trigger",
+		className: classes,
+		...props
+	});
+}
+/**
+* Renders menu content in a portal.
+*/
+const MenubarPortal = (props) => {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "menubar-portal",
+		...props
+	});
+};
+/**
+* Positions the menu popup.
+*/
+function MenubarPositioner({ className = "", ref, ...props }) {
+	const classes = ["menubar__positioner", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu.Positioner, {
+		ref,
+		"data-slot": "menubar-positioner",
+		className: classes,
+		...props
+	});
+}
+/**
+* Container for menu items.
+*/
+function MenubarPopup({ className = "", ref, ...props }) {
+	const classes = ["menubar__popup", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu.Popup, {
+		ref,
+		"data-slot": "menubar-content",
+		className: classes,
+		...props
+	});
+}
+function MenubarContent({ anchor, positionMethod, side, sideOffset = 8, align = "start", alignOffset = -4, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(MenubarPositioner, {
+		anchor,
+		positionMethod,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		arrowPadding,
+		disableAnchorTracking,
+		collisionAvoidance,
+		children: /* @__PURE__ */ jsx(MenubarPopup, { ...props })
+	}) });
+}
+/**
+* Interactive menu item.
+*/
+function MenubarItem({ className = "", inset, variant = "default", ref, ...props }) {
+	const classes = [
+		"menubar__item",
+		inset && "menubar__item--inset",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		ref,
+		"data-slot": "menubar-item",
+		"data-inset": inset || void 0,
+		"data-variant": variant,
+		className: classes,
+		...props
+	});
+}
+/**
+* Visual separator between menu sections.
+*/
+function MenubarSeparator({ className = "", ref, ...props }) {
+	const classes = ["menubar__separator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		ref,
+		"data-slot": "menubar-separator",
+		className: classes,
+		...props
+	});
+}
+/**
+* Groups related menu items.
+*/
+function MenubarGroup({ className = "", ref, ...props }) {
+	const classes = ["menubar__group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		ref,
+		"data-slot": "menubar-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Label for a menu item group.
+*/
+function MenubarGroupLabel({ className = "", inset, ref, ...props }) {
+	const classes = [
+		"menubar__group-label",
+		inset && "menubar__group-label--inset",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		ref,
+		"data-slot": "menubar-label",
+		"data-inset": inset || void 0,
+		className: classes,
+		...props
+	});
+}
+const MenubarLabel = MenubarGroupLabel;
+function MenubarCheckboxItem({ className = "", children, ref, ...props }) {
+	const classes = ["menubar__checkbox-item", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		ref,
+		"data-slot": "menubar-checkbox-item",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+			className: "menubar__indicator",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		}), children]
+	});
+}
+function MenubarRadioGroup({ className = "", ref, ...props }) {
+	const classes = ["menubar__radio-group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		ref,
+		"data-slot": "menubar-radio-group",
+		className: classes,
+		...props
+	});
+}
+function MenubarRadioItem({ className = "", children, ref, ...props }) {
+	const classes = ["menubar__radio-item", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		ref,
+		"data-slot": "menubar-radio-item",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+			className: "menubar__indicator",
+			children: /* @__PURE__ */ jsx(DotIcon, { size: 8 })
+		}), children]
+	});
+}
+function MenubarShortcut({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "menubar-shortcut",
+		className: ["menubar__shortcut", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function MenubarSub(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+}
+function MenubarSubContent({ side = "right", align = "start", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(MenubarContent, {
+		"data-slot": "menubar-sub-content",
+		side,
+		align,
+		sideOffset,
+		...props
+	});
+}
+function MenubarSubTrigger({ className = "", inset, children, ref, ...props }) {
+	const classes = [
+		"menubar__submenu-trigger",
+		inset && "menubar__item--inset",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		ref,
+		"data-slot": "menubar-sub-trigger",
+		"data-inset": inset || void 0,
+		className: classes,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "menubar__submenu-icon" })]
+	});
+}
+/**
+* A horizontal menu bar component typically used for application menus.
+* Provides keyboard navigation and supports nested submenus.
+*
+* @example
+* ```tsx
+* // Application menubar
+* <Menubar.Root>
+*   <Menubar.Menu>
+*     <Menubar.Trigger>File</Menubar.Trigger>
+*     <Menubar.Portal>
+*       <Menubar.Positioner>
+*         <Menubar.Popup>
+*           <Menubar.Item onClick={() => newFile()}>New</Menubar.Item>
+*           <Menubar.Item onClick={() => openFile()}>Open</Menubar.Item>
+*           <Menubar.Separator />
+*           <Menubar.Item onClick={() => saveFile()}>Save</Menubar.Item>
+*         </Menubar.Popup>
+*       </Menubar.Positioner>
+*     </Menubar.Portal>
+*   </Menubar.Menu>
+*   <Menubar.Menu>
+*     <Menubar.Trigger>Edit</Menubar.Trigger>
+*     <Menubar.Portal>
+*       <Menubar.Positioner>
+*         <Menubar.Popup>
+*           <Menubar.Item>Undo</Menubar.Item>
+*           <Menubar.Item>Redo</Menubar.Item>
+*           <Menubar.Separator />
+*           <Menubar.Item>Cut</Menubar.Item>
+*           <Menubar.Item>Copy</Menubar.Item>
+*           <Menubar.Item>Paste</Menubar.Item>
+*         </Menubar.Popup>
+*       </Menubar.Positioner>
+*     </Menubar.Portal>
+*   </Menubar.Menu>
+* </Menubar.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/menubar | Base UI Menubar}
+*/
+const Menubar = Object.assign(MenubarRoot, {
+	Root: MenubarRoot,
+	Menu: MenubarMenu,
+	Trigger: MenubarTrigger,
+	Portal: MenubarPortal,
+	Positioner: MenubarPositioner,
+	Popup: MenubarPopup,
+	Content: MenubarContent,
+	Item: MenubarItem,
+	Separator: MenubarSeparator,
+	Group: MenubarGroup,
+	GroupLabel: MenubarGroupLabel,
+	Label: MenubarLabel,
+	CheckboxItem: MenubarCheckboxItem,
+	RadioGroup: MenubarRadioGroup,
+	RadioItem: MenubarRadioItem,
+	Shortcut: MenubarShortcut,
+	Sub: MenubarSub,
+	SubContent: MenubarSubContent,
+	SubTrigger: MenubarSubTrigger
+});
+//#endregion
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarGroupLabel, MenubarItem, MenubarLabel, MenubarMenu, MenubarPopup, MenubarPortal, MenubarPositioner, MenubarRadioGroup, MenubarRadioItem, MenubarRoot, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };

package/dist/components/Message.d.ts

@@ -0,0 +1,216 @@
+import { r as ButtonProps } from "../Button-QCM8ZKgR.js";
+import * as React from "react";
+import { StreamdownProps } from "streamdown";
+
+//#region src/components/Message.d.ts
+type MessageRole = "user" | "assistant" | "system" | "tool" | (string & {});
+interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The originating role of the message. Controls alignment and styling via
+   * the `data-from` attribute (e.g. user messages align end).
+   */
+  from?: MessageRole;
+}
+/**
+ * A chat message row. Aligns and styles itself based on {@link from}.
+ * Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+ *
+ * Compose with {@link MessageContent} for the bubble, {@link MessageActions}
+ * for toolbar actions, and {@link MessageBranch} for multi-version responses.
+ *
+ * @example
+ * ```tsx
+ * <Message from="assistant">
+ *   <MessageContent>Hello there!</MessageContent>
+ *   <MessageActions>
+ *     <MessageAction label="Copy" tooltip="Copy to clipboard">
+ *       <CopyIcon />
+ *     </MessageAction>
+ *   </MessageActions>
+ * </Message>
+ * ```
+ *
+ * @see {@link https://elements.ai-sdk.dev/components/message | AI Elements Message}
+ */
+declare function Message({
+  className,
+  from,
+  children,
+  ref,
+  ...props
+}: MessageProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * The visible bubble/body of a message. Styled differently based on the
+ * parent {@link Message}'s `from` attribute.
+ */
+declare function MessageContent({
+  className,
+  children,
+  ref,
+  ...props
+}: MessageContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type MessageResponseProps = StreamdownProps;
+declare const MessageResponse: React.MemoExoticComponent<({
+  className,
+  ...props
+}: MessageResponseProps) => React.JSX.Element>;
+interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Horizontal list of action buttons (copy, retry, thumbs-up, etc.) shown
+ * alongside or beneath a message.
+ */
+declare function MessageActions({
+  className,
+  children,
+  ref,
+  ...props
+}: MessageActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MessageActionProps extends Omit<ButtonProps, "children" | "className"> {
+  className?: string;
+  /** Accessible name for the button. Required when no visible text children. */
+  label?: string;
+  /** Optional tooltip text shown on hover/focus. Defaults to {@link label}. */
+  tooltip?: string;
+  children?: React.ReactNode;
+}
+/**
+ * A single icon button inside {@link MessageActions}. Always has an accessible
+ * name; shows a tooltip on hover/focus when {@link tooltip} is set.
+ */
+declare function MessageAction({
+  className,
+  label,
+  tooltip,
+  variant,
+  color,
+  size,
+  children,
+  ref,
+  ...props
+}: MessageActionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface MessageToolbarProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Horizontal container that places children in a row with space between —
+ * typically a {@link MessageBranchSelector} on one side and
+ * {@link MessageActions} on the other.
+ */
+declare function MessageToolbar({
+  className,
+  children,
+  ref,
+  ...props
+}: MessageToolbarProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MessageBranchProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Zero-based index of the initially selected branch. */
+  defaultBranch?: number;
+  /** Controlled branch index. */
+  branch?: number;
+  /** Called when the selected branch changes. */
+  onBranchChange?: (branchIndex: number) => void;
+}
+/**
+ * Container for a message response with multiple versions. Tracks which
+ * branch is active and exposes navigation through {@link MessageBranchSelector},
+ * {@link MessageBranchPrevious}, {@link MessageBranchNext}, and {@link MessageBranchPage}.
+ */
+declare function MessageBranch({
+  className,
+  defaultBranch,
+  branch,
+  onBranchChange,
+  children,
+  ref,
+  ...props
+}: MessageBranchProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MessageBranchContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Renders only the active branch's child. Expects siblings to represent
+ * alternative versions of the same response.
+ */
+declare function MessageBranchContent({
+  className,
+  children,
+  ref,
+  ...props
+}: MessageBranchContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MessageBranchSelectorProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Inline group containing branch navigation controls (previous / page /
+ * next). Hidden automatically when there is only one branch.
+ */
+declare function MessageBranchSelector({
+  className,
+  children,
+  ref,
+  ...props
+}: MessageBranchSelectorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+interface MessageBranchPreviousProps extends Omit<ButtonProps, "children" | "className"> {
+  className?: string;
+  label?: string;
+  children?: React.ReactNode;
+}
+/** Button that selects the previous branch. Disabled at the first branch. */
+declare function MessageBranchPrevious({
+  className,
+  label,
+  variant,
+  color,
+  size,
+  children,
+  onClick,
+  ref,
+  ...props
+}: MessageBranchPreviousProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface MessageBranchNextProps extends Omit<ButtonProps, "children" | "className"> {
+  className?: string;
+  label?: string;
+  children?: React.ReactNode;
+}
+/** Button that selects the next branch. Disabled at the last branch. */
+declare function MessageBranchNext({
+  className,
+  label,
+  variant,
+  color,
+  size,
+  children,
+  onClick,
+  ref,
+  ...props
+}: MessageBranchNextProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface MessageBranchPageProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Customize the displayed text. Defaults to `{index} / {count}`. */
+  format?: (currentIndex: number, total: number) => React.ReactNode;
+}
+/** Page indicator (e.g. "1 / 3") for the current branch selection. */
+declare function MessageBranchPage({
+  className,
+  format,
+  ref,
+  ...props
+}: MessageBranchPageProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { Message, MessageAction, MessageActionProps, MessageActions, MessageActionsProps, MessageBranch, MessageBranchContent, MessageBranchContentProps, MessageBranchNext, MessageBranchNextProps, MessageBranchPage, MessageBranchPageProps, MessageBranchPrevious, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelector, MessageBranchSelectorProps, MessageContent, MessageContentProps, MessageProps, MessageResponse, MessageResponseProps, MessageRole, MessageToolbar, MessageToolbarProps };