@espressif/dashboard-ui-components 1.10.0 → 1.11.0

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

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