@espressif/dashboard-ui-components 1.9.1 → 1.11.0

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

@@ -0,0 +1,76 @@
+import { cn } from "../../utils/cn.js";
+import { isPresetColor, resolveColor } from "../../utils/color.js";
+import { LIST_CLASS_NAMES } from "./list.props.js";
+import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/list/list-item.utils.tsx
+var listItemBase = "min-h-[var(--menu-item-height)] w-full scroll-mt-[calc(var(--spacing)*1.5)] px-[calc(var(--spacing)*2.5)] py-[calc(var(--spacing)*1.5)] my-[calc(var(--spacing)*0.5)] text-sm leading-[var(--tw-leading,var(--text-sm--line-height))] select-none rounded-[10px] items-center flex relative no-underline";
+/**
+* Interaction classes shared by the `<button>` and link renderings of a row, so a
+* linked item is visually identical to a clickable one.
+*/
+var listItemInteractive = "w-full text-left cursor-pointer hover:bg-accent focus:bg-accent focus:outline-none";
+var presetColorStyles = {
+	primary: "text-primary",
+	secondary: "text-secondary-foreground",
+	error: "text-error",
+	info: "text-info",
+	success: "text-success",
+	warning: "text-warning",
+	disabled: "text-disabled",
+	gray: "text-gray",
+	mist: "text-mist-foreground"
+};
+var sizeStyles = {
+	sm: "text-xs py-1 px-2",
+	default: "text-sm py-1.5 px-2",
+	lg: "text-base py-2 px-3"
+};
+function isListItem(item) {
+	return typeof item === "object" && item !== null && !React.isValidElement(item) && "id" in item && "label" in item && typeof item.id === "string" && typeof item.label === "string";
+}
+function getItemStyles(item) {
+	const color = item.color || "default";
+	const size = item.size || "default";
+	const isSelected = item.isSelected || false;
+	if (color === "default" || isPresetColor(color) && presetColorStyles[color]) return { className: cn(LIST_CLASS_NAMES.item, listItemBase, color === "default" ? "" : presetColorStyles[color], sizeStyles[size], isSelected && "bg-accent font-medium") };
+	const resolved = resolveColor(color, "text");
+	return {
+		className: cn(LIST_CLASS_NAMES.item, listItemBase, sizeStyles[size], isSelected && "bg-accent font-medium"),
+		style: resolved.style
+	};
+}
+/**
+* Class string for a non-interactive row (dropdown items, submenu triggers).
+*
+* Caller-supplied classes come last — list-wide `itemClassName` first, then the row's own
+* `className` — so they win over the component's defaults under tailwind-merge.
+*/
+function getItemClassName(item, itemClassName) {
+	return cn(getItemStyles(item).className, itemClassName, item.className);
+}
+/**
+* Class string for an interactive standard-list row, used by both the `<button>` and the
+* link rendering. Ordering follows {@link getItemClassName}.
+*/
+function getInteractiveItemClassName(item, itemClassName) {
+	return cn(getItemStyles(item).className, listItemInteractive, itemClassName, item.className);
+}
+function renderItemContent(item) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		item.startIcon && /* @__PURE__ */ jsx("span", {
+			className: "mr-2 flex-shrink-0",
+			children: item.startIcon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "flex-1",
+			children: item.label
+		}),
+		item.endIcon && /* @__PURE__ */ jsx("span", {
+			className: "ml-2 flex-shrink-0",
+			children: item.endIcon
+		})
+	] });
+}
+//#endregion
+export { getInteractiveItemClassName, getItemClassName, getItemStyles, isListItem, renderItemContent, sizeStyles };

package/dist/components/list/list.js

@@ -0,0 +1,49 @@
+import { cn } from "../../utils/cn.js";
+import { DropdownMenuLabel, DropdownMenuSeparator } from "../../core/animate-ui/components/radix/dropdown-menu.js";
+import { LIST_CLASS_NAMES } from "./list.props.js";
+import { isListItem } from "./list-item.utils.js";
+import StandardListItem from "./standard-list-item.js";
+import DropdownListItem from "./dropdown-list-item.js";
+import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/list/list.tsx
+var groupLabelBase = "text-sm font-normal truncate overflow-ellipsis font-inter text-gray-400 flex items-center gap-2";
+function List({ items, role = "list", showSeparators = true, className, itemClassName, separatorClassName, linkComponent }) {
+	const shouldShowSeparators = showSeparators && items.length > 1;
+	const isDropdown = role === "dropdown-list";
+	const ItemComponent = isDropdown ? DropdownListItem : StandardListItem;
+	return /* @__PURE__ */ jsx(isDropdown ? React.Fragment : ({ children }) => /* @__PURE__ */ jsx("div", {
+		className: cn(LIST_CLASS_NAMES.container, "flex flex-col", className),
+		children
+	}), { children: items.map((group, groupIndex) => {
+		const isLastGroup = groupIndex === items.length - 1;
+		const labelContent = group.label && /* @__PURE__ */ jsxs(Fragment$1, { children: [group.icon && /* @__PURE__ */ jsx("span", {
+			className: "flex-shrink-0",
+			children: group.icon
+		}), /* @__PURE__ */ jsx("span", { children: group.label })] });
+		const labelClassName = cn(LIST_CLASS_NAMES.groupLabel, groupLabelBase, !isDropdown && "px-2.5 py-1.5", group.labelClassName);
+		return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+			group.label && (isDropdown ? /* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: labelClassName,
+				children: labelContent
+			}) : /* @__PURE__ */ jsx("div", {
+				className: labelClassName,
+				children: labelContent
+			})),
+			group.items.map((item, index) => {
+				if (isListItem(item)) return /* @__PURE__ */ jsx(ItemComponent, {
+					item,
+					itemClassName,
+					linkComponent
+				}, item.id);
+				else return /* @__PURE__ */ jsx("div", {
+					className: cn(LIST_CLASS_NAMES.customItem, "px-2.5 py-1.5", itemClassName),
+					children: item
+				}, index);
+			}),
+			shouldShowSeparators && !isLastGroup && (isDropdown ? /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: cn(LIST_CLASS_NAMES.separator, separatorClassName) }) : /* @__PURE__ */ jsx("hr", { className: cn(LIST_CLASS_NAMES.separator, "my-1 border-border", separatorClassName) }))
+		] }, group.id);
+	}) });
+}
+//#endregion
+export { List as default };

package/dist/components/list/list.props.js

@@ -0,0 +1,27 @@
+//#region src/components/list/list.props.ts
+/**
+* Stable class hooks on every rendered part of a `List`, so consumers can target them
+* from Tailwind arbitrary variants (`[&_.espd-list-item]:rounded-none`) or plain CSS
+* without depending on the component's internal utility classes.
+*
+* These are contract: they are always present, and they are emitted *before* any
+* caller-supplied `className`, so caller utilities win under tailwind-merge.
+*
+* The `espd-` prefix is required, not cosmetic: an unprefixed `list-item` is a real
+* Tailwind `display` utility, so `twMerge` would drop it as soon as the component added
+* `flex` — and `list-*` is Tailwind's list-style namespace generally.
+*/
+var LIST_CLASS_NAMES = {
+	/** Flex column wrapping every group. Standard (`role="list"`) rendering only. */
+	container: "espd-list",
+	/** Heading rendered for a {@link ListGroup.label}. */
+	groupLabel: "espd-list-group-label",
+	/** Every row rendered from a {@link ListItem}, in both roles and at any nesting depth. */
+	item: "espd-list-item",
+	/** Wrapper around a raw `ReactNode` passed in {@link ListGroup.items}. */
+	customItem: "espd-list-custom-item",
+	/** Divider drawn between groups. */
+	separator: "espd-list-separator"
+};
+//#endregion
+export { LIST_CLASS_NAMES };

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

@@ -0,0 +1,66 @@
+import { cn } from "../../utils/cn.js";
+import { getInteractiveItemClassName, getItemStyles, renderItemContent } from "./list-item.utils.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../core/collapsible.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+//#region src/components/list/standard-list-item.tsx
+/**
+* Leaf row: a real link when the item declares `href` and an adapter is available,
+* otherwise the plain click button. Both share `getInteractiveItemClassName`, so the
+* two renderings are visually identical.
+*/
+function StandardLeafItem({ item, itemClassName, linkComponent: LinkComponent }) {
+	const itemStyles = getItemStyles(item);
+	const className = getInteractiveItemClassName(item, itemClassName);
+	if (item.href && LinkComponent) return /* @__PURE__ */ jsx(LinkComponent, {
+		to: item.href,
+		className,
+		style: itemStyles.style,
+		"aria-current": item.isSelected ? "page" : void 0,
+		children: renderItemContent(item)
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className,
+		style: itemStyles.style,
+		onClick: item.onClick,
+		children: renderItemContent(item)
+	});
+}
+function StandardListItem({ item, itemClassName, linkComponent }) {
+	if (item.items && item.items.length > 0) {
+		const itemStyles = getItemStyles(item);
+		return /* @__PURE__ */ jsxs(Collapsible, {
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: cn("group", getInteractiveItemClassName(item, itemClassName)),
+					style: itemStyles.style,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "flex flex-1 items-center",
+						children: renderItemContent(item)
+					}), /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180" })]
+				})
+			}), /* @__PURE__ */ jsx(CollapsibleContent, {
+				className: "w-full",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pl-4 w-full",
+					children: item.items?.map((subItem) => /* @__PURE__ */ jsx(StandardLeafItem, {
+						item: subItem,
+						itemClassName,
+						linkComponent
+					}, subItem.id))
+				})
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx(StandardLeafItem, {
+		item,
+		itemClassName,
+		linkComponent
+	});
+}
+//#endregion
+export { StandardListItem as default };

package/dist/components/list-details/list-details-item-button.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+//#region src/components/list-details/list-details-item-button.tsx
+/** One item of the vertical title list: the side panel, or the small-screen dropdown. */
+function ListDetailsItemButton({ item, isSelected, onSelect, showDefaultEndIcon }) {
+	const defaultEndIcon = showDefaultEndIcon ? /* @__PURE__ */ jsx(ChevronRight, {
+		className: "size-4",
+		"aria-hidden": true
+	}) : null;
+	const endIcon = item.endIcon ?? defaultEndIcon;
+	if (typeof item.title !== "string") return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => onSelect(item.id),
+		"aria-pressed": isSelected,
+		className: cn("flex w-full items-center gap-2 rounded-md px-3 py-2 text-left", "border-0 bg-transparent shadow-none", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 flex-1 items-center",
+			children: item.title
+		}), endIcon != null && /* @__PURE__ */ jsx("span", {
+			className: "shrink-0",
+			children: endIcon
+		})]
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: isSelected ? "outline" : "ghost",
+		color: isSelected ? "primary" : "gray",
+		onClick: () => onSelect(item.id),
+		"aria-pressed": isSelected,
+		className: !isSelected ? "border border-transparent" : "",
+		endIcon: endIcon ?? void 0,
+		hideRingOnHover: true,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 flex-1 items-center",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: item.title
+			})
+		})
+	});
+}
+//#endregion
+export { ListDetailsItemButton };

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

@@ -0,0 +1,112 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { ScrollArea } from "../../core/scroll-area.js";
+import { ListDetailsItemButton } from "./list-details-item-button.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../core/popover.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/components/list-details/list-details-item-dropdown.tsx
+function focusSelectedItem(list) {
+	list?.querySelector("[aria-pressed=\"true\"]")?.focus();
+}
+/**
+* The item picker on small screens: previous/next arrows around a menu button
+* showing the selected title. The menu lists every item, with the `footer`
+* (e.g. "Load more") at its bottom, as under the side panel.
+*/
+function ListDetailsItemDropdown({ data, selectedId, onSelect, footer, labels, className }) {
+	const [open, setOpen] = useState(false);
+	const listRef = useRef(null);
+	const selectedIndex = data.findIndex((item) => item.id === selectedId);
+	const selectedItem = data[selectedIndex];
+	const previousItem = selectedIndex > 0 ? data[selectedIndex - 1] : void 0;
+	const nextItem = selectedIndex >= 0 ? data[selectedIndex + 1] : void 0;
+	const handleSelect = (itemId) => {
+		onSelect(itemId);
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-slot": "list-details-item-dropdown",
+				className: cn("flex items-center gap-2", className),
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "icon",
+						variant: "outline",
+						color: "gray",
+						"aria-label": labels.previousItem,
+						disabled: previousItem == null,
+						onClick: () => previousItem && onSelect(previousItem.id),
+						children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true })
+					}),
+					/* @__PURE__ */ jsx(PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							color: "gray",
+							className: "min-w-0 flex-1 justify-between px-3",
+							endIcon: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true }),
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "flex min-w-0 flex-1 items-center",
+								children: [
+									/* @__PURE__ */ jsxs("span", {
+										className: "sr-only",
+										children: [labels.chooseItem, ":"]
+									}),
+									" ",
+									typeof selectedItem?.title === "string" ? /* @__PURE__ */ jsx("span", {
+										className: "min-w-0 truncate",
+										children: selectedItem.title
+									}) : selectedItem?.title
+								]
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "icon",
+						variant: "outline",
+						color: "gray",
+						"aria-label": labels.nextItem,
+						disabled: nextItem == null,
+						onClick: () => nextItem && onSelect(nextItem.id),
+						children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true })
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			className: "flex w-[var(--radix-popover-trigger-width)] max-h-[min(24rem,var(--radix-popover-content-available-height))] flex-col gap-2 p-2",
+			onOpenAutoFocus: (event) => {
+				event.preventDefault();
+				focusSelectedItem(listRef.current);
+			},
+			children: [/* @__PURE__ */ jsx(ScrollArea, {
+				className: "min-h-0 flex-1",
+				children: /* @__PURE__ */ jsx("div", {
+					ref: listRef,
+					className: "flex flex-col gap-2",
+					children: data.map((item) => /* @__PURE__ */ jsx(ListDetailsItemButton, {
+						item,
+						isSelected: item.id === selectedId,
+						onSelect: handleSelect,
+						showDefaultEndIcon: false
+					}, item.id))
+				})
+			}), footer != null ? /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: footer
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { ListDetailsItemDropdown };

package/dist/components/list-details/list-details-item-strip.js

@@ -0,0 +1,125 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { useScrollOverflow } from "../../core/hooks/use-scroll-overflow.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/components/list-details/list-details-item-strip.tsx
+/** Width of the edge fade, and the margin kept beside the selected item when it is scrolled into view. */
+var EDGE_SIZE = 24;
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function fadeMask(start, end) {
+	if (!start && !end) return {};
+	const image = `linear-gradient(to right, ${start ? `transparent, #000 ${EDGE_SIZE}px` : "#000"}, ${end ? `#000 calc(100% - ${EDGE_SIZE}px), transparent` : "#000"})`;
+	return {
+		maskImage: image,
+		WebkitMaskImage: image
+	};
+}
+var arrowButtonClass = "inline-flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-background text-muted-foreground transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-40";
+/**
+* The item list on small screens: a single scrollable row with arrow buttons,
+* shown above the details instead of the side panel.
+*/
+function ListDetailsItemStrip({ data, selectedId, onSelect, className }) {
+	const scrollerRef = useRef(null);
+	const overflow = useScrollOverflow(scrollerRef, { getContent: (scroller) => scroller.firstElementChild });
+	const hasOverflow = overflow.start || overflow.end;
+	const mountedRef = useRef(false);
+	useEffect(() => {
+		const scroller = scrollerRef.current;
+		const selected = scroller?.querySelector("[aria-pressed=\"true\"]");
+		if (!scroller || !selected) return;
+		const scrollerRect = scroller.getBoundingClientRect();
+		if (scrollerRect.width === 0) return;
+		const itemRect = selected.getBoundingClientRect();
+		const overStart = itemRect.left - (scrollerRect.left + EDGE_SIZE);
+		const overEnd = itemRect.right - (scrollerRect.right - EDGE_SIZE);
+		let delta = 0;
+		if (overStart < 0) delta = overStart;
+		else if (overEnd > 0) delta = Math.min(overEnd, overStart);
+		const instant = !mountedRef.current || prefersReducedMotion();
+		mountedRef.current = true;
+		if (Math.abs(delta) >= 1) scroller.scrollBy({
+			left: delta,
+			behavior: instant ? "auto" : "smooth"
+		});
+	}, [selectedId, hasOverflow]);
+	const scrollByPage = (direction) => {
+		const scroller = scrollerRef.current;
+		if (!scroller) return;
+		scroller.scrollBy({
+			left: direction * scroller.clientWidth * .8,
+			behavior: prefersReducedMotion() ? "auto" : "smooth"
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "list-details-item-strip",
+		className: cn("flex items-center gap-1", className),
+		children: [
+			hasOverflow && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				"aria-hidden": true,
+				disabled: !overflow.start,
+				className: arrowButtonClass,
+				onClick: () => scrollByPage(-1),
+				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollerRef,
+				className: "min-w-0 flex-1 overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+				style: fadeMask(overflow.start, overflow.end),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex w-max gap-2 p-1",
+					children: data.map((item) => {
+						const isSelected = selectedId === item.id;
+						if (typeof item.title !== "string") return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onSelect(item.id),
+							"aria-pressed": isSelected,
+							className: cn("flex shrink-0 items-center gap-2 rounded-md px-3 py-2 text-left", "border-0 bg-transparent shadow-none", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "flex items-center",
+								children: item.title
+							}), item.endIcon != null && /* @__PURE__ */ jsx("span", {
+								className: "shrink-0",
+								children: item.endIcon
+							})]
+						}, item.id);
+						return /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							fullWidth: false,
+							variant: isSelected ? "outline" : "ghost",
+							color: isSelected ? "primary" : "gray",
+							onClick: () => onSelect(item.id),
+							"aria-pressed": isSelected,
+							className: cn("shrink-0", !isSelected && "border border-transparent"),
+							endIcon: item.endIcon,
+							hideRingOnHover: true,
+							children: /* @__PURE__ */ jsx("span", {
+								className: "max-w-48 truncate",
+								title: item.title,
+								children: item.title
+							})
+						}, item.id);
+					})
+				})
+			}),
+			hasOverflow && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				"aria-hidden": true,
+				disabled: !overflow.end,
+				className: arrowButtonClass,
+				onClick: () => scrollByPage(1),
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+			})
+		]
+	});
+}
+//#endregion
+export { ListDetailsItemStrip };

package/dist/components/list-details/list-details.js

@@ -0,0 +1,148 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { SectionCard } from "../cards/section-card.js";
+import { ScrollArea } from "../../core/scroll-area.js";
+import { ListDetailsItemButton } from "./list-details-item-button.js";
+import { ListDetailsItemDropdown } from "./list-details-item-dropdown.js";
+import { ListDetailsItemStrip } from "./list-details-item-strip.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/list-details/list-details.tsx
+var DEFAULT_LABELS = {
+	previousItem: "Previous item",
+	nextItem: "Next item",
+	chooseItem: "Choose item"
+};
+var panelColSpanClass = {
+	1: "md:col-span-1",
+	2: "md:col-span-2",
+	3: "md:col-span-3",
+	4: "md:col-span-4",
+	5: "md:col-span-5",
+	6: "md:col-span-6",
+	7: "md:col-span-7",
+	8: "md:col-span-8",
+	9: "md:col-span-9",
+	10: "md:col-span-10",
+	12: "md:col-span-12"
+};
+var detailsColSpanClass = {
+	1: "md:col-span-1",
+	2: "md:col-span-2",
+	3: "md:col-span-3",
+	4: "md:col-span-4",
+	5: "md:col-span-5",
+	6: "md:col-span-6",
+	7: "md:col-span-7",
+	8: "md:col-span-8",
+	9: "md:col-span-9",
+	10: "md:col-span-10",
+	11: "md:col-span-11",
+	12: "md:col-span-12"
+};
+function pickSelectedId({ data, controlledValue, currentSelectedId }) {
+	const firstId = data[0]?.id;
+	if (firstId == null) return void 0;
+	if (controlledValue !== void 0) return data.some((item) => item.id === controlledValue) ? controlledValue : firstId;
+	if (currentSelectedId != null && data.some((item) => item.id === currentSelectedId)) return currentSelectedId;
+	return firstId;
+}
+function ListDetails({ value, onSelect, data, height, className, titleListPanelColumnWidth = 4, footer, unmountOnExit = false, variant = "outline", color = "mist", size = "default", mobileNavigation = "dropdown", labels }) {
+	const [selectedId, setSelectedId] = useState(() => pickSelectedId({
+		data,
+		controlledValue: value
+	}));
+	const selectedItem = useMemo(() => data.find((item) => item.id === selectedId), [data, selectedId]);
+	useEffect(() => {
+		const nextSelectedId = pickSelectedId({
+			data,
+			controlledValue: value,
+			currentSelectedId: selectedId
+		});
+		if (nextSelectedId !== selectedId) setSelectedId(nextSelectedId);
+	}, [
+		data,
+		selectedId,
+		value
+	]);
+	const detailsColumnSpan = 12 - titleListPanelColumnWidth;
+	const detailsColClass = detailsColumnSpan > 0 ? detailsColSpanClass[detailsColumnSpan] : "hidden";
+	const isFixedHeight = height != null;
+	const cardStyle = isFixedHeight ? { height } : void 0;
+	const handleSelect = (itemId) => {
+		if (itemId === selectedId) return;
+		setSelectedId(itemId);
+		onSelect?.(itemId);
+	};
+	const detailsInner = unmountOnExit ? selectedItem?.details ?? null : data.map((item) => {
+		const isSelected = selectedId === item.id;
+		return /* @__PURE__ */ jsx("div", {
+			hidden: !isSelected,
+			"aria-hidden": !isSelected,
+			className: cn(!isSelected && "hidden"),
+			children: item.details
+		}, item.id);
+	});
+	const detailsContent = isFixedHeight ? /* @__PURE__ */ jsx(ScrollArea, {
+		className: "h-full",
+		children: detailsInner
+	}) : detailsInner;
+	return /* @__PURE__ */ jsx(SectionCard, {
+		allowCollapse: false,
+		defaultOpen: true,
+		variant,
+		color,
+		size,
+		className,
+		style: cardStyle,
+		fillHeight: isFixedHeight,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("list-details-wrapper", isFixedHeight && "h-full min-h-0"),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("grid grid-cols-1 gap-4 md:grid-cols-12", isFixedHeight ? "h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] md:grid-rows-[minmax(0,1fr)]" : "md:min-h-[16rem]"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cn("items-list-wrapper flex min-h-0 flex-col gap-3", isFixedHeight && "md:h-full", panelColSpanClass[titleListPanelColumnWidth]),
+					children: [
+						mobileNavigation === "strip" ? /* @__PURE__ */ jsx(ListDetailsItemStrip, {
+							data,
+							selectedId,
+							onSelect: handleSelect,
+							className: "md:hidden"
+						}) : /* @__PURE__ */ jsx(ListDetailsItemDropdown, {
+							data,
+							selectedId,
+							onSelect: handleSelect,
+							footer,
+							labels: {
+								...DEFAULT_LABELS,
+								...labels
+							},
+							className: "md:hidden"
+						}),
+						/* @__PURE__ */ jsx(ScrollArea, {
+							className: "items-list-container hidden min-h-0 flex-1 rounded-md border border-border md:block",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "flex flex-col gap-2 p-2",
+								children: data.map((item) => /* @__PURE__ */ jsx(ListDetailsItemButton, {
+									item,
+									isSelected: selectedId === item.id,
+									onSelect: handleSelect,
+									showDefaultEndIcon: true
+								}, item.id))
+							})
+						}),
+						footer != null ? /* @__PURE__ */ jsx("div", {
+							className: "items-list-footer hidden shrink-0 md:block",
+							children: footer
+						}) : null
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn("item-details-panel min-w-0", isFixedHeight && "h-full min-h-0", detailsColClass),
+					children: detailsContent
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { ListDetails };