@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { e as SidebarProps$1 } from '../../types-CkXflqg7.js';
+export { S as SidebarEndActionConfig, a as SidebarGroupConfig, b as SidebarItemConfig, c as SidebarLinkComponentProps, d as SidebarNavEntry, f as SidebarTopLevelLinkConfig, i as isSidebarGroup } from '../../types-CkXflqg7.js';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Transition } from 'motion/react';
+import { a as Button } from '../../button-BK-DIR_L.js';
+import { I as Input } from '../../input-CYI1hhGc.js';
+import { Separator } from '../separator/index.js';
+import { T as TooltipContent } from '../../tooltip-C0bYa8a3.js';
+import '../../style-axes-DSQ2DGc5.js';
+import '../../index-BQANnKs9.js';
+import '@radix-ui/react-separator';
+import '../../slot-DGErA9zi.js';
+
+declare function Sidebar$1({ items, currentPath, header, headerHeight, footer, linkComponent: LinkComponent, collapsible, variant, focusActiveGroup, density, flyoutRadius, flyoutElevation, beforeContent, headerClassName, className, mobileClassName, id, onClick, }: SidebarProps$1): React.JSX.Element;
+
+type SidebarContextProps = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare const useSidebar: () => SidebarContextProps;
+type SidebarProviderProps = React.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: SidebarProviderProps): React.JSX.Element;
+type SidebarProps = React.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+    containerClassName?: string;
+    /** Extra classes for the mobile sheet's panel (`SheetContent`). */
+    mobileClassName?: string;
+    animateOnHover?: boolean;
+    transition?: Transition;
+};
+declare function Sidebar({ side, variant, collapsible, className, children, animateOnHover, containerClassName, mobileClassName, transition, ...props }: SidebarProps): React.JSX.Element;
+type SidebarTriggerProps = React.ComponentProps<typeof Button>;
+declare function SidebarTrigger({ className, onClick, ...props }: SidebarTriggerProps): React.JSX.Element;
+type SidebarRailProps = React.ComponentProps<'button'>;
+declare function SidebarRail({ className, ...props }: SidebarRailProps): React.JSX.Element;
+type SidebarInsetProps = React.ComponentProps<'main'>;
+declare function SidebarInset({ className, ...props }: SidebarInsetProps): React.JSX.Element;
+type SidebarInputProps = React.ComponentProps<typeof Input>;
+declare function SidebarInput({ className, ...props }: SidebarInputProps): React.JSX.Element;
+type SidebarHeaderProps = React.ComponentProps<'div'>;
+declare function SidebarHeader({ className, ...props }: SidebarHeaderProps): React.JSX.Element;
+type SidebarFooterProps = React.ComponentProps<'div'>;
+declare function SidebarFooter({ className, ...props }: SidebarFooterProps): React.JSX.Element;
+type SidebarSeparatorProps = React.ComponentProps<typeof Separator>;
+declare function SidebarSeparator({ className, ...props }: SidebarSeparatorProps): React.JSX.Element;
+type SidebarContentProps = React.ComponentProps<'div'>;
+declare function SidebarContent({ className, children, ...props }: SidebarContentProps): React.JSX.Element;
+type SidebarGroupProps = React.ComponentProps<'div'>;
+declare function SidebarGroup({ className, ...props }: SidebarGroupProps): React.JSX.Element;
+type SidebarGroupLabelProps = React.ComponentProps<'div'> & {
+    asChild?: boolean;
+};
+declare function SidebarGroupLabel({ className, asChild, ...props }: SidebarGroupLabelProps): React.JSX.Element;
+type SidebarGroupActionProps = React.ComponentProps<'button'> & {
+    asChild?: boolean;
+};
+declare function SidebarGroupAction({ className, asChild, ...props }: SidebarGroupActionProps): React.JSX.Element;
+type SidebarGroupContentProps = React.ComponentProps<'div'>;
+declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): React.JSX.Element;
+type SidebarMenuProps = React.ComponentProps<'ul'>;
+declare function SidebarMenu({ className, ...props }: SidebarMenuProps): React.JSX.Element;
+type SidebarMenuItemProps = React.ComponentProps<'li'>;
+declare function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps): React.JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SidebarMenuButtonProps = React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>;
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: SidebarMenuButtonProps): React.JSX.Element;
+type SidebarMenuActionProps = React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+};
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: SidebarMenuActionProps): React.JSX.Element;
+type SidebarMenuBadgeProps = React.ComponentProps<'div'>;
+declare function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps): React.JSX.Element;
+type SidebarMenuSkeletonProps = React.ComponentProps<'div'> & {
+    showIcon?: boolean;
+};
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: SidebarMenuSkeletonProps): React.JSX.Element;
+type SidebarMenuSubProps = React.ComponentProps<'ul'>;
+declare function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps): React.JSX.Element;
+type SidebarMenuSubItemProps = React.ComponentProps<'li'>;
+declare function SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps): React.JSX.Element;
+type SidebarMenuSubButtonProps = React.ComponentProps<'a'> & {
+    asChild?: boolean;
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+};
+declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: SidebarMenuSubButtonProps): React.JSX.Element;
+
+export { Sidebar$1 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, Sidebar as SidebarPrimitive, SidebarProps$1 as SidebarProps, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };

package/dist/components/sidebar/index.js

@@ -0,0 +1,4 @@
+import { Sidebar as Sidebar$1, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "../../core/animate-ui/components/radix/sidebar.js";
+import { isSidebarGroup } from "./types.js";
+import Sidebar from "./sidebar.js";
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, Sidebar$1 as SidebarPrimitive, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, isSidebarGroup, useSidebar };

package/dist/components/sidebar/sidebar.js

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { densityStyle } from "../../utils/style-axes.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../core/animate-ui/components/radix/dropdown-menu.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../core/collapsible.js";
 import Tooltip from "../tooltip/tooltip.js";
@@ -105,7 +106,7 @@ function GroupMenuItems({ group, isSelected, linkComponent: LinkComponent, onIte
 * Collapsed sidebar (icon-only): group rendered as a single icon with flyout Menu.
 * Uses controlled DropdownMenu so clicking an item closes the menu.
 */
-function CollapsedSidebarGroup({ group, isSelected, linkComponent: LinkComponent }) {
+function CollapsedSidebarGroup({ group, isSelected, linkComponent: LinkComponent, flyoutRadius, flyoutElevation }) {
 	const [open, setOpen] = useState(false);
 	const pickedWithPointer = useRef(false);
 	return /* @__PURE__ */ jsx(SidebarGroup, {
@@ -130,7 +131,9 @@ function CollapsedSidebarGroup({ group, isSelected, linkComponent: LinkComponent
 					side: "right",
 					align: "start",
 					sideOffset: 8,
-					className: "z-50 max-w-xs rounded-2xl shadow-lg will-change-[opacity,transform] py-1.5 overflow-visible select-none",
+					radius: flyoutRadius,
+					elevation: flyoutElevation,
+					className: "z-50 max-w-xs rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-2xl)))] shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))] will-change-[opacity,transform] py-1.5 select-none",
 					style: { minWidth: 180 },
 					onCloseAutoFocus: (e) => {
 						if (pickedWithPointer.current) e.preventDefault();
@@ -149,7 +152,7 @@ function CollapsedSidebarGroup({ group, isSelected, linkComponent: LinkComponent
 		})
 	});
 }
-var groupHeaderClass = cn("flex w-full items-center gap-2 rounded-md p-2 h-7 overflow-hidden font-medium text-sidebar-foreground hover:bg-sidebar-accent/50 transition-colors cursor-pointer", rowIconClass);
+var groupHeaderClass = cn("flex w-full items-center gap-2 rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] p-2 h-[var(--espd-sidebar-row-height-sm,calc(var(--spacing)*7))] overflow-hidden font-medium text-sidebar-foreground hover:bg-sidebar-accent/50 transition-colors cursor-pointer", rowIconClass);
 /**
 * Expanded sidebar group with inline collapsible items.
 * Clicking the group header toggles expand/collapse. No flyout menus here —
@@ -195,7 +198,7 @@ function TopLevelLinkRow({ item, isCollapsed, isMobile, renderMenuItem }) {
 		})
 	});
 }
-function Sidebar({ items, currentPath, header, headerHeight, footer, linkComponent: LinkComponent, collapsible = "icon", variant = "sidebar", focusActiveGroup = false }) {
+function Sidebar({ items, currentPath, header, headerHeight, footer, linkComponent: LinkComponent, collapsible = "icon", variant = "sidebar", focusActiveGroup = false, density, flyoutRadius, flyoutElevation, beforeContent, headerClassName, className, mobileClassName, id, onClick }) {
 	const { state, isMobile, setOpenMobile } = useSidebar();
 	const isCollapsed = state === "collapsed";
 	/** On mobile the sidebar is a sheet overlaying the page: navigating away should dismiss it. */
@@ -243,57 +246,62 @@ function Sidebar({ items, currentPath, header, headerHeight, footer, linkCompone
 	* Segment-aware so sibling routes with a shared prefix stay independent: at
 	* `/components/input-password` only that row lights up, not `/components/input` too.
 	* A nested route still selects its parent row (`/nodes/42` selects `/nodes`).
+	* A row for the root (`/`, a Home link) is selected only on the root: every
+	* path starts with it, so as a prefix it would light up beside every other row.
 	*/
 	const isSelected = (path) => {
-		return isPathPrefixOf(path, currentPath);
+		return path === "/" ? currentPath === "/" : isPathPrefixOf(path, currentPath);
 	};
 	const renderMenuItem = (item) => {
 		const EndActionIcon = item.endAction?.icon;
 		const active = isSelected(item.path);
-		return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsx(SidebarMenuButton, {
-			asChild: true,
-			isActive: active,
-			size: "sm",
-			tooltip: item.label,
-			className: cn(rowIconClass, active && "bg-sidebar-accent text-sidebar-accent-foreground", item.endAction && "pr-8"),
-			children: /* @__PURE__ */ jsx(LinkComponent, {
-				to: item.path,
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "contents",
-					onClick: closeMobileSidebar,
-					children: [/* @__PURE__ */ jsx(ItemIcon, {
-						icon: item.icon,
-						active
-					}), /* @__PURE__ */ jsx("span", {
-						className: cn("whitespace-nowrap max-w-[168px] truncate", active ? "font-semibold text-sidebar-accent-foreground" : "font-medium text-sidebar-foreground"),
-						style: rowFontStyle,
-						children: item.label
-					})]
-				})
-			})
-		}), item.endAction && EndActionIcon && /* @__PURE__ */ jsx(Tooltip, {
-			content: item.endAction.tooltip,
-			side: "right",
-			sideOffset: 8,
-			children: /* @__PURE__ */ jsx(SidebarMenuAction, {
+		return /* @__PURE__ */ jsxs(SidebarMenuItem, {
+			onClick: closeMobileSidebar,
+			children: [/* @__PURE__ */ jsx(SidebarMenuButton, {
 				asChild: true,
-				className: cn(rowIconClass, "right-1.5"),
+				isActive: active,
+				size: "sm",
+				tooltip: item.label,
+				className: cn(rowIconClass, active && "bg-sidebar-accent text-sidebar-accent-foreground", item.endAction && "pr-8"),
 				children: /* @__PURE__ */ jsx(LinkComponent, {
-					to: item.endAction.path,
-					children: /* @__PURE__ */ jsx("span", {
+					to: item.path,
+					children: /* @__PURE__ */ jsxs("span", {
 						className: "contents",
-						onClick: closeMobileSidebar,
-						children: /* @__PURE__ */ jsx(EndActionIcon, {})
+						children: [/* @__PURE__ */ jsx(ItemIcon, {
+							icon: item.icon,
+							active
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn("whitespace-nowrap max-w-[168px] truncate", active ? "font-semibold text-sidebar-accent-foreground" : "font-medium text-sidebar-foreground"),
+							style: rowFontStyle,
+							children: item.label
+						})]
+					})
+				})
+			}), item.endAction && EndActionIcon && /* @__PURE__ */ jsx(Tooltip, {
+				content: item.endAction.tooltip,
+				side: "right",
+				sideOffset: 8,
+				children: /* @__PURE__ */ jsx(SidebarMenuAction, {
+					asChild: true,
+					className: cn(rowIconClass, "right-1.5"),
+					children: /* @__PURE__ */ jsx(LinkComponent, {
+						to: item.endAction.path,
+						children: /* @__PURE__ */ jsx("span", {
+							className: "contents",
+							children: /* @__PURE__ */ jsx(EndActionIcon, {})
+						})
 					})
 				})
-			})
-		})] }, item.id);
+			})]
+		}, item.id);
 	};
 	const renderGroup = (group) => {
 		if (isCollapsed && !isMobile) return /* @__PURE__ */ jsx(CollapsedSidebarGroup, {
 			group,
 			isSelected,
-			linkComponent: LinkComponent
+			linkComponent: LinkComponent,
+			flyoutRadius,
+			flyoutElevation
 		}, group.id);
 		return /* @__PURE__ */ jsx(ExpandedSidebarGroup, {
 			group,
@@ -314,9 +322,16 @@ function Sidebar({ items, currentPath, header, headerHeight, footer, linkCompone
 	return /* @__PURE__ */ jsxs(Sidebar$1, {
 		collapsible,
 		variant,
+		style: densityStyle(density),
+		mobileClassName,
+		...!isMobile && {
+			className,
+			id,
+			onClick
+		},
 		children: [
 			(header || isMobile) && /* @__PURE__ */ jsxs(SidebarHeader, {
-				className: cn(headerHeight ? "flex flex-row items-center gap-0 px-2 py-0 box-border shrink-0" : "flex items-start", isMobile ? "justify-between" : "justify-center"),
+				className: cn(headerHeight ? "flex flex-row items-center gap-0 px-2 py-0 box-border shrink-0" : "flex items-start", isMobile ? "justify-between" : "justify-center", headerClassName),
 				style: headerHeight ? {
 					height: headerHeight,
 					minHeight: headerHeight
@@ -332,6 +347,7 @@ function Sidebar({ items, currentPath, header, headerHeight, footer, linkCompone
 					})]
 				})]
 			}),
+			beforeContent,
 			/* @__PURE__ */ jsx(SidebarContent, {
 				className: "overflow-hidden",
 				children: items.map((entry) => renderEntry(entry))

package/dist/components/simple-clickable-card/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { S as SimpleClickableCardProps } from '../../simple-clickable-card.props-BrPCw7CR.js';
+export { a as SimpleClickableCardSharedProps, b as SimpleClickableCardVariant } from '../../simple-clickable-card.props-BrPCw7CR.js';
+import '../../index-BQANnKs9.js';
+import '../../variant-D81RhpbR.js';
+import '../../style-axes-DSQ2DGc5.js';
+import '../../icon-avatar.props-RYtw2eSW.js';
+
+declare const SimpleClickableCard: React.ForwardRefExoticComponent<SimpleClickableCardProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { SimpleClickableCard, SimpleClickableCardProps };

package/dist/components/simple-clickable-card/index.js

@@ -0,0 +1,2 @@
+import { SimpleClickableCard } from "./simple-clickable-card.js";
+export { SimpleClickableCard };

package/dist/components/simple-clickable-card/simple-clickable-card-shared.js

@@ -3,9 +3,9 @@ import { cn } from "../../utils/cn.js";
 import { isPresetColor } from "../../utils/color.js";
 import { SilverMetallicBorderOverlay, SilverShineOverlay } from "../../utils/silver-shine.js";
 import { PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, SILVER_GRADIENT_BACKDROP, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, arbitraryGradientBackgroundImage, resolveVariantStyles } from "../../utils/variant.js";
+import { TruncatedLineWithTooltip } from "../truncated-line-with-tooltip/truncated-line-with-tooltip.js";
 import { IconAvatar } from "../icon-avatar/icon-avatar.js";
 import { Typography } from "../typography/typography.js";
-import { TruncatedLineWithTooltip } from "../truncated-line-with-tooltip/truncated-line-with-tooltip.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/simple-clickable-card/simple-clickable-card-shared.tsx
@@ -83,7 +83,7 @@ function resolveIconAvatarDefaults(variant, cardColor) {
 		color: cardColor,
 		variant: void 0
 	};
-	const foreground = isPresetColor(cardColor) ? `var(--color-${cardColor}-foreground)` : "#ffffff";
+	const foreground = isPresetColor(cardColor) ? `var(--color-${cardColor}-foreground)` : "var(--espd-on-solid-foreground, #ffffff)";
 	return {
 		color: cardColor,
 		variant: "solid",

package/dist/components/simple-clickable-card/simple-clickable-card.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { TooltipProvider } from "../../core/animate-ui/components/animate/tooltip.js";
 import { renderGradientBackdropLayers, renderLeadingIconRow, renderTitleAndDescriptionBlocks, ringTransitionClass, useSimpleClickableCardSurface } from "./simple-clickable-card-shared.js";
 import * as React$1 from "react";
@@ -33,7 +34,8 @@ function trailingChevronRow(options) {
 		}))]
 	});
 }
-var SimpleClickableCard = React$1.forwardRef(({ icon, leadingIcon, title, description, truncateTitle = false, truncateDescription = false, onClick, color = "gray", iconAvatarVariant: iconAvatarVariantProp, iconAvatarColor: iconAvatarColorProp, size = "default", variant = "soft", className, type = "button", disabled, hideEndIcon = false, endIcon, ...rest }, ref) => {
+var SimpleClickableCard = React$1.forwardRef(({ icon, leadingIcon, title, description, truncateTitle = false, truncateDescription = false, onClick, color = "gray", iconAvatarVariant: iconAvatarVariantProp, iconAvatarColor: iconAvatarColorProp, size = "default", variant = "soft", className, type = "button", disabled, hideEndIcon = false, endIcon, radius, ...rest }, ref) => {
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
 	const { onMouseEnter: onMouseEnterProp, onMouseLeave: onMouseLeaveProp, ...buttonRest } = rest;
 	const { s, styles, isArbitraryGradient, surfaceStyleWithoutGradientBg, presetGradientPair, surfaceContainerClass, presetRingClasses, ringAccentStyle, iconAvatarColor: resolvedIconAvatarColor, iconAvatarVariant: resolvedIconAvatarVariant, iconAvatarDiscStyle } = useSimpleClickableCardSurface({
 		variant,
@@ -91,8 +93,9 @@ var SimpleClickableCard = React$1.forwardRef(({ icon, leadingIcon, title, descri
 			onClick,
 			onMouseEnter: onMouseEnterProp,
 			onMouseLeave: onMouseLeaveProp,
-			className: cn("relative isolate inline-flex w-full cursor-pointer items-center overflow-hidden rounded-xl text-left ring-offset-background", ringTransitionClass, variant === "gradient" && "group", "focus-visible:outline-none hover:ring-2 hover:ring-offset-2 focus-visible:ring-2 focus-visible:ring-offset-2", presetRingClasses, "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", s.rowPad, s.gap, surfaceContainerClass, className),
+			className: cn("relative isolate inline-flex w-full cursor-pointer items-center overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-xl)))] text-left ring-offset-background", ringTransitionClass, variant === "gradient" && "group", "focus-visible:outline-none hover:ring-2 hover:ring-offset-2 focus-visible:ring-2 focus-visible:ring-offset-2", presetRingClasses, "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", s.rowPad, s.gap, surfaceContainerClass, className),
 			style: {
+				...partStyle,
 				...isArbitraryGradient ? surfaceStyleWithoutGradientBg : styles.containerStyle,
 				...ringAccentStyle
 			},

package/dist/components/simple-info-card/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { a as SimpleClickableCardSharedProps } from '../../simple-clickable-card.props-BrPCw7CR.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+import '../../index-BQANnKs9.js';
+import '../../variant-D81RhpbR.js';
+import '../../icon-avatar.props-RYtw2eSW.js';
+
+/** Display-only card body; only the info icon is interactive (tab/focus). */
+interface SimpleInfoCardProps extends SimpleClickableCardSharedProps, Pick<StyleAxisProps, "radius">, Omit<HTMLAttributes<HTMLDivElement>, keyof SimpleClickableCardSharedProps | "title"> {
+    /** When omitted or empty, the info trigger and popover are not rendered. */
+    infoContent?: ReactNode;
+    /** Overrides default `bottom`. */
+    popoverSide?: "top" | "right" | "bottom" | "left";
+    /** Overrides default `end` (mock alignment). */
+    popoverAlign?: "start" | "center" | "end";
+    /** `aria-label` on the info trigger. */
+    infoIconLabel?: string;
+    /** When set, disables the info trigger and dims the shell. */
+    disabled?: boolean;
+}
+
+declare const SimpleInfoCard: React.ForwardRefExoticComponent<SimpleInfoCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { SimpleInfoCard, type SimpleInfoCardProps };

package/dist/components/simple-info-card/index.js

@@ -0,0 +1,2 @@
+import { SimpleInfoCard } from "./simple-info-card.js";
+export { SimpleInfoCard };

package/dist/components/simple-info-card/simple-info-card.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../../utils/cn.js";
 import { isPresetColor } from "../../utils/color.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { TooltipProvider } from "../../core/animate-ui/components/animate/tooltip.js";
 import { Button } from "../button/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
@@ -52,10 +53,11 @@ var SOLID_INFO_ICON_FG_CLASS = {
 };
 function infoTriggerIconFgClass(variant, cardColor, infoButtonColor) {
 	if (variant === "solid" && cardColor !== void 0 && isPresetColor(cardColor)) return SOLID_INFO_ICON_FG_CLASS[cardColor];
-	if (variant === "solid" && typeof cardColor === "string" && !isPresetColor(cardColor)) return "text-white/60";
+	if (variant === "solid" && typeof cardColor === "string" && !isPresetColor(cardColor)) return "text-[color:var(--espd-on-solid-foreground,#fff)]/60";
 	return INFO_ICON_FG_CLASS[infoButtonColor];
 }
-var SimpleInfoCard = React$1.forwardRef(({ icon, title, description, infoContent, truncateTitle = false, truncateDescription = false, color = "gray", iconAvatarVariant: iconAvatarVariantProp, iconAvatarColor: iconAvatarColorProp, size = "default", variant = "soft", className, disabled, popoverSide = "bottom", popoverAlign = "end", infoIconLabel = "More information", ...divRest }, ref) => {
+var SimpleInfoCard = React$1.forwardRef(({ icon, title, description, infoContent, truncateTitle = false, truncateDescription = false, color = "gray", iconAvatarVariant: iconAvatarVariantProp, iconAvatarColor: iconAvatarColorProp, size = "default", variant = "soft", className, disabled, popoverSide = "bottom", popoverAlign = "end", infoIconLabel = "More information", radius, ...divRest }, ref) => {
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
 	const { style: userStyle, ...shellDivRest } = divRest;
 	const showInfo = hasRenderableInfoContent(infoContent);
 	const { s, styles, isArbitraryGradient, surfaceStyleWithoutGradientBg, presetGradientPair, surfaceContainerClass, ringAccentStyle, iconAvatarColor: resolvedIconAvatarColor, iconAvatarVariant: resolvedIconAvatarVariant, iconAvatarDiscStyle } = useSimpleClickableCardSurfaceShell({
@@ -135,8 +137,9 @@ var SimpleInfoCard = React$1.forwardRef(({ icon, title, description, infoContent
 		closeDelay: 100,
 		children: /* @__PURE__ */ jsxs("div", {
 			ref,
-			className: cn("relative isolate inline-flex w-full max-w-full items-center overflow-hidden rounded-xl ring-offset-background", variant === "gradient" && "group", disabled && "pointer-events-none opacity-50", s.rowPad, showInfo ? s.gap : void 0, surfaceContainerClass, className),
+			className: cn("relative isolate inline-flex w-full max-w-full items-center overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-xl)))] ring-offset-background", variant === "gradient" && "group", disabled && "pointer-events-none opacity-50", s.rowPad, showInfo ? s.gap : void 0, surfaceContainerClass, className),
 			style: {
+				...partStyle,
 				...shellStyle,
 				...userStyle
 			},

package/dist/components/simple-list/index.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { d as DensityProps } from '../../style-axes-DSQ2DGc5.js';
+
+type SimpleListItemDirection = "row" | "column";
+type SimpleListIconStyle = "inline" | "avatar" | "none";
+type SimpleListAvatarSize = "sm" | "default" | "lg";
+type SimpleListSize = "sm" | "default" | "lg";
+interface SimpleListItem {
+    /** Stable key for React reconciliation. */
+    key: string;
+    label: ReactNode;
+    /**
+     * Pre-rendered content. If null/undefined and `hideIfEmpty` is not set
+     * to `false`, the row is skipped.
+     */
+    content?: ReactNode;
+    /**
+     * Lucide icon component OR ReactNode. Component form is preferred so
+     * the resolver can apply size classes automatically.
+     */
+    icon?: LucideIcon | ReactNode;
+    /** Per-item override of the list-level `direction`. */
+    direction?: SimpleListItemDirection;
+    /**
+     * When true (default), skip this row if `content` is null/undefined.
+     * Set to `false` to keep the row visible even with empty content.
+     */
+    hideIfEmpty?: boolean;
+    /** Extra classes for the row wrapper. */
+    className?: string;
+}
+interface SimpleListProps extends DensityProps {
+    items: SimpleListItem[];
+    /** Overall list spacing and typography scale. Default: `"default"`. */
+    size?: SimpleListSize;
+    /**
+     * Default direction for items that don't specify their own. Default: `"column"`.
+     * `"row"` puts label and value on one line from the `sm` breakpoint (640px)
+     * up; below it, row items stack like column items.
+     */
+    direction?: SimpleListItemDirection;
+    /** How to render the leading icon. Default: `"inline"`. */
+    iconStyle?: SimpleListIconStyle;
+    /**
+     * Avatar circle size. Only used when `iconStyle === "avatar"`.
+     * Default: `"default"` (40px). The icon inside is always exactly half
+     * the avatar size.
+     */
+    avatarSize?: SimpleListAvatarSize;
+    /** Show `<Separator />` between visible rows. Default: `true`. */
+    separators?: boolean;
+    /** Vertical gap between rows (Tailwind gap class). Default: `"gap-5"`. */
+    gapClassName?: string;
+    /** Rendered when no rows are visible after filtering. Default: `null`. */
+    emptyState?: ReactNode;
+    className?: string;
+}
+
+declare function SimpleList({ items, size, direction, iconStyle, avatarSize, separators, gapClassName, emptyState, className, density, }: SimpleListProps): React.JSX.Element | null;
+
+export { SimpleList, type SimpleListAvatarSize, type SimpleListIconStyle, type SimpleListItem, type SimpleListItemDirection, type SimpleListProps };

package/dist/components/simple-list/index.js

@@ -0,0 +1,2 @@
+import { SimpleList } from "./simple-list.js";
+export { SimpleList };

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

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { densityStyle } from "../../utils/style-axes.js";
 import { Avatar, AvatarFallback } from "../../core/avatar.js";
 import { Separator } from "../../core/separator.js";
 import { Label } from "../../core/label.js";
@@ -120,7 +121,7 @@ function ItemRow({ item, effectiveDirection, iconStyle, avatarSize, size }) {
 		children: [labelNode, item.content]
 	});
 }
-function SimpleList({ items, size = "default", direction = "column", iconStyle = "inline", avatarSize = "default", separators = true, gapClassName, emptyState, className }) {
+function SimpleList({ items, size = "default", direction = "column", iconStyle = "inline", avatarSize = "default", separators = true, gapClassName, emptyState, className, density }) {
 	const listSizeStyles = LIST_SIZE_STYLES[size];
 	const visibleItems = items.filter((item) => {
 		if ((item.hideIfEmpty ?? true) && item.content == null) return false;
@@ -129,6 +130,7 @@ function SimpleList({ items, size = "default", direction = "column", iconStyle =
 	if (visibleItems.length === 0) return emptyState != null ? /* @__PURE__ */ jsx(Fragment$1, { children: emptyState }) : null;
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex flex-col", gapClassName ?? listSizeStyles.listGap, className),
+		style: densityStyle(density),
 		children: visibleItems.map((item, index) => {
 			const effectiveDirection = item.direction ?? direction;
 			const isLast = index === visibleItems.length - 1;

package/dist/components/simple-paginated-list/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface SimplePaginatedListItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    action?: ReactNode;
+}
+type SimplePaginatedListSize = "sm" | "default" | "lg";
+interface SimplePaginatedListProps {
+    items: SimplePaginatedListItem[];
+    itemsPerPage?: number;
+    size?: SimplePaginatedListSize;
+    className?: string;
+}
+
+declare function SimplePaginatedList({ items, itemsPerPage, size, className, }: SimplePaginatedListProps): React.JSX.Element;
+
+export { SimplePaginatedList, type SimplePaginatedListItem, type SimplePaginatedListProps, type SimplePaginatedListSize };

package/dist/components/simple-paginated-list/index.js

@@ -0,0 +1,2 @@
+import { SimplePaginatedList } from "./simple-paginated-list.js";
+export { SimplePaginatedList };

package/dist/components/simplified-date/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+interface SimplifiedDateProps {
+    /** Unix timestamp in seconds or milliseconds */
+    ts?: number;
+    /** Token-based format string for the detailed date (tokens: dd, MM, yyyy, HH, mm, ss). Defaults to "dd/MM/yyyy HH:mm:ss" */
+    dateFormat?: string;
+    /**
+     * When true, shows relative time (e.g. "5m ago") with a tooltip of the formatted date.
+     * When false (default), shows only the formatted date with no tooltip.
+     */
+    relative?: boolean;
+    className?: string;
+}
+
+declare function SimplifiedDate({ ts, dateFormat, className, relative }: SimplifiedDateProps): React.JSX.Element | null;
+
+export { SimplifiedDate, type SimplifiedDateProps };

package/dist/components/simplified-date/index.js

@@ -0,0 +1,2 @@
+import { SimplifiedDate } from "./simplified-date.js";
+export { SimplifiedDate };

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,5 @@
+import * as React$1 from 'react';
+
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+
+export { Skeleton };

package/dist/components/skeleton/index.js

@@ -0,0 +1,2 @@
+import { Skeleton } from "../../core/skeleton.js";
+export { Skeleton };

package/dist/components/skeletons/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface TableSkeletonProps {
+    totalRows?: number;
+    totalColumns?: number;
+    showBorder?: boolean;
+    padFirstColumn?: boolean;
+}
+declare function TableSkeleton({ totalRows, totalColumns, showBorder, padFirstColumn, }: TableSkeletonProps): React.JSX.Element;
+
+export { TableSkeleton };

package/dist/components/skeletons/index.js

@@ -0,0 +1,2 @@
+import { TableSkeleton } from "./table-skeleton.js";
+export { TableSkeleton };

package/dist/components/sort-menu/index.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { a as ButtonIconOnlyBreakpoint } from '../../button-BxJ7s6sR.js';
+import '../../button-BK-DIR_L.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../../style-axes-DSQ2DGc5.js';
+import '../../index-BQANnKs9.js';
+
+interface SortMenuProps<T extends string> {
+    /** The current order. */
+    value: T;
+    /** Every order offered, in menu order. */
+    options: readonly T[];
+    onChange: (value: T) => void;
+    /** How an order reads ("Most builds"). */
+    labelOf: (value: T) => string;
+    /** What is being sorted, for the button's accessible name ("Sort makers"). */
+    label: string;
+    /** The button's leading icon. Default: the up-down arrows of a sort. */
+    icon?: ReactNode;
+    /** Below this breakpoint the button shows its icons only (the choice stays its accessible name), to leave a narrow row to a search box. */
+    iconOnlyBelow?: ButtonIconOnlyBreakpoint;
+    /** Which edge of the button the menu lines up with: `start` for a picker at the left of a row. Default `end`. */
+    align?: "start" | "end";
+}
+
+/**
+ * A one-of picker: the current choice as the button's label, the choices in a
+ * menu. A sort by default; with another `icon`, any filter of the same shape.
+ */
+declare function SortMenu<T extends string>({ value, options, onChange, labelOf, label, icon, iconOnlyBelow, align }: SortMenuProps<T>): React.JSX.Element;
+
+export { SortMenu, type SortMenuProps };

package/dist/components/sort-menu/index.js

@@ -0,0 +1,2 @@
+import { SortMenu } from "./sort-menu.js";
+export { SortMenu };