@langchain/macaw-components 1.0.0-beta.0

package/dist/components/PlainTextEditor/hooks/useResizeTextEditor.js

@@ -0,0 +1,76 @@
+import { useEffect, useRef, useState } from "react";
+//#region packages/components/src/components/PlainTextEditor/hooks/useResizeTextEditor.ts
+var useResizeTextEditor = ({ maxHeight, internalValue, textRef }) => {
+	const displayDivRef = useRef(null);
+	const textareaRef = useRef(null);
+	const actualTextRef = textRef ?? textareaRef;
+	const [manuallyResized, setManuallyResized] = useState(false);
+	const lastContentLength = useRef(internalValue.length);
+	const maxHeightPx = maxHeight ? typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight : "300px";
+	useEffect(() => {
+		const textarea = actualTextRef.current;
+		const displayDiv = displayDivRef.current;
+		if (!textarea) return;
+		const syncScroll = () => {
+			if (!displayDiv) return;
+			displayDiv.scrollTop = textarea.scrollTop;
+		};
+		const autoResizeTextarea = () => {
+			if (!textarea || manuallyResized) return;
+			textarea.style.height = "auto";
+			const newHeight = Math.min(textarea.scrollHeight, parseInt(maxHeightPx));
+			textarea.style.height = `${newHeight}px`;
+			const shouldScroll = textarea.scrollHeight > parseInt(maxHeightPx);
+			textarea.style.overflowY = shouldScroll ? "auto" : "hidden";
+			if (displayDiv) {
+				displayDiv.style.height = "auto";
+				displayDiv.style.height = `${newHeight}px`;
+				displayDiv.style.overflowY = "hidden";
+			}
+		};
+		const syncDimensions = () => {
+			if (!displayDiv) return;
+			const computedStyle = window.getComputedStyle(textarea);
+			displayDiv.style.width = computedStyle.width;
+			displayDiv.style.height = computedStyle.height;
+			displayDiv.style.overflowY = "hidden";
+		};
+		if (!manuallyResized) autoResizeTextarea();
+		const resizeObserver = new ResizeObserver(() => {
+			const currentHeight = parseInt(window.getComputedStyle(textarea).height);
+			const contentScrollHeight = textarea.scrollHeight;
+			if (Math.abs(currentHeight - contentScrollHeight) > 5 && currentHeight !== parseInt(maxHeightPx)) setManuallyResized(true);
+			syncDimensions();
+		});
+		const handleInput = () => {
+			const currentLength = textarea.value.length;
+			if (Math.abs(currentLength - lastContentLength.current) > 20) {
+				setManuallyResized(false);
+				lastContentLength.current = currentLength;
+			}
+			if (!manuallyResized) autoResizeTextarea();
+		};
+		resizeObserver.observe(textarea);
+		textarea.addEventListener("input", handleInput);
+		textarea.addEventListener("scroll", syncScroll);
+		return () => {
+			textarea.removeEventListener("scroll", syncScroll);
+			textarea.removeEventListener("input", handleInput);
+			resizeObserver.disconnect();
+		};
+	}, [
+		actualTextRef,
+		maxHeightPx,
+		manuallyResized,
+		internalValue
+	]);
+	return {
+		displayDivRef,
+		textAreaRef: actualTextRef,
+		maxHeight: manuallyResized ? "none" : maxHeightPx
+	};
+};
+//#endregion
+export { useResizeTextEditor };
+
+//# sourceMappingURL=useResizeTextEditor.js.map

package/dist/components/PlainTextEditor/hooks/useResizeTextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeTextEditor.js","names":[],"sources":["../../../../src/components/PlainTextEditor/hooks/useResizeTextEditor.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport const useResizeTextEditor = ({\n  maxHeight,\n  internalValue,\n  textRef,\n}: {\n  maxHeight?: number | string;\n  internalValue: string;\n  textRef?: React.RefObject<HTMLTextAreaElement | null> | undefined;\n}) => {\n  const displayDivRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const actualTextRef = textRef ?? textareaRef;\n  const [manuallyResized, setManuallyResized] = useState(false);\n  const lastContentLength = useRef(internalValue.length);\n\n  const maxHeightPx = maxHeight\n    ? typeof maxHeight === 'number'\n      ? `${maxHeight}px`\n      : maxHeight\n    : '300px';\n  // Sync scroll position between textarea and display div\n  useEffect(() => {\n    const textarea = actualTextRef.current;\n    const displayDiv = displayDivRef.current;\n\n    if (!textarea) return;\n\n    const syncScroll = () => {\n      if (!displayDiv) return;\n      displayDiv.scrollTop = textarea.scrollTop;\n    };\n\n    // Function to auto-resize the textarea based on content\n    const autoResizeTextarea = () => {\n      if (!textarea || manuallyResized) return;\n\n      // Reset height temporarily to get the correct scrollHeight\n      textarea.style.height = 'auto';\n\n      // Calculate new height (limit to maxHeight)\n      const newHeight = Math.min(textarea.scrollHeight, parseInt(maxHeightPx));\n\n      // Apply the new height to both elements\n      textarea.style.height = `${newHeight}px`;\n      // Set overflow to auto only if content exceeds max height\n      const shouldScroll = textarea.scrollHeight > parseInt(maxHeightPx);\n      textarea.style.overflowY = shouldScroll ? 'auto' : 'hidden';\n      if (displayDiv) {\n        displayDiv.style.height = 'auto';\n        displayDiv.style.height = `${newHeight}px`;\n        // Only show scrollbar on textarea, hide it on display div\n        displayDiv.style.overflowY = 'hidden';\n      }\n    };\n\n    // Function to sync dimensions from textarea to display div\n    const syncDimensions = () => {\n      if (!displayDiv) return;\n      const computedStyle = window.getComputedStyle(textarea);\n\n      displayDiv.style.width = computedStyle.width;\n      displayDiv.style.height = computedStyle.height;\n      // Always hide scrollbar on display div, keep content scrollable\n      displayDiv.style.overflowY = 'hidden';\n    };\n\n    // Run the auto-resize on mount\n    if (!manuallyResized) {\n      autoResizeTextarea();\n    }\n\n    // Set up resize observer to detect manual resizing\n    const resizeObserver = new ResizeObserver(() => {\n      const currentHeight = parseInt(window.getComputedStyle(textarea).height);\n      const contentScrollHeight = textarea.scrollHeight;\n\n      // If current height is different from what auto-resize would set\n      // and it's not due to overflow, consider it a manual resize\n      if (\n        Math.abs(currentHeight - contentScrollHeight) > 5 &&\n        currentHeight !== parseInt(maxHeightPx)\n      ) {\n        setManuallyResized(true);\n      }\n\n      syncDimensions();\n    });\n\n    // Input handler to check for content changes that might reset manual resize\n    const handleInput = () => {\n      const currentLength = textarea.value.length;\n      // If content length changed dramatically, consider resetting manual resize\n      if (Math.abs(currentLength - lastContentLength.current) > 20) {\n        setManuallyResized(false);\n        lastContentLength.current = currentLength;\n      }\n\n      if (!manuallyResized) {\n        autoResizeTextarea();\n      }\n    };\n\n    resizeObserver.observe(textarea);\n    textarea.addEventListener('input', handleInput);\n    textarea.addEventListener('scroll', syncScroll);\n\n    return () => {\n      textarea.removeEventListener('scroll', syncScroll);\n      textarea.removeEventListener('input', handleInput);\n      resizeObserver.disconnect();\n    };\n  }, [actualTextRef, maxHeightPx, manuallyResized, internalValue]);\n\n  return {\n    displayDivRef,\n    textAreaRef: actualTextRef,\n    maxHeight: manuallyResized ? 'none' : maxHeightPx,\n  };\n};\n"],"mappings":";;AAEA,IAAa,uBAAuB,EAClC,WACA,eACA,cAKI;CACJ,MAAM,gBAAgB,OAAuB,IAAI;CACjD,MAAM,cAAc,OAA4B,IAAI;CACpD,MAAM,gBAAgB,WAAW;CACjC,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,KAAK;CAC5D,MAAM,oBAAoB,OAAO,cAAc,MAAM;CAErD,MAAM,cAAc,YAChB,OAAO,cAAc,WACnB,GAAG,UAAU,MACb,YACF;CAEJ,gBAAgB;EACd,MAAM,WAAW,cAAc;EAC/B,MAAM,aAAa,cAAc;EAEjC,IAAI,CAAC,UAAU;EAEf,MAAM,mBAAmB;GACvB,IAAI,CAAC,YAAY;GACjB,WAAW,YAAY,SAAS;EAClC;EAGA,MAAM,2BAA2B;GAC/B,IAAI,CAAC,YAAY,iBAAiB;GAGlC,SAAS,MAAM,SAAS;GAGxB,MAAM,YAAY,KAAK,IAAI,SAAS,cAAc,SAAS,WAAW,CAAC;GAGvE,SAAS,MAAM,SAAS,GAAG,UAAU;GAErC,MAAM,eAAe,SAAS,eAAe,SAAS,WAAW;GACjE,SAAS,MAAM,YAAY,eAAe,SAAS;GACnD,IAAI,YAAY;IACd,WAAW,MAAM,SAAS;IAC1B,WAAW,MAAM,SAAS,GAAG,UAAU;IAEvC,WAAW,MAAM,YAAY;GAC/B;EACF;EAGA,MAAM,uBAAuB;GAC3B,IAAI,CAAC,YAAY;GACjB,MAAM,gBAAgB,OAAO,iBAAiB,QAAQ;GAEtD,WAAW,MAAM,QAAQ,cAAc;GACvC,WAAW,MAAM,SAAS,cAAc;GAExC,WAAW,MAAM,YAAY;EAC/B;EAGA,IAAI,CAAC,iBACH,mBAAmB;EAIrB,MAAM,iBAAiB,IAAI,qBAAqB;GAC9C,MAAM,gBAAgB,SAAS,OAAO,iBAAiB,QAAQ,CAAC,CAAC,MAAM;GACvE,MAAM,sBAAsB,SAAS;GAIrC,IACE,KAAK,IAAI,gBAAgB,mBAAmB,IAAI,KAChD,kBAAkB,SAAS,WAAW,GAEtC,mBAAmB,IAAI;GAGzB,eAAe;EACjB,CAAC;EAGD,MAAM,oBAAoB;GACxB,MAAM,gBAAgB,SAAS,MAAM;GAErC,IAAI,KAAK,IAAI,gBAAgB,kBAAkB,OAAO,IAAI,IAAI;IAC5D,mBAAmB,KAAK;IACxB,kBAAkB,UAAU;GAC9B;GAEA,IAAI,CAAC,iBACH,mBAAmB;EAEvB;EAEA,eAAe,QAAQ,QAAQ;EAC/B,SAAS,iBAAiB,SAAS,WAAW;EAC9C,SAAS,iBAAiB,UAAU,UAAU;EAE9C,aAAa;GACX,SAAS,oBAAoB,UAAU,UAAU;GACjD,SAAS,oBAAoB,SAAS,WAAW;GACjD,eAAe,WAAW;EAC5B;CACF,GAAG;EAAC;EAAe;EAAa;EAAiB;CAAa,CAAC;CAE/D,OAAO;EACL;EACA,aAAa;EACb,WAAW,kBAAkB,SAAS;CACxC;AACF"}

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

@@ -0,0 +1,18 @@
+export declare function PlainTextEditor(props: {
+    id?: string;
+    textRef?: React.RefObject<HTMLTextAreaElement | null>;
+    value?: string | null | undefined;
+    placeholder?: string;
+    className?: string;
+    onChange?: (e: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    textareaClassName?: string;
+    resize?: boolean;
+    defaultRows?: number;
+    fullLength?: boolean;
+    maxHeight?: number | string;
+}): import("react").JSX.Element;

package/dist/components/PlainTextEditor/index.js

@@ -0,0 +1,71 @@
+import { cn } from "../../utils/cn.js";
+import { TextWithLinks } from "../TextWithLinks.js";
+import { useResizeTextEditor } from "./hooks/useResizeTextEditor.js";
+import { useLayoutEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDebouncedCallback } from "use-debounce";
+//#region packages/components/src/components/PlainTextEditor/index.tsx
+var COMMON_CLS = cn("text-md col-[1] row-[1] m-0 w-full overflow-y-hidden whitespace-pre-wrap break-words border-none bg-transparent p-0 text-base");
+function PlainTextEditor(props) {
+	const [internalValue, setInternalValue] = useState(props.value ?? "");
+	const { displayDivRef, textAreaRef, maxHeight } = useResizeTextEditor({
+		maxHeight: props.maxHeight,
+		internalValue,
+		textRef: props.textRef
+	});
+	useLayoutEffect(() => {
+		setInternalValue(props.value ?? "");
+	}, [props.value]);
+	const [hasScroll, setHasScroll] = useState(false);
+	useLayoutEffect(() => {
+		if (textAreaRef.current) setHasScroll(textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight);
+	}, [textAreaRef]);
+	const debouncedOnChange = useDebouncedCallback((value) => {
+		props.onChange?.(value);
+	}, 100);
+	let valueToDisplay = internalValue;
+	if (typeof valueToDisplay !== "string" && valueToDisplay != null) valueToDisplay = JSON.stringify(valueToDisplay);
+	if (props.readOnly) return /* @__PURE__ */ jsx("div", {
+		className: cn(COMMON_CLS, "pointer-events-auto select-text", props.className),
+		children: /* @__PURE__ */ jsx(TextWithLinks, {
+			text: valueToDisplay ?? "",
+			fullLength: props.fullLength
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid w-full grid-cols-1", props.className),
+		children: [/* @__PURE__ */ jsx("textarea", {
+			ref: textAreaRef,
+			id: props.id,
+			className: cn(COMMON_CLS, "text-transparent caret-[var(--text-primary)] placeholder:text-quaternary", props.textareaClassName, !props.resize && "resize-none"),
+			style: { maxHeight },
+			value: valueToDisplay ?? "",
+			rows: props.defaultRows ?? 1,
+			onChange: (e) => {
+				const target = e.target;
+				setInternalValue(target.value);
+				debouncedOnChange(target.value);
+			},
+			onFocus: props.onFocus,
+			onBlur: props.onBlur,
+			placeholder: props.placeholder,
+			readOnly: props.readOnly,
+			autoFocus: props.autoFocus && !props.readOnly,
+			onKeyDown: props.onKeyDown
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: displayDivRef,
+			"aria-hidden": true,
+			className: cn(COMMON_CLS, "pointer-events-none select-none", hasScroll && "pr-4", props.textareaClassName),
+			style: { maxHeight },
+			children: [/* @__PURE__ */ jsx(TextWithLinks, {
+				text: valueToDisplay ?? "",
+				fullLength: true,
+				useRawSpan: true
+			}), valueToDisplay?.endsWith("\n") && /* @__PURE__ */ jsx("br", {})]
+		})]
+	});
+}
+//#endregion
+export { PlainTextEditor };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PlainTextEditor/index.tsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\nimport { useDebouncedCallback } from 'use-debounce';\n\nimport { cn } from '../../utils/cn';\nimport { TextWithLinks } from '../TextWithLinks';\nimport { useResizeTextEditor } from './hooks/useResizeTextEditor';\n\nconst COMMON_CLS = cn(\n  'text-md col-[1] row-[1] m-0 w-full overflow-y-hidden whitespace-pre-wrap break-words border-none bg-transparent p-0 text-base'\n);\n\nexport function PlainTextEditor(props: {\n  id?: string;\n  textRef?: React.RefObject<HTMLTextAreaElement | null>;\n  value?: string | null | undefined;\n  placeholder?: string;\n  className?: string;\n  onChange?: (e: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n  autoFocus?: boolean;\n  readOnly?: boolean;\n  textareaClassName?: string;\n  resize?: boolean;\n  defaultRows?: number;\n  fullLength?: boolean;\n  maxHeight?: number | string;\n}) {\n  // Internal state for immediate UI updates\n  const [internalValue, setInternalValue] = useState(props.value ?? '');\n  const { displayDivRef, textAreaRef, maxHeight } = useResizeTextEditor({\n    maxHeight: props.maxHeight,\n    internalValue,\n    textRef: props.textRef,\n  });\n\n  useLayoutEffect(() => {\n    setInternalValue(props.value ?? '');\n  }, [props.value]);\n\n  const [hasScroll, setHasScroll] = useState(false);\n  useLayoutEffect(() => {\n    if (textAreaRef.current) {\n      setHasScroll(\n        textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight\n      );\n    }\n  }, [textAreaRef]);\n\n  // Debounced callback for parent updates\n  const debouncedOnChange = useDebouncedCallback((value: string) => {\n    props.onChange?.(value);\n  }, 100);\n\n  let valueToDisplay = internalValue;\n\n  // https://react.dev/errors/31?invariant=31&args%5B%5D=object%2520with%2520keys%2520%257Bcontent%252C%2520additional_kwargs%252C%2520response_metadata%252C%2520type%252C%2520name%252C%2520id%252C%2520example%252C%2520tool_calls%252C%2520invalid_tool_calls%252C%2520usage_metadata%257D\n  if (typeof valueToDisplay !== 'string' && valueToDisplay != null) {\n    valueToDisplay = JSON.stringify(valueToDisplay);\n  }\n\n  // Use different rendering approaches for read-only vs editable content\n  // Read-only: Simple display with expandable text\n  // Editable: Complex textarea overlay for full editing capabilities\n  if (props.readOnly) {\n    return (\n      <div\n        className={cn(\n          COMMON_CLS,\n          'pointer-events-auto select-text',\n          props.className\n        )}\n      >\n        <TextWithLinks\n          text={valueToDisplay ?? ''}\n          fullLength={props.fullLength}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('grid w-full grid-cols-1', props.className)}>\n      <textarea\n        ref={textAreaRef}\n        id={props.id}\n        className={cn(\n          COMMON_CLS,\n          'text-transparent caret-[var(--text-primary)] placeholder:text-quaternary',\n          props.textareaClassName,\n          !props.resize && 'resize-none'\n        )}\n        style={{\n          maxHeight,\n        }}\n        value={valueToDisplay ?? ''}\n        rows={props.defaultRows ?? 1}\n        onChange={(e) => {\n          const target = e.target as HTMLTextAreaElement;\n          setInternalValue(target.value);\n          debouncedOnChange(target.value);\n        }}\n        onFocus={props.onFocus}\n        onBlur={props.onBlur}\n        placeholder={props.placeholder}\n        readOnly={props.readOnly}\n        autoFocus={props.autoFocus && !props.readOnly}\n        onKeyDown={props.onKeyDown}\n      />\n      {/* NOTE: this div displays the text in this editor, not the textarea */}\n      <div\n        ref={displayDivRef}\n        aria-hidden\n        className={cn(\n          COMMON_CLS,\n          'pointer-events-none select-none',\n          hasScroll && 'pr-4',\n          props.textareaClassName\n        )}\n        style={{\n          maxHeight,\n        }}\n      >\n        <TextWithLinks\n          text={valueToDisplay ?? ''}\n          fullLength={true}\n          useRawSpan={true}\n        />\n        {valueToDisplay?.endsWith('\\n') && <br />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAQA,IAAM,aAAa,GACjB,+HACF;AAEA,SAAgB,gBAAgB,OAiB7B;CAED,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM,SAAS,EAAE;CACpE,MAAM,EAAE,eAAe,aAAa,cAAc,oBAAoB;EACpE,WAAW,MAAM;EACjB;EACA,SAAS,MAAM;CACjB,CAAC;CAED,sBAAsB;EACpB,iBAAiB,MAAM,SAAS,EAAE;CACpC,GAAG,CAAC,MAAM,KAAK,CAAC;CAEhB,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,sBAAsB;EACpB,IAAI,YAAY,SACd,aACE,YAAY,QAAQ,eAAe,YAAY,QAAQ,YACzD;CAEJ,GAAG,CAAC,WAAW,CAAC;CAGhB,MAAM,oBAAoB,sBAAsB,UAAkB;EAChE,MAAM,WAAW,KAAK;CACxB,GAAG,GAAG;CAEN,IAAI,iBAAiB;CAGrB,IAAI,OAAO,mBAAmB,YAAY,kBAAkB,MAC1D,iBAAiB,KAAK,UAAU,cAAc;CAMhD,IAAI,MAAM,UACR,OACE,oBAAC,OAAD;EACE,WAAW,GACT,YACA,mCACA,MAAM,SACR;EAEA,UAAA,oBAAC,eAAD;GACE,MAAM,kBAAkB;GACxB,YAAY,MAAM;EACnB,CAAA;CACE,CAAA;CAIT,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,2BAA2B,MAAM,SAAS;EAA7D,UAAA,CACE,oBAAC,YAAD;GACE,KAAK;GACL,IAAI,MAAM;GACV,WAAW,GACT,YACA,4EACA,MAAM,mBACN,CAAC,MAAM,UAAU,aACnB;GACA,OAAO,EACL,UACF;GACA,OAAO,kBAAkB;GACzB,MAAM,MAAM,eAAe;GAC3B,WAAW,MAAM;IACf,MAAM,SAAS,EAAE;IACjB,iBAAiB,OAAO,KAAK;IAC7B,kBAAkB,OAAO,KAAK;GAChC;GACA,SAAS,MAAM;GACf,QAAQ,MAAM;GACd,aAAa,MAAM;GACnB,UAAU,MAAM;GAChB,WAAW,MAAM,aAAa,CAAC,MAAM;GACrC,WAAW,MAAM;EAClB,CAAA,GAED,qBAAC,OAAD;GACE,KAAK;GACL,eAAA;GACA,WAAW,GACT,YACA,mCACA,aAAa,QACb,MAAM,iBACR;GACA,OAAO,EACL,UACF;GAXF,UAAA,CAaE,oBAAC,eAAD;IACE,MAAM,kBAAkB;IACxB,YAAY;IACZ,YAAY;GACb,CAAA,GACA,gBAAgB,SAAS,IAAI,KAAK,oBAAC,MAAD,CAAK,CAAA,CACrC;EACF,CAAA,CAAA;;AAET"}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,13 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export declare const Popover: import("react").FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverArrow: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * Portal target for the popover. When omitted, the popover automatically
+     * portals into the enclosing modal `Dialog` (if any) so it stays
+     * mouse-interactive, and falls back to `document.body` otherwise.
+     */
+    container?: HTMLElement | null;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,48 @@
+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 { useDialogContainer } from "../Dialog/index.js";
+import { popoverSurfaceClassName } from "./constants.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region packages/components/src/components/Popover/Popover.tsx
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverArrow = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, {
+	ref,
+	className: cn("fill-popover", className),
+	...props
+}));
+PopoverArrow.displayName = "PopoverArrow";
+var PopoverContent = forwardRef(({ className, align = "center", sideOffset = 4, forceMount, container, children, ...props }, ref) => {
+	const zIndex = useZIndex(zIndices.popover);
+	const dialogContainer = useDialogContainer();
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, {
+		forceMount,
+		container: container ?? dialogContainer ?? void 0,
+		children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+			ref,
+			align,
+			sideOffset,
+			forceMount,
+			className: cn(popoverSurfaceClassName, className),
+			...props,
+			style: {
+				zIndex,
+				...props.style
+			},
+			children: /* @__PURE__ */ jsx(ZIndexProvider, {
+				value: zIndex,
+				children
+			})
+		})
+	});
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+//#endregion
+export { Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger };
+
+//# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { cn } from '../../utils/cn';\nimport { useZIndex } from '../../utils/useZIndex';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\nimport { useDialogContainer } from '../Dialog';\nimport { popoverSurfaceClassName } from './constants';\n\nexport const Popover = PopoverPrimitive.Root;\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n\nexport const PopoverArrow = forwardRef<\n  ElementRef<typeof PopoverPrimitive.Arrow>,\n  ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <PopoverPrimitive.Arrow\n    ref={ref}\n    className={cn('fill-popover', className)}\n    {...props}\n  />\n));\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport const PopoverContent = forwardRef<\n  ElementRef<typeof PopoverPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n    /**\n     * Portal target for the popover. When omitted, the popover automatically\n     * portals into the enclosing modal `Dialog` (if any) so it stays\n     * mouse-interactive, and falls back to `document.body` otherwise.\n     */\n    container?: HTMLElement | null;\n  }\n>(\n  (\n    {\n      className,\n      align = 'center',\n      sideOffset = 4,\n      forceMount,\n      container,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const zIndex = useZIndex(zIndices.popover);\n    // Portal into the enclosing modal Dialog (null when not inside one) so the\n    // popover stays inside the dialog's pointer-events-interactive region.\n    const dialogContainer = useDialogContainer();\n\n    return (\n      <PopoverPrimitive.Portal\n        forceMount={forceMount}\n        // Fall back to `undefined` (not `null`) when there is no dialog: Radix's\n        // Portal only defaults to `document.body` when `container` is absent, so\n        // an explicit `null` leaves non-forceMount popovers unrendered.\n        container={container ?? dialogContainer ?? undefined}\n      >\n        <PopoverPrimitive.Content\n          ref={ref}\n          align={align}\n          sideOffset={sideOffset}\n          forceMount={forceMount}\n          className={cn(popoverSurfaceClassName, className)}\n          {...props}\n          style={{ zIndex, ...props.style }}\n        >\n          <ZIndexProvider value={zIndex}>{children}</ZIndexProvider>\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    );\n  }\n);\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n"],"mappings":";;;;;;;;;;AAYA,IAAa,UAAU,iBAAiB;AAExC,IAAa,iBAAiB,iBAAiB;AAC/C,IAAa,gBAAgB,iBAAiB;AAE9C,IAAa,eAAe,YAGzB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,iBAAiB,OAAlB;CACO;CACL,WAAW,GAAG,gBAAgB,SAAS;CACvC,GAAI;AACL,CAAA,CACF;AACD,aAAa,cAAc;AAE3B,IAAa,iBAAiB,YAY1B,EACE,WACA,QAAQ,UACR,aAAa,GACb,YACA,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,SAAS,UAAU,SAAS,OAAO;CAGzC,MAAM,kBAAkB,mBAAmB;CAE3C,OACE,oBAAC,iBAAiB,QAAlB;EACc;EAIZ,WAAW,aAAa,mBAAmB,KAAA;EAE3C,UAAA,oBAAC,iBAAiB,SAAlB;GACO;GACE;GACK;GACA;GACZ,WAAW,GAAG,yBAAyB,SAAS;GAChD,GAAI;GACJ,OAAO;IAAE;IAAQ,GAAG,MAAM;GAAM;GAEhC,UAAA,oBAAC,gBAAD;IAAgB,OAAO;IAAS;GAAyB,CAAA;EACjC,CAAA;CACH,CAAA;AAE7B,CACF;AACA,eAAe,cAAc,iBAAiB,QAAQ"}

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

@@ -0,0 +1 @@
+export declare const popoverSurfaceClassName = "w-72 rounded-md bg-popover p-space-4 outline-none [filter:drop-shadow(0_1px_0_var(--border-secondary))_drop-shadow(0_-1px_0_var(--border-secondary))_drop-shadow(1px_0_0_var(--border-secondary))_drop-shadow(-1px_0_0_var(--border-secondary))_drop-shadow(0_2px_3px_var(--shadow-color-subtle))_drop-shadow(0_6px_12px_var(--shadow-color-subtle))]";

package/dist/components/Popover/constants.js

@@ -0,0 +1,6 @@
+//#region packages/components/src/components/Popover/constants.ts
+var popoverSurfaceClassName = "w-72 rounded-md bg-popover p-space-4 outline-none [filter:drop-shadow(0_1px_0_var(--border-secondary))_drop-shadow(0_-1px_0_var(--border-secondary))_drop-shadow(1px_0_0_var(--border-secondary))_drop-shadow(-1px_0_0_var(--border-secondary))_drop-shadow(0_2px_3px_var(--shadow-color-subtle))_drop-shadow(0_6px_12px_var(--shadow-color-subtle))]";
+//#endregion
+export { popoverSurfaceClassName };
+
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/Popover/constants.ts"],"sourcesContent":["export const popoverSurfaceClassName =\n  'w-72 rounded-md bg-popover p-space-4 outline-none [filter:drop-shadow(0_1px_0_var(--border-secondary))_drop-shadow(0_-1px_0_var(--border-secondary))_drop-shadow(1px_0_0_var(--border-secondary))_drop-shadow(-1px_0_0_var(--border-secondary))_drop-shadow(0_2px_3px_var(--shadow-color-subtle))_drop-shadow(0_6px_12px_var(--shadow-color-subtle))]';\n"],"mappings":";AAAA,IAAa,0BACX"}

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

@@ -0,0 +1 @@
+export { Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, } from './Popover.js';

package/dist/components/Popover/index.js

@@ -0,0 +1,2 @@
+import { Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger } from "./Popover.js";
+export { Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger };

package/dist/components/PortalSlot.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export declare const createPortalSlot: () => {
+    Fill: (props: {
+        children?: ReactNode;
+    }) => import("react").ReactPortal | null;
+    Slot: (props: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    Context: (props: {
+        children?: ReactNode;
+    }) => import("react").JSX.Element;
+    useCanFillSlot: () => boolean;
+};

package/dist/components/PortalSlot.js

@@ -0,0 +1,41 @@
+import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region packages/components/src/components/PortalSlot.tsx
+var createPortalSlot = () => {
+	const SlotContext = createContext(null);
+	const Fill = (props) => {
+		const [ref] = useContext(SlotContext) ?? [];
+		if (!ref) return null;
+		return createPortal(props.children, ref);
+	};
+	const useCanFillSlot = () => {
+		return useContext(SlotContext) != null;
+	};
+	const Slot = (props) => {
+		const ref = useRef(null);
+		const [, setStateRef] = useContext(SlotContext) ?? [];
+		useLayoutEffect(() => setStateRef?.(ref.current), [setStateRef]);
+		return /* @__PURE__ */ jsx("div", {
+			...props,
+			ref
+		});
+	};
+	function Context(props) {
+		const [state, setState] = useState(null);
+		return /* @__PURE__ */ jsx(SlotContext.Provider, {
+			value: [state, setState],
+			children: props.children
+		});
+	}
+	return {
+		Fill,
+		Slot,
+		Context,
+		useCanFillSlot
+	};
+};
+//#endregion
+export { createPortalSlot };
+
+//# sourceMappingURL=PortalSlot.js.map

package/dist/components/PortalSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalSlot.js","names":[],"sources":["../../src/components/PortalSlot.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nexport const createPortalSlot = () => {\n  const SlotContext = createContext<\n    [HTMLElement | null, (node: HTMLElement | null) => void] | null\n  >(null);\n\n  const Fill = (props: { children?: ReactNode }) => {\n    const [ref] = useContext(SlotContext) ?? [];\n\n    if (!ref) return null;\n    return createPortal(props.children, ref);\n  };\n\n  const useCanFillSlot = () => {\n    const context = useContext(SlotContext);\n    return context != null;\n  };\n\n  const Slot = (props: HTMLAttributes<HTMLDivElement>) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const [, setStateRef] = useContext(SlotContext) ?? [];\n    useLayoutEffect(() => setStateRef?.(ref.current), [setStateRef]);\n\n    return <div {...props} ref={ref} />;\n  };\n\n  function Context(props: { children?: ReactNode }) {\n    const [state, setState] = useState<HTMLElement | null>(null);\n\n    return (\n      <SlotContext.Provider value={[state, setState]}>\n        {props.children}\n      </SlotContext.Provider>\n    );\n  }\n\n  return { Fill, Slot, Context, useCanFillSlot };\n};\n"],"mappings":";;;;AAWA,IAAa,yBAAyB;CACpC,MAAM,cAAc,cAElB,IAAI;CAEN,MAAM,QAAQ,UAAoC;EAChD,MAAM,CAAC,OAAO,WAAW,WAAW,KAAK,CAAC;EAE1C,IAAI,CAAC,KAAK,OAAO;EACjB,OAAO,aAAa,MAAM,UAAU,GAAG;CACzC;CAEA,MAAM,uBAAuB;EAE3B,OADgB,WAAW,WACpB,KAAW;CACpB;CAEA,MAAM,QAAQ,UAA0C;EACtD,MAAM,MAAM,OAAuB,IAAI;EACvC,MAAM,GAAG,eAAe,WAAW,WAAW,KAAK,CAAC;EACpD,sBAAsB,cAAc,IAAI,OAAO,GAAG,CAAC,WAAW,CAAC;EAE/D,OAAO,oBAAC,OAAD;GAAK,GAAI;GAAY;EAAM,CAAA;CACpC;CAEA,SAAS,QAAQ,OAAiC;EAChD,MAAM,CAAC,OAAO,YAAY,SAA6B,IAAI;EAE3D,OACE,oBAAC,YAAY,UAAb;GAAsB,OAAO,CAAC,OAAO,QAAQ;GAC1C,UAAA,MAAM;EACa,CAAA;CAE1B;CAEA,OAAO;EAAE;EAAM;EAAM;EAAS;CAAe;AAC/C"}

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,38 @@
+import { type HTMLAttributes } from 'react';
+type ProgressBarSize = 'sm' | 'md' | 'lg';
+type ProgressBarColor = 'brand' | 'neutral' | 'success' | 'warning' | 'error';
+type ProgressBarLabelPosition = 'top' | 'bottom';
+interface ProgressBarBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-labelledby' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'children' | 'color' | 'role'> {
+    /** Current progress value. */
+    value: number;
+    /** Minimum progress value. */
+    min?: number;
+    /** Maximum progress value. */
+    max?: number;
+    /** Bar height. Use `sm` in dense table layouts. */
+    size?: ProgressBarSize;
+    /** Semantic color for the completed portion of the bar. */
+    color?: ProgressBarColor;
+    /** Optional fixed-style label rendered above or beneath the bar. */
+    label?: string;
+    /** Vertical label placement. */
+    labelPosition?: ProgressBarLabelPosition;
+}
+interface ProgressBarWithAriaLabel extends ProgressBarBaseProps {
+    /** Accessible name describing what is progressing. */
+    'aria-label': string;
+    'aria-labelledby'?: never;
+}
+interface ProgressBarWithAriaLabelledBy extends ProgressBarBaseProps {
+    /** ID of an element that names what is progressing. */
+    'aria-labelledby': string;
+    'aria-label'?: never;
+}
+type ProgressBarProps = ProgressBarWithAriaLabel | ProgressBarWithAriaLabelledBy;
+/**
+ * A single-value determinate horizontal progress indicator for measurable
+ * completion or usage. Use `LinearProgress` for indeterminate loading states.
+ */
+declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export { ProgressBar };
+export type { ProgressBarColor, ProgressBarLabelPosition, ProgressBarProps, ProgressBarSize, };

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,82 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/ProgressBar/ProgressBar.tsx
+var SIZE_CLASSES = {
+	sm: "h-1",
+	md: "h-2",
+	lg: "h-3"
+};
+var LABEL_VARIANTS = {
+	sm: "xs",
+	md: "sm",
+	lg: "md"
+};
+var COLOR_GRADIENTS = {
+	brand: "linear-gradient(to left, var(--viz-brand-200), var(--viz-brand-75))",
+	neutral: "linear-gradient(to left, var(--viz-neutral-150), var(--viz-neutral-75))",
+	success: "linear-gradient(to left, var(--viz-green-200), var(--viz-green-100))",
+	warning: "linear-gradient(to left, var(--viz-orange-150), var(--viz-orange-75))",
+	error: "linear-gradient(to left, var(--viz-red-300), var(--viz-red-200))"
+};
+function getFiniteValue(value, fallback) {
+	return Number.isFinite(value) ? value : fallback;
+}
+function getNormalizedRange(min, max) {
+	const normalizedMin = getFiniteValue(min, 0);
+	const normalizedMax = getFiniteValue(max, normalizedMin + 100);
+	return {
+		min: normalizedMin,
+		max: normalizedMax > normalizedMin ? normalizedMax : normalizedMin + 100
+	};
+}
+function clampValue(value, min, max) {
+	return Math.min(Math.max(getFiniteValue(value, min), min), max);
+}
+/**
+* A single-value determinate horizontal progress indicator for measurable
+* completion or usage. Use `LinearProgress` for indeterminate loading states.
+*/
+var ProgressBar = forwardRef(({ value, min = 0, max = 100, size = "md", color = "brand", label, labelPosition = "bottom", className, ...props }, ref) => {
+	const range = getNormalizedRange(min, max);
+	const clampedValue = clampValue(value, range.min, range.max);
+	const progressPercent = (clampedValue - range.min) / (range.max - range.min) * 100;
+	const progressBar = /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		role: "progressbar",
+		"aria-valuemin": range.min,
+		"aria-valuemax": range.max,
+		"aria-valuenow": clampedValue,
+		className: cn("relative w-full flex-none overflow-hidden rounded-xs bg-surface-level-3", SIZE_CLASSES[size], className),
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "h-full rounded-xs transition-[width] duration-normal ease-out motion-reduce:transition-none",
+			style: {
+				width: `${progressPercent}%`,
+				backgroundImage: COLOR_GRADIENTS[color]
+			}
+		})
+	});
+	if (label === void 0) return progressBar;
+	const progressLabel = /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		variant: LABEL_VARIANTS[size],
+		color: "tertiary",
+		children: label
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col gap-space-1",
+		children: [
+			labelPosition === "top" && progressLabel,
+			progressBar,
+			labelPosition === "bottom" && progressLabel
+		]
+	});
+});
+ProgressBar.displayName = "ProgressBar";
+//#endregion
+export { ProgressBar };
+
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { Text } from '../Text';\n\ntype ProgressBarSize = 'sm' | 'md' | 'lg';\ntype ProgressBarColor = 'brand' | 'neutral' | 'success' | 'warning' | 'error';\ntype ProgressBarLabelPosition = 'top' | 'bottom';\n\ninterface ProgressBarBaseProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-valuemax'\n  | 'aria-valuemin'\n  | 'aria-valuenow'\n  | 'children'\n  | 'color'\n  | 'role'\n> {\n  /** Current progress value. */\n  value: number;\n  /** Minimum progress value. */\n  min?: number;\n  /** Maximum progress value. */\n  max?: number;\n  /** Bar height. Use `sm` in dense table layouts. */\n  size?: ProgressBarSize;\n  /** Semantic color for the completed portion of the bar. */\n  color?: ProgressBarColor;\n  /** Optional fixed-style label rendered above or beneath the bar. */\n  label?: string;\n  /** Vertical label placement. */\n  labelPosition?: ProgressBarLabelPosition;\n}\n\ninterface ProgressBarWithAriaLabel extends ProgressBarBaseProps {\n  /** Accessible name describing what is progressing. */\n  'aria-label': string;\n  'aria-labelledby'?: never;\n}\n\ninterface ProgressBarWithAriaLabelledBy extends ProgressBarBaseProps {\n  /** ID of an element that names what is progressing. */\n  'aria-labelledby': string;\n  'aria-label'?: never;\n}\n\ntype ProgressBarProps =\n  | ProgressBarWithAriaLabel\n  | ProgressBarWithAriaLabelledBy;\n\nconst SIZE_CLASSES: Record<ProgressBarSize, string> = {\n  sm: 'h-1',\n  md: 'h-2',\n  lg: 'h-3',\n};\n\nconst LABEL_VARIANTS: Record<ProgressBarSize, 'xs' | 'sm' | 'md'> = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n};\n\nconst COLOR_GRADIENTS: Record<ProgressBarColor, string> = {\n  brand: 'linear-gradient(to left, var(--viz-brand-200), var(--viz-brand-75))',\n  neutral:\n    'linear-gradient(to left, var(--viz-neutral-150), var(--viz-neutral-75))',\n  success:\n    'linear-gradient(to left, var(--viz-green-200), var(--viz-green-100))',\n  warning:\n    'linear-gradient(to left, var(--viz-orange-150), var(--viz-orange-75))',\n  error: 'linear-gradient(to left, var(--viz-red-300), var(--viz-red-200))',\n};\n\nfunction getFiniteValue(value: number, fallback: number) {\n  return Number.isFinite(value) ? value : fallback;\n}\n\nfunction getNormalizedRange(min: number, max: number) {\n  const normalizedMin = getFiniteValue(min, 0);\n  const normalizedMax = getFiniteValue(max, normalizedMin + 100);\n\n  return {\n    min: normalizedMin,\n    max: normalizedMax > normalizedMin ? normalizedMax : normalizedMin + 100,\n  };\n}\n\nfunction clampValue(value: number, min: number, max: number) {\n  return Math.min(Math.max(getFiniteValue(value, min), min), max);\n}\n\n/**\n * A single-value determinate horizontal progress indicator for measurable\n * completion or usage. Use `LinearProgress` for indeterminate loading states.\n */\nconst ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value,\n      min = 0,\n      max = 100,\n      size = 'md',\n      color = 'brand',\n      label,\n      labelPosition = 'bottom',\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const range = getNormalizedRange(min, max);\n    const clampedValue = clampValue(value, range.min, range.max);\n    const progressPercent =\n      ((clampedValue - range.min) / (range.max - range.min)) * 100;\n\n    const progressBar = (\n      <div\n        {...props}\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuemin={range.min}\n        aria-valuemax={range.max}\n        aria-valuenow={clampedValue}\n        className={cn(\n          'relative w-full flex-none overflow-hidden rounded-xs bg-surface-level-3',\n          SIZE_CLASSES[size],\n          className\n        )}\n      >\n        <div\n          aria-hidden=\"true\"\n          className=\"h-full rounded-xs transition-[width] duration-normal ease-out motion-reduce:transition-none\"\n          style={{\n            width: `${progressPercent}%`,\n            backgroundImage: COLOR_GRADIENTS[color],\n          }}\n        />\n      </div>\n    );\n\n    if (label === undefined) return progressBar;\n\n    const progressLabel = (\n      <Text as=\"span\" variant={LABEL_VARIANTS[size]} color=\"tertiary\">\n        {label}\n      </Text>\n    );\n\n    return (\n      <div className=\"flex w-full flex-col gap-space-1\">\n        {labelPosition === 'top' && progressLabel}\n        {progressBar}\n        {labelPosition === 'bottom' && progressLabel}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarColor,\n  ProgressBarLabelPosition,\n  ProgressBarProps,\n  ProgressBarSize,\n};\n"],"mappings":";;;;;AAoDA,IAAM,eAAgD;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAA8D;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,kBAAoD;CACxD,OAAO;CACP,SACE;CACF,SACE;CACF,SACE;CACF,OAAO;AACT;AAEA,SAAS,eAAe,OAAe,UAAkB;CACvD,OAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;AAC1C;AAEA,SAAS,mBAAmB,KAAa,KAAa;CACpD,MAAM,gBAAgB,eAAe,KAAK,CAAC;CAC3C,MAAM,gBAAgB,eAAe,KAAK,gBAAgB,GAAG;CAE7D,OAAO;EACL,KAAK;EACL,KAAK,gBAAgB,gBAAgB,gBAAgB,gBAAgB;CACvE;AACF;AAEA,SAAS,WAAW,OAAe,KAAa,KAAa;CAC3D,OAAO,KAAK,IAAI,KAAK,IAAI,eAAe,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG;AAChE;;;;;AAMA,IAAM,cAAc,YAEhB,EACE,OACA,MAAM,GACN,MAAM,KACN,OAAO,MACP,QAAQ,SACR,OACA,gBAAgB,UAChB,WACA,GAAG,SAEL,QACG;CACH,MAAM,QAAQ,mBAAmB,KAAK,GAAG;CACzC,MAAM,eAAe,WAAW,OAAO,MAAM,KAAK,MAAM,GAAG;CAC3D,MAAM,mBACF,eAAe,MAAM,QAAQ,MAAM,MAAM,MAAM,OAAQ;CAE3D,MAAM,cACJ,oBAAC,OAAD;EACE,GAAI;EACC;EACL,MAAK;EACL,iBAAe,MAAM;EACrB,iBAAe,MAAM;EACrB,iBAAe;EACf,WAAW,GACT,2EACA,aAAa,OACb,SACF;EAEA,UAAA,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,OAAO;IACL,OAAO,GAAG,gBAAgB;IAC1B,iBAAiB,gBAAgB;GACnC;EACD,CAAA;CACE,CAAA;CAGP,IAAI,UAAU,KAAA,GAAW,OAAO;CAEhC,MAAM,gBACJ,oBAAC,MAAD;EAAM,IAAG;EAAO,SAAS,eAAe;EAAO,OAAM;EAClD,UAAA;CACG,CAAA;CAGR,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACG,kBAAkB,SAAS;GAC3B;GACA,kBAAkB,YAAY;EAC5B;;AAET,CACF;AAEA,YAAY,cAAc"}

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

@@ -0,0 +1,2 @@
+export { ProgressBar } from './ProgressBar.js';
+export type { ProgressBarColor, ProgressBarLabelPosition, ProgressBarProps, ProgressBarSize, } from './ProgressBar.js';

package/dist/components/ProgressBar/index.js

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

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,62 @@
+import { type SelectionControlSize } from '../../utils/componentSizes.js';
+/**
+ * Base props shared by all RadioButton variants.
+ */
+interface RadioButtonBaseProps {
+    /** Current value of this radio button */
+    value: string;
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Whether the radio button is disabled */
+    disabled?: boolean;
+    /** Visual indicator size. The pointer target remains at least 24px. */
+    size?: SelectionControlSize;
+    /** Test ID for testing purposes */
+    'data-testid'?: string;
+}
+/**
+ * Props for RadioButton with a visible label.
+ */
+interface RadioButtonWithLabelProps extends RadioButtonBaseProps {
+    /** Visible label text or React node displayed next to the radio button */
+    label: React.ReactNode;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    'aria-label'?: never;
+    'aria-labelledby'?: never;
+}
+/**
+ * Props for RadioButton with aria-label (no visible label).
+ */
+interface RadioButtonWithAriaLabelProps extends RadioButtonBaseProps {
+    /** Accessible label for screen readers when no visible label is present */
+    'aria-label': string;
+    label?: never;
+    labelClassName?: never;
+    'aria-labelledby'?: never;
+}
+/**
+ * Props for RadioButton with aria-labelledby (labeled by external element).
+ */
+interface RadioButtonWithAriaLabelledByProps extends RadioButtonBaseProps {
+    /** ID of an element that labels this radio button */
+    'aria-labelledby': string;
+    label?: never;
+    labelClassName?: never;
+    'aria-label'?: never;
+}
+/**
+ * RadioButton component props.
+ *
+ * For accessibility compliance (WCAG 2.1), radio buttons must have an accessible name.
+ * This is enforced at the type level by requiring one of:
+ * - `label`: A visible label displayed next to the radio button
+ * - `aria-label`: An accessible label for screen readers (when no visible label)
+ * - `aria-labelledby`: Reference to an external labeling element
+ *
+ * @see https://www.w3.org/WAI/tutorials/forms/labels/
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export type RadioButtonProps = RadioButtonWithLabelProps | RadioButtonWithAriaLabelProps | RadioButtonWithAriaLabelledByProps;
+export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/RadioButton/RadioButton.js

@@ -0,0 +1,38 @@
+import { cn } from "../../utils/cn.js";
+import { SELECTION_CONTROL_HIT_AREA_STYLES } from "../../utils/componentSizes.js";
+import { Text } from "../Text/Text.js";
+import { radioButtonBaseStyles, radioButtonDotSizeStyles, radioButtonFocusStyles, radioButtonIndicatorStyles, radioButtonRootStateStyles, radioButtonSizeStyles } from "./constants.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+//#region packages/components/src/components/RadioButton/RadioButton.tsx
+var RadioButton = forwardRef(({ value, label, className, labelClassName, disabled, size = "sm", "data-testid": dataTestId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-space-2", className),
+		children: [/* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
+			ref,
+			className: cn("peer", radioButtonBaseStyles, radioButtonFocusStyles, SELECTION_CONTROL_HIT_AREA_STYLES, radioButtonSizeStyles[size], radioButtonRootStateStyles),
+			value,
+			id,
+			disabled,
+			"data-testid": dataTestId,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: cn("flex items-center justify-center rounded-full", radioButtonDotSizeStyles[size], radioButtonIndicatorStyles) })
+		}), label && /* @__PURE__ */ jsx("label", {
+			htmlFor: id,
+			className: cn("flex cursor-pointer items-center peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:text-tertiary"),
+			children: /* @__PURE__ */ jsx(Text, {
+				variant: "sm",
+				className: labelClassName,
+				children: label
+			})
+		})]
+	});
+});
+RadioButton.displayName = "RadioButton";
+//#endregion
+export { RadioButton };
+
+//# sourceMappingURL=RadioButton.js.map

package/dist/components/RadioButton/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils/cn';\nimport {\n  SELECTION_CONTROL_HIT_AREA_STYLES,\n  type SelectionControlSize,\n} from '../../utils/componentSizes';\nimport { Text } from '../Text';\nimport {\n  radioButtonBaseStyles,\n  radioButtonDotSizeStyles,\n  radioButtonFocusStyles,\n  radioButtonIndicatorStyles,\n  radioButtonRootStateStyles,\n  radioButtonSizeStyles,\n} from './constants';\n\n/**\n * Base props shared by all RadioButton variants.\n */\ninterface RadioButtonBaseProps {\n  /** Current value of this radio button */\n  value: string;\n  /** Additional CSS classes for the container */\n  className?: string;\n  /** Whether the radio button is disabled */\n  disabled?: boolean;\n  /** Visual indicator size. The pointer target remains at least 24px. */\n  size?: SelectionControlSize;\n  /** Test ID for testing purposes */\n  'data-testid'?: string;\n}\n\n/**\n * Props for RadioButton with a visible label.\n */\ninterface RadioButtonWithLabelProps extends RadioButtonBaseProps {\n  /** Visible label text or React node displayed next to the radio button */\n  label: React.ReactNode;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  'aria-label'?: never;\n  'aria-labelledby'?: never;\n}\n\n/**\n * Props for RadioButton with aria-label (no visible label).\n */\ninterface RadioButtonWithAriaLabelProps extends RadioButtonBaseProps {\n  /** Accessible label for screen readers when no visible label is present */\n  'aria-label': string;\n  label?: never;\n  labelClassName?: never;\n  'aria-labelledby'?: never;\n}\n\n/**\n * Props for RadioButton with aria-labelledby (labeled by external element).\n */\ninterface RadioButtonWithAriaLabelledByProps extends RadioButtonBaseProps {\n  /** ID of an element that labels this radio button */\n  'aria-labelledby': string;\n  label?: never;\n  labelClassName?: never;\n  'aria-label'?: never;\n}\n\n/**\n * RadioButton component props.\n *\n * For accessibility compliance (WCAG 2.1), radio buttons must have an accessible name.\n * This is enforced at the type level by requiring one of:\n * - `label`: A visible label displayed next to the radio button\n * - `aria-label`: An accessible label for screen readers (when no visible label)\n * - `aria-labelledby`: Reference to an external labeling element\n *\n * @see https://www.w3.org/WAI/tutorials/forms/labels/\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\nexport type RadioButtonProps =\n  | RadioButtonWithLabelProps\n  | RadioButtonWithAriaLabelProps\n  | RadioButtonWithAriaLabelledByProps;\n\nexport const RadioButton = forwardRef<HTMLButtonElement, RadioButtonProps>(\n  (\n    {\n      value,\n      label,\n      className,\n      labelClassName,\n      disabled,\n      size = 'sm',\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    },\n    ref\n  ) => {\n    const id = useId();\n\n    return (\n      <div className={cn('flex items-center gap-space-2', className)}>\n        <RadioGroupPrimitive.Item\n          ref={ref}\n          className={cn(\n            'peer',\n            radioButtonBaseStyles,\n            radioButtonFocusStyles,\n            SELECTION_CONTROL_HIT_AREA_STYLES,\n            radioButtonSizeStyles[size],\n            radioButtonRootStateStyles\n          )}\n          value={value}\n          id={id}\n          disabled={disabled}\n          data-testid={dataTestId}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n        >\n          <RadioGroupPrimitive.Indicator\n            className={cn(\n              'flex items-center justify-center rounded-full',\n              radioButtonDotSizeStyles[size],\n              radioButtonIndicatorStyles\n            )}\n          />\n        </RadioGroupPrimitive.Item>\n        {label && (\n          <label\n            htmlFor={id}\n            // `flex` collapses the label's inherited line box to the text it\n            // wraps, so the row's `items-center` aligns the label against the\n            // control instead of against a taller, invisible line box.\n            className={cn(\n              'flex cursor-pointer items-center peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:text-tertiary'\n            )}\n          >\n            <Text variant=\"sm\" className={labelClassName}>\n              {label}\n            </Text>\n          </label>\n        )}\n      </div>\n    );\n  }\n);\n\nRadioButton.displayName = 'RadioButton';\n"],"mappings":";;;;;;;;AAsFA,IAAa,cAAc,YAEvB,EACE,OACA,OACA,WACA,gBACA,UACA,OAAO,MACP,eAAe,YACf,cAAc,WACd,mBAAmB,kBAErB,QACG;CACH,MAAM,KAAK,MAAM;CAEjB,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,iCAAiC,SAAS;EAA7D,UAAA,CACE,oBAAC,oBAAoB,MAArB;GACO;GACL,WAAW,GACT,QACA,uBACA,wBACA,mCACA,sBAAsB,OACtB,0BACF;GACO;GACH;GACM;GACV,eAAa;GACb,cAAY;GACZ,mBAAiB;GAEjB,UAAA,oBAAC,oBAAoB,WAArB,EACE,WAAW,GACT,iDACA,yBAAyB,OACzB,0BACF,EACD,CAAA;EACuB,CAAA,GACzB,SACC,oBAAC,SAAD;GACE,SAAS;GAIT,WAAW,GACT,6GACF;GAEA,UAAA,oBAAC,MAAD;IAAM,SAAQ;IAAK,WAAW;IAC3B,UAAA;GACG,CAAA;EACD,CAAA,CAEN;;AAET,CACF;AAEA,YAAY,cAAc"}