@parallelworks/ui 0.1.0 → 0.2.0

package/dist/chunks/Table-DWuRINhu.js

@@ -0,0 +1,855 @@
+import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
+import { o as useStrings } from "./Provider-C2VtPnh5.js";
+import { n as TOOLTIP_ID } from "./Tooltip-WgbiC_nd.js";
+import { t as Loader } from "./Loader-DQiZ75fa.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Switch, Transition } from "@headlessui/react";
+import deepEqual from "fast-deep-equal";
+import { usePopper } from "react-popper";
+import AnimateHeight from "react-animate-height";
+//#region src/components/dropdownUtils.tsx
+function isCategory(option) {
+	return typeof option === "object" && option !== null && option !== void 0 && "options" in option;
+}
+function isOption(option) {
+	return typeof option === "object" && "label" in option && "value" in option && !("category" in option);
+}
+function normalizeOption(option) {
+	if (typeof option === "string") return {
+		label: option,
+		value: option
+	};
+	if (typeof option === "object" && option !== null && option !== void 0 && "options" in option) return {
+		category: option.category,
+		options: Array.isArray(option.options) ? option.options : []
+	};
+	return option;
+}
+function flattenOptions(options) {
+	const result = [];
+	for (const opt of options) {
+		const normalized = normalizeOption(opt);
+		if (isCategory(normalized)) {
+			const children = Array.isArray(normalized.options) ? normalized.options : [];
+			result.push(normalized);
+			result.push(...children);
+		} else result.push(normalized);
+	}
+	return result;
+}
+function filterOption(option, query) {
+	if (query === "") return true;
+	const q = String(query ?? "").toLowerCase().replace(/(-)/gm, "");
+	const label = String(option.label ?? "").toLowerCase().replace(/(-)/gm, "");
+	const secondary = option.secondaryValue !== void 0 ? String(option.secondaryValue).toLowerCase().replace(/(-)/gm, "") : "";
+	return label.includes(q) || secondary.includes(q);
+}
+function DropdownCaret() {
+	return /* @__PURE__ */ jsx(CaretDownIcon, { className: "text-neutral-400 absolute top-1/2 -translate-y-1/2 right-0 mr-3 inset-y-0 flex items-center rounded-r-md focus:outline-hidden" });
+}
+//#endregion
+//#region src/components/Dropdown.tsx
+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 isResourceObject = value && typeof value === "object" && "name" in value && (value.$type === "computeResource" || value.type === "computeResource" || value.type === "bucket");
+	const fallbackLabel = typeof value === "string" ? value : isResourceObject ? value.name : JSON.stringify(value);
+	return {
+		label: fallbackLabel,
+		value: isResourceObject ? 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);
+	};
+	return /* @__PURE__ */ jsx(DropdownHelper, {
+		value: val,
+		onChange: wrapperOnchange,
+		options: 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]),
+		...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 DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", portalEl }) {
+	const DEBOUNCE_MS = 500;
+	const [query, setQuery] = useState("");
+	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 }) => {
+			state.styles.popper.width = `${state.rects.reference.width}px`;
+		},
+		effect: ({ state }) => {
+			state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+		}
+	}), []);
+	const { styles, attributes } = usePopper(referenceElement, popperElement, {
+		strategy: "fixed",
+		modifiers: useMemo(() => boundaryEl ? [
+			sameWidthModifier,
+			{
+				name: "flip",
+				options: { boundary: boundaryEl }
+			},
+			{
+				name: "preventOverflow",
+				options: { boundary: boundaryEl }
+			}
+		] : [sameWidthModifier], [boundaryEl, sameWidthModifier])
+	});
+	const debounceRef = useRef(null);
+	const buttonRef = useRef(null);
+	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(() => {
+		const flatOptions = options.flatMap((option) => {
+			if (isCategory(option)) {
+				const filteredOptions = option.options.filter((opt) => filterOption(opt, query));
+				if (filteredOptions.length === 0) return [];
+				return [{
+					label: option.category || "",
+					value: option.category || "",
+					disabled: true,
+					category: true
+				}, ...filteredOptions];
+			}
+			if (filterOption(option, query)) return option;
+			return [];
+		});
+		if (allowCustomValue) {
+			const customValue = query || value?.value || "";
+			flatOptions.unshift({
+				label: `${customValueLabel} "${customValue}"`,
+				value: customValue
+			});
+		} else if (flatOptions.length === 0) return [{
+			label: "No options found",
+			value: "",
+			disabled: true
+		}];
+		return flatOptions;
+	}, [
+		options,
+		query,
+		value,
+		allowCustomValue,
+		customValueLabel
+	]);
+	const comboOptions = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
+		ref: setPopperElement,
+		style: styles.popper,
+		className: "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 sm:text-sm z-9999 data-[popper-reference-hidden=true]:invisible data-[popper-reference-hidden=true]:pointer-events-none",
+		...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);
+			return /* @__PURE__ */ jsx(ComboboxOption, {
+				"data-testid": "combobox-option",
+				value: option,
+				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : "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)"),
+				children: /* @__PURE__ */ jsxs("span", {
+					className: cx("flex gap-1.5", optionDescription ? "items-start min-w-0" : "items-center truncate"),
+					"data-tooltip-id": TOOLTIP_ID,
+					onMouseEnter: (e) => {
+						const inner = e.currentTarget.lastElementChild;
+						if (inner && inner.scrollWidth > inner.clientWidth) e.currentTarget.setAttribute("data-tooltip-content", optionLabel);
+						else e.currentTarget.removeAttribute("data-tooltip-content");
+					},
+					children: [typeof option !== "string" && option.icon, optionDescription ? /* @__PURE__ */ jsxs("span", {
+						className: "flex flex-col min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: optionLabel
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-(--theme-muted-text-color) text-xs leading-snug",
+							children: optionDescription
+						})]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: optionLabel
+					})]
+				})
+			});
+		}
+	}) });
+	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(""),
+			immediate: true,
+			virtual: {
+				options: flattenedOptions,
+				disabled: (option) => Boolean(option.disabled)
+			},
+			disabled,
+			children: ({ activeOption, open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				onActiveChange && /* @__PURE__ */ jsx(ActiveWatcher, {
+					active: activeOption,
+					onChange: onActiveChange
+				}),
+				/* @__PURE__ */ jsx(ComboboxInput, {
+					id,
+					"aria-label": ariaLabel || void 0,
+					placeholder: loading ? "Loading..." : placeholder,
+					onBlur: onInputBlur,
+					ref: setReferenceElement,
+					onClick: () => {
+						if (!open) buttonRef.current?.click();
+					},
+					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,
+					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
+//#region src/components/Listbox.tsx
+function CustomListbox({ options = [], handleOptionSelected, type, allowSearch = false, closeOnSelect = true, className = "", invalid = false }) {
+	const { dropdown: strings } = useStrings();
+	const [filter, setFilter] = useState("");
+	const [controlledOpen, setControlledOpen] = useState(false);
+	const optionsToShow = options.filter((option) => !option.selected && option.label && option.label.toLowerCase().includes(filter.toLowerCase()));
+	function useOutsideAlerter(ref) {
+		useEffect(() => {
+			function handleClickOutside(event) {
+				if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
+					setControlledOpen(false);
+					setFilter("");
+				}
+			}
+			document.addEventListener("mousedown", handleClickOutside);
+			return () => {
+				document.removeEventListener("mousedown", handleClickOutside);
+			};
+		}, [ref]);
+	}
+	const wrapperRef = useRef(null);
+	useOutsideAlerter(wrapperRef);
+	const optionsElement = /* @__PURE__ */ jsxs(ListboxOptions, {
+		static: true,
+		className: "absolute w-full py-1 z-50 theme-input rounded-md",
+		children: [allowSearch && /* @__PURE__ */ jsx("div", {
+			className: "pl-2 pr-4 mb-1",
+			children: /* @__PURE__ */ jsx("input", {
+				autoComplete: "off",
+				type: "search",
+				autoFocus: true,
+				onChange: (e) => setFilter(e.target.value),
+				value: filter,
+				className: "w-full p-1 theme-input",
+				onKeyDown: (e) => {
+					if (![
+						"ArrowUp",
+						"ArrowDown",
+						"Enter",
+						"Home",
+						"End",
+						"Escape"
+					].includes(e.key)) e.stopPropagation();
+				}
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "overflow-auto max-h-60 theme-panel",
+			children: optionsToShow.length > 0 ? optionsToShow.map((option, index) => /* @__PURE__ */ jsx(ListboxOption, {
+				className: "relative hover:theme-hover select-none pl-2 pr-4",
+				value: option.value,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full flex flex-row",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "w-3/4 py-2 flex items-center",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "w-4 h-6 btn btn-info text-xl line-height-0 mr-2",
+								children: "+"
+							}),
+							option.icon && /* @__PURE__ */ jsx("span", {
+								className: "mr-2 flex items-center",
+								children: option.icon
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "mr-2",
+								children: option.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "italic",
+								children: option.secondaryLabel
+							})
+						]
+					})
+				}, index)
+			}, index)) : /* @__PURE__ */ jsx("div", {
+				className: "w-full flex flex-row",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-3/4 py-2 pl-2 capitalize flex items-center",
+					children: filter === "" ? `All ${type} Added` : `No ${type} Found`
+				})
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Listbox, {
+		as: "div",
+		className: cx("relative mt-1 theme-input border theme-border rounded-md", className),
+		ref: wrapperRef,
+		onChange: handleOptionSelected,
+		children: [/* @__PURE__ */ jsxs(ListboxButton, {
+			onClick: () => setControlledOpen((prev) => !prev),
+			className: cx("relative w-full py-2 pl-3 text-left", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "block truncate",
+				children: strings.select(type)
+			}), /* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute inset-y-0 right-0 flex items-center justify-items-center",
+				children: /* @__PURE__ */ jsx(AngleDownIcon, {
+					className: "h-5 w-8",
+					"aria-hidden": "true"
+				})
+			})]
+		}), closeOnSelect ? /* @__PURE__ */ jsx(Transition, {
+			leave: "transition ease-in duration-100",
+			leaveFrom: "opacity-100",
+			leaveTo: "opacity-0",
+			children: optionsElement || null
+		}) : /* @__PURE__ */ jsx(Fragment, { children: controlledOpen && optionsElement })]
+	});
+}
+//#endregion
+//#region src/components/MultiSelect.tsx
+function MultiSelectDropdown({ options, value, onChange, id, className, wrapperClassName = "w-full", textBoxClassName, disabled = false, placeholder, loading = false, searchable = true, maxTagCount = 2, compareBy }) {
+	const strings = useStrings();
+	const [query, setQuery] = useState("");
+	const [referenceEl, setReferenceEl] = useState(null);
+	const [popperEl, setPopperEl] = useState(null);
+	const { styles, attributes } = usePopper(referenceEl, popperEl, {
+		placement: "bottom-start",
+		modifiers: [{
+			name: "offset",
+			options: { offset: [0, 4] }
+		}]
+	});
+	const allOptions = useMemo(() => flattenOptions(options), [options]);
+	const compare = compareBy ?? ((a, b) => a === b);
+	const selectedOptions = useMemo(() => {
+		const result = [];
+		for (const val of value) {
+			const found = allOptions.find((opt) => isOption(opt) && compare(opt.value, val));
+			if (found) result.push(found);
+		}
+		return result;
+	}, [
+		value,
+		allOptions,
+		compare
+	]);
+	const filteredOptions = useMemo(() => {
+		if (!searchable || query.trim() === "") return allOptions;
+		const result = [];
+		for (const opt of allOptions) if (isCategory(opt)) {
+			const matchedChildren = (Array.isArray(opt.options) ? opt.options : []).filter((o) => filterOption(o, query));
+			if (matchedChildren.length > 0) result.push(opt, ...matchedChildren);
+		} else if (isOption(opt) && filterOption(opt, query)) result.push(opt);
+		return result;
+	}, [
+		allOptions,
+		query,
+		searchable
+	]);
+	const display = useMemo(() => {
+		const shown = selectedOptions.slice(0, maxTagCount);
+		return {
+			label: shown.map((o) => o.label).join(", "),
+			overflow: selectedOptions.length - shown.length
+		};
+	}, [selectedOptions, maxTagCount]);
+	const handleChange = useCallback((newValues) => {
+		if (!Array.isArray(newValues)) return;
+		onChange(newValues);
+	}, [onChange]);
+	const isDisabled = disabled || loading;
+	const isEmpty = filteredOptions.length === 0;
+	return /* @__PURE__ */ jsx(Combobox, {
+		multiple: true,
+		value: Array.isArray(value) ? value : [],
+		onChange: handleChange,
+		disabled: isDisabled,
+		onClose: () => setQuery(""),
+		by: compare,
+		children: ({ open }) => /* @__PURE__ */ jsxs("div", {
+			ref: setReferenceEl,
+			className: cx("relative", wrapperClassName),
+			children: [
+				/* @__PURE__ */ jsx(ComboboxButton, {
+					as: "div",
+					id,
+					className: cx("theme-input flex items-center cursor-pointer rounded border text-[14px] w-full px-2 pr-8 py-1 min-h-[30px] overflow-hidden", isDisabled && "opacity-50 cursor-not-allowed", textBoxClassName, className),
+					children: loading ? /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text",
+						children: strings.loading
+					}) : selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: display.label
+					}), display.overflow > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "ml-1 shrink-0 theme-muted-text",
+						children: ["+", display.overflow]
+					})] }) : /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text truncate",
+						children: placeholder
+					})
+				}),
+				/* @__PURE__ */ jsx(DropdownCaret, {}),
+				open && /* @__PURE__ */ jsxs(ComboboxOptions, {
+					ref: setPopperEl,
+					static: true,
+					"data-testid": "msd-list",
+					style: styles.popper,
+					...attributes.popper,
+					className: "theme-panel z-10 max-h-60 w-full overflow-auto rounded-md shadow-lg focus:outline-none",
+					children: [searchable && /* @__PURE__ */ jsx("div", {
+						className: "sticky top-0 theme-panel p-2 border-b z-10",
+						children: /* @__PURE__ */ jsx("input", {
+							placeholder,
+							"data-1p-ignore": true,
+							autoComplete: "off",
+							type: "text",
+							className: "theme-input w-full",
+							value: query,
+							onChange: (e) => setQuery(e.target.value),
+							onKeyDown: (e) => e.stopPropagation(),
+							autoFocus: true
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "py-1",
+						children: isEmpty ? /* @__PURE__ */ jsx("div", {
+							className: "px-4 py-2 text-sm theme-muted-text",
+							children: strings.dropdown.noOptionsFound
+						}) : filteredOptions.map((opt, index) => {
+							if (isCategory(opt)) return /* @__PURE__ */ jsx("li", {
+								role: "presentation",
+								className: "px-4 py-2 text-sm font-bold theme-muted-text",
+								children: opt.category
+							}, `category-${opt.category ?? "uncat"}-${index}`);
+							const option = opt;
+							return /* @__PURE__ */ jsx(ComboboxOption, {
+								value: option.value,
+								disabled: option.disabled,
+								"data-testid": `msd-option-${String(option.value)}`,
+								className: ({ focus }) => cx("relative cursor-pointer select-none py-2 pl-10 pr-4 text-sm", focus && "theme-hover", option.disabled && "cursor-not-allowed opacity-50"),
+								children: ({ selected }) => /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "absolute inset-y-0 left-0 flex items-center pl-3",
+											children: /* @__PURE__ */ jsx("input", {
+												autoComplete: "off",
+												type: "checkbox",
+												checked: selected,
+												readOnly: true,
+												className: "h-4 w-4 cursor-pointer",
+												"aria-hidden": "true"
+											})
+										}),
+										option.icon && /* @__PURE__ */ jsx("span", {
+											className: "mr-2 flex items-center",
+											children: option.icon
+										}),
+										/* @__PURE__ */ jsx("div", {
+											className: "flex flex-col",
+											children: /* @__PURE__ */ jsx("span", {
+												className: "block truncate",
+												children: option.label
+											})
+										})
+									]
+								})
+							}, `option-${String(option.value)}`);
+						})
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/CollapsiblePanel.tsx
+var noop = () => {};
+function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, className }) {
+	const toggleOpen = useCallback(() => {
+		if (onClick) onClick();
+		setOpen?.((open) => !open);
+	}, [setOpen, onClick]);
+	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
+	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
+		duration: 300,
+		height: open ? "auto" : 0,
+		children
+	}) })] }) : /* @__PURE__ */ jsxs("div", {
+		className: cx("border border-solid rounded-2xl border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-panel) mb-1 w-full", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(!open && "text-(--theme-muted-text-color)", "w-full flex items-center justify-between transform ease-in transition text-sm py-3 px-2 cursor-pointer"),
+			onClick: toggleOpen,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center w-full",
+				children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
+					className: "px-2 font-bold select-none",
+					children: title?.toString()
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				onClick: (e) => {
+					e.stopPropagation();
+				},
+				children: customizedButton
+			})]
+		}), /* @__PURE__ */ jsx(AnimateHeight, {
+			duration: 300,
+			height: open ? "auto" : 0,
+			children
+		})]
+	});
+}
+function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null }) {
+	const [open, setOpen] = React.useState(initialState);
+	return /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
+		title: typeof title === "function" ? title(open, setOpen) : title,
+		open,
+		setOpen,
+		onClick,
+		wrapperElement,
+		className,
+		customizedButton,
+		children
+	});
+}
+function MaybeCollapsible({ className, initialState, children, title, customizedButton, collapsible }) {
+	if (collapsible) return /* @__PURE__ */ jsx(UncontrolledCollapsiblePanel, {
+		className,
+		initialState,
+		title,
+		customizedButton,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children
+	});
+}
+//#endregion
+//#region src/components/SectionHeader.tsx
+function SectionHeader({ children, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("w-full text-lg font-semibold", className),
+		children
+	});
+}
+//#endregion
+//#region src/components/StatusBadge.tsx
+var variantStyles = {
+	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
+	success: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
+	warning: "bg-amber-500/10 text-amber-500 border-amber-500/20",
+	error: "bg-red-500/10 text-red-500 border-red-500/20",
+	info: "bg-blue-500/10 text-blue-500 border-blue-500/20",
+	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
+};
+var pulseColors = {
+	default: "bg-(--theme-app)",
+	success: "bg-emerald-500",
+	warning: "bg-amber-500",
+	error: "bg-red-500",
+	info: "bg-blue-500",
+	muted: "bg-(--theme-muted-text-color)"
+};
+function StatusBadge({ children, variant = "default", pulse = false, size = "sm", className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
+		children: [pulse && /* @__PURE__ */ jsxs("span", {
+			className: "relative flex h-2 w-2",
+			children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
+		}), children]
+	});
+}
+function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("relative inline-flex", className),
+		style: {
+			width: size,
+			height: size
+		},
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
+			className: cx("relative inline-flex rounded-full", pulseColors[variant]),
+			style: {
+				width: size,
+				height: size
+			}
+		})]
+	});
+}
+//#endregion
+//#region src/components/SwitchToggle.tsx
+function SwitchToggle({ onChange, value = void 0, yesLabel = "Yes", noLabel = "No", disabled = false, datatip = "", invalid = false }) {
+	const [enabled, setEnabled] = useState(value ?? false);
+	const [isFocused, setIsFocused] = useState(false);
+	const setIsEnabled = (e) => {
+		setEnabled(e);
+		onChange(e);
+	};
+	useEffect(() => {
+		if (value !== void 0) setEnabled(value);
+	}, [value]);
+	const checked = value ?? enabled;
+	return /* @__PURE__ */ jsx("div", {
+		"data-tooltip-content": datatip || void 0,
+		"data-tooltip-id": datatip ? TOOLTIP_ID : void 0,
+		className: cx("w-[198px] h-[30px] overflow-hidden shadow-sm rounded-md cursor-pointer ring-(--theme-border) ring-1", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500 ring-1 ring-red-500", !invalid && isFocused && "ring-1 ring-[rgba(82,168,236,.8)] drop-shadow-[0_1px_2px_rgba(82,168,236,0.8)]"),
+		children: /* @__PURE__ */ jsx(Switch, {
+			checked,
+			onChange: setIsEnabled,
+			className: "text-white text-sm shadow-sm rounded-md cursor-pointer",
+			onClick: (e) => e.stopPropagation(),
+			onFocus: () => setIsFocused(true),
+			onBlur: () => setIsFocused(false),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cx(checked ? "translate-x-0" : "-translate-x-[100px]", "relative transform flex flex-row  ease-in-out duration-500", disabled && "cursor-not-allowed opacity-50"),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "inline text-center capitalize px-2 py-1 w-[99px] border-0",
+						style: {
+							background: `linear-gradient(
+              to bottom,
+              var(--theme-element, #04c) 0%,
+              var(--theme-element, #08c) 100%
+            )`,
+							color: "var(--theme-element-text, #ffffff)"
+						},
+						children: yesLabel
+					}),
+					/* @__PURE__ */ jsx("div", { className: "inline px-2 py-1 h-8 w-[99px] bg-linear-to-b from-white to-[#e6e6e6]" }),
+					/* @__PURE__ */ jsx("div", {
+						className: "inline text-center capitalize px-2 py-1 w-[99px] bg-linear-to-b from-[#e6e6e6] to-white bg-[#04c] text-black",
+						children: noLabel
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/Table.tsx
+function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
+	const yPadding = className?.includes("py-") ? "" : "py-4";
+	const xPadding = className?.includes("px-") ? "" : "px-2";
+	return /* @__PURE__ */ jsx("td", {
+		...tdProps,
+		colSpan: colspan,
+		className: cx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
+		children
+	});
+}
+function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProps }) {
+	return /* @__PURE__ */ jsx("td", {
+		...tdProps,
+		colSpan: colspan,
+		className: cx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
+		children
+	});
+}
+function Header({ children, className, style, colspan = 1, onClick, caps = true }) {
+	return /* @__PURE__ */ jsx("th", {
+		scope: "col",
+		colSpan: colspan,
+		style,
+		className: cx(className, className?.includes("py-") ? "" : "py-3", className?.includes("px-") ? "" : "px-3", className?.includes("text-") ? "" : "text-left", "text-xs font-medium", caps ? "uppercase tracking-wider" : "", onClick && "cursor-pointer hover:opacity-80 transition-opacity"),
+		onClick,
+		children
+	});
+}
+var isHeaderChild = (child) => {
+	if (!React.isValidElement(child)) return false;
+	return child.type === Header || typeof child.type === "function" && child.type.isTableHeader === true;
+};
+var getHeaders = (children) => children.filter(isHeaderChild);
+function Table({ borderless = false, panel = true, className = "", wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, tableProps }) {
+	const ChildrenArr = React.Children.toArray(children);
+	const Headers = getHeaders(ChildrenArr);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
+		children: isLoading ? /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center items-center h-32",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
+			children: /* @__PURE__ */ jsxs("table", {
+				className: cx(className, "min-w-full divide-y theme-border"),
+				...tableProps,
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: theadClassName,
+					children: /* @__PURE__ */ jsx("tr", { children: Headers })
+				}), /* @__PURE__ */ jsx("tbody", {
+					className: tbodyClassName,
+					children: ChildrenArr.filter((c) => !isHeaderChild(c))
+				})]
+			})
+		})
+	});
+}
+function CompactTable({ wrapperClassName = "", className = "", tbodyClassName = "divide-y", children, roundedTop = false, rounded = false, roundedBottom = false }) {
+	const ChildrenArr = React.Children.toArray(children);
+	const Headers = getHeaders(ChildrenArr);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
+			children: /* @__PURE__ */ jsxs("table", {
+				className: cx("min-w-full divide-y theme-border", className),
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "theme-muted-panel",
+					children: /* @__PURE__ */ jsx("tr", {
+						className: "divide-x",
+						children: Headers
+					})
+				}), /* @__PURE__ */ jsx("tbody", {
+					className: tbodyClassName,
+					children: ChildrenArr.filter((c) => !isHeaderChild(c))
+				})]
+			})
+		})
+	});
+}
+Table.Header = Header;
+Table.Item = Item;
+CompactTable.Header = Header;
+CompactTable.Item = CompactItem;
+//#endregion
+export { isOption as _, StatusDot as a, MaybeCollapsible as c, CustomListbox as d, Dropdown as f, isCategory as g, flattenOptions as h, StatusBadge as i, UncontrolledCollapsiblePanel as l, filterOption as m, Table as n, SectionHeader as o, DropdownCaret as p, SwitchToggle as r, ControlledCollapsiblePanel as s, CompactTable as t, MultiSelectDropdown as u };