@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/NaniteScene.js

@@ -0,0 +1,405 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/NaniteScene.tsx
+const BODY_COLORS = [
+	"#0f7b6c",
+	"#2d5a8a",
+	"#7eb8c9"
+];
+const HAT_SHELL = "#d4a636";
+const HAT_BRIM = "#c49525";
+const HAT_BULB = "#f0d060";
+const EYE_FILL = "#0d1520";
+const EYE_HIGHLIGHT = "rgba(255,255,255,0.45)";
+const SCREEN_BG = "#1e2d3d";
+const SCREEN_BORDER = "#3a5068";
+const SCREEN_LINE = "#2e3d50";
+const SCREEN_ICON_WARN = "#c87832";
+const GLASS_STROKE = "#8ba7b8";
+const BADGE_SUCCESS = "#0f7b6c";
+const BADGE_FAIL = "#dc2626";
+const TRIO_XS = [
+	40,
+	100,
+	160
+];
+/**
+* Decorative Nanites illustration used in setup, status, and empty states.
+* Pass a title when the illustration communicates state; otherwise it remains
+* hidden from assistive technology.
+*
+* Built internally for Sigvelo onboarding and agent-connection surfaces. Use
+* it as supporting status art, not as a control or primary content.
+*
+* Styling consumes Nanite scene CSS animation hooks plus Sigvelo layout context.
+* Respect reduced-motion CSS when adding animation. Add variants here when a
+* state is reused across apps; keep one-off art local to the app.
+*
+* @example
+* ```tsx
+* <NaniteScene variant="working" mode="solo" title="Agent is checking GitHub" />
+* ```
+*/
+function NaniteScene({ variant, mode = "trio", className, title }) {
+	const wrapperClass = [
+		"nanite-scene",
+		`nanite-scene--${variant}`,
+		`nanite-scene--${mode}`,
+		className
+	].filter(Boolean).join(" ");
+	const ariaProps = title ? {
+		role: "img",
+		"aria-label": title
+	} : { "aria-hidden": true };
+	if (mode === "trio") {
+		const centerY = 34;
+		return /* @__PURE__ */ jsx("div", {
+			className: wrapperClass,
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 200 68",
+				width: "200",
+				height: "68",
+				preserveAspectRatio: "xMidYMid meet",
+				fill: "none",
+				...ariaProps,
+				children: [title ? /* @__PURE__ */ jsx("title", { children: title }) : null, TRIO_XS.map((x, index) => /* @__PURE__ */ jsx(Nanite, {
+					index,
+					cx: x,
+					cy: centerY,
+					scale: 1
+				}, x))]
+			})
+		});
+	}
+	const showBrowser = variant !== "idle" && variant !== "helmet";
+	const showGlass = variant === "working";
+	const showSuccessBadge = variant === "celebrating";
+	const showFailBadge = variant === "concerned";
+	const soloViewBox = showBrowser ? "0 0 120 56" : "0 0 52 56";
+	const soloWidth = showBrowser ? 120 : 52;
+	const naniteX = 24;
+	const naniteScale = .95;
+	const centerY = 30;
+	const screenCx = 82;
+	const screenCy = 30;
+	return /* @__PURE__ */ jsx("div", {
+		className: wrapperClass,
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: soloViewBox,
+			width: soloWidth,
+			height: "56",
+			preserveAspectRatio: "xMidYMid meet",
+			fill: "none",
+			...ariaProps,
+			children: [
+				title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+				/* @__PURE__ */ jsx(Nanite, {
+					index: 0,
+					cx: naniteX,
+					cy: centerY,
+					scale: naniteScale
+				}),
+				showBrowser ? /* @__PURE__ */ jsxs("g", {
+					transform: `translate(${screenCx}, ${screenCy})`,
+					children: [
+						/* @__PURE__ */ jsx("rect", {
+							x: "-22",
+							y: "-17",
+							width: "44",
+							height: "34",
+							rx: "3",
+							fill: SCREEN_BG,
+							stroke: SCREEN_BORDER,
+							strokeWidth: "1"
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							cx: "-17",
+							cy: "-13",
+							r: "1.3",
+							fill: SCREEN_ICON_WARN
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							cx: "-12",
+							cy: "-13",
+							r: "1.3",
+							fill: HAT_SHELL
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							cx: "-7",
+							cy: "-13",
+							r: "1.3",
+							fill: BODY_COLORS[0]
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: "-18",
+							y: "-6",
+							width: "24",
+							height: "1.8",
+							rx: "0.9",
+							fill: SCREEN_LINE
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: "-18",
+							y: "-2",
+							width: "16",
+							height: "1.8",
+							rx: "0.9",
+							fill: SCREEN_LINE
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: "-18",
+							y: "2",
+							width: "20",
+							height: "1.8",
+							rx: "0.9",
+							fill: SCREEN_LINE
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							className: "nanite-scene__screen-scan",
+							x: "-20",
+							y: "-9",
+							width: "6",
+							height: "23",
+							rx: "3",
+							fill: BODY_COLORS[2],
+							opacity: "0"
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: "-18",
+							y: "7",
+							width: "12",
+							height: "3",
+							rx: "1.5",
+							fill: BODY_COLORS[1],
+							opacity: "0.55"
+						}),
+						/* @__PURE__ */ jsxs("g", {
+							className: "nanite-scene__github-signal",
+							children: [
+								/* @__PURE__ */ jsx("path", {
+									d: "M 3 5.5 L 9 0 L 14 5.5",
+									stroke: BODY_COLORS[2],
+									strokeWidth: "1.15",
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
+								}),
+								/* @__PURE__ */ jsx("circle", {
+									className: "nanite-scene__github-node",
+									cx: "3",
+									cy: "5.5",
+									r: "2",
+									fill: BODY_COLORS[0]
+								}),
+								/* @__PURE__ */ jsx("circle", {
+									className: "nanite-scene__github-node",
+									cx: "9",
+									cy: "0",
+									r: "2",
+									fill: HAT_SHELL
+								}),
+								/* @__PURE__ */ jsx("circle", {
+									className: "nanite-scene__github-node",
+									cx: "14",
+									cy: "5.5",
+									r: "2",
+									fill: BODY_COLORS[1]
+								})
+							]
+						})
+					]
+				}) : null,
+				showGlass ? /* @__PURE__ */ jsx("g", {
+					transform: `translate(${screenCx - 4}, 32)`,
+					children: /* @__PURE__ */ jsxs("g", {
+						className: "nanite-scene__glass",
+						children: [/* @__PURE__ */ jsx("circle", {
+							cx: "0",
+							cy: "0",
+							r: "7",
+							fill: "rgba(255,255,255,0.06)",
+							stroke: GLASS_STROKE,
+							strokeWidth: "1.5"
+						}), /* @__PURE__ */ jsx("line", {
+							x1: "5",
+							y1: "5",
+							x2: "10",
+							y2: "10",
+							stroke: GLASS_STROKE,
+							strokeWidth: "1.8",
+							strokeLinecap: "round"
+						})]
+					})
+				}) : null,
+				showSuccessBadge ? /* @__PURE__ */ jsx("g", {
+					transform: `translate(96, ${screenCy - 10})`,
+					children: /* @__PURE__ */ jsxs("g", {
+						className: "nanite-scene__badge",
+						children: [/* @__PURE__ */ jsx("circle", {
+							cx: "0",
+							cy: "0",
+							r: "7",
+							fill: BADGE_SUCCESS,
+							stroke: "#ffffff",
+							strokeWidth: "1.5"
+						}), /* @__PURE__ */ jsx("path", {
+							d: "M -3 0 L -0.5 2.5 L 3.5 -2",
+							stroke: "#ffffff",
+							strokeWidth: "1.8",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							fill: "none"
+						})]
+					})
+				}) : null,
+				showFailBadge ? /* @__PURE__ */ jsx("g", {
+					transform: `translate(96, ${screenCy - 10})`,
+					children: /* @__PURE__ */ jsxs("g", {
+						className: "nanite-scene__badge",
+						children: [
+							/* @__PURE__ */ jsx("circle", {
+								cx: "0",
+								cy: "0",
+								r: "7",
+								fill: BADGE_FAIL,
+								stroke: "#ffffff",
+								strokeWidth: "1.5"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: "-3",
+								y1: "-3",
+								x2: "3",
+								y2: "3",
+								stroke: "#ffffff",
+								strokeWidth: "1.8",
+								strokeLinecap: "round"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: "3",
+								y1: "-3",
+								x2: "-3",
+								y2: "3",
+								stroke: "#ffffff",
+								strokeWidth: "1.8",
+								strokeLinecap: "round"
+							})
+						]
+					})
+				}) : null,
+				showSuccessBadge ? /* @__PURE__ */ jsxs("g", {
+					className: "nanite-scene__sparkles",
+					children: [
+						/* @__PURE__ */ jsx("circle", {
+							className: "nanite-scene__sparkle",
+							cx: naniteX - 10,
+							cy: centerY - 24,
+							r: "1.6",
+							fill: HAT_BULB
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							className: "nanite-scene__sparkle",
+							cx: 26,
+							cy: centerY - 28,
+							r: "1.9",
+							fill: BODY_COLORS[0]
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							className: "nanite-scene__sparkle",
+							cx: 38,
+							cy: centerY - 22,
+							r: "1.6",
+							fill: BODY_COLORS[2]
+						})
+					]
+				}) : null
+			]
+		})
+	});
+}
+function NaniteBody({ index }) {
+	const color = BODY_COLORS[index % BODY_COLORS.length];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: "-15",
+			y: "-21",
+			width: "30",
+			height: "36",
+			rx: "8",
+			fill: color
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "-5.5",
+			cy: "-8",
+			r: "4.5",
+			fill: EYE_FILL
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "5.5",
+			cy: "-8",
+			r: "4.5",
+			fill: EYE_FILL
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "-4",
+			cy: "-10",
+			r: "1.5",
+			fill: EYE_HIGHLIGHT
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "7",
+			cy: "-10",
+			r: "1.5",
+			fill: EYE_HIGHLIGHT
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "-12",
+			y: "13",
+			width: "9",
+			height: "5",
+			rx: "2.5",
+			fill: color,
+			opacity: "0.7"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "3",
+			y: "13",
+			width: "9",
+			height: "5",
+			rx: "2.5",
+			fill: color,
+			opacity: "0.7"
+		})
+	] });
+}
+function Nanite({ index, cx, cy, scale }) {
+	return /* @__PURE__ */ jsx("g", {
+		transform: `translate(${cx}, ${cy}) scale(${scale})`,
+		children: /* @__PURE__ */ jsxs("g", {
+			className: "nanite-scene__nanite",
+			"data-index": index,
+			children: [/* @__PURE__ */ jsx(NaniteBody, { index }), /* @__PURE__ */ jsxs("g", {
+				className: "nanite-scene__hat",
+				children: [
+					/* @__PURE__ */ jsx("path", {
+						d: "M -9 -22 Q -9 -31 0 -31 Q 9 -31 9 -22 Z",
+						fill: HAT_SHELL
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "-12",
+						y: "-23",
+						width: "24",
+						height: "3.5",
+						rx: "1.5",
+						fill: HAT_BRIM
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "0",
+						cy: "-28",
+						r: "2",
+						fill: HAT_BULB
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { NaniteScene };

package/dist/components/NavigationMenu.d.ts

@@ -0,0 +1,256 @@
+import * as React from "react";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
+
+//#region src/components/NavigationMenu.d.ts
+/**
+ * Props for the NavigationMenu.Root component.
+ */
+interface NavigationMenuProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Root>, "className"> {
+  className?: string;
+  viewport?: boolean;
+}
+/**
+ * Props for the NavigationMenu.List component.
+ */
+interface NavigationMenuListProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.List>, "className"> {
+  className?: string;
+}
+/**
+ * Props for the NavigationMenu.Item component.
+ */
+interface NavigationMenuItemProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Item>, "className"> {
+  className?: string;
+}
+/**
+ * Props for the NavigationMenu.Trigger component.
+ */
+interface NavigationMenuTriggerProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Trigger>, "className"> {
+  className?: string;
+}
+/**
+ * Props for the NavigationMenu.Icon component.
+ */
+interface NavigationMenuIconProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Icon>, "className"> {
+  className?: string;
+}
+/**
+ * Props for the NavigationMenu.Content component.
+ */
+interface NavigationMenuContentProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Content>, "className"> {
+  className?: string;
+}
+/**
+ * Props for the NavigationMenu.Link component.
+ */
+interface NavigationMenuLinkProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Link>, "className"> {
+  className?: string;
+}
+/**
+ * Props for the NavigationMenu.Portal component.
+ */
+type NavigationMenuPortalProps = React.ComponentPropsWithoutRef<typeof NavigationMenu$1.Portal>;
+/**
+ * Props for the NavigationMenu.Positioner component.
+ */
+interface NavigationMenuPositionerProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Positioner>, "className"> {
+  className?: string;
+}
+/**
+ * Props for the NavigationMenu.Popup component.
+ */
+interface NavigationMenuPopupProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Popup>, "className"> {
+  className?: string;
+}
+/**
+ * Props for the NavigationMenu.Viewport component.
+ */
+interface NavigationMenuViewportProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Viewport>, "className"> {
+  className?: string;
+}
+/**
+ * Props for the NavigationMenu.Arrow component.
+ */
+interface NavigationMenuArrowProps extends Omit<React.ComponentPropsWithRef<typeof NavigationMenu$1.Arrow>, "className"> {
+  className?: string;
+}
+/**
+ * Navigation landmark for top-level or section-level links. Compose with
+ * NavigationMenu.List, NavigationMenu.Item, NavigationMenu.Trigger, and
+ * NavigationMenu.Content for disclosure-style navigation.
+ *
+ * Sigvelo changes: wraps Base UI NavigationMenu with stable class names and
+ * CSS-token styling, and removes invalid `aria-orientation` from the rendered
+ * list for axe compatibility.
+ *
+ * Use for app or section navigation. Do not use it for command menus or
+ * context actions. Base UI owns keyboard navigation and focus behavior; apps
+ * provide meaningful link text and panel content.
+ *
+ * @example
+ * ```tsx
+ * <NavigationMenu.Root>
+ *   <NavigationMenu.List>
+ *     <NavigationMenu.Item>
+ *       <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
+ *       <NavigationMenu.Portal>
+ *         <NavigationMenu.Positioner>
+ *           <NavigationMenu.Popup>
+ *             <NavigationMenu.Content>
+ *               <NavigationMenu.Link href="/products">All products</NavigationMenu.Link>
+ *             </NavigationMenu.Content>
+ *           </NavigationMenu.Popup>
+ *         </NavigationMenu.Positioner>
+ *       </NavigationMenu.Portal>
+ *     </NavigationMenu.Item>
+ *   </NavigationMenu.List>
+ * </NavigationMenu.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/navigation-menu | Base UI NavigationMenu}
+ */
+declare function Root({
+  className,
+  children,
+  viewport,
+  ref,
+  ...props
+}: NavigationMenuProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+declare function NavigationMenuList({
+  className,
+  ref,
+  ...props
+}: NavigationMenuListProps & {
+  ref?: React.Ref<HTMLUListElement>;
+}): React.JSX.Element;
+declare function NavigationMenuItem({
+  className,
+  ref,
+  ...props
+}: NavigationMenuItemProps & {
+  ref?: React.Ref<HTMLLIElement>;
+}): React.JSX.Element;
+declare function NavigationMenuTrigger({
+  className,
+  children,
+  ref,
+  ...props
+}: NavigationMenuTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare function NavigationMenuIcon({
+  className,
+  ref,
+  ...props
+}: NavigationMenuIconProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function NavigationMenuContent({
+  className,
+  ref,
+  ...props
+}: NavigationMenuContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function NavigationMenuLink({
+  className,
+  ref,
+  ...props
+}: NavigationMenuLinkProps & {
+  ref?: React.Ref<HTMLAnchorElement>;
+}): React.JSX.Element;
+declare function NavigationMenuPortal(props: NavigationMenuPortalProps): React.JSX.Element;
+declare function NavigationMenuPositioner({
+  className,
+  ref,
+  ...props
+}: NavigationMenuPositionerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function NavigationMenuPopup({
+  className,
+  ref,
+  ...props
+}: NavigationMenuPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function NavigationMenuViewport({
+  className,
+  ref,
+  ...props
+}: NavigationMenuViewportProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function NavigationMenuArrow({
+  className,
+  ref,
+  ...props
+}: NavigationMenuArrowProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A navigation menu component for website navigation with dropdown support.
+ * Provides keyboard navigation and supports nested submenus.
+ *
+ * @example
+ * ```tsx
+ * // Basic navigation menu
+ * <NavigationMenu.Root>
+ *   <NavigationMenu.List>
+ *     <NavigationMenu.Item>
+ *       <NavigationMenu.Trigger>
+ *         Products
+ *         <NavigationMenu.Icon>
+ *           <ChevronDownIcon />
+ *         </NavigationMenu.Icon>
+ *       </NavigationMenu.Trigger>
+ *       <NavigationMenu.Content>
+ *         <NavigationMenu.Link href="/products/analytics">
+ *           Analytics
+ *         </NavigationMenu.Link>
+ *         <NavigationMenu.Link href="/products/automation">
+ *           Automation
+ *         </NavigationMenu.Link>
+ *       </NavigationMenu.Content>
+ *     </NavigationMenu.Item>
+ *     <NavigationMenu.Item>
+ *       <NavigationMenu.Link href="/about">About</NavigationMenu.Link>
+ *     </NavigationMenu.Item>
+ *   </NavigationMenu.List>
+ *   <NavigationMenu.Portal>
+ *     <NavigationMenu.Positioner>
+ *       <NavigationMenu.Popup>
+ *         <NavigationMenu.Viewport />
+ *       </NavigationMenu.Popup>
+ *     </NavigationMenu.Positioner>
+ *   </NavigationMenu.Portal>
+ * </NavigationMenu.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/navigation-menu | Base UI NavigationMenu}
+ */
+declare const NavigationMenu: typeof Root & {
+  Root: typeof Root;
+  List: typeof NavigationMenuList;
+  Item: typeof NavigationMenuItem;
+  Trigger: typeof NavigationMenuTrigger;
+  Icon: typeof NavigationMenuIcon;
+  Content: typeof NavigationMenuContent;
+  Link: typeof NavigationMenuLink;
+  Portal: typeof NavigationMenuPortal;
+  Positioner: typeof NavigationMenuPositioner;
+  Popup: typeof NavigationMenuPopup;
+  Viewport: typeof NavigationMenuViewport;
+  Arrow: typeof NavigationMenuArrow;
+};
+declare function NavigationMenuIndicator(props: NavigationMenuIconProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function navigationMenuTriggerStyle({
+  className
+}?: {
+  className?: string;
+}): string;
+//#endregion
+export { NavigationMenu, NavigationMenuArrow, NavigationMenuArrowProps, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuIcon, NavigationMenuIconProps, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuItemProps, NavigationMenuLink, NavigationMenuLinkProps, NavigationMenuList, NavigationMenuListProps, NavigationMenuPopup, NavigationMenuPopupProps, NavigationMenuPortal, NavigationMenuPortalProps, NavigationMenuPositioner, NavigationMenuPositionerProps, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport, NavigationMenuViewportProps, navigationMenuTriggerStyle };