@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/Toolbar.d.ts

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+
+//#region src/components/Toolbar.d.ts
+/**
+ * Props for the Toolbar.Root component.
+ */
+interface ToolbarRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Root>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toolbar.Button component.
+ */
+interface ToolbarButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Button>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toolbar.Link component.
+ */
+interface ToolbarLinkProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Link>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toolbar.Group component.
+ */
+interface ToolbarGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Group>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toolbar.Separator component.
+ */
+interface ToolbarSeparatorProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Separator>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toolbar.Input component.
+ */
+interface ToolbarInputProps extends Omit<React.ComponentPropsWithoutRef<typeof Toolbar$1.Input>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Container for grouping toolbar buttons and controls.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar.Root>
+ *   <Toolbar.Button>Bold</Toolbar.Button>
+ *   <Toolbar.Button>Italic</Toolbar.Button>
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button>Align Left</Toolbar.Button>
+ * </Toolbar.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar}
+ */
+declare function ToolbarRoot({
+  className,
+  ref,
+  ...props
+}: ToolbarRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A clickable button within the toolbar.
+ */
+declare function ToolbarButton({
+  className,
+  ref,
+  ...props
+}: ToolbarButtonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * A link element within the toolbar.
+ */
+declare function ToolbarLink({
+  className,
+  ref,
+  ...props
+}: ToolbarLinkProps & {
+  ref?: React.Ref<HTMLAnchorElement>;
+}): React.JSX.Element;
+/**
+ * Groups toolbar items together.
+ */
+declare function ToolbarGroup({
+  className,
+  ref,
+  ...props
+}: ToolbarGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Visual separator between toolbar sections.
+ */
+declare function ToolbarSeparator({
+  className,
+  ref,
+  ...props
+}: ToolbarSeparatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Input element within the toolbar.
+ */
+declare function ToolbarInput({
+  className,
+  ref,
+  ...props
+}: ToolbarInputProps & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.JSX.Element;
+/**
+ * A container for grouping buttons and controls.
+ * Provides keyboard navigation between items.
+ *
+ * @example
+ * ```tsx
+ * // Text formatting toolbar
+ * <Toolbar.Root>
+ *   <Toolbar.Group>
+ *     <Toolbar.Button>Bold</Toolbar.Button>
+ *     <Toolbar.Button>Italic</Toolbar.Button>
+ *     <Toolbar.Button>Underline</Toolbar.Button>
+ *   </Toolbar.Group>
+ *   <Toolbar.Separator />
+ *   <Toolbar.Group>
+ *     <Toolbar.Button>Left</Toolbar.Button>
+ *     <Toolbar.Button>Center</Toolbar.Button>
+ *     <Toolbar.Button>Right</Toolbar.Button>
+ *   </Toolbar.Group>
+ * </Toolbar.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Vertical toolbar
+ * <Toolbar.Root orientation="vertical">
+ *   <Toolbar.Button>Item 1</Toolbar.Button>
+ *   <Toolbar.Button>Item 2</Toolbar.Button>
+ *   <Toolbar.Button>Item 3</Toolbar.Button>
+ * </Toolbar.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar}
+ */
+declare const Toolbar: {
+  Root: typeof ToolbarRoot;
+  Button: typeof ToolbarButton;
+  Link: typeof ToolbarLink;
+  Group: typeof ToolbarGroup;
+  Separator: typeof ToolbarSeparator;
+  Input: typeof ToolbarInput;
+};
+//#endregion
+export { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarInputProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps };

package/dist/components/Toolbar.js

@@ -0,0 +1,126 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+//#region src/components/Toolbar.tsx
+/**
+* Container for grouping toolbar buttons and controls.
+*
+* @example
+* ```tsx
+* <Toolbar.Root>
+*   <Toolbar.Button>Bold</Toolbar.Button>
+*   <Toolbar.Button>Italic</Toolbar.Button>
+*   <Toolbar.Separator />
+*   <Toolbar.Button>Align Left</Toolbar.Button>
+* </Toolbar.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar}
+*/
+function ToolbarRoot({ className = "", ref, ...props }) {
+	const classes = ["toolbar", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toolbar$1.Root, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* A clickable button within the toolbar.
+*/
+function ToolbarButton({ className = "", ref, ...props }) {
+	const classes = ["toolbar__button", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toolbar$1.Button, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* A link element within the toolbar.
+*/
+function ToolbarLink({ className = "", ref, ...props }) {
+	const classes = ["toolbar__link", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toolbar$1.Link, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Groups toolbar items together.
+*/
+function ToolbarGroup({ className = "", ref, ...props }) {
+	const classes = ["toolbar__group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toolbar$1.Group, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Visual separator between toolbar sections.
+*/
+function ToolbarSeparator({ className = "", ref, ...props }) {
+	const classes = ["toolbar__separator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toolbar$1.Separator, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Input element within the toolbar.
+*/
+function ToolbarInput({ className = "", ref, ...props }) {
+	const classes = ["toolbar__input", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toolbar$1.Input, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* A container for grouping buttons and controls.
+* Provides keyboard navigation between items.
+*
+* @example
+* ```tsx
+* // Text formatting toolbar
+* <Toolbar.Root>
+*   <Toolbar.Group>
+*     <Toolbar.Button>Bold</Toolbar.Button>
+*     <Toolbar.Button>Italic</Toolbar.Button>
+*     <Toolbar.Button>Underline</Toolbar.Button>
+*   </Toolbar.Group>
+*   <Toolbar.Separator />
+*   <Toolbar.Group>
+*     <Toolbar.Button>Left</Toolbar.Button>
+*     <Toolbar.Button>Center</Toolbar.Button>
+*     <Toolbar.Button>Right</Toolbar.Button>
+*   </Toolbar.Group>
+* </Toolbar.Root>
+* ```
+*
+* @example
+* ```tsx
+* // Vertical toolbar
+* <Toolbar.Root orientation="vertical">
+*   <Toolbar.Button>Item 1</Toolbar.Button>
+*   <Toolbar.Button>Item 2</Toolbar.Button>
+*   <Toolbar.Button>Item 3</Toolbar.Button>
+* </Toolbar.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar}
+*/
+const Toolbar = {
+	Root: ToolbarRoot,
+	Button: ToolbarButton,
+	Link: ToolbarLink,
+	Group: ToolbarGroup,
+	Separator: ToolbarSeparator,
+	Input: ToolbarInput
+};
+//#endregion
+export { Toolbar };

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+
+//#region src/components/Tooltip.d.ts
+interface TooltipProps extends Tooltip$1.Root.Props {}
+interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {}
+interface TooltipPortalProps extends Tooltip$1.Portal.Props {}
+interface TooltipPositionerProps extends Tooltip$1.Positioner.Props {}
+interface TooltipProviderProps extends Tooltip$1.Provider.Props {
+  delayDuration?: number;
+}
+interface TooltipPopupProps extends Omit<Tooltip$1.Popup.Props, "className"> {
+  className?: string;
+}
+interface TooltipContentProps extends TooltipPopupProps {
+  side?: TooltipPositionerProps["side"];
+  sideOffset?: TooltipPositionerProps["sideOffset"];
+  align?: TooltipPositionerProps["align"];
+  alignOffset?: TooltipPositionerProps["alignOffset"];
+}
+interface TooltipArrowProps extends Omit<Tooltip$1.Arrow.Props, "className"> {
+  className?: string;
+}
+/**
+ * A tooltip component for displaying helpful information on hover.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button>Hover me</Button>
+ *   </TooltipTrigger>
+ *   <TooltipPortal>
+ *     <TooltipPositioner>
+ *       <TooltipPopup>
+ *         <TooltipArrow />
+ *         Helpful information
+ *       </TooltipPopup>
+ *     </TooltipPositioner>
+ *   </TooltipPortal>
+ * </Tooltip>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/tooltip | Base UI Tooltip}
+ */
+declare const Tooltip: <Payload>(props: Tooltip$1.Root.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
+declare function TooltipProvider({
+  delayDuration,
+  delay,
+  ...props
+}: TooltipProviderProps): React.JSX.Element;
+declare function TooltipTrigger(props: TooltipTriggerProps): React.JSX.Element;
+declare const TooltipPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").TooltipPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TooltipPositioner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").TooltipPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function TooltipPopup({
+  className,
+  ref,
+  ...props
+}: TooltipPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function TooltipContent({
+  align,
+  alignOffset,
+  children,
+  side,
+  sideOffset,
+  ref,
+  ...props
+}: TooltipContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function TooltipArrow({
+  className,
+  ref,
+  ...props
+}: TooltipArrowProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { Tooltip, TooltipArrow, TooltipArrowProps, TooltipContent, TooltipContentProps, TooltipPopup, TooltipPopupProps, TooltipPortal, TooltipPortalProps, TooltipPositioner, TooltipPositionerProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps };

package/dist/components/Tooltip.js

@@ -0,0 +1,74 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+//#region src/components/Tooltip.tsx
+/**
+* A tooltip component for displaying helpful information on hover.
+*
+* @example
+* ```tsx
+* <Tooltip>
+*   <TooltipTrigger>
+*     <Button>Hover me</Button>
+*   </TooltipTrigger>
+*   <TooltipPortal>
+*     <TooltipPositioner>
+*       <TooltipPopup>
+*         <TooltipArrow />
+*         Helpful information
+*       </TooltipPopup>
+*     </TooltipPositioner>
+*   </TooltipPortal>
+* </Tooltip>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/tooltip | Base UI Tooltip}
+*/
+const Tooltip = Tooltip$1.Root;
+function TooltipProvider({ delayDuration = 0, delay, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
+		delay: delay ?? delayDuration,
+		...props
+	});
+}
+function TooltipTrigger(props) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+const TooltipPortal = Tooltip$1.Portal;
+const TooltipPositioner = Tooltip$1.Positioner;
+function TooltipPopup({ className = "", ref, ...props }) {
+	const classes = ["tooltip__popup", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Tooltip$1.Popup, {
+		ref,
+		"data-slot": "tooltip-content",
+		className: classes,
+		...props
+	});
+}
+function TooltipContent({ align, alignOffset, children, side, sideOffset = 0, ref, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsxs(TooltipPopup, {
+			ref,
+			...props,
+			children: [children, /* @__PURE__ */ jsx(TooltipArrow, {})]
+		})
+	}) });
+}
+function TooltipArrow({ className = "", ref, ...props }) {
+	const classes = ["tooltip__arrow", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
+		ref,
+		"data-slot": "tooltip-arrow",
+		className: classes,
+		...props
+	});
+}
+//#endregion
+export { Tooltip, TooltipArrow, TooltipContent, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger };

package/dist/components/WebPreview.d.ts

@@ -0,0 +1,143 @@
+import { r as ButtonProps } from "../Button-QCM8ZKgR.js";
+import * as React from "react";
+
+//#region src/components/WebPreview.d.ts
+interface WebPreviewContextValue {
+  url: string;
+  setUrl: (next: string) => void;
+  consoleOpen: boolean;
+  setConsoleOpen: (open: boolean) => void;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  goBack: () => void;
+  goForward: () => void;
+  reload: () => void;
+  reloadToken: number;
+}
+interface WebPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Initial URL for uncontrolled preview history. */
+  defaultUrl?: string;
+  /** Controlled URL pushed into preview history when it changes. */
+  url?: string;
+  /** Called when the displayed URL changes. */
+  onUrlChange?: (url: string) => void;
+  /** Additional class names for layout only; do not override iframe sandboxing from apps. */
+  className?: string;
+  /** Navigation, body, and optional console slots. */
+  children?: React.ReactNode;
+}
+/**
+ * An iframe preview with a navigation bar, URL input, and optional console
+ * panel. Tracks browsing history internally so back/forward buttons work
+ * without depending on the iframe's own history.
+ *
+ * Built internally for agent/browser preview surfaces. Use it to display a
+ * known URL with local navigation controls. Do not use it for trusted app
+ * embedding that needs custom iframe permissions; add those explicitly here.
+ *
+ * Sigvelo changes: composes Button, Input, ScrollArea, Tooltip, and Badge;
+ * keeps a conservative sandbox; maps navigation and console UI to Sigvelo CSS
+ * tokens.
+ *
+ * The iframe has a fixed title and sandbox. Navigation buttons provide
+ * accessible labels and tooltips. Add new permissions or console behaviors
+ * here when multiple apps need them.
+ *
+ * @example
+ * ```tsx
+ * <WebPreview defaultUrl="https://example.com">
+ *   <WebPreviewNavigation>
+ *     <WebPreviewNavigationButton action="back" />
+ *     <WebPreviewNavigationButton action="forward" />
+ *     <WebPreviewNavigationButton action="reload" />
+ *     <WebPreviewUrl />
+ *   </WebPreviewNavigation>
+ *   <WebPreviewBody />
+ *   <WebPreviewConsole logs={logs} />
+ * </WebPreview>
+ * ```
+ */
+declare function WebPreview({
+  className,
+  defaultUrl,
+  url: controlledUrl,
+  onUrlChange,
+  children,
+  ref,
+  ...props
+}: WebPreviewProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface WebPreviewNavigationProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function WebPreviewNavigation({
+  className,
+  children,
+  ref,
+  ...props
+}: WebPreviewNavigationProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface WebPreviewNavigationButtonProps extends Omit<ButtonProps, "variant" | "size" | "color" | "className" | "onClick"> {
+  className?: string;
+  action?: "back" | "forward" | "reload";
+  label?: string;
+  tooltip?: string;
+  children?: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare function WebPreviewNavigationButton({
+  className,
+  action,
+  label,
+  tooltip,
+  children,
+  onClick,
+  ...props
+}: WebPreviewNavigationButtonProps): React.JSX.Element;
+interface WebPreviewUrlProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+declare function WebPreviewUrl({
+  className,
+  placeholder,
+  value,
+  onChange,
+  onKeyDown,
+  ref,
+  ...props
+}: WebPreviewUrlProps & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.JSX.Element;
+interface WebPreviewBodyProps extends Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "loading"> {
+  /** Optional placeholder shown while the iframe has no src. */
+  loading?: React.ReactNode;
+  interactive?: boolean;
+}
+declare function WebPreviewBody({
+  className,
+  loading,
+  src,
+  ref,
+  interactive,
+  ...props
+}: WebPreviewBodyProps & {
+  ref?: React.Ref<HTMLIFrameElement>;
+}): React.JSX.Element;
+type ConsoleLogLevel = "log" | "info" | "warn" | "error";
+interface ConsoleLog {
+  level: ConsoleLogLevel;
+  message: string;
+  timestamp: Date;
+}
+interface WebPreviewConsoleProps extends React.HTMLAttributes<HTMLDivElement> {
+  logs?: ConsoleLog[];
+}
+declare function WebPreviewConsole({
+  className,
+  logs,
+  children,
+  ref,
+  ...props
+}: WebPreviewConsoleProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { ConsoleLog, ConsoleLogLevel, WebPreview, WebPreviewBody, WebPreviewBodyProps, WebPreviewConsole, WebPreviewConsoleProps, WebPreviewContextValue, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewProps, WebPreviewUrl, WebPreviewUrlProps };