@langchain/macaw-components 1.0.0-beta.0

package/dist/components/CopyButton/copyToClipboard.js

@@ -0,0 +1,29 @@
+//#region packages/components/src/components/CopyButton/copyToClipboard.tsx
+async function copyToClipboard(textToCopy) {
+	if (textToCopy == null) return;
+	if (navigator.clipboard && window.isSecureContext) await navigator.clipboard.writeText(textToCopy);
+	else {
+		const focusedElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const textArea = document.createElement("textarea");
+		textArea.value = textToCopy;
+		textArea.style.position = "absolute";
+		textArea.style.opacity = "0";
+		textArea.style.height = "0";
+		textArea.style.width = "0";
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+		try {
+			document.execCommand("copy");
+		} catch (err) {
+			console.error(err);
+		} finally {
+			document.body.removeChild(textArea);
+			focusedElement?.focus({ preventScroll: true });
+		}
+	}
+}
+//#endregion
+export { copyToClipboard };
+
+//# sourceMappingURL=copyToClipboard.js.map

package/dist/components/CopyButton/copyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyToClipboard.js","names":[],"sources":["../../../src/components/CopyButton/copyToClipboard.tsx"],"sourcesContent":["export async function copyToClipboard(textToCopy: string | undefined) {\n  if (textToCopy == null) return;\n\n  // This helper intentionally stays hook-free so non-component utilities can copy text too.\n  // Navigator clipboard api needs a secure context (https)\n  // eslint-disable-next-line custom/prefer-mantine-hooks\n  if (navigator.clipboard && window.isSecureContext) {\n    // eslint-disable-next-line custom/prefer-mantine-hooks\n    await navigator.clipboard.writeText(textToCopy);\n  } else {\n    const focusedElement =\n      document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : null;\n\n    const textArea = document.createElement('textarea');\n    textArea.value = textToCopy;\n\n    textArea.style.position = 'absolute';\n    textArea.style.opacity = '0';\n    textArea.style.height = '0';\n    textArea.style.width = '0';\n    document.body.appendChild(textArea);\n    textArea.focus();\n    textArea.select();\n\n    try {\n      document.execCommand('copy');\n    } catch (err) {\n      console.error(err);\n    } finally {\n      document.body.removeChild(textArea);\n      focusedElement?.focus({ preventScroll: true });\n    }\n  }\n}\n"],"mappings":";AAAA,eAAsB,gBAAgB,YAAgC;CACpE,IAAI,cAAc,MAAM;CAKxB,IAAI,UAAU,aAAa,OAAO,iBAEhC,MAAM,UAAU,UAAU,UAAU,UAAU;MACzC;EACL,MAAM,iBACJ,SAAS,yBAAyB,cAC9B,SAAS,gBACT;EAEN,MAAM,WAAW,SAAS,cAAc,UAAU;EAClD,SAAS,QAAQ;EAEjB,SAAS,MAAM,WAAW;EAC1B,SAAS,MAAM,UAAU;EACzB,SAAS,MAAM,SAAS;EACxB,SAAS,MAAM,QAAQ;EACvB,SAAS,KAAK,YAAY,QAAQ;EAClC,SAAS,MAAM;EACf,SAAS,OAAO;EAEhB,IAAI;GACF,SAAS,YAAY,MAAM;EAC7B,SAAS,KAAK;GACZ,QAAQ,MAAM,GAAG;EACnB,UAAU;GACR,SAAS,KAAK,YAAY,QAAQ;GAClC,gBAAgB,MAAM,EAAE,eAAe,KAAK,CAAC;EAC/C;CACF;AACF"}

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

@@ -0,0 +1,4 @@
+export { CopyButton, CopyIconButton } from './CopyButton.js';
+export type { CopyButtonProps, CopyIconButtonProps } from './CopyButton.js';
+export { useCopy, useCopyAction } from './useCopy.js';
+export { copyToClipboard } from './copyToClipboard.js';

package/dist/components/CopyButton/index.js

@@ -0,0 +1,4 @@
+import { copyToClipboard } from "./copyToClipboard.js";
+import { useCopy, useCopyAction } from "./useCopy.js";
+import { CopyButton, CopyIconButton } from "./CopyButton.js";
+export { CopyButton, CopyIconButton, copyToClipboard, useCopy, useCopyAction };

package/dist/components/CopyButton/useCopy.d.ts

@@ -0,0 +1,10 @@
+export declare const useCopyAction: () => {
+    copied: boolean;
+    onCopy: (copy: string) => void;
+};
+export declare const useCopy: (props?: {
+    copy?: string;
+}) => {
+    copied: boolean;
+    onCopy: () => void;
+};

package/dist/components/CopyButton/useCopy.js

@@ -0,0 +1,46 @@
+import { copyToClipboard } from "./copyToClipboard.js";
+import { useEffect, useRef, useState } from "react";
+//#region packages/components/src/components/CopyButton/useCopy.tsx
+var copyWithErrorLogging = (copy) => {
+	copyToClipboard(copy).catch((error) => {
+		console.error(error);
+	});
+};
+var useCopyAction = () => {
+	const [copied, setCopied] = useState(false);
+	const timerRef = useRef(void 0);
+	const onCopy = (copy) => {
+		window.clearTimeout(timerRef.current);
+		copyWithErrorLogging(copy);
+		setCopied(true);
+		timerRef.current = window.setTimeout(() => setCopied(false), 2e3);
+	};
+	useEffect(() => {
+		return () => window.clearTimeout(timerRef.current);
+	}, []);
+	return {
+		copied,
+		onCopy
+	};
+};
+var useCopy = (props) => {
+	const [copied, setCopied] = useState(false);
+	const timerRef = useRef(void 0);
+	const onCopy = () => {
+		window.clearTimeout(timerRef.current);
+		copyWithErrorLogging(props?.copy);
+		setCopied(true);
+		timerRef.current = window.setTimeout(() => setCopied(false), 2e3);
+	};
+	useEffect(() => {
+		return () => window.clearTimeout(timerRef.current);
+	}, []);
+	return {
+		copied,
+		onCopy
+	};
+};
+//#endregion
+export { useCopy, useCopyAction };
+
+//# sourceMappingURL=useCopy.js.map

package/dist/components/CopyButton/useCopy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopy.js","names":[],"sources":["../../../src/components/CopyButton/useCopy.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { copyToClipboard } from './copyToClipboard';\n\n// Alternative to useCopy, where the copy text is provided as an argument\n\nconst copyWithErrorLogging = (copy: string | undefined) => {\n  void copyToClipboard(copy).catch((error: unknown) => {\n    console.error(error);\n  });\n};\n\nexport const useCopyAction = () => {\n  const [copied, setCopied] = useState(false);\n\n  const timerRef = useRef<number>(undefined);\n  const onCopy = (copy: string) => {\n    window.clearTimeout(timerRef.current);\n    copyWithErrorLogging(copy);\n    setCopied(true);\n    timerRef.current = window.setTimeout(() => setCopied(false), 2000);\n  };\n\n  useEffect(() => {\n    return () => window.clearTimeout(timerRef.current);\n  }, []);\n\n  return { copied, onCopy };\n};\n\nexport const useCopy = (props?: { copy?: string }) => {\n  const [copied, setCopied] = useState(false);\n\n  const timerRef = useRef<number>(undefined);\n  const onCopy = () => {\n    window.clearTimeout(timerRef.current);\n    copyWithErrorLogging(props?.copy);\n    setCopied(true);\n    timerRef.current = window.setTimeout(() => setCopied(false), 2000);\n  };\n\n  useEffect(() => {\n    return () => window.clearTimeout(timerRef.current);\n  }, []);\n\n  return { copied, onCopy };\n};\n"],"mappings":";;;AAMA,IAAM,wBAAwB,SAA6B;CACzD,gBAAqB,IAAI,CAAC,CAAC,OAAO,UAAmB;EACnD,QAAQ,MAAM,KAAK;CACrB,CAAC;AACH;AAEA,IAAa,sBAAsB;CACjC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,WAAW,OAAe,KAAA,CAAS;CACzC,MAAM,UAAU,SAAiB;EAC/B,OAAO,aAAa,SAAS,OAAO;EACpC,qBAAqB,IAAI;EACzB,UAAU,IAAI;EACd,SAAS,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,GAAI;CACnE;CAEA,gBAAgB;EACd,aAAa,OAAO,aAAa,SAAS,OAAO;CACnD,GAAG,CAAC,CAAC;CAEL,OAAO;EAAE;EAAQ;CAAO;AAC1B;AAEA,IAAa,WAAW,UAA8B;CACpD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,WAAW,OAAe,KAAA,CAAS;CACzC,MAAM,eAAe;EACnB,OAAO,aAAa,SAAS,OAAO;EACpC,qBAAqB,OAAO,IAAI;EAChC,UAAU,IAAI;EACd,SAAS,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,GAAI;CACnE;CAEA,gBAAgB;EACd,aAAa,OAAO,aAAa,SAAS,OAAO;CACnD,GAAG,CAAC,CAAC;CAEL,OAAO;EAAE;EAAQ;CAAO;AAC1B"}

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

@@ -0,0 +1,49 @@
+import { type ComponentPropsWithoutRef, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react';
+import { DialogClose as RadixDialogClose, DialogDescription as RadixDialogDescription, DialogTitle as RadixDialogTitle, type DialogContentProps as RadixDialogContentProps } from '@radix-ui/react-dialog';
+import type { IconComponent } from '../Icon/index.js';
+/**
+ * Exposes the modal DialogContent DOM node to descendants so portaled overlays
+ * (e.g. Typeahead's Popover) can render inside the dialog. A modal Dialog sets
+ * `pointer-events: none` outside DialogContent, so overlays portaled to
+ * `document.body` become mouse-inert; portaling into this node keeps them
+ * interactive. Null when not inside a Dialog.
+ */
+export declare const DialogContainerContext: import("react").Context<HTMLElement | null>;
+export declare function useDialogContainer(): HTMLElement | null;
+export type DialogTitleProps = ComponentPropsWithoutRef<typeof RadixDialogTitle>;
+/** Associates a custom-composed heading with the dialog content. */
+export declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export type DialogDescriptionProps = ComponentPropsWithoutRef<typeof RadixDialogDescription>;
+/** Associates supporting copy with the dialog content. */
+export declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export type DialogCloseProps = ComponentPropsWithoutRef<typeof RadixDialogClose>;
+/** Closes the nearest dialog and supports custom controls through `asChild`. */
+export declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type TitleIconIntent = 'error' | 'warning' | 'info';
+interface DialogContentProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Icon component to display in the title area, inside a colored circular container */
+    titleIcon?: IconComponent;
+    /** Controls the background and color of the title icon container */
+    titleIconIntent?: TitleIconIntent;
+    showClose?: boolean;
+    children: ReactNode;
+    className?: string;
+    childrenClassName?: string;
+    onPointerDownOutside?: RadixDialogContentProps['onPointerDownOutside'];
+    onInteractOutside?: RadixDialogContentProps['onInteractOutside'];
+    onOpenAutoFocus?: RadixDialogContentProps['onOpenAutoFocus'];
+    onCloseAutoFocus?: RadixDialogContentProps['onCloseAutoFocus'];
+    onEscapeKeyDown?: RadixDialogContentProps['onEscapeKeyDown'];
+    onKeyDown?: RadixDialogContentProps['onKeyDown'];
+}
+export declare function Dialog({ open, onOpenChange, children, className, onEscapeKeyDown, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+    className?: string;
+    onEscapeKeyDown?: (e: ReactKeyboardEvent) => void;
+}): import("react").JSX.Element;
+export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Dialog/index.js

@@ -0,0 +1,130 @@
+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 { Text } from "../Text/Text.js";
+import { XIcon } from "../../icons/PaddedPhosphorIcons.js";
+import { Icon } from "../Icon/Icon.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { createContext, forwardRef, useContext, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog as Dialog$1, DialogClose as DialogClose$1, DialogContent as DialogContent$1, DialogDescription as DialogDescription$1, DialogOverlay, DialogPortal, DialogTitle as DialogTitle$1 } from "@radix-ui/react-dialog";
+//#region packages/components/src/components/Dialog/index.tsx
+/**
+* Exposes the modal DialogContent DOM node to descendants so portaled overlays
+* (e.g. Typeahead's Popover) can render inside the dialog. A modal Dialog sets
+* `pointer-events: none` outside DialogContent, so overlays portaled to
+* `document.body` become mouse-inert; portaling into this node keeps them
+* interactive. Null when not inside a Dialog.
+*/
+var DialogContainerContext = createContext(null);
+function useDialogContainer() {
+	return useContext(DialogContainerContext);
+}
+/** Associates a custom-composed heading with the dialog content. */
+var DialogTitle = forwardRef((props, ref) => /* @__PURE__ */ jsx(DialogTitle$1, {
+	ref,
+	...props
+}));
+DialogTitle.displayName = "DialogTitle";
+/** Associates supporting copy with the dialog content. */
+var DialogDescription = forwardRef((props, ref) => /* @__PURE__ */ jsx(DialogDescription$1, {
+	ref,
+	...props
+}));
+DialogDescription.displayName = "DialogDescription";
+/** Closes the nearest dialog and supports custom controls through `asChild`. */
+var DialogClose = forwardRef((props, ref) => /* @__PURE__ */ jsx(DialogClose$1, {
+	ref,
+	...props
+}));
+DialogClose.displayName = "DialogClose";
+function Dialog({ open, onOpenChange, children, className, onEscapeKeyDown }) {
+	const zIndex = useZIndex(zIndices.dialogOverlay);
+	return /* @__PURE__ */ jsx(Dialog$1, {
+		modal: true,
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsx(DialogOverlay, {
+			className: cn("fixed inset-0 bg-overlay", "data-[state=open]:animate-overlay-in data-[state=closed]:animate-overlay-out motion-reduce:animate-none", className),
+			style: { zIndex },
+			onKeyDown: (e) => {
+				if (e.key === "Escape" && onEscapeKeyDown) onEscapeKeyDown(e);
+			},
+			children
+		}) })
+	});
+}
+var DialogContent = forwardRef(({ title, description, titleIcon: TitleIcon, titleIconIntent = "info", showClose = true, children, className, childrenClassName, onPointerDownOutside, onInteractOutside, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onKeyDown }, ref) => {
+	const dialogZIndex = useZIndex(zIndices.dialogContent);
+	const hasHeader = Boolean(title || description || showClose);
+	const [contentNode, setContentNode] = useState(null);
+	return /* @__PURE__ */ jsx(DialogContent$1, {
+		ref: mergeRefs([ref, setContentNode]),
+		className: cn("fixed left-[50%] top-[50%] flex max-h-[calc(100vh-2rem)] w-[37.5rem] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg bg-background", "fade-in", "data-[state=closed]:fade-out", className),
+		style: { zIndex: dialogZIndex },
+		onPointerDownOutside,
+		onInteractOutside,
+		onOpenAutoFocus,
+		onCloseAutoFocus,
+		onEscapeKeyDown,
+		onKeyDown,
+		children: /* @__PURE__ */ jsx(ZIndexProvider, {
+			value: dialogZIndex,
+			children: /* @__PURE__ */ jsxs(DialogContainerContext.Provider, {
+				value: contentNode,
+				children: [hasHeader && /* @__PURE__ */ jsx("div", {
+					className: "m-0 min-h-14 shrink-0 p-space-4",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-space-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 items-center gap-space-2",
+							children: [TitleIcon && /* @__PURE__ */ jsx(Icon, {
+								icon: TitleIcon,
+								color: titleIconIntent,
+								size: "md"
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col gap-space-1",
+								children: [title && /* @__PURE__ */ jsx(DialogTitle, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx(Text, {
+										variant: "h3",
+										weight: "semibold",
+										children: title
+									})
+								}), description && /* @__PURE__ */ jsx(DialogDescription, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx(Text, {
+										variant: "sm",
+										className: "text-quaternary",
+										children: description
+									})
+								})]
+							})]
+						}), showClose && /* @__PURE__ */ jsx(DialogClose, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(IconButton, {
+								icon: XIcon,
+								label: "Close",
+								color: "secondary",
+								variant: "plain",
+								className: "shrink-0 self-start",
+								"data-testid": "dialog-close-button",
+								tooltipProps: { disabled: true }
+							})
+						})]
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn("flex min-h-0 flex-col gap-space-4 overflow-y-auto p-space-4", hasHeader && "pt-0", childrenClassName),
+					children
+				})]
+			})
+		})
+	});
+});
+DialogContent.displayName = "DialogContent";
+//#endregion
+export { Dialog, DialogClose, DialogContainerContext, DialogContent, DialogDescription, DialogTitle, useDialogContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Dialog/index.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ComponentRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  createContext,\n  forwardRef,\n  useContext,\n  useState,\n} from 'react';\n\nimport {\n  DialogClose as RadixDialogClose,\n  DialogDescription as RadixDialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle as RadixDialogTitle,\n  Dialog as RadixDialog,\n  DialogContent as RadixDialogContent,\n  type DialogContentProps as RadixDialogContentProps,\n} from '@radix-ui/react-dialog';\n\nimport { XIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { mergeRefs } from '../../utils/merge-refs';\nimport { useZIndex } from '../../utils/useZIndex';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\nimport { Icon } from '../Icon';\nimport type { IconComponent } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { Text } from '../Text';\n\n/**\n * Exposes the modal DialogContent DOM node to descendants so portaled overlays\n * (e.g. Typeahead's Popover) can render inside the dialog. A modal Dialog sets\n * `pointer-events: none` outside DialogContent, so overlays portaled to\n * `document.body` become mouse-inert; portaling into this node keeps them\n * interactive. Null when not inside a Dialog.\n */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const DialogContainerContext = createContext<HTMLElement | null>(null);\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useDialogContainer(): HTMLElement | null {\n  return useContext(DialogContainerContext);\n}\n\nexport type DialogTitleProps = ComponentPropsWithoutRef<\n  typeof RadixDialogTitle\n>;\n\n/** Associates a custom-composed heading with the dialog content. */\nexport const DialogTitle = forwardRef<\n  ComponentRef<typeof RadixDialogTitle>,\n  DialogTitleProps\n>((props, ref) => <RadixDialogTitle ref={ref} {...props} />);\nDialogTitle.displayName = 'DialogTitle';\n\nexport type DialogDescriptionProps = ComponentPropsWithoutRef<\n  typeof RadixDialogDescription\n>;\n\n/** Associates supporting copy with the dialog content. */\nexport const DialogDescription = forwardRef<\n  ComponentRef<typeof RadixDialogDescription>,\n  DialogDescriptionProps\n>((props, ref) => <RadixDialogDescription ref={ref} {...props} />);\nDialogDescription.displayName = 'DialogDescription';\n\nexport type DialogCloseProps = ComponentPropsWithoutRef<\n  typeof RadixDialogClose\n>;\n\n/** Closes the nearest dialog and supports custom controls through `asChild`. */\nexport const DialogClose = forwardRef<\n  ComponentRef<typeof RadixDialogClose>,\n  DialogCloseProps\n>((props, ref) => <RadixDialogClose ref={ref} {...props} />);\nDialogClose.displayName = 'DialogClose';\n\ntype TitleIconIntent = 'error' | 'warning' | 'info';\n\ninterface DialogContentProps {\n  title?: ReactNode;\n  description?: ReactNode;\n  /** Icon component to display in the title area, inside a colored circular container */\n  titleIcon?: IconComponent;\n  /** Controls the background and color of the title icon container */\n  titleIconIntent?: TitleIconIntent;\n  showClose?: boolean;\n  children: ReactNode;\n  className?: string;\n  childrenClassName?: string;\n  onPointerDownOutside?: RadixDialogContentProps['onPointerDownOutside'];\n  onInteractOutside?: RadixDialogContentProps['onInteractOutside'];\n  onOpenAutoFocus?: RadixDialogContentProps['onOpenAutoFocus'];\n  onCloseAutoFocus?: RadixDialogContentProps['onCloseAutoFocus'];\n  onEscapeKeyDown?: RadixDialogContentProps['onEscapeKeyDown'];\n  onKeyDown?: RadixDialogContentProps['onKeyDown'];\n}\n\nexport function Dialog({\n  open,\n  onOpenChange,\n  children,\n  className,\n  onEscapeKeyDown,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: ReactNode;\n  className?: string;\n  onEscapeKeyDown?: (e: ReactKeyboardEvent) => void;\n}) {\n  const zIndex = useZIndex(zIndices.dialogOverlay);\n  return (\n    <RadixDialog modal={true} open={open} onOpenChange={onOpenChange}>\n      <DialogPortal>\n        <DialogOverlay\n          className={cn(\n            'fixed inset-0 bg-overlay',\n            'data-[state=open]:animate-overlay-in data-[state=closed]:animate-overlay-out motion-reduce:animate-none',\n            className\n          )}\n          style={{ zIndex }}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape' && onEscapeKeyDown) {\n              onEscapeKeyDown(e);\n            }\n          }}\n        >\n          {children}\n        </DialogOverlay>\n      </DialogPortal>\n    </RadixDialog>\n  );\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  (\n    {\n      title,\n      description,\n      titleIcon: TitleIcon,\n      titleIconIntent = 'info',\n      showClose = true,\n      children,\n      className,\n      childrenClassName,\n      onPointerDownOutside,\n      onInteractOutside,\n      onOpenAutoFocus,\n      onCloseAutoFocus,\n      onEscapeKeyDown,\n      onKeyDown,\n    },\n    ref\n  ) => {\n    const dialogZIndex = useZIndex(zIndices.dialogContent);\n    const hasHeader = Boolean(title || description || showClose);\n    // A modal Dialog sets `pointer-events: none` outside this node, so overlays\n    // portaled to `document.body` (e.g. Typeahead's Popover) become mouse-inert.\n    // Expose the content node so descendants can portal into it and stay live.\n    const [contentNode, setContentNode] = useState<HTMLDivElement | null>(null);\n\n    return (\n      <RadixDialogContent\n        ref={mergeRefs([ref, setContentNode])}\n        className={cn(\n          'fixed left-[50%] top-[50%] flex max-h-[calc(100vh-2rem)] w-[37.5rem] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg bg-background',\n          'fade-in',\n          'data-[state=closed]:fade-out',\n          className\n        )}\n        style={{ zIndex: dialogZIndex }}\n        onPointerDownOutside={onPointerDownOutside}\n        onInteractOutside={onInteractOutside}\n        onOpenAutoFocus={onOpenAutoFocus}\n        onCloseAutoFocus={onCloseAutoFocus}\n        onEscapeKeyDown={onEscapeKeyDown}\n        onKeyDown={onKeyDown}\n      >\n        <ZIndexProvider value={dialogZIndex}>\n          <DialogContainerContext.Provider value={contentNode}>\n            {hasHeader && (\n              <div className=\"m-0 min-h-14 shrink-0 p-space-4\">\n                <div className=\"flex items-center justify-between gap-space-4\">\n                  <div className=\"flex min-w-0 items-center gap-space-2\">\n                    {TitleIcon && (\n                      <Icon\n                        icon={TitleIcon}\n                        color={titleIconIntent}\n                        size=\"md\"\n                      />\n                    )}\n                    <div className=\"flex min-w-0 flex-col gap-space-1\">\n                      {title && (\n                        <DialogTitle asChild>\n                          <Text variant=\"h3\" weight=\"semibold\">\n                            {title}\n                          </Text>\n                        </DialogTitle>\n                      )}\n                      {description && (\n                        <DialogDescription asChild>\n                          <Text variant=\"sm\" className=\"text-quaternary\">\n                            {description}\n                          </Text>\n                        </DialogDescription>\n                      )}\n                    </div>\n                  </div>\n                  {showClose && (\n                    <DialogClose asChild>\n                      <IconButton\n                        icon={XIcon}\n                        label=\"Close\"\n                        color=\"secondary\"\n                        variant=\"plain\"\n                        className=\"shrink-0 self-start\"\n                        data-testid=\"dialog-close-button\"\n                        tooltipProps={{ disabled: true }}\n                      />\n                    </DialogClose>\n                  )}\n                </div>\n              </div>\n            )}\n            <div\n              className={cn(\n                'flex min-h-0 flex-col gap-space-4 overflow-y-auto p-space-4',\n                hasHeader && 'pt-0',\n                childrenClassName\n              )}\n            >\n              {children}\n            </div>\n          </DialogContainerContext.Provider>\n        </ZIndexProvider>\n      </RadixDialogContent>\n    );\n  }\n);\n\nDialogContent.displayName = 'DialogContent';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCA,IAAa,yBAAyB,cAAkC,IAAI;AAG5E,SAAgB,qBAAyC;CACvD,OAAO,WAAW,sBAAsB;AAC1C;;AAOA,IAAa,cAAc,YAGxB,OAAO,QAAQ,oBAAC,eAAD;CAAuB;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC3D,YAAY,cAAc;;AAO1B,IAAa,oBAAoB,YAG9B,OAAO,QAAQ,oBAAC,qBAAD;CAA6B;CAAK,GAAI;AAAQ,CAAA,CAAC;AACjE,kBAAkB,cAAc;;AAOhC,IAAa,cAAc,YAGxB,OAAO,QAAQ,oBAAC,eAAD;CAAuB;CAAK,GAAI;AAAQ,CAAA,CAAC;AAC3D,YAAY,cAAc;AAuB1B,SAAgB,OAAO,EACrB,MACA,cACA,UACA,WACA,mBAOC;CACD,MAAM,SAAS,UAAU,SAAS,aAAa;CAC/C,OACE,oBAAC,UAAD;EAAa,OAAO;EAAY;EAAoB;EAClD,UAAA,oBAAC,cAAD,EAAA,UACE,oBAAC,eAAD;GACE,WAAW,GACT,4BACA,2GACA,SACF;GACA,OAAO,EAAE,OAAO;GAChB,YAAY,MAAM;IAChB,IAAI,EAAE,QAAQ,YAAY,iBACxB,gBAAgB,CAAC;GAErB;GAEC;EACY,CAAA,EACH,CAAA;CACH,CAAA;AAEjB;AAEA,IAAa,gBAAgB,YAEzB,EACE,OACA,aACA,WAAW,WACX,kBAAkB,QAClB,YAAY,MACZ,UACA,WACA,mBACA,sBACA,mBACA,iBACA,kBACA,iBACA,aAEF,QACG;CACH,MAAM,eAAe,UAAU,SAAS,aAAa;CACrD,MAAM,YAAY,QAAQ,SAAS,eAAe,SAAS;CAI3D,MAAM,CAAC,aAAa,kBAAkB,SAAgC,IAAI;CAE1E,OACE,oBAAC,iBAAD;EACE,KAAK,UAAU,CAAC,KAAK,cAAc,CAAC;EACpC,WAAW,GACT,gJACA,WACA,gCACA,SACF;EACA,OAAO,EAAE,QAAQ,aAAa;EACR;EACH;EACF;EACC;EACD;EACN;EAEX,UAAA,oBAAC,gBAAD;GAAgB,OAAO;GACrB,UAAA,qBAAC,uBAAuB,UAAxB;IAAiC,OAAO;IAAxC,UAAA,CACG,aACC,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACG,aACC,oBAAC,MAAD;QACE,MAAM;QACN,OAAO;QACP,MAAK;OACN,CAAA,GAEH,qBAAC,OAAD;QAAK,WAAU;QAAf,UAAA,CACG,SACC,oBAAC,aAAD;SAAa,SAAA;SACX,UAAA,oBAAC,MAAD;UAAM,SAAQ;UAAK,QAAO;UACvB,UAAA;SACG,CAAA;QACK,CAAA,GAEd,eACC,oBAAC,mBAAD;SAAmB,SAAA;SACjB,UAAA,oBAAC,MAAD;UAAM,SAAQ;UAAK,WAAU;UAC1B,UAAA;SACG,CAAA;QACW,CAAA,CAElB;OACF,CAAA,CAAA;MACJ,CAAA,GAAA,aACC,oBAAC,aAAD;OAAa,SAAA;OACX,UAAA,oBAAC,YAAD;QACE,MAAM;QACN,OAAM;QACN,OAAM;QACN,SAAQ;QACR,WAAU;QACV,eAAY;QACZ,cAAc,EAAE,UAAU,KAAK;OAChC,CAAA;MACU,CAAA,CAEZ;;IACF,CAAA,GAEP,oBAAC,OAAD;KACE,WAAW,GACT,+DACA,aAAa,QACb,iBACF;KAEC;IACE,CAAA,CAC0B;;EACnB,CAAA;CACE,CAAA;AAExB,CACF;AAEA,cAAc,cAAc"}

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,9 @@
+interface DividerProps extends React.HTMLAttributes<HTMLElement> {
+    orientation?: 'horizontal' | 'vertical';
+    /** Strong emphasizes section boundaries; default keeps separators subtle. */
+    weight?: 'default' | 'strong';
+    decorative?: boolean;
+}
+declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLElement>>;
+export { Divider };
+export type { DividerProps };

package/dist/components/Divider/Divider.js

@@ -0,0 +1,27 @@
+import { cn } from "../../utils/cn.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/Divider/Divider.tsx
+var Divider = forwardRef(({ orientation = "horizontal", weight = "default", decorative = true, className, role, ...props }, ref) => {
+	const accessibilityProps = decorative ? { "aria-hidden": true } : {
+		role: role ?? "separator",
+		"aria-orientation": orientation
+	};
+	if (orientation === "vertical") return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("self-stretch border-l", weight === "strong" ? "border-default" : "border-subtle", className),
+		...accessibilityProps,
+		...props
+	});
+	return /* @__PURE__ */ jsx("hr", {
+		ref,
+		className: cn("w-full border-0 border-t", weight === "strong" ? "border-default" : "border-subtle", className),
+		...accessibilityProps,
+		...props
+	});
+});
+Divider.displayName = "Divider";
+//#endregion
+export { Divider };
+
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":[],"sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { cn } from '../../utils/cn';\n\ninterface DividerProps extends React.HTMLAttributes<HTMLElement> {\n  orientation?: 'horizontal' | 'vertical';\n  /** Strong emphasizes section boundaries; default keeps separators subtle. */\n  weight?: 'default' | 'strong';\n  decorative?: boolean;\n}\n\nconst Divider = forwardRef<HTMLElement, DividerProps>(\n  (\n    {\n      orientation = 'horizontal',\n      weight = 'default',\n      decorative = true,\n      className,\n      role,\n      ...props\n    },\n    ref\n  ) => {\n    const accessibilityProps = decorative\n      ? { 'aria-hidden': true }\n      : {\n          role: role ?? 'separator',\n          'aria-orientation': orientation,\n        };\n\n    if (orientation === 'vertical') {\n      return (\n        <div\n          ref={ref as React.Ref<HTMLDivElement>}\n          className={cn(\n            'self-stretch border-l',\n            weight === 'strong' ? 'border-default' : 'border-subtle',\n            className\n          )}\n          {...accessibilityProps}\n          {...props}\n        />\n      );\n    }\n\n    return (\n      <hr\n        ref={ref as React.Ref<HTMLHRElement>}\n        className={cn(\n          'w-full border-0 border-t',\n          weight === 'strong' ? 'border-default' : 'border-subtle',\n          className\n        )}\n        {...accessibilityProps}\n        {...props}\n      />\n    );\n  }\n);\n\nDivider.displayName = 'Divider';\n\nexport { Divider };\nexport type { DividerProps };\n"],"mappings":";;;;AAWA,IAAM,UAAU,YAEZ,EACE,cAAc,cACd,SAAS,WACT,aAAa,MACb,WACA,MACA,GAAG,SAEL,QACG;CACH,MAAM,qBAAqB,aACvB,EAAE,eAAe,KAAK,IACtB;EACE,MAAM,QAAQ;EACd,oBAAoB;CACtB;CAEJ,IAAI,gBAAgB,YAClB,OACE,oBAAC,OAAD;EACO;EACL,WAAW,GACT,yBACA,WAAW,WAAW,mBAAmB,iBACzC,SACF;EACA,GAAI;EACJ,GAAI;CACL,CAAA;CAIL,OACE,oBAAC,MAAD;EACO;EACL,WAAW,GACT,4BACA,WAAW,WAAW,mBAAmB,iBACzC,SACF;EACA,GAAI;EACJ,GAAI;CACL,CAAA;AAEL,CACF;AAEA,QAAQ,cAAc"}

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

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

package/dist/components/Divider/index.js

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

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

@@ -0,0 +1,101 @@
+import { type AriaAttributes, type FocusEvent, type HTMLAttributes, type PointerEvent, type ReactNode } from 'react';
+import { type ChartLegendProps } from '../ChartLegend/index.js';
+export type DonutChartSegment = {
+    id: string;
+    label: ReactNode;
+    value: number;
+    /** Use DS CSS color token; typically a `var(--chart-...)` reference. */
+    color: string;
+    /**
+     * Marks a segment that already stands for a group of others — a remainder the
+     * data source rolled up, say. `otherCollationThreshold` merges it with the
+     * tail it collates instead of drawing a second "Other" beside it.
+     */
+    isOther?: boolean;
+};
+/**
+ * Everything `ChartLegend` accepts except `items`, which the donut derives from
+ * `segments`. Namespacing these under `legendProps` keeps `className` and the
+ * other DOM attributes on the chart root unambiguous.
+ */
+type DonutChartLegendProps = Omit<ChartLegendProps, 'items'>;
+/**
+ * `legendProps` only exists while there is a legend to configure: with
+ * `showLegend={false}` it narrows to `never`, so autocomplete stops offering it
+ * and passing it is a type error rather than a silently ignored prop.
+ */
+type DonutChartLegendConfig = {
+    /** Defaults to true. */
+    showLegend?: true;
+    /** Forwarded to the rendered `ChartLegend`. */
+    legendProps?: DonutChartLegendProps;
+} | {
+    showLegend: false;
+    legendProps?: never;
+};
+export type DonutChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onPointerOut'> & DonutChartLegendConfig & {
+    segments: readonly DonutChartSegment[];
+    /**
+     * When provided and non-empty, only segments whose IDs are in the set are
+     * rendered in the donut. Unselected segments stay in the legend with a 0%
+     * share. IDs address the collated list, so the segments behind an "Other"
+     * slice are selected as `DONUT_OTHER_SEGMENT_ID` rather than individually. A
+     * set naming none of those IDs draws everything, so a selection outliving
+     * the data it was made against cannot empty the chart.
+     */
+    selectedIds?: ReadonlySet<string>;
+    /**
+     * Number to render in the donut hole.
+     */
+    centerNumber?: string;
+    /**
+     * Descriptor for the number in the donut hole.
+     */
+    centerDescriptor?: string;
+    /**
+     * Scales `centerNumber` to the width of the donut hole.
+     */
+    scaleCenterNumberSize?: boolean;
+    /** Emphasizes one segment and dims the rest. */
+    activeSegmentId?: string | null;
+    /** Emphasizes the segment represented by one external legend item. Built-in legends set this automatically. */
+    activeLegendItemId?: string | null;
+    /** Animates segments when they are drawn. Defaults to true. */
+    shouldAnimate?: boolean;
+    /** Names segments and makes them focusable. */
+    getSegmentAriaLabel?: (segment: DonutChartSegment) => AriaAttributes['aria-label'];
+    /**
+     * Set to false to skip drawing the donut. Use it to avoid the work while a
+     * parent container is actively resizing. Defaults to true.
+     */
+    isRendering?: boolean;
+    /**
+     * 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.
+     */
+    otherCollationThreshold?: number;
+    /**
+     * Formats each segment's value for the legend. Defaults to a plain
+     * `en-US` number; pass a unit-aware formatter for durations, bytes, cost.
+     */
+    formatValue?: (value: number) => ReactNode;
+    onSegmentPointerMove?: (segment: DonutChartSegment, event: PointerEvent<SVGPathElement>) => void;
+    onSegmentPointerOut?: () => void;
+    onSegmentPointerUp?: (segment: DonutChartSegment, event: PointerEvent<SVGPathElement>) => void;
+    onSegmentFocus?: (segment: DonutChartSegment, event: FocusEvent<SVGPathElement>) => void;
+    onSegmentBlur?: (segment: DonutChartSegment, event: FocusEvent<SVGPathElement>) => void;
+};
+/**
+ * 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`.
+
+ */
+export declare const DonutChart: ({ segments, selectedIds, centerNumber, centerDescriptor, scaleCenterNumberSize, activeSegmentId, activeLegendItemId, shouldAnimate, getSegmentAriaLabel, isRendering, otherCollationThreshold, showLegend, legendProps, formatValue, onSegmentPointerMove, onSegmentPointerOut, onSegmentPointerUp, onSegmentFocus, onSegmentBlur, className, ...rest }: DonutChartProps) => import("react").JSX.Element;
+export {};