@langchain/macaw-components 1.0.0-beta.0

package/dist/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useDebouncedCallback } from 'use-debounce';\n\nimport { cn } from '../../utils/cn';\nimport { CONTROL_SIZES } from '../../utils/componentSizes';\nimport { mergeRefs } from '../../utils/merge-refs';\nimport {\n  INPUT_HORIZONTAL_PADDING_CLASSES,\n  INPUT_RADIUS_CLASSES,\n  INPUT_TEXT_CLASSES,\n} from '../Input/inputStyles';\nimport type { InputSize } from '../Input/inputStyles';\nimport { Text } from '../Text';\n\nconst DEFAULT_AUTO_RESIZE_MAX_HEIGHT_PX = 200;\n\nexport interface TextareaProps {\n  /** First-row metrics. Total height remains intrinsic to rows and content. */\n  size?: InputSize;\n  /** Left side decorator/icon */\n  leftDecorator?: ReactNode;\n  /** Right side decorator/icon */\n  rightDecorator?: ReactNode;\n  /** Whether the textarea is disabled */\n  disabled?: boolean;\n  /** Whether the textarea has an error state */\n  isError?: boolean;\n  /** Label text displayed above the textarea */\n  label?: string | ReactNode;\n  /** Hint text displayed below the textarea */\n  hintText?: string;\n  /** Current textarea value */\n  value?: string;\n  /** Change handler that will be debounced */\n  onChange: (value: string) => void;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Debounce delay in milliseconds (default: 300) */\n  debounceMs?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Additional CSS classes applied to the inner <textarea> element */\n  inputClassName?: string;\n  /** Textarea ID for accessibility */\n  id?: string;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Auto focus on mount */\n  autoFocus?: boolean;\n  /** Number of visible rows */\n  rows?: number;\n  /** Whether the textarea can be resized */\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n  /** When true, textarea height grows with content up to maxHeight (resize is forced to none) */\n  autoResize?: boolean;\n  /** Max height in px when autoResize is true (default: 200) */\n  maxHeight?: number;\n  /** Visual variant: default (bordered container) or plain (borderless, for embedding) */\n  variant?: 'default' | 'plain';\n}\n\nexport const Textarea = forwardRef<\n  HTMLTextAreaElement,\n  TextareaProps &\n    Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextareaProps>\n>(\n  (\n    {\n      size = 'lg',\n      leftDecorator,\n      rightDecorator,\n      disabled = false,\n      isError = false,\n      label,\n      hintText,\n      value,\n      onChange,\n      placeholder,\n      debounceMs = 0,\n      className,\n      inputClassName,\n      id,\n      required = false,\n      autoFocus = false,\n      rows = 3,\n      resize = 'vertical',\n      autoResize = false,\n      maxHeight = DEFAULT_AUTO_RESIZE_MAX_HEIGHT_PX,\n      variant = 'default',\n      'aria-describedby': ariaDescribedBy,\n      ...rest\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const textareaId = id ?? generatedId;\n    const hintTextId = `${textareaId}-hint`;\n    const describedBy =\n      [hintText ? hintTextId : undefined, ariaDescribedBy]\n        .filter(Boolean)\n        .join(' ') || undefined;\n    const shouldDebounce = debounceMs > 0;\n    const [internalValue, setInternalValue] = useState(value);\n    const debouncedOnChange = useDebouncedCallback(onChange, debounceMs);\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n    // Update internal value when external value changes\n    useEffect(() => {\n      setInternalValue(value);\n    }, [value]);\n\n    // Flush pending debounced onChange on unmount so the last edit is not lost\n    useEffect(() => {\n      if (!shouldDebounce) return;\n      return () => {\n        debouncedOnChange.flush();\n      };\n    }, [shouldDebounce, debouncedOnChange]);\n\n    // Auto-resize: grow with content up to maxHeight.\n    // Run on value change and on element resize (e.g. container width change so text wraps).\n    const runAutoResize = useCallback(() => {\n      const el = textareaRef.current;\n      if (!el || !autoResize) return;\n      el.style.height = 'auto';\n      const contentHeight = Math.min(el.scrollHeight, maxHeight);\n      el.style.height = `${contentHeight}px`;\n      el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';\n    }, [autoResize, maxHeight]);\n\n    useLayoutEffect(() => {\n      const el = textareaRef.current;\n      if (!el) return;\n      if (!autoResize) {\n        el.style.height = '';\n        el.style.overflowY = '';\n        return;\n      }\n\n      runAutoResize();\n\n      const ro = new ResizeObserver(runAutoResize);\n      ro.observe(el);\n      return () => ro.disconnect();\n    }, [autoResize, internalValue, runAutoResize]);\n\n    const handleTextareaChange = (\n      e: React.ChangeEvent<HTMLTextAreaElement>\n    ) => {\n      const newValue = e.target.value;\n      setInternalValue(newValue);\n      if (shouldDebounce) {\n        debouncedOnChange(newValue);\n      } else {\n        onChange(newValue);\n      }\n    };\n\n    // Styled container that holds the textarea and decorators\n    const textareaContainerClasses = cn(\n      'flex w-full gap-space-2',\n      variant === 'default' && [\n        'border bg-transparent transition-[border-color,box-shadow,background-color]',\n        CONTROL_SIZES[size].minHeightClassName,\n        INPUT_HORIZONTAL_PADDING_CLASSES[size],\n        INPUT_RADIUS_CLASSES[size],\n        {\n          'py-px': size === 'xs',\n          'py-0.5': size === 'sm',\n          'py-space-1': size === 'md',\n          'py-space-2': size === 'lg',\n        },\n        'focus-within:outline-none',\n        'border-subtle',\n        !disabled && !isError && '[&:hover:not(:focus-within)]:border-default',\n        !isError &&\n          'focus-within:border-focus focus-within:shadow-[0_0_0_2px_var(--border-focus)]',\n        isError &&\n          'border-error-strong focus-within:border-error-strong focus-within:shadow-[0_0_0_2px_var(--border-error-strong)]',\n        disabled && 'cursor-not-allowed bg-disabled opacity-50',\n      ],\n      leftDecorator || rightDecorator ? 'items-start' : 'items-center'\n    );\n\n    // Unstyled textarea that fills the container\n    const effectiveResize = autoResize ? 'none' : resize;\n    const textareaClasses = cn(\n      'max-w-full flex-1 border-none bg-transparent p-0 outline-none',\n      INPUT_TEXT_CLASSES[size],\n      'placeholder:text-placeholder',\n      disabled && 'cursor-not-allowed',\n      // Resize handling (autoResize forces none)\n      {\n        'resize-none': effectiveResize === 'none',\n        'resize-y': effectiveResize === 'vertical',\n        'resize-x': effectiveResize === 'horizontal',\n        resize: effectiveResize === 'both',\n      },\n      inputClassName\n    );\n\n    // Decorator styles\n    const decoratorClasses = cn('flex items-center text-tertiary', {\n      'mt-0': size === 'xs' || size === 'sm',\n      'mt-0.5': size === 'md',\n      'mt-space-1': size === 'lg',\n    });\n    const leftDecoratorClasses = cn(decoratorClasses);\n    const rightDecoratorClasses = cn(decoratorClasses);\n\n    const labelClasses = cn(\n      'mb-space-1 block font-medium text-primary',\n      disabled && 'text-disabled'\n    );\n\n    const hintTextClasses = cn(\n      'mt-space-1 text-xs',\n      isError ? 'text-error-secondary' : 'text-tertiary'\n    );\n\n    const containerClasses = cn('w-full', className);\n\n    return (\n      <div className={containerClasses}>\n        {label && (\n          <Text\n            as=\"label\"\n            htmlFor={textareaId}\n            className={labelClasses}\n            variant=\"sm\"\n          >\n            {label}\n            {required && (\n              <span className=\"ml-space-1 text-error-secondary\">*</span>\n            )}\n          </Text>\n        )}\n\n        <div className={textareaContainerClasses}>\n          {leftDecorator && (\n            <div className={leftDecoratorClasses}>{leftDecorator}</div>\n          )}\n\n          {/* eslint-disable-next-line react/forbid-elements */}\n          <textarea\n            ref={mergeRefs([textareaRef, ref])}\n            id={textareaId}\n            value={internalValue ?? ''}\n            onChange={handleTextareaChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            required={required}\n            autoFocus={autoFocus}\n            rows={rows}\n            aria-describedby={describedBy}\n            aria-invalid={isError || undefined}\n            className={textareaClasses}\n            {...rest}\n          />\n\n          {rightDecorator && (\n            <div className={rightDecoratorClasses}>{rightDecorator}</div>\n          )}\n        </div>\n\n        {hintText && (\n          <Text\n            id={hintTextId}\n            className={hintTextClasses}\n            variant=\"xs\"\n            weight=\"normal\"\n          >\n            {hintText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nTextarea.displayName = 'Textarea';\n"],"mappings":"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"}

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

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

package/dist/components/Textarea/index.js

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

package/dist/components/ThinkingState/LoadingIndicator.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithRef } from 'react';
+type ThinkingStateVariant = 'drive' | 'dots' | 'orbit';
+declare const SIZES: {
+    sm: "size-4";
+    md: "size-5";
+    lg: "size-6";
+};
+interface LoadingIndicatorProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+    variant?: ThinkingStateVariant;
+    /** Indicator outer size: sm=16px, md=20px, lg=24px. */
+    size?: keyof typeof SIZES;
+    tone?: 'neutral' | 'brand';
+    /** Reduced-motion preferences always take precedence. */
+    animated?: boolean;
+}
+/** Decorative indicator. Announce loading on the surrounding control or region. */
+declare const LoadingIndicator: import("react").ForwardRefExoticComponent<Omit<LoadingIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export { LoadingIndicator };
+export type { LoadingIndicatorProps, ThinkingStateVariant };

package/dist/components/ThinkingState/LoadingIndicator.js

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

package/dist/components/ThinkingState/NOTICE

@@ -0,0 +1,25 @@
+LoadingIndicator and ThinkingState.module.css adapt the loading-state component from
+https://github.com/TurboKach/ai-native-react-components
+Source revision: 05dab2d2b5f1f3e40029776e339a486d70491079
+
+MIT License
+
+Copyright (c) 2026 Turbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/ThinkingState/ThinkingState.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type LoadingIndicatorProps } from './LoadingIndicator.js';
+interface ThinkingStateProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    /** Short, noninteractive description of the work in progress. */
+    label?: ReactNode;
+    variant?: LoadingIndicatorProps['variant'];
+    size?: LoadingIndicatorProps['size'];
+    tone?: LoadingIndicatorProps['tone'];
+    /** Full animates the grid and label; subtle animates only the grid; none is static. */
+    motion?: 'full' | 'subtle' | 'none';
+    /** Opt in to elapsed time for longer waits. Hidden by default. */
+    showElapsed?: boolean;
+    /** Supply elapsed milliseconds from the operation to disable the internal clock. */
+    elapsedMs?: number;
+    /** Seconds updates once per second; tenths preserves the finer-grained source timer. */
+    timerPrecision?: 'seconds' | 'tenths';
+}
+/** Inline status for active AI work. Remount with a new key for a new operation. */
+declare const ThinkingState: import("react").ForwardRefExoticComponent<Omit<ThinkingStateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { ThinkingState };
+export type { ThinkingStateProps };

package/dist/components/ThinkingState/ThinkingState.js

@@ -0,0 +1,42 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { n as ThinkingState_module_default, t as LoadingIndicator } from "../../_chunks/LoadingIndicator-DgtU9aqD.js";
+import { ThinkingStateTimer } from "./ThinkingStateTimer.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/ThinkingState/ThinkingState.tsx
+/** Inline status for active AI work. Remount with a new key for a new operation. */
+var ThinkingState = forwardRef(function ThinkingState({ label = "Thinking", variant = "drive", size = "sm", tone = "neutral", motion = "full", showElapsed = false, elapsedMs, timerPrecision = "seconds", className, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref,
+		className: cn("inline-flex max-w-full items-center gap-space-2 align-middle", className),
+		children: [/* @__PURE__ */ jsx(LoadingIndicator, {
+			variant,
+			size,
+			tone,
+			animated: motion !== "none"
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex min-w-0 items-baseline gap-space-2",
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: size === "sm" ? "sm" : "md",
+				weight: "medium",
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: cn("min-w-0 break-words leading-4", motion === "full" ? ThinkingState_module_default.shimmer : "text-secondary", motion === "full" && tone === "brand" && ThinkingState_module_default.brandShimmer),
+				children: label
+			}), /* @__PURE__ */ jsx(ThinkingStateTimer, {
+				visible: showElapsed,
+				elapsedMs,
+				precision: timerPrecision,
+				size
+			})]
+		})]
+	});
+});
+//#endregion
+export { ThinkingState };
+
+//# sourceMappingURL=ThinkingState.js.map

package/dist/components/ThinkingState/ThinkingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThinkingState.js","names":[],"sources":["../../../src/components/ThinkingState/ThinkingState.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { Text } from '../Text';\nimport {\n  LoadingIndicator,\n  type LoadingIndicatorProps,\n} from './LoadingIndicator';\nimport { ThinkingStateTimer } from './ThinkingStateTimer';\n\nimport styles from './ThinkingState.module.css';\n\ninterface ThinkingStateProps extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children'\n> {\n  /** Short, noninteractive description of the work in progress. */\n  label?: ReactNode;\n  variant?: LoadingIndicatorProps['variant'];\n  size?: LoadingIndicatorProps['size'];\n  tone?: LoadingIndicatorProps['tone'];\n  /** Full animates the grid and label; subtle animates only the grid; none is static. */\n  motion?: 'full' | 'subtle' | 'none';\n  /** Opt in to elapsed time for longer waits. Hidden by default. */\n  showElapsed?: boolean;\n  /** Supply elapsed milliseconds from the operation to disable the internal clock. */\n  elapsedMs?: number;\n  /** Seconds updates once per second; tenths preserves the finer-grained source timer. */\n  timerPrecision?: 'seconds' | 'tenths';\n}\n\n/** Inline status for active AI work. Remount with a new key for a new operation. */\nconst ThinkingState = forwardRef<HTMLDivElement, ThinkingStateProps>(\n  function ThinkingState(\n    {\n      label = 'Thinking',\n      variant = 'drive',\n      size = 'sm',\n      tone = 'neutral',\n      motion = 'full',\n      showElapsed = false,\n      elapsedMs,\n      timerPrecision = 'seconds',\n      className,\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cn(\n          'inline-flex max-w-full items-center gap-space-2 align-middle',\n          className\n        )}\n      >\n        <LoadingIndicator\n          variant={variant}\n          size={size}\n          tone={tone}\n          animated={motion !== 'none'}\n        />\n        <span className=\"inline-flex min-w-0 items-baseline gap-space-2\">\n          <Text\n            as=\"span\"\n            variant={size === 'sm' ? 'sm' : 'md'}\n            weight=\"medium\"\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            className={cn(\n              'min-w-0 break-words leading-4',\n              motion === 'full' ? styles.shimmer : 'text-secondary',\n              motion === 'full' && tone === 'brand' && styles.brandShimmer\n            )}\n          >\n            {label}\n          </Text>\n          <ThinkingStateTimer\n            visible={showElapsed}\n            elapsedMs={elapsedMs}\n            precision={timerPrecision}\n            size={size}\n          />\n        </span>\n      </div>\n    );\n  }\n);\n\nexport { ThinkingState };\nexport type { ThinkingStateProps };\n"],"mappings":";;;;;;;;AAiCA,IAAM,gBAAgB,WACpB,SAAS,cACP,EACE,QAAQ,YACR,UAAU,SACV,OAAO,MACP,OAAO,WACP,SAAS,QACT,cAAc,OACd,WACA,iBAAiB,WACjB,WACA,GAAG,SAEL,KACA;CACA,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,gEACA,SACF;EANF,UAAA,CAQE,oBAAC,kBAAD;GACW;GACH;GACA;GACN,UAAU,WAAW;EACtB,CAAA,GACD,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,MAAD;IACE,IAAG;IACH,SAAS,SAAS,OAAO,OAAO;IAChC,QAAO;IACP,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAW,GACT,iCACA,WAAW,SAAS,6BAAO,UAAU,kBACrC,WAAW,UAAU,SAAS,WAAW,6BAAO,YAClD;IAEC,UAAA;GACG,CAAA,GACN,oBAAC,oBAAD;IACE,SAAS;IACE;IACX,WAAW;IACL;GACP,CAAA,CACG;EACH,CAAA,CAAA;;AAET,CACF"}

package/dist/components/ThinkingState/ThinkingStateTimer.d.ts

@@ -0,0 +1,9 @@
+interface ThinkingStateTimerProps {
+    visible: boolean;
+    elapsedMs?: number;
+    precision: 'seconds' | 'tenths';
+    size: 'sm' | 'md' | 'lg';
+}
+/** Keeps clock updates local to the timer, without rerendering the label or grid. */
+export declare function ThinkingStateTimer({ visible, elapsedMs, precision, size, }: ThinkingStateTimerProps): import("react").JSX.Element | null;
+export {};

package/dist/components/ThinkingState/ThinkingStateTimer.js

@@ -0,0 +1,43 @@
+import { Text } from "../Text/Text.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/ThinkingState/ThinkingStateTimer.tsx
+/** Keeps clock updates local to the timer, without rerendering the label or grid. */
+function ThinkingStateTimer({ visible, elapsedMs, precision, size }) {
+	const startedAt = useRef(null);
+	const [measuredMs, setMeasuredMs] = useState(0);
+	const controlled = elapsedMs !== void 0;
+	const intervalMs = precision === "tenths" ? 100 : 1e3;
+	useEffect(() => {
+		startedAt.current ??= performance.now();
+		const start = startedAt.current;
+		if (!visible || controlled) return;
+		const tick = () => setMeasuredMs(performance.now() - start);
+		tick();
+		const interval = window.setInterval(tick, intervalMs);
+		return () => window.clearInterval(interval);
+	}, [
+		controlled,
+		intervalMs,
+		visible
+	]);
+	if (!visible) return null;
+	const value = elapsedMs ?? measuredMs;
+	const tenths = Math.floor((Number.isFinite(value) ? Math.max(0, value) : 0) / 100);
+	const minutes = Math.floor(tenths / 600);
+	const seconds = precision === "tenths" ? (tenths % 600 / 10).toFixed(1) : String(Math.floor(tenths % 600 / 10));
+	return /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		variant: size === "sm" ? "xs" : "sm",
+		color: "tertiary",
+		role: "timer",
+		"aria-label": "Elapsed time",
+		"aria-live": "off",
+		className: "shrink-0 whitespace-nowrap font-mono tabular-nums leading-4",
+		children: minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`
+	});
+}
+//#endregion
+export { ThinkingStateTimer };
+
+//# sourceMappingURL=ThinkingStateTimer.js.map

package/dist/components/ThinkingState/ThinkingStateTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThinkingStateTimer.js","names":[],"sources":["../../../src/components/ThinkingState/ThinkingStateTimer.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { Text } from '../Text';\n\ninterface ThinkingStateTimerProps {\n  visible: boolean;\n  elapsedMs?: number;\n  precision: 'seconds' | 'tenths';\n  size: 'sm' | 'md' | 'lg';\n}\n\n/** Keeps clock updates local to the timer, without rerendering the label or grid. */\nexport function ThinkingStateTimer({\n  visible,\n  elapsedMs,\n  precision,\n  size,\n}: ThinkingStateTimerProps) {\n  const startedAt = useRef<number | null>(null);\n  const [measuredMs, setMeasuredMs] = useState(0);\n  const controlled = elapsedMs !== undefined;\n  const intervalMs = precision === 'tenths' ? 100 : 1_000;\n\n  useEffect(() => {\n    startedAt.current ??= performance.now();\n    const start = startedAt.current;\n    if (!visible || controlled) return;\n\n    // Measure time so hidden tabs and delayed callbacks do not lose elapsed time.\n    const tick = () => setMeasuredMs(performance.now() - start);\n    tick();\n    const interval = window.setInterval(tick, intervalMs);\n    return () => window.clearInterval(interval);\n  }, [controlled, intervalMs, visible]);\n\n  if (!visible) return null;\n\n  const value = elapsedMs ?? measuredMs;\n  const safeMs = Number.isFinite(value) ? Math.max(0, value) : 0;\n  const tenths = Math.floor(safeMs / 100);\n  const minutes = Math.floor(tenths / 600);\n  const seconds =\n    precision === 'tenths'\n      ? ((tenths % 600) / 10).toFixed(1)\n      : String(Math.floor((tenths % 600) / 10));\n\n  return (\n    <Text\n      as=\"span\"\n      variant={size === 'sm' ? 'xs' : 'sm'}\n      color=\"tertiary\"\n      role=\"timer\"\n      aria-label=\"Elapsed time\"\n      aria-live=\"off\"\n      className=\"shrink-0 whitespace-nowrap font-mono tabular-nums leading-4\"\n    >\n      {minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`}\n    </Text>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAgB,mBAAmB,EACjC,SACA,WACA,WACA,QAC0B;CAC1B,MAAM,YAAY,OAAsB,IAAI;CAC5C,MAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;CAC9C,MAAM,aAAa,cAAc,KAAA;CACjC,MAAM,aAAa,cAAc,WAAW,MAAM;CAElD,gBAAgB;EACd,UAAU,YAAY,YAAY,IAAI;EACtC,MAAM,QAAQ,UAAU;EACxB,IAAI,CAAC,WAAW,YAAY;EAG5B,MAAM,aAAa,cAAc,YAAY,IAAI,IAAI,KAAK;EAC1D,KAAK;EACL,MAAM,WAAW,OAAO,YAAY,MAAM,UAAU;EACpD,aAAa,OAAO,cAAc,QAAQ;CAC5C,GAAG;EAAC;EAAY;EAAY;CAAO,CAAC;CAEpC,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,QAAQ,aAAa;CAE3B,MAAM,SAAS,KAAK,OADL,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,KAC1B,GAAG;CACtC,MAAM,UAAU,KAAK,MAAM,SAAS,GAAG;CACvC,MAAM,UACJ,cAAc,YACR,SAAS,MAAO,GAAA,CAAI,QAAQ,CAAC,IAC/B,OAAO,KAAK,MAAO,SAAS,MAAO,EAAE,CAAC;CAE5C,OACE,oBAAC,MAAD;EACE,IAAG;EACH,SAAS,SAAS,OAAO,OAAO;EAChC,OAAM;EACN,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAU;EAET,UAAA,UAAU,IAAI,GAAG,QAAQ,IAAI,QAAQ,KAAK,GAAG,QAAQ;CAClD,CAAA;AAEV"}

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

@@ -0,0 +1,4 @@
+export { ThinkingState } from './ThinkingState.js';
+export type { ThinkingStateProps } from './ThinkingState.js';
+export { LoadingIndicator } from './LoadingIndicator.js';
+export type { LoadingIndicatorProps, ThinkingStateVariant, } from './LoadingIndicator.js';

package/dist/components/ThinkingState/index.js

@@ -0,0 +1,3 @@
+import { t as LoadingIndicator } from "../../_chunks/LoadingIndicator-DgtU9aqD.js";
+import { ThinkingState } from "./ThinkingState.js";
+export { LoadingIndicator, ThinkingState };

package/dist/components/Toast/ToastContext.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ToastConfig } from '.';
+export declare const ToastContext: React.Context<{
+    createToast: (titleOrConfig: ToastConfig | string) => void;
+}>;

package/dist/components/Toast/ToastContext.js

@@ -0,0 +1,9 @@
+import React from "react";
+//#region packages/components/src/components/Toast/ToastContext.tsx
+var ToastContext = React.createContext({ createToast: () => {
+	console.error("ToastContext not initialized");
+} });
+//#endregion
+export { ToastContext };
+
+//# sourceMappingURL=ToastContext.js.map

package/dist/components/Toast/ToastContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContext.js","names":[],"sources":["../../../src/components/Toast/ToastContext.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { ToastConfig } from '.';\n\nexport const ToastContext = React.createContext<{\n  createToast: (titleOrConfig: ToastConfig | string) => void;\n}>({\n  createToast: () => {\n    console.error('ToastContext not initialized');\n  },\n});\n"],"mappings":";;AAIA,IAAa,eAAe,MAAM,cAE/B,EACD,mBAAmB;CACjB,QAAQ,MAAM,8BAA8B;AAC9C,EACF,CAAC"}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export type ToastConfig = {
+    title?: string | React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    duration?: number;
+    viewPortClassName?: string;
+    error?: boolean;
+    type?: 'error' | 'info' | 'warning' | 'success';
+};

package/dist/components/Toast/index.js

@@ -0,0 +1,166 @@
+import { cn } from "../../utils/cn.js";
+import zIndices from "../../utils/zIndices.js";
+import { ZIndexProvider } from "../../utils/ZIndexContext.js";
+import { CheckIcon, XCloseIcon } from "../../icons/PaddedPhosphorIcons.js";
+import { Icon } from "../Icon/Icon.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { CopyIconButton } from "../CopyButton/CopyButton.js";
+import { ToastContext } from "./ToastContext.js";
+import React, { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExclamationMarkIcon } from "@phosphor-icons/react/dist/ssr/ExclamationMark";
+import { InfoIcon } from "@phosphor-icons/react/dist/ssr/Info";
+import * as ToastLib from "@radix-ui/react-toast";
+//#region packages/components/src/components/Toast/index.tsx
+var DEFAULT_DURATION_MS = 5e3;
+var ERROR_DURATION_MS = Infinity;
+function ToastProvider({ children }) {
+	const [open, setOpen] = React.useState(false);
+	const [config, setConfig] = React.useState(null);
+	const createToast = useCallback((titleOrConfig) => {
+		const preConfig = typeof titleOrConfig === "string" ? { title: titleOrConfig } : titleOrConfig;
+		const config = {
+			duration: preConfig.error || preConfig.type === "error" ? ERROR_DURATION_MS : DEFAULT_DURATION_MS,
+			...preConfig
+		};
+		setConfig(config);
+		setOpen(true);
+	}, []);
+	return /* @__PURE__ */ jsx(ToastContext.Provider, {
+		value: { createToast },
+		children: /* @__PURE__ */ jsxs(ToastLib.Provider, {
+			swipeDirection: "right",
+			children: [
+				children,
+				/* @__PURE__ */ jsx(ZIndexProvider, {
+					value: zIndices.toast,
+					children: /* @__PURE__ */ jsx(Toast, {
+						title: config?.title,
+						description: config?.description,
+						open,
+						setOpen,
+						action: config?.action,
+						error: config?.error,
+						duration: config?.duration,
+						type: config?.type
+					})
+				}),
+				/* @__PURE__ */ jsx(ToastLib.Viewport, {
+					className: cn("fixed bottom-0 right-0 m-0 flex w-[390px] max-w-[100vw] list-none flex-col gap-[10px] p-[var(--viewport-padding)] outline-none [--viewport-padding:_25px]", config?.viewPortClassName),
+					style: { zIndex: zIndices.toast }
+				})
+			]
+		})
+	});
+}
+var stopSwipeOnTextSelect = (e) => e.stopPropagation();
+var SURFACE_BY_TYPE = {
+	default: "bg-surface-level-2 border-subtle",
+	error: "bg-error border-error",
+	warning: "bg-warning border-warning",
+	success: "bg-success border-success",
+	info: "bg-brand-subtle border-brand-75"
+};
+function renderToastIcon(isError, type) {
+	if (isError) return /* @__PURE__ */ jsx(Icon, {
+		icon: ExclamationMarkIcon,
+		weight: "regular",
+		rounded: true,
+		color: "error"
+	});
+	if (type === "success") return /* @__PURE__ */ jsx(Icon, {
+		icon: CheckIcon,
+		rounded: true,
+		color: "success"
+	});
+	if (type === "warning") return /* @__PURE__ */ jsx(Icon, {
+		icon: ExclamationMarkIcon,
+		weight: "regular",
+		rounded: true,
+		color: "warning"
+	});
+	if (type === "info") return /* @__PURE__ */ jsx(Icon, {
+		icon: InfoIcon,
+		weight: "fill",
+		rounded: true,
+		color: "info"
+	});
+	return /* @__PURE__ */ jsx(Icon, {
+		icon: InfoIcon,
+		weight: "fill",
+		rounded: true,
+		color: "neutral"
+	});
+}
+function Toast({ title, open, setOpen, description, action, error, duration, type }) {
+	const isError = error || type === "error";
+	const surface = SURFACE_BY_TYPE[isError ? "error" : type ?? "default"];
+	const hasTitle = title !== void 0 && title !== null && title !== "";
+	const copyText = isError && typeof title === "string" ? typeof description === "string" ? `${title}\n${description}` : title : null;
+	const descriptionNode = description && /* @__PURE__ */ jsx(ToastLib.Description, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("max-h-32 cursor-text select-text overflow-y-auto whitespace-pre-wrap", hasTitle ? "ml-space-6 text-xxs text-secondary" : "text-sm text-primary"),
+			onPointerDown: stopSwipeOnTextSelect,
+			children: description
+		})
+	});
+	const trailingButtons = /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-space-2",
+		children: [copyText && /* @__PURE__ */ jsx(CopyIconButton, {
+			size: "xs",
+			copy: copyText,
+			copyText: "Copy error message"
+		}), /* @__PURE__ */ jsx(ToastLib.Close, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(IconButton, {
+				icon: XCloseIcon,
+				label: "Dismiss",
+				size: "xs",
+				variant: "plain",
+				color: "secondary"
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsx(ToastLib.Root, {
+		className: cn("flex items-start gap-space-2 rounded-md border p-space-3", surface, "shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]", "data-[swipe=cancel]:translate-x-0 data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-hide data-[state=open]:animate-slideIn data-[swipe=end]:animate-swipeOut data-[swipe=cancel]:transition-[transform_200ms_ease-out]"),
+		open,
+		onOpenChange: setOpen,
+		duration,
+		children: hasTitle ? /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-col gap-space-2 pb-space-1",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex w-full items-center",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex w-full items-center gap-space-2",
+						children: [renderToastIcon(isError, type), /* @__PURE__ */ jsx(ToastLib.Title, {
+							className: "cursor-text select-text font-medium text-primary",
+							onPointerDown: stopSwipeOnTextSelect,
+							children: title
+						})]
+					}), trailingButtons]
+				}),
+				descriptionNode,
+				action && /* @__PURE__ */ jsx("div", {
+					className: "ml-space-6",
+					children: action
+				})
+			]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-start gap-space-2",
+			children: [
+				renderToastIcon(isError, type),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 flex-col gap-space-2",
+					children: [descriptionNode, action]
+				}),
+				trailingButtons
+			]
+		})
+	});
+}
+//#endregion
+export { ToastProvider };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Toast/index.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ExclamationMarkIcon } from '@phosphor-icons/react/dist/ssr/ExclamationMark';\nimport { InfoIcon } from '@phosphor-icons/react/dist/ssr/Info';\nimport * as ToastLib from '@radix-ui/react-toast';\n\nimport { CheckIcon, XCloseIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\nimport { CopyIconButton } from '../CopyButton';\nimport { Icon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { ToastContext } from './ToastContext';\n\nconst DEFAULT_DURATION_MS = 5000;\n// Error toasts do not auto-dismiss; the user must click the close button.\nconst ERROR_DURATION_MS = Infinity;\n\n// Provider wraps whole application\nexport function ToastProvider({ children }: { children: React.ReactNode }) {\n  // note this only supports one toast at a time currently\n  const [open, setOpen] = React.useState(false);\n  const [config, setConfig] = React.useState<ToastConfig | null>(null);\n\n  const createToast = useCallback((titleOrConfig: ToastConfig | string) => {\n    const preConfig =\n      typeof titleOrConfig === 'string'\n        ? { title: titleOrConfig }\n        : titleOrConfig;\n    const isError = preConfig.error || preConfig.type === 'error';\n    const config: ToastConfig = {\n      duration: isError ? ERROR_DURATION_MS : DEFAULT_DURATION_MS,\n      ...preConfig,\n    };\n\n    setConfig(config);\n    setOpen(true);\n  }, []);\n\n  return (\n    <ToastContext.Provider value={{ createToast }}>\n      <ToastLib.Provider swipeDirection=\"right\">\n        {children}\n        <ZIndexProvider value={zIndices.toast}>\n          <Toast\n            title={config?.title}\n            description={config?.description}\n            open={open}\n            setOpen={setOpen}\n            action={config?.action}\n            error={config?.error}\n            duration={config?.duration}\n            type={config?.type}\n          />\n        </ZIndexProvider>\n        <ToastLib.Viewport\n          className={cn(\n            'fixed bottom-0 right-0 m-0 flex w-[390px] max-w-[100vw] list-none flex-col gap-[10px] p-[var(--viewport-padding)] outline-none [--viewport-padding:_25px]',\n            config?.viewPortClassName\n          )}\n          style={{ zIndex: zIndices.toast }}\n        />\n      </ToastLib.Provider>\n    </ToastContext.Provider>\n  );\n}\n\nexport type ToastConfig = {\n  title?: string | React.ReactNode;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n  duration?: number;\n  viewPortClassName?: string;\n  error?: boolean;\n  type?: 'error' | 'info' | 'warning' | 'success';\n};\n\nconst stopSwipeOnTextSelect = (e: React.PointerEvent) => e.stopPropagation();\n\nconst SURFACE_BY_TYPE = {\n  default: 'bg-surface-level-2 border-subtle',\n  error: 'bg-error border-error',\n  warning: 'bg-warning border-warning',\n  success: 'bg-success border-success',\n  info: 'bg-brand-subtle border-brand-75',\n} as const;\n\nfunction renderToastIcon(isError: boolean, type: ToastConfig['type']) {\n  if (isError)\n    return (\n      <Icon icon={ExclamationMarkIcon} weight=\"regular\" rounded color=\"error\" />\n    );\n  if (type === 'success')\n    return <Icon icon={CheckIcon} rounded color=\"success\" />;\n  if (type === 'warning')\n    return (\n      <Icon\n        icon={ExclamationMarkIcon}\n        weight=\"regular\"\n        rounded\n        color=\"warning\"\n      />\n    );\n  if (type === 'info')\n    return <Icon icon={InfoIcon} weight=\"fill\" rounded color=\"info\" />;\n  return <Icon icon={InfoIcon} weight=\"fill\" rounded color=\"neutral\" />;\n}\n\nfunction Toast({\n  title,\n  open,\n  setOpen,\n  description,\n  action,\n  error,\n  duration,\n  type,\n}: {\n  title?: string | React.ReactNode;\n  open: boolean;\n  setOpen?: (open: boolean) => void;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n  error?: boolean;\n  duration?: number;\n  type?: 'error' | 'info' | 'warning' | 'success';\n}) {\n  const isError = error || type === 'error';\n  const surface = SURFACE_BY_TYPE[isError ? 'error' : (type ?? 'default')];\n  const hasTitle = title !== undefined && title !== null && title !== '';\n  const copyText =\n    isError && typeof title === 'string'\n      ? typeof description === 'string'\n        ? `${title}\\n${description}`\n        : title\n      : null;\n\n  const descriptionNode = description && (\n    <ToastLib.Description asChild>\n      <div\n        className={cn(\n          'max-h-32 cursor-text select-text overflow-y-auto whitespace-pre-wrap',\n          hasTitle\n            ? 'ml-space-6 text-xxs text-secondary'\n            : 'text-sm text-primary'\n        )}\n        onPointerDown={stopSwipeOnTextSelect}\n      >\n        {description}\n      </div>\n    </ToastLib.Description>\n  );\n\n  const trailingButtons = (\n    <div className=\"flex gap-space-2\">\n      {copyText && (\n        <CopyIconButton\n          size=\"xs\"\n          copy={copyText}\n          copyText=\"Copy error message\"\n        />\n      )}\n      <ToastLib.Close asChild>\n        <IconButton\n          icon={XCloseIcon}\n          label=\"Dismiss\"\n          size=\"xs\"\n          variant=\"plain\"\n          color=\"secondary\"\n        />\n      </ToastLib.Close>\n    </div>\n  );\n\n  return (\n    <ToastLib.Root\n      className={cn(\n        'flex items-start gap-space-2 rounded-md border p-space-3',\n        surface,\n        'shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]',\n        'data-[swipe=cancel]:translate-x-0 data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-hide data-[state=open]:animate-slideIn data-[swipe=end]:animate-swipeOut data-[swipe=cancel]:transition-[transform_200ms_ease-out]'\n      )}\n      open={open}\n      onOpenChange={setOpen}\n      duration={duration}\n    >\n      {hasTitle ? (\n        <div className=\"flex w-full flex-col gap-space-2 pb-space-1\">\n          <div className=\"flex w-full items-center\">\n            <div className=\"flex w-full items-center gap-space-2\">\n              {renderToastIcon(isError, type)}\n              <ToastLib.Title\n                className=\"cursor-text select-text font-medium text-primary\"\n                onPointerDown={stopSwipeOnTextSelect}\n              >\n                {title}\n              </ToastLib.Title>\n            </div>\n            {trailingButtons}\n          </div>\n          {descriptionNode}\n          {action && <div className=\"ml-space-6\">{action}</div>}\n        </div>\n      ) : (\n        <div className=\"flex w-full items-start gap-space-2\">\n          {renderToastIcon(isError, type)}\n          <div className=\"flex flex-1 flex-col gap-space-2\">\n            {descriptionNode}\n            {action}\n          </div>\n          {trailingButtons}\n        </div>\n      )}\n    </ToastLib.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Toast/useToast.d.ts

@@ -0,0 +1,3 @@
+export default function useToast(): {
+    createToast: (titleOrConfig: import(".").ToastConfig | string) => void;
+};

package/dist/components/Toast/useToast.js

@@ -0,0 +1,11 @@
+import { ToastContext } from "./ToastContext.js";
+import React from "react";
+//#region packages/components/src/components/Toast/useToast.tsx
+function useToast() {
+	const { createToast } = React.useContext(ToastContext);
+	return { createToast };
+}
+//#endregion
+export { useToast as default };
+
+//# sourceMappingURL=useToast.js.map

package/dist/components/Toast/useToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.js","names":[],"sources":["../../../src/components/Toast/useToast.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ToastContext } from './ToastContext';\n\nexport default function useToast() {\n  const { createToast } = React.useContext(ToastContext);\n  return { createToast };\n}\n"],"mappings":";;;AAIA,SAAwB,WAAW;CACjC,MAAM,EAAE,gBAAgB,MAAM,WAAW,YAAY;CACrD,OAAO,EAAE,YAAY;AACvB"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export type TooltipProps = {
+    title?: string | ReactNode;
+    description?: ReactNode;
+    children: ReactNode;
+    tooltipClassName?: string;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+    alignOffset?: number;
+    invert?: boolean;
+    delayDuration?: number;
+    disabled?: boolean;
+    blockTriggerEvents?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disableHoverableContent?: boolean;
+};
+export declare function Tooltip({ title, description, children, tooltipClassName, side, sideOffset, align, alignOffset, invert, delayDuration, disabled, blockTriggerEvents, open, onOpenChange, disableHoverableContent, }: TooltipProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,57 @@
+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 * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/Tooltip/Tooltip.tsx
+function Tooltip({ title, description, children, tooltipClassName, side = "top", sideOffset = 10, align = "center", alignOffset = 0, invert = false, delayDuration = 300, disabled = false, blockTriggerEvents = false, open, onOpenChange, disableHoverableContent = true }) {
+	const zIndex = useZIndex(zIndices.tooltip);
+	if (!title && !description || disabled) return children;
+	return /* @__PURE__ */ jsxs(TooltipPrimitive.Root, {
+		delayDuration,
+		open,
+		onOpenChange,
+		disableHoverableContent,
+		children: [/* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+			asChild: true,
+			onPointerDown: (e) => {
+				if (blockTriggerEvents) {
+					e.preventDefault();
+					e.stopPropagation();
+				}
+			},
+			children
+		}), /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+			sideOffset,
+			side,
+			align,
+			alignOffset,
+			collisionPadding: 8,
+			className: cn("max-w-[320px] overflow-hidden rounded-md border border-secondary bg-background p-space-2 text-sm shadow-md dark:bg-secondary", "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", tooltipClassName, invert && "invert"),
+			style: { zIndex },
+			children: /* @__PURE__ */ jsx(ZIndexProvider, {
+				value: zIndex,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-space-2 text-xxs",
+					children: [typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
+						variant: "sm",
+						"data-target": "title",
+						className: !tooltipClassName ? "text-primary" : "",
+						children: title
+					}) : title, description && /* @__PURE__ */ jsx(Text, {
+						variant: "sm",
+						className: !tooltipClassName ? "text-secondary" : "",
+						"data-target": "description",
+						children: description
+					})]
+				})
+			})
+		}) })]
+	});
+}
+//#endregion
+export { Tooltip };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\nimport { cn } from '../../utils/cn';\nimport { useZIndex } from '../../utils/useZIndex';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\nimport { Text } from '../Text';\n\nexport type TooltipProps = {\n  title?: string | ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  tooltipClassName?: string;\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n  invert?: boolean;\n  delayDuration?: number;\n  disabled?: boolean;\n  blockTriggerEvents?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disableHoverableContent?: boolean;\n};\n\n// Tooltip sets two opinionated defaults — override with caution:\n// - delayDuration=300: prevents tooltips from blocking clicks\n// - disableHoverableContent=true: dismisses the tooltip when hovering off the trigger\nexport function Tooltip({\n  title,\n  description,\n  children,\n  tooltipClassName,\n  side = 'top',\n  sideOffset = 10,\n  align = 'center',\n  alignOffset = 0,\n  invert = false,\n  delayDuration = 300,\n  disabled = false,\n  blockTriggerEvents = false,\n  open,\n  onOpenChange,\n  disableHoverableContent = true,\n}: TooltipProps) {\n  // Tooltips have no fixed z-index floor — they always render one level above\n  // their parent caller so they naturally stack above whichever layer triggered them.\n  const zIndex = useZIndex(zIndices.tooltip);\n\n  if ((!title && !description) || disabled) {\n    return children;\n  }\n\n  return (\n    <TooltipPrimitive.Root\n      delayDuration={delayDuration}\n      open={open}\n      onOpenChange={onOpenChange}\n      disableHoverableContent={disableHoverableContent}\n    >\n      <TooltipPrimitive.Trigger\n        asChild\n        onPointerDown={(e) => {\n          if (blockTriggerEvents) {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        }}\n      >\n        {children}\n      </TooltipPrimitive.Trigger>\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          sideOffset={sideOffset}\n          side={side}\n          align={align}\n          alignOffset={alignOffset}\n          collisionPadding={8}\n          className={cn(\n            'max-w-[320px] overflow-hidden rounded-md border border-secondary bg-background p-space-2 text-sm shadow-md dark:bg-secondary',\n            'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n            tooltipClassName,\n            invert && 'invert'\n          )}\n          style={{ zIndex }}\n        >\n          <ZIndexProvider value={zIndex}>\n            <div className=\"flex flex-col gap-space-2 text-xxs\">\n              {typeof title === 'string' ? (\n                <Text\n                  variant=\"sm\"\n                  data-target=\"title\"\n                  className={!tooltipClassName ? 'text-primary' : ''}\n                >\n                  {title}\n                </Text>\n              ) : (\n                title\n              )}\n              {description && (\n                <Text\n                  variant=\"sm\"\n                  className={!tooltipClassName ? 'text-secondary' : ''}\n                  data-target=\"description\"\n                >\n                  {description}\n                </Text>\n              )}\n            </div>\n          </ZIndexProvider>\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    </TooltipPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgB,QAAQ,EACtB,OACA,aACA,UACA,kBACA,OAAO,OACP,aAAa,IACb,QAAQ,UACR,cAAc,GACd,SAAS,OACT,gBAAgB,KAChB,WAAW,OACX,qBAAqB,OACrB,MACA,cACA,0BAA0B,QACX;CAGf,MAAM,SAAS,UAAU,SAAS,OAAO;CAEzC,IAAK,CAAC,SAAS,CAAC,eAAgB,UAC9B,OAAO;CAGT,OACE,qBAAC,iBAAiB,MAAlB;EACiB;EACT;EACQ;EACW;EAJ3B,UAAA,CAME,oBAAC,iBAAiB,SAAlB;GACE,SAAA;GACA,gBAAgB,MAAM;IACpB,IAAI,oBAAoB;KACtB,EAAE,eAAe;KACjB,EAAE,gBAAgB;IACpB;GACF;GAEC;EACuB,CAAA,GAC1B,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;GACc;GACN;GACC;GACM;GACb,kBAAkB;GAClB,WAAW,GACT,gIACA,8RACA,kBACA,UAAU,QACZ;GACA,OAAO,EAAE,OAAO;GAEhB,UAAA,oBAAC,gBAAD;IAAgB,OAAO;IACrB,UAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,OAAO,UAAU,WAChB,oBAAC,MAAD;MACE,SAAQ;MACR,eAAY;MACZ,WAAW,CAAC,mBAAmB,iBAAiB;MAE/C,UAAA;KACG,CAAA,IAEN,OAED,eACC,oBAAC,MAAD;MACE,SAAQ;MACR,WAAW,CAAC,mBAAmB,mBAAmB;MAClD,eAAY;MAEX,UAAA;KACG,CAAA,CAEL;;GACS,CAAA;EACQ,CAAA,EACH,CAAA,CACJ;;AAE3B"}

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

@@ -0,0 +1,3 @@
+export { Tooltip } from './Tooltip.js';
+export { TooltipProvider } from '@radix-ui/react-tooltip';
+export type { TooltipProps } from './Tooltip.js';

package/dist/components/Tooltip/index.js

@@ -0,0 +1,3 @@
+import { Tooltip } from "./Tooltip.js";
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+export { Tooltip, TooltipProvider };

package/dist/components/TopList/TopList.d.ts

@@ -0,0 +1,3 @@
+import type { TopListItem, TopListProps } from './TopList.types.js';
+/** Use for ranked top-K data; adapters own data shaping, tooltips, and navigation. */
+export declare const TopList: <Item extends TopListItem>({ items, sort, limit, formatValue, valueAxisLabel, categoryLabelWidth, activeItemId, getItemAriaLabel, isRendering, shouldAnimate, onItemPointerMove, onItemPointerOut, onItemActivate, onItemFocus, onItemBlur, className, "aria-label": ariaLabel, ...rest }: TopListProps<Item>) => import("react").JSX.Element;