@parallelworks/ui 0.19.0 → 0.19.1

package/dist/{chunks/Markdown-CM-FenNE.js → components/CreateModal.js}

@@ -1,109 +1,14 @@
-import { i as useNotify, u as useStrings } from "./Provider-CDYurraE.js";
-import { AlertIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, FavoriteIcon, FavoriteOutlineIcon, HiddenFalseIcon, HiddenTrueIcon, InfoIcon, TooltipIcon } from "../icons.js";
-import { n as TOOLTIP_ID } from "./Tooltip-K5HJr4_p.js";
-import { E as AddMenu } from "./PageHeader-0kG_iypP.js";
-import { n as modalPanelClasses, t as BareModal } from "./BareModal-BtRiQezg.js";
-import { r as ghostButtonClasses } from "./ConfirmModal-aOR4O1QE.js";
-import { a as filterOption, u as toggleSetMember } from "./StatusBadge-C1Blx_cW.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";
-//#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/CreateModal.tsx
 /** Small info icon that surfaces field help via the global tooltip. */
 function FieldHelp({ tooltip }) {
@@ -571,16 +476,4 @@ function CreateModalSelect({ label, icon, value, options, onChange, disabled = f
 	})] }) });
 }
 //#endregion
-//#region src/components/Markdown.tsx
-var MarkdownImpl = lazy(() => import("./MarkdownImpl-CyeTVvSt.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
-export { CreateModalField as a, CreateModalTextarea as c, Callout as d, CreateModalAutocompleteField as i, CopyCodeBlock as l, CREATE_MODAL_SELECT_FILTER_THRESHOLD as n, CreateModalSelect as o, CreateModal as r, CreateModalSwitch as s, Markdown as t, CopyToClipboard 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.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.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 };

package/dist/components/FilterPill.js

@@ -0,0 +1,13 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/FilterPill.tsx
+function FilterPill({ active, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		className: cx("px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200", active ? "bg-[var(--theme-panel-bg)] border-[var(--theme-border)] text-[var(--theme-panel)] shadow-sm" : "bg-transparent border-transparent text-[var(--theme-muted-text-color)] hover:text-[var(--theme-panel)] hover:bg-[var(--theme-hover)]"),
+		children
+	});
+}
+//#endregion
+export { FilterPill };

package/dist/components/IconButton.js

@@ -0,0 +1,34 @@
+import { TOOLTIP_ID } from "./Tooltip.js";
+import cx from "classnames";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/IconButton.tsx
+var IconButton = forwardRef(({ icon, label, variant = "default", size = "md", active = false, showTooltip = true, className, disabled, ...props }, ref) => {
+	const sizeClasses = {
+		sm: "w-7 h-7 [&_svg]:w-3.5 [&_svg]:h-3.5",
+		md: "w-9 h-9 [&_svg]:w-4 [&_svg]:h-4",
+		lg: "w-11 h-11 [&_svg]:w-5 [&_svg]:h-5"
+	};
+	const variantClasses = {
+		default: cx("bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-border)] hover:text-[var(--theme-app)]", active && "bg-[var(--theme-element)]/10 text-[var(--theme-element)]"),
+		ghost: cx("bg-transparent text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-muted-panel-bg)] hover:text-[var(--theme-app)]", active && "text-[var(--theme-element)]"),
+		primary: cx("bg-[var(--theme-element)] text-white", "hover:bg-[var(--theme-element)]/90", active && "ring-2 ring-[var(--theme-element)]/50"),
+		success: cx("bg-[#22c55e] text-white", "hover:bg-[#22c55e]/90", active && "ring-2 ring-[#22c55e]/50")
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"aria-label": label,
+		disabled,
+		...showTooltip ? { "data-tooltip-id": TOOLTIP_ID } : {},
+		"data-tooltip-content": label,
+		"data-tooltip-delay-show": 300,
+		"data-tooltip-class-name": "!bg-[var(--theme-app)] !text-[var(--theme-app-bg)] !text-xs !py-1 !px-2 !rounded-md",
+		className: cx("inline-flex items-center justify-center rounded-lg", "transition-all duration-200 cursor-pointer", "disabled:opacity-50 disabled:cursor-not-allowed", sizeClasses[size], variantClasses[variant], className),
+		...props,
+		children: icon
+	});
+});
+IconButton.displayName = "IconButton";
+//#endregion
+export { IconButton };

package/dist/{chunks/Indicator-hBSIxOPK.js → components/Indicator.js}

@@ -36,4 +36,4 @@ function Indicator({ status }) {
 	});
 }
 //#endregion
-export { Indicator as t };
+export { Indicator };