@langchain/macaw-components 1.0.0-beta.0

package/dist/components/ChartLegend/ChartLegend.js

@@ -0,0 +1,195 @@
+import { cn } from "../../utils/cn.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { Badge } from "../Badge/Badge.js";
+import { SPACE_SCALE_PX } from "../../utils/spacing.js";
+import { Button } from "../Button/Button.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
+import { getChartLegendListColumns, getChartLegendListGridTemplate, widthsMatch } from "./utils.js";
+import { ChartLegendItemRenderer } from "./ChartLegendItemRenderer.js";
+import { useChartLegendActiveItem } from "./useChartLegendActiveItem.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/ChartLegend/ChartLegend.tsx
+var LEGEND_GAP_PX = SPACE_SCALE_PX[1];
+var VIEW_HIDDEN_TOOLTIP = "Click to view hidden legends";
+var ChartLegendList = ({ items, onItemClick, onItemActiveChange, className, role = "group", "aria-label": ariaLabel = "Chart legend", style, ...props }) => {
+	const listColumns = getChartLegendListColumns(items, onItemClick != null);
+	const gridTemplateColumns = getChartLegendListGridTemplate(listColumns);
+	return /* @__PURE__ */ jsx("div", {
+		role,
+		"aria-label": ariaLabel,
+		className: cn("grid w-full min-w-0", className),
+		style: {
+			...style,
+			gridTemplateColumns
+		},
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsx(ChartLegendItemRenderer, {
+			item,
+			layout: "list",
+			listColumns,
+			onActiveChange: onItemActiveChange,
+			onClick: onItemClick == null ? void 0 : () => {
+				onItemClick(item);
+			}
+		}, item.id))
+	});
+};
+var ChartLegendInline = ({ items, onItemClick, onItemActiveChange, className, role = "group", "aria-label": ariaLabel = "Chart legend", ...props }) => {
+	const [popoverOpen, setPopoverOpen] = useState(false);
+	const [containerWidth, setContainerWidth] = useState(null);
+	const [itemWidths, setItemWidths] = useState({});
+	const [badgeWidths, setBadgeWidths] = useState({});
+	const containerRef = useRef(null);
+	const measurementItemRefs = useRef({});
+	const measurementBadgeRefs = useRef({});
+	const isInteractive = onItemClick != null || onItemActiveChange != null;
+	const itemIds = useMemo(() => items.map((item) => item.id), [items]);
+	const setMeasurementItemRef = useCallback((id, node) => {
+		measurementItemRefs.current[id] = node;
+	}, []);
+	const setMeasurementBadgeRef = useCallback((count, node) => {
+		measurementBadgeRefs.current[String(count)] = node;
+	}, []);
+	useLayoutEffect(() => {
+		const nextItemWidths = {};
+		const nextBadgeWidths = {};
+		items.forEach((item, index) => {
+			const itemWidth = measurementItemRefs.current[item.id]?.offsetWidth;
+			if (itemWidth != null) nextItemWidths[item.id] = Math.ceil(itemWidth);
+			const hiddenCount = index + 1;
+			const badgeWidth = measurementBadgeRefs.current[String(hiddenCount)]?.offsetWidth;
+			if (badgeWidth != null) nextBadgeWidths[String(hiddenCount)] = Math.ceil(badgeWidth);
+		});
+		setItemWidths((current) => widthsMatch(current, nextItemWidths) ? current : nextItemWidths);
+		setBadgeWidths((current) => widthsMatch(current, nextBadgeWidths) ? current : nextBadgeWidths);
+	}, [isInteractive, items]);
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		if (container == null) return;
+		const updateWidth = (width) => {
+			const nextWidth = Math.ceil(width);
+			setContainerWidth((current) => current === nextWidth ? current : nextWidth);
+		};
+		updateWidth(container.clientWidth);
+		const observer = new ResizeObserver(([entry]) => {
+			updateWidth(entry?.contentRect.width ?? container.clientWidth);
+		});
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, []);
+	const visibleCount = useMemo(() => {
+		if (!(containerWidth != null && itemIds.every((id) => itemWidths[id] != null) && items.every((_, index) => badgeWidths[String(index + 1)] != null)) || containerWidth == null) return items.length;
+		if (itemIds.reduce((total, id) => total + (itemWidths[id] ?? 0), Math.max(items.length - 1, 0) * LEGEND_GAP_PX) <= containerWidth) return items.length;
+		for (let count = items.length - 1; count >= 0; count -= 1) {
+			const hiddenCount = items.length - count;
+			if (itemIds.slice(0, count).reduce((total, id) => total + (itemWidths[id] ?? 0), 0) + count * LEGEND_GAP_PX + (badgeWidths[String(hiddenCount)] ?? 0) <= containerWidth) return count;
+		}
+		return 0;
+	}, [
+		badgeWidths,
+		containerWidth,
+		itemIds,
+		itemWidths,
+		items
+	]);
+	const hiddenCount = Math.max(items.length - visibleCount, 0);
+	const hasOverflow = hiddenCount > 0;
+	const visibleItems = items.slice(0, visibleCount);
+	const hiddenItems = items.slice(visibleCount);
+	useEffect(() => {
+		if (!hasOverflow) setPopoverOpen(false);
+	}, [hasOverflow]);
+	const renderItem = (item) => /* @__PURE__ */ jsx(ChartLegendItemRenderer, {
+		item,
+		onActiveChange: onItemActiveChange,
+		onClick: onItemClick == null ? void 0 : () => {
+			onItemClick(item);
+		}
+	}, item.id);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: popoverOpen,
+		onOpenChange: setPopoverOpen,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: containerRef,
+				role,
+				"aria-label": ariaLabel,
+				className: cn("relative flex w-full min-w-0 items-center gap-space-1 overflow-clip rounded-xs", className),
+				...props,
+				children: [
+					visibleItems.map(renderItem),
+					hasOverflow && /* @__PURE__ */ jsx(Tooltip, {
+						title: VIEW_HIDDEN_TOOLTIP,
+						children: /* @__PURE__ */ jsx(PopoverTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "xs",
+								color: "secondary",
+								variant: "plain",
+								className: "focus-visible:ring-focus relative rounded-xs border-transparent bg-transparent p-0 shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
+								"aria-label": `View ${hiddenCount} hidden chart ${hiddenCount === 1 ? "legend" : "legends"}`,
+								children: /* @__PURE__ */ jsx(Badge, {
+									size: "xxs",
+									rounded: "xs",
+									children: `+${hiddenCount}`
+								})
+							})
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"aria-hidden": "true",
+						className: "pointer-events-none invisible absolute left-0 top-0 flex w-max items-center gap-space-1",
+						children: [items.map((item) => /* @__PURE__ */ jsx("div", {
+							ref: (node) => setMeasurementItemRef(item.id, node),
+							className: "shrink-0",
+							children: /* @__PURE__ */ jsx(ChartLegendItemRenderer, {
+								item,
+								onClick: onItemClick == null ? void 0 : () => void 0,
+								tabIndex: -1
+							})
+						}, item.id)), items.map((_, index) => {
+							const count = index + 1;
+							return /* @__PURE__ */ jsx("div", {
+								ref: (node) => setMeasurementBadgeRef(count, node),
+								className: "shrink-0",
+								children: /* @__PURE__ */ jsx(Badge, {
+									size: "xxs",
+									rounded: "xs",
+									children: `+${count}`
+								})
+							}, count);
+						})]
+					})
+				]
+			})
+		}), hasOverflow && /* @__PURE__ */ jsx(PopoverContent, {
+			align: "end",
+			className: "w-max min-w-48 max-w-[min(24rem,calc(100vw-2rem))] overflow-hidden border border-subtle p-0",
+			"aria-label": "Hidden chart legends",
+			onInteractOutside: (event) => {
+				if (event.target instanceof Node && containerRef.current?.contains(event.target)) event.preventDefault();
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				className: "scroll-mask-t scroll-mask-b flex max-h-[min(300px,70vh)] flex-col gap-space-1 overflow-y-auto overflow-x-hidden p-space-1",
+				children: hiddenItems.map(renderItem)
+			})
+		})]
+	});
+};
+var ChartLegend = ({ layout = "inline", items, onItemActiveChange, ...props }) => {
+	const handleItemActiveChange = useChartLegendActiveItem(items, onItemActiveChange);
+	const activeChangeHandler = onItemActiveChange == null ? void 0 : handleItemActiveChange;
+	const legendProps = {
+		...props,
+		items,
+		onItemActiveChange: activeChangeHandler
+	};
+	return layout === "list" ? /* @__PURE__ */ jsx(ChartLegendList, { ...legendProps }) : /* @__PURE__ */ jsx(ChartLegendInline, { ...legendProps });
+};
+//#endregion
+export { ChartLegend };
+
+//# sourceMappingURL=ChartLegend.js.map

package/dist/components/ChartLegend/ChartLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.js","names":[],"sources":["../../../src/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { SPACE_SCALE_PX } from '../../utils/spacing';\nimport { Badge } from '../Badge';\nimport { Button } from '../Button';\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from '../Popover';\nimport { Tooltip } from '../Tooltip';\nimport { ChartLegendItemRenderer } from './ChartLegendItemRenderer';\nimport {\n  type ChartLegendItemActiveChangeHandler,\n  useChartLegendActiveItem,\n} from './useChartLegendActiveItem';\nimport {\n  getChartLegendListColumns,\n  getChartLegendListGridTemplate,\n  widthsMatch,\n} from './utils';\n\nconst LEGEND_GAP_PX = SPACE_SCALE_PX[1];\nconst VIEW_HIDDEN_TOOLTIP = 'Click to view hidden legends';\n\nexport type ChartLegendItem = {\n  id: string;\n  label: ReactNode;\n  value?: ReactNode;\n  secondaryValue?: ReactNode;\n  'aria-label'?: string;\n  markerColor?: string;\n  marker?: ReactNode;\n  selected?: boolean;\n};\n\nexport type ChartLegendProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> & {\n  items: readonly ChartLegendItem[];\n  layout?: 'inline' | 'list';\n  onItemClick?: (item: ChartLegendItem) => void;\n  /** Reports the legend item under the pointer or keyboard focus. */\n  onItemActiveChange?: (item: ChartLegendItem | null) => void;\n};\n\ntype ChartLegendBaseProps = Omit<\n  ChartLegendProps,\n  'layout' | 'onItemActiveChange'\n> & {\n  onItemActiveChange?: ChartLegendItemActiveChangeHandler<ChartLegendItem>;\n};\n\nconst ChartLegendList = ({\n  items,\n  onItemClick,\n  onItemActiveChange,\n  className,\n  role = 'group',\n  'aria-label': ariaLabel = 'Chart legend',\n  style,\n  ...props\n}: ChartLegendBaseProps) => {\n  const listColumns = getChartLegendListColumns(items, onItemClick != null);\n  const gridTemplateColumns = getChartLegendListGridTemplate(listColumns);\n\n  return (\n    <div\n      role={role}\n      aria-label={ariaLabel}\n      className={cn('grid w-full min-w-0', className)}\n      style={{ ...style, gridTemplateColumns }}\n      {...props}\n    >\n      {items.map((item) => (\n        <ChartLegendItemRenderer\n          key={item.id}\n          item={item}\n          layout=\"list\"\n          listColumns={listColumns}\n          onActiveChange={onItemActiveChange}\n          onClick={\n            onItemClick == null\n              ? undefined\n              : () => {\n                  onItemClick(item);\n                }\n          }\n        />\n      ))}\n    </div>\n  );\n};\n\nconst ChartLegendInline = ({\n  items,\n  onItemClick,\n  onItemActiveChange,\n  className,\n  role = 'group',\n  'aria-label': ariaLabel = 'Chart legend',\n  ...props\n}: ChartLegendBaseProps) => {\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [containerWidth, setContainerWidth] = useState<number | null>(null);\n  const [itemWidths, setItemWidths] = useState<Record<string, number>>({});\n  const [badgeWidths, setBadgeWidths] = useState<Record<string, number>>({});\n  const containerRef = useRef<HTMLDivElement>(null);\n  const measurementItemRefs = useRef<Record<string, HTMLDivElement | null>>({});\n  const measurementBadgeRefs = useRef<Record<string, HTMLDivElement | null>>(\n    {}\n  );\n  const isInteractive = onItemClick != null || onItemActiveChange != null;\n\n  const itemIds = useMemo(() => items.map((item) => item.id), [items]);\n\n  const setMeasurementItemRef = useCallback(\n    (id: string, node: HTMLDivElement | null) => {\n      measurementItemRefs.current[id] = node;\n    },\n    []\n  );\n\n  const setMeasurementBadgeRef = useCallback(\n    (count: number, node: HTMLDivElement | null) => {\n      measurementBadgeRefs.current[String(count)] = node;\n    },\n    []\n  );\n\n  useLayoutEffect(() => {\n    const nextItemWidths: Record<string, number> = {};\n    const nextBadgeWidths: Record<string, number> = {};\n\n    items.forEach((item, index) => {\n      const itemWidth = measurementItemRefs.current[item.id]?.offsetWidth;\n      if (itemWidth != null) {\n        nextItemWidths[item.id] = Math.ceil(itemWidth);\n      }\n\n      const hiddenCount = index + 1;\n      const badgeWidth =\n        measurementBadgeRefs.current[String(hiddenCount)]?.offsetWidth;\n      if (badgeWidth != null) {\n        nextBadgeWidths[String(hiddenCount)] = Math.ceil(badgeWidth);\n      }\n    });\n\n    setItemWidths((current) =>\n      widthsMatch(current, nextItemWidths) ? current : nextItemWidths\n    );\n    setBadgeWidths((current) =>\n      widthsMatch(current, nextBadgeWidths) ? current : nextBadgeWidths\n    );\n  }, [isInteractive, items]);\n\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n\n    if (container == null) {\n      return;\n    }\n\n    const updateWidth = (width: number) => {\n      const nextWidth = Math.ceil(width);\n      setContainerWidth((current) =>\n        current === nextWidth ? current : nextWidth\n      );\n    };\n\n    updateWidth(container.clientWidth);\n\n    const observer = new ResizeObserver(([entry]) => {\n      updateWidth(entry?.contentRect.width ?? container.clientWidth);\n    });\n\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, []);\n\n  const visibleCount = useMemo(() => {\n    const hasMeasurements =\n      containerWidth != null &&\n      itemIds.every((id) => itemWidths[id] != null) &&\n      items.every((_, index) => badgeWidths[String(index + 1)] != null);\n\n    if (!hasMeasurements || containerWidth == null) {\n      return items.length;\n    }\n\n    const allItemsWidth = itemIds.reduce(\n      (total, id) => total + (itemWidths[id] ?? 0),\n      Math.max(items.length - 1, 0) * LEGEND_GAP_PX\n    );\n\n    if (allItemsWidth <= containerWidth) {\n      return items.length;\n    }\n\n    for (let count = items.length - 1; count >= 0; count -= 1) {\n      const hiddenCount = items.length - count;\n      const visibleItemsWidth = itemIds\n        .slice(0, count)\n        .reduce((total, id) => total + (itemWidths[id] ?? 0), 0);\n      const gapsWidth = count * LEGEND_GAP_PX;\n      const totalWidth =\n        visibleItemsWidth + gapsWidth + (badgeWidths[String(hiddenCount)] ?? 0);\n\n      if (totalWidth <= containerWidth) {\n        return count;\n      }\n    }\n\n    return 0;\n  }, [badgeWidths, containerWidth, itemIds, itemWidths, items]);\n\n  const hiddenCount = Math.max(items.length - visibleCount, 0);\n  const hasOverflow = hiddenCount > 0;\n  const visibleItems = items.slice(0, visibleCount);\n  const hiddenItems = items.slice(visibleCount);\n\n  useEffect(() => {\n    if (!hasOverflow) {\n      setPopoverOpen(false);\n    }\n  }, [hasOverflow]);\n\n  const renderItem = (item: ChartLegendItem) => (\n    <ChartLegendItemRenderer\n      key={item.id}\n      item={item}\n      onActiveChange={onItemActiveChange}\n      onClick={\n        onItemClick == null\n          ? undefined\n          : () => {\n              onItemClick(item);\n            }\n      }\n    />\n  );\n\n  return (\n    <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n      <PopoverAnchor asChild>\n        <div\n          ref={containerRef}\n          role={role}\n          aria-label={ariaLabel}\n          className={cn(\n            'relative flex w-full min-w-0 items-center gap-space-1 overflow-clip rounded-xs',\n            className\n          )}\n          {...props}\n        >\n          {visibleItems.map(renderItem)}\n\n          {hasOverflow && (\n            <Tooltip title={VIEW_HIDDEN_TOOLTIP}>\n              <PopoverTrigger asChild>\n                <Button\n                  type=\"button\"\n                  size=\"xs\"\n                  color=\"secondary\"\n                  variant=\"plain\"\n                  className=\"focus-visible:ring-focus relative rounded-xs border-transparent bg-transparent p-0 shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1\"\n                  aria-label={`View ${hiddenCount} hidden chart ${\n                    hiddenCount === 1 ? 'legend' : 'legends'\n                  }`}\n                >\n                  <Badge size=\"xxs\" rounded=\"xs\">\n                    {`+${hiddenCount}`}\n                  </Badge>\n                </Button>\n              </PopoverTrigger>\n            </Tooltip>\n          )}\n\n          <div\n            aria-hidden=\"true\"\n            className=\"pointer-events-none invisible absolute left-0 top-0 flex w-max items-center gap-space-1\"\n          >\n            {items.map((item) => (\n              <div\n                key={item.id}\n                ref={(node) => setMeasurementItemRef(item.id, node)}\n                className=\"shrink-0\"\n              >\n                <ChartLegendItemRenderer\n                  item={item}\n                  onClick={onItemClick == null ? undefined : () => undefined}\n                  tabIndex={-1}\n                />\n              </div>\n            ))}\n            {items.map((_, index) => {\n              const count = index + 1;\n              return (\n                <div\n                  key={count}\n                  ref={(node) => setMeasurementBadgeRef(count, node)}\n                  className=\"shrink-0\"\n                >\n                  <Badge size=\"xxs\" rounded=\"xs\">\n                    {`+${count}`}\n                  </Badge>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </PopoverAnchor>\n\n      {hasOverflow && (\n        <PopoverContent\n          align=\"end\"\n          className=\"w-max min-w-48 max-w-[min(24rem,calc(100vw-2rem))] overflow-hidden border border-subtle p-0\"\n          aria-label=\"Hidden chart legends\"\n          onInteractOutside={(event) => {\n            if (\n              event.target instanceof Node &&\n              containerRef.current?.contains(event.target)\n            ) {\n              event.preventDefault();\n            }\n          }}\n        >\n          <div className=\"scroll-mask-t scroll-mask-b flex max-h-[min(300px,70vh)] flex-col gap-space-1 overflow-y-auto overflow-x-hidden p-space-1\">\n            {hiddenItems.map(renderItem)}\n          </div>\n        </PopoverContent>\n      )}\n    </Popover>\n  );\n};\n\nexport const ChartLegend = ({\n  layout = 'inline',\n  items,\n  onItemActiveChange,\n  ...props\n}: ChartLegendProps) => {\n  const handleItemActiveChange = useChartLegendActiveItem(\n    items,\n    onItemActiveChange\n  );\n  const activeChangeHandler =\n    onItemActiveChange == null ? undefined : handleItemActiveChange;\n  const legendProps = {\n    ...props,\n    items,\n    onItemActiveChange: activeChangeHandler,\n  };\n\n  return layout === 'list' ? (\n    <ChartLegendList {...legendProps} />\n  ) : (\n    <ChartLegendInline {...legendProps} />\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import type { ChartLegendItem } from './ChartLegend.js';
+import type { ChartLegendItemActiveChangeHandler } from './useChartLegendActiveItem.js';
+import { type ChartLegendListColumns } from './utils.js';
+type ChartLegendItemRendererProps = {
+    item: ChartLegendItem;
+    onClick?: () => void;
+    onActiveChange?: ChartLegendItemActiveChangeHandler<ChartLegendItem>;
+    className?: string;
+    tabIndex?: number;
+    layout?: 'inline' | 'list';
+    listColumns?: ChartLegendListColumns;
+};
+export declare const ChartLegendItemRenderer: ({ item, onClick, onActiveChange, className, tabIndex, layout, listColumns, }: ChartLegendItemRendererProps) => import("react").JSX.Element;
+export {};

package/dist/components/ChartLegend/ChartLegendItemRenderer.js

@@ -0,0 +1,90 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { Icon } from "../Icon/Icon.js";
+import { Button } from "../Button/Button.js";
+import { getChartLegendAriaLabel } from "./utils.js";
+import { useEffect, useEffectEvent, useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FunnelIcon } from "@phosphor-icons/react/dist/ssr/Funnel";
+//#region packages/components/src/components/ChartLegend/ChartLegendItemRenderer.tsx
+var ChartLegendItemRenderer = ({ item, onClick, onActiveChange, className, tabIndex, layout = "inline", listColumns }) => {
+	const labelId = useId();
+	const clearActivity = useEffectEvent(() => {
+		onActiveChange?.(item, "pointer", false);
+		onActiveChange?.(item, "focus", false);
+	});
+	useEffect(() => () => clearActivity(), []);
+	const isList = layout === "list";
+	const defaultAriaLabel = getChartLegendAriaLabel(item.label, isList ? item.value : void 0, isList ? item.secondaryValue : void 0);
+	const ariaLabel = item["aria-label"] ?? defaultAriaLabel;
+	const marker = item.marker ?? (item.markerColor != null ? /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: "size-2 shrink-0 rounded-full",
+		style: { backgroundColor: item.markerColor }
+	}) : null);
+	const action = onClick != null || item.selected ? /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": "true",
+		icon: FunnelIcon,
+		weight: item.selected ? "fill" : void 0,
+		size: "xs",
+		className: cn("size-3 shrink-0 text-icon-tertiary transition-opacity duration-fast", item.selected ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100")
+	}) : null;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		isList && listColumns?.marker ? marker ?? /* @__PURE__ */ jsx("div", { "aria-hidden": true }) : marker,
+		/* @__PURE__ */ jsx(Text, {
+			id: labelId,
+			as: "span",
+			variant: "xs",
+			className: cn("min-w-0 flex-1 text-left", isList ? "whitespace-normal break-words" : "truncate"),
+			children: item.label
+		}),
+		isList && listColumns?.value && (item.value != null ? /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			variant: "xs",
+			className: "shrink-0 text-right tabular-nums",
+			children: item.value
+		}) : /* @__PURE__ */ jsx("div", { "aria-hidden": true })),
+		isList && listColumns?.secondaryValue && (item.secondaryValue != null ? /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			variant: "xs",
+			color: "tertiary",
+			className: "shrink-0 text-right tabular-nums",
+			children: item.secondaryValue
+		}) : /* @__PURE__ */ jsx("div", { "aria-hidden": true })),
+		isList && listColumns?.action ? action ?? /* @__PURE__ */ jsx("div", { "aria-hidden": true }) : action
+	] });
+	const styles = cn("group relative min-w-0 items-center rounded-xs py-space-1 text-primary transition-colors duration-fast", isList ? "col-span-full grid w-full grid-cols-subgrid gap-space-2 px-space-2" : "flex max-w-full shrink-0 gap-space-1 px-space-1", item.selected ? "bg-surface-level-3 hover:bg-surface-level-3" : (onClick != null || onActiveChange != null) && "hover:bg-surface-level-1-hover focus-visible:bg-surface-level-1-hover", className);
+	if (onClick == null) return /* @__PURE__ */ jsx("div", {
+		className: cn(styles, onActiveChange != null && "focus-visible:ring-focus focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset"),
+		role: onActiveChange == null ? void 0 : "group",
+		"aria-label": onActiveChange == null ? void 0 : ariaLabel,
+		"aria-labelledby": onActiveChange != null && ariaLabel == null ? labelId : void 0,
+		tabIndex: onActiveChange == null ? tabIndex : tabIndex ?? 0,
+		onPointerEnter: () => onActiveChange?.(item, "pointer", true),
+		onPointerLeave: () => onActiveChange?.(item, "pointer", false),
+		onFocus: () => onActiveChange?.(item, "focus", true),
+		onBlur: () => onActiveChange?.(item, "focus", false),
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		size: "xs",
+		color: "secondary",
+		variant: "plain",
+		className: cn(styles, "focus-visible:ring-focus border-transparent shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset", isList && "justify-start", !item.selected && "bg-transparent"),
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel == null ? labelId : void 0,
+		"aria-pressed": item.selected ?? false,
+		tabIndex,
+		onPointerEnter: () => onActiveChange?.(item, "pointer", true),
+		onPointerLeave: () => onActiveChange?.(item, "pointer", false),
+		onFocus: () => onActiveChange?.(item, "focus", true),
+		onBlur: () => onActiveChange?.(item, "focus", false),
+		onClick,
+		children: content
+	});
+};
+//#endregion
+export { ChartLegendItemRenderer };
+
+//# sourceMappingURL=ChartLegendItemRenderer.js.map

package/dist/components/ChartLegend/ChartLegendItemRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegendItemRenderer.js","names":[],"sources":["../../../src/components/ChartLegend/ChartLegendItemRenderer.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useId } from 'react';\n\nimport { FunnelIcon } from '@phosphor-icons/react/dist/ssr/Funnel';\n\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\nimport type { ChartLegendItem } from './ChartLegend';\nimport type { ChartLegendItemActiveChangeHandler } from './useChartLegendActiveItem';\nimport { getChartLegendAriaLabel, type ChartLegendListColumns } from './utils';\n\ntype ChartLegendItemRendererProps = {\n  item: ChartLegendItem;\n  onClick?: () => void;\n  onActiveChange?: ChartLegendItemActiveChangeHandler<ChartLegendItem>;\n  className?: string;\n  tabIndex?: number;\n  layout?: 'inline' | 'list';\n  listColumns?: ChartLegendListColumns;\n};\n\nexport const ChartLegendItemRenderer = ({\n  item,\n  onClick,\n  onActiveChange,\n  className,\n  tabIndex,\n  layout = 'inline',\n  listColumns,\n}: ChartLegendItemRendererProps) => {\n  const labelId = useId();\n  const clearActivity = useEffectEvent(() => {\n    onActiveChange?.(item, 'pointer', false);\n    onActiveChange?.(item, 'focus', false);\n  });\n  // Removing a focused or hovered row does not fire blur or pointerleave.\n  useEffect(() => () => clearActivity(), []);\n\n  const isList = layout === 'list';\n  const defaultAriaLabel = getChartLegendAriaLabel(\n    item.label,\n    isList ? item.value : undefined,\n    isList ? item.secondaryValue : undefined\n  );\n  const ariaLabel = item['aria-label'] ?? defaultAriaLabel;\n  const marker =\n    item.marker ??\n    (item.markerColor != null ? (\n      <div\n        aria-hidden\n        className=\"size-2 shrink-0 rounded-full\"\n        style={{ backgroundColor: item.markerColor }}\n      />\n    ) : null);\n  const action =\n    onClick != null || item.selected ? (\n      <Icon\n        aria-hidden=\"true\"\n        icon={FunnelIcon}\n        weight={item.selected ? 'fill' : undefined}\n        size=\"xs\"\n        className={cn(\n          'size-3 shrink-0 text-icon-tertiary transition-opacity duration-fast',\n          item.selected\n            ? 'opacity-100'\n            : 'opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100'\n        )}\n      />\n    ) : null;\n  const content = (\n    <>\n      {isList && listColumns?.marker ? (marker ?? <div aria-hidden />) : marker}\n      <Text\n        id={labelId}\n        as=\"span\"\n        variant=\"xs\"\n        className={cn(\n          'min-w-0 flex-1 text-left',\n          isList ? 'whitespace-normal break-words' : 'truncate'\n        )}\n      >\n        {item.label}\n      </Text>\n      {isList &&\n        listColumns?.value &&\n        (item.value != null ? (\n          <Text\n            as=\"span\"\n            variant=\"xs\"\n            className=\"shrink-0 text-right tabular-nums\"\n          >\n            {item.value}\n          </Text>\n        ) : (\n          <div aria-hidden />\n        ))}\n      {isList &&\n        listColumns?.secondaryValue &&\n        (item.secondaryValue != null ? (\n          <Text\n            as=\"span\"\n            variant=\"xs\"\n            color=\"tertiary\"\n            className=\"shrink-0 text-right tabular-nums\"\n          >\n            {item.secondaryValue}\n          </Text>\n        ) : (\n          <div aria-hidden />\n        ))}\n      {isList && listColumns?.action ? (action ?? <div aria-hidden />) : action}\n    </>\n  );\n\n  const styles = cn(\n    'group relative min-w-0 items-center rounded-xs py-space-1 text-primary transition-colors duration-fast',\n    isList\n      ? 'col-span-full grid w-full grid-cols-subgrid gap-space-2 px-space-2'\n      : 'flex max-w-full shrink-0 gap-space-1 px-space-1',\n    item.selected\n      ? 'bg-surface-level-3 hover:bg-surface-level-3'\n      : (onClick != null || onActiveChange != null) &&\n          'hover:bg-surface-level-1-hover focus-visible:bg-surface-level-1-hover',\n    className\n  );\n\n  if (onClick == null) {\n    return (\n      <div\n        className={cn(\n          styles,\n          onActiveChange != null &&\n            'focus-visible:ring-focus focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset'\n        )}\n        role={onActiveChange == null ? undefined : 'group'}\n        aria-label={onActiveChange == null ? undefined : ariaLabel}\n        aria-labelledby={\n          onActiveChange != null && ariaLabel == null ? labelId : undefined\n        }\n        tabIndex={onActiveChange == null ? tabIndex : (tabIndex ?? 0)}\n        onPointerEnter={() => onActiveChange?.(item, 'pointer', true)}\n        onPointerLeave={() => onActiveChange?.(item, 'pointer', false)}\n        onFocus={() => onActiveChange?.(item, 'focus', true)}\n        onBlur={() => onActiveChange?.(item, 'focus', false)}\n      >\n        {content}\n      </div>\n    );\n  }\n\n  return (\n    <Button\n      type=\"button\"\n      size=\"xs\"\n      color=\"secondary\"\n      variant=\"plain\"\n      className={cn(\n        styles,\n        'focus-visible:ring-focus border-transparent shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset',\n        isList && 'justify-start',\n        !item.selected && 'bg-transparent'\n      )}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabel == null ? labelId : undefined}\n      aria-pressed={item.selected ?? false}\n      tabIndex={tabIndex}\n      onPointerEnter={() => onActiveChange?.(item, 'pointer', true)}\n      onPointerLeave={() => onActiveChange?.(item, 'pointer', false)}\n      onFocus={() => onActiveChange?.(item, 'focus', true)}\n      onBlur={() => onActiveChange?.(item, 'focus', false)}\n      onClick={onClick}\n    >\n      {content}\n    </Button>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { ChartLegend } from './ChartLegend.js';
+export type { ChartLegendItem, ChartLegendProps } from './ChartLegend.js';
+export { getAccessibleText } from './utils.js';

package/dist/components/ChartLegend/index.js

@@ -0,0 +1,3 @@
+import { getAccessibleText } from "./utils.js";
+import { ChartLegend } from "./ChartLegend.js";
+export { ChartLegend, getAccessibleText };

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

@@ -0,0 +1,7 @@
+export type ChartLegendActiveSource = 'pointer' | 'focus';
+export type ChartLegendItemActiveChangeHandler<T extends {
+    id: string;
+}> = (item: T, source: ChartLegendActiveSource, active: boolean) => void;
+export declare const useChartLegendActiveItem: <T extends {
+    id: string;
+}>(items: readonly T[], onActiveItemChange?: (item: T | null) => void, disabled?: boolean) => ChartLegendItemActiveChangeHandler<T>;

package/dist/components/ChartLegend/useChartLegendActiveItem.js

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef } from "react";
+//#region packages/components/src/components/ChartLegend/useChartLegendActiveItem.ts
+var useChartLegendActiveItem = (items, onActiveItemChange, disabled = false) => {
+	const pointerItemRef = useRef(null);
+	const focusItemRef = useRef(null);
+	const reportedItemIdRef = useRef(null);
+	const onActiveItemChangeRef = useRef(onActiveItemChange);
+	useEffect(() => {
+		onActiveItemChangeRef.current = onActiveItemChange;
+	}, [onActiveItemChange]);
+	const reportActiveItem = useCallback((item, source, active) => {
+		const activeItemRef = source === "pointer" ? pointerItemRef : focusItemRef;
+		if (active) activeItemRef.current = item;
+		else if (activeItemRef.current?.id === item.id) activeItemRef.current = null;
+		const activeItem = disabled ? null : pointerItemRef.current ?? focusItemRef.current;
+		const activeItemId = activeItem?.id ?? null;
+		if (reportedItemIdRef.current === activeItemId) return;
+		reportedItemIdRef.current = activeItemId;
+		onActiveItemChange?.(activeItem);
+	}, [disabled, onActiveItemChange]);
+	const clearActiveItem = useCallback(() => {
+		const hadActiveItem = reportedItemIdRef.current != null;
+		pointerItemRef.current = null;
+		focusItemRef.current = null;
+		reportedItemIdRef.current = null;
+		if (hadActiveItem) onActiveItemChangeRef.current?.(null);
+	}, []);
+	const itemIdsKey = disabled ? "" : JSON.stringify(items.map((item) => item.id).sort());
+	useEffect(() => () => clearActiveItem(), [itemIdsKey, clearActiveItem]);
+	return reportActiveItem;
+};
+//#endregion
+export { useChartLegendActiveItem };
+
+//# sourceMappingURL=useChartLegendActiveItem.js.map

package/dist/components/ChartLegend/useChartLegendActiveItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartLegendActiveItem.js","names":[],"sources":["../../../src/components/ChartLegend/useChartLegendActiveItem.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nexport type ChartLegendActiveSource = 'pointer' | 'focus';\n\nexport type ChartLegendItemActiveChangeHandler<T extends { id: string }> = (\n  item: T,\n  source: ChartLegendActiveSource,\n  active: boolean\n) => void;\n\nexport const useChartLegendActiveItem = <T extends { id: string }>(\n  items: readonly T[],\n  onActiveItemChange?: (item: T | null) => void,\n  disabled = false\n) => {\n  const pointerItemRef = useRef<T | null>(null);\n  const focusItemRef = useRef<T | null>(null);\n  const reportedItemIdRef = useRef<string | null>(null);\n  // Keep cleanup subscribed to the latest handler without requiring React 19.2.\n  const onActiveItemChangeRef = useRef(onActiveItemChange);\n  useEffect(() => {\n    onActiveItemChangeRef.current = onActiveItemChange;\n  }, [onActiveItemChange]);\n\n  const reportActiveItem = useCallback<ChartLegendItemActiveChangeHandler<T>>(\n    (item, source, active) => {\n      const activeItemRef =\n        source === 'pointer' ? pointerItemRef : focusItemRef;\n\n      if (active) activeItemRef.current = item;\n      else if (activeItemRef.current?.id === item.id)\n        activeItemRef.current = null;\n\n      const activeItem = disabled\n        ? null\n        : (pointerItemRef.current ?? focusItemRef.current);\n      const activeItemId = activeItem?.id ?? null;\n      if (reportedItemIdRef.current === activeItemId) return;\n\n      reportedItemIdRef.current = activeItemId;\n      onActiveItemChange?.(activeItem);\n    },\n    [disabled, onActiveItemChange]\n  );\n\n  const clearActiveItem = useCallback(() => {\n    const hadActiveItem = reportedItemIdRef.current != null;\n    pointerItemRef.current = null;\n    focusItemRef.current = null;\n    reportedItemIdRef.current = null;\n    if (hadActiveItem) onActiveItemChangeRef.current?.(null);\n  }, []);\n  const itemIdsKey = disabled\n    ? ''\n    : JSON.stringify(items.map((item) => item.id).sort());\n\n  useEffect(() => () => clearActiveItem(), [itemIdsKey, clearActiveItem]);\n\n  return reportActiveItem;\n};\n"],"mappings":";;AAUA,IAAa,4BACX,OACA,oBACA,WAAW,UACR;CACH,MAAM,iBAAiB,OAAiB,IAAI;CAC5C,MAAM,eAAe,OAAiB,IAAI;CAC1C,MAAM,oBAAoB,OAAsB,IAAI;CAEpD,MAAM,wBAAwB,OAAO,kBAAkB;CACvD,gBAAgB;EACd,sBAAsB,UAAU;CAClC,GAAG,CAAC,kBAAkB,CAAC;CAEvB,MAAM,mBAAmB,aACtB,MAAM,QAAQ,WAAW;EACxB,MAAM,gBACJ,WAAW,YAAY,iBAAiB;EAE1C,IAAI,QAAQ,cAAc,UAAU;OAC/B,IAAI,cAAc,SAAS,OAAO,KAAK,IAC1C,cAAc,UAAU;EAE1B,MAAM,aAAa,WACf,OACC,eAAe,WAAW,aAAa;EAC5C,MAAM,eAAe,YAAY,MAAM;EACvC,IAAI,kBAAkB,YAAY,cAAc;EAEhD,kBAAkB,UAAU;EAC5B,qBAAqB,UAAU;CACjC,GACA,CAAC,UAAU,kBAAkB,CAC/B;CAEA,MAAM,kBAAkB,kBAAkB;EACxC,MAAM,gBAAgB,kBAAkB,WAAW;EACnD,eAAe,UAAU;EACzB,aAAa,UAAU;EACvB,kBAAkB,UAAU;EAC5B,IAAI,eAAe,sBAAsB,UAAU,IAAI;CACzD,GAAG,CAAC,CAAC;CACL,MAAM,aAAa,WACf,KACA,KAAK,UAAU,MAAM,KAAK,SAAS,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC;CAEtD,sBAAsB,gBAAgB,GAAG,CAAC,YAAY,eAAe,CAAC;CAEtE,OAAO;AACT"}

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+type ChartLegendListItem = {
+    marker?: ReactNode;
+    markerColor?: string;
+    value?: ReactNode;
+    secondaryValue?: ReactNode;
+    selected?: boolean;
+};
+export type ChartLegendListColumns = {
+    marker: boolean;
+    value: boolean;
+    secondaryValue: boolean;
+    action: boolean;
+};
+export declare const getAccessibleText: (value: ReactNode) => string | undefined;
+export declare const getChartLegendAriaLabel: (label: ReactNode, value?: ReactNode, secondaryValue?: ReactNode) => string | undefined;
+export declare const getChartLegendListColumns: (items: readonly ChartLegendListItem[], hasItemClick: boolean) => ChartLegendListColumns;
+export declare const getChartLegendListGridTemplate: (columns: ChartLegendListColumns) => string;
+export declare const widthsMatch: (current: Record<string, number>, next: Record<string, number>) => boolean;
+export {};

package/dist/components/ChartLegend/utils.js

@@ -0,0 +1,33 @@
+//#region packages/components/src/components/ChartLegend/utils.ts
+var getAccessibleText = (value) => typeof value === "string" || typeof value === "number" || typeof value === "bigint" ? String(value) : void 0;
+var getChartLegendAriaLabel = (label, value, secondaryValue) => {
+	const labelText = getAccessibleText(label);
+	if (labelText == null) return void 0;
+	return [
+		labelText,
+		getAccessibleText(value),
+		getAccessibleText(secondaryValue)
+	].filter((item) => item != null).join(", ");
+};
+var getChartLegendListColumns = (items, hasItemClick) => ({
+	marker: items.some((item) => item.marker != null || item.markerColor != null),
+	value: items.some((item) => item.value != null),
+	secondaryValue: items.some((item) => item.secondaryValue != null),
+	action: hasItemClick || items.some((item) => item.selected)
+});
+var getChartLegendListGridTemplate = (columns) => [
+	...columns.marker ? ["auto"] : [],
+	"minmax(0, 1fr)",
+	...columns.value ? ["auto"] : [],
+	...columns.secondaryValue ? ["auto"] : [],
+	...columns.action ? ["auto"] : []
+].join(" ");
+var widthsMatch = (current, next) => {
+	const currentKeys = Object.keys(current);
+	const nextKeys = Object.keys(next);
+	return currentKeys.length === nextKeys.length && nextKeys.every((key) => current[key] === next[key]);
+};
+//#endregion
+export { getAccessibleText, getChartLegendAriaLabel, getChartLegendListColumns, getChartLegendListGridTemplate, widthsMatch };
+
+//# sourceMappingURL=utils.js.map

package/dist/components/ChartLegend/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/ChartLegend/utils.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\ntype ChartLegendListItem = {\n  marker?: ReactNode;\n  markerColor?: string;\n  value?: ReactNode;\n  secondaryValue?: ReactNode;\n  selected?: boolean;\n};\n\nexport type ChartLegendListColumns = {\n  marker: boolean;\n  value: boolean;\n  secondaryValue: boolean;\n  action: boolean;\n};\n\nexport const getAccessibleText = (value: ReactNode) =>\n  typeof value === 'string' ||\n  typeof value === 'number' ||\n  typeof value === 'bigint'\n    ? String(value)\n    : undefined;\n\nexport const getChartLegendAriaLabel = (\n  label: ReactNode,\n  value?: ReactNode,\n  secondaryValue?: ReactNode\n) => {\n  const labelText = getAccessibleText(label);\n  if (labelText == null) return undefined;\n\n  return [\n    labelText,\n    getAccessibleText(value),\n    getAccessibleText(secondaryValue),\n  ]\n    .filter((item) => item != null)\n    .join(', ');\n};\n\nexport const getChartLegendListColumns = (\n  items: readonly ChartLegendListItem[],\n  hasItemClick: boolean\n): ChartLegendListColumns => ({\n  marker: items.some((item) => item.marker != null || item.markerColor != null),\n  value: items.some((item) => item.value != null),\n  secondaryValue: items.some((item) => item.secondaryValue != null),\n  action: hasItemClick || items.some((item) => item.selected),\n});\n\nexport const getChartLegendListGridTemplate = (\n  columns: ChartLegendListColumns\n) =>\n  [\n    ...(columns.marker ? ['auto'] : []),\n    'minmax(0, 1fr)',\n    ...(columns.value ? ['auto'] : []),\n    ...(columns.secondaryValue ? ['auto'] : []),\n    ...(columns.action ? ['auto'] : []),\n  ].join(' ');\n\nexport const widthsMatch = (\n  current: Record<string, number>,\n  next: Record<string, number>\n) => {\n  const currentKeys = Object.keys(current);\n  const nextKeys = Object.keys(next);\n\n  return (\n    currentKeys.length === nextKeys.length &&\n    nextKeys.every((key) => current[key] === next[key])\n  );\n};\n"],"mappings":";AAiBA,IAAa,qBAAqB,UAChC,OAAO,UAAU,YACjB,OAAO,UAAU,YACjB,OAAO,UAAU,WACb,OAAO,KAAK,IACZ,KAAA;AAEN,IAAa,2BACX,OACA,OACA,mBACG;CACH,MAAM,YAAY,kBAAkB,KAAK;CACzC,IAAI,aAAa,MAAM,OAAO,KAAA;CAE9B,OAAO;EACL;EACA,kBAAkB,KAAK;EACvB,kBAAkB,cAAc;CAClC,CAAC,CACE,QAAQ,SAAS,QAAQ,IAAI,CAAC,CAC9B,KAAK,IAAI;AACd;AAEA,IAAa,6BACX,OACA,kBAC4B;CAC5B,QAAQ,MAAM,MAAM,SAAS,KAAK,UAAU,QAAQ,KAAK,eAAe,IAAI;CAC5E,OAAO,MAAM,MAAM,SAAS,KAAK,SAAS,IAAI;CAC9C,gBAAgB,MAAM,MAAM,SAAS,KAAK,kBAAkB,IAAI;CAChE,QAAQ,gBAAgB,MAAM,MAAM,SAAS,KAAK,QAAQ;AAC5D;AAEA,IAAa,kCACX,YAEA;CACE,GAAI,QAAQ,SAAS,CAAC,MAAM,IAAI,CAAC;CACjC;CACA,GAAI,QAAQ,QAAQ,CAAC,MAAM,IAAI,CAAC;CAChC,GAAI,QAAQ,iBAAiB,CAAC,MAAM,IAAI,CAAC;CACzC,GAAI,QAAQ,SAAS,CAAC,MAAM,IAAI,CAAC;AACnC,CAAC,CAAC,KAAK,GAAG;AAEZ,IAAa,eACX,SACA,SACG;CACH,MAAM,cAAc,OAAO,KAAK,OAAO;CACvC,MAAM,WAAW,OAAO,KAAK,IAAI;CAEjC,OACE,YAAY,WAAW,SAAS,UAChC,SAAS,OAAO,QAAQ,QAAQ,SAAS,KAAK,IAAI;AAEtD"}

package/dist/components/ChartTooltip/ChartTooltip.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ChartTooltipProps = HTMLAttributes<HTMLDivElement>;
+export declare const ChartTooltip: import("react").ForwardRefExoticComponent<ChartTooltipProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ChartTooltipHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    value?: ReactNode;
+    leading?: ReactNode;
+}
+export declare function ChartTooltipHeader({ title, value, leading, className, ...props }: ChartTooltipHeaderProps): import("react").JSX.Element;
+export type ChartTooltipBodyProps = HTMLAttributes<HTMLDivElement>;
+export declare function ChartTooltipBody({ className, children, ...props }: ChartTooltipBodyProps): import("react").JSX.Element;
+export interface ChartTooltipRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    label: ReactNode;
+    value?: ReactNode;
+    secondaryValue?: ReactNode;
+    markerColor?: string;
+    marker?: ReactNode;
+    /** Highlights the row matching the currently hovered or focused chart mark. Defaults to false. */
+    highlighted?: boolean;
+    variant?: 'default' | 'total';
+    action?: ReactNode;
+}
+export declare function ChartTooltipRow({ label, value, secondaryValue, markerColor, marker, highlighted, variant, action, className, ...props }: ChartTooltipRowProps): import("react").JSX.Element;

package/dist/components/ChartTooltip/ChartTooltip.js

@@ -0,0 +1,83 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/ChartTooltip/ChartTooltip.tsx
+var ChartTooltip = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	role: "tooltip",
+	className: cn("flex w-max max-w-[24rem] flex-col rounded-md border border-subtle bg-elevated p-space-1 text-primary shadow-md", className),
+	...props,
+	children
+}));
+ChartTooltip.displayName = "ChartTooltip";
+function ChartTooltipHeader({ title, value, leading, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-space-6 px-space-2 py-space-1",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-center gap-space-2",
+				children: [leading, /* @__PURE__ */ jsx(Text, {
+					variant: "xs",
+					weight: "medium",
+					className: "min-w-0 flex-1 truncate",
+					children: title
+				})]
+			}), value != null && /* @__PURE__ */ jsx(Text, {
+				variant: "xs",
+				weight: "semibold",
+				className: "shrink-0 tabular-nums",
+				children: value
+			})]
+		})
+	});
+}
+function ChartTooltipBody({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("scroll-mask-t scroll-mask-b flex max-h-[min(300px,70vh)] flex-col overflow-y-auto overflow-x-hidden", className),
+		...props,
+		children
+	});
+}
+function ChartTooltipRow({ label, value, secondaryValue, markerColor, marker, highlighted = false, variant = "default", action, className, ...props }) {
+	const isTotal = variant === "total";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isTotal && /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: "mx-space-2 my-space-1 border-t border-subtle"
+	}), /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 items-center gap-space-2 rounded-xs px-space-2 py-space-1", highlighted && "bg-surface-level-2", className),
+		...props,
+		children: [
+			marker ?? (markerColor != null && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "size-2 shrink-0 rounded-full",
+				style: { backgroundColor: markerColor }
+			})),
+			/* @__PURE__ */ jsx(Text, {
+				variant: "xs",
+				weight: isTotal ? "semibold" : "normal",
+				className: "min-w-0 flex-1 whitespace-normal break-words",
+				children: label
+			}),
+			value != null && /* @__PURE__ */ jsx(Text, {
+				variant: "xs",
+				weight: isTotal ? "semibold" : "normal",
+				className: "shrink-0 text-right tabular-nums",
+				children: value
+			}),
+			secondaryValue != null && /* @__PURE__ */ jsx(Text, {
+				variant: "xs",
+				color: "tertiary",
+				className: "shrink-0 text-right tabular-nums",
+				children: secondaryValue
+			}),
+			action
+		]
+	})] });
+}
+//#endregion
+export { ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow };
+
+//# sourceMappingURL=ChartTooltip.js.map

package/dist/components/ChartTooltip/ChartTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.js","names":[],"sources":["../../../src/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { Text } from '../Text';\n\nexport type ChartTooltipProps = HTMLAttributes<HTMLDivElement>;\n\nexport const ChartTooltip = forwardRef<HTMLDivElement, ChartTooltipProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"tooltip\"\n      className={cn(\n        'flex w-max max-w-[24rem] flex-col rounded-md border border-subtle bg-elevated p-space-1 text-primary shadow-md',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n\nChartTooltip.displayName = 'ChartTooltip';\n\nexport interface ChartTooltipHeaderProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  title: ReactNode;\n  value?: ReactNode;\n  leading?: ReactNode;\n}\n\nexport function ChartTooltipHeader({\n  title,\n  value,\n  leading,\n  className,\n  ...props\n}: ChartTooltipHeaderProps) {\n  return (\n    <div className={className} {...props}>\n      <div className=\"flex min-w-0 items-center gap-space-6 px-space-2 py-space-1\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-space-2\">\n          {leading}\n          <Text\n            variant=\"xs\"\n            weight=\"medium\"\n            className=\"min-w-0 flex-1 truncate\"\n          >\n            {title}\n          </Text>\n        </div>\n        {value != null && (\n          <Text\n            variant=\"xs\"\n            weight=\"semibold\"\n            className=\"shrink-0 tabular-nums\"\n          >\n            {value}\n          </Text>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport type ChartTooltipBodyProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ChartTooltipBody({\n  className,\n  children,\n  ...props\n}: ChartTooltipBodyProps) {\n  return (\n    <div\n      className={cn(\n        'scroll-mask-t scroll-mask-b flex max-h-[min(300px,70vh)] flex-col overflow-y-auto overflow-x-hidden',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface ChartTooltipRowProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  label: ReactNode;\n  value?: ReactNode;\n  secondaryValue?: ReactNode;\n  markerColor?: string;\n  marker?: ReactNode;\n  /** Highlights the row matching the currently hovered or focused chart mark. Defaults to false. */\n  highlighted?: boolean;\n  variant?: 'default' | 'total';\n  action?: ReactNode;\n}\n\nexport function ChartTooltipRow({\n  label,\n  value,\n  secondaryValue,\n  markerColor,\n  marker,\n  highlighted = false,\n  variant = 'default',\n  action,\n  className,\n  ...props\n}: ChartTooltipRowProps) {\n  const isTotal = variant === 'total';\n\n  return (\n    <>\n      {isTotal && (\n        <div\n          aria-hidden\n          className=\"mx-space-2 my-space-1 border-t border-subtle\"\n        />\n      )}\n      <div\n        className={cn(\n          'flex min-w-0 items-center gap-space-2 rounded-xs px-space-2 py-space-1',\n          highlighted && 'bg-surface-level-2',\n          className\n        )}\n        {...props}\n      >\n        {marker ??\n          (markerColor != null && (\n            <div\n              aria-hidden\n              className=\"size-2 shrink-0 rounded-full\"\n              style={{ backgroundColor: markerColor }}\n            />\n          ))}\n        <Text\n          variant=\"xs\"\n          weight={isTotal ? 'semibold' : 'normal'}\n          className=\"min-w-0 flex-1 whitespace-normal break-words\"\n        >\n          {label}\n        </Text>\n        {value != null && (\n          <Text\n            variant=\"xs\"\n            weight={isTotal ? 'semibold' : 'normal'}\n            className=\"shrink-0 text-right tabular-nums\"\n          >\n            {value}\n          </Text>\n        )}\n        {secondaryValue != null && (\n          <Text\n            variant=\"xs\"\n            color=\"tertiary\"\n            className=\"shrink-0 text-right tabular-nums\"\n          >\n            {secondaryValue}\n          </Text>\n        )}\n        {action}\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;AAOA,IAAa,eAAe,YACzB,EAAE,WAAW,UAAU,GAAG,SAAS,QAClC,oBAAC,OAAD;CACO;CACL,MAAK;CACL,WAAW,GACT,kHACA,SACF;CACA,GAAI;CAEH;AACE,CAAA,CAET;AAEA,aAAa,cAAc;AAW3B,SAAgB,mBAAmB,EACjC,OACA,OACA,SACA,WACA,GAAG,SACuB;CAC1B,OACE,oBAAC,OAAD;EAAgB;EAAW,GAAI;EAC7B,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SACD,oBAAC,MAAD;KACE,SAAQ;KACR,QAAO;KACP,WAAU;KAET,UAAA;IACG,CAAA,CACH;GACJ,CAAA,GAAA,SAAS,QACR,oBAAC,MAAD;IACE,SAAQ;IACR,QAAO;IACP,WAAU;IAET,UAAA;GACG,CAAA,CAEL;;CACF,CAAA;AAET;AAIA,SAAgB,iBAAiB,EAC/B,WACA,UACA,GAAG,SACqB;CACxB,OACE,oBAAC,OAAD;EACE,WAAW,GACT,uGACA,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET;AAiBA,SAAgB,gBAAgB,EAC9B,OACA,OACA,gBACA,aACA,QACA,cAAc,OACd,UAAU,WACV,QACA,WACA,GAAG,SACoB;CACvB,MAAM,UAAU,YAAY;CAE5B,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,WACC,oBAAC,OAAD;EACE,eAAA;EACA,WAAU;CACX,CAAA,GAEH,qBAAC,OAAD;EACE,WAAW,GACT,0EACA,eAAe,sBACf,SACF;EACA,GAAI;EANN,UAAA;GAQG,WACE,eAAe,QACd,oBAAC,OAAD;IACE,eAAA;IACA,WAAU;IACV,OAAO,EAAE,iBAAiB,YAAY;GACvC,CAAA;GAEL,oBAAC,MAAD;IACE,SAAQ;IACR,QAAQ,UAAU,aAAa;IAC/B,WAAU;IAET,UAAA;GACG,CAAA;GACL,SAAS,QACR,oBAAC,MAAD;IACE,SAAQ;IACR,QAAQ,UAAU,aAAa;IAC/B,WAAU;IAET,UAAA;GACG,CAAA;GAEP,kBAAkB,QACjB,oBAAC,MAAD;IACE,SAAQ;IACR,OAAM;IACN,WAAU;IAET,UAAA;GACG,CAAA;GAEP;EACE;CACL,CAAA,CAAA,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,2 @@
+export { ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow, } from './ChartTooltip.js';
+export type { ChartTooltipBodyProps, ChartTooltipHeaderProps, ChartTooltipProps, ChartTooltipRowProps, } from './ChartTooltip.js';

package/dist/components/ChartTooltip/index.js

@@ -0,0 +1,2 @@
+import { ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow } from "./ChartTooltip.js";
+export { ChartTooltip, ChartTooltipBody, ChartTooltipHeader, ChartTooltipRow };