@parallelworks/ui 0.19.0 → 0.20.0

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 };

package/dist/components/Input.js

@@ -0,0 +1,88 @@
+import { AlertIcon, EyeIcon, EyeOffIcon } from "../icons.js";
+import { RequiredMark } from "./RequiredMark.js";
+import cx from "classnames";
+import { forwardRef, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Input.tsx
+var Input = forwardRef(({ label, error, className = "", mono, type, required, ...props }, ref) => {
+	const [showPassword, setShowPassword] = useState(false);
+	const isPassword = type === "password";
+	const inputType = isPassword && showPassword ? "text" : type;
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	const errorId = `${id}-error`;
+	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	const inputClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", isPassword && "pr-11", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+				htmlFor: id,
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: isPassword ? "relative w-full" : "",
+				children: [/* @__PURE__ */ jsx("input", {
+					ref,
+					type: inputType,
+					className: inputClasses,
+					...props,
+					id,
+					required,
+					"aria-invalid": error ? true : props["aria-invalid"],
+					"aria-describedby": describedBy
+				}), isPassword && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "absolute right-3 top-1/2 -translate-y-1/2 bg-transparent border-none text-[var(--theme-muted-text-color)] cursor-pointer p-1 transition-colors duration-200 flex items-center justify-center hover:text-[var(--theme-app)]",
+					onClick: () => setShowPassword(!showPassword),
+					tabIndex: -1,
+					"aria-label": showPassword ? "Hide password" : "Show password",
+					children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "w-5 h-5" })
+				})]
+			}),
+			error && /* @__PURE__ */ jsxs("span", {
+				id: errorId,
+				role: "alert",
+				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4" }), error]
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+var Textarea = forwardRef(({ label, error, className = "", mono, required, ...props }, ref) => {
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	const errorId = `${id}-error`;
+	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	const textareaClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border min-h-[140px] resize-y", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+				htmlFor: id,
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				ref,
+				className: textareaClasses,
+				...props,
+				id,
+				required,
+				"aria-invalid": error ? true : props["aria-invalid"],
+				"aria-describedby": describedBy
+			}),
+			error && /* @__PURE__ */ jsxs("span", {
+				id: errorId,
+				role: "alert",
+				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4" }), error]
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Input, Textarea };

package/dist/components/LetterBadge.js

@@ -0,0 +1,13 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/LetterBadge.tsx
+/** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
+* an icon. Size the box and text via className (e.g. "h-5 w-5 text-[8px]"). */
+function LetterBadge({ text, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
+		children: text
+	});
+}
+//#endregion
+export { LetterBadge };