@langchain/macaw-components 1.0.0-beta.1 → 1.0.0-beta.6

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { type OptionRowSize } from '../../utils/componentSizes.js';
 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>;
@@ -15,10 +16,20 @@ export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<D
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
+    /**
+     * Controls minimum row height and default label typography.
+     * Rich or multiline content grows intrinsically.
+     */
+    size?: OptionRowSize;
 } & 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;
+    /**
+     * Controls minimum row height and default label typography.
+     * Rich or multiline content grows intrinsically.
+     */
+    size?: OptionRowSize;
 } & 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

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { OPTION_ROW_SIZES } from "../../utils/componentSizes.js";
 import zIndices from "../../utils/zIndices.js";
 import { useZIndex } from "../../utils/useZIndex.js";
 import { ZIndexProvider } from "../../utils/ZIndexContext.js";
@@ -109,9 +110,9 @@ var DropdownMenuContent = React$1.forwardRef(({ className, sideOffset = 4, child
 	}) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React$1.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
+var DropdownMenuItem = React$1.forwardRef(({ className, inset, size = "md", ...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),
+	className: cn("flex cursor-pointer select-none items-center rounded-sm px-space-2 py-space-1 outline-none transition-colors focus:bg-surface-level-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", OPTION_ROW_SIZES[size].minHeightClassName, size === "sm" ? "text-xs leading-4" : "text-sm", inset && "pl-space-6", className),
 	...props
 }));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
@@ -122,9 +123,9 @@ var DropdownMenuSeparator = React$1.forwardRef(({ className, ...props }, ref) =>
 }));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
-var DropdownMenuSubTrigger = React$1.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubTrigger, {
+var DropdownMenuSubTrigger = React$1.forwardRef(({ className, inset, children, size = "md", ...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),
+	className: cn("flex cursor-pointer select-none items-center rounded-sm px-space-2 py-space-1 outline-none transition-colors focus:bg-surface-level-2 data-[state=open]:bg-surface-level-2", OPTION_ROW_SIZES[size].minHeightClassName, size === "sm" ? "text-xs leading-4" : "text-sm", inset && "pl-space-6", className),
 	...props,
 	children
 }));

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nimport { cn } from '../../utils/cn';\nimport { useZIndex } from '../../utils/useZIndex';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\n\nexport const DropdownMenu: typeof DropdownMenuPrimitive.Root = (props) => {\n  const [open = false, onOpenChange] = useControllableState({\n    prop: props.open,\n    defaultProp: props.defaultOpen ?? false,\n    onChange: props.onOpenChange,\n  });\n\n  return (\n    <DropdownMenuPrimitive.Root\n      {...props}\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={undefined}\n    />\n  );\n};\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nexport const DropdownMenuLabel = DropdownMenuPrimitive.Label;\n\n/**\n * Stops clicks outside an open dropdown from reaching elements underneath it\n * (e.g. a table row's `onClick`) without covering the viewport, so scrolling\n * the content behind the menu keeps working natively.\n *\n * React delegates `onClick` at the root in the bubble phase, so a capture-phase\n * `click` listener on `document` runs first and can stop the event before it\n * gets there. pointerdown is left alone so Radix's outside-dismiss keeps\n * working; the wheel listener is passive so native scroll is never interrupted,\n * it just also dismisses the menu (an open menu jitters as Radix repositions it\n * to follow its trigger while scrolling).\n *\n * \"Inside\" is any element with `role=\"menu\"` in its ancestry — Radix gives that\n * role to both the content and its submenus (which portal out separately), so\n * clicks and scrolls inside a submenu are correctly treated as inside.\n */\nconst OutsideClickGuard = () => {\n  const cleanupTimerRef =\n    React.useRef<ReturnType<typeof setTimeout>>(undefined);\n  const pointerDownOutsideRef = React.useRef(false);\n\n  React.useLayoutEffect(() => {\n    clearTimeout(cleanupTimerRef.current);\n    pointerDownOutsideRef.current = false;\n\n    const isOutside = (target: EventTarget | null) =>\n      !(target instanceof Element) || !target.closest('[role=\"menu\"]');\n\n    // Observe (don't block) outside pointerdowns: Radix dismisses on them, so\n    // this tells us the trailing click needs absorbing on cleanup.\n    const onPointerDown = (event: PointerEvent) => {\n      if (isOutside(event.target)) pointerDownOutsideRef.current = true;\n    };\n    document.addEventListener('pointerdown', onPointerDown, true);\n\n    // Block clicks that land outside the menu from reaching the content beneath.\n    const onClick = (event: MouseEvent) => {\n      if (isOutside(event.target)) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    };\n    document.addEventListener('click', onClick, true);\n\n    // Dismiss on scroll of the content behind the menu: an anchored menu that\n    // stays open jitters as Radix repositions it to chase its trigger. Passive,\n    // so the wheel still scrolls the content natively on the same gesture.\n    // Scrolling inside the menu (e.g. a details panel) leaves it open.\n    const onWheel = (event: WheelEvent) => {\n      if (isOutside(event.target)) {\n        document.dispatchEvent(\n          new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })\n        );\n      }\n    };\n    document.addEventListener('wheel', onWheel, { passive: true });\n\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown, true);\n      document.removeEventListener('click', onClick, true);\n      document.removeEventListener('wheel', onWheel);\n\n      // Radix dismisses on the outside pointerdown and unmounts this guard\n      // before the trailing click fires, so absorb that one click here. Only\n      // for pointer dismissals — Escape / item selection have no trailing\n      // outside click, and absorbing an unrelated later click would be wrong.\n      if (!pointerDownOutsideRef.current) return;\n\n      const absorb = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n      };\n      const opts = { capture: true, once: true } as const;\n      document.addEventListener('pointerup', absorb, opts);\n      document.addEventListener('mouseup', absorb, opts);\n      document.addEventListener('click', absorb, opts);\n\n      cleanupTimerRef.current = setTimeout(() => {\n        if (typeof document === 'undefined') return;\n        document.removeEventListener('pointerup', absorb, { capture: true });\n        document.removeEventListener('mouseup', absorb, { capture: true });\n        document.removeEventListener('click', absorb, { capture: true });\n      }, 300);\n    };\n  }, []);\n\n  return null;\n};\n\nexport const DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {\n    /**\n     * When true, stops clicks outside the open menu from reaching elements\n     * underneath (e.g. table rows), while leaving scrolling of that content\n     * intact. Radix's outside-click dismiss still works normally.\n     */\n    preventClickThrough?: boolean;\n  }\n>(\n  (\n    { className, sideOffset = 4, children, preventClickThrough, ...props },\n    ref\n  ) => {\n    const zIndex = useZIndex(zIndices.popover);\n\n    return (\n      <DropdownMenuPrimitive.Portal>\n        <DropdownMenuPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          className={cn(\n            'min-w-[8rem] overflow-hidden rounded-md border border-subtle bg-popover p-space-1 shadow-lg',\n            className\n          )}\n          {...props}\n          style={{ zIndex, ...props.style }}\n        >\n          {preventClickThrough && <OutsideClickGuard />}\n          <ZIndexProvider value={zIndex}>{children}</ZIndexProvider>\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    );\n  }\n);\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\nexport const DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean;\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      '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',\n      inset && 'pl-space-6',\n      className\n    )}\n    {...props}\n  />\n));\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nexport const DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn('my-space-1 h-px bg-surface-level-2', className)}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean;\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      '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',\n      inset && 'pl-space-6',\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName;\n\nexport const DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const zIndex = useZIndex(zIndices.popover);\n\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        ref={ref}\n        className={cn(\n          'min-w-[8rem] overflow-hidden rounded-md border border-subtle bg-popover p-space-1 shadow-lg',\n          className\n        )}\n        style={{ zIndex }}\n        {...props}\n      >\n        <ZIndexProvider value={zIndex}>{children}</ZIndexProvider>\n      </DropdownMenuPrimitive.SubContent>\n    </DropdownMenuPrimitive.Portal>\n  );\n});\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName;\n"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nimport { cn } from '../../utils/cn';\nimport {\n  OPTION_ROW_SIZES,\n  type OptionRowSize,\n} from '../../utils/componentSizes';\nimport { useZIndex } from '../../utils/useZIndex';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\n\nexport const DropdownMenu: typeof DropdownMenuPrimitive.Root = (props) => {\n  const [open = false, onOpenChange] = useControllableState({\n    prop: props.open,\n    defaultProp: props.defaultOpen ?? false,\n    onChange: props.onOpenChange,\n  });\n\n  return (\n    <DropdownMenuPrimitive.Root\n      {...props}\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={undefined}\n    />\n  );\n};\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nexport const DropdownMenuLabel = DropdownMenuPrimitive.Label;\n\n/**\n * Stops clicks outside an open dropdown from reaching elements underneath it\n * (e.g. a table row's `onClick`) without covering the viewport, so scrolling\n * the content behind the menu keeps working natively.\n *\n * React delegates `onClick` at the root in the bubble phase, so a capture-phase\n * `click` listener on `document` runs first and can stop the event before it\n * gets there. pointerdown is left alone so Radix's outside-dismiss keeps\n * working; the wheel listener is passive so native scroll is never interrupted,\n * it just also dismisses the menu (an open menu jitters as Radix repositions it\n * to follow its trigger while scrolling).\n *\n * \"Inside\" is any element with `role=\"menu\"` in its ancestry — Radix gives that\n * role to both the content and its submenus (which portal out separately), so\n * clicks and scrolls inside a submenu are correctly treated as inside.\n */\nconst OutsideClickGuard = () => {\n  const cleanupTimerRef =\n    React.useRef<ReturnType<typeof setTimeout>>(undefined);\n  const pointerDownOutsideRef = React.useRef(false);\n\n  React.useLayoutEffect(() => {\n    clearTimeout(cleanupTimerRef.current);\n    pointerDownOutsideRef.current = false;\n\n    const isOutside = (target: EventTarget | null) =>\n      !(target instanceof Element) || !target.closest('[role=\"menu\"]');\n\n    // Observe (don't block) outside pointerdowns: Radix dismisses on them, so\n    // this tells us the trailing click needs absorbing on cleanup.\n    const onPointerDown = (event: PointerEvent) => {\n      if (isOutside(event.target)) pointerDownOutsideRef.current = true;\n    };\n    document.addEventListener('pointerdown', onPointerDown, true);\n\n    // Block clicks that land outside the menu from reaching the content beneath.\n    const onClick = (event: MouseEvent) => {\n      if (isOutside(event.target)) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    };\n    document.addEventListener('click', onClick, true);\n\n    // Dismiss on scroll of the content behind the menu: an anchored menu that\n    // stays open jitters as Radix repositions it to chase its trigger. Passive,\n    // so the wheel still scrolls the content natively on the same gesture.\n    // Scrolling inside the menu (e.g. a details panel) leaves it open.\n    const onWheel = (event: WheelEvent) => {\n      if (isOutside(event.target)) {\n        document.dispatchEvent(\n          new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })\n        );\n      }\n    };\n    document.addEventListener('wheel', onWheel, { passive: true });\n\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown, true);\n      document.removeEventListener('click', onClick, true);\n      document.removeEventListener('wheel', onWheel);\n\n      // Radix dismisses on the outside pointerdown and unmounts this guard\n      // before the trailing click fires, so absorb that one click here. Only\n      // for pointer dismissals — Escape / item selection have no trailing\n      // outside click, and absorbing an unrelated later click would be wrong.\n      if (!pointerDownOutsideRef.current) return;\n\n      const absorb = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n      };\n      const opts = { capture: true, once: true } as const;\n      document.addEventListener('pointerup', absorb, opts);\n      document.addEventListener('mouseup', absorb, opts);\n      document.addEventListener('click', absorb, opts);\n\n      cleanupTimerRef.current = setTimeout(() => {\n        if (typeof document === 'undefined') return;\n        document.removeEventListener('pointerup', absorb, { capture: true });\n        document.removeEventListener('mouseup', absorb, { capture: true });\n        document.removeEventListener('click', absorb, { capture: true });\n      }, 300);\n    };\n  }, []);\n\n  return null;\n};\n\nexport const DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {\n    /**\n     * When true, stops clicks outside the open menu from reaching elements\n     * underneath (e.g. table rows), while leaving scrolling of that content\n     * intact. Radix's outside-click dismiss still works normally.\n     */\n    preventClickThrough?: boolean;\n  }\n>(\n  (\n    { className, sideOffset = 4, children, preventClickThrough, ...props },\n    ref\n  ) => {\n    const zIndex = useZIndex(zIndices.popover);\n\n    return (\n      <DropdownMenuPrimitive.Portal>\n        <DropdownMenuPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          className={cn(\n            'min-w-[8rem] overflow-hidden rounded-md border border-subtle bg-popover p-space-1 shadow-lg',\n            className\n          )}\n          {...props}\n          style={{ zIndex, ...props.style }}\n        >\n          {preventClickThrough && <OutsideClickGuard />}\n          <ZIndexProvider value={zIndex}>{children}</ZIndexProvider>\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    );\n  }\n);\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\nexport const DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean;\n    /**\n     * Controls minimum row height and default label typography.\n     * Rich or multiline content grows intrinsically.\n     */\n    size?: OptionRowSize;\n  }\n>(({ className, inset, size = 'md', ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      'flex cursor-pointer select-none items-center rounded-sm px-space-2 py-space-1 outline-none transition-colors focus:bg-surface-level-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      OPTION_ROW_SIZES[size].minHeightClassName,\n      size === 'sm' ? 'text-xs leading-4' : 'text-sm',\n      inset && 'pl-space-6',\n      className\n    )}\n    {...props}\n  />\n));\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nexport const DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn('my-space-1 h-px bg-surface-level-2', className)}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean;\n    /**\n     * Controls minimum row height and default label typography.\n     * Rich or multiline content grows intrinsically.\n     */\n    size?: OptionRowSize;\n  }\n>(({ className, inset, children, size = 'md', ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-pointer select-none items-center rounded-sm px-space-2 py-space-1 outline-none transition-colors focus:bg-surface-level-2 data-[state=open]:bg-surface-level-2',\n      OPTION_ROW_SIZES[size].minHeightClassName,\n      size === 'sm' ? 'text-xs leading-4' : 'text-sm',\n      inset && 'pl-space-6',\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName;\n\nexport const DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const zIndex = useZIndex(zIndices.popover);\n\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        ref={ref}\n        className={cn(\n          'min-w-[8rem] overflow-hidden rounded-md border border-subtle bg-popover p-space-1 shadow-lg',\n          className\n        )}\n        style={{ zIndex }}\n        {...props}\n      >\n        <ZIndexProvider value={zIndex}>{children}</ZIndexProvider>\n      </DropdownMenuPrimitive.SubContent>\n    </DropdownMenuPrimitive.Portal>\n  );\n});\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName;\n"],"mappings":"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"}

package/dist/components/ErrorMessage/ErrorMessage.js

@@ -1,8 +1,8 @@
 import { cn } from "../../utils/cn.js";
 import { Text } from "../Text/Text.js";
-import { CaretRightIcon, XCloseIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { Icon } from "../Icon/Icon.js";
 import { IconButton } from "../IconButton/IconButton.js";
+import { CaretRightIcon, XCloseIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { CopyIconButton } from "../CopyButton/CopyButton.js";
 import { prettifyErrorPayload } from "../../utils/prettify-error-payload.js";
 import { useId, useLayoutEffect, useRef, useState } from "react";

package/dist/components/GroupedTabs/GroupedTabs.d.ts

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
+import { type ControlSize } from '../../utils/componentSizes.js';
 import type { IconComponent, IconWeight } from '../../utils/icon-types.js';
 import type { TooltipProps } from '../Tooltip/index.js';
+type GroupedTabsSize = Exclude<ControlSize, 'lg'>;
 export interface GroupedTabOption<T> {
     display?: ReactNode | ((isActive: boolean) => ReactNode);
     value: T;
@@ -12,7 +14,6 @@ export interface GroupedTabOption<T> {
     leftDecorator?: ReactNode;
     rightDecorator?: ReactNode;
     className?: string;
-    size?: 'xs' | 'sm' | 'md';
     textClassName?: string;
     'aria-label'?: string;
 }
@@ -21,7 +22,8 @@ export type GroupedTabsProps<T extends string | number> = {
     onChange: (value: T) => void;
     options: readonly GroupedTabOption<T>[];
     className?: string;
-    size?: 'xs' | 'sm' | 'md';
+    /** Exact outer group height: xs=20px, sm=24px, md=32px. */
+    size?: GroupedTabsSize;
     disabled?: boolean;
     tooltip?: string | ReactNode;
     selectionClassName?: string;
@@ -29,3 +31,4 @@ export type GroupedTabsProps<T extends string | number> = {
     indicatorClassName?: string;
 };
 export declare const GroupedTabs: <T extends string | number>({ value, onChange, options, className, size, disabled, tooltip, selectionClassName, indicatorClassName, }: GroupedTabsProps<T>) => import("react").JSX.Element;
+export {};

package/dist/components/GroupedTabs/GroupedTabs.js

@@ -1,7 +1,8 @@
 import { cn } from "../../utils/cn.js";
+import { CONTROL_SIZES } from "../../utils/componentSizes.js";
 import { Text } from "../Text/Text.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/components/src/components/GroupedTabs/GroupedTabs.tsx
 var GroupedTabs = ({ value, onChange, options, className, size = "sm", disabled, tooltip, selectionClassName, indicatorClassName }) => {
@@ -10,43 +11,49 @@ var GroupedTabs = ({ value, onChange, options, className, size = "sm", disabled,
 	const [clipState, setClipState] = useState({
 		path: "",
 		isFirst: true,
-		animate: false
+		shouldAnimate: false
 	});
+	const activeIndex = useMemo(() => options.findIndex((option) => option.value === value), [options, value]);
+	const updateClipState = useCallback((container, activeButton, shouldAnimate) => {
+		const containerRect = container.getBoundingClientRect();
+		const buttonRect = activeButton.getBoundingClientRect();
+		const roundValue = size === "xs" ? "1px" : size === "sm" ? "2px" : "4px";
+		const top = buttonRect.top - containerRect.top - container.clientTop;
+		const bottom = containerRect.bottom - buttonRect.bottom - container.clientTop;
+		const left = buttonRect.left - containerRect.left - container.clientLeft;
+		const path = `inset(${top}px ${containerRect.right - buttonRect.right - container.clientLeft}px ${bottom}px ${left}px round ${roundValue})`;
+		setClipState((prev) => prev.path === path ? prev : {
+			path,
+			isFirst: false,
+			shouldAnimate: shouldAnimate && !prev.isFirst
+		});
+	}, [size]);
 	useEffect(() => {
 		const container = containerRef.current;
-		const activeIndex = options.findIndex((option) => option.value === value);
 		const activeButton = buttonRefs.current[activeIndex];
-		if (activeButton && container) {
-			const containerRect = container.getBoundingClientRect();
-			const buttonRect = activeButton.getBoundingClientRect();
-			const roundValue = size === "xs" ? "1px" : size === "sm" ? "2px" : "4px";
-			const top = buttonRect.top - containerRect.top - container.clientTop;
-			const bottom = containerRect.bottom - buttonRect.bottom - container.clientTop;
-			const left = buttonRect.left - containerRect.left - container.clientLeft;
-			const right = containerRect.right - buttonRect.right - container.clientLeft;
-			setClipState((prev) => ({
-				path: `inset(${top}px ${right}px ${bottom}px ${left}px round ${roundValue})`,
-				isFirst: false,
-				animate: !prev.isFirst
-			}));
-		}
+		if (!activeButton || !container) return;
+		updateClipState(container, activeButton, true);
+		const observer = new ResizeObserver(() => updateClipState(container, activeButton, false));
+		observer.observe(container);
+		observer.observe(activeButton);
+		return () => observer.disconnect();
 	}, [
-		size,
-		value,
-		options
+		activeIndex,
+		updateClipState,
+		value
 	]);
 	const isActive = (option) => option.value === value;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		title: tooltip,
 		children: /* @__PURE__ */ jsxs("div", {
 			ref: containerRef,
-			className: cn("relative flex w-fit border border-subtle bg-surface-level-1 p-0.5 dark:border-muted", size === "xs" ? "gap-px" : "gap-0.5", size === "xs" ? "rounded-[2px]" : size === "sm" ? "rounded-[3px]" : "rounded-sm", className),
+			className: cn("relative box-border flex w-fit border border-subtle bg-surface-level-1 dark:border-muted", CONTROL_SIZES[size].heightClassName, size === "md" ? "p-0.5" : "p-px", size === "xs" ? "gap-px" : "gap-0.5", size === "xs" ? "rounded-[2px]" : size === "sm" ? "rounded-[3px]" : "rounded-sm", className),
 			children: [clipState.path && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": true,
 				className: cn("pointer-events-none absolute inset-0 bg-surface-level-4", selectionClassName, indicatorClassName),
 				style: {
 					clipPath: clipState.path,
-					transition: clipState.animate ? "clip-path 0.25s ease-out, background-color 0.25s ease-out" : "none"
+					transition: clipState.shouldAnimate ? "clip-path 0.25s ease-out, background-color 0.25s ease-out" : "none"
 				}
 			}), options.map((option, idx) => /* @__PURE__ */ jsx(Tooltip, {
 				title: option.tooltip,
@@ -59,10 +66,10 @@ var GroupedTabs = ({ value, onChange, options, className, size = "sm", disabled,
 					"aria-label": option["aria-label"],
 					onClick: () => onChange(option.value),
 					disabled: option.disabled || disabled,
-					className: cn("relative flex items-center gap-space-1", "transition-colors duration-fast", {
-						"rounded-xs px-space-1 py-px": size === "xs",
-						"rounded-xs px-space-2 py-0.5": size === "sm",
-						"rounded-sm px-space-2 py-space-1": size === "md"
+					className: cn("relative flex h-full items-center gap-space-1", "transition-colors duration-fast", {
+						"rounded-xs px-space-1": size === "xs",
+						"rounded-xs px-space-2": size === "sm",
+						"rounded-sm px-space-2": size === "md"
 					}, {
 						"text-primary": isActive(option),
 						"text-secondary hover:bg-surface-level-1-hover": !isActive(option)

package/dist/components/GroupedTabs/GroupedTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedTabs.js","names":[],"sources":["../../../src/components/GroupedTabs/GroupedTabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport type { IconComponent, IconWeight } from '../../utils/icon-types';\nimport { Text } from '../Text';\nimport type { TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nexport interface GroupedTabOption<T> {\n  display?: ReactNode | ((isActive: boolean) => ReactNode);\n  value: T;\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;\n  icon?: IconComponent;\n  iconWeight?: IconWeight;\n  leftDecorator?: ReactNode;\n  rightDecorator?: ReactNode;\n  className?: string;\n  size?: 'xs' | 'sm' | 'md';\n  textClassName?: string;\n  'aria-label'?: string;\n}\n\nexport type GroupedTabsProps<T extends string | number> = {\n  value: T;\n  onChange: (value: T) => void;\n  options: readonly GroupedTabOption<T>[];\n  className?: string;\n  size?: 'xs' | 'sm' | 'md';\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  selectionClassName?: string;\n  /** Optional class for the indicator (e.g. to override top/height for custom margins) */\n  indicatorClassName?: string;\n};\n\nexport const GroupedTabs = <T extends string | number>({\n  value,\n  onChange,\n  options,\n  className,\n  size = 'sm',\n  disabled,\n  tooltip,\n  selectionClassName,\n  indicatorClassName,\n}: GroupedTabsProps<T>) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [clipState, setClipState] = useState<{\n    path: string;\n    isFirst: boolean;\n    animate: boolean;\n  }>({ path: '', isFirst: true, animate: false });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    const activeIndex = options.findIndex((option) => option.value === value);\n    const activeButton = buttonRefs.current[activeIndex];\n\n    if (activeButton && container) {\n      const containerRect = container.getBoundingClientRect();\n      const buttonRect = activeButton.getBoundingClientRect();\n      const roundValue = size === 'xs' ? '1px' : size === 'sm' ? '2px' : '4px';\n\n      const top = buttonRect.top - containerRect.top - container.clientTop;\n      const bottom =\n        containerRect.bottom - buttonRect.bottom - container.clientTop;\n      const left = buttonRect.left - containerRect.left - container.clientLeft;\n      const right =\n        containerRect.right - buttonRect.right - container.clientLeft;\n\n      setClipState((prev) => ({\n        path: `inset(${top}px ${right}px ${bottom}px ${left}px round ${roundValue})`,\n        isFirst: false,\n        animate: !prev.isFirst,\n      }));\n    }\n  }, [size, value, options]);\n\n  const isActive = (option: GroupedTabOption<T>) => option.value === value;\n  return (\n    <Tooltip title={tooltip}>\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative flex w-fit border border-subtle bg-surface-level-1 p-0.5 dark:border-muted',\n          size === 'xs' ? 'gap-px' : 'gap-0.5',\n          size === 'xs'\n            ? 'rounded-[2px]'\n            : size === 'sm'\n              ? 'rounded-[3px]'\n              : 'rounded-sm',\n          className\n        )}\n      >\n        {/* Clip-path animated background indicator */}\n        {clipState.path && (\n          <div\n            aria-hidden\n            className={cn(\n              'pointer-events-none absolute inset-0 bg-surface-level-4',\n              selectionClassName,\n              indicatorClassName\n            )}\n            style={{\n              clipPath: clipState.path,\n              transition: clipState.animate\n                ? 'clip-path 0.25s ease-out, background-color 0.25s ease-out'\n                : 'none',\n            }}\n          />\n        )}\n\n        {options.map((option, idx) => (\n          <Tooltip\n            key={option.value}\n            title={option.tooltip}\n            {...option.tooltipProps}\n          >\n            {/* eslint-disable-next-line react/forbid-elements */}\n            <button\n              ref={(el) => {\n                buttonRefs.current[idx] = el;\n              }}\n              type=\"button\"\n              aria-label={option['aria-label']}\n              onClick={() => onChange(option.value)}\n              disabled={option.disabled || disabled}\n              className={cn(\n                'relative flex items-center gap-space-1',\n                'transition-colors duration-fast',\n                {\n                  'rounded-xs px-space-1 py-px': size === 'xs',\n                  'rounded-xs px-space-2 py-0.5': size === 'sm',\n                  'rounded-sm px-space-2 py-space-1': size === 'md',\n                },\n                {\n                  'text-primary': isActive(option),\n                  'text-secondary hover:bg-surface-level-1-hover':\n                    !isActive(option),\n                },\n                (option.disabled || disabled) &&\n                  'text-disabled hover:bg-transparent',\n                option.className\n              )}\n            >\n              {option.icon && (\n                <option.icon\n                  aria-hidden\n                  className={size === 'xs' ? 'size-3' : 'size-4'}\n                  weight={option.iconWeight}\n                />\n              )}\n              {option.leftDecorator}\n              {option.display &&\n                (typeof option.display === 'function' ? (\n                  option.display(isActive(option))\n                ) : (\n                  <Text\n                    variant={size === 'xs' ? 'xs' : 'sm'}\n                    className={cn('font-medium', option.textClassName)}\n                  >\n                    {option.display}\n                  </Text>\n                ))}\n              {option.rightDecorator}\n            </button>\n          </Tooltip>\n        ))}\n      </div>\n    </Tooltip>\n  );\n};\n"],"mappings":";;;;;;AAsCA,IAAa,eAA0C,EACrD,OACA,UACA,SACA,WACA,OAAO,MACP,UACA,SACA,oBACA,yBACyB;CACzB,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,aAAa,OAAqC,CAAC,CAAC;CAC1D,MAAM,CAAC,WAAW,gBAAgB,SAI/B;EAAE,MAAM;EAAI,SAAS;EAAM,SAAS;CAAM,CAAC;CAE9C,gBAAgB;EACd,MAAM,YAAY,aAAa;EAC/B,MAAM,cAAc,QAAQ,WAAW,WAAW,OAAO,UAAU,KAAK;EACxE,MAAM,eAAe,WAAW,QAAQ;EAExC,IAAI,gBAAgB,WAAW;GAC7B,MAAM,gBAAgB,UAAU,sBAAsB;GACtD,MAAM,aAAa,aAAa,sBAAsB;GACtD,MAAM,aAAa,SAAS,OAAO,QAAQ,SAAS,OAAO,QAAQ;GAEnE,MAAM,MAAM,WAAW,MAAM,cAAc,MAAM,UAAU;GAC3D,MAAM,SACJ,cAAc,SAAS,WAAW,SAAS,UAAU;GACvD,MAAM,OAAO,WAAW,OAAO,cAAc,OAAO,UAAU;GAC9D,MAAM,QACJ,cAAc,QAAQ,WAAW,QAAQ,UAAU;GAErD,cAAc,UAAU;IACtB,MAAM,SAAS,IAAI,KAAK,MAAM,KAAK,OAAO,KAAK,KAAK,WAAW,WAAW;IAC1E,SAAS;IACT,SAAS,CAAC,KAAK;GACjB,EAAE;EACJ;CACF,GAAG;EAAC;EAAM;EAAO;CAAO,CAAC;CAEzB,MAAM,YAAY,WAAgC,OAAO,UAAU;CACnE,OACE,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,qBAAC,OAAD;GACE,KAAK;GACL,WAAW,GACT,uFACA,SAAS,OAAO,WAAW,WAC3B,SAAS,OACL,kBACA,SAAS,OACP,kBACA,cACN,SACF;GAXF,UAAA,CAcG,UAAU,QACT,oBAAC,OAAD;IACE,eAAA;IACA,WAAW,GACT,2DACA,oBACA,kBACF;IACA,OAAO;KACL,UAAU,UAAU;KACpB,YAAY,UAAU,UAClB,8DACA;IACN;GACD,CAAA,GAGF,QAAQ,KAAK,QAAQ,QACpB,oBAAC,SAAD;IAEE,OAAO,OAAO;IACd,GAAI,OAAO;IAGX,UAAA,qBAAC,UAAD;KACE,MAAM,OAAO;MACX,WAAW,QAAQ,OAAO;KAC5B;KACA,MAAK;KACL,cAAY,OAAO;KACnB,eAAe,SAAS,OAAO,KAAK;KACpC,UAAU,OAAO,YAAY;KAC7B,WAAW,GACT,0CACA,mCACA;MACE,+BAA+B,SAAS;MACxC,gCAAgC,SAAS;MACzC,oCAAoC,SAAS;KAC/C,GACA;MACE,gBAAgB,SAAS,MAAM;MAC/B,iDACE,CAAC,SAAS,MAAM;KACpB,IACC,OAAO,YAAY,aAClB,sCACF,OAAO,SACT;KAxBF,UAAA;MA0BG,OAAO,QACN,oBAAC,OAAO,MAAR;OACE,eAAA;OACA,WAAW,SAAS,OAAO,WAAW;OACtC,QAAQ,OAAO;MAChB,CAAA;MAEF,OAAO;MACP,OAAO,YACL,OAAO,OAAO,YAAY,aACzB,OAAO,QAAQ,SAAS,MAAM,CAAC,IAE/B,oBAAC,MAAD;OACE,SAAS,SAAS,OAAO,OAAO;OAChC,WAAW,GAAG,eAAe,OAAO,aAAa;OAEhD,UAAA,OAAO;MACJ,CAAA;MAET,OAAO;KACF;;GACD,GApDF,OAAO,KAoDL,CACV,CACE;;CACE,CAAA;AAEb"}
+{"version":3,"file":"GroupedTabs.js","names":[],"sources":["../../../src/components/GroupedTabs/GroupedTabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { CONTROL_SIZES, type ControlSize } from '../../utils/componentSizes';\nimport type { IconComponent, IconWeight } from '../../utils/icon-types';\nimport { Text } from '../Text';\nimport type { TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\ntype GroupedTabsSize = Exclude<ControlSize, 'lg'>;\n\nexport interface GroupedTabOption<T> {\n  display?: ReactNode | ((isActive: boolean) => ReactNode);\n  value: T;\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;\n  icon?: IconComponent;\n  iconWeight?: IconWeight;\n  leftDecorator?: ReactNode;\n  rightDecorator?: ReactNode;\n  className?: string;\n  textClassName?: string;\n  'aria-label'?: string;\n}\n\nexport type GroupedTabsProps<T extends string | number> = {\n  value: T;\n  onChange: (value: T) => void;\n  options: readonly GroupedTabOption<T>[];\n  className?: string;\n  /** Exact outer group height: xs=20px, sm=24px, md=32px. */\n  size?: GroupedTabsSize;\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  selectionClassName?: string;\n  /** Optional class for the indicator (e.g. to override top/height for custom margins) */\n  indicatorClassName?: string;\n};\n\nexport const GroupedTabs = <T extends string | number>({\n  value,\n  onChange,\n  options,\n  className,\n  size = 'sm',\n  disabled,\n  tooltip,\n  selectionClassName,\n  indicatorClassName,\n}: GroupedTabsProps<T>) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [clipState, setClipState] = useState<{\n    path: string;\n    isFirst: boolean;\n    shouldAnimate: boolean;\n  }>({ path: '', isFirst: true, shouldAnimate: false });\n  const activeIndex = useMemo(\n    () => options.findIndex((option) => option.value === value),\n    [options, value]\n  );\n\n  const updateClipState = useCallback(\n    (\n      container: HTMLDivElement,\n      activeButton: HTMLButtonElement,\n      shouldAnimate: boolean\n    ) => {\n      const containerRect = container.getBoundingClientRect();\n      const buttonRect = activeButton.getBoundingClientRect();\n      const roundValue = size === 'xs' ? '1px' : size === 'sm' ? '2px' : '4px';\n\n      const top = buttonRect.top - containerRect.top - container.clientTop;\n      const bottom =\n        containerRect.bottom - buttonRect.bottom - container.clientTop;\n      const left = buttonRect.left - containerRect.left - container.clientLeft;\n      const right =\n        containerRect.right - buttonRect.right - container.clientLeft;\n\n      const path = `inset(${top}px ${right}px ${bottom}px ${left}px round ${roundValue})`;\n      setClipState((prev) =>\n        prev.path === path\n          ? prev\n          : {\n              path,\n              isFirst: false,\n              shouldAnimate: shouldAnimate && !prev.isFirst,\n            }\n      );\n    },\n    [size]\n  );\n\n  useEffect(() => {\n    const container = containerRef.current;\n    const activeButton = buttonRefs.current[activeIndex];\n    if (!activeButton || !container) return;\n\n    updateClipState(container, activeButton, true);\n\n    const observer = new ResizeObserver(() =>\n      updateClipState(container, activeButton, false)\n    );\n    observer.observe(container);\n    observer.observe(activeButton);\n\n    return () => observer.disconnect();\n  }, [activeIndex, updateClipState, value]);\n\n  const isActive = (option: GroupedTabOption<T>) => option.value === value;\n  return (\n    <Tooltip title={tooltip}>\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative box-border flex w-fit border border-subtle bg-surface-level-1 dark:border-muted',\n          CONTROL_SIZES[size].heightClassName,\n          size === 'md' ? 'p-0.5' : 'p-px',\n          size === 'xs' ? 'gap-px' : 'gap-0.5',\n          size === 'xs'\n            ? 'rounded-[2px]'\n            : size === 'sm'\n              ? 'rounded-[3px]'\n              : 'rounded-sm',\n          className\n        )}\n      >\n        {/* Clip-path animated background indicator */}\n        {clipState.path && (\n          <div\n            aria-hidden\n            className={cn(\n              'pointer-events-none absolute inset-0 bg-surface-level-4',\n              selectionClassName,\n              indicatorClassName\n            )}\n            style={{\n              clipPath: clipState.path,\n              transition: clipState.shouldAnimate\n                ? 'clip-path 0.25s ease-out, background-color 0.25s ease-out'\n                : 'none',\n            }}\n          />\n        )}\n\n        {options.map((option, idx) => (\n          <Tooltip\n            key={option.value}\n            title={option.tooltip}\n            {...option.tooltipProps}\n          >\n            {/* eslint-disable-next-line react/forbid-elements */}\n            <button\n              ref={(el) => {\n                buttonRefs.current[idx] = el;\n              }}\n              type=\"button\"\n              aria-label={option['aria-label']}\n              onClick={() => onChange(option.value)}\n              disabled={option.disabled || disabled}\n              className={cn(\n                'relative flex h-full items-center gap-space-1',\n                'transition-colors duration-fast',\n                {\n                  'rounded-xs px-space-1': size === 'xs',\n                  'rounded-xs px-space-2': size === 'sm',\n                  'rounded-sm px-space-2': size === 'md',\n                },\n                {\n                  'text-primary': isActive(option),\n                  'text-secondary hover:bg-surface-level-1-hover':\n                    !isActive(option),\n                },\n                (option.disabled || disabled) &&\n                  'text-disabled hover:bg-transparent',\n                option.className\n              )}\n            >\n              {option.icon && (\n                <option.icon\n                  aria-hidden\n                  className={size === 'xs' ? 'size-3' : 'size-4'}\n                  weight={option.iconWeight}\n                />\n              )}\n              {option.leftDecorator}\n              {option.display &&\n                (typeof option.display === 'function' ? (\n                  option.display(isActive(option))\n                ) : (\n                  <Text\n                    variant={size === 'xs' ? 'xs' : 'sm'}\n                    className={cn('font-medium', option.textClassName)}\n                  >\n                    {option.display}\n                  </Text>\n                ))}\n              {option.rightDecorator}\n            </button>\n          </Tooltip>\n        ))}\n      </div>\n    </Tooltip>\n  );\n};\n"],"mappings":"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"}

package/dist/components/IconButton/IconButton.js

@@ -1,8 +1,8 @@
 import { cn } from "../../utils/cn.js";
 import { CONTROL_SIZES } from "../../utils/componentSizes.js";
-import { Tooltip } from "../Tooltip/Tooltip.js";
-import { buttonStyleMap } from "../Button/constants.js";
 import { Spinner } from "../Spinner/Spinner.js";
+import { buttonStyleMap } from "../Button/constants.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
 import { cloneElement, forwardRef, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region packages/components/src/components/IconButton/IconButton.tsx

package/dist/components/Input/Input.js

@@ -3,8 +3,8 @@ import { Text } from "../Text/Text.js";
 import { Icon } from "../Icon/Icon.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
-import { INPUT_TEXT_CLASSES, getInputContainerClasses, getInputElementClasses } from "./inputStyles.js";
 import { CONTROL_ICON_SIZES } from "../../utils/controlIconSizes.js";
+import { INPUT_TEXT_CLASSES, getInputContainerClasses, getInputElementClasses } from "./inputStyles.js";
 import { forwardRef, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useDebouncedCallback } from "use-debounce";

package/dist/components/LineChart/LineChart.d.ts

@@ -1,8 +1,8 @@
 import type { LineChartProps } from './LineChart.types.js';
-export type { LineChartDisplayAxis, LineChartDisplaySeries, LineChartGrid, LineChartInteractionDatum, LineChartInteractionPoint, LineChartPoint, LineChartProps, LineChartSelectionRange, LineChartSeries, LineChartXScale, LineChartYBand, LineChartYAxis, } from './LineChart.types.js';
+export type { LineChartDisplayAxis, LineChartDisplaySeries, LineChartGrid, LineChartInteractionDatum, LineChartInteractionPoint, LineChartPoint, LineChartProps, LineChartSelectionRange, LineChartSeries, LineChartVerticalMarker, LineChartXScale, LineChartYBand, LineChartYAxis, } from './LineChart.types.js';
 /**
  * Responsive numeric line chart with nullable observations, multiple axes,
  * legend filtering, configurable grids and x scales, brushing, and
  * consumer-owned tooltip interactions.
  */
-export declare const LineChart: ({ series, yAxes, xDomain, formatXValue, xScale: xScaleType, xTickCount, xTickValues, selectedIds, showPoints, connectNulls, grid, activeX, activeLegendItemId, selectionRange, yBands, renderActiveOverlay, shouldAnimate, isRendering, showLegend, legendProps, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, className, ...rest }: LineChartProps) => import("react").JSX.Element;
+export declare const LineChart: ({ series, yAxes, xDomain, formatXValue, xScale: xScaleType, xTickCount, xTickValues, selectedIds, showPoints, connectNulls, grid, activeX, activeLegendItemId, selectionRange, yBands, verticalMarkers, renderActiveOverlay, shouldAnimate, isRendering, showLegend, legendProps, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, className, ...rest }: LineChartProps) => import("react").JSX.Element;

package/dist/components/LineChart/LineChart.js

@@ -59,7 +59,7 @@ var resolveAxes = (layouts, innerHeight) => layouts.map(({ config, domain, nice,
 * legend filtering, configurable grids and x scales, brushing, and
 * consumer-owned tooltip interactions.
 */
-var LineChart = ({ series, yAxes, xDomain, formatXValue = defaultFormatValue, xScale: xScaleType = "linear", xTickCount, xTickValues, selectedIds, showPoints = false, connectNulls = true, grid, activeX, activeLegendItemId, selectionRange, yBands = [], renderActiveOverlay, shouldAnimate = true, isRendering = true, showLegend, legendProps, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, className, ...rest }) => {
+var LineChart = ({ series, yAxes, xDomain, formatXValue = defaultFormatValue, xScale: xScaleType = "linear", xTickCount, xTickValues, selectedIds, showPoints = false, connectNulls = true, grid, activeX, activeLegendItemId, selectionRange, yBands = [], verticalMarkers = [], renderActiveOverlay, shouldAnimate = true, isRendering = true, showLegend, legendProps, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, className, ...rest }) => {
 	const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState(null);
 	const ariaProps = {
 		"aria-describedby": rest["aria-describedby"],
@@ -88,6 +88,7 @@ var LineChart = ({ series, yAxes, xDomain, formatXValue = defaultFormatValue, xS
 		points: item.points.filter((point) => point.x >= resolvedXDomain[0] && point.x <= resolvedXDomain[1])
 	})) : visibleSeries;
 	const renderedActiveX = xScaleType !== "band" || activeX != null && activeX >= resolvedXDomain[0] && activeX <= resolvedXDomain[1] ? activeX : void 0;
+	const renderedVerticalMarkers = xScaleType === "band" ? verticalMarkers.filter((marker) => marker.x >= resolvedXDomain[0] && marker.x <= resolvedXDomain[1]) : verticalMarkers;
 	const axisLayouts = resolveAxisLayouts(renderedSeries, yAxes, resolvedXDomain, connectNulls);
 	const chartMargin = {
 		top: CHART_MARGIN_TOP,
@@ -154,6 +155,7 @@ var LineChart = ({ series, yAxes, xDomain, formatXValue = defaultFormatValue, xS
 			activeLegendItemId: renderedActiveLegendItemId,
 			selectionRange,
 			yBands,
+			verticalMarkers: renderedVerticalMarkers,
 			shouldAnimate,
 			isRendering,
 			...ariaProps,

package/dist/components/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","names":[],"sources":["../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { useState, type HTMLAttributes } from 'react';\n\nimport { useResizeObserver } from '@mantine/hooks';\nimport { scaleLinear } from '@visx/scale';\n\nimport { getCategoricalLineChartColor } from '../../utils/chartColors';\nimport {\n  CHART_AXIS_LABEL_THICKNESS,\n  CHART_TICK_FONT_SIZE,\n  CHART_VALUE_AXIS_TICK_LENGTH,\n} from '../../utils/chartConstants';\nimport { cn } from '../../utils/cn';\nimport { getYAxisLeftMargin } from '../../utils/getYAxisLeftMargin';\nimport { ChartLegend, type ChartLegendItem } from '../ChartLegend';\nimport {\n  LINE_CHART_DEFAULT_TICK_COUNT,\n  LINE_CHART_VALUE_AXIS_THICKNESS,\n} from './constants';\nimport type {\n  LineChartDisplayAxis,\n  LineChartDisplaySeries,\n  LineChartProps,\n  LineChartYAxis,\n} from './LineChart.types';\nimport {\n  createLineChartXScaleAdapter,\n  getLineChartYDomainValues,\n  getLineSegments,\n  getNumericDomain,\n  normalizeLineChartSeries,\n} from './LineChart.utils';\nimport { LineChartPlot } from './LineChartPlot';\n\nexport type {\n  LineChartDisplayAxis,\n  LineChartDisplaySeries,\n  LineChartGrid,\n  LineChartInteractionDatum,\n  LineChartInteractionPoint,\n  LineChartPoint,\n  LineChartProps,\n  LineChartSelectionRange,\n  LineChartSeries,\n  LineChartXScale,\n  LineChartYBand,\n  LineChartYAxis,\n} from './LineChart.types';\n\ntype LineChartAxisLayout = {\n  config: LineChartYAxis;\n  domain: [number, number];\n  nice: boolean;\n  thickness: number;\n};\n\nconst DEFAULT_AXIS_ID = 'line-chart-default-axis';\nconst CHART_MARGIN_TOP = 8;\nconst CHART_MARGIN_BOTTOM = 28;\nconst CHART_MARGIN_RIGHT = 8;\nconst DEFAULT_STROKE_WIDTH = 2;\nconst NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {\n  maximumFractionDigits: 2,\n});\n\nconst defaultFormatValue = (value: number) => NUMBER_FORMATTER.format(value);\n\nconst resolveAxisLayouts = (\n  series: readonly LineChartDisplaySeries[],\n  configuredAxes: readonly LineChartYAxis[] | undefined,\n  xDomain: readonly [number, number],\n  connectNulls: boolean\n): readonly LineChartAxisLayout[] => {\n  const axisConfigs = new Map(\n    configuredAxes?.map((axis) => [axis.id, axis]) ?? []\n  );\n  const axisIds = Array.from(\n    new Set(configuredAxes?.map((axis) => axis.id) ?? [])\n  );\n\n  for (const item of series) {\n    if (!axisIds.includes(item.yAxisId)) axisIds.push(item.yAxisId);\n  }\n  if (axisIds.length === 0) axisIds.push(DEFAULT_AXIS_ID);\n\n  return axisIds.map((axisId): LineChartAxisLayout => {\n    const config = axisConfigs.get(axisId) ?? { id: axisId };\n    const values = series\n      .filter((item) => item.yAxisId === axisId)\n      .flatMap((item) =>\n        getLineChartYDomainValues(item.points, xDomain, connectNulls)\n      );\n    const domain = getNumericDomain(values, config.domain);\n    const nice = config.domain == null;\n    const tickLabelThickness = getYAxisLeftMargin({\n      yDomain: domain,\n      formatTick: config.formatValue ?? defaultFormatValue,\n      fontSize: CHART_TICK_FONT_SIZE,\n      numTicks: config.tickCount ?? LINE_CHART_DEFAULT_TICK_COUNT,\n      tickValues: config.tickValues,\n      tickLength: CHART_VALUE_AXIS_TICK_LENGTH,\n      nice,\n    });\n    return {\n      config,\n      domain,\n      nice,\n      thickness:\n        Math.max(LINE_CHART_VALUE_AXIS_THICKNESS, tickLabelThickness) +\n        (config.label == null ? 0 : CHART_AXIS_LABEL_THICKNESS),\n    };\n  });\n};\n\nconst resolveAxes = (\n  layouts: readonly LineChartAxisLayout[],\n  innerHeight: number\n): readonly LineChartDisplayAxis[] =>\n  layouts.map(({ config, domain, nice, thickness }) => ({\n    ...config,\n    thickness,\n    scale: scaleLinear<number>({\n      domain,\n      range: [innerHeight, 0],\n      nice,\n    }),\n  }));\n\n/**\n * Responsive numeric line chart with nullable observations, multiple axes,\n * legend filtering, configurable grids and x scales, brushing, and\n * consumer-owned tooltip interactions.\n */\nexport const LineChart = ({\n  series,\n  yAxes,\n  xDomain,\n  formatXValue = defaultFormatValue,\n  xScale: xScaleType = 'linear',\n  xTickCount,\n  xTickValues,\n  selectedIds,\n  showPoints = false,\n  connectNulls = true,\n  grid,\n  activeX,\n  activeLegendItemId,\n  selectionRange,\n  yBands = [],\n  renderActiveOverlay,\n  shouldAnimate = true,\n  isRendering = true,\n  showLegend,\n  legendProps,\n  onDatumPointerDown,\n  onDatumPointerMove,\n  onDatumPointerOut,\n  onDatumPointerUp,\n  className,\n  ...rest\n}: LineChartProps) => {\n  const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState<\n    string | null\n  >(null);\n  const ariaProps = {\n    'aria-describedby': rest['aria-describedby'],\n    'aria-label': rest['aria-label'],\n  };\n  const rootProps: HTMLAttributes<HTMLDivElement> = { ...rest };\n  delete rootProps['aria-describedby'];\n  delete rootProps['aria-label'];\n\n  const [containerRef, dimensions] = useResizeObserver();\n  const normalizedSeries = normalizeLineChartSeries(series);\n  const defaultAxisId = yAxes?.[0]?.id ?? DEFAULT_AXIS_ID;\n  const displaySeries: readonly LineChartDisplaySeries[] = normalizedSeries.map(\n    (item, index) => ({\n      ...item,\n      color: item.color ?? getCategoricalLineChartColor(index),\n      yAxisId: item.yAxisId ?? defaultAxisId,\n      strokeWidth:\n        item.strokeWidth == null || !Number.isFinite(item.strokeWidth)\n          ? DEFAULT_STROKE_WIDTH\n          : Math.max(0, item.strokeWidth),\n      opacity:\n        item.opacity == null || !Number.isFinite(item.opacity)\n          ? 1\n          : Math.min(1, Math.max(0, item.opacity)),\n      showActiveMarker: item.showActiveMarker ?? true,\n    })\n  );\n  const visibleSeries =\n    selectedIds == null || selectedIds.size === 0\n      ? displaySeries\n      : displaySeries.filter((item) => selectedIds.has(item.id));\n  const xValues = visibleSeries.flatMap((item) =>\n    item.points.map((point) => point.x)\n  );\n  const resolvedXDomain = getNumericDomain(xValues, xDomain);\n  const uniqueXValues = Array.from(\n    new Set(\n      xValues.filter(\n        (value) => value >= resolvedXDomain[0] && value <= resolvedXDomain[1]\n      )\n    )\n  ).sort((left, right) => left - right);\n  const renderedSeries =\n    xScaleType === 'band'\n      ? visibleSeries.map((item) => ({\n          ...item,\n          points: item.points.filter(\n            (point) =>\n              point.x >= resolvedXDomain[0] && point.x <= resolvedXDomain[1]\n          ),\n        }))\n      : visibleSeries;\n  const renderedActiveX =\n    xScaleType !== 'band' ||\n    (activeX != null &&\n      activeX >= resolvedXDomain[0] &&\n      activeX <= resolvedXDomain[1])\n      ? activeX\n      : undefined;\n  const axisLayouts = resolveAxisLayouts(\n    renderedSeries,\n    yAxes,\n    resolvedXDomain,\n    connectNulls\n  );\n  const chartMargin = {\n    top: CHART_MARGIN_TOP,\n    right:\n      CHART_MARGIN_RIGHT +\n      axisLayouts.slice(1).reduce((total, axis) => total + axis.thickness, 0),\n    bottom: CHART_MARGIN_BOTTOM,\n    left: axisLayouts[0]?.thickness ?? LINE_CHART_VALUE_AXIS_THICKNESS,\n  };\n  const innerWidth = Math.max(\n    0,\n    dimensions.width - chartMargin.left - chartMargin.right\n  );\n  const innerHeight = Math.max(\n    0,\n    dimensions.height - chartMargin.top - chartMargin.bottom\n  );\n  const xScaleAdapter = createLineChartXScaleAdapter({\n    type: xScaleType,\n    domain: resolvedXDomain,\n    values: uniqueXValues,\n    width: innerWidth,\n    nice: xDomain == null,\n  });\n  const axes = resolveAxes(axisLayouts, innerHeight);\n\n  const activeXPos =\n    renderedActiveX == null ? null : xScaleAdapter.getPosition(renderedActiveX);\n  const overlayX =\n    activeXPos != null && activeXPos >= 0 && activeXPos <= innerWidth\n      ? chartMargin.left + activeXPos\n      : null;\n\n  const legendItems: readonly ChartLegendItem[] = displaySeries.map((item) => ({\n    id: item.id,\n    label: item.label,\n    markerColor: item.color,\n    selected: selectedIds?.has(item.id) ?? false,\n  }));\n  const hasLegend =\n    (showLegend ?? legendItems.length > 1) && legendItems.length > 0;\n  const legendLayout = legendProps?.layout ?? 'inline';\n  const requestedActiveLegendItemId =\n    (hasLegend ? activeBuiltInLegendItemId : null) ?? activeLegendItemId;\n  const renderedActiveLegendItemId = renderedSeries.some((item) => {\n    if (item.id !== requestedActiveLegendItemId) return false;\n\n    const [domainMinimum, domainMaximum] = resolvedXDomain;\n    const hasVisiblePoint =\n      showPoints &&\n      item.points.some(\n        (point) =>\n          point.y != null &&\n          point.x >= domainMinimum &&\n          point.x <= domainMaximum\n      );\n    if (hasVisiblePoint) return true;\n\n    return getLineSegments(item.points, connectNulls).some((segment) =>\n      segment.some((point, index) => {\n        const nextPoint = segment[index + 1];\n        return (\n          nextPoint != null &&\n          point.x <= domainMaximum &&\n          nextPoint.x >= domainMinimum\n        );\n      })\n    );\n  })\n    ? requestedActiveLegendItemId\n    : null;\n  const showGridRows = grid === false ? false : (grid?.rows ?? true);\n  const showGridColumns = grid === false ? false : (grid?.columns ?? true);\n\n  const plot = (\n    <div ref={containerRef} className=\"relative size-full min-h-0 min-w-0\">\n      <LineChartPlot\n        width={dimensions.width}\n        height={dimensions.height}\n        innerWidth={innerWidth}\n        innerHeight={innerHeight}\n        chartMargin={chartMargin}\n        xScale={xScaleAdapter.scale}\n        getXPosition={xScaleAdapter.getPosition}\n        getXValue={xScaleAdapter.getValue}\n        getXRangePosition={xScaleAdapter.getRangePosition}\n        uniqueXValues={uniqueXValues}\n        axes={axes}\n        series={renderedSeries}\n        formatXValue={formatXValue}\n        xTickCount={xTickCount}\n        xTickValues={xTickValues}\n        showPoints={showPoints}\n        connectNulls={connectNulls}\n        showGridRows={showGridRows}\n        showGridColumns={showGridColumns}\n        activeX={renderedActiveX}\n        activeLegendItemId={renderedActiveLegendItemId}\n        selectionRange={selectionRange}\n        yBands={yBands}\n        shouldAnimate={shouldAnimate}\n        isRendering={isRendering}\n        {...ariaProps}\n        onDatumPointerDown={onDatumPointerDown}\n        onDatumPointerMove={onDatumPointerMove}\n        onDatumPointerOut={onDatumPointerOut}\n        onDatumPointerUp={onDatumPointerUp}\n      />\n      {renderActiveOverlay != null &&\n        overlayX != null &&\n        renderedActiveX != null &&\n        renderActiveOverlay({ xPosition: overlayX, activeX: renderedActiveX })}\n    </div>\n  );\n\n  const legend = (\n    <ChartLegend\n      aria-label={`${ariaProps['aria-label']} legend`}\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',\n            legendLayout === 'list'\n              ? 'grid-rows-[minmax(0,1fr)_minmax(0,35%)] gap-space-3 @[560px]:grid-cols-[minmax(0,1fr)_minmax(10rem,30%)] @[560px]:grid-rows-1 @[560px]:gap-space-5'\n              : 'grid-rows-[minmax(0,1fr)_auto] gap-space-2'\n          )}\n        >\n          {plot}\n          {legendLayout === 'list' ? (\n            <div className=\"scroll-mask-t scroll-mask-b min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\">\n              {legend}\n            </div>\n          ) : (\n            legend\n          )}\n        </div>\n      ) : (\n        plot\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"LineChart.js","names":[],"sources":["../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { useState, type HTMLAttributes } from 'react';\n\nimport { useResizeObserver } from '@mantine/hooks';\nimport { scaleLinear } from '@visx/scale';\n\nimport { getCategoricalLineChartColor } from '../../utils/chartColors';\nimport {\n  CHART_AXIS_LABEL_THICKNESS,\n  CHART_TICK_FONT_SIZE,\n  CHART_VALUE_AXIS_TICK_LENGTH,\n} from '../../utils/chartConstants';\nimport { cn } from '../../utils/cn';\nimport { getYAxisLeftMargin } from '../../utils/getYAxisLeftMargin';\nimport { ChartLegend, type ChartLegendItem } from '../ChartLegend';\nimport {\n  LINE_CHART_DEFAULT_TICK_COUNT,\n  LINE_CHART_VALUE_AXIS_THICKNESS,\n} from './constants';\nimport type {\n  LineChartDisplayAxis,\n  LineChartDisplaySeries,\n  LineChartProps,\n  LineChartYAxis,\n} from './LineChart.types';\nimport {\n  createLineChartXScaleAdapter,\n  getLineChartYDomainValues,\n  getLineSegments,\n  getNumericDomain,\n  normalizeLineChartSeries,\n} from './LineChart.utils';\nimport { LineChartPlot } from './LineChartPlot';\n\nexport type {\n  LineChartDisplayAxis,\n  LineChartDisplaySeries,\n  LineChartGrid,\n  LineChartInteractionDatum,\n  LineChartInteractionPoint,\n  LineChartPoint,\n  LineChartProps,\n  LineChartSelectionRange,\n  LineChartSeries,\n  LineChartVerticalMarker,\n  LineChartXScale,\n  LineChartYBand,\n  LineChartYAxis,\n} from './LineChart.types';\n\ntype LineChartAxisLayout = {\n  config: LineChartYAxis;\n  domain: [number, number];\n  nice: boolean;\n  thickness: number;\n};\n\nconst DEFAULT_AXIS_ID = 'line-chart-default-axis';\nconst CHART_MARGIN_TOP = 8;\nconst CHART_MARGIN_BOTTOM = 28;\nconst CHART_MARGIN_RIGHT = 8;\nconst DEFAULT_STROKE_WIDTH = 2;\nconst NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {\n  maximumFractionDigits: 2,\n});\n\nconst defaultFormatValue = (value: number) => NUMBER_FORMATTER.format(value);\n\nconst resolveAxisLayouts = (\n  series: readonly LineChartDisplaySeries[],\n  configuredAxes: readonly LineChartYAxis[] | undefined,\n  xDomain: readonly [number, number],\n  connectNulls: boolean\n): readonly LineChartAxisLayout[] => {\n  const axisConfigs = new Map(\n    configuredAxes?.map((axis) => [axis.id, axis]) ?? []\n  );\n  const axisIds = Array.from(\n    new Set(configuredAxes?.map((axis) => axis.id) ?? [])\n  );\n\n  for (const item of series) {\n    if (!axisIds.includes(item.yAxisId)) axisIds.push(item.yAxisId);\n  }\n  if (axisIds.length === 0) axisIds.push(DEFAULT_AXIS_ID);\n\n  return axisIds.map((axisId): LineChartAxisLayout => {\n    const config = axisConfigs.get(axisId) ?? { id: axisId };\n    const values = series\n      .filter((item) => item.yAxisId === axisId)\n      .flatMap((item) =>\n        getLineChartYDomainValues(item.points, xDomain, connectNulls)\n      );\n    const domain = getNumericDomain(values, config.domain);\n    const nice = config.domain == null;\n    const tickLabelThickness = getYAxisLeftMargin({\n      yDomain: domain,\n      formatTick: config.formatValue ?? defaultFormatValue,\n      fontSize: CHART_TICK_FONT_SIZE,\n      numTicks: config.tickCount ?? LINE_CHART_DEFAULT_TICK_COUNT,\n      tickValues: config.tickValues,\n      tickLength: CHART_VALUE_AXIS_TICK_LENGTH,\n      nice,\n    });\n    return {\n      config,\n      domain,\n      nice,\n      thickness:\n        Math.max(LINE_CHART_VALUE_AXIS_THICKNESS, tickLabelThickness) +\n        (config.label == null ? 0 : CHART_AXIS_LABEL_THICKNESS),\n    };\n  });\n};\n\nconst resolveAxes = (\n  layouts: readonly LineChartAxisLayout[],\n  innerHeight: number\n): readonly LineChartDisplayAxis[] =>\n  layouts.map(({ config, domain, nice, thickness }) => ({\n    ...config,\n    thickness,\n    scale: scaleLinear<number>({\n      domain,\n      range: [innerHeight, 0],\n      nice,\n    }),\n  }));\n\n/**\n * Responsive numeric line chart with nullable observations, multiple axes,\n * legend filtering, configurable grids and x scales, brushing, and\n * consumer-owned tooltip interactions.\n */\nexport const LineChart = ({\n  series,\n  yAxes,\n  xDomain,\n  formatXValue = defaultFormatValue,\n  xScale: xScaleType = 'linear',\n  xTickCount,\n  xTickValues,\n  selectedIds,\n  showPoints = false,\n  connectNulls = true,\n  grid,\n  activeX,\n  activeLegendItemId,\n  selectionRange,\n  yBands = [],\n  verticalMarkers = [],\n  renderActiveOverlay,\n  shouldAnimate = true,\n  isRendering = true,\n  showLegend,\n  legendProps,\n  onDatumPointerDown,\n  onDatumPointerMove,\n  onDatumPointerOut,\n  onDatumPointerUp,\n  className,\n  ...rest\n}: LineChartProps) => {\n  const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState<\n    string | null\n  >(null);\n  const ariaProps = {\n    'aria-describedby': rest['aria-describedby'],\n    'aria-label': rest['aria-label'],\n  };\n  const rootProps: HTMLAttributes<HTMLDivElement> = { ...rest };\n  delete rootProps['aria-describedby'];\n  delete rootProps['aria-label'];\n\n  const [containerRef, dimensions] = useResizeObserver();\n  const normalizedSeries = normalizeLineChartSeries(series);\n  const defaultAxisId = yAxes?.[0]?.id ?? DEFAULT_AXIS_ID;\n  const displaySeries: readonly LineChartDisplaySeries[] = normalizedSeries.map(\n    (item, index) => ({\n      ...item,\n      color: item.color ?? getCategoricalLineChartColor(index),\n      yAxisId: item.yAxisId ?? defaultAxisId,\n      strokeWidth:\n        item.strokeWidth == null || !Number.isFinite(item.strokeWidth)\n          ? DEFAULT_STROKE_WIDTH\n          : Math.max(0, item.strokeWidth),\n      opacity:\n        item.opacity == null || !Number.isFinite(item.opacity)\n          ? 1\n          : Math.min(1, Math.max(0, item.opacity)),\n      showActiveMarker: item.showActiveMarker ?? true,\n    })\n  );\n  const visibleSeries =\n    selectedIds == null || selectedIds.size === 0\n      ? displaySeries\n      : displaySeries.filter((item) => selectedIds.has(item.id));\n  const xValues = visibleSeries.flatMap((item) =>\n    item.points.map((point) => point.x)\n  );\n  const resolvedXDomain = getNumericDomain(xValues, xDomain);\n  const uniqueXValues = Array.from(\n    new Set(\n      xValues.filter(\n        (value) => value >= resolvedXDomain[0] && value <= resolvedXDomain[1]\n      )\n    )\n  ).sort((left, right) => left - right);\n  const renderedSeries =\n    xScaleType === 'band'\n      ? visibleSeries.map((item) => ({\n          ...item,\n          points: item.points.filter(\n            (point) =>\n              point.x >= resolvedXDomain[0] && point.x <= resolvedXDomain[1]\n          ),\n        }))\n      : visibleSeries;\n  const renderedActiveX =\n    xScaleType !== 'band' ||\n    (activeX != null &&\n      activeX >= resolvedXDomain[0] &&\n      activeX <= resolvedXDomain[1])\n      ? activeX\n      : undefined;\n  // A band scale extrapolates past its outer buckets, so a marker just outside\n  // the domain can still project inside the plot.\n  const renderedVerticalMarkers =\n    xScaleType === 'band'\n      ? verticalMarkers.filter(\n          (marker) =>\n            marker.x >= resolvedXDomain[0] && marker.x <= resolvedXDomain[1]\n        )\n      : verticalMarkers;\n  const axisLayouts = resolveAxisLayouts(\n    renderedSeries,\n    yAxes,\n    resolvedXDomain,\n    connectNulls\n  );\n  const chartMargin = {\n    top: CHART_MARGIN_TOP,\n    right:\n      CHART_MARGIN_RIGHT +\n      axisLayouts.slice(1).reduce((total, axis) => total + axis.thickness, 0),\n    bottom: CHART_MARGIN_BOTTOM,\n    left: axisLayouts[0]?.thickness ?? LINE_CHART_VALUE_AXIS_THICKNESS,\n  };\n  const innerWidth = Math.max(\n    0,\n    dimensions.width - chartMargin.left - chartMargin.right\n  );\n  const innerHeight = Math.max(\n    0,\n    dimensions.height - chartMargin.top - chartMargin.bottom\n  );\n  const xScaleAdapter = createLineChartXScaleAdapter({\n    type: xScaleType,\n    domain: resolvedXDomain,\n    values: uniqueXValues,\n    width: innerWidth,\n    nice: xDomain == null,\n  });\n  const axes = resolveAxes(axisLayouts, innerHeight);\n\n  const activeXPos =\n    renderedActiveX == null ? null : xScaleAdapter.getPosition(renderedActiveX);\n  const overlayX =\n    activeXPos != null && activeXPos >= 0 && activeXPos <= innerWidth\n      ? chartMargin.left + activeXPos\n      : null;\n\n  const legendItems: readonly ChartLegendItem[] = displaySeries.map((item) => ({\n    id: item.id,\n    label: item.label,\n    markerColor: item.color,\n    selected: selectedIds?.has(item.id) ?? false,\n  }));\n  const hasLegend =\n    (showLegend ?? legendItems.length > 1) && legendItems.length > 0;\n  const legendLayout = legendProps?.layout ?? 'inline';\n  const requestedActiveLegendItemId =\n    (hasLegend ? activeBuiltInLegendItemId : null) ?? activeLegendItemId;\n  const renderedActiveLegendItemId = renderedSeries.some((item) => {\n    if (item.id !== requestedActiveLegendItemId) return false;\n\n    const [domainMinimum, domainMaximum] = resolvedXDomain;\n    const hasVisiblePoint =\n      showPoints &&\n      item.points.some(\n        (point) =>\n          point.y != null &&\n          point.x >= domainMinimum &&\n          point.x <= domainMaximum\n      );\n    if (hasVisiblePoint) return true;\n\n    return getLineSegments(item.points, connectNulls).some((segment) =>\n      segment.some((point, index) => {\n        const nextPoint = segment[index + 1];\n        return (\n          nextPoint != null &&\n          point.x <= domainMaximum &&\n          nextPoint.x >= domainMinimum\n        );\n      })\n    );\n  })\n    ? requestedActiveLegendItemId\n    : null;\n  const showGridRows = grid === false ? false : (grid?.rows ?? true);\n  const showGridColumns = grid === false ? false : (grid?.columns ?? true);\n\n  const plot = (\n    <div ref={containerRef} className=\"relative size-full min-h-0 min-w-0\">\n      <LineChartPlot\n        width={dimensions.width}\n        height={dimensions.height}\n        innerWidth={innerWidth}\n        innerHeight={innerHeight}\n        chartMargin={chartMargin}\n        xScale={xScaleAdapter.scale}\n        getXPosition={xScaleAdapter.getPosition}\n        getXValue={xScaleAdapter.getValue}\n        getXRangePosition={xScaleAdapter.getRangePosition}\n        uniqueXValues={uniqueXValues}\n        axes={axes}\n        series={renderedSeries}\n        formatXValue={formatXValue}\n        xTickCount={xTickCount}\n        xTickValues={xTickValues}\n        showPoints={showPoints}\n        connectNulls={connectNulls}\n        showGridRows={showGridRows}\n        showGridColumns={showGridColumns}\n        activeX={renderedActiveX}\n        activeLegendItemId={renderedActiveLegendItemId}\n        selectionRange={selectionRange}\n        yBands={yBands}\n        verticalMarkers={renderedVerticalMarkers}\n        shouldAnimate={shouldAnimate}\n        isRendering={isRendering}\n        {...ariaProps}\n        onDatumPointerDown={onDatumPointerDown}\n        onDatumPointerMove={onDatumPointerMove}\n        onDatumPointerOut={onDatumPointerOut}\n        onDatumPointerUp={onDatumPointerUp}\n      />\n      {renderActiveOverlay != null &&\n        overlayX != null &&\n        renderedActiveX != null &&\n        renderActiveOverlay({ xPosition: overlayX, activeX: renderedActiveX })}\n    </div>\n  );\n\n  const legend = (\n    <ChartLegend\n      aria-label={`${ariaProps['aria-label']} legend`}\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',\n            legendLayout === 'list'\n              ? 'grid-rows-[minmax(0,1fr)_minmax(0,35%)] gap-space-3 @[560px]:grid-cols-[minmax(0,1fr)_minmax(10rem,30%)] @[560px]:grid-rows-1 @[560px]:gap-space-5'\n              : 'grid-rows-[minmax(0,1fr)_auto] gap-space-2'\n          )}\n        >\n          {plot}\n          {legendLayout === 'list' ? (\n            <div className=\"scroll-mask-t scroll-mask-b min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\">\n              {legend}\n            </div>\n          ) : (\n            legend\n          )}\n        </div>\n      ) : (\n        plot\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/LineChart/LineChart.types.d.ts

@@ -57,6 +57,20 @@ export type LineChartGrid = {
     /** Defaults to true. Grid guides are dashed. */
     columns?: boolean;
 };
+export type LineChartVerticalMarkerVariant = 'default' | 'error';
+/**
+ * A dashed vertical marker for a moment on the x axis, such as a deploy or an
+ * incident. Drawn under the series so it annotates the data rather than
+ * competing with it.
+ */
+export type LineChartVerticalMarker = {
+    id: string;
+    x: number;
+    /** Defaults to `default`. Use `error` for an incident or failure. */
+    variant?: LineChartVerticalMarkerVariant;
+    /** Rendered at the top of the marker. */
+    label?: string;
+};
 export type LineChartYBand = {
     id: string;
     /** Defaults to the primary y axis. */
@@ -116,6 +130,8 @@ export type LineChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | '
     selectionRange?: LineChartSelectionRange;
     /** Background ranges such as warning or threshold regions. */
     yBands?: readonly LineChartYBand[];
+    /** Vertical markers for moments on the x axis, such as a deploy. */
+    verticalMarkers?: readonly LineChartVerticalMarker[];
     /**
      * Rendered inside the plot's relative container at the resolved activeX
      * position (SVG-container-relative pixels). Only invoked when activeX is

package/dist/components/LineChart/LineChartPlot.d.ts

@@ -1,6 +1,6 @@
 import { type AriaAttributes, type PointerEvent } from 'react';
 import type { scaleBand, scaleLinear } from '@visx/scale';
-import type { LineChartDisplayAxis, LineChartDisplaySeries, LineChartInteractionDatum, LineChartSelectionRange, LineChartYBand } from './LineChart.types.js';
+import type { LineChartDisplayAxis, LineChartDisplaySeries, LineChartInteractionDatum, LineChartSelectionRange, LineChartVerticalMarker, LineChartYBand } from './LineChart.types.js';
 type LineChartPlotProps = {
     width: number;
     height: number;
@@ -30,6 +30,7 @@ type LineChartPlotProps = {
     activeLegendItemId?: string | null;
     selectionRange?: LineChartSelectionRange;
     yBands: readonly LineChartYBand[];
+    verticalMarkers: readonly LineChartVerticalMarker[];
     shouldAnimate: boolean;
     isRendering: boolean;
     'aria-describedby'?: AriaAttributes['aria-describedby'];
@@ -39,5 +40,5 @@ type LineChartPlotProps = {
     onDatumPointerOut?: () => void;
     onDatumPointerUp?: (datum: LineChartInteractionDatum, event: PointerEvent<SVGSVGElement>) => void;
 };
-export declare const LineChartPlot: ({ width, height, innerWidth, innerHeight, chartMargin, xScale, getXPosition, getXValue, getXRangePosition, uniqueXValues, axes, series, formatXValue, xTickCount, xTickValues, showPoints, connectNulls, showGridRows, showGridColumns, activeX, activeLegendItemId, selectionRange, yBands, shouldAnimate, isRendering, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, ...ariaProps }: LineChartPlotProps) => import("react").JSX.Element;
+export declare const LineChartPlot: ({ width, height, innerWidth, innerHeight, chartMargin, xScale, getXPosition, getXValue, getXRangePosition, uniqueXValues, axes, series, formatXValue, xTickCount, xTickValues, showPoints, connectNulls, showGridRows, showGridColumns, activeX, activeLegendItemId, selectionRange, yBands, verticalMarkers, shouldAnimate, isRendering, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, ...ariaProps }: LineChartPlotProps) => import("react").JSX.Element;
 export {};

package/dist/components/LineChart/LineChartPlot.js

@@ -5,6 +5,7 @@ import { getChartTickValues, getNearestChartValue } from "../../utils/chartValue
 import { getChartAxisLabelOffset, getSecondaryChartAxisOffset } from "../../utils/chartAxisLayout.js";
 import "./constants.js";
 import { getLineSegments, getSelectionBounds } from "./LineChart.utils.js";
+import { LineChartVerticalMarkers } from "./LineChartVerticalMarkers.js";
 import { useId, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { animated, useReducedMotion, useSpring } from "@react-spring/web";
@@ -26,7 +27,7 @@ var getInteractionDatum = (nearestX, series, xPosition, pointerX) => ({
 		value: item.points.find((point) => point.x === nearestX)?.y ?? null
 	}))
 });
-var LineChartPlot = ({ width, height, innerWidth, innerHeight, chartMargin, xScale, getXPosition, getXValue, getXRangePosition, uniqueXValues, axes, series, formatXValue, xTickCount, xTickValues, showPoints, connectNulls, showGridRows, showGridColumns, activeX, activeLegendItemId, selectionRange, yBands, shouldAnimate, isRendering, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, ...ariaProps }) => {
+var LineChartPlot = ({ width, height, innerWidth, innerHeight, chartMargin, xScale, getXPosition, getXValue, getXRangePosition, uniqueXValues, axes, series, formatXValue, xTickCount, xTickValues, showPoints, connectNulls, showGridRows, showGridColumns, activeX, activeLegendItemId, selectionRange, yBands, verticalMarkers, shouldAnimate, isRendering, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, ...ariaProps }) => {
 	const activePointerId = useRef(null);
 	const clipPathId = `line-chart-${useId().replace(/:/g, "")}`;
 	const revealClipPathId = `${clipPathId}-reveal`;
@@ -153,6 +154,12 @@ var LineChartPlot = ({ width, height, innerWidth, innerHeight, chartMargin, xSca
 					stroke: "var(--border-subtle)",
 					strokeDasharray: "4 2"
 				}),
+				/* @__PURE__ */ jsx(LineChartVerticalMarkers, {
+					verticalMarkers,
+					innerWidth,
+					innerHeight,
+					getXPosition
+				}),
 				/* @__PURE__ */ jsx(AxisBottom, {
 					scale: xScale,
 					top: innerHeight,