@langchain/macaw-components 1.0.0-beta.0

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,30 @@
+import type { MouseEventHandler } from 'react';
+import type { ControlSize } from '../../utils/componentSizes.js';
+type ButtonGroupSize = Exclude<ControlSize, 'lg'>;
+interface ButtonGroupProps {
+    /** Button group color scheme to propagate to children */
+    color?: 'primary' | 'secondary';
+    /** Button group variant to propagate to children */
+    variant?: 'normal' | 'outlined' | 'plain';
+    /**
+     * Control height: xs=20px, sm=24px, md=32px. Cloned onto direct React children.
+     * Wrappers must forward it; otherwise set the same size on their inner controls.
+     */
+    size?: ButtonGroupSize;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Button or IconButton controls, optionally inside wrappers that render no
+     * extra DOM element. PopoverTrigger/DropdownMenuTrigger with asChild forward
+     * group props; Tooltip requires matching props on its inner control.
+     */
+    children: React.ReactNode;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+}
+declare function ButtonGroup({ color, variant, size, className, children, onMouseEnter, onMouseLeave, }: ButtonGroupProps): import("react").JSX.Element;
+declare namespace ButtonGroup {
+    var displayName: string;
+}
+export { ButtonGroup };
+export type { ButtonGroupProps };

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,26 @@
+import { cn } from "../../utils/cn.js";
+import { Children, cloneElement, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/ButtonGroup/ButtonGroup.tsx
+function ButtonGroup({ color, variant, size, className, children, onMouseEnter, onMouseLeave }) {
+	const baseStyles = cn("inline-flex items-stretch", "[&>*:not(:first-child)]:border-l-0", "[&>*:not(:first-child):not(:last-child)]:rounded-none", "[&>*:first-child]:rounded-r-none", "[&>*:last-child]:rounded-l-none", "[&>*:only-child]:rounded", className);
+	const clonedChildren = Children.map(children, (child) => {
+		if (isValidElement(child)) return cloneElement(child, {
+			color,
+			size,
+			variant
+		});
+		return child;
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: baseStyles,
+		onMouseEnter,
+		onMouseLeave,
+		children: clonedChildren
+	});
+}
+ButtonGroup.displayName = "ButtonGroup";
+//#endregion
+export { ButtonGroup };
+
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/components/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\nimport { Children, cloneElement, isValidElement } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport type { ControlSize } from '../../utils/componentSizes';\nimport type { ButtonProps } from '../Button';\nimport type { IconButtonProps } from '../IconButton';\n\ntype ButtonGroupSize = Exclude<ControlSize, 'lg'>;\n\ninterface ButtonGroupProps {\n  /** Button group color scheme to propagate to children */\n  color?: 'primary' | 'secondary';\n  /** Button group variant to propagate to children */\n  variant?: 'normal' | 'outlined' | 'plain';\n  /**\n   * Control height: xs=20px, sm=24px, md=32px. Cloned onto direct React children.\n   * Wrappers must forward it; otherwise set the same size on their inner controls.\n   */\n  size?: ButtonGroupSize;\n  /** Additional CSS classes */\n  className?: string;\n  /**\n   * Button or IconButton controls, optionally inside wrappers that render no\n   * extra DOM element. PopoverTrigger/DropdownMenuTrigger with asChild forward\n   * group props; Tooltip requires matching props on its inner control.\n   */\n  children: React.ReactNode;\n  onMouseEnter?: MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: MouseEventHandler<HTMLDivElement>;\n}\n\nfunction ButtonGroup({\n  color,\n  variant,\n  size,\n  className,\n  children,\n  onMouseEnter,\n  onMouseLeave,\n}: ButtonGroupProps) {\n  const baseStyles = cn(\n    'inline-flex items-stretch',\n    '[&>*:not(:first-child)]:border-l-0', // Remove left border on all but first child\n    '[&>*:not(:first-child):not(:last-child)]:rounded-none', // Remove border radius on middle children\n    '[&>*:first-child]:rounded-r-none', // Remove right border radius on first child\n    '[&>*:last-child]:rounded-l-none', // Remove left border radius on last child\n    '[&>*:only-child]:rounded', // Preserve border radius when only one child\n    className\n  );\n\n  const clonedChildren = Children.map(children, (child) => {\n    if (isValidElement<ButtonProps | IconButtonProps>(child)) {\n      // Replace direct-child props, including with undefined. Wrappers control\n      // forwarding; Radix asChild gives explicitly set inner props precedence.\n      const props: Partial<ButtonProps & IconButtonProps> = {\n        color,\n        size,\n        variant,\n      };\n\n      return cloneElement(child, props);\n    }\n    return child;\n  });\n\n  return (\n    <div\n      className={baseStyles}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {clonedChildren}\n    </div>\n  );\n}\n\nButtonGroup.displayName = 'ButtonGroup';\n\nexport { ButtonGroup };\nexport type { ButtonGroupProps };\n"],"mappings":";;;;AAgCA,SAAS,YAAY,EACnB,OACA,SACA,MACA,WACA,UACA,cACA,gBACmB;CACnB,MAAM,aAAa,GACjB,6BACA,sCACA,yDACA,oCACA,mCACA,4BACA,SACF;CAEA,MAAM,iBAAiB,SAAS,IAAI,WAAW,UAAU;EACvD,IAAI,eAA8C,KAAK,GASrD,OAAO,aAAa,OAAO;GALzB;GACA;GACA;EAGyB,CAAK;EAElC,OAAO;CACT,CAAC;CAED,OACE,oBAAC,OAAD;EACE,WAAW;EACG;EACA;EAEb,UAAA;CACE,CAAA;AAET;AAEA,YAAY,cAAc"}

package/dist/components/ButtonGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './ButtonGroup.js';
+export type { ButtonGroupProps } from './ButtonGroup.js';

package/dist/components/ButtonGroup/index.js

@@ -0,0 +1,2 @@
+import { ButtonGroup } from "./ButtonGroup.js";
+export { ButtonGroup };

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from 'react';
+export type CardIntent = 'plain' | 'neutral' | 'info';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    intent?: CardIntent;
+}
+/**
+ * A content surface that standardizes card color, border, radius, and padding
+ * while leaving content and layout to the consuming feature.
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Card/Card.js

@@ -0,0 +1,23 @@
+import { cn } from "../../utils/cn.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/Card/Card.tsx
+var intentClasses = {
+	plain: "border-muted bg-elevated",
+	neutral: "border-muted bg-surface-level-2",
+	info: "border-brand-subtle bg-brand-subtle"
+};
+/**
+* A content surface that standardizes card color, border, radius, and padding
+* while leaving content and layout to the consuming feature.
+*/
+var Card = forwardRef(({ intent = "neutral", className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("rounded-lg border p-space-4", intentClasses[intent], className),
+	...props
+}));
+Card.displayName = "Card";
+//#endregion
+export { Card };
+
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":[],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\n\nimport { cn } from '../../utils/cn';\n\nexport type CardIntent = 'plain' | 'neutral' | 'info';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  intent?: CardIntent;\n}\n\nconst intentClasses: Record<CardIntent, string> = {\n  plain: 'border-muted bg-elevated',\n  neutral: 'border-muted bg-surface-level-2',\n  info: 'border-brand-subtle bg-brand-subtle',\n};\n\n/**\n * A content surface that standardizes card color, border, radius, and padding\n * while leaving content and layout to the consuming feature.\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  ({ intent = 'neutral', className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'rounded-lg border p-space-4',\n        intentClasses[intent],\n        className\n      )}\n      {...props}\n    />\n  )\n);\n\nCard.displayName = 'Card';\n"],"mappings":";;;;AAUA,IAAM,gBAA4C;CAChD,OAAO;CACP,SAAS;CACT,MAAM;AACR;;;;;AAMA,IAAa,OAAO,YACjB,EAAE,SAAS,WAAW,WAAW,GAAG,SAAS,QAC5C,oBAAC,OAAD;CACO;CACL,WAAW,GACT,+BACA,cAAc,SACd,SACF;CACA,GAAI;AACL,CAAA,CAEL;AAEA,KAAK,cAAc"}

package/dist/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card.js';
+export type { CardIntent, CardProps } from './Card.js';

package/dist/components/Card/index.js

@@ -0,0 +1,2 @@
+import { Card } from "./Card.js";
+export { Card };

package/dist/components/ChartCard/ChartCard.d.ts

@@ -0,0 +1,53 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ChartCardSkeletonVariant } from './ChartCardSkeleton.js';
+export interface ChartCardActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> {
+    /** Accessible label and tooltip text. */
+    label?: string;
+}
+export type ChartCardVariant = 'default' | 'full-width';
+export type ChartCardState = 'ready' | 'loading' | 'error';
+export interface ChartCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Visible chart title rendered in the card header. */
+    title: ReactNode;
+    /**
+     * Optional secondary text rendered beneath the title. Truncated to a single
+     * line to match the title's overflow behavior.
+     */
+    description?: ReactNode;
+    /** Visual state of the card. Fetching and retry behavior remain external. */
+    state?: ChartCardState;
+    /** Chart-shaped loading state. Omit for the generic placeholder. */
+    skeletonVariant?: ChartCardSkeletonVariant;
+    /** Size the loading plot to match a compact or fixed-height chart. */
+    skeletonClassName?: string;
+    /** Layout state for the card. Full-width cards hide their move handle. */
+    variant?: ChartCardVariant;
+    /** Whether to show the chart's move handle. Requires dragHandleProps. */
+    isMovable?: boolean;
+    /**
+     * Props for the move handle. Pass the listeners and attributes from the
+     * dashboard's drag-and-drop implementation; the card owns only the visual
+     * affordance.
+     */
+    dragHandleProps?: ChartCardActionButtonProps;
+    /** Props for the optional expand button. Expansion state remains external. */
+    expandButtonProps?: ChartCardActionButtonProps;
+    /** Props for the optional close button. Closing behavior remains external. */
+    closeButtonProps?: ChartCardActionButtonProps;
+    /** Feature-owned controls rendered in the top-right header action area. */
+    headerActions?: ReactNode;
+    /**
+     * Feature-owned menu items rendered inside the card's overflow menu. The
+     * card supplies the trigger, positioning, and menu surface.
+     */
+    menuItems?: ReactNode;
+    /** Classes applied to the chart-and-legend content region. */
+    contentClassName?: string;
+}
+/**
+ * A lightweight, chart-library-agnostic container for dashboard
+ * visualizations. ChartCard standardizes the shell and header actions while
+ * leaving data fetching, chart rendering, drag behavior, and expansion
+ * behavior to the consuming feature.
+ */
+export declare const ChartCard: import("react").ForwardRefExoticComponent<ChartCardProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/ChartCard/ChartCard.js

@@ -0,0 +1,172 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { DotsSixVerticalIcon, XCloseIcon } from "../../icons/PaddedPhosphorIcons.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../DropdownMenu/DropdownMenu.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import { ChartCardSkeleton } from "./ChartCardSkeleton.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { WarningIcon } from "@phosphor-icons/react/dist/ssr/Warning";
+import { ArrowsInSimpleIcon } from "@phosphor-icons/react/dist/ssr/ArrowsInSimple";
+import { ArrowsOutSimpleIcon } from "@phosphor-icons/react/dist/ssr/ArrowsOutSimple";
+import { DotsThreeVerticalIcon } from "@phosphor-icons/react/dist/ssr/DotsThreeVertical";
+//#region packages/components/src/components/ChartCard/ChartCard.tsx
+var ChartCardLoadingState = () => /* @__PURE__ */ jsxs("div", {
+	role: "status",
+	className: "flex min-h-[13.5rem] flex-1 flex-col gap-space-2",
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "relative min-h-0 flex-1",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-full rounded-md" }), /* @__PURE__ */ jsx(Text, {
+			variant: "sm",
+			color: "placeholder",
+			className: "absolute inset-0 flex items-center justify-center",
+			children: "Loading..."
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": "true",
+		className: "flex min-w-0 items-center gap-space-2",
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12" })
+		]
+	})]
+});
+var ChartCardErrorState = () => /* @__PURE__ */ jsx("div", {
+	role: "alert",
+	className: "flex min-h-0 flex-1 rounded-md",
+	children: /* @__PURE__ */ jsx(EmptyState, {
+		icon: WarningIcon,
+		iconWeight: "fill",
+		title: "There was an error while loading the chart.",
+		description: "Refresh the page to try again.",
+		className: "flex-1",
+		size: "sm"
+	})
+});
+/**
+* A lightweight, chart-library-agnostic container for dashboard
+* visualizations. ChartCard standardizes the shell and header actions while
+* leaving data fetching, chart rendering, drag behavior, and expansion
+* behavior to the consuming feature.
+*/
+var ChartCard = forwardRef(({ title, description, children, state = "ready", skeletonVariant, skeletonClassName, variant = "default", isMovable = false, dragHandleProps, expandButtonProps, closeButtonProps, headerActions, menuItems, className, contentClassName, "aria-labelledby": ariaLabelledBy, "aria-busy": ariaBusy, ...props }, ref) => {
+	const titleId = useId();
+	const isFullWidth = variant === "full-width";
+	const isLoading = state === "loading";
+	const showDragHandle = isMovable && dragHandleProps != null && !isFullWidth && !isLoading;
+	const { label: dragHandleLabel = "Move chart", className: dragHandleClassName, onClick: onDragHandleClick, ...dragButtonProps } = dragHandleProps ?? {};
+	const { label: expandButtonLabel = isFullWidth ? "Minimize chart" : "Expand chart", className: expandButtonClassName, onClick: onExpandClick, ...expandActionProps } = expandButtonProps ?? {};
+	const { label: closeButtonLabel = "Close chart", className: closeButtonClassName, onClick: onCloseClick, ...closeActionProps } = closeButtonProps ?? {};
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		"aria-labelledby": ariaLabelledBy ?? titleId,
+		"aria-busy": ariaBusy ?? (isLoading || void 0),
+		className: cn("flex min-w-0 flex-col overflow-hidden border border-muted bg-surface-level-1", isFullWidth && "w-full", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center justify-between gap-space-3 pl-space-3 pr-space-2 pt-space-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-center",
+				children: [showDragHandle && /* @__PURE__ */ jsx(IconButton, {
+					...dragButtonProps,
+					icon: DotsSixVerticalIcon,
+					iconWeight: "regular",
+					label: dragHandleLabel,
+					size: "xs",
+					variant: "plain",
+					color: "secondary",
+					iconClassName: "size-4 text-icon-primary",
+					className: cn("cursor-grab touch-none active:cursor-grabbing", dragHandleClassName),
+					onClick: (event) => {
+						event.stopPropagation();
+						onDragHandleClick?.(event);
+					}
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-space-1",
+					children: [/* @__PURE__ */ jsx(Text, {
+						id: titleId,
+						as: "h3",
+						variant: "sm",
+						weight: "semibold",
+						className: "min-w-0 truncate",
+						children: title
+					}), description != null && description !== "" && /* @__PURE__ */ jsx(Text, {
+						variant: "xs",
+						color: "quaternary",
+						className: "min-w-0 truncate",
+						children: description
+					})]
+				})]
+			}), !isLoading && /* @__PURE__ */ jsxs("div", {
+				className: cn("flex shrink-0 items-center", Boolean(headerActions) && "gap-space-1"),
+				children: [
+					!!headerActions && /* @__PURE__ */ jsx("div", {
+						className: "flex items-center pr-space-1",
+						children: headerActions
+					}),
+					expandButtonProps != null && /* @__PURE__ */ jsx(IconButton, {
+						...expandActionProps,
+						icon: isFullWidth ? ArrowsInSimpleIcon : ArrowsOutSimpleIcon,
+						label: expandButtonLabel,
+						size: "xs",
+						variant: "plain",
+						color: "secondary",
+						iconClassName: "size-4 text-icon-primary",
+						className: expandButtonClassName,
+						onClick: (event) => {
+							event.stopPropagation();
+							onExpandClick?.(event);
+						}
+					}),
+					!!menuItems && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: DotsThreeVerticalIcon,
+							iconWeight: "regular",
+							label: "More chart actions",
+							size: "xs",
+							variant: "plain",
+							color: "secondary",
+							iconClassName: "size-4 text-icon-primary",
+							onClick: (event) => event.stopPropagation()
+						})
+					}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+						align: "end",
+						preventClickThrough: true,
+						onClick: (event) => event.stopPropagation(),
+						children: menuItems
+					})] }),
+					closeButtonProps != null && /* @__PURE__ */ jsx(IconButton, {
+						...closeActionProps,
+						icon: XCloseIcon,
+						label: closeButtonLabel,
+						size: "xs",
+						variant: "plain",
+						color: "secondary",
+						iconClassName: "text-icon-primary",
+						className: closeButtonClassName,
+						onClick: (event) => {
+							event.stopPropagation();
+							onCloseClick?.(event);
+						}
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("flex min-h-0 flex-1 flex-col gap-space-2 px-space-3 py-space-2", contentClassName),
+			children: state === "loading" ? skeletonVariant ? /* @__PURE__ */ jsx(ChartCardSkeleton, {
+				variant: skeletonVariant,
+				className: skeletonClassName
+			}) : /* @__PURE__ */ jsx(ChartCardLoadingState, {}) : state === "error" ? /* @__PURE__ */ jsx(ChartCardErrorState, {}) : children
+		})]
+	});
+});
+ChartCard.displayName = "ChartCard";
+//#endregion
+export { ChartCard };
+
+//# sourceMappingURL=ChartCard.js.map

package/dist/components/ChartCard/ChartCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCard.js","names":[],"sources":["../../../src/components/ChartCard/ChartCard.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\n\nimport { ArrowsInSimpleIcon } from '@phosphor-icons/react/dist/ssr/ArrowsInSimple';\nimport { ArrowsOutSimpleIcon } from '@phosphor-icons/react/dist/ssr/ArrowsOutSimple';\nimport { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/ssr/DotsThreeVertical';\nimport { WarningIcon } from '@phosphor-icons/react/dist/ssr/Warning';\n\nimport {\n  DotsSixVerticalIcon,\n  XCloseIcon,\n} from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport { EmptyState } from '../EmptyState';\nimport { IconButton } from '../IconButton';\nimport { Skeleton } from '../Skeleton';\nimport { Text } from '../Text';\nimport {\n  ChartCardSkeleton,\n  type ChartCardSkeletonVariant,\n} from './ChartCardSkeleton';\n\nexport interface ChartCardActionButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children' | 'color'\n> {\n  /** Accessible label and tooltip text. */\n  label?: string;\n}\n\nexport type ChartCardVariant = 'default' | 'full-width';\n\nexport type ChartCardState = 'ready' | 'loading' | 'error';\n\nconst ChartCardLoadingState = () => (\n  <div\n    role=\"status\"\n    className=\"flex min-h-[13.5rem] flex-1 flex-col gap-space-2\"\n  >\n    <div className=\"relative min-h-0 flex-1\">\n      <Skeleton className=\"size-full rounded-md\" />\n      <Text\n        variant=\"sm\"\n        color=\"placeholder\"\n        className=\"absolute inset-0 flex items-center justify-center\"\n      >\n        Loading...\n      </Text>\n    </div>\n    <div aria-hidden=\"true\" className=\"flex min-w-0 items-center gap-space-2\">\n      <Skeleton className=\"h-4 w-20\" />\n      <Skeleton className=\"h-4 w-24\" />\n      <Skeleton className=\"h-4 w-40\" />\n      <Skeleton className=\"h-4 w-12\" />\n    </div>\n  </div>\n);\n\nconst ChartCardErrorState = () => (\n  <div role=\"alert\" className=\"flex min-h-0 flex-1 rounded-md\">\n    <EmptyState\n      icon={WarningIcon}\n      iconWeight=\"fill\"\n      title=\"There was an error while loading the chart.\"\n      description=\"Refresh the page to try again.\"\n      className=\"flex-1\"\n      size=\"sm\"\n    />\n  </div>\n);\n\nexport interface ChartCardProps extends Omit<\n  HTMLAttributes<HTMLElement>,\n  'title'\n> {\n  /** Visible chart title rendered in the card header. */\n  title: ReactNode;\n  /**\n   * Optional secondary text rendered beneath the title. Truncated to a single\n   * line to match the title's overflow behavior.\n   */\n  description?: ReactNode;\n  /** Visual state of the card. Fetching and retry behavior remain external. */\n  state?: ChartCardState;\n  /** Chart-shaped loading state. Omit for the generic placeholder. */\n  skeletonVariant?: ChartCardSkeletonVariant;\n  /** Size the loading plot to match a compact or fixed-height chart. */\n  skeletonClassName?: string;\n  /** Layout state for the card. Full-width cards hide their move handle. */\n  variant?: ChartCardVariant;\n  /** Whether to show the chart's move handle. Requires dragHandleProps. */\n  isMovable?: boolean;\n  /**\n   * Props for the move handle. Pass the listeners and attributes from the\n   * dashboard's drag-and-drop implementation; the card owns only the visual\n   * affordance.\n   */\n  dragHandleProps?: ChartCardActionButtonProps;\n  /** Props for the optional expand button. Expansion state remains external. */\n  expandButtonProps?: ChartCardActionButtonProps;\n  /** Props for the optional close button. Closing behavior remains external. */\n  closeButtonProps?: ChartCardActionButtonProps;\n  /** Feature-owned controls rendered in the top-right header action area. */\n  headerActions?: ReactNode;\n  /**\n   * Feature-owned menu items rendered inside the card's overflow menu. The\n   * card supplies the trigger, positioning, and menu surface.\n   */\n  menuItems?: ReactNode;\n  /** Classes applied to the chart-and-legend content region. */\n  contentClassName?: string;\n}\n\n/**\n * A lightweight, chart-library-agnostic container for dashboard\n * visualizations. ChartCard standardizes the shell and header actions while\n * leaving data fetching, chart rendering, drag behavior, and expansion\n * behavior to the consuming feature.\n */\nexport const ChartCard = forwardRef<HTMLElement, ChartCardProps>(\n  (\n    {\n      title,\n      description,\n      children,\n      state = 'ready',\n      skeletonVariant,\n      skeletonClassName,\n      variant = 'default',\n      isMovable = false,\n      dragHandleProps,\n      expandButtonProps,\n      closeButtonProps,\n      headerActions,\n      menuItems,\n      className,\n      contentClassName,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-busy': ariaBusy,\n      ...props\n    },\n    ref\n  ) => {\n    const titleId = useId();\n    const isFullWidth = variant === 'full-width';\n    const isLoading = state === 'loading';\n    const showDragHandle =\n      isMovable && dragHandleProps != null && !isFullWidth && !isLoading;\n\n    const {\n      label: dragHandleLabel = 'Move chart',\n      className: dragHandleClassName,\n      onClick: onDragHandleClick,\n      ...dragButtonProps\n    } = dragHandleProps ?? {};\n    const {\n      label: expandButtonLabel = isFullWidth\n        ? 'Minimize chart'\n        : 'Expand chart',\n      className: expandButtonClassName,\n      onClick: onExpandClick,\n      ...expandActionProps\n    } = expandButtonProps ?? {};\n    const {\n      label: closeButtonLabel = 'Close chart',\n      className: closeButtonClassName,\n      onClick: onCloseClick,\n      ...closeActionProps\n    } = closeButtonProps ?? {};\n\n    return (\n      <section\n        ref={ref}\n        aria-labelledby={ariaLabelledBy ?? titleId}\n        aria-busy={ariaBusy ?? (isLoading || undefined)}\n        className={cn(\n          'flex min-w-0 flex-col overflow-hidden border border-muted bg-surface-level-1',\n          isFullWidth && 'w-full',\n          className\n        )}\n        {...props}\n      >\n        <div className=\"flex min-w-0 items-center justify-between gap-space-3 pl-space-3 pr-space-2 pt-space-2\">\n          <div className=\"flex min-w-0 flex-1 items-center\">\n            {showDragHandle && (\n              <IconButton\n                {...dragButtonProps}\n                icon={DotsSixVerticalIcon}\n                iconWeight=\"regular\"\n                label={dragHandleLabel}\n                size=\"xs\"\n                variant=\"plain\"\n                color=\"secondary\"\n                iconClassName=\"size-4 text-icon-primary\"\n                className={cn(\n                  'cursor-grab touch-none active:cursor-grabbing',\n                  dragHandleClassName\n                )}\n                onClick={(event) => {\n                  event.stopPropagation();\n                  onDragHandleClick?.(event);\n                }}\n              />\n            )}\n            <div className=\"flex min-w-0 flex-1 flex-col gap-space-1\">\n              <Text\n                id={titleId}\n                as=\"h3\"\n                variant=\"sm\"\n                weight=\"semibold\"\n                className=\"min-w-0 truncate\"\n              >\n                {title}\n              </Text>\n              {description != null && description !== '' && (\n                <Text\n                  variant=\"xs\"\n                  color=\"quaternary\"\n                  className=\"min-w-0 truncate\"\n                >\n                  {description}\n                </Text>\n              )}\n            </div>\n          </div>\n\n          {!isLoading && (\n            <div\n              className={cn(\n                'flex shrink-0 items-center',\n                Boolean(headerActions) && 'gap-space-1'\n              )}\n            >\n              {!!headerActions && (\n                <div className=\"flex items-center pr-space-1\">\n                  {headerActions}\n                </div>\n              )}\n              {expandButtonProps != null && (\n                <IconButton\n                  {...expandActionProps}\n                  icon={isFullWidth ? ArrowsInSimpleIcon : ArrowsOutSimpleIcon}\n                  label={expandButtonLabel}\n                  size=\"xs\"\n                  variant=\"plain\"\n                  color=\"secondary\"\n                  iconClassName=\"size-4 text-icon-primary\"\n                  className={expandButtonClassName}\n                  onClick={(event) => {\n                    event.stopPropagation();\n                    onExpandClick?.(event);\n                  }}\n                />\n              )}\n              {!!menuItems && (\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <IconButton\n                      icon={DotsThreeVerticalIcon}\n                      iconWeight=\"regular\"\n                      label=\"More chart actions\"\n                      size=\"xs\"\n                      variant=\"plain\"\n                      color=\"secondary\"\n                      iconClassName=\"size-4 text-icon-primary\"\n                      onClick={(event) => event.stopPropagation()}\n                    />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent\n                    align=\"end\"\n                    preventClickThrough\n                    onClick={(event) => event.stopPropagation()}\n                  >\n                    {menuItems}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              )}\n              {closeButtonProps != null && (\n                <IconButton\n                  {...closeActionProps}\n                  icon={XCloseIcon}\n                  label={closeButtonLabel}\n                  size=\"xs\"\n                  variant=\"plain\"\n                  color=\"secondary\"\n                  iconClassName=\"text-icon-primary\"\n                  className={closeButtonClassName}\n                  onClick={(event) => {\n                    event.stopPropagation();\n                    onCloseClick?.(event);\n                  }}\n                />\n              )}\n            </div>\n          )}\n        </div>\n\n        <div\n          className={cn(\n            'flex min-h-0 flex-1 flex-col gap-space-2 px-space-3 py-space-2',\n            contentClassName\n          )}\n        >\n          {state === 'loading' ? (\n            skeletonVariant ? (\n              <ChartCardSkeleton\n                variant={skeletonVariant}\n                className={skeletonClassName}\n              />\n            ) : (\n              <ChartCardLoadingState />\n            )\n          ) : state === 'error' ? (\n            <ChartCardErrorState />\n          ) : (\n            children\n          )}\n        </div>\n      </section>\n    );\n  }\n);\n\nChartCard.displayName = 'ChartCard';\n"],"mappings":"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"}

package/dist/components/ChartCard/ChartCardSkeleton.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from 'react';
+export type ChartCardSkeletonVariant = 'bar' | 'line' | 'donut' | 'metric' | 'sparkline';
+export declare const ChartCardSkeleton: ({ variant, className, style, }: {
+    variant: ChartCardSkeletonVariant;
+    className?: string;
+    style?: CSSProperties;
+}) => import("react").JSX.Element;

package/dist/components/ChartCard/ChartCardSkeleton.js

@@ -0,0 +1,61 @@
+import { cn } from "../../utils/cn.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/ChartCard/ChartCardSkeleton.tsx
+var BAR_HEIGHTS = [
+	"35%",
+	"62%",
+	"48%",
+	"78%",
+	"55%",
+	"70%",
+	"42%"
+];
+var LegendSkeleton = () => /* @__PURE__ */ jsxs("div", {
+	"aria-hidden": "true",
+	className: "flex min-w-0 items-center gap-space-2",
+	children: [
+		/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20 motion-reduce:animate-none" }),
+		/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24 motion-reduce:animate-none" }),
+		/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16 motion-reduce:animate-none" })
+	]
+});
+var Plot = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "relative min-h-0 flex-1 border-b border-l border-muted",
+	children: /* @__PURE__ */ jsx("div", {
+		className: "absolute inset-0 flex px-space-2",
+		children
+	})
+});
+var ChartCardSkeleton = ({ variant, className, style }) => /* @__PURE__ */ jsxs("div", {
+	role: "status",
+	"aria-label": "Loading chart",
+	style,
+	className: cn("flex min-h-[13.5rem] flex-1 flex-col gap-space-2", variant === "metric" && "min-h-0", className),
+	children: [
+		variant === "bar" && /* @__PURE__ */ jsx(Plot, { children: /* @__PURE__ */ jsx("div", {
+			className: "flex size-full items-end gap-space-2",
+			children: BAR_HEIGHTS.map((height, index) => /* @__PURE__ */ jsx(Skeleton, {
+				className: "min-w-0 flex-1 rounded-b-none rounded-t-md motion-reduce:animate-none",
+				style: { height }
+			}, index))
+		}) }),
+		(variant === "line" || variant === "sparkline") && /* @__PURE__ */ jsx(Plot, { children: /* @__PURE__ */ jsx(Skeleton, {
+			className: "size-full rounded-none motion-reduce:animate-none",
+			style: { clipPath: "polygon(0 63%, 20% 43%, 38% 56%, 60% 26%, 78% 40%, 100% 13%, 100% 17%, 78% 44%, 60% 30%, 38% 60%, 20% 47%, 0 67%)" }
+		}) }),
+		variant === "donut" && /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 flex-1 items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "size-32 animate-pulse rounded-full border-[1.5rem] border-muted motion-reduce:animate-none" })
+		}),
+		variant === "metric" && /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-0 flex-1 flex-col justify-center gap-space-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-1/2 motion-reduce:animate-none" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3 motion-reduce:animate-none" })]
+		}),
+		variant !== "metric" && /* @__PURE__ */ jsx(LegendSkeleton, {})
+	]
+});
+//#endregion
+export { ChartCardSkeleton };
+
+//# sourceMappingURL=ChartCardSkeleton.js.map

package/dist/components/ChartCard/ChartCardSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCardSkeleton.js","names":[],"sources":["../../../src/components/ChartCard/ChartCardSkeleton.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { Skeleton } from '../Skeleton';\n\nexport type ChartCardSkeletonVariant =\n  | 'bar'\n  | 'line'\n  | 'donut'\n  | 'metric'\n  | 'sparkline';\n\nconst BAR_HEIGHTS = ['35%', '62%', '48%', '78%', '55%', '70%', '42%'] as const;\n\nconst LegendSkeleton = () => (\n  <div aria-hidden=\"true\" className=\"flex min-w-0 items-center gap-space-2\">\n    <Skeleton className=\"h-4 w-20 motion-reduce:animate-none\" />\n    <Skeleton className=\"h-4 w-24 motion-reduce:animate-none\" />\n    <Skeleton className=\"h-4 w-16 motion-reduce:animate-none\" />\n  </div>\n);\n\nconst Plot = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"relative min-h-0 flex-1 border-b border-l border-muted\">\n    {/* Anchor percentage-sized marks to the plot even in auto-height cards. */}\n    <div className=\"absolute inset-0 flex px-space-2\">{children}</div>\n  </div>\n);\n\nexport const ChartCardSkeleton = ({\n  variant,\n  className,\n  style,\n}: {\n  variant: ChartCardSkeletonVariant;\n  className?: string;\n  style?: CSSProperties;\n}) => (\n  <div\n    role=\"status\"\n    aria-label=\"Loading chart\"\n    style={style}\n    className={cn(\n      'flex min-h-[13.5rem] flex-1 flex-col gap-space-2',\n      variant === 'metric' && 'min-h-0',\n      className\n    )}\n  >\n    {variant === 'bar' && (\n      <Plot>\n        <div className=\"flex size-full items-end gap-space-2\">\n          {BAR_HEIGHTS.map((height, index) => (\n            <Skeleton\n              key={index}\n              className=\"min-w-0 flex-1 rounded-b-none rounded-t-md motion-reduce:animate-none\"\n              style={{ height }}\n            />\n          ))}\n        </div>\n      </Plot>\n    )}\n    {(variant === 'line' || variant === 'sparkline') && (\n      <Plot>\n        <Skeleton\n          className=\"size-full rounded-none motion-reduce:animate-none\"\n          style={{\n            clipPath:\n              'polygon(0 63%, 20% 43%, 38% 56%, 60% 26%, 78% 40%, 100% 13%, 100% 17%, 78% 44%, 60% 30%, 38% 60%, 20% 47%, 0 67%)',\n          }}\n        />\n      </Plot>\n    )}\n    {variant === 'donut' && (\n      <div className=\"flex min-h-0 flex-1 items-center justify-center\">\n        <div className=\"size-32 animate-pulse rounded-full border-[1.5rem] border-muted motion-reduce:animate-none\" />\n      </div>\n    )}\n    {variant === 'metric' && (\n      <div className=\"flex min-h-0 flex-1 flex-col justify-center gap-space-2\">\n        <Skeleton className=\"h-9 w-1/2 motion-reduce:animate-none\" />\n        <Skeleton className=\"h-4 w-2/3 motion-reduce:animate-none\" />\n      </div>\n    )}\n    {variant !== 'metric' && <LegendSkeleton />}\n  </div>\n);\n"],"mappings":";;;;AAYA,IAAM,cAAc;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;AAAK;AAEpE,IAAM,uBACJ,qBAAC,OAAD;CAAK,eAAY;CAAO,WAAU;CAAlC,UAAA;EACE,oBAAC,UAAD,EAAU,WAAU,sCAAuC,CAAA;EAC3D,oBAAC,UAAD,EAAU,WAAU,sCAAuC,CAAA;EAC3D,oBAAC,UAAD,EAAU,WAAU,sCAAuC,CAAA;CACxD;;AAGP,IAAM,QAAQ,EAAE,eACd,oBAAC,OAAD;CAAK,WAAU;CAEb,UAAA,oBAAC,OAAD;EAAK,WAAU;EAAoC;CAAc,CAAA;AAC9D,CAAA;AAGP,IAAa,qBAAqB,EAChC,SACA,WACA,YAMA,qBAAC,OAAD;CACE,MAAK;CACL,cAAW;CACJ;CACP,WAAW,GACT,oDACA,YAAY,YAAY,WACxB,SACF;CARF,UAAA;EAUG,YAAY,SACX,oBAAC,MAAD,EAAA,UACE,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,YAAY,KAAK,QAAQ,UACxB,oBAAC,UAAD;IAEE,WAAU;IACV,OAAO,EAAE,OAAO;GACjB,GAHM,KAGN,CACF;EACE,CAAA,EACD,CAAA;GAEN,YAAY,UAAU,YAAY,gBAClC,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD;GACE,WAAU;GACV,OAAO,EACL,UACE,oHACJ;EACD,CAAA,EACG,CAAA;EAEP,YAAY,WACX,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,OAAD,EAAK,WAAU,6FAA8F,CAAA;EAC1G,CAAA;EAEN,YAAY,YACX,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,UAAD,EAAU,WAAU,uCAAwC,CAAA,GAC5D,oBAAC,UAAD,EAAU,WAAU,uCAAwC,CAAA,CACzD;;EAEN,YAAY,YAAY,oBAAC,gBAAD,CAAiB,CAAA;CACvC"}

package/dist/components/ChartCard/index.d.ts

@@ -0,0 +1,4 @@
+export { ChartCard } from './ChartCard.js';
+export { ChartCardSkeleton } from './ChartCardSkeleton.js';
+export type { ChartCardActionButtonProps, ChartCardProps, ChartCardState, ChartCardVariant, } from './ChartCard.js';
+export type { ChartCardSkeletonVariant } from './ChartCardSkeleton.js';

package/dist/components/ChartCard/index.js

@@ -0,0 +1,3 @@
+import { ChartCardSkeleton } from "./ChartCardSkeleton.js";
+import { ChartCard } from "./ChartCard.js";
+export { ChartCard, ChartCardSkeleton };

package/dist/components/ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ChartLegendItem = {
+    id: string;
+    label: ReactNode;
+    value?: ReactNode;
+    secondaryValue?: ReactNode;
+    'aria-label'?: string;
+    markerColor?: string;
+    marker?: ReactNode;
+    selected?: boolean;
+};
+export type ChartLegendProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    items: readonly ChartLegendItem[];
+    layout?: 'inline' | 'list';
+    onItemClick?: (item: ChartLegendItem) => void;
+    /** Reports the legend item under the pointer or keyboard focus. */
+    onItemActiveChange?: (item: ChartLegendItem | null) => void;
+};
+export declare const ChartLegend: ({ layout, items, onItemActiveChange, ...props }: ChartLegendProps) => import("react").JSX.Element;