@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/notice-strip/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+type NoticeTone = "info" | "warning" | "error";
+interface NoticeStripProps {
+    /** Which colour the strip is: the kind of news it carries. */
+    tone: NoticeTone;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Buttons, at the right of the content. */
+    actions?: ReactNode;
+    /** With it, a ✕ at the strip's far end; the caller hides the strip. */
+    onDismiss?: () => void;
+    /** The ✕'s accessible name ("Dismiss"). */
+    dismissLabel?: string;
+    className?: string;
+}
+
+/**
+ * One line of news across the top of a canvas, in the glow of the colour
+ * that says what kind (a solid fill is too strong over a dark drawing): a
+ * strip the full width of its container, its words and buttons centred in a
+ * 1180px measure (`max-w-295`), the ✕ at the strip's far end. The tint sits
+ * on an opaque base, so what is under the strip never shows through a 4 %
+ * wash. An `Alert` carries the content (title, description, the actions at
+ * the right), drawn without its icon, corners, border or background — the
+ * strip is the background — and tighter than a card. An error is an `alert`,
+ * anything else a `status`.
+ */
+declare function NoticeStrip({ tone, title, description, actions, onDismiss, dismissLabel, className }: NoticeStripProps): React.JSX.Element;
+
+export { NoticeStrip, type NoticeStripProps, type NoticeTone };

package/dist/components/notice-strip/index.js

@@ -0,0 +1,2 @@
+import { NoticeStrip } from "./notice-strip.js";
+export { NoticeStrip };

package/dist/components/notice-strip/notice-strip.js

@@ -0,0 +1,57 @@
+import { cn } from "../../utils/cn.js";
+import { Alert } from "../alert/alert.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/components/notice-strip/notice-strip.tsx
+/** The `glow` variant's recipe for the colour (as `resolveVariantStyles` writes it), on the strip itself: the Alert inside is see-through, so one tint runs edge to edge. */
+var TONE = {
+	info: "border-info/15 bg-info/4 text-info shadow-glow shadow-info/45",
+	warning: "border-warning/15 bg-warning/4 text-warning shadow-glow shadow-warning/45",
+	error: "border-error/15 bg-error/4 text-error shadow-glow shadow-error/45"
+};
+/**
+* One line of news across the top of a canvas, in the glow of the colour
+* that says what kind (a solid fill is too strong over a dark drawing): a
+* strip the full width of its container, its words and buttons centred in a
+* 1180px measure (`max-w-295`), the ✕ at the strip's far end. The tint sits
+* on an opaque base, so what is under the strip never shows through a 4 %
+* wash. An `Alert` carries the content (title, description, the actions at
+* the right), drawn without its icon, corners, border or background — the
+* strip is the background — and tighter than a card. An error is an `alert`,
+* anything else a `status`.
+*/
+function NoticeStrip({ tone, title, description, actions, onDismiss, dismissLabel, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: tone === "error" ? "alert" : "status",
+		"data-slot": "notice-strip",
+		className: cn("relative w-full border-b bg-background", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("relative w-full", TONE[tone], onDismiss && "pr-10 sm:pl-10"),
+			children: [/* @__PURE__ */ jsx(Alert, {
+				type: tone,
+				variant: "glow",
+				size: "sm",
+				radius: "none",
+				hideIcon: true,
+				title,
+				...description ? { description: /* @__PURE__ */ jsx("span", {
+					className: "text-xs leading-snug",
+					children: description
+				}) } : {},
+				...actions ? { actions } : {},
+				className: "mx-auto flex max-w-295 border-0 bg-transparent py-1.5 shadow-none"
+			}), onDismiss && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": dismissLabel,
+				onClick: onDismiss,
+				className: "absolute top-1/2 right-2 inline-flex size-7 -translate-y-1/2 cursor-pointer items-center justify-center rounded-(--espd-radius-control) text-current opacity-70 outline-none hover:bg-current/10 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-current",
+				children: /* @__PURE__ */ jsx(X, {
+					"aria-hidden": true,
+					className: "h-4 w-4"
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { NoticeStrip };

package/dist/components/option-card-group/index.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+/** A chip under a card's description: what the choice includes. */
+interface OptionCardGroupTag {
+    key: string;
+    /** Already translated. Drawn as a small `StatusBadge`. */
+    label: string;
+    /**
+     * What THIS choice adds over the others ("+ Source"): grey like the rest
+     * until its card is chosen, then primary.
+     */
+    emphasis?: boolean;
+}
+interface OptionCardGroupItem {
+    id: string;
+    /** Already translated. Also the radio's accessible name. */
+    title: string;
+    description?: ReactNode;
+    /** An icon beside the title (a Lucide element), set on a small tile. Decorative. */
+    media?: ReactNode;
+    tags?: OptionCardGroupTag[];
+    disabled?: boolean;
+}
+interface OptionCardGroupProps {
+    items: OptionCardGroupItem[];
+    /** The chosen id; empty or null while nothing is chosen. */
+    value: string | null;
+    onValueChange: (id: string) => void;
+    /** The radios' shared `name`; one is made when omitted. */
+    name?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** Every card at once, as while the choice cannot be made yet. */
+    disabled?: boolean;
+    className?: string;
+}
+
+/**
+ * A choice between a few things that each need an icon and a sentence (how
+ * much to share, which plan, which way to start): compact cards side by side,
+ * wrapping one under the other on a narrow screen — an icon tile beside the
+ * title, the description, and what it includes as status badges. A native
+ * radio group, so the arrow keys move the choice; the chosen card carries a
+ * primary ring, and its emphasised badges ("+ Source") turn primary to show
+ * what it adds.
+ */
+declare function OptionCardGroup({ items, value, onValueChange, name, disabled, className, ...aria }: OptionCardGroupProps): React.JSX.Element;
+
+export { OptionCardGroup, type OptionCardGroupItem, type OptionCardGroupProps, type OptionCardGroupTag };

package/dist/components/option-card-group/index.js

@@ -0,0 +1,2 @@
+import { OptionCardGroup } from "./option-card-group.js";
+export { OptionCardGroup };

package/dist/components/option-card-group/option-card-group.js

@@ -0,0 +1,76 @@
+import { cn } from "../../utils/cn.js";
+import { StatusBadge } from "../status-badge/status-badge.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/option-card-group/option-card-group.tsx
+function Card({ item, name, chosen, disabled, onChoose }) {
+	const off = disabled || item.disabled === true;
+	return /* @__PURE__ */ jsxs("label", {
+		"data-state": chosen ? "checked" : "unchecked",
+		className: cn("relative flex flex-col gap-3 rounded-xl border bg-card p-4 text-card-foreground transition-[border-color,background-color,box-shadow] duration-200", chosen ? "border-primary bg-primary/5 ring-2 ring-primary/20" : "border-border", off ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:border-foreground/25", "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary"),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "radio",
+				name,
+				value: item.id,
+				checked: chosen,
+				disabled: off,
+				"aria-label": item.title,
+				onChange: onChoose,
+				className: "absolute top-4 right-4 size-4.5 cursor-pointer appearance-none rounded-full border-2 border-border bg-background transition-[border-width,border-color] checked:border-5 checked:border-primary disabled:cursor-not-allowed focus-visible:outline-none"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-3 pr-7",
+				children: [item.media && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: cn("flex size-9 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4.5", chosen ? "bg-primary/10 text-primary" : "bg-muted text-foreground"),
+					children: item.media
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-base font-semibold",
+					children: item.title
+				})]
+			}),
+			item.description && /* @__PURE__ */ jsx("span", {
+				className: "text-sm leading-relaxed text-muted-foreground",
+				children: item.description
+			}),
+			item.tags && item.tags.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "m-0 flex list-none flex-wrap gap-1.5 p-0",
+				children: item.tags.map((tag) => /* @__PURE__ */ jsx("li", {
+					"data-emphasis": tag.emphasis ? "true" : void 0,
+					children: /* @__PURE__ */ jsx(StatusBadge, {
+						size: "sm",
+						label: tag.label,
+						color: tag.emphasis && chosen ? "primary" : "gray"
+					})
+				}, tag.key))
+			})
+		]
+	});
+}
+/**
+* A choice between a few things that each need an icon and a sentence (how
+* much to share, which plan, which way to start): compact cards side by side,
+* wrapping one under the other on a narrow screen — an icon tile beside the
+* title, the description, and what it includes as status badges. A native
+* radio group, so the arrow keys move the choice; the chosen card carries a
+* primary ring, and its emphasised badges ("+ Source") turn primary to show
+* what it adds.
+*/
+function OptionCardGroup({ items, value, onValueChange, name, disabled = false, className, ...aria }) {
+	const fallback = useId();
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		...aria,
+		className: cn("grid grid-cols-[repeat(auto-fit,minmax(min(16rem,100%),1fr))] gap-4", className),
+		children: items.map((item) => /* @__PURE__ */ jsx(Card, {
+			item,
+			name: name ?? fallback,
+			chosen: value === item.id,
+			disabled,
+			onChoose: () => onValueChange(item.id)
+		}, item.id))
+	});
+}
+//#endregion
+export { OptionCardGroup };

package/dist/components/overflow-badge-list/index.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { S as StatusBadgeIcon } from '../../status-badge.props-lKlEOfRt.js';
+import { C as Color, S as Size, P as PresetColor } from '../../index-BQANnKs9.js';
+import { f as Variant } from '../../variant-D81RhpbR.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+type OverflowBadgeListColor = Extract<PresetColor, "warning" | "success" | "info" | "error" | "gray">;
+/** A badge with its own icon and, optionally, its own colour. */
+interface OverflowBadgeListItem {
+    /** Stable key. Defaults to `label`. */
+    id?: string;
+    /** Already-translated label. Also listed in the overflow tooltip. */
+    label: string;
+    /** Leading icon of this badge. A Lucide component or a pre-sized element. */
+    icon?: StatusBadgeIcon;
+    /** Overrides `badgeColor` for this badge (e.g. `"gray"` for an inactive entry). */
+    color?: Color;
+}
+/** Style axis `radius`: every badge in the list. */
+interface OverflowBadgeListProps extends Pick<StyleAxisProps, "radius"> {
+    /**
+     * Plain strings, or objects carrying a per-badge icon and colour. The two
+     * forms can be mixed.
+     */
+    items: Array<string | OverflowBadgeListItem>;
+    /** Icon of the first plain-string badge. Object items use their own `icon`. */
+    icon?: LucideIcon;
+    /**
+     * Colour of every badge: the presets in `OverflowBadgeListColor`, or any
+     * other `Color` a badge takes (`"silver"`, a CSS colour).
+     */
+    badgeColor: Color;
+    /** Badge surface treatment. Default: `"outline"`. */
+    badgeVariant?: Variant;
+    /** `StatusBadge` size of every badge. Default: `"default"`. */
+    badgeSize?: Size;
+    /** Maximum badges rendered before the overflow label. Default: `1`. */
+    maxBadgesToShow?: number;
+    noneLabel: string;
+    /** Shown when `items.length > maxBadgesToShow`; typically `t(..., { count: items.length - maxBadgesToShow })`. */
+    andMoreLabel: string;
+    /**
+     * Keep every badge on one line: the row never wraps, and the last visible
+     * badge shrinks with an ellipsis so the overflow label always fits.
+     * Default: `false` (badges wrap).
+     */
+    singleLine?: boolean;
+    /**
+     * How the overflow label is drawn. Either value makes it a button that opens
+     * a popover of the HIDDEN items on hover, focus or tap (touch has no hover):
+     * `"text"` as dotted-underlined text, `"badge"` as a badge in the list's own
+     * style. Unset keeps the original: text with a hover tooltip of every item.
+     */
+    overflowAs?: "text" | "badge";
+    /** Extra classes on every badge (e.g. `font-mono` for part numbers). */
+    badgeClassName?: string;
+    className?: string;
+}
+
+declare function OverflowBadgeList({ items, icon, badgeColor, badgeVariant, badgeSize, maxBadgesToShow, noneLabel, andMoreLabel, className, radius, singleLine, overflowAs, badgeClassName, }: OverflowBadgeListProps): React.JSX.Element;
+
+export { OverflowBadgeList, type OverflowBadgeListColor, type OverflowBadgeListItem, type OverflowBadgeListProps };

package/dist/components/overflow-badge-list/index.js

@@ -0,0 +1,2 @@
+import { OverflowBadgeList } from "./overflow-badge-list.js";
+export { OverflowBadgeList };

package/dist/components/overflow-badge-list/overflow-badge-list.js

@@ -1,5 +1,6 @@
 import { cn } from "../../utils/cn.js";
 import Tooltip from "../tooltip/tooltip.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
 import { StatusBadge } from "../status-badge/status-badge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overflow-badge-list/overflow-badge-list.tsx
@@ -17,7 +18,43 @@ function resolveBadge(item, index, defaultIcon, defaultColor) {
 		color: item.color ?? defaultColor
 	};
 }
-function OverflowBadgeList({ items, icon, badgeColor, badgeVariant = "outline", badgeSize = "default", maxBadgesToShow = 1, noneLabel, andMoreLabel, className }) {
+/** The overflow label as a button: hover, focus or a tap lists the hidden items. */
+function OverflowPopover({ as, label, hidden, badgeVariant, badgeSize, badgeColor, badgeClassName, radius }) {
+	return /* @__PURE__ */ jsxs(Popover, {
+		openOnHover: true,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			className: cn("shrink-0 cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring", as === "badge" && "inline-flex", as === "text" && "text-sm text-muted-foreground underline decoration-dotted underline-offset-2"),
+			children: as === "badge" ? /* @__PURE__ */ jsx(StatusBadge, {
+				radius,
+				label,
+				variant: badgeVariant,
+				color: badgeColor,
+				size: badgeSize,
+				className: badgeClassName
+			}) : label
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			side: "top",
+			align: "start",
+			className: "w-auto max-w-xs p-3",
+			children: /* @__PURE__ */ jsx("ul", {
+				className: "m-0 flex max-h-48 list-none flex-wrap gap-1.5 overflow-y-auto p-0",
+				children: hidden.map((badge) => /* @__PURE__ */ jsx("li", {
+					className: "min-w-0",
+					children: /* @__PURE__ */ jsx(StatusBadge, {
+						radius,
+						label: badge.label,
+						icon: badge.icon,
+						variant: badgeVariant,
+						color: badge.color,
+						size: badgeSize,
+						className: badgeClassName
+					})
+				}, badge.key))
+			})
+		})]
+	});
+}
+function OverflowBadgeList({ items, icon, badgeColor, badgeVariant = "outline", badgeSize = "default", maxBadgesToShow = 1, noneLabel, andMoreLabel, className, radius, singleLine = false, overflowAs, badgeClassName }) {
 	if (items.length === 0) return /* @__PURE__ */ jsx("span", {
 		className: "text-muted-foreground",
 		children: noneLabel
@@ -34,24 +71,46 @@ function OverflowBadgeList({ items, icon, badgeColor, badgeVariant = "outline",
 		}, badge.key))
 	}) : null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex min-w-0 flex-wrap items-center gap-2", className),
-		children: [visibleBadges.map((badge) => /* @__PURE__ */ jsx(StatusBadge, {
-			label: badge.label,
-			icon: badge.icon,
-			variant: badgeVariant,
-			color: badge.color,
-			size: badgeSize,
-			className: "max-w-[12rem]"
-		}, badge.key)), hiddenCount > 0 && tooltipContent ? /* @__PURE__ */ jsx(Tooltip, {
-			content: tooltipContent,
-			side: "top",
-			align: "start",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "cursor-default shrink-0 text-sm text-muted-foreground underline decoration-dotted underline-offset-2",
-				tabIndex: 0,
-				children: andMoreLabel
-			})
-		}) : null]
+		className: cn("flex min-w-0 items-center gap-2", singleLine ? "flex-nowrap" : "flex-wrap", className),
+		children: [
+			visibleBadges.map((badge, index) => {
+				const node = /* @__PURE__ */ jsx(StatusBadge, {
+					radius,
+					label: badge.label,
+					icon: badge.icon,
+					variant: badgeVariant,
+					color: badge.color,
+					size: badgeSize,
+					className: cn(singleLine ? "max-w-full" : "max-w-[12rem]", badgeClassName)
+				}, badge.key);
+				if (!singleLine) return node;
+				return /* @__PURE__ */ jsx("span", {
+					"data-slot": "overflow-badge",
+					className: cn("flex max-w-[12rem] [&>*]:min-w-0", index === visibleBadges.length - 1 ? "min-w-0 shrink" : "shrink-0"),
+					children: node
+				}, badge.key);
+			}),
+			hiddenCount > 0 && overflowAs ? /* @__PURE__ */ jsx(OverflowPopover, {
+				as: overflowAs,
+				label: andMoreLabel,
+				hidden: badges.slice(visibleCount),
+				badgeVariant,
+				badgeSize,
+				badgeColor,
+				badgeClassName,
+				radius
+			}) : null,
+			hiddenCount > 0 && !overflowAs && tooltipContent ? /* @__PURE__ */ jsx(Tooltip, {
+				content: tooltipContent,
+				side: "top",
+				align: "start",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "cursor-default shrink-0 text-sm text-muted-foreground underline decoration-dotted underline-offset-2",
+					tabIndex: 0,
+					children: andMoreLabel
+				})
+			}) : null
+		]
 	});
 }
 //#endregion

package/dist/components/page-banner/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface PageBannerProps {
+    /** A short line above the title, in the brand colour and monospace ("31 makers · 12 builds"). */
+    kicker?: ReactNode;
+    /** The banner's heading. */
+    title: ReactNode;
+    /** Heading element. Default `h2`. */
+    titleAs?: "h1" | "h2" | "h3";
+    /** Id on the heading; the banner is labelled by it. Default: generated. */
+    titleId?: string;
+    description?: ReactNode;
+    /** A row under the description (a stack of faces, a count). */
+    meta?: ReactNode;
+    /** The call to action, on the right on a wide banner, under the text on a narrow one. */
+    action?: ReactNode;
+    /**
+     * Artwork behind the content (a faint logo). Positioned by the caller with
+     * absolute classes; hidden from assistive technology and from the pointer.
+     */
+    decoration?: ReactNode;
+    className?: string;
+}
+
+/**
+ * An outlined banner at the top of a page or tab: a kicker, a title and a
+ * line of description on the left, a call to action on the right, optional
+ * artwork behind. Stacks into one column on a narrow screen.
+ */
+declare function PageBanner({ kicker, title, titleAs, titleId, description, meta, action, decoration, className }: PageBannerProps): React.JSX.Element;
+
+export { PageBanner, type PageBannerProps };

package/dist/components/page-banner/index.js

@@ -0,0 +1,2 @@
+import { PageBanner } from "./page-banner.js";
+export { PageBanner };

package/dist/components/page-banner/page-banner.js

@@ -0,0 +1,56 @@
+import { cn } from "../../utils/cn.js";
+import { Typography } from "../typography/typography.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/page-banner/page-banner.tsx
+/**
+* An outlined banner at the top of a page or tab: a kicker, a title and a
+* line of description on the left, a call to action on the right, optional
+* artwork behind. Stacks into one column on a narrow screen.
+*/
+function PageBanner({ kicker, title, titleAs = "h2", titleId, description, meta, action, decoration, className }) {
+	const generated = useId();
+	const headingId = titleId ?? generated;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": headingId,
+		"data-slot": "page-banner",
+		className: cn("relative overflow-hidden rounded-3xl border border-primary", className),
+		children: [decoration && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			className: "pointer-events-none absolute inset-0",
+			children: decoration
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative flex flex-col gap-6 p-6 sm:p-10 md:flex-row md:items-center md:justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col gap-3.5",
+				children: [
+					kicker && /* @__PURE__ */ jsx("span", {
+						className: "font-mono text-sm font-semibold text-primary",
+						children: kicker
+					}),
+					/* @__PURE__ */ jsx(Typography, {
+						id: headingId,
+						variant: "h4",
+						as: titleAs,
+						className: "m-0 font-extrabold tracking-tight text-foreground",
+						children: title
+					}),
+					description && /* @__PURE__ */ jsx(Typography, {
+						variant: "body1",
+						className: "m-0 max-w-140 text-foreground-secondary",
+						children: description
+					}),
+					meta && /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap items-center gap-2.5",
+						children: meta
+					})
+				]
+			}), action && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 self-start md:self-center",
+				children: action
+			})]
+		})]
+	});
+}
+//#endregion
+export { PageBanner };

package/dist/components/page-container/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { a as PageContainerProps, P as PageContainerMaxWidth } from '../../page-container.props-JutTvKFq.js';
+export { G as GoBackLinkData } from '../../page-container.props-JutTvKFq.js';
+
+declare function PageContainer({ maxWidth, heading, actions, children, className, noGutters, elevateHeading, stickyHeadingOnMobile, revealHeadingOnScrollUp, goBackLinkData, onBack, }: PageContainerProps): React.JSX.Element;
+
+interface PageContainerSkeletonProps {
+    maxWidth?: PageContainerMaxWidth;
+    noGutters?: boolean;
+    /** Show a skeleton line for the back link. */
+    showBackLink?: boolean;
+    /** Show the header row (heading + optional actions). Default true. */
+    showHeader?: boolean;
+    /** Show a skeleton for the actions slot (e.g. primary button). */
+    showActions?: boolean;
+    className?: string;
+}
+declare function PageContainerSkeleton({ maxWidth, noGutters, showBackLink, showHeader, showActions, className, }: PageContainerSkeletonProps): React.JSX.Element;
+
+export { PageContainer, PageContainerMaxWidth, PageContainerProps, PageContainerSkeleton, type PageContainerSkeletonProps };

package/dist/components/page-container/index.js

@@ -0,0 +1,3 @@
+import PageContainer from "./page-container.js";
+import PageContainerSkeleton from "./page-container-skeleton.js";
+export { PageContainer, PageContainerSkeleton };

package/dist/components/page-container/page-container.js

@@ -1,11 +1,11 @@
 import { cn } from "../../utils/cn.js";
 import { MOBILE_MEDIA_QUERY } from "../../core/hooks/use-mobile.js";
-import { Link } from "../link/link.js";
+import { Link as Link$1 } from "../link/link.js";
 import { useRevealOnScrollUp } from "../../core/hooks/use-reveal-on-scroll-up.js";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { MoveLeft } from "lucide-react";
 import { motion } from "motion/react";
+import { MoveLeft } from "lucide-react";
 //#region src/components/page-container/page-container.tsx
 var maxWidthClasses = {
 	sm: "max-w-2xl",
@@ -17,8 +17,8 @@ var headingTitleClasses = "min-w-0 flex-1 text-2xl text-foreground font-bold tra
 var headingContentClasses = "min-w-0 flex-1";
 var stickyHeaderClasses = "sticky top-0 z-11 bg-background/75 backdrop-blur-xs";
 var stickyHeaderFromMdClasses = "md:sticky md:top-0 md:z-11 md:bg-background/75 md:backdrop-blur-xs";
-var elevatedHeaderClasses = "shadow-md shadow-accent/30";
-var elevatedHeaderFromMdClasses = "md:shadow-md md:shadow-accent/30";
+var elevatedHeaderClasses = "shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-surface,0_4px_6px_-1px_var(--tw-shadow-color,rgb(0_0_0/0.1)),0_2px_4px_-2px_var(--tw-shadow-color,rgb(0_0_0/0.1))))] shadow-accent/30";
+var elevatedHeaderFromMdClasses = "md:shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-surface,0_4px_6px_-1px_var(--tw-shadow-color,rgb(0_0_0/0.1)),0_2px_4px_-2px_var(--tw-shadow-color,rgb(0_0_0/0.1))))] md:shadow-accent/30";
 var revealTransitionClasses = "transition-transform duration-200 ease-out motion-reduce:transition-none";
 function headerPinningClasses({ stickyHeadingOnMobile, elevateHeading, revealEnabled, revealState, animateReveal }) {
 	if (stickyHeadingOnMobile) return cn(stickyHeaderClasses, elevateHeading && elevatedHeaderClasses);
@@ -61,7 +61,7 @@ function PageContainer({ maxWidth, heading, actions, children, className, noGutt
 				})),
 				children: [showBackLink && /* @__PURE__ */ jsx("div", {
 					className: cn(goBackLinkData?.className),
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: backHref != null && backHref !== "" ? backHref : "#",
 						linkComponent: backHref != null && backHref !== "" && LinkComponent ? LinkComponent : void 0,
 						color: "gray",

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { S as Size } from '../../index-BQANnKs9.js';
+
+/**
+ * Default page-size choices used by `DataTable`'s page-size selector.
+ *
+ * `Pagination` itself does not default to this list — omitting `pageSizeOptions`
+ * there hides the selector.
+ */
+declare const DEFAULT_PAGE_SIZE_OPTIONS: readonly number[];
+interface PaginationProps {
+    pageLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    onPrevPage: () => void;
+    onNextPage: () => void;
+    hasPrevPage: boolean;
+    hasNextPage: boolean;
+    disabled?: boolean;
+    /** Controls button sizing and container spacing. Defaults to `"default"`. */
+    size?: Size;
+    currentPageSize: number;
+    /** Page sizes offered in the selector. Omit (or pass `[]`) to hide it entirely. */
+    pageSizeOptions?: readonly number[];
+    onPageSizeChange: (size: number) => void;
+    pageSizeOptionLabel?: (size: number) => string;
+}
+
+declare function Pagination({ pageLabel, previousLabel, nextLabel, onPrevPage, onNextPage, hasPrevPage, hasNextPage, disabled, currentPageSize, pageSizeOptions, onPageSizeChange, pageSizeOptionLabel, size, }: PaginationProps): React.JSX.Element;
+
+export { DEFAULT_PAGE_SIZE_OPTIONS, Pagination, type PaginationProps };

package/dist/components/pagination/index.js

@@ -0,0 +1,3 @@
+import { Pagination } from "./pagination.js";
+import { DEFAULT_PAGE_SIZE_OPTIONS } from "./pagination.props.js";
+export { DEFAULT_PAGE_SIZE_OPTIONS, Pagination };