@parallelworks/ui 0.18.0 → 0.19.1

package/dist/{chunks/CreateModal-BY6DLmur.js → components/CreateModal.js}

@@ -1,193 +1,14 @@
-import { i as useNotify, u as useStrings } from "./Provider-Ghua9PkN.js";
-import { w as AddMenu } from "./PageHeader-l49p1nM9.js";
-import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, FavoriteIcon, FavoriteOutlineIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon, TooltipIcon } from "../icons.js";
-import { n as TOOLTIP_ID } from "./Tooltip-Crxo_eU_.js";
-import { a as filterOption, u as toggleSetMember } from "./StatusBadge-C1Blx_cW.js";
-import { n as modalPanelClasses, t as BareModal } from "./BareModal-BtRiQezg.js";
+import { useStrings } from "./Provider.js";
+import { ChevronDownIcon, ChevronRightIcon, FavoriteIcon, FavoriteOutlineIcon, TooltipIcon } from "../icons.js";
+import { TOOLTIP_ID } from "./Tooltip.js";
+import { AddMenu } from "./AddMenu.js";
+import { BareModal, modalPanelClasses } from "./BareModal.js";
+import { ghostButtonClasses } from "./ghostButton.js";
+import { filterOption, toggleSetMember } from "./dropdownUtils.js";
+import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import cx from "classnames";
-import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
-//#region src/components/Callout.tsx
-function CalloutIcon({ type }) {
-	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(AlertIcon, { className: "h-6 w-6 mr-4 text-lg" });
-	else return /* @__PURE__ */ jsx(InfoIcon, { className: "h-6 w-6 mr-4 text-lg" });
-}
-function Callout({ type, className = "", children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cx(className, type === "warning" && "bg-orange-100 border-orange-500 text-orange-700", type === "error" && "bg-red-100 border-red-500 text-red-700", type === "info" && "bg-blue-100 border-blue-500 text-blue-700", "border-t-4 rounded-b px-4 py-3 shadow-md my-4"),
-		role: "alert",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "py-1",
-				children: /* @__PURE__ */ jsx(CalloutIcon, { type })
-			}), /* @__PURE__ */ jsx("div", { children })]
-		})
-	});
-}
-//#endregion
-//#region src/components/CopyToClipboard.tsx
-function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
-	const notify = useNotify();
-	const strings = useStrings();
-	const handleCopy = async () => {
-		try {
-			await navigator.clipboard.writeText(text);
-			notify.info("Copied to clipboard");
-		} catch {
-			notify.error("Failed to copy to clipboard");
-		}
-	};
-	return /* @__PURE__ */ jsxs(as, {
-		className,
-		onClick: handleCopy,
-		...as === "button" ? { type: "button" } : {
-			role: "button",
-			"aria-label": strings.common.copy,
-			tabIndex: 0,
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					handleCopy();
-				}
-			}
-		},
-		children: [showIcon && /* @__PURE__ */ jsx(ClipboardIcon, {}), children]
-	});
-}
-function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = false, onRevealToggle }) {
-	const notify = useNotify();
-	const [copied, setCopied] = useState(false);
-	const handleCopy = async () => {
-		if (copied) return;
-		try {
-			await navigator.clipboard.writeText(textToCopy);
-			setCopied(true);
-			notify.info("Copied to clipboard");
-			setTimeout(() => setCopied(false), 2e3);
-		} catch {
-			notify.error("Failed to copy to clipboard");
-		}
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "group relative",
-		role: "none",
-		onClick: handleCopy,
-		children: [/* @__PURE__ */ jsx("pre", {
-			className: `p-4 theme-hover border rounded-lg text-left font-mono text-sm overflow-x-auto ${secret ? "pr-24" : "pr-12"}`,
-			children
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "absolute top-0 right-0 bottom-0 flex items-center gap-1 pl-8 pr-2 bg-gradient-to-l from-[var(--color-panel)] from-70% to-transparent rounded-r-lg",
-			children: [secret && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: (e) => {
-					e.stopPropagation();
-					onRevealToggle?.();
-				},
-				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
-				"aria-label": isRevealed ? "Hide secret" : "Reveal secret",
-				title: isRevealed ? "Hide secret" : "Reveal secret",
-				children: isRevealed ? /* @__PURE__ */ jsx(HiddenFalseIcon, {}) : /* @__PURE__ */ jsx(HiddenTrueIcon, {})
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: (e) => {
-					e.stopPropagation();
-					handleCopy();
-				},
-				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
-				"aria-label": copied ? "Copied" : "Copy to clipboard",
-				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-400" }) : /* @__PURE__ */ jsx(CopyIcon, {})
-			})]
-		})]
-	});
-}
-//#endregion
-//#region src/components/Markdown.tsx
-var MarkdownImpl = lazy(() => import("./MarkdownImpl-Bq4QhrtA.js"));
-function Markdown(props) {
-	return /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx("div", {
-			className: "markdown whitespace-pre-wrap text-start w-full",
-			children: props.children
-		}),
-		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })
-	});
-}
-//#endregion
-//#region src/components/ghostButton.ts
-var ghostButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-8 px-3 rounded-md text-sm text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
-var primaryButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-(--theme-element) text-(--theme-element-text) hover:opacity-90 transition-opacity";
-/** Filled destructive button for confirming irreversible actions in ds modals. */
-var dangerButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-red-600 text-white hover:bg-red-700 transition-colors";
-//#endregion
-//#region src/components/ConfirmModal.tsx
-function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
-	const strings = useStrings();
-	const [pending, setPending] = useState(false);
-	const firedRef = useRef(false);
-	useEffect(() => {
-		if (open) firedRef.current = false;
-	}, [open]);
-	const onCloseRef = useRef(onClose);
-	onCloseRef.current = onClose;
-	const runConfirm = useCallback(async () => {
-		if (firedRef.current) return;
-		firedRef.current = true;
-		setPending(true);
-		try {
-			await onConfirm();
-			if (closeOnConfirm) onCloseRef.current();
-			else firedRef.current = false;
-		} catch (error) {
-			firedRef.current = false;
-			throw error;
-		} finally {
-			setPending(false);
-		}
-	}, [onConfirm, closeOnConfirm]);
-	return /* @__PURE__ */ jsxs(BareModal, {
-		open,
-		onClose,
-		ariaLabel: title,
-		align,
-		preventClose: pending,
-		className: cx(modalPanelClasses, "w-[480px] max-w-full"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "px-5 pt-5",
-			children: [
-				/* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold text-(--theme-app)",
-					children: title
-				}),
-				description !== null && description !== void 0 && /* @__PURE__ */ jsx("p", {
-					className: "mt-1.5 text-sm text-(--theme-muted-text-color)",
-					children: description
-				}),
-				children !== null && children !== void 0 && /* @__PURE__ */ jsx("div", {
-					className: "mt-4",
-					children
-				})
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "mt-5 flex items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onClose,
-				disabled: pending,
-				className: cx(ghostButtonClasses, pending && "cursor-wait"),
-				children: cancelLabel ?? strings.modal.cancel
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: runConfirm,
-				disabled: confirmDisabled || pending,
-				className: cx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
-				children: confirmLabel
-			})]
-		})]
-	});
-}
-//#endregion
 //#region src/components/CreateModal.tsx
 /** Small info icon that surfaces field help via the global tooltip. */
 function FieldHelp({ tooltip }) {
@@ -655,4 +476,4 @@ function CreateModalSelect({ label, icon, value, options, onChange, disabled = f
 	})] }) });
 }
 //#endregion
-export { CreateModalSelect as a, ConfirmModal as c, primaryButtonClasses as d, Markdown as f, Callout as h, CreateModalField as i, dangerButtonClasses as l, CopyToClipboard as m, CreateModal as n, CreateModalSwitch as o, CopyCodeBlock as p, CreateModalAutocompleteField as r, CreateModalTextarea as s, CREATE_MODAL_SELECT_FILTER_THRESHOLD as t, ghostButtonClasses as u };
+export { CREATE_MODAL_SELECT_FILTER_THRESHOLD, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea };

package/dist/components/DescriptionList.js

@@ -0,0 +1,42 @@
+import { TooltipInfo } from "./Tooltip.js";
+import cx from "classnames";
+import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/DescriptionList.tsx
+function DescriptionListItem({ label, children, tooltip, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("dt", {
+		className: cx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: label
+		}), tooltip && /* @__PURE__ */ jsx(TooltipInfo, {
+			className: "pr-2",
+			text: tooltip
+		})]
+	}), /* @__PURE__ */ jsx("dd", {
+		...props,
+		className: "flex text-[13px] leading-6 col-span-4 font-light items-center overflow-auto",
+		children
+	})] });
+}
+function DescriptionList({ children, title, separators = true, subtitle, className, wrapperClassName, vertical = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("w-full", wrapperClassName),
+		children: [
+			title && /* @__PURE__ */ jsx("h2", {
+				className: "text-sm font-semibold w-full mb-1",
+				children: title
+			}),
+			subtitle && /* @__PURE__ */ jsx("div", {
+				className: "max-w-2xl text-sm/6 w-full",
+				children: subtitle
+			}),
+			/* @__PURE__ */ jsx("dl", {
+				className: cx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
+				children: Array.isArray(children) ? React.Children.toArray(children) : children
+			})
+		]
+	});
+}
+//#endregion
+export { DescriptionListItem, DescriptionList as default };

package/dist/components/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import { type SetStateAction } from 'react';
-import { type IOptions, type ICategory } from './dropdownUtils.js';
+import { type ICategory, type IOptions } from './dropdownUtils.js';
 export interface IProps {
     options: (ICategory | IOptions | string)[];
     onActiveChange?: (option: unknown) => void;

package/dist/components/Dropdown.js

@@ -0,0 +1,349 @@
+import { useStrings } from "./Provider.js";
+import { CaretDownIcon } from "../icons.js";
+import { truncationTooltipProps } from "./Tooltip.js";
+import { DropdownCaret, flattenDisplayOptions, isCategory, toggleSetMember } from "./dropdownUtils.js";
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
+import cx from "classnames";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import deepEqual from "fast-deep-equal";
+import { usePopper } from "react-popper";
+//#region src/components/Dropdown.tsx
+var defaultCollapsedLabel = (count) => `${count} more`;
+function isNamedValue(value) {
+	return typeof value === "object" && value !== null && "name" in value && typeof value.name === "string";
+}
+var checkEquals = (val, opt) => {
+	if (typeof val === "object" && !Array.isArray(val)) return deepEqual(val, opt);
+	return val === opt;
+};
+function getOptionFromValue(value, options) {
+	if (value === void 0) return {
+		label: "",
+		value: ""
+	};
+	const found = options?.find((option) => {
+		if (typeof option === "string") return checkEquals(value, option);
+		else if (isCategory(option)) return option.options.find((opt) => checkEquals(value, opt.value));
+		else return checkEquals(value, option.value);
+	});
+	if (found) {
+		if (typeof found === "string") return {
+			label: found,
+			value: found
+		};
+		else if (isCategory(found)) return found.options.find((opt) => checkEquals(value, opt.value)) || {
+			label: JSON.stringify(value),
+			value
+		};
+		else return found;
+	}
+	const isNamedObject = isNamedValue(value);
+	const fallbackLabel = typeof value === "string" ? value : isNamedObject ? value.name : JSON.stringify(value);
+	return {
+		label: fallbackLabel,
+		value: isNamedObject ? value : fallbackLabel
+	};
+}
+function Dropdown(props) {
+	const { onChange, value, options = [], ...others } = props;
+	const val = useMemo(() => {
+		return getOptionFromValue(value, options);
+	}, [value, options]);
+	const wrapperOnchange = (value) => {
+		if (onChange) onChange(value?.value);
+	};
+	const transformedOptions = useMemo(() => {
+		if (!options || options.length === 0) return [];
+		return options.map((item) => {
+			if (isCategory(item)) return {
+				...item,
+				options: item.options.map((opt) => {
+					if (typeof opt === "string") return {
+						label: opt,
+						value: opt
+					};
+					return opt;
+				})
+			};
+			else if (typeof item === "string") return {
+				label: item,
+				value: item
+			};
+			return item;
+		});
+	}, [options]);
+	return /* @__PURE__ */ jsx(DropdownHelper, {
+		value: val,
+		onChange: wrapperOnchange,
+		options: transformedOptions,
+		...others
+	});
+}
+function ActiveWatcher({ active, onChange }) {
+	const prev = useRef(null);
+	useEffect(() => {
+		if (prev.current !== active) {
+			onChange?.(active?.value);
+			prev.current = active;
+		}
+	}, [active, onChange]);
+	return null;
+}
+function OptionContent({ label, description, icon }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("flex gap-1.5", description ? "items-start min-w-0" : "items-center truncate"),
+		...truncationTooltipProps(label, (anchor) => anchor.lastElementChild),
+		children: [icon, description ? /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col min-w-0",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-(--theme-muted-text-color) text-xs leading-snug",
+				children: description
+			})]
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: label
+		})]
+	});
+}
+function ToggleOption({ option, category, expanded, onToggle, ...virtualRowProps }) {
+	return /* @__PURE__ */ jsx(ComboboxOption, {
+		...virtualRowProps,
+		"data-testid": "combobox-toggle",
+		value: option,
+		className: "w-full h-10 flex items-center pl-3",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": expanded,
+			className: "flex items-center gap-1.5 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app)",
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				onToggle(category);
+			},
+			children: [/* @__PURE__ */ jsx(CaretDownIcon, { className: cx("w-3 h-3", !expanded && "-rotate-90") }), option.label]
+		})
+	});
+}
+function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, "aria-describedby": describedBy, required, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl, compact = false }) {
+	const DEBOUNCE_MS = 500;
+	const t = useStrings().dropdown;
+	const [query, setQuery] = useState("");
+	const [selectedIconWidth, setSelectedIconWidth] = useState(0);
+	const selectedIconRef = useCallback((node) => {
+		setSelectedIconWidth(node?.offsetWidth ?? 0);
+	}, []);
+	const selectedIcon = query === "" ? value?.icon : void 0;
+	const [referenceElement, setReferenceElement] = useState(null);
+	const [popperElement, setPopperElement] = useState(null);
+	const [boundaryEl, setBoundaryEl] = useState(null);
+	useEffect(() => {
+		if (!referenceElement) {
+			setBoundaryEl(null);
+			return;
+		}
+		const ref = referenceElement;
+		const dialog = ref.closest("[role=\"dialog\"]");
+		if (!dialog) {
+			setBoundaryEl(null);
+			return;
+		}
+		let node = ref.parentElement;
+		while (node) {
+			const style = getComputedStyle(node);
+			if (/(auto|scroll|hidden)/.test(`${style.overflowX} ${style.overflowY}`)) {
+				setBoundaryEl(node);
+				return;
+			}
+			if (node === dialog) break;
+			node = node.parentElement;
+		}
+		setBoundaryEl(dialog);
+	}, [referenceElement]);
+	const sameWidthModifier = useMemo(() => ({
+		name: "sameWidth",
+		enabled: true,
+		phase: "beforeWrite",
+		requires: ["computeStyles"],
+		fn: ({ state }) => {
+			const popperStyles = state.styles["popper"];
+			if (popperStyles) popperStyles.width = `${state.rects.reference.width}px`;
+		},
+		effect: ({ state }) => {
+			const { popper, reference } = state.elements;
+			if (reference instanceof HTMLElement) popper.style.width = `${reference.offsetWidth}px`;
+		}
+	}), []);
+	const popperModifiers = useMemo(() => boundaryEl ? [
+		sameWidthModifier,
+		{
+			name: "flip",
+			options: { boundary: boundaryEl }
+		},
+		{
+			name: "preventOverflow",
+			options: { boundary: boundaryEl }
+		}
+	] : [sameWidthModifier], [boundaryEl, sameWidthModifier]);
+	const { styles, attributes } = usePopper(referenceElement, popperElement, {
+		strategy: "fixed",
+		modifiers: popperModifiers
+	});
+	const debounceRef = useRef(null);
+	const buttonRef = useRef(null);
+	const [expandedCategories, setExpandedCategories] = useState(/* @__PURE__ */ new Set());
+	const selectedCategory = useMemo(() => options.find((o) => isCategory(o) && o.options.some((opt) => checkEquals(value.value, opt.value)))?.category, [options, value]);
+	const lastAutoExpandedValue = useRef(void 0);
+	useEffect(() => {
+		if (!selectedCategory || checkEquals(lastAutoExpandedValue.current, value.value)) return;
+		lastAutoExpandedValue.current = value.value;
+		setExpandedCategories((prev) => prev.size === 1 && prev.has(selectedCategory) ? prev : /* @__PURE__ */ new Set([selectedCategory]));
+	}, [selectedCategory, value]);
+	const toggleCategory = (category) => setExpandedCategories((prev) => toggleSetMember(prev, category));
+	const flushCustomValue = useCallback((val) => {
+		onChange({
+			label: val,
+			value: val
+		});
+	}, [onChange]);
+	const onQueryChange = (val) => {
+		setQuery(val);
+		if (allowCustomValue) {
+			if (debounceRef.current) clearTimeout(debounceRef.current);
+			debounceRef.current = setTimeout(() => {
+				flushCustomValue(val);
+				debounceRef.current = null;
+			}, DEBOUNCE_MS);
+		}
+	};
+	const onInputBlur = () => {
+		if (allowCustomValue && debounceRef.current) {
+			clearTimeout(debounceRef.current);
+			debounceRef.current = null;
+			flushCustomValue(query);
+		}
+		setQuery("");
+	};
+	const onComboboxChange = (val) => {
+		if (debounceRef.current) {
+			clearTimeout(debounceRef.current);
+			debounceRef.current = null;
+		}
+		onChange(val);
+	};
+	const flattenedOptions = useMemo(() => flattenDisplayOptions({
+		options,
+		query,
+		expandedCategories,
+		collapsedLabel,
+		selectedValue: value?.value,
+		allowCustomValue,
+		customValueLabel
+	}), [
+		options,
+		query,
+		expandedCategories,
+		collapsedLabel,
+		value,
+		allowCustomValue,
+		customValueLabel
+	]);
+	const comboOptions = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
+		modal: false,
+		ref: setPopperElement,
+		style: styles["popper"],
+		className: cx("bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) max-h-60! empty:invisible border overflow-auto rounded-md shadow-lg focus:outline-hidden z-9999 data-[popper-reference-hidden=true]:invisible data-[popper-reference-hidden=true]:pointer-events-none", compact ? "text-xs" : "sm:text-sm"),
+		...attributes["popper"],
+		children: ({ option }) => {
+			const optionLabel = typeof option === "string" ? option : option.label;
+			const optionDescription = typeof option !== "string" ? option.description : void 0;
+			const isCategoryRow = typeof option !== "string" && Boolean(option.category);
+			const toggleTarget = typeof option !== "string" ? option.toggle : void 0;
+			const isPinned = typeof option !== "string" && Boolean(option.pinned);
+			if (toggleTarget !== void 0) return /* @__PURE__ */ jsx(ToggleOption, {
+				option,
+				category: toggleTarget,
+				expanded: expandedCategories.has(toggleTarget),
+				onToggle: toggleCategory
+			});
+			return /* @__PURE__ */ jsx(ComboboxOption, {
+				"data-testid": "combobox-option",
+				value: option,
+				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : compact ? "h-8" : "h-10", isCategoryRow ? "text-[14px] font-bold pl-1 items-center" : "data-disabled:text-(--theme-muted-text-color) data-disabled:bg-(--theme-muted-panel-bg) data-disabled:cursor-not-allowed cursor-pointer items-center pr-9 pl-3 leading-5 data-focus:bg-(--theme-muted-panel-bg) data-focus:text-(--theme-app) data-focus:outline-hidden", "data-selected:border-l-2 data-selected:border-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-app)", isPinned && "border-t border-(--theme-border) font-medium"),
+				children: /* @__PURE__ */ jsx(OptionContent, {
+					label: optionLabel,
+					description: optionDescription,
+					icon: typeof option !== "string" && option.icon
+				})
+			});
+		}
+	}) });
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("relative rounded-md flex items-center", wrapperClassName),
+		children: /* @__PURE__ */ jsx(Combobox, {
+			"data-testid": "combobox",
+			className: cx("relative w-full", className),
+			as: "div",
+			by: checkEquals,
+			value,
+			onChange: onComboboxChange,
+			onClose: () => {
+				setQuery("");
+				setExpandedCategories(new Set(selectedCategory ? [selectedCategory] : []));
+			},
+			immediate: true,
+			virtual: {
+				options: flattenedOptions,
+				disabled: (option) => Boolean(option.disabled)
+			},
+			disabled,
+			children: ({ activeOption, open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				onActiveChange && /* @__PURE__ */ jsx(ActiveWatcher, {
+					active: activeOption,
+					onChange: onActiveChange
+				}),
+				selectedIcon && /* @__PURE__ */ jsx("span", {
+					ref: selectedIconRef,
+					className: "pointer-events-none absolute inset-y-0 left-3 z-10 flex items-center",
+					children: selectedIcon
+				}, value.label),
+				/* @__PURE__ */ jsx(ComboboxInput, {
+					id,
+					"aria-label": ariaLabel || void 0,
+					"aria-describedby": describedBy,
+					"aria-required": required || void 0,
+					placeholder: loading ? "Loading..." : placeholder,
+					onBlur: onInputBlur,
+					ref: setReferenceElement,
+					onClick: () => {
+						if (!open) buttonRef.current?.click();
+					},
+					style: selectedIcon && selectedIconWidth > 0 ? { paddingLeft: selectedIconWidth + 18 } : void 0,
+					className: cx("placeholder:text-xs bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) focus:border-(--theme-element) focus:outline-none focus:ring-1 focus:ring-(--theme-element) w-full h-full text-ellipsis pr-8", "disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-input-disabled-text) disabled:cursor-not-allowed", textBoxClassName),
+					autoComplete: "off",
+					onChange: (event) => onQueryChange(event.target.value),
+					displayValue: (opt) => {
+						return opt?.label?.replaceAll("\"", "") || query || "";
+					},
+					disabled
+				}),
+				/* @__PURE__ */ jsx(ComboboxButton, {
+					ref: buttonRef,
+					"aria-label": t.showOptions,
+					className: "absolute inset-y-0 right-0 flex items-center pr-3 disabled:cursor-not-allowed",
+					"data-testid": "combobox-button",
+					disabled,
+					children: /* @__PURE__ */ jsx(DropdownCaret, {})
+				}),
+				typeof document !== "undefined" && createPortal(comboOptions, portalEl ?? document.querySelector(".ds-root") ?? document.body)
+			] })
+		})
+	});
+}
+//#endregion
+export { Dropdown as default };

package/dist/components/EmptyState.d.ts

@@ -7,5 +7,5 @@ interface EmptyStateProps {
         className?: string;
     }>;
 }
-export default function EmptyState({ title, description, action, icon: Icon, }: EmptyStateProps): React.JSX.Element;
+export default function EmptyState({ title, description, action, icon: Icon }: EmptyStateProps): React.JSX.Element;
 export {};

package/dist/components/EmptyState.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/EmptyState.tsx
+function EmptyState({ title, description, action, icon: Icon }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-solid rounded-2xl border border-(--theme-border) theme-panel flex flex-col items-center justify-center py-12 px-6",
+		children: [
+			Icon && /* @__PURE__ */ jsx("div", {
+				className: "w-10 h-10 rounded-full bg-(--theme-muted-panel-bg) flex items-center justify-center mb-3",
+				children: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 theme-muted-text" })
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium mb-1",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-xs theme-muted-text text-center max-w-xs",
+				children: description
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: action
+			})
+		]
+	});
+}
+//#endregion
+export { EmptyState as default };

package/dist/components/Filter.js

@@ -0,0 +1,32 @@
+import { FilterIcon } from "../icons.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Filter.tsx
+function Filter({ filter, setFilter, placeholder = "Filter...", pills, activePill, onPillChange }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative flex items-center",
+			children: [/* @__PURE__ */ jsx("input", {
+				placeholder,
+				type: "text",
+				value: filter,
+				onChange: (e) => setFilter(e.target.value.toLowerCase()),
+				className: "shadow-sm focus:ring-1 block w-full pr-3 sm:text-sm theme-border rounded-md py-1.5 pl-8"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-y-0 left-0 flex py-2.5 pl-2",
+				children: /* @__PURE__ */ jsx(FilterIcon, {})
+			})]
+		}), pills && onPillChange && /* @__PURE__ */ jsx("div", {
+			className: "flex gap-1",
+			children: pills.map((pill) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onPillChange(pill.value),
+				className: cx("px-2.5 py-1 text-xs rounded-full transition-colors border", activePill === pill.value ? "bg-(--theme-element) text-(--theme-element-text) border-transparent" : "theme-border theme-text hover:theme-hover"),
+				children: pill.label
+			}, pill.value))
+		})]
+	});
+}
+//#endregion
+export { Filter as default };