@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/dist/components/status-badge/status-badge.js

@@ -0,0 +1,108 @@
+import { cn } from "../../utils/cn.js";
+import { Badge } from "../../core/badge.js";
+import { Spinner } from "../spinner/spinner.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/status-badge/status-badge.tsx
+function renderStatusBadgeIcon(icon, px) {
+	if (!icon) return null;
+	if (React$1.isValidElement(icon)) return icon;
+	return /* @__PURE__ */ jsx(icon, {
+		size: px,
+		"aria-hidden": true
+	});
+}
+/**
+* Size-specific class + pixel tokens for the icon slot. Keeps the JSX free of
+* ternaries and lines up with the icon size scale used by `UserTypeBadge`.
+*/
+var ICON_PX = {
+	sm: 14,
+	default: 16,
+	lg: 18
+};
+var statusBadgeSizeVariants = cva("rounded-full font-normal [&_svg]:shrink-0", {
+	variants: {
+		size: {
+			sm: "gap-1 py-0.5 text-xs",
+			default: "gap-1.5 py-0.5 text-xs",
+			lg: "gap-1.5 py-1 text-sm"
+		},
+		hasIcon: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			size: "sm",
+			hasIcon: true,
+			class: "pl-0.5 pr-1.5"
+		},
+		{
+			size: "sm",
+			hasIcon: false,
+			class: "px-1.5"
+		},
+		{
+			size: "default",
+			hasIcon: true,
+			class: "pl-0.5 pr-1.75"
+		},
+		{
+			size: "default",
+			hasIcon: false,
+			class: "px-1.75"
+		},
+		{
+			size: "lg",
+			hasIcon: true,
+			class: "pl-1 pr-2.25"
+		},
+		{
+			size: "lg",
+			hasIcon: false,
+			class: "px-2.25"
+		}
+	],
+	defaultVariants: {
+		size: "default",
+		hasIcon: false
+	}
+});
+/**
+* Shared icon+label status chip. Consumers resolve their per-status
+* presentation (icon, colour, translated label) and hand the results in here,
+* so every status badge across apps stays visually consistent.
+*
+* The primitive stays i18n-free and registry-free — the per-status mapping
+* belongs in the consuming app's domain layer.
+*/
+var StatusBadge = React$1.forwardRef(({ label, icon: Icon, color, variant = "soft", size = "default", isLoading = false, className, labelClassName, ...props }, ref) => {
+	const iconPx = ICON_PX[size];
+	const showIcon = isLoading || !!Icon;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "inline-flex align-middle",
+		...props,
+		children: /* @__PURE__ */ jsxs(Badge, {
+			color,
+			variant,
+			className: cn(statusBadgeSizeVariants({
+				size,
+				hasIcon: showIcon
+			}), className),
+			children: [isLoading ? /* @__PURE__ */ jsx(Spinner, {
+				size: iconPx,
+				"aria-hidden": true
+			}) : renderStatusBadgeIcon(Icon, iconPx), /* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 truncate", labelClassName),
+				children: label
+			})]
+		})
+	});
+});
+StatusBadge.displayName = "StatusBadge";
+//#endregion
+export { StatusBadge, statusBadgeSizeVariants };

package/dist/components/status-card-list/status-card-list.js

@@ -0,0 +1,282 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
+import { IconAvatar } from "../icon-avatar/icon-avatar.js";
+import { cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle2, Clock, LoaderCircle, TriangleAlert, XCircle } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/status-card-list/status-card-list.tsx
+/**
+* Text / icons: Alert soft `colorStyles.*.filled` + `.description`.
+* Card fill + border: same tokens, driven through `motion.li` for smooth state transitions.
+*/
+var stateVisuals = {
+	success: {
+		avatarColor: "success",
+		endIconClass: "text-success",
+		titleClass: "text-success",
+		descriptionClass: "text-success/80"
+	},
+	warning: {
+		avatarColor: "warning",
+		endIconClass: "text-warning",
+		titleClass: "text-warning",
+		descriptionClass: "text-warning/80"
+	},
+	error: {
+		avatarColor: "error",
+		endIconClass: "text-error",
+		titleClass: "text-error",
+		descriptionClass: "text-error/80"
+	},
+	in_progress: {
+		avatarColor: "primary",
+		endIconClass: "text-primary",
+		titleClass: "text-primary",
+		descriptionClass: "text-primary/80"
+	},
+	not_started: {
+		avatarColor: "gray",
+		endIconClass: "text-gray",
+		titleClass: "text-gray",
+		descriptionClass: "text-gray/80"
+	}
+};
+/** Theme vars from `colors.css` @theme — card fill/border at 5% mix (Tailwind `bg-* /5`, `border-* /5`). */
+var stateSurfaceCssVar = {
+	success: "--color-success",
+	warning: "--color-warning",
+	error: "--color-error",
+	in_progress: "--color-primary",
+	not_started: "--color-gray"
+};
+function stateSurfaceMotion(state) {
+	const v = stateSurfaceCssVar[state];
+	return {
+		backgroundColor: `color-mix(in srgb, var(${v}) 5%, transparent)`,
+		borderColor: `color-mix(in srgb, var(${v}) 5%, transparent)`
+	};
+}
+var cardMotionTransition = {
+	duration: .38,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+};
+var endIconPresenceTransition = {
+	duration: .22,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+};
+var colorTransitionClass = "transition-colors duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]";
+var sizeStyles = {
+	sm: {
+		rowPad: "p-3",
+		gap: "gap-2",
+		primary: "text-xs font-semibold",
+		secondary: "text-xs",
+		icon: "h-[18px] w-[18px] shrink-0",
+		endIcon: "size-5 shrink-0",
+		avatar: 36,
+		listGap: "gap-3"
+	},
+	default: {
+		rowPad: "p-4",
+		gap: "gap-3",
+		primary: "text-sm font-semibold",
+		secondary: "text-sm",
+		icon: "h-6 w-6 shrink-0",
+		endIcon: "size-6 shrink-0",
+		avatar: 44,
+		listGap: "gap-4"
+	},
+	lg: {
+		rowPad: "p-6",
+		gap: "gap-4",
+		primary: "text-base font-semibold",
+		secondary: "text-sm",
+		icon: "h-8 w-8 shrink-0",
+		endIcon: "size-7 shrink-0",
+		avatar: 52,
+		listGap: "gap-5"
+	}
+};
+function hasTooltipContent(content) {
+	if (content == null) return false;
+	if (typeof content === "string") return content.length > 0;
+	if (typeof content === "number") return true;
+	if (typeof content === "boolean") return false;
+	return true;
+}
+function iconSized(icon, iconClass) {
+	if (icon == null) return null;
+	if (isValidElement(icon)) {
+		const el = icon;
+		return cloneElement(el, { className: cn(el.props.className, iconClass) });
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center justify-center", iconClass),
+		children: icon
+	});
+}
+function TruncatedLineWithTooltip({ className, tooltipContent, children }) {
+	const textRef = useRef(null);
+	const [isTruncated, setIsTruncated] = useState(false);
+	const measure = useCallback(() => {
+		const el = textRef.current;
+		if (!el) return;
+		setIsTruncated(el.scrollWidth > el.clientWidth + 1);
+	}, []);
+	useLayoutEffect(() => {
+		measure();
+	}, [
+		measure,
+		children,
+		tooltipContent
+	]);
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const el = textRef.current;
+		const ro = new ResizeObserver(measure);
+		if (el) ro.observe(el);
+		return () => ro.disconnect();
+	}, [measure]);
+	const line = /* @__PURE__ */ jsx("span", {
+		ref: textRef,
+		className: cn("block min-w-0 truncate", className),
+		children
+	});
+	if (!(isTruncated && hasTooltipContent(tooltipContent))) return line;
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		side: "top",
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			className: "block min-w-0 w-full cursor-inherit text-left",
+			children: line
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			className: "max-w-sm",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "break-words",
+				children: tooltipContent
+			})
+		})]
+	});
+}
+function StatusEndIndicator({ state, endIconClass, endIconSizeClass }) {
+	const cls = cn(endIconSizeClass, endIconClass);
+	switch (state) {
+		case "success": return /* @__PURE__ */ jsx(CheckCircle2, {
+			className: cls,
+			"aria-hidden": true
+		});
+		case "warning": return /* @__PURE__ */ jsx(TriangleAlert, {
+			className: cls,
+			"aria-hidden": true
+		});
+		case "error": return /* @__PURE__ */ jsx(XCircle, {
+			className: cls,
+			"aria-hidden": true
+		});
+		case "in_progress": return /* @__PURE__ */ jsx(LoaderCircle, {
+			className: cn(cls, "animate-spin"),
+			"aria-hidden": true
+		});
+		case "not_started": return /* @__PURE__ */ jsx(Clock, {
+			className: cls,
+			"aria-hidden": true
+		});
+	}
+}
+function StatusCardListRow({ item, s }) {
+	const visuals = stateVisuals[item.state];
+	return /* @__PURE__ */ jsxs(motion.li, {
+		layout: true,
+		initial: false,
+		animate: stateSurfaceMotion(item.state),
+		transition: cardMotionTransition,
+		className: cn("flex items-center rounded-lg border border-solid text-left", s.rowPad, s.gap),
+		children: [
+			/* @__PURE__ */ jsx(motion.span, {
+				layout: "position",
+				className: "flex shrink-0 items-center justify-center",
+				children: /* @__PURE__ */ jsx(IconAvatar, {
+					size: s.avatar,
+					color: visuals.avatarColor,
+					ring: {
+						show: true,
+						color: visuals.avatarColor
+					},
+					children: iconSized(item.icon, cn(s.icon, visuals.titleClass, colorTransitionClass))
+				})
+			}),
+			/* @__PURE__ */ jsxs(motion.span, {
+				layout: "position",
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
+					className: cn(s.primary, visuals.titleClass, colorTransitionClass),
+					tooltipContent: item.title,
+					children: item.title
+				}), item.description != null ? /* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
+					className: cn(s.secondary, visuals.descriptionClass, colorTransitionClass),
+					tooltipContent: item.description,
+					children: item.description
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs(motion.span, {
+				layout: "position",
+				className: cn("flex shrink-0 items-center justify-end gap-2"),
+				children: [item.action != null ? /* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0 items-center",
+					children: item.action
+				}) : null, /* @__PURE__ */ jsx(AnimatePresence, {
+					initial: false,
+					mode: "wait",
+					children: /* @__PURE__ */ jsx(motion.span, {
+						className: "inline-flex shrink-0 items-center justify-center",
+						initial: {
+							opacity: 0,
+							scale: .88
+						},
+						animate: {
+							opacity: 1,
+							scale: 1
+						},
+						exit: {
+							opacity: 0,
+							scale: .88
+						},
+						transition: endIconPresenceTransition,
+						children: /* @__PURE__ */ jsx(StatusEndIndicator, {
+							state: item.state,
+							endIconClass: cn(visuals.endIconClass, colorTransitionClass),
+							endIconSizeClass: s.endIcon
+						})
+					}, item.state)
+				})]
+			})
+		]
+	});
+}
+function StatusCardList({ data, size = "default", className }) {
+	const s = sizeStyles[size];
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 300,
+		closeDelay: 100,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: cn("flex flex-col min-w-0", s.listGap, className),
+			children: data.map((item) => /* @__PURE__ */ jsx(StatusCardListRow, {
+				item,
+				s
+			}, item.id))
+		})
+	});
+}
+//#endregion
+export { StatusCardList };

package/dist/components/tag/tag.js

@@ -0,0 +1,144 @@
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../../core/button.js";
+import Tooltip from "../tooltip/tooltip.js";
+import { Badge } from "../../core/badge.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tag, X } from "lucide-react";
+import { cva } from "class-variance-authority";
+//#region src/components/tag/tag.tsx
+/**
+* Per-variant tint applied to the inner name chip so it stays visually distinct
+* from the surrounding Badge surface across all four variants.
+*
+* - `soft`: chip uses a light `color/10` tint to stay distinct from value text.
+* - `outline` / `gradient`: badge has no fill, so chip uses a `color/15` patch.
+* - `solid`: badge is saturated; chip uses a translucent dark patch for contrast.
+*/
+var NAME_CHIP_TINT = {
+	soft: {
+		primary: "bg-primary/10",
+		secondary: "bg-secondary/10",
+		error: "bg-error/10",
+		info: "bg-info/10",
+		success: "bg-success/10",
+		warning: "bg-warning/10",
+		disabled: "bg-disabled/10",
+		gray: "bg-gray/10",
+		mist: "bg-mist-border/70"
+	},
+	outline: {
+		primary: "bg-primary/15",
+		secondary: "bg-secondary/15",
+		error: "bg-error/15",
+		info: "bg-info/15",
+		success: "bg-success/15",
+		warning: "bg-warning/15",
+		disabled: "bg-disabled/15",
+		gray: "bg-gray/15",
+		mist: "bg-mist-border"
+	},
+	gradient: {
+		primary: "bg-primary/15",
+		secondary: "bg-secondary/15",
+		error: "bg-error/15",
+		info: "bg-info/15",
+		success: "bg-success/15",
+		warning: "bg-warning/15",
+		disabled: "bg-disabled/15",
+		gray: "bg-gray/15",
+		mist: "bg-mist-border"
+	},
+	solid: {
+		primary: "bg-black/25 text-primary-foreground",
+		secondary: "bg-black/15 text-secondary-foreground",
+		error: "bg-black/25 text-error-foreground",
+		info: "bg-black/25 text-info-foreground",
+		success: "bg-black/25 text-success-foreground",
+		warning: "bg-black/25 text-warning-foreground",
+		disabled: "bg-black/20 text-disabled-foreground",
+		gray: "bg-black/20 text-gray-foreground",
+		mist: "bg-black/10 text-mist-foreground"
+	}
+};
+/** `"silver"` chip tints follow the gray family with slightly extra contrast for the metallic surface. */
+var SILVER_NAME_CHIP_TINT = {
+	soft: "bg-gray/10",
+	outline: "bg-gray/15",
+	gradient: "bg-gray/15",
+	solid: "bg-black/20 text-gray-foreground"
+};
+function getNameChipTint(variant, color) {
+	if (color === "silver") return SILVER_NAME_CHIP_TINT[variant];
+	return NAME_CHIP_TINT[variant][color];
+}
+var tagSizeVariants = cva("inline-flex min-w-0 max-w-full items-center shadow-none transition-shadow duration-200 ease-out hover:shadow-sm [&_svg]:shrink-0", {
+	variants: { size: {
+		sm: "gap-1 px-1.5 py-0.5 text-xs [&_svg]:size-3",
+		default: "gap-1.5 px-2 py-1 text-sm [&_svg]:size-3.5",
+		lg: "gap-2 px-2.5 py-1.5 text-base [&_svg]:size-4"
+	} },
+	defaultVariants: { size: "default" }
+});
+var deleteButtonSizeClasses = {
+	sm: "h-5 w-5 [&_svg]:size-3",
+	default: "h-6 w-6 [&_svg]:size-3.5",
+	lg: "h-7 w-7 [&_svg]:size-4"
+};
+var deleteButtonVariantClasses = {
+	soft: "bg-error/10 text-error hover:bg-error/15 hover:text-error",
+	outline: "bg-error/10 text-error hover:bg-error/15 hover:text-error",
+	gradient: "bg-error/10 text-error hover:bg-error/15 hover:text-error",
+	solid: "bg-error/20 text-error-foreground hover:bg-error/30 hover:text-error-foreground"
+};
+var Tag$1 = React$1.forwardRef(({ name, value, nameTooltip, valueTooltip, size = "default", color = "secondary", variant = "soft", rounded = false, onDelete, className, ...rest }, ref) => {
+	const nameTip = nameTooltip ?? name;
+	const valueTip = value !== void 0 ? valueTooltip ?? value : void 0;
+	const removeLabel = value !== void 0 ? `${nameTooltip ?? name}: ${valueTooltip ?? value}` : nameTooltip ?? name;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "inline-block max-w-full",
+		...rest,
+		children: /* @__PURE__ */ jsxs(Badge, {
+			variant,
+			color,
+			className: cn(tagSizeVariants({ size }), rounded && "rounded-full", className),
+			children: [
+				/* @__PURE__ */ jsx(Tag, {
+					"aria-hidden": true,
+					className: "opacity-70"
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: nameTip,
+					children: /* @__PURE__ */ jsx("span", {
+						className: cn("min-w-0 truncate px-1.5 py-0.5 font-medium", rounded ? "rounded-full" : "rounded-sm", getNameChipTint(variant, color)),
+						children: name
+					})
+				}),
+				value !== void 0 ? /* @__PURE__ */ jsx(Tooltip, {
+					content: valueTip,
+					children: /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate font-normal",
+						children: value
+					})
+				}) : null,
+				onDelete ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Remove ${removeLabel}`,
+					className: cn(buttonVariants({
+						variant: "ghost",
+						size: "icon"
+					}), deleteButtonSizeClasses[size], "shrink-0", rounded && "rounded-full", deleteButtonVariantClasses[variant]),
+					onClick: onDelete,
+					children: /* @__PURE__ */ jsx(X, {
+						"aria-hidden": true,
+						strokeWidth: 2
+					})
+				}) : null
+			]
+		})
+	});
+});
+Tag$1.displayName = "Tag";
+//#endregion
+export { Tag$1 as Tag };

package/dist/components/tag-input/tag-input.js

@@ -0,0 +1,161 @@
+import { cn } from "../../utils/cn.js";
+import { Tag } from "../tag/tag.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tag-input/tag-input.tsx
+var labelClasses = "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
+var controlSizeClasses = {
+	sm: "min-h-8 gap-1 px-2 py-1 text-xs",
+	default: "min-h-10 gap-1.5 px-3 py-2 text-base md:text-sm",
+	lg: "min-h-12 gap-2 px-4 py-2 text-lg"
+};
+var inputTextSizeClasses = {
+	sm: "text-xs",
+	default: "text-base md:text-sm",
+	lg: "text-lg"
+};
+function truncateDisplay(text, maxLen) {
+	if (text.length <= maxLen) return text;
+	return `${text.slice(0, maxLen)}…`;
+}
+/** First colon separates name and value; both sides must be non-empty. */
+function parseNameValueTag(tag) {
+	const i = tag.indexOf(":");
+	if (i <= 0 || i >= tag.length - 1) return null;
+	return {
+		name: tag.slice(0, i),
+		value: tag.slice(i + 1)
+	};
+}
+var TagInput = React$1.forwardRef(({ tags, onTagsChange, label, required, size, rounded, startHelperContent, endHelperContent, hintContent, error, errorContent, validatorRegex, onInvalidTag, allowDuplicates = false, maxTagDisplayLength = 10, nameValueTags = false, className, id, disabled, readOnly, placeholder, onKeyDown, onBlur, ...restInputProps }, ref) => {
+	const autoId = React$1.useId();
+	const inputId = id ?? autoId;
+	const rootRef = React$1.useRef(null);
+	const [draft, setDraft] = React$1.useState("");
+	const effectiveSize = size ?? "default";
+	const hasError = error || !!errorContent;
+	const tryCommitDraft = React$1.useCallback(() => {
+		if (disabled || readOnly) return;
+		const trimmed = draft.trim();
+		if (!trimmed) return;
+		if (validatorRegex && !validatorRegex.test(trimmed)) {
+			onInvalidTag?.(trimmed);
+			return;
+		}
+		if (!allowDuplicates && tags.includes(trimmed)) return;
+		onTagsChange([...tags, trimmed]);
+		setDraft("");
+	}, [
+		draft,
+		disabled,
+		readOnly,
+		validatorRegex,
+		onInvalidTag,
+		allowDuplicates,
+		tags,
+		onTagsChange
+	]);
+	const removeAt = (index) => {
+		if (disabled || readOnly) return;
+		onTagsChange(tags.filter((_, i) => i !== index));
+	};
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		if (e.defaultPrevented) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			tryCommitDraft();
+			return;
+		}
+		if (e.key === "Backspace" && draft === "" && tags.length > 0) {
+			e.preventDefault();
+			removeAt(tags.length - 1);
+		}
+	};
+	const handleBlur = (e) => {
+		onBlur?.(e);
+		const next = e.relatedTarget;
+		if (next instanceof Node && rootRef.current?.contains(next)) return;
+		tryCommitDraft();
+	};
+	const controlClasses = cn("peer flex w-full flex-wrap items-center border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", controlSizeClasses[effectiveSize], rounded ? "rounded-full" : "rounded-md", hasError && "border-destructive focus-within:ring-destructive", disabled && "pointer-events-none opacity-50", readOnly && "bg-muted", className);
+	const inputClasses = cn("min-w-[6rem] flex-1 border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed read-only:cursor-default", inputTextSizeClasses[effectiveSize]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: "group flex flex-1 flex-col space-y-2",
+		"data-disabled": disabled ? true : void 0,
+		children: [
+			label ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: inputId,
+					className: labelClasses,
+					children: [label, required ? /* @__PURE__ */ jsx("span", {
+						className: "text-destructive",
+						children: "*"
+					}) : null]
+				}), hintContent ? /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground",
+					children: hintContent
+				}) : null]
+			}) : null,
+			!label && hintContent ? /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: hintContent
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: controlClasses,
+				children: [tags.map((tag, index) => {
+					const parsed = nameValueTags ? parseNameValueTag(tag) : null;
+					if (parsed) return /* @__PURE__ */ jsx(Tag, {
+						name: truncateDisplay(parsed.name, maxTagDisplayLength),
+						nameTooltip: parsed.name,
+						value: truncateDisplay(parsed.value, maxTagDisplayLength),
+						valueTooltip: parsed.value,
+						size: effectiveSize,
+						onDelete: disabled || readOnly ? void 0 : () => removeAt(index)
+					}, `${tag}-${index}`);
+					return /* @__PURE__ */ jsx(Tag, {
+						name: truncateDisplay(tag, maxTagDisplayLength),
+						nameTooltip: tag,
+						size: effectiveSize,
+						onDelete: disabled || readOnly ? void 0 : () => removeAt(index)
+					}, `${tag}-${index}`);
+				}), /* @__PURE__ */ jsx("input", {
+					ref,
+					id: inputId,
+					type: "text",
+					className: inputClasses,
+					disabled,
+					readOnly,
+					placeholder,
+					value: draft,
+					onChange: (e) => setDraft(e.target.value),
+					onKeyDown: handleKeyDown,
+					onBlur: handleBlur,
+					"aria-invalid": hasError || void 0,
+					"aria-describedby": errorContent ? `${inputId}-error` : startHelperContent || endHelperContent ? `${inputId}-helper` : void 0,
+					...restInputProps
+				})]
+			}),
+			errorContent ? /* @__PURE__ */ jsx("div", {
+				id: `${inputId}-error`,
+				className: "text-sm text-destructive",
+				children: errorContent
+			}) : null,
+			startHelperContent && !errorContent ? /* @__PURE__ */ jsx("div", {
+				id: `${inputId}-helper`,
+				className: "text-sm text-muted-foreground",
+				children: startHelperContent
+			}) : null,
+			endHelperContent && !errorContent ? /* @__PURE__ */ jsx("div", {
+				id: `${inputId}-helper`,
+				className: "text-end text-sm text-muted-foreground",
+				children: endHelperContent
+			}) : null
+		]
+	});
+});
+TagInput.displayName = "TagInput";
+//#endregion
+export { TagInput };