@langchain/macaw-components 1.0.0-beta.0

package/dist/components/DonutChart/DonutChart.js

@@ -0,0 +1,197 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { CHART_DIMMED_OPACITY } from "../../utils/chartConstants.js";
+import { ChartLegend } from "../ChartLegend/ChartLegend.js";
+import { collateDonutSegments, getDonutLegendItems, getDrawnSegments, sumSegmentValues } from "./DonutChart.utils.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { animated, useReducedMotion, useSpring } from "@react-spring/web";
+import { Group } from "@visx/group";
+import { Pie } from "@visx/shape";
+//#region packages/components/src/components/DonutChart/DonutChart.tsx
+var DONUT_VIEWBOX = 200;
+var DONUT_CENTER = DONUT_VIEWBOX / 2;
+var DONUT_OUTER_RADIUS = 92;
+var DONUT_INNER_RADIUS = DONUT_OUTER_RADIUS * .64;
+var numberFormatter = new Intl.NumberFormat("en-US");
+var formatSegmentValue = (value) => numberFormatter.format(value);
+/**
+* Sizes the center number against the donut hole: `1cqi` is 1% of the hole's
+* width, so a longer value resolves to a smaller size, capped at the heading
+* size so short values do not balloon.
+*/
+var getFittedCenterFontSize = (value) => `min(1.75rem, ${100 / (value.length * .7)}cqi)`;
+var AnimatedDonutArc = ({ arc, path, animationProgress, animationStartAngle, animationEndAngle, isDimmed, onPointerMove, onPointerOut, onPointerUp, onFocus, onBlur, ...ariaProps }) => {
+	const isInteractive = onPointerMove != null || onPointerOut != null || onPointerUp != null;
+	const handlePointerDown = (event) => {
+		if ((event.pointerType === "mouse" || event.pointerType === "pen") && event.currentTarget.hasAttribute("tabindex")) event.preventDefault();
+	};
+	return /* @__PURE__ */ jsx(animated.path, {
+		fill: arc.data.color,
+		opacity: isDimmed ? CHART_DIMMED_OPACITY : 1,
+		className: cn("transition-opacity duration-fast focus:outline-none focus-visible:stroke-focus focus-visible:stroke-2 motion-reduce:transition-none", isInteractive && "cursor-pointer"),
+		d: animationProgress.to((progress) => {
+			const revealAngle = animationStartAngle + (animationEndAngle - animationStartAngle) * progress;
+			const endAngle = Math.min(arc.endAngle, Math.max(arc.startAngle, revealAngle));
+			return path({
+				...arc,
+				endAngle
+			}) ?? "";
+		}),
+		role: ariaProps["aria-label"] == null ? void 0 : "graphics-symbol img",
+		tabIndex: ariaProps["aria-label"] == null ? void 0 : 0,
+		...ariaProps,
+		onPointerMove,
+		onPointerDown: handlePointerDown,
+		onPointerOut,
+		onPointerUp,
+		onFocus,
+		onBlur
+	});
+};
+/**
+* DonutChart renders a donut and its `ChartLegend` from a flat list of
+* segments. Consumers own the segment palette and pair the chart
+* with `ChartCard` and their own tooltip.
+*
+* The legend sits below the donut in narrow containers and beside it once the
+* container passes 496px. Pass `showLegend={false}` for the donut alone,
+* `legendProps` to configure the legend, and `legendProps.onItemClick` with
+* `selectedIds` to make legend entries filter the donut. A long tail of tiny
+* slices collapses into one "Other" slice via `otherCollationThreshold`, which
+* absorbs any segment flagged `isOther`.
+
+*/
+var DonutChart = ({ segments, selectedIds, centerNumber, centerDescriptor, scaleCenterNumberSize = false, activeSegmentId, activeLegendItemId, shouldAnimate = true, getSegmentAriaLabel, isRendering = true, otherCollationThreshold, showLegend = true, legendProps, formatValue = formatSegmentValue, onSegmentPointerMove, onSegmentPointerOut, onSegmentPointerUp, onSegmentFocus, onSegmentBlur, className, ...rest }) => {
+	const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState(null);
+	const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;
+	const ariaProps = { "aria-label": rest["aria-label"] };
+	const rootProps = { ...rest };
+	delete rootProps["aria-label"];
+	const collatedSegments = collateDonutSegments(segments, otherCollationThreshold);
+	const drawnSegments = getDrawnSegments(collatedSegments, selectedIds);
+	const renderedSegments = drawnSegments.filter((segment) => segment.value > 0);
+	const drawnTotal = sumSegmentValues(drawnSegments);
+	const drawnIds = new Set(drawnSegments.map((segment) => segment.id));
+	const drawnArcIds = new Set(renderedSegments.map((segment) => segment.id));
+	const hasDrawnSegments = isRendering && drawnTotal > 0;
+	const segmentAnimationKey = JSON.stringify(renderedSegments.map((segment) => [segment.id, segment.value]));
+	const [animation] = useSpring(() => ({
+		from: { progress: 0 },
+		to: { progress: hasDrawnSegments ? 1 : 0 },
+		reset: true,
+		immediate: isReducedMotion
+	}), [
+		segmentAnimationKey,
+		hasDrawnSegments,
+		isReducedMotion
+	]);
+	const legendItems = getDonutLegendItems({
+		segments: collatedSegments,
+		selectedIds,
+		drawnIds,
+		drawnTotal,
+		formatValue
+	});
+	const hasLegend = showLegend && collatedSegments.length > 0;
+	const legendLayout = legendProps?.layout ?? "list";
+	const requestedActiveLegendItemId = (hasLegend ? activeBuiltInLegendItemId : null) ?? activeLegendItemId;
+	const renderedActiveLegendItemId = requestedActiveLegendItemId != null && drawnArcIds.has(requestedActiveLegendItemId) ? requestedActiveLegendItemId : null;
+	const renderedActiveSegmentId = activeSegmentId != null && drawnArcIds.has(activeSegmentId) ? activeSegmentId : null;
+	const activeId = renderedActiveLegendItemId ?? renderedActiveSegmentId;
+	const donut = /* @__PURE__ */ jsx("div", {
+		className: "relative flex size-full min-h-0 min-w-0 items-center justify-center [&>svg]:max-h-[22.5rem] [&>svg]:max-w-[22.5rem]",
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: `0 0 ${DONUT_VIEWBOX} ${DONUT_VIEWBOX}`,
+			preserveAspectRatio: "xMidYMid meet",
+			className: "size-full",
+			role: getSegmentAriaLabel == null ? "img" : "graphics-document group",
+			...ariaProps,
+			children: isRendering && /* @__PURE__ */ jsxs(Fragment$1, { children: [drawnTotal > 0 && /* @__PURE__ */ jsx(Group, {
+				top: DONUT_CENTER,
+				left: DONUT_CENTER,
+				className: cn(activeId == null && "[&:focus-within>path:not(:focus)]:opacity-[0.45] [&>path:focus]:opacity-100"),
+				children: /* @__PURE__ */ jsx(Pie, {
+					data: renderedSegments,
+					pieValue: (segment) => segment.value,
+					pieSort: null,
+					pieSortValues: null,
+					outerRadius: DONUT_OUTER_RADIUS,
+					innerRadius: DONUT_INNER_RADIUS,
+					children: (donut) => {
+						const animationStartAngle = donut.arcs[0]?.startAngle ?? 0;
+						const animationEndAngle = donut.arcs.at(-1)?.endAngle ?? animationStartAngle;
+						return donut.arcs.map((arc) => /* @__PURE__ */ jsx(AnimatedDonutArc, {
+							arc,
+							path: donut.path,
+							animationProgress: animation.progress,
+							animationStartAngle,
+							animationEndAngle,
+							"aria-label": getSegmentAriaLabel?.(arc.data),
+							isDimmed: activeId != null && activeId !== arc.data.id,
+							onPointerMove: onSegmentPointerMove == null ? void 0 : (event) => onSegmentPointerMove(arc.data, event),
+							onPointerOut: onSegmentPointerOut,
+							onPointerUp: onSegmentPointerUp == null ? void 0 : (event) => onSegmentPointerUp(arc.data, event),
+							onFocus: onSegmentFocus == null ? void 0 : (event) => onSegmentFocus(arc.data, event),
+							onBlur: onSegmentBlur == null ? void 0 : (event) => onSegmentBlur(arc.data, event)
+						}, arc.data.id));
+					}
+				})
+			}), (centerNumber || centerDescriptor) != null && /* @__PURE__ */ jsx("foreignObject", {
+				x: 41.12,
+				y: 41.12,
+				width: DONUT_INNER_RADIUS * 2,
+				height: DONUT_INNER_RADIUS * 2,
+				className: "pointer-events-none",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex size-full min-w-0 flex-col items-center justify-center",
+					style: { containerType: "inline-size" },
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						variant: "h2",
+						weight: "semibold",
+						className: cn(scaleCenterNumberSize && "block w-full text-center"),
+						style: scaleCenterNumberSize && centerNumber != null ? { fontSize: getFittedCenterFontSize(centerNumber) } : void 0,
+						children: centerNumber
+					}), /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						variant: "xs",
+						color: "tertiary",
+						children: centerDescriptor
+					})]
+				})
+			})] })
+		})
+	});
+	const legend = /* @__PURE__ */ jsx(ChartLegend, {
+		"aria-label": ariaProps["aria-label"] == null ? void 0 : `${ariaProps["aria-label"]} legend`,
+		...legendProps,
+		layout: legendLayout,
+		items: legendItems,
+		onItemActiveChange: (item) => {
+			setActiveBuiltInLegendItemId(item?.id ?? null);
+			legendProps?.onItemActiveChange?.(item);
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("size-full min-h-0 min-w-0 @container", className),
+		...rootProps,
+		children: hasLegend ? /* @__PURE__ */ jsxs("div", {
+			className: cn("grid size-full min-h-0 min-w-0 grid-cols-1 items-center justify-stretch", legendLayout === "list" ? "grid-rows-[minmax(0,1fr)_minmax(0,45%)] gap-space-3 @[496px]:grid-cols-2 @[496px]:grid-rows-[minmax(0,1fr)] @[496px]:justify-center @[496px]:gap-space-5" : "grid-rows-[minmax(0,1fr)_auto] gap-space-2"),
+			children: [donut, legendLayout === "list" ? /* @__PURE__ */ jsx("div", {
+				className: "scroll-mask-t scroll-mask-b h-full min-h-0 min-w-0 overflow-y-auto overflow-x-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex min-h-full flex-col",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "my-auto",
+						children: legend
+					})
+				})
+			}) : legend]
+		}) : donut
+	});
+};
+//#endregion
+export { DonutChart };
+
+//# sourceMappingURL=DonutChart.js.map

package/dist/components/DonutChart/DonutChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.js","names":[],"sources":["../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import {\n  useState,\n  type AriaAttributes,\n  type FocusEvent,\n  type FocusEventHandler,\n  type HTMLAttributes,\n  type PointerEvent,\n  type PointerEventHandler,\n  type ReactNode,\n} from 'react';\n\nimport {\n  animated,\n  type SpringValue,\n  useReducedMotion,\n  useSpring,\n} from '@react-spring/web';\nimport { Group } from '@visx/group';\nimport { Pie as Donut } from '@visx/shape';\n\nimport { CHART_DIMMED_OPACITY } from '../../utils/chartConstants';\nimport { cn } from '../../utils/cn';\nimport { ChartLegend, type ChartLegendProps } from '../ChartLegend';\nimport { Text } from '../Text';\nimport {\n  collateDonutSegments,\n  getDonutLegendItems,\n  getDrawnSegments,\n  sumSegmentValues,\n} from './DonutChart.utils';\n\n// Viewport-invariant units. The donut renders into a fixed-size viewBox and\n// scales via `preserveAspectRatio=\"xMidYMid meet\"`.\nconst DONUT_VIEWBOX = 200;\nconst DONUT_CENTER = DONUT_VIEWBOX / 2;\nconst DONUT_OUTER_RADIUS = DONUT_CENTER - 8;\nconst DONUT_INNER_RADIUS = DONUT_OUTER_RADIUS * 0.64;\n\nconst numberFormatter = new Intl.NumberFormat('en-US');\n\nconst formatSegmentValue = (value: number) => numberFormatter.format(value);\n\n/**\n * Sizes the center number against the donut hole: `1cqi` is 1% of the hole's\n * width, so a longer value resolves to a smaller size, capped at the heading\n * size so short values do not balloon.\n */\nconst getFittedCenterFontSize = (value: string) =>\n  `min(1.75rem, ${100 / (value.length * 0.7)}cqi)`;\n\nexport type DonutChartSegment = {\n  id: string;\n  label: ReactNode;\n  value: number;\n  /** Use DS CSS color token; typically a `var(--chart-...)` reference. */\n  color: string;\n  /**\n   * Marks a segment that already stands for a group of others — a remainder the\n   * data source rolled up, say. `otherCollationThreshold` merges it with the\n   * tail it collates instead of drawing a second \"Other\" beside it.\n   */\n  isOther?: boolean;\n};\n\ntype DonutArcDatumLike<Datum> = {\n  data: Datum;\n  value: number;\n  index: number;\n  startAngle: number;\n  endAngle: number;\n  padAngle: number;\n};\n\n/**\n * Everything `ChartLegend` accepts except `items`, which the donut derives from\n * `segments`. Namespacing these under `legendProps` keeps `className` and the\n * other DOM attributes on the chart root unambiguous.\n */\ntype DonutChartLegendProps = Omit<ChartLegendProps, 'items'>;\n\n/**\n * `legendProps` only exists while there is a legend to configure: with\n * `showLegend={false}` it narrows to `never`, so autocomplete stops offering it\n * and passing it is a type error rather than a silently ignored prop.\n */\ntype DonutChartLegendConfig =\n  | {\n      /** Defaults to true. */\n      showLegend?: true;\n      /** Forwarded to the rendered `ChartLegend`. */\n      legendProps?: DonutChartLegendProps;\n    }\n  | {\n      showLegend: false;\n      legendProps?: never;\n    };\n\nexport type DonutChartProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children' | 'onPointerOut'\n> &\n  DonutChartLegendConfig & {\n    segments: readonly DonutChartSegment[];\n    /**\n     * When provided and non-empty, only segments whose IDs are in the set are\n     * rendered in the donut. Unselected segments stay in the legend with a 0%\n     * share. IDs address the collated list, so the segments behind an \"Other\"\n     * slice are selected as `DONUT_OTHER_SEGMENT_ID` rather than individually. A\n     * set naming none of those IDs draws everything, so a selection outliving\n     * the data it was made against cannot empty the chart.\n     */\n    selectedIds?: ReadonlySet<string>;\n    /**\n     * Number to render in the donut hole.\n     */\n    centerNumber?: string;\n    /**\n     * Descriptor for the number in the donut hole.\n     */\n    centerDescriptor?: string;\n    /**\n     * Scales `centerNumber` to the width of the donut hole.\n     */\n    scaleCenterNumberSize?: boolean;\n    /** Emphasizes one segment and dims the rest. */\n    activeSegmentId?: string | null;\n    /** Emphasizes the segment represented by one external legend item. Built-in legends set this automatically. */\n    activeLegendItemId?: string | null;\n    /** Animates segments when they are drawn. Defaults to true. */\n    shouldAnimate?: boolean;\n    /** Names segments and makes them focusable. */\n    getSegmentAriaLabel?: (\n      segment: DonutChartSegment\n    ) => AriaAttributes['aria-label'];\n    /**\n     * Set to false to skip drawing the donut. Use it to avoid the work while a\n     * parent container is actively resizing. Defaults to true.\n     */\n    isRendering?: boolean;\n    /**\n     * Collates segments less than this set number to an \"Other\" slice, automatically merging any segment flagged `isOther`. Do not pass a value to render all segments, even if they are tiny.\n     */\n    otherCollationThreshold?: number;\n    /**\n     * Formats each segment's value for the legend. Defaults to a plain\n     * `en-US` number; pass a unit-aware formatter for durations, bytes, cost.\n     */\n    formatValue?: (value: number) => ReactNode;\n    onSegmentPointerMove?: (\n      segment: DonutChartSegment,\n      event: PointerEvent<SVGPathElement>\n    ) => void;\n    onSegmentPointerOut?: () => void;\n    onSegmentPointerUp?: (\n      segment: DonutChartSegment,\n      event: PointerEvent<SVGPathElement>\n    ) => void;\n    onSegmentFocus?: (\n      segment: DonutChartSegment,\n      event: FocusEvent<SVGPathElement>\n    ) => void;\n    onSegmentBlur?: (\n      segment: DonutChartSegment,\n      event: FocusEvent<SVGPathElement>\n    ) => void;\n  };\n\ntype AnimatedDonutArcProps = {\n  arc: DonutArcDatumLike<DonutChartSegment>;\n  path: (arc: DonutArcDatumLike<DonutChartSegment>) => string | null;\n  animationProgress: SpringValue<number>;\n  animationStartAngle: number;\n  animationEndAngle: number;\n  'aria-label'?: AriaAttributes['aria-label'];\n  isDimmed: boolean;\n  onPointerMove?: PointerEventHandler<SVGPathElement>;\n  onPointerOut?: () => void;\n  onPointerUp?: PointerEventHandler<SVGPathElement>;\n  onFocus?: FocusEventHandler<SVGPathElement>;\n  onBlur?: FocusEventHandler<SVGPathElement>;\n};\n\nconst AnimatedDonutArc = ({\n  arc,\n  path,\n  animationProgress,\n  animationStartAngle,\n  animationEndAngle,\n  isDimmed,\n  onPointerMove,\n  onPointerOut,\n  onPointerUp,\n  onFocus,\n  onBlur,\n  ...ariaProps\n}: AnimatedDonutArcProps) => {\n  const isInteractive =\n    onPointerMove != null || onPointerOut != null || onPointerUp != null;\n  const handlePointerDown = (event: PointerEvent<SVGPathElement>) => {\n    // Chromium can match :focus-visible when a focusable SVG path is clicked.\n    // Keep the focus indicator for keyboard navigation without showing it for\n    // pointer interaction.\n    if (\n      (event.pointerType === 'mouse' || event.pointerType === 'pen') &&\n      event.currentTarget.hasAttribute('tabindex')\n    ) {\n      event.preventDefault();\n    }\n  };\n\n  return (\n    <animated.path\n      fill={arc.data.color}\n      opacity={isDimmed ? CHART_DIMMED_OPACITY : 1}\n      className={cn(\n        'transition-opacity duration-fast focus:outline-none focus-visible:stroke-focus focus-visible:stroke-2 motion-reduce:transition-none',\n        isInteractive && 'cursor-pointer'\n      )}\n      d={animationProgress.to((progress) => {\n        const revealAngle =\n          animationStartAngle +\n          (animationEndAngle - animationStartAngle) * progress;\n        const endAngle = Math.min(\n          arc.endAngle,\n          Math.max(arc.startAngle, revealAngle)\n        );\n        return path({ ...arc, endAngle }) ?? '';\n      })}\n      role={ariaProps['aria-label'] == null ? undefined : 'graphics-symbol img'}\n      tabIndex={ariaProps['aria-label'] == null ? undefined : 0}\n      {...ariaProps}\n      onPointerMove={onPointerMove}\n      onPointerDown={handlePointerDown}\n      onPointerOut={onPointerOut}\n      onPointerUp={onPointerUp}\n      onFocus={onFocus}\n      onBlur={onBlur}\n    />\n  );\n};\n\n/**\n * DonutChart renders a donut and its `ChartLegend` from a flat list of\n * segments. Consumers own the segment palette and pair the chart\n * with `ChartCard` and their own tooltip.\n *\n * The legend sits below the donut in narrow containers and beside it once the\n * container passes 496px. Pass `showLegend={false}` for the donut alone,\n * `legendProps` to configure the legend, and `legendProps.onItemClick` with\n * `selectedIds` to make legend entries filter the donut. A long tail of tiny\n * slices collapses into one \"Other\" slice via `otherCollationThreshold`, which\n * absorbs any segment flagged `isOther`.\n\n */\nexport const DonutChart = ({\n  segments,\n  selectedIds,\n  centerNumber,\n  centerDescriptor,\n  scaleCenterNumberSize = false,\n  activeSegmentId,\n  activeLegendItemId,\n  shouldAnimate = true,\n  getSegmentAriaLabel,\n  isRendering = true,\n  otherCollationThreshold,\n  showLegend = true,\n  legendProps,\n  formatValue = formatSegmentValue,\n  onSegmentPointerMove,\n  onSegmentPointerOut,\n  onSegmentPointerUp,\n  onSegmentFocus,\n  onSegmentBlur,\n  className,\n  ...rest\n}: DonutChartProps) => {\n  const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState<\n    string | null\n  >(null);\n  const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;\n  const ariaProps = { 'aria-label': rest['aria-label'] };\n  const rootProps: HTMLAttributes<HTMLDivElement> = { ...rest };\n  delete rootProps['aria-label'];\n\n  // Collation happens before the selection, so the legend lists the same rows\n  // the donut draws arcs for and neither reflows while filtering.\n  const collatedSegments = collateDonutSegments(\n    segments,\n    otherCollationThreshold\n  );\n  const drawnSegments = getDrawnSegments(collatedSegments, selectedIds);\n  const renderedSegments = drawnSegments.filter((segment) => segment.value > 0);\n  const drawnTotal = sumSegmentValues(drawnSegments);\n  const drawnIds = new Set(drawnSegments.map((segment) => segment.id));\n  const drawnArcIds = new Set(renderedSegments.map((segment) => segment.id));\n  const hasDrawnSegments = isRendering && drawnTotal > 0;\n  const segmentAnimationKey = JSON.stringify(\n    renderedSegments.map((segment) => [segment.id, segment.value])\n  );\n  // A single sweep angle reveals the arcs in sequence, leaving only one moving\n  // boundary regardless of how many colored segments the donut contains.\n  const [animation] = useSpring(\n    () => ({\n      from: { progress: 0 },\n      to: { progress: hasDrawnSegments ? 1 : 0 },\n      reset: true,\n      immediate: isReducedMotion,\n    }),\n    [segmentAnimationKey, hasDrawnSegments, isReducedMotion]\n  );\n\n  const legendItems = getDonutLegendItems({\n    segments: collatedSegments,\n    selectedIds,\n    drawnIds,\n    drawnTotal,\n    formatValue,\n  });\n  const hasLegend = showLegend && collatedSegments.length > 0;\n  const legendLayout = legendProps?.layout ?? 'list';\n  const requestedActiveLegendItemId =\n    (hasLegend ? activeBuiltInLegendItemId : null) ?? activeLegendItemId;\n  const renderedActiveLegendItemId =\n    requestedActiveLegendItemId != null &&\n    drawnArcIds.has(requestedActiveLegendItemId)\n      ? requestedActiveLegendItemId\n      : null;\n  const renderedActiveSegmentId =\n    activeSegmentId != null && drawnArcIds.has(activeSegmentId)\n      ? activeSegmentId\n      : null;\n  const activeId = renderedActiveLegendItemId ?? renderedActiveSegmentId;\n\n  const donut = (\n    <div className=\"relative flex size-full min-h-0 min-w-0 items-center justify-center [&>svg]:max-h-[22.5rem] [&>svg]:max-w-[22.5rem]\">\n      <svg\n        viewBox={`0 0 ${DONUT_VIEWBOX} ${DONUT_VIEWBOX}`}\n        preserveAspectRatio=\"xMidYMid meet\"\n        className=\"size-full\"\n        role={getSegmentAriaLabel == null ? 'img' : 'graphics-document group'}\n        {...ariaProps}\n      >\n        {isRendering && (\n          <>\n            {drawnTotal > 0 && (\n              <Group\n                top={DONUT_CENTER}\n                left={DONUT_CENTER}\n                className={cn(\n                  activeId == null &&\n                    '[&:focus-within>path:not(:focus)]:opacity-[0.45] [&>path:focus]:opacity-100'\n                )}\n              >\n                <Donut\n                  data={renderedSegments}\n                  pieValue={(segment) => segment.value}\n                  pieSort={null}\n                  pieSortValues={null}\n                  outerRadius={DONUT_OUTER_RADIUS}\n                  innerRadius={DONUT_INNER_RADIUS}\n                >\n                  {(donut) => {\n                    const animationStartAngle = donut.arcs[0]?.startAngle ?? 0;\n                    const animationEndAngle =\n                      donut.arcs.at(-1)?.endAngle ?? animationStartAngle;\n                    return donut.arcs.map((arc) => (\n                      <AnimatedDonutArc\n                        key={arc.data.id}\n                        arc={arc}\n                        path={donut.path}\n                        animationProgress={animation.progress}\n                        animationStartAngle={animationStartAngle}\n                        animationEndAngle={animationEndAngle}\n                        aria-label={getSegmentAriaLabel?.(arc.data)}\n                        isDimmed={activeId != null && activeId !== arc.data.id}\n                        onPointerMove={\n                          onSegmentPointerMove == null\n                            ? undefined\n                            : (event) => onSegmentPointerMove(arc.data, event)\n                        }\n                        onPointerOut={onSegmentPointerOut}\n                        onPointerUp={\n                          onSegmentPointerUp == null\n                            ? undefined\n                            : (event) => onSegmentPointerUp(arc.data, event)\n                        }\n                        onFocus={\n                          onSegmentFocus == null\n                            ? undefined\n                            : (event) => onSegmentFocus(arc.data, event)\n                        }\n                        onBlur={\n                          onSegmentBlur == null\n                            ? undefined\n                            : (event) => onSegmentBlur(arc.data, event)\n                        }\n                      />\n                    ));\n                  }}\n                </Donut>\n              </Group>\n            )}\n            {(centerNumber || centerDescriptor) != null && (\n              <foreignObject\n                x={DONUT_CENTER - DONUT_INNER_RADIUS}\n                y={DONUT_CENTER - DONUT_INNER_RADIUS}\n                width={DONUT_INNER_RADIUS * 2}\n                height={DONUT_INNER_RADIUS * 2}\n                className=\"pointer-events-none\"\n              >\n                <div\n                  className=\"flex size-full min-w-0 flex-col items-center justify-center\"\n                  style={{ containerType: 'inline-size' }}\n                >\n                  <Text\n                    as=\"span\"\n                    variant=\"h2\"\n                    weight=\"semibold\"\n                    className={cn(\n                      scaleCenterNumberSize && 'block w-full text-center'\n                    )}\n                    style={\n                      scaleCenterNumberSize && centerNumber != null\n                        ? { fontSize: getFittedCenterFontSize(centerNumber) }\n                        : undefined\n                    }\n                  >\n                    {centerNumber}\n                  </Text>\n                  <Text as=\"span\" variant=\"xs\" color=\"tertiary\">\n                    {centerDescriptor}\n                  </Text>\n                </div>\n              </foreignObject>\n            )}\n          </>\n        )}\n      </svg>\n    </div>\n  );\n\n  const legend = (\n    <ChartLegend\n      aria-label={\n        ariaProps['aria-label'] == null\n          ? undefined\n          : `${ariaProps['aria-label']} legend`\n      }\n      {...legendProps}\n      layout={legendLayout}\n      items={legendItems}\n      onItemActiveChange={(item) => {\n        setActiveBuiltInLegendItemId(item?.id ?? null);\n        legendProps?.onItemActiveChange?.(item);\n      }}\n    />\n  );\n\n  return (\n    <div\n      className={cn('size-full min-h-0 min-w-0 @container', className)}\n      {...rootProps}\n    >\n      {hasLegend ? (\n        <div\n          className={cn(\n            'grid size-full min-h-0 min-w-0 grid-cols-1 items-center justify-stretch',\n            legendLayout === 'list'\n              ? 'grid-rows-[minmax(0,1fr)_minmax(0,45%)] gap-space-3 @[496px]:grid-cols-2 @[496px]:grid-rows-[minmax(0,1fr)] @[496px]:justify-center @[496px]:gap-space-5'\n              : 'grid-rows-[minmax(0,1fr)_auto] gap-space-2'\n          )}\n        >\n          {donut}\n          {legendLayout === 'list' ? (\n            <div className=\"scroll-mask-t scroll-mask-b h-full min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\">\n              <div className=\"flex min-h-full flex-col\">\n                <div className=\"my-auto\">{legend}</div>\n              </div>\n            </div>\n          ) : (\n            legend\n          )}\n        </div>\n      ) : (\n        donut\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import type { ChartLegendItem } from '../ChartLegend/index.js';
+import type { DonutChartSegment } from './DonutChart.js';
+export declare const sumSegmentValues: (segments: readonly DonutChartSegment[]) => number;
+/**
+ * Folds a segment's long tail into one "Other" segment appended after the ones
+ * that clear `threshold`. Segments already flagged `isOther` — a rollup the
+ * data source computed, say — merge into that same segment rather than sitting
+ * beside a second one wearing the same label and color. Invalid values are
+ * normalized to zero. Without a threshold, valid segments pass through untouched.
+ *
+ * `DonutChart` applies this itself; call it directly when you also need the
+ * collated list — to total the values behind the center number, for instance.
+ */
+export declare const collateDonutSegments: (segments: readonly DonutChartSegment[], threshold: number | undefined) => readonly DonutChartSegment[];
+/**
+ * Filters collated segments to a legend selection. An empty or absent selection
+ * draws everything, and so does a selection that names no segment the donut
+ * has: ids outlive the data they came from — a group can be collated away or
+ * disappear from a refetch — and drawing nothing would strand the chart empty
+ * with no row left to toggle the stale id off.
+ */
+export declare const getDrawnSegments: (segments: readonly DonutChartSegment[], selectedIds: ReadonlySet<string> | undefined) => DonutChartSegment[];
+/**
+ * Every segment stays in the legend, including filtered-out ones — those report
+ * a 0% share so the list does not reflow while filtering. Rows correspond to
+ * arcs one for one, so shares are measured against the drawn total.
+ *
+ * A row reports a share when its arc is drawn rather than when it is selected,
+ * so the two cannot disagree about what the donut is showing.
+ */
+export declare const getDonutLegendItems: ({ segments, selectedIds, drawnIds, drawnTotal, formatValue, }: {
+    segments: readonly DonutChartSegment[];
+    selectedIds: ReadonlySet<string> | undefined;
+    drawnIds: ReadonlySet<string>;
+    drawnTotal: number;
+    formatValue: (value: number) => ReactNode;
+}) => readonly ChartLegendItem[];

package/dist/components/DonutChart/DonutChart.utils.js

@@ -0,0 +1,93 @@
+import { CHART_OTHER_COLOR } from "../../utils/chartColors.js";
+import { DONUT_OTHER_SEGMENT_ID, DONUT_OTHER_SEGMENT_LABEL } from "./constants.js";
+//#region packages/components/src/components/DonutChart/DonutChart.utils.ts
+var percentFormatter = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+var sumSegmentValues = (segments) => segments.reduce((sum, segment) => sum + segment.value, 0);
+/**
+* Splits segments into the ones the donut draws on their own and the ones that
+* fold into a single "Other": every segment flagged `isOther` or using the
+* reserved Other ID, plus segments below `threshold` percent of the total.
+*
+* `collapses` is false when there is nothing to fold, and also when the only
+* member is an existing Other segment, so replacing it would change its
+* metadata without changing what is drawn.
+*/
+var partitionSegments = (segments, threshold) => {
+	const total = sumSegmentValues(segments);
+	if (threshold == null || total === 0) return {
+		kept: segments,
+		members: [],
+		collapses: false
+	};
+	const kept = [];
+	const members = [];
+	segments.forEach((segment) => {
+		if (segment.isOther || segment.id === "donut-other" || segment.value / total * 100 < threshold) members.push(segment);
+		else kept.push(segment);
+	});
+	return {
+		kept,
+		members,
+		collapses: members.length > 1 || members.length === 1 && !members[0].isOther && members[0].id !== "donut-other"
+	};
+};
+/**
+* Folds a segment's long tail into one "Other" segment appended after the ones
+* that clear `threshold`. Segments already flagged `isOther` — a rollup the
+* data source computed, say — merge into that same segment rather than sitting
+* beside a second one wearing the same label and color. Invalid values are
+* normalized to zero. Without a threshold, valid segments pass through untouched.
+*
+* `DonutChart` applies this itself; call it directly when you also need the
+* collated list — to total the values behind the center number, for instance.
+*/
+var collateDonutSegments = (segments, threshold) => {
+	const normalizedSegments = segments.some((segment) => !Number.isFinite(segment.value) || segment.value < 0) ? segments.map((segment) => ({
+		...segment,
+		value: Number.isFinite(segment.value) ? Math.max(0, segment.value) : 0
+	})) : segments;
+	const { kept, members, collapses } = partitionSegments(normalizedSegments, threshold);
+	if (!collapses) return normalizedSegments;
+	return [...kept, {
+		id: DONUT_OTHER_SEGMENT_ID,
+		label: DONUT_OTHER_SEGMENT_LABEL,
+		value: sumSegmentValues(members),
+		color: CHART_OTHER_COLOR,
+		isOther: true
+	}];
+};
+/**
+* Filters collated segments to a legend selection. An empty or absent selection
+* draws everything, and so does a selection that names no segment the donut
+* has: ids outlive the data they came from — a group can be collated away or
+* disappear from a refetch — and drawing nothing would strand the chart empty
+* with no row left to toggle the stale id off.
+*/
+var getDrawnSegments = (segments, selectedIds) => {
+	if (selectedIds == null || selectedIds.size === 0) return [...segments];
+	const selected = segments.filter((segment) => selectedIds.has(segment.id));
+	return selected.length > 0 ? selected : [...segments];
+};
+/**
+* Every segment stays in the legend, including filtered-out ones — those report
+* a 0% share so the list does not reflow while filtering. Rows correspond to
+* arcs one for one, so shares are measured against the drawn total.
+*
+* A row reports a share when its arc is drawn rather than when it is selected,
+* so the two cannot disagree about what the donut is showing.
+*/
+var getDonutLegendItems = ({ segments, selectedIds, drawnIds, drawnTotal, formatValue }) => segments.map((segment) => {
+	const isDrawn = drawnIds.has(segment.id);
+	return {
+		id: segment.id,
+		label: segment.label,
+		markerColor: segment.color,
+		value: formatValue(segment.value),
+		secondaryValue: `${percentFormatter.format(isDrawn && drawnTotal > 0 ? segment.value / drawnTotal * 100 : 0)}%`,
+		selected: selectedIds?.has(segment.id) ?? false
+	};
+});
+//#endregion
+export { collateDonutSegments, getDonutLegendItems, getDrawnSegments, sumSegmentValues };
+
+//# sourceMappingURL=DonutChart.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.utils.js","names":[],"sources":["../../../src/components/DonutChart/DonutChart.utils.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { CHART_OTHER_COLOR } from '../../utils/chartColors';\nimport type { ChartLegendItem } from '../ChartLegend';\nimport { DONUT_OTHER_SEGMENT_ID, DONUT_OTHER_SEGMENT_LABEL } from './constants';\nimport type { DonutChartSegment } from './DonutChart';\n\nconst percentFormatter = new Intl.NumberFormat('en-US', {\n  maximumFractionDigits: 1,\n});\n\nexport const sumSegmentValues = (segments: readonly DonutChartSegment[]) =>\n  segments.reduce((sum, segment) => sum + segment.value, 0);\n\n/**\n * Splits segments into the ones the donut draws on their own and the ones that\n * fold into a single \"Other\": every segment flagged `isOther` or using the\n * reserved Other ID, plus segments below `threshold` percent of the total.\n *\n * `collapses` is false when there is nothing to fold, and also when the only\n * member is an existing Other segment, so replacing it would change its\n * metadata without changing what is drawn.\n */\nconst partitionSegments = (\n  segments: readonly DonutChartSegment[],\n  threshold: number | undefined\n): {\n  kept: readonly DonutChartSegment[];\n  members: readonly DonutChartSegment[];\n  collapses: boolean;\n} => {\n  const total = sumSegmentValues(segments);\n  if (threshold == null || total === 0) {\n    return { kept: segments, members: [], collapses: false };\n  }\n\n  const kept: DonutChartSegment[] = [];\n  const members: DonutChartSegment[] = [];\n  segments.forEach((segment) => {\n    if (\n      segment.isOther ||\n      segment.id === DONUT_OTHER_SEGMENT_ID ||\n      (segment.value / total) * 100 < threshold\n    ) {\n      members.push(segment);\n    } else {\n      kept.push(segment);\n    }\n  });\n\n  return {\n    kept,\n    members,\n    collapses:\n      members.length > 1 ||\n      (members.length === 1 &&\n        !members[0].isOther &&\n        members[0].id !== DONUT_OTHER_SEGMENT_ID),\n  };\n};\n\n/**\n * Folds a segment's long tail into one \"Other\" segment appended after the ones\n * that clear `threshold`. Segments already flagged `isOther` — a rollup the\n * data source computed, say — merge into that same segment rather than sitting\n * beside a second one wearing the same label and color. Invalid values are\n * normalized to zero. Without a threshold, valid segments pass through untouched.\n *\n * `DonutChart` applies this itself; call it directly when you also need the\n * collated list — to total the values behind the center number, for instance.\n */\nexport const collateDonutSegments = (\n  segments: readonly DonutChartSegment[],\n  threshold: number | undefined\n): readonly DonutChartSegment[] => {\n  const normalizedSegments = segments.some(\n    (segment) => !Number.isFinite(segment.value) || segment.value < 0\n  )\n    ? segments.map((segment) => ({\n        ...segment,\n        value: Number.isFinite(segment.value) ? Math.max(0, segment.value) : 0,\n      }))\n    : segments;\n  const { kept, members, collapses } = partitionSegments(\n    normalizedSegments,\n    threshold\n  );\n  if (!collapses) return normalizedSegments;\n\n  return [\n    ...kept,\n    {\n      id: DONUT_OTHER_SEGMENT_ID,\n      label: DONUT_OTHER_SEGMENT_LABEL,\n      value: sumSegmentValues(members),\n      color: CHART_OTHER_COLOR,\n      isOther: true,\n    },\n  ];\n};\n\n/**\n * Filters collated segments to a legend selection. An empty or absent selection\n * draws everything, and so does a selection that names no segment the donut\n * has: ids outlive the data they came from — a group can be collated away or\n * disappear from a refetch — and drawing nothing would strand the chart empty\n * with no row left to toggle the stale id off.\n */\nexport const getDrawnSegments = (\n  segments: readonly DonutChartSegment[],\n  selectedIds: ReadonlySet<string> | undefined\n): DonutChartSegment[] => {\n  if (selectedIds == null || selectedIds.size === 0) return [...segments];\n\n  const selected = segments.filter((segment) => selectedIds.has(segment.id));\n  return selected.length > 0 ? selected : [...segments];\n};\n\n/**\n * Every segment stays in the legend, including filtered-out ones — those report\n * a 0% share so the list does not reflow while filtering. Rows correspond to\n * arcs one for one, so shares are measured against the drawn total.\n *\n * A row reports a share when its arc is drawn rather than when it is selected,\n * so the two cannot disagree about what the donut is showing.\n */\nexport const getDonutLegendItems = ({\n  segments,\n  selectedIds,\n  drawnIds,\n  drawnTotal,\n  formatValue,\n}: {\n  segments: readonly DonutChartSegment[];\n  selectedIds: ReadonlySet<string> | undefined;\n  drawnIds: ReadonlySet<string>;\n  drawnTotal: number;\n  formatValue: (value: number) => ReactNode;\n}): readonly ChartLegendItem[] =>\n  segments.map((segment) => {\n    const isDrawn = drawnIds.has(segment.id);\n\n    return {\n      id: segment.id,\n      label: segment.label,\n      markerColor: segment.color,\n      value: formatValue(segment.value),\n      secondaryValue: `${percentFormatter.format(\n        isDrawn && drawnTotal > 0 ? (segment.value / drawnTotal) * 100 : 0\n      )}%`,\n      selected: selectedIds?.has(segment.id) ?? false,\n    };\n  });\n"],"mappings":";;;AAOA,IAAM,mBAAmB,IAAI,KAAK,aAAa,SAAS,EACtD,uBAAuB,EACzB,CAAC;AAED,IAAa,oBAAoB,aAC/B,SAAS,QAAQ,KAAK,YAAY,MAAM,QAAQ,OAAO,CAAC;;;;;;;;;;AAW1D,IAAM,qBACJ,UACA,cAKG;CACH,MAAM,QAAQ,iBAAiB,QAAQ;CACvC,IAAI,aAAa,QAAQ,UAAU,GACjC,OAAO;EAAE,MAAM;EAAU,SAAS,CAAC;EAAG,WAAW;CAAM;CAGzD,MAAM,OAA4B,CAAC;CACnC,MAAM,UAA+B,CAAC;CACtC,SAAS,SAAS,YAAY;EAC5B,IACE,QAAQ,WACR,QAAQ,OAAA,iBACP,QAAQ,QAAQ,QAAS,MAAM,WAEhC,QAAQ,KAAK,OAAO;OAEpB,KAAK,KAAK,OAAO;CAErB,CAAC;CAED,OAAO;EACL;EACA;EACA,WACE,QAAQ,SAAS,KAChB,QAAQ,WAAW,KAClB,CAAC,QAAQ,EAAE,CAAC,WACZ,QAAQ,EAAE,CAAC,OAAA;CACjB;AACF;;;;;;;;;;;AAYA,IAAa,wBACX,UACA,cACiC;CACjC,MAAM,qBAAqB,SAAS,MACjC,YAAY,CAAC,OAAO,SAAS,QAAQ,KAAK,KAAK,QAAQ,QAAQ,CAClE,IACI,SAAS,KAAK,aAAa;EACzB,GAAG;EACH,OAAO,OAAO,SAAS,QAAQ,KAAK,IAAI,KAAK,IAAI,GAAG,QAAQ,KAAK,IAAI;CACvE,EAAE,IACF;CACJ,MAAM,EAAE,MAAM,SAAS,cAAc,kBACnC,oBACA,SACF;CACA,IAAI,CAAC,WAAW,OAAO;CAEvB,OAAO,CACL,GAAG,MACH;EACE,IAAI;EACJ,OAAO;EACP,OAAO,iBAAiB,OAAO;EAC/B,OAAO;EACP,SAAS;CACX,CACF;AACF;;;;;;;;AASA,IAAa,oBACX,UACA,gBACwB;CACxB,IAAI,eAAe,QAAQ,YAAY,SAAS,GAAG,OAAO,CAAC,GAAG,QAAQ;CAEtE,MAAM,WAAW,SAAS,QAAQ,YAAY,YAAY,IAAI,QAAQ,EAAE,CAAC;CACzE,OAAO,SAAS,SAAS,IAAI,WAAW,CAAC,GAAG,QAAQ;AACtD;;;;;;;;;AAUA,IAAa,uBAAuB,EAClC,UACA,aACA,UACA,YACA,kBAQA,SAAS,KAAK,YAAY;CACxB,MAAM,UAAU,SAAS,IAAI,QAAQ,EAAE;CAEvC,OAAO;EACL,IAAI,QAAQ;EACZ,OAAO,QAAQ;EACf,aAAa,QAAQ;EACrB,OAAO,YAAY,QAAQ,KAAK;EAChC,gBAAgB,GAAG,iBAAiB,OAClC,WAAW,aAAa,IAAK,QAAQ,QAAQ,aAAc,MAAM,CACnE,EAAE;EACF,UAAU,aAAa,IAAI,QAAQ,EAAE,KAAK;CAC5C;AACF,CAAC"}

package/dist/components/DonutChart/constants.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ID of the synthetic segment that `otherCollationThreshold` collapses small
+ * segments into. Consumers can match on it to special-case the slice in a
+ * tooltip or to seed `selectedIds`.
+ */
+export declare const DONUT_OTHER_SEGMENT_ID = "donut-other";
+export declare const DONUT_OTHER_SEGMENT_LABEL = "Other";

package/dist/components/DonutChart/constants.js

@@ -0,0 +1,12 @@
+//#region packages/components/src/components/DonutChart/constants.ts
+/**
+* ID of the synthetic segment that `otherCollationThreshold` collapses small
+* segments into. Consumers can match on it to special-case the slice in a
+* tooltip or to seed `selectedIds`.
+*/
+var DONUT_OTHER_SEGMENT_ID = "donut-other";
+var DONUT_OTHER_SEGMENT_LABEL = "Other";
+//#endregion
+export { DONUT_OTHER_SEGMENT_ID, DONUT_OTHER_SEGMENT_LABEL };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/DonutChart/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/DonutChart/constants.ts"],"sourcesContent":["/**\n * ID of the synthetic segment that `otherCollationThreshold` collapses small\n * segments into. Consumers can match on it to special-case the slice in a\n * tooltip or to seed `selectedIds`.\n */\nexport const DONUT_OTHER_SEGMENT_ID = 'donut-other';\n\nexport const DONUT_OTHER_SEGMENT_LABEL = 'Other';\n"],"mappings":";;;;;;AAKA,IAAa,yBAAyB;AAEtC,IAAa,4BAA4B"}

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

@@ -0,0 +1,4 @@
+export { DONUT_OTHER_SEGMENT_ID, DONUT_OTHER_SEGMENT_LABEL } from './constants.js';
+export { DonutChart } from './DonutChart.js';
+export type { DonutChartProps, DonutChartSegment } from './DonutChart.js';
+export { collateDonutSegments } from './DonutChart.utils.js';

package/dist/components/DonutChart/index.js

@@ -0,0 +1,4 @@
+import { DONUT_OTHER_SEGMENT_ID, DONUT_OTHER_SEGMENT_LABEL } from "./constants.js";
+import { collateDonutSegments } from "./DonutChart.utils.js";
+import { DonutChart } from "./DonutChart.js";
+export { DONUT_OTHER_SEGMENT_ID, DONUT_OTHER_SEGMENT_LABEL, DonutChart, collateDonutSegments };

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export declare const DropdownMenu: typeof DropdownMenuPrimitive.Root;
+export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuLabel: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * When true, stops clicks outside the open menu from reaching elements
+     * underneath (e.g. table rows), while leaving scrolling of that content
+     * intact. Radix's outside-click dismiss still works normally.
+     */
+    preventClickThrough?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,149 @@
+import { cn } from "../../utils/cn.js";
+import zIndices from "../../utils/zIndices.js";
+import { useZIndex } from "../../utils/useZIndex.js";
+import { ZIndexProvider } from "../../utils/ZIndexContext.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region packages/components/src/components/DropdownMenu/DropdownMenu.tsx
+var DropdownMenu = (props) => {
+	const [open = false, onOpenChange] = useControllableState({
+		prop: props.open,
+		defaultProp: props.defaultOpen ?? false,
+		onChange: props.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, {
+		...props,
+		open,
+		onOpenChange,
+		defaultOpen: void 0
+	});
+};
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuLabel = DropdownMenuPrimitive.Label;
+/**
+* Stops clicks outside an open dropdown from reaching elements underneath it
+* (e.g. a table row's `onClick`) without covering the viewport, so scrolling
+* the content behind the menu keeps working natively.
+*
+* React delegates `onClick` at the root in the bubble phase, so a capture-phase
+* `click` listener on `document` runs first and can stop the event before it
+* gets there. pointerdown is left alone so Radix's outside-dismiss keeps
+* working; the wheel listener is passive so native scroll is never interrupted,
+* it just also dismisses the menu (an open menu jitters as Radix repositions it
+* to follow its trigger while scrolling).
+*
+* "Inside" is any element with `role="menu"` in its ancestry — Radix gives that
+* role to both the content and its submenus (which portal out separately), so
+* clicks and scrolls inside a submenu are correctly treated as inside.
+*/
+var OutsideClickGuard = () => {
+	const cleanupTimerRef = React$1.useRef(void 0);
+	const pointerDownOutsideRef = React$1.useRef(false);
+	React$1.useLayoutEffect(() => {
+		clearTimeout(cleanupTimerRef.current);
+		pointerDownOutsideRef.current = false;
+		const isOutside = (target) => !(target instanceof Element) || !target.closest("[role=\"menu\"]");
+		const onPointerDown = (event) => {
+			if (isOutside(event.target)) pointerDownOutsideRef.current = true;
+		};
+		document.addEventListener("pointerdown", onPointerDown, true);
+		const onClick = (event) => {
+			if (isOutside(event.target)) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
+		document.addEventListener("click", onClick, true);
+		const onWheel = (event) => {
+			if (isOutside(event.target)) document.dispatchEvent(new KeyboardEvent("keydown", {
+				key: "Escape",
+				bubbles: true
+			}));
+		};
+		document.addEventListener("wheel", onWheel, { passive: true });
+		return () => {
+			document.removeEventListener("pointerdown", onPointerDown, true);
+			document.removeEventListener("click", onClick, true);
+			document.removeEventListener("wheel", onWheel);
+			if (!pointerDownOutsideRef.current) return;
+			const absorb = (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+			};
+			const opts = {
+				capture: true,
+				once: true
+			};
+			document.addEventListener("pointerup", absorb, opts);
+			document.addEventListener("mouseup", absorb, opts);
+			document.addEventListener("click", absorb, opts);
+			cleanupTimerRef.current = setTimeout(() => {
+				if (typeof document === "undefined") return;
+				document.removeEventListener("pointerup", absorb, { capture: true });
+				document.removeEventListener("mouseup", absorb, { capture: true });
+				document.removeEventListener("click", absorb, { capture: true });
+			}, 300);
+		};
+	}, []);
+	return null;
+};
+var DropdownMenuContent = React$1.forwardRef(({ className, sideOffset = 4, children, preventClickThrough, ...props }, ref) => {
+	const zIndex = useZIndex(zIndices.popover);
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Content, {
+		ref,
+		sideOffset,
+		className: cn("min-w-[8rem] overflow-hidden rounded-md border border-subtle bg-popover p-space-1 shadow-lg", className),
+		...props,
+		style: {
+			zIndex,
+			...props.style
+		},
+		children: [preventClickThrough && /* @__PURE__ */ jsx(OutsideClickGuard, {}), /* @__PURE__ */ jsx(ZIndexProvider, {
+			value: zIndex,
+			children
+		})]
+	}) });
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React$1.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
+	ref,
+	className: cn("text-md flex cursor-pointer select-none items-center rounded-sm px-space-2 py-1.5 outline-none transition-colors focus:bg-surface-level-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-space-6", className),
+	...props
+}));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuSeparator = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
+	ref,
+	className: cn("my-space-1 h-px bg-surface-level-2", className),
+	...props
+}));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuSubTrigger = React$1.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubTrigger, {
+	ref,
+	className: cn("text-md flex cursor-pointer select-none items-center rounded-sm px-space-2 py-1.5 outline-none transition-colors focus:bg-surface-level-2 data-[state=open]:bg-surface-level-2", inset && "pl-space-6", className),
+	...props,
+	children
+}));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React$1.forwardRef(({ className, children, ...props }, ref) => {
+	const zIndex = useZIndex(zIndices.popover);
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
+		ref,
+		className: cn("min-w-[8rem] overflow-hidden rounded-md border border-subtle bg-popover p-space-1 shadow-lg", className),
+		style: { zIndex },
+		...props,
+		children: /* @__PURE__ */ jsx(ZIndexProvider, {
+			value: zIndex,
+			children
+		})
+	}) });
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+//#endregion
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+
+//# sourceMappingURL=DropdownMenu.js.map