@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/dist/components/key-value-manager/key-value-manager-add-popover.js

@@ -0,0 +1,126 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
+import { KeyValueManagerField } from "./key-value-manager-field.js";
+import { validateField } from "./key-value-manager.utils.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRight, Plus } from "lucide-react";
+//#region src/components/key-value-manager/key-value-manager-add-popover.tsx
+function KeyValueManagerAddPopover({ items, meta, labels, maxAllowed, onUpdate, triggerClassName }) {
+	const [open, setOpen] = useState(false);
+	const [draftKey, setDraftKey] = useState("");
+	const [draftValue, setDraftValue] = useState("");
+	const [keyError, setKeyError] = useState(false);
+	const [valueError, setValueError] = useState(false);
+	const [showSuccess, setShowSuccess] = useState(false);
+	const atLimit = maxAllowed !== void 0 && items.length >= maxAllowed;
+	const resetFormState = () => {
+		setDraftKey("");
+		setDraftValue("");
+		setKeyError(false);
+		setValueError(false);
+		setShowSuccess(false);
+	};
+	const handleOpenChange = (nextOpen) => {
+		setOpen(nextOpen);
+		if (!nextOpen) resetFormState();
+	};
+	const handleFieldChange = (field, value) => {
+		setShowSuccess(false);
+		if (field === "key") {
+			setDraftKey(value);
+			if (keyError) setKeyError(false);
+		} else {
+			setDraftValue(value);
+			if (valueError) setValueError(false);
+		}
+	};
+	const handleAdd = () => {
+		setShowSuccess(false);
+		const trimmedKey = draftKey.trim();
+		const trimmedValue = draftValue.trim();
+		const nextKeyError = !trimmedKey || !validateField(trimmedKey, meta?.key);
+		const nextValueError = !trimmedValue || !validateField(trimmedValue, meta?.value);
+		if (nextKeyError || nextValueError) {
+			setKeyError(nextKeyError);
+			setValueError(nextValueError);
+			return;
+		}
+		if (items.some((item) => item.key === trimmedKey)) {
+			setKeyError(true);
+			return;
+		}
+		onUpdate([...items, {
+			key: trimmedKey,
+			value: trimmedValue
+		}]);
+		setDraftKey("");
+		setDraftValue("");
+		setKeyError(false);
+		setValueError(false);
+		setShowSuccess(true);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "primary",
+				fullWidth: false,
+				disabled: atLimit,
+				className: cn("shrink-0 max-sm:size-9 max-sm:gap-0 max-sm:px-0", triggerClassName),
+				startIcon: /* @__PURE__ */ jsx(Plus, {}),
+				children: /* @__PURE__ */ jsx("span", {
+					className: "max-sm:sr-only",
+					children: labels.add
+				})
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "end",
+			className: "w-80 space-y-4",
+			children: [
+				/* @__PURE__ */ jsx(KeyValueManagerField, {
+					field: "key",
+					label: labels.keyLabel,
+					value: draftKey,
+					meta: meta?.key,
+					error: keyError,
+					errorMessage: labels.keyErrorMessage,
+					selectPlaceholder: labels.selectPlaceholder,
+					onChange: (value) => handleFieldChange("key", value)
+				}),
+				/* @__PURE__ */ jsx(KeyValueManagerField, {
+					field: "value",
+					label: labels.valueLabel,
+					value: draftValue,
+					meta: meta?.value,
+					error: valueError,
+					errorMessage: labels.valueErrorMessage,
+					selectPlaceholder: labels.selectPlaceholder,
+					onChange: (value) => handleFieldChange("value", value)
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						color: "primary",
+						fullWidth: false,
+						onClick: handleAdd,
+						endIcon: /* @__PURE__ */ jsx(ArrowRight, {}),
+						children: labels.add
+					}), showSuccess ? /* @__PURE__ */ jsx("p", {
+						className: cn("text-sm text-success"),
+						children: labels.successMessage
+					}) : null]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { KeyValueManagerAddPopover };

package/dist/components/key-value-manager/key-value-manager-field.js

@@ -0,0 +1,47 @@
+"use client";
+import { Input } from "../../core/input/input.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../core/select.js";
+import { Textarea } from "../../core/textarea/textarea.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/key-value-manager/key-value-manager-field.tsx
+/**
+* One field of the add popover: a select when `meta.options` is set, otherwise
+* an input for the key and a textarea for the value.
+*/
+function KeyValueManagerField({ field, label, value, meta, error, errorMessage, selectPlaceholder, onChange }) {
+	const errorContent = error ? errorMessage : void 0;
+	if (meta?.options) return /* @__PURE__ */ jsxs(Select, {
+		value: value || void 0,
+		onValueChange: onChange,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			label,
+			size: "sm",
+			error,
+			errorContent,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder: selectPlaceholder })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: meta.options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+			value: option,
+			children: option
+		}, option)) })]
+	}, value ? "selected" : "empty");
+	if (field === "key") return /* @__PURE__ */ jsx(Input, {
+		label,
+		value,
+		charLimit: meta?.maxLength,
+		error,
+		size: "sm",
+		errorContent,
+		onChange: (e) => onChange(e.target.value)
+	});
+	return /* @__PURE__ */ jsx(Textarea, {
+		label,
+		value,
+		charLimit: meta?.maxLength,
+		error,
+		errorContent,
+		onChange: (e) => onChange(e.target.value),
+		size: "sm"
+	});
+}
+//#endregion
+export { KeyValueManagerField };

package/dist/components/key-value-manager/key-value-manager-table.js

@@ -0,0 +1,188 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { BasicDetailsCard } from "../cards/basic-details-card.js";
+import { Button } from "../button/button.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../core/table.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, Trash2 } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/key-value-manager/key-value-manager-table.tsx
+var slideTransition = {
+	duration: .15,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+};
+var slideVariants = {
+	enter: (dir) => ({
+		x: dir > 0 ? "100%" : "-100%",
+		opacity: 1
+	}),
+	center: {
+		x: 0,
+		opacity: 1
+	},
+	exit: (dir) => ({
+		x: dir > 0 ? "-100%" : "100%",
+		opacity: 1
+	})
+};
+function KeyValueManagerTable({ rows, itemsPerPage = 10, hasSearchQuery, onDelete, keyLabel, valueLabel, actionLabel, emptyItems, emptySearch }) {
+	const [page, setPage] = useState(0);
+	const [direction, setDirection] = useState(1);
+	const pageSize = Math.max(1, itemsPerPage);
+	const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
+	const showPagination = rows.length > pageSize;
+	const pageRows = rows.slice(page * pageSize, (page + 1) * pageSize);
+	const hasPrev = page > 0;
+	const hasNext = page < totalPages - 1;
+	const noRows = rows.length === 0;
+	useEffect(() => {
+		setPage((current) => Math.min(current, Math.max(0, totalPages - 1)));
+	}, [
+		rows,
+		pageSize,
+		totalPages
+	]);
+	const goPrev = () => {
+		if (!hasPrev || noRows) return;
+		setDirection(-1);
+		setPage((current) => current - 1);
+	};
+	const goNext = () => {
+		if (!hasNext || noRows) return;
+		setDirection(1);
+		setPage((current) => current + 1);
+	};
+	const deleteButton = (item, sourceIndex, className) => /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		color: "error",
+		size: "icon",
+		fullWidth: false,
+		"aria-label": `Delete ${item.key}`,
+		className,
+		onClick: () => onDelete(sourceIndex),
+		children: /* @__PURE__ */ jsx(Trash2, {
+			className: "h-4 w-4",
+			"aria-hidden": true
+		})
+	});
+	const emptyMessage = hasSearchQuery ? emptySearch : emptyItems;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-hidden sm:hidden",
+				children: noRows ? /* @__PURE__ */ jsx("p", {
+					className: "py-8 text-center text-sm text-muted-foreground",
+					children: emptyMessage
+				}) : /* @__PURE__ */ jsx(AnimatePresence, {
+					mode: "wait",
+					custom: direction,
+					initial: false,
+					children: /* @__PURE__ */ jsx(motion.ul, {
+						custom: direction,
+						variants: slideVariants,
+						initial: "enter",
+						animate: "center",
+						exit: "exit",
+						transition: slideTransition,
+						className: "divide-y divide-border",
+						children: pageRows.map(({ item, sourceIndex }) => /* @__PURE__ */ jsx("li", {
+							className: "py-3",
+							children: /* @__PURE__ */ jsx(BasicDetailsCard, {
+								primaryText: /* @__PURE__ */ jsx("span", {
+									className: "block truncate",
+									children: item.key
+								}),
+								secondaryText: item.value,
+								action: deleteButton(item, sourceIndex)
+							})
+						}, `${sourceIndex}-${item.key}`))
+					}, page)
+				})
+			}),
+			/* @__PURE__ */ jsxs(Table, {
+				containerClassName: "hidden sm:block",
+				children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+					/* @__PURE__ */ jsx(TableHead, { children: keyLabel }),
+					/* @__PURE__ */ jsx(TableHead, { children: valueLabel }),
+					/* @__PURE__ */ jsx(TableHead, {
+						className: "w-12 text-right",
+						children: actionLabel
+					})
+				] }) }), /* @__PURE__ */ jsx(TableBody, { children: noRows ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+					colSpan: 3,
+					className: "py-8 text-center text-muted-foreground",
+					children: emptyMessage
+				}) }) : /* @__PURE__ */ jsx(AnimatePresence, {
+					mode: "wait",
+					custom: direction,
+					children: /* @__PURE__ */ jsx(motion.tr, {
+						custom: direction,
+						variants: slideVariants,
+						initial: "enter",
+						animate: "center",
+						exit: "exit",
+						transition: slideTransition,
+						className: "contents",
+						children: pageRows.map(({ item, sourceIndex }) => /* @__PURE__ */ jsxs(TableRow, {
+							className: "group",
+							children: [
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "max-w-[200px] truncate font-medium",
+									children: item.key
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "max-w-[300px] truncate",
+									children: item.value
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "text-right",
+									children: deleteButton(item, sourceIndex, cn("transition-opacity [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0", "group-hover:pointer-events-auto group-hover:opacity-100", "focus-visible:opacity-100"))
+								})
+							]
+						}, `${sourceIndex}-${item.key}`))
+					}, page)
+				}) })]
+			}),
+			showPagination ? /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex justify-end gap-1 px-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "primary",
+					size: "icon",
+					fullWidth: false,
+					"aria-label": "Previous page",
+					disabled: noRows || !hasPrev,
+					onClick: goPrev,
+					children: /* @__PURE__ */ jsx(ChevronLeft, {
+						className: "text-primary",
+						"aria-hidden": true
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "primary",
+					size: "icon",
+					fullWidth: false,
+					"aria-label": "Next page",
+					disabled: noRows || !hasNext,
+					onClick: goNext,
+					children: /* @__PURE__ */ jsx(ChevronRight, {
+						className: "text-primary",
+						"aria-hidden": true
+					})
+				})]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { KeyValueManagerTable };

package/dist/components/key-value-manager/key-value-manager.js

@@ -0,0 +1,111 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import SearchBox from "../search-box/search-box.js";
+import { filterKeyValueRows } from "./key-value-manager.utils.js";
+import { KeyValueManagerAddPopover } from "./key-value-manager-add-popover.js";
+import { KeyValueManagerTable } from "./key-value-manager-table.js";
+import { resolveKeyValueManagerLabels } from "./key-value-manager.props.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+//#region src/components/key-value-manager/key-value-manager.tsx
+function KeyValueManager({ items, meta, onUpdate, maxAllowed, itemsPerPage = 10, labels: labelsProp, className }) {
+	const labels = resolveKeyValueManagerLabels(labelsProp);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [searchOpen, setSearchOpen] = useState(false);
+	const [searchBoxKey, setSearchBoxKey] = useState(0);
+	const toolbarRef = useRef(null);
+	const searchButtonRef = useRef(null);
+	const returnFocusRef = useRef(false);
+	const searchExpanded = searchOpen || searchQuery !== "";
+	useEffect(() => {
+		if (searchOpen) toolbarRef.current?.querySelector("input")?.focus();
+	}, [searchOpen]);
+	useEffect(() => {
+		if (!searchExpanded && returnFocusRef.current) {
+			returnFocusRef.current = false;
+			searchButtonRef.current?.focus();
+		}
+	}, [searchExpanded]);
+	const closeSearch = () => {
+		returnFocusRef.current = true;
+		setSearchOpen(false);
+		setSearchQuery("");
+		setSearchBoxKey((key) => key + 1);
+	};
+	const filteredRows = useMemo(() => filterKeyValueRows(items, searchQuery), [items, searchQuery]);
+	const handleDelete = (sourceIndex) => {
+		onUpdate(items.filter((_, index) => index !== sourceIndex));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-col gap-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: toolbarRef,
+			className: "flex items-center gap-3 max-sm:gap-1",
+			onKeyDown: (e) => {
+				const inToolbar = toolbarRef.current?.contains(e.target);
+				if (e.key === "Escape" && searchOpen && inToolbar) closeSearch();
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", { className: cn("flex-1 sm:hidden", searchExpanded && "hidden") }),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "primary",
+					size: "icon",
+					fullWidth: false,
+					ref: searchButtonRef,
+					"aria-label": labels.search,
+					className: cn("sm:hidden", searchExpanded && "hidden"),
+					onClick: () => setSearchOpen(true),
+					children: /* @__PURE__ */ jsx(Search, {
+						className: "h-4 w-4",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsx(SearchBox, {
+					className: cn("min-w-0 flex-1", !searchExpanded && "max-sm:hidden"),
+					placeholder: labels.search,
+					onSearch: setSearchQuery,
+					onClear: () => setSearchQuery(""),
+					onValueChange: setSearchQuery
+				}, searchBoxKey),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "gray",
+					size: "icon",
+					fullWidth: false,
+					"aria-label": labels.closeSearch,
+					className: cn("shrink-0 sm:hidden", !searchExpanded && "hidden"),
+					onClick: closeSearch,
+					children: /* @__PURE__ */ jsx(X, {
+						className: "h-4 w-4",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsx(KeyValueManagerAddPopover, {
+					items,
+					meta,
+					labels,
+					maxAllowed,
+					onUpdate,
+					triggerClassName: cn(searchExpanded && "max-sm:hidden")
+				})
+			]
+		}), /* @__PURE__ */ jsx(KeyValueManagerTable, {
+			rows: filteredRows,
+			itemsPerPage,
+			hasSearchQuery: searchQuery.trim().length > 0,
+			onDelete: handleDelete,
+			keyLabel: labels.keyLabel,
+			valueLabel: labels.valueLabel,
+			actionLabel: labels.actionLabel,
+			emptyItems: labels.emptyItems,
+			emptySearch: labels.emptySearch
+		})]
+	});
+}
+//#endregion
+export { KeyValueManager };

package/dist/components/key-value-manager/key-value-manager.props.js

@@ -0,0 +1,28 @@
+//#region src/components/key-value-manager/key-value-manager.props.ts
+var STATIC_DEFAULT_LABELS = {
+	add: "Add",
+	closeSearch: "Close search",
+	keyErrorMessage: "Invalid key",
+	valueErrorMessage: "Invalid value",
+	successMessage: "Added successfully",
+	keyLabel: "Key",
+	valueLabel: "Value",
+	actionLabel: "Action",
+	emptyItems: "No items",
+	emptySearch: "No matches",
+	selectPlaceholder: "Select"
+};
+({ ...STATIC_DEFAULT_LABELS }), `${STATIC_DEFAULT_LABELS.keyLabel.toLowerCase()}${STATIC_DEFAULT_LABELS.valueLabel.toLowerCase()}`;
+function resolveKeyValueManagerLabels(labels) {
+	const merged = {
+		...STATIC_DEFAULT_LABELS,
+		...labels
+	};
+	const search = labels?.search ?? `Search ${merged.keyLabel.toLowerCase()} or ${merged.valueLabel.toLowerCase()}`;
+	return {
+		...merged,
+		search
+	};
+}
+//#endregion
+export { resolveKeyValueManagerLabels };

package/dist/components/key-value-manager/key-value-manager.utils.js

@@ -0,0 +1,21 @@
+//#region src/components/key-value-manager/key-value-manager.utils.ts
+function validateField(value, meta) {
+	if (!value.trim()) return false;
+	if (meta?.maxLength != null && value.length > meta.maxLength) return false;
+	if (meta?.options && !meta.options.includes(value)) return false;
+	if (meta?.regex) try {
+		if (!new RegExp(meta.regex, meta.regexFlags).test(value)) return false;
+	} catch {}
+	return true;
+}
+function filterKeyValueRows(items, searchQuery) {
+	const q = searchQuery.trim().toLowerCase();
+	const rows = items.map((item, sourceIndex) => ({
+		item,
+		sourceIndex
+	}));
+	if (!q) return rows;
+	return rows.filter(({ item }) => item.key.toLowerCase().includes(q) || item.value.toLowerCase().includes(q));
+}
+//#endregion
+export { filterKeyValueRows, validateField };

package/dist/components/link/link.js

@@ -0,0 +1,67 @@
+import { cn } from "../../utils/cn.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/link/link.tsx
+var EXTERNAL_PROTOCOL = /^(https?:|mailto:|tel:|sms:|ftp:)/i;
+var PROTOCOL_RELATIVE = /^\/\//;
+function isExternalHref(to) {
+	return EXTERNAL_PROTOCOL.test(to) || PROTOCOL_RELATIVE.test(to);
+}
+var baseClasses = "inline-flex items-center gap-1.5 rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
+var colorClasses = {
+	primary: "px-2 h-8 text-sm font-medium text-primary hover:bg-primary/10",
+	secondary: "px-2 h-8 text-sm font-medium text-secondary hover:bg-secondary/10",
+	error: "px-2 h-8 text-sm font-medium text-error hover:bg-error/10",
+	info: "px-2 h-8 text-sm font-medium text-info hover:bg-info/10",
+	success: "px-2 h-8 text-sm font-medium text-success hover:bg-success/10",
+	warning: "px-2 h-8 text-sm font-medium text-warning hover:bg-warning/10",
+	gray: "px-2 h-8 text-sm font-medium text-gray hover:bg-gray/10"
+};
+var variantClasses = {
+	default: "",
+	ghost: "h-auto hover:bg-transparent p-0"
+};
+var underlineClasses = "relative no-underline after:absolute after:-bottom-0.5 after:left-0 after:h-px after:w-full after:bg-current hover:after:animate-underline-slide";
+function renderIconSlot(icon) {
+	if (icon == null) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex shrink-0",
+		children: icon
+	});
+}
+var Link = React$1.forwardRef(function Link({ to, params, search, linkComponent, color = "primary", variant = "default", underline = false, startIcon, endIcon, className, children, ...rest }, ref) {
+	const merged = cn(baseClasses, color != null && colorClasses[color], variantClasses[variant], underline && underlineClasses, className);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		renderIconSlot(startIcon),
+		children,
+		renderIconSlot(endIcon)
+	] });
+	if (isExternalHref(to)) return /* @__PURE__ */ jsx("a", {
+		...rest,
+		ref,
+		href: to,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: merged,
+		children: content
+	});
+	if (linkComponent) return /* @__PURE__ */ jsx(linkComponent, {
+		...rest,
+		ref,
+		to,
+		params,
+		search,
+		className: merged,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("a", {
+		...rest,
+		ref,
+		href: to,
+		className: merged,
+		children: content
+	});
+});
+Link.displayName = "Link";
+//#endregion
+export { Link };

package/dist/components/list/dropdown-list-item.js

@@ -0,0 +1,60 @@
+import { cn } from "../../utils/cn.js";
+import { DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from "../../core/animate-ui/components/radix/dropdown-menu.js";
+import { getItemClassName, getItemStyles, renderItemContent } from "./list-item.utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/list/dropdown-list-item.tsx
+/**
+* Leaf menu row. With `href` plus an adapter the content is wrapped in a real link so
+* right-click / middle-click / modifier-click work, while Radix keeps its keyboard and
+* focus semantics on the surrounding menu item. Falls back to the click-only row
+* otherwise.
+*
+* The link is nested inside the menu item rather than composed via `asChild`, because
+* the underlying animate-ui primitive already consumes `asChild` for its motion
+* wrapper. This mirrors how `Sidebar`'s collapsed flyout renders its links.
+*/
+function DropdownLeafItem({ item, itemClassName, linkComponent: LinkComponent }) {
+	const itemStyles = getItemStyles(item);
+	if (item.href && LinkComponent) return /* @__PURE__ */ jsx(DropdownMenuItem, {
+		className: "p-0",
+		onClick: item.onClick,
+		children: /* @__PURE__ */ jsx(LinkComponent, {
+			to: item.href,
+			className: cn("gap-1.5 cursor-pointer", getItemClassName(item, itemClassName)),
+			style: itemStyles.style,
+			"aria-current": item.isSelected ? "page" : void 0,
+			children: renderItemContent(item)
+		})
+	});
+	return /* @__PURE__ */ jsx(DropdownMenuItem, {
+		className: cn("gap-1.5", getItemClassName(item, itemClassName)),
+		style: itemStyles.style,
+		onClick: item.onClick,
+		children: renderItemContent(item)
+	});
+}
+function DropdownListItem({ item, itemClassName, linkComponent }) {
+	if (item.items && item.items.length > 0) {
+		const itemStyles = getItemStyles(item);
+		return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsx(DropdownMenuSubTrigger, {
+			className: cn("gap-1.5", getItemClassName(item, itemClassName)),
+			style: itemStyles.style,
+			children: renderItemContent(item)
+		}), /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+			sideOffset: 4,
+			className: "z-[60] min-w-[8rem]",
+			children: item.items?.map((subItem) => /* @__PURE__ */ jsx(DropdownLeafItem, {
+				item: subItem,
+				itemClassName,
+				linkComponent
+			}, subItem.id))
+		})] });
+	}
+	return /* @__PURE__ */ jsx(DropdownLeafItem, {
+		item,
+		itemClassName,
+		linkComponent
+	});
+}
+//#endregion
+export { DropdownListItem as default };