@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/AlertDialog.d.ts

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+
+//#region src/components/AlertDialog.d.ts
+interface AlertDialogProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Root> {}
+interface AlertDialogTriggerProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Trigger>, "className"> {
+  className?: string;
+}
+interface AlertDialogBackdropProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Backdrop>, "className"> {
+  className?: string;
+}
+interface AlertDialogPopupProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Popup>, "className"> {
+  className?: string;
+  /**
+   * The size of the alert dialog.
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+}
+interface AlertDialogTitleProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Title>, "className"> {
+  className?: string;
+}
+interface AlertDialogDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Description>, "className"> {
+  className?: string;
+}
+interface AlertDialogCloseProps extends Omit<React.ComponentPropsWithRef<typeof AlertDialog$1.Close>, "className"> {
+  className?: string;
+  /**
+   * The variant of the close button.
+   * @default 'secondary'
+   */
+  variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost";
+}
+type AlertDialogOverlayProps = AlertDialogBackdropProps;
+type AlertDialogContentProps = AlertDialogPopupProps;
+type AlertDialogActionProps = AlertDialogCloseProps;
+type AlertDialogCancelProps = AlertDialogCloseProps;
+interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface AlertDialogMediaProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * An alert dialog component for important confirmations and warnings.
+ * Unlike regular dialogs, alert dialogs require explicit user action to dismiss.
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog>
+ *   <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
+ *   <AlertDialogPortal>
+ *     <AlertDialogBackdrop />
+ *     <AlertDialogPopup>
+ *       <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+ *       <AlertDialogDescription>
+ *         This action cannot be undone.
+ *       </AlertDialogDescription>
+ *       <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
+ *         <AlertDialogClose>Cancel</AlertDialogClose>
+ *         <AlertDialogClose variant="destructive">Delete</AlertDialogClose>
+ *       </div>
+ *     </AlertDialogPopup>
+ *   </AlertDialogPortal>
+ * </AlertDialog>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
+ */
+declare const AlertDialog: typeof AlertDialog$1.Root;
+declare function AlertDialogTrigger({
+  className,
+  ref,
+  ...props
+}: AlertDialogTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare const AlertDialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function AlertDialogBackdrop({
+  className,
+  ref,
+  ...props
+}: AlertDialogBackdropProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const AlertDialogOverlay: typeof AlertDialogBackdrop;
+declare function AlertDialogPopup({
+  size,
+  className,
+  ref,
+  ...props
+}: AlertDialogPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function AlertDialogContent({
+  ref,
+  ...props
+}: AlertDialogContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function AlertDialogHeader({
+  className,
+  ref,
+  ...props
+}: AlertDialogHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function AlertDialogFooter({
+  className,
+  ref,
+  ...props
+}: AlertDialogFooterProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function AlertDialogMedia({
+  className,
+  ref,
+  ...props
+}: AlertDialogMediaProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function AlertDialogTitle({
+  className,
+  ref,
+  ...props
+}: AlertDialogTitleProps & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}): React.JSX.Element;
+declare function AlertDialogDescription({
+  className,
+  ref,
+  ...props
+}: AlertDialogDescriptionProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}): React.JSX.Element;
+declare function AlertDialogClose({
+  variant,
+  className,
+  ref,
+  ...props
+}: AlertDialogCloseProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare function AlertDialogAction(props: AlertDialogActionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare function AlertDialogCancel(props: AlertDialogCancelProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+//#endregion
+export { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogBackdrop, AlertDialogBackdropProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogClose, AlertDialogCloseProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogMedia, AlertDialogMediaProps, AlertDialogOverlay, AlertDialogOverlayProps, AlertDialogPopup, AlertDialogPopupProps, AlertDialogPortal, AlertDialogProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps };

package/dist/components/AlertDialog.js

@@ -0,0 +1,141 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/components/AlertDialog.tsx
+/**
+* An alert dialog component for important confirmations and warnings.
+* Unlike regular dialogs, alert dialogs require explicit user action to dismiss.
+*
+* @example
+* ```tsx
+* <AlertDialog>
+*   <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
+*   <AlertDialogPortal>
+*     <AlertDialogBackdrop />
+*     <AlertDialogPopup>
+*       <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+*       <AlertDialogDescription>
+*         This action cannot be undone.
+*       </AlertDialogDescription>
+*       <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
+*         <AlertDialogClose>Cancel</AlertDialogClose>
+*         <AlertDialogClose variant="destructive">Delete</AlertDialogClose>
+*       </div>
+*     </AlertDialogPopup>
+*   </AlertDialogPortal>
+* </AlertDialog>
+* ```
+*
+* @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, {
+		ref,
+		"data-slot": "alert-dialog-trigger",
+		className: classes,
+		...props
+	});
+}
+const AlertDialogPortal = AlertDialog$1.Portal;
+function AlertDialogBackdrop({ className = "", ref, ...props }) {
+	const classes = ["alert-dialog__backdrop", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
+		ref,
+		"data-slot": "alert-dialog-overlay",
+		className: classes,
+		...props
+	});
+}
+const AlertDialogOverlay = AlertDialogBackdrop;
+function AlertDialogPopup({ size = "md", className = "", ref, ...props }) {
+	const classes = [
+		"alert-dialog__popup",
+		size !== "md" && `alert-dialog__popup--${size}`,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+		ref,
+		"data-slot": "alert-dialog-content",
+		className: classes,
+		...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,
+		"data-slot": "alert-dialog-header",
+		className: ["alert-dialog__header", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function AlertDialogFooter({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "alert-dialog-footer",
+		className: ["alert-dialog__footer", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function AlertDialogMedia({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "alert-dialog-media",
+		className: ["alert-dialog__media", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function AlertDialogTitle({ className = "", ref, ...props }) {
+	const classes = ["alert-dialog__title", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		ref,
+		"data-slot": "alert-dialog-title",
+		className: classes,
+		...props
+	});
+}
+function AlertDialogDescription({ className = "", ref, ...props }) {
+	const classes = ["alert-dialog__description", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		ref,
+		"data-slot": "alert-dialog-description",
+		className: classes,
+		...props
+	});
+}
+function AlertDialogClose({ variant = "secondary", className = "", ref, ...props }) {
+	const classes = [
+		"alert-dialog__action",
+		`alert-dialog__action--${variant}`,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+		ref,
+		"data-slot": "alert-dialog-close",
+		className: classes,
+		...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
+	});
+}
+//#endregion
+export { AlertDialog, AlertDialogAction, AlertDialogBackdrop, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/Artifact.d.ts

@@ -0,0 +1,128 @@
+import { r as ButtonProps } from "../Button-QCM8ZKgR.js";
+import * as React from "react";
+
+//#region src/components/Artifact.d.ts
+interface ArtifactProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional class names for layout only; do not restyle artifact internals from apps. */
+  className?: string;
+  /** Header and content slots, usually composed from Artifact subcomponents. */
+  children?: React.ReactNode;
+}
+/**
+ * A container for generated content (code, documents, outputs) with a header
+ * containing a title, description, and action buttons.
+ *
+ * Built internally for Sigvelo agent outputs. Use it for generated artifacts
+ * that need a title, optional description, content body, and compact actions.
+ * Do not use it as a page section or generic card; use Card or page layout
+ * instead.
+ *
+ * Styling is mapped to Sigvelo surface, border, spacing, radius, typography,
+ * and focus tokens. Extend with composition, action props, or a shared variant
+ * here when multiple apps need the same behavior. Avoid overriding nested
+ * `.artifact__*` selectors from app CSS.
+ *
+ * @example
+ * ```tsx
+ * <Artifact>
+ *   <ArtifactHeader>
+ *     <div>
+ *       <ArtifactTitle>Project report</ArtifactTitle>
+ *       <ArtifactDescription>Generated from Q1 data</ArtifactDescription>
+ *     </div>
+ *     <ArtifactActions>
+ *       <ArtifactAction label="Copy" tooltip="Copy to clipboard" icon={<CopyIcon />} />
+ *       <ArtifactClose onClick={close} />
+ *     </ArtifactActions>
+ *   </ArtifactHeader>
+ *   <ArtifactContent>…</ArtifactContent>
+ * </Artifact>
+ * ```
+ */
+declare function Artifact({
+  className,
+  children,
+  ref,
+  ...props
+}: ArtifactProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ArtifactHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ArtifactHeader({
+  className,
+  children,
+  ref,
+  ...props
+}: ArtifactHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ArtifactTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+declare function ArtifactTitle({
+  className,
+  children,
+  ref,
+  ...props
+}: ArtifactTitleProps & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}): React.JSX.Element;
+interface ArtifactDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+declare function ArtifactDescription({
+  className,
+  children,
+  ref,
+  ...props
+}: ArtifactDescriptionProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}): React.JSX.Element;
+interface ArtifactActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ArtifactActions({
+  className,
+  children,
+  ref,
+  ...props
+}: ArtifactActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ArtifactActionProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className"> {
+  className?: string;
+  /** Accessible label for the button. */
+  label?: string;
+  /** Tooltip text shown on hover. Defaults to label. */
+  tooltip?: string;
+  /** The icon to render inside the button. */
+  icon?: React.ReactNode | React.ComponentType<{
+    className?: string;
+  }>;
+  children?: React.ReactNode;
+}
+declare function ArtifactAction({
+  className,
+  label,
+  tooltip,
+  icon,
+  children,
+  ...props
+}: ArtifactActionProps): React.JSX.Element;
+interface ArtifactCloseProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className"> {
+  className?: string;
+  /** Accessible label for the close button. */
+  label?: string;
+  children?: React.ReactNode;
+}
+declare function ArtifactClose({
+  className,
+  label,
+  children,
+  ...props
+}: ArtifactCloseProps): React.JSX.Element;
+interface ArtifactContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ArtifactContent({
+  className,
+  children,
+  ref,
+  ...props
+}: ArtifactContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { Artifact, ArtifactAction, ArtifactActionProps, ArtifactActions, ArtifactActionsProps, ArtifactClose, ArtifactCloseProps, ArtifactContent, ArtifactContentProps, ArtifactDescription, ArtifactDescriptionProps, ArtifactHeader, ArtifactHeaderProps, ArtifactProps, ArtifactTitle, ArtifactTitleProps };

package/dist/components/Artifact.js

@@ -0,0 +1,115 @@
+import { O as XIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Artifact.tsx
+/**
+* A container for generated content (code, documents, outputs) with a header
+* containing a title, description, and action buttons.
+*
+* Built internally for Sigvelo agent outputs. Use it for generated artifacts
+* that need a title, optional description, content body, and compact actions.
+* Do not use it as a page section or generic card; use Card or page layout
+* instead.
+*
+* Styling is mapped to Sigvelo surface, border, spacing, radius, typography,
+* and focus tokens. Extend with composition, action props, or a shared variant
+* here when multiple apps need the same behavior. Avoid overriding nested
+* `.artifact__*` selectors from app CSS.
+*
+* @example
+* ```tsx
+* <Artifact>
+*   <ArtifactHeader>
+*     <div>
+*       <ArtifactTitle>Project report</ArtifactTitle>
+*       <ArtifactDescription>Generated from Q1 data</ArtifactDescription>
+*     </div>
+*     <ArtifactActions>
+*       <ArtifactAction label="Copy" tooltip="Copy to clipboard" icon={<CopyIcon />} />
+*       <ArtifactClose onClick={close} />
+*     </ArtifactActions>
+*   </ArtifactHeader>
+*   <ArtifactContent>…</ArtifactContent>
+* </Artifact>
+* ```
+*/
+function Artifact({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("artifact", className),
+		...props,
+		children
+	});
+}
+function ArtifactHeader({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("artifact__header", className),
+		...props,
+		children
+	});
+}
+function ArtifactTitle({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		ref,
+		className: cx("artifact__title", className),
+		...props,
+		children
+	});
+}
+function ArtifactDescription({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: cx("artifact__description", className),
+		...props,
+		children
+	});
+}
+function ArtifactActions({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("artifact__actions", className),
+		...props,
+		children
+	});
+}
+function ArtifactAction({ className, label, tooltip, icon, children, ...props }) {
+	const Icon = typeof icon === "function" ? icon : null;
+	const accessibleLabel = label ?? tooltip;
+	const button = /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "icon",
+		"aria-label": accessibleLabel,
+		className: cx("artifact__action", className),
+		...props,
+		children: [Icon ? /* @__PURE__ */ jsx(Icon, {}) : icon ?? children, accessibleLabel ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: accessibleLabel
+		}) : 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 }) }) })] });
+}
+function ArtifactClose({ className, label = "Close", children, ...props }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { 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 }) }) })] });
+}
+function ArtifactContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("artifact__content", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { Artifact, ArtifactAction, ArtifactActions, ArtifactClose, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle };