@langchain/macaw-components 1.0.0-beta.0

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

@@ -0,0 +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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"}

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

@@ -0,0 +1 @@
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from './DropdownMenu.js';

package/dist/components/DropdownMenu/index.js

@@ -0,0 +1,2 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./DropdownMenu.js";
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,26 @@
+import type { IconComponent, IconProps } from '../Icon/index.js';
+type EmptyStateSize = 'sm' | 'md' | 'lg';
+type EmptyStateVariant = 'neutral' | 'brand';
+interface EmptyStateProps {
+    /** Icon rendered above the title. Defaults to a search icon. */
+    icon?: IconComponent;
+    /** Phosphor weight used to render the icon. */
+    iconWeight?: IconProps['weight'];
+    /** Primary heading. */
+    title?: string;
+    /** Supporting copy below the title. */
+    description?: React.ReactNode;
+    /** Action node (e.g. a create button) rendered in the footer row. */
+    action?: React.ReactNode;
+    /** Controls the icon's semantic color treatment. */
+    variant?: EmptyStateVariant;
+    /** When set, renders a "Learn more" link to this docs URL in the footer row. */
+    docsLink?: string;
+    /** Extra classes for the outer container. */
+    className?: string;
+    /** Controls the typography, icon, spacing, and text-block width. */
+    size?: EmptyStateSize;
+}
+declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;
+export { EmptyState };
+export type { EmptyStateProps, EmptyStateSize, EmptyStateVariant };

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,85 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { Icon } from "../Icon/Icon.js";
+import { Link } from "../Link/Link.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
+//#region packages/components/src/components/EmptyState/EmptyState.tsx
+var sizeStyles = {
+	sm: {
+		container: "min-h-0 gap-space-3 py-space-3",
+		iconSize: "lg",
+		content: "max-w-xs gap-space-1",
+		titleVariant: "md",
+		titleWeight: "semibold",
+		descriptionVariant: "sm",
+		footer: "gap-space-3",
+		linkVariant: "sm"
+	},
+	md: {
+		container: "min-h-[13.5rem] gap-space-4 py-space-4",
+		iconSize: "xl",
+		content: "max-w-xs gap-space-2",
+		titleVariant: "h3",
+		descriptionVariant: "body",
+		footer: "gap-space-4",
+		linkVariant: "body"
+	},
+	lg: {
+		container: "min-h-[13.5rem] gap-space-4 py-space-5",
+		iconSize: "xl",
+		content: "max-w-md gap-space-3",
+		titleVariant: "h2",
+		descriptionVariant: "body",
+		footer: "gap-space-4",
+		linkVariant: "body"
+	}
+};
+var EmptyState = forwardRef(({ icon, iconWeight, title, description, action, variant = "neutral", docsLink, className, size = "md" }, ref) => {
+	const styles = sizeStyles[size];
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex flex-col items-center justify-center", styles.container, className),
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				icon: icon ?? MagnifyingGlassIcon,
+				weight: iconWeight,
+				color: variant,
+				rounded: true,
+				size: styles.iconSize,
+				className: variant === "neutral" ? "bg-surface-level-2" : void 0
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex flex-col", styles.content),
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "h3",
+					variant: styles.titleVariant,
+					weight: styles.titleWeight,
+					className: "text-center",
+					children: title
+				}), /* @__PURE__ */ jsx(Text, {
+					variant: styles.descriptionVariant,
+					color: "tertiary",
+					className: "text-center",
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center", styles.footer),
+				children: [action, docsLink && /* @__PURE__ */ jsx(Link, {
+					href: docsLink,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					variant: styles.linkVariant,
+					children: "Learn more"
+				})]
+			})
+		]
+	});
+});
+EmptyState.displayName = "EmptyState";
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';\n\nimport { cn } from '../../utils/cn';\nimport { Icon } from '../Icon';\nimport type { IconComponent, IconProps } from '../Icon';\nimport { Link } from '../Link';\nimport { Text } from '../Text';\nimport type { TextProps } from '../Text';\n\ntype EmptyStateSize = 'sm' | 'md' | 'lg';\ntype EmptyStateVariant = 'neutral' | 'brand';\n\ninterface EmptyStateSizeStyles {\n  container: string;\n  iconSize: NonNullable<IconProps['size']>;\n  content: string;\n  titleVariant: NonNullable<TextProps['variant']>;\n  titleWeight?: TextProps['weight'];\n  descriptionVariant: NonNullable<TextProps['variant']>;\n  footer: string;\n  linkVariant: NonNullable<TextProps['variant']>;\n}\n\nconst sizeStyles: Record<EmptyStateSize, EmptyStateSizeStyles> = {\n  sm: {\n    container: 'min-h-0 gap-space-3 py-space-3',\n    iconSize: 'lg',\n    content: 'max-w-xs gap-space-1',\n    titleVariant: 'md',\n    titleWeight: 'semibold',\n    descriptionVariant: 'sm',\n    footer: 'gap-space-3',\n    linkVariant: 'sm',\n  },\n  md: {\n    container: 'min-h-[13.5rem] gap-space-4 py-space-4',\n    iconSize: 'xl',\n    content: 'max-w-xs gap-space-2',\n    titleVariant: 'h3',\n    descriptionVariant: 'body',\n    footer: 'gap-space-4',\n    linkVariant: 'body',\n  },\n  lg: {\n    container: 'min-h-[13.5rem] gap-space-4 py-space-5',\n    iconSize: 'xl',\n    content: 'max-w-md gap-space-3',\n    titleVariant: 'h2',\n    descriptionVariant: 'body',\n    footer: 'gap-space-4',\n    linkVariant: 'body',\n  },\n};\n\ninterface EmptyStateProps {\n  /** Icon rendered above the title. Defaults to a search icon. */\n  icon?: IconComponent;\n  /** Phosphor weight used to render the icon. */\n  iconWeight?: IconProps['weight'];\n  /** Primary heading. */\n  title?: string;\n  /** Supporting copy below the title. */\n  description?: React.ReactNode;\n  /** Action node (e.g. a create button) rendered in the footer row. */\n  action?: React.ReactNode;\n  /** Controls the icon's semantic color treatment. */\n  variant?: EmptyStateVariant;\n  /** When set, renders a \"Learn more\" link to this docs URL in the footer row. */\n  docsLink?: string;\n  /** Extra classes for the outer container. */\n  className?: string;\n  /** Controls the typography, icon, spacing, and text-block width. */\n  size?: EmptyStateSize;\n}\n\nconst EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      icon,\n      iconWeight,\n      title,\n      description,\n      action,\n      variant = 'neutral',\n      docsLink,\n      className,\n      size = 'md',\n    },\n    ref\n  ) => {\n    const styles = sizeStyles[size];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col items-center justify-center',\n          styles.container,\n          className\n        )}\n      >\n        <Icon\n          icon={icon ?? MagnifyingGlassIcon}\n          weight={iconWeight}\n          color={variant}\n          rounded\n          size={styles.iconSize}\n          className={variant === 'neutral' ? 'bg-surface-level-2' : undefined}\n        />\n        <div className={cn('flex flex-col', styles.content)}>\n          <Text\n            as=\"h3\"\n            variant={styles.titleVariant}\n            weight={styles.titleWeight}\n            className=\"text-center\"\n          >\n            {title}\n          </Text>\n          <Text\n            variant={styles.descriptionVariant}\n            color=\"tertiary\"\n            className=\"text-center\"\n          >\n            {description}\n          </Text>\n        </div>\n        <div className={cn('flex items-center', styles.footer)}>\n          {action}\n          {docsLink && (\n            <Link\n              href={docsLink}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              variant={styles.linkVariant}\n            >\n              Learn more\n            </Link>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nEmptyState.displayName = 'EmptyState';\n\nexport { EmptyState };\nexport type { EmptyStateProps, EmptyStateSize, EmptyStateVariant };\n"],"mappings":";;;;;;;;AAyBA,IAAM,aAA2D;CAC/D,IAAI;EACF,WAAW;EACX,UAAU;EACV,SAAS;EACT,cAAc;EACd,aAAa;EACb,oBAAoB;EACpB,QAAQ;EACR,aAAa;CACf;CACA,IAAI;EACF,WAAW;EACX,UAAU;EACV,SAAS;EACT,cAAc;EACd,oBAAoB;EACpB,QAAQ;EACR,aAAa;CACf;CACA,IAAI;EACF,WAAW;EACX,UAAU;EACV,SAAS;EACT,cAAc;EACd,oBAAoB;EACpB,QAAQ;EACR,aAAa;CACf;AACF;AAuBA,IAAM,aAAa,YAEf,EACE,MACA,YACA,OACA,aACA,QACA,UAAU,WACV,UACA,WACA,OAAO,QAET,QACG;CACH,MAAM,SAAS,WAAW;CAE1B,OACE,qBAAC,OAAD;EACO;EACL,WAAW,GACT,6CACA,OAAO,WACP,SACF;EANF,UAAA;GAQE,oBAAC,MAAD;IACE,MAAM,QAAQ;IACd,QAAQ;IACR,OAAO;IACP,SAAA;IACA,MAAM,OAAO;IACb,WAAW,YAAY,YAAY,uBAAuB,KAAA;GAC3D,CAAA;GACD,qBAAC,OAAD;IAAK,WAAW,GAAG,iBAAiB,OAAO,OAAO;IAAlD,UAAA,CACE,oBAAC,MAAD;KACE,IAAG;KACH,SAAS,OAAO;KAChB,QAAQ,OAAO;KACf,WAAU;KAET,UAAA;IACG,CAAA,GACN,oBAAC,MAAD;KACE,SAAS,OAAO;KAChB,OAAM;KACN,WAAU;KAET,UAAA;IACG,CAAA,CACH;;GACL,qBAAC,OAAD;IAAK,WAAW,GAAG,qBAAqB,OAAO,MAAM;IAArD,UAAA,CACG,QACA,YACC,oBAAC,MAAD;KACE,MAAM;KACN,QAAO;KACP,KAAI;KACJ,SAAS,OAAO;KACjB,UAAA;IAEK,CAAA,CAEL;;EACF;;AAET,CACF;AAEA,WAAW,cAAc"}

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

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState.js';
+export type { EmptyStateProps, EmptyStateSize, EmptyStateVariant, } from './EmptyState.js';

package/dist/components/EmptyState/index.js

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

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,35 @@
+import type { ContextType, ErrorInfo, ReactNode } from 'react';
+import { Component } from 'react';
+import { ErrorReporterContext } from '../contexts/ErrorReporterContext.js';
+interface ErrorBoundaryProps {
+    children?: ReactNode;
+    fallback?: (error: Error, retry: () => void) => ReactNode;
+    /** When this value changes, any caught error is automatically cleared. */
+    resetKey?: unknown;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
+    error: Error | null;
+    prevResetKey?: unknown;
+}> {
+    static contextType: import("react").Context<import("../contexts/ErrorReporterContext.js").ErrorReporter | undefined>;
+    context: ContextType<typeof ErrorReporterContext>;
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    static getDerivedStateFromProps(props: {
+        resetKey?: unknown;
+    }, state: {
+        error: Error | null;
+        prevResetKey?: unknown;
+    }): {
+        error: null;
+        prevResetKey: unknown;
+    } | {
+        prevResetKey: unknown;
+        error?: undefined;
+    } | null;
+    render(): ReactNode;
+}
+export {};

package/dist/components/ErrorBoundary.js

@@ -0,0 +1,41 @@
+import { ErrorReporterContext } from "../contexts/ErrorReporterContext.js";
+import { Component } from "react";
+//#region packages/components/src/components/ErrorBoundary.tsx
+var ErrorBoundary = class extends Component {
+	static contextType = ErrorReporterContext;
+	constructor(props) {
+		super(props);
+		this.state = {
+			error: null,
+			prevResetKey: props.resetKey
+		};
+	}
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	componentDidCatch(error, errorInfo) {
+		const context = {
+			source: "react-error-boundary",
+			componentStack: errorInfo.componentStack,
+			route: typeof window === "undefined" ? void 0 : window.location.pathname
+		};
+		if (this.context) this.context(error, errorInfo, { ux_impact: "blocking" });
+		else console.error("ErrorBoundary caught", error, context);
+	}
+	static getDerivedStateFromProps(props, state) {
+		if (state.error && props.resetKey !== state.prevResetKey) return {
+			error: null,
+			prevResetKey: props.resetKey
+		};
+		if (props.resetKey !== state.prevResetKey) return { prevResetKey: props.resetKey };
+		return null;
+	}
+	render() {
+		if (this.state.error) return this.props.fallback?.(this.state.error, () => this.setState(() => ({ error: null })));
+		return this.props.children;
+	}
+};
+//#endregion
+export { ErrorBoundary };
+
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/components/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","names":[],"sources":["../../src/components/ErrorBoundary.tsx"],"sourcesContent":["import type { ContextType, ErrorInfo, ReactNode } from 'react';\nimport { Component } from 'react';\n\nimport { ErrorReporterContext } from '../contexts/ErrorReporterContext';\n\ninterface ErrorBoundaryProps {\n  children?: ReactNode;\n  fallback?: (error: Error, retry: () => void) => ReactNode;\n  /** When this value changes, any caught error is automatically cleared. */\n  resetKey?: unknown;\n}\n\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  { error: Error | null; prevResetKey?: unknown }\n> {\n  static contextType = ErrorReporterContext;\n\n  declare context: ContextType<typeof ErrorReporterContext>;\n\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { error: null, prevResetKey: props.resetKey };\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    const context = {\n      source: 'react-error-boundary',\n      componentStack: errorInfo.componentStack,\n      route:\n        typeof window === 'undefined' ? undefined : window.location.pathname,\n    };\n\n    if (this.context) {\n      this.context(error, errorInfo, { ux_impact: 'blocking' });\n    } else {\n      console.error('ErrorBoundary caught', error, context);\n    }\n  }\n\n  static getDerivedStateFromProps(\n    props: { resetKey?: unknown },\n    state: { error: Error | null; prevResetKey?: unknown }\n  ) {\n    if (state.error && props.resetKey !== state.prevResetKey) {\n      return { error: null, prevResetKey: props.resetKey };\n    }\n    if (props.resetKey !== state.prevResetKey) {\n      return { prevResetKey: props.resetKey };\n    }\n    return null;\n  }\n\n  render() {\n    if (this.state.error) {\n      return this.props.fallback?.(this.state.error, () =>\n        this.setState(() => ({ error: null }))\n      );\n    }\n\n    return this.props.children;\n  }\n}\n"],"mappings":";;;AAYA,IAAa,gBAAb,cAAmC,UAGjC;CACA,OAAO,cAAc;CAIrB,YAAY,OAA2B;EACrC,MAAM,KAAK;EACX,KAAK,QAAQ;GAAE,OAAO;GAAM,cAAc,MAAM;EAAS;CAC3D;CAEA,OAAO,yBAAyB,OAAc;EAC5C,OAAO,EAAE,MAAM;CACjB;CAEA,kBAAkB,OAAc,WAAsB;EACpD,MAAM,UAAU;GACd,QAAQ;GACR,gBAAgB,UAAU;GAC1B,OACE,OAAO,WAAW,cAAc,KAAA,IAAY,OAAO,SAAS;EAChE;EAEA,IAAI,KAAK,SACP,KAAK,QAAQ,OAAO,WAAW,EAAE,WAAW,WAAW,CAAC;OAExD,QAAQ,MAAM,wBAAwB,OAAO,OAAO;CAExD;CAEA,OAAO,yBACL,OACA,OACA;EACA,IAAI,MAAM,SAAS,MAAM,aAAa,MAAM,cAC1C,OAAO;GAAE,OAAO;GAAM,cAAc,MAAM;EAAS;EAErD,IAAI,MAAM,aAAa,MAAM,cAC3B,OAAO,EAAE,cAAc,MAAM,SAAS;EAExC,OAAO;CACT;CAEA,SAAS;EACP,IAAI,KAAK,MAAM,OACb,OAAO,KAAK,MAAM,WAAW,KAAK,MAAM,aACtC,KAAK,gBAAgB,EAAE,OAAO,KAAK,EAAE,CACvC;EAGF,OAAO,KAAK,MAAM;CACpB;AACF"}

package/dist/components/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,17 @@
+import type { IconComponent } from '../Icon/index.js';
+export interface ErrorMessageProps {
+    message: React.ReactNode;
+    title?: React.ReactNode;
+    details?: React.ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    copyable?: boolean;
+    icon?: IconComponent;
+    size?: 'sm' | 'md';
+    className?: string;
+    prettify?: boolean;
+    onClose?: () => void;
+}
+declare function ErrorMessage({ message, title, details, defaultExpanded, expanded: controlledExpanded, onExpandedChange, copyable, icon, size, className, prettify, onClose, }: ErrorMessageProps): import("react").JSX.Element | null;
+export { ErrorMessage };

package/dist/components/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,146 @@
+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 { CopyIconButton } from "../CopyButton/CopyButton.js";
+import { prettifyErrorPayload } from "../../utils/prettify-error-payload.js";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExclamationMarkIcon } from "@phosphor-icons/react/dist/ssr/ExclamationMark";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region packages/components/src/components/ErrorMessage/ErrorMessage.tsx
+var sizeStyles = {
+	sm: {
+		container: "gap-space-1 pl-1.5 pr-space-1 py-0.5",
+		textVariant: "xs"
+	},
+	md: {
+		container: "gap-space-2 pl-2.5 pr-space-2 py-space-1",
+		textVariant: "sm"
+	}
+};
+function nodeToText(node) {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(nodeToText).join("");
+	if (typeof node === "object" && "props" in node && node.props && typeof node.props === "object" && "children" in node.props) return nodeToText(node.props.children);
+	return "";
+}
+function ErrorMessage({ message, title, details, defaultExpanded = false, expanded: controlledExpanded, onExpandedChange, copyable = true, icon, size = "sm", className, prettify = true, onClose }) {
+	const styles = sizeStyles[size];
+	const displayMessage = prettify && typeof message === "string" ? prettifyErrorPayload(message) : message;
+	const [expanded = false, setExpanded] = useControllableState({
+		prop: controlledExpanded,
+		defaultProp: defaultExpanded,
+		onChange: onExpandedChange
+	});
+	const messageRef = useRef(null);
+	const [messageOverflows, setMessageOverflows] = useState(false);
+	useLayoutEffect(() => {
+		const el = messageRef.current;
+		if (el == null) return;
+		function recompute() {
+			const node = messageRef.current;
+			if (node == null) return;
+			setMessageOverflows(node.scrollWidth > node.clientWidth);
+		}
+		recompute();
+		const observer = new ResizeObserver(recompute);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [displayMessage, size]);
+	const toggleExpanded = () => setExpanded(!expanded);
+	const copyText = [nodeToText(displayMessage), nodeToText(details)].filter(Boolean).join("\n\n");
+	const hasMessage = displayMessage != null && displayMessage !== false && displayMessage !== "";
+	const titleNode = title != null && title !== false && title !== "" ? title : "Error";
+	const hasDetails = details != null && details !== false && details !== "";
+	const messageIsMultiline = typeof displayMessage === "string" && displayMessage.includes("\n");
+	const canExpand = hasDetails || messageOverflows || messageIsMultiline || expanded;
+	const showCopy = copyable && copyText.length > 0;
+	const expandableAreaId = useId();
+	const expandLabel = expanded ? "Collapse" : hasDetails ? "Show error details" : "Show full error message";
+	if (!hasMessage) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		className: cn("w-full rounded-sm bg-error", styles.container, className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center gap-space-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "shrink-0",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: icon ?? ExclamationMarkIcon,
+						color: "error",
+						size: "xs",
+						rounded: true,
+						weight: icon == null ? "regular" : void 0
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("flex min-w-0 flex-1 flex-row gap-space-1"),
+					children: [/* @__PURE__ */ jsx(Text, {
+						variant: styles.textVariant,
+						weight: "medium",
+						className: cn("flex shrink-0 items-center whitespace-nowrap leading-4 text-error-secondary dark:text-error-tertiary"),
+						children: titleNode
+					}), /* @__PURE__ */ jsx(Text, {
+						ref: messageRef,
+						"aria-hidden": expanded,
+						variant: styles.textVariant,
+						className: cn("min-w-0 truncate whitespace-nowrap leading-4 text-error-secondary dark:text-error-primary", expanded && "pointer-events-none h-0"),
+						children: displayMessage
+					})]
+				}),
+				(showCopy || canExpand || onClose) && /* @__PURE__ */ jsxs("div", {
+					className: cn("flex shrink-0 items-center"),
+					children: [
+						showCopy && /* @__PURE__ */ jsx(CopyIconButton, {
+							copy: copyText,
+							copyText: "Copy error",
+							size: "xs",
+							variant: "plain",
+							color: "secondary"
+						}),
+						canExpand && /* @__PURE__ */ jsx(IconButton, {
+							icon: CaretRightIcon,
+							label: expandLabel,
+							"aria-expanded": expanded,
+							"aria-controls": expandableAreaId,
+							variant: "plain",
+							color: "secondary",
+							size: "xs",
+							onClick: toggleExpanded,
+							iconClassName: cn("transition-transform", expanded && "rotate-90")
+						}),
+						onClose && /* @__PURE__ */ jsx(IconButton, {
+							icon: XCloseIcon,
+							label: "Dismiss",
+							variant: "plain",
+							color: "secondary",
+							size: "xs",
+							onClick: onClose
+						})
+					]
+				})
+			]
+		}), expanded && /* @__PURE__ */ jsxs("div", {
+			id: expandableAreaId,
+			className: cn("flex flex-col gap-space-1 pb-space-1 pl-space-5 pr-space-1"),
+			children: [/* @__PURE__ */ jsx(Text, {
+				variant: styles.textVariant,
+				className: cn("min-w-0 whitespace-pre-wrap break-words leading-4 text-error-secondary dark:text-error-primary"),
+				children: displayMessage
+			}), hasDetails && /* @__PURE__ */ jsx(Text, {
+				variant: styles.textVariant,
+				className: "whitespace-pre-wrap break-words font-light text-error-tertiary",
+				children: details
+			})]
+		})]
+	});
+}
+//#endregion
+export { ErrorMessage };
+
+//# sourceMappingURL=ErrorMessage.js.map

package/dist/components/ErrorMessage/ErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.js","names":[],"sources":["../../../src/components/ErrorMessage/ErrorMessage.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef, useState } from 'react';\n\nimport { ExclamationMarkIcon } from '@phosphor-icons/react/dist/ssr/ExclamationMark';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nimport { CaretRightIcon, XCloseIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { prettifyErrorPayload } from '../../utils/prettify-error-payload';\nimport { CopyIconButton } from '../CopyButton';\nimport { Icon } from '../Icon';\nimport type { IconComponent } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { Text } from '../Text';\n\nexport interface ErrorMessageProps {\n  message: React.ReactNode;\n  title?: React.ReactNode;\n  details?: React.ReactNode;\n  defaultExpanded?: boolean;\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  copyable?: boolean;\n  icon?: IconComponent;\n  size?: 'sm' | 'md';\n  className?: string;\n  prettify?: boolean;\n  onClose?: () => void;\n}\n\nconst sizeStyles = {\n  sm: {\n    container: 'gap-space-1 pl-1.5 pr-space-1 py-0.5',\n\n    textVariant: 'xs',\n  },\n  md: {\n    container: 'gap-space-2 pl-2.5 pr-space-2 py-space-1',\n    textVariant: 'sm',\n  },\n} as const;\n\nfunction nodeToText(node: React.ReactNode): string {\n  if (node == null || typeof node === 'boolean') return '';\n  if (typeof node === 'string' || typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(nodeToText).join('');\n  if (\n    typeof node === 'object' &&\n    'props' in node &&\n    node.props &&\n    typeof node.props === 'object' &&\n    'children' in node.props\n  ) {\n    return nodeToText((node.props as { children: React.ReactNode }).children);\n  }\n  return '';\n}\n\nfunction ErrorMessage({\n  message,\n  title,\n  details,\n  defaultExpanded = false,\n  expanded: controlledExpanded,\n  onExpandedChange,\n  copyable = true,\n  icon,\n  size = 'sm',\n  className,\n  prettify = true,\n  onClose,\n}: ErrorMessageProps) {\n  const styles = sizeStyles[size];\n  const displayMessage =\n    prettify && typeof message === 'string'\n      ? prettifyErrorPayload(message)\n      : message;\n  const [expanded = false, setExpanded] = useControllableState({\n    prop: controlledExpanded,\n    defaultProp: defaultExpanded,\n    onChange: onExpandedChange,\n  });\n\n  const messageRef = useRef<HTMLElement>(null);\n  const [messageOverflows, setMessageOverflows] = useState(false);\n  useLayoutEffect(() => {\n    const el = messageRef.current;\n    if (el == null) return;\n\n    function recompute() {\n      const node = messageRef.current;\n      if (node == null) return;\n      setMessageOverflows(node.scrollWidth > node.clientWidth);\n    }\n\n    recompute();\n    const observer = new ResizeObserver(recompute);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [displayMessage, size]);\n  const toggleExpanded = () => setExpanded(!expanded);\n\n  const copyText = [nodeToText(displayMessage), nodeToText(details)]\n    .filter(Boolean)\n    .join('\\n\\n');\n\n  const hasMessage =\n    displayMessage != null && displayMessage !== false && displayMessage !== '';\n  const hasTitle = title != null && title !== false && title !== '';\n  const titleNode = hasTitle ? title : 'Error';\n  const hasDetails = details != null && details !== false && details !== '';\n  const messageIsMultiline =\n    typeof displayMessage === 'string' && displayMessage.includes('\\n');\n  const canExpand =\n    hasDetails || messageOverflows || messageIsMultiline || expanded;\n  const showCopy = copyable && copyText.length > 0;\n\n  const expandableAreaId = useId();\n  const expandLabel = expanded\n    ? 'Collapse'\n    : hasDetails\n      ? 'Show error details'\n      : 'Show full error message';\n\n  if (!hasMessage) return null;\n\n  return (\n    <div\n      role=\"alert\"\n      className={cn('w-full rounded-sm bg-error', styles.container, className)}\n    >\n      <div className=\"flex w-full items-center gap-space-2\">\n        <span aria-hidden=\"true\" className=\"shrink-0\">\n          <Icon\n            icon={icon ?? ExclamationMarkIcon}\n            color=\"error\"\n            size=\"xs\"\n            rounded\n            weight={icon == null ? 'regular' : undefined}\n          />\n        </span>\n        <div className={cn('flex min-w-0 flex-1 flex-row gap-space-1')}>\n          <Text\n            variant={styles.textVariant}\n            weight=\"medium\"\n            className={cn(\n              'flex shrink-0 items-center whitespace-nowrap leading-4 text-error-secondary dark:text-error-tertiary'\n            )}\n          >\n            {titleNode}\n          </Text>\n          <Text\n            ref={messageRef}\n            aria-hidden={expanded}\n            variant={styles.textVariant}\n            className={cn(\n              'min-w-0 truncate whitespace-nowrap leading-4 text-error-secondary dark:text-error-primary',\n              expanded && 'pointer-events-none h-0'\n            )}\n          >\n            {displayMessage}\n          </Text>\n        </div>\n        {(showCopy || canExpand || onClose) && (\n          <div className={cn('flex shrink-0 items-center')}>\n            {showCopy && (\n              <CopyIconButton\n                copy={copyText}\n                copyText=\"Copy error\"\n                size=\"xs\"\n                variant=\"plain\"\n                color=\"secondary\"\n              />\n            )}\n            {canExpand && (\n              <IconButton\n                icon={CaretRightIcon}\n                label={expandLabel}\n                aria-expanded={expanded}\n                aria-controls={expandableAreaId}\n                variant=\"plain\"\n                color=\"secondary\"\n                size=\"xs\"\n                onClick={toggleExpanded}\n                iconClassName={cn(\n                  'transition-transform',\n                  expanded && 'rotate-90'\n                )}\n              />\n            )}\n            {onClose && (\n              <IconButton\n                icon={XCloseIcon}\n                label=\"Dismiss\"\n                variant=\"plain\"\n                color=\"secondary\"\n                size=\"xs\"\n                onClick={onClose}\n              />\n            )}\n          </div>\n        )}\n      </div>\n      {expanded && (\n        <div\n          id={expandableAreaId}\n          className={cn(\n            'flex flex-col gap-space-1 pb-space-1 pl-space-5 pr-space-1'\n          )}\n        >\n          <Text\n            variant={styles.textVariant}\n            className={cn(\n              'min-w-0 whitespace-pre-wrap break-words leading-4 text-error-secondary dark:text-error-primary'\n            )}\n          >\n            {displayMessage}\n          </Text>\n          {hasDetails && (\n            <Text\n              variant={styles.textVariant}\n              className=\"whitespace-pre-wrap break-words font-light text-error-tertiary\"\n            >\n              {details}\n            </Text>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport { ErrorMessage };\n"],"mappings":"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"}

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

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

package/dist/components/ErrorMessage/index.js

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

package/dist/components/ErrorState/ErrorState.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+interface ErrorStateProps {
+    /** Primary heading. */
+    title: string;
+    /** Supporting copy below the title. */
+    message?: string;
+    /** When `404`, renders the illustrated not-found background. */
+    status?: number | null;
+    /** URL for the default back button (ignored when `action` is set). */
+    backTo?: string;
+    /** Label for the default back button. Defaults to `'Return to home'`. */
+    backLabel?: string;
+    /** Custom action node rendered in place of the default back button. */
+    action?: ReactNode;
+    /** Extra classes for the outer container. */
+    className?: string;
+    /** Extra classes for the inner content wrapper (e.g. to override top padding). */
+    contentClassName?: string;
+    /** Suppress the animated wave under the 404 illustration. */
+    withoutOverlay?: boolean;
+}
+export declare function ErrorState({ title, message, status, backTo, backLabel, action, className, contentClassName, withoutOverlay, }: ErrorStateProps): import("react").JSX.Element;
+export type { ErrorStateProps };

package/dist/components/ErrorState/ErrorState.js

@@ -0,0 +1,2 @@
+import { t as ErrorState } from "../../_chunks/ErrorState-CmPX01HV.js";
+export { ErrorState };

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

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

package/dist/components/ErrorState/index.js

@@ -0,0 +1,2 @@
+import { t as ErrorState } from "../../_chunks/ErrorState-CmPX01HV.js";
+export { ErrorState };

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

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { IconComponent, IconWeight } from '../../utils/icon-types.js';
+import type { TooltipProps } from '../Tooltip/index.js';
+export interface GroupedTabOption<T> {
+    display?: ReactNode | ((isActive: boolean) => ReactNode);
+    value: T;
+    disabled?: boolean;
+    tooltip?: string | ReactNode;
+    tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
+    icon?: IconComponent;
+    iconWeight?: IconWeight;
+    leftDecorator?: ReactNode;
+    rightDecorator?: ReactNode;
+    className?: string;
+    size?: 'xs' | 'sm' | 'md';
+    textClassName?: string;
+    'aria-label'?: string;
+}
+export type GroupedTabsProps<T extends string | number> = {
+    value: T;
+    onChange: (value: T) => void;
+    options: readonly GroupedTabOption<T>[];
+    className?: string;
+    size?: 'xs' | 'sm' | 'md';
+    disabled?: boolean;
+    tooltip?: string | ReactNode;
+    selectionClassName?: string;
+    /** Optional class for the indicator (e.g. to override top/height for custom margins) */
+    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;

package/dist/components/GroupedTabs/GroupedTabs.js

@@ -0,0 +1,92 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { useEffect, 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 }) => {
+	const containerRef = useRef(null);
+	const buttonRefs = useRef([]);
+	const [clipState, setClipState] = useState({
+		path: "",
+		isFirst: true,
+		animate: false
+	});
+	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
+			}));
+		}
+	}, [
+		size,
+		value,
+		options
+	]);
+	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),
+			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"
+				}
+			}), options.map((option, idx) => /* @__PURE__ */ jsx(Tooltip, {
+				title: option.tooltip,
+				...option.tooltipProps,
+				children: /* @__PURE__ */ jsxs("button", {
+					ref: (el) => {
+						buttonRefs.current[idx] = el;
+					},
+					type: "button",
+					"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"
+					}, {
+						"text-primary": isActive(option),
+						"text-secondary hover:bg-surface-level-1-hover": !isActive(option)
+					}, (option.disabled || disabled) && "text-disabled hover:bg-transparent", option.className),
+					children: [
+						option.icon && /* @__PURE__ */ jsx(option.icon, {
+							"aria-hidden": true,
+							className: size === "xs" ? "size-3" : "size-4",
+							weight: option.iconWeight
+						}),
+						option.leftDecorator,
+						option.display && (typeof option.display === "function" ? option.display(isActive(option)) : /* @__PURE__ */ jsx(Text, {
+							variant: size === "xs" ? "xs" : "sm",
+							className: cn("font-medium", option.textClassName),
+							children: option.display
+						})),
+						option.rightDecorator
+					]
+				})
+			}, option.value))]
+		})
+	});
+};
+//#endregion
+export { GroupedTabs };
+
+//# sourceMappingURL=GroupedTabs.js.map