@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/components/selectable-card-list/selectable-card-list-shared.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../utils/cn.js";
-import { IconAvatar } from "../icon-avatar/icon-avatar.js";
 import { TruncatedLineWithTooltip } from "../truncated-line-with-tooltip/truncated-line-with-tooltip.js";
+import { IconAvatar } from "../icon-avatar/icon-avatar.js";
 import { cloneElement, isValidElement } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check, X } from "lucide-react";
@@ -110,8 +110,13 @@ function FormFieldMirrors({ name, form, value, multiple }) {
 		})
 	});
 }
+/** A row's border (and, for `tint`, background) for its selection state. */
+function selectionClassName(selected, style) {
+	if (!selected || style === "none") return "border-border";
+	return style === "tint" ? "border-primary/4 bg-primary/4 dark:border-primary/8 dark:bg-primary/8" : "border-primary";
+}
 function SelectableCardListRowContent({ item, selected, s }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon != null && /* @__PURE__ */ jsx("span", {
 		className: "flex shrink-0 items-center justify-center",
 		children: /* @__PURE__ */ jsx(IconAvatar, {
 			size: s.avatar,
@@ -120,16 +125,23 @@ function SelectableCardListRowContent({ item, selected, s }) {
 		})
 	}), /* @__PURE__ */ jsxs("span", {
 		className: "flex min-w-0 flex-1 flex-col gap-0.5",
-		children: [/* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
-			className: s.primary,
-			tooltipContent: primaryTooltipContent(item),
-			children: item.primaryText
-		}), item.secondaryText != null ? /* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
-			className: s.secondary,
-			tooltipContent: item.secondaryText,
-			children: item.secondaryText
-		}) : null]
+		children: [
+			/* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
+				className: s.primary,
+				tooltipContent: primaryTooltipContent(item),
+				children: item.primaryText
+			}),
+			item.secondaryText != null ? /* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
+				className: s.secondary,
+				tooltipContent: item.secondaryText,
+				children: item.secondaryText
+			}) : null,
+			item.note != null ? /* @__PURE__ */ jsx("span", {
+				className: cn(s.secondary, "font-medium", item.disabled ? "text-muted-foreground" : "text-primary"),
+				children: item.note
+			}) : null
+		]
 	})] });
 }
 //#endregion
-export { FormFieldMirrors, SelectableCardListElementIndicator, SelectableCardListRowContent, SelectableCardSwitchVisual, controlAriaLabel, iconSized, sizeStyles };
+export { FormFieldMirrors, SelectableCardListElementIndicator, SelectableCardListRowContent, SelectableCardSwitchVisual, controlAriaLabel, iconSized, selectionClassName, sizeStyles };

package/dist/components/selectable-card-list/selectable-card-list.js

@@ -1,10 +1,15 @@
 "use client";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { CheckboxCardList } from "./checkbox-card-list.js";
 import { RadioCardList } from "./radio-card-list.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/selectable-card-list/selectable-card-list.tsx
 function SelectableCardList(props) {
-	const { data, size = "default", className, name, form, element = "auto", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
+	const { data, size = "default", className, name, form, element = "auto", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, radius, border, cardSelectionStyle } = props;
+	const { partStyle: rowStyle } = useStyleAxes({
+		radius,
+		border
+	}, ["radius", "border"]);
 	if (props.allowMultiple === true) return /* @__PURE__ */ jsx(CheckboxCardList, {
 		data,
 		value: props.value,
@@ -15,7 +20,9 @@ function SelectableCardList(props) {
 		ariaLabelledBy,
 		name,
 		form,
-		element
+		element,
+		rowStyle,
+		selectionStyle: cardSelectionStyle
 	});
 	return /* @__PURE__ */ jsx(RadioCardList, {
 		data,
@@ -27,7 +34,9 @@ function SelectableCardList(props) {
 		ariaLabelledBy,
 		name,
 		form,
-		element
+		element,
+		rowStyle,
+		selectionStyle: cardSelectionStyle
 	});
 }
 //#endregion

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
+    /**
+     * Optional text displayed between two separator lines.
+     * When provided, the component renders a compound layout instead of a single line.
+     */
+    label?: string;
+    /**
+     * When `true` and `orientation` is `"vertical"`, each character in the label
+     * is rendered upright and stacked top-to-bottom. Has no effect on horizontal
+     * separators. Defaults to `false` (normal horizontal text).
+     */
+    stackLabel?: boolean;
+    /**
+     * Additional class names applied to the label `<span>`.
+     * Use this to override the default label typography or color.
+     */
+    labelClassName?: string;
+}
+declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/components/separator/index.js

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

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { ReactNode, ReactElement } from 'react';
+
+/**
+ * Where a link can be shared: copied, handed to the device's own share sheet
+ * (`native`, hidden where the browser has none), or posted to a site.
+ */
+type ShareTarget = "copy" | "native" | "x" | "reddit" | "linkedin" | "telegram" | "email";
+interface ShareMenuLabels {
+    copy: string;
+    /** Shown in place of `copy` for a moment after the link is copied. */
+    copied: string;
+    native: string;
+    x: string;
+    reddit: string;
+    linkedin: string;
+    telegram: string;
+    email: string;
+}
+interface ShareMenuProps {
+    /** The link being shared. */
+    url: string;
+    /** What it is: the post's title, the email's subject, the share sheet's title. */
+    title: string;
+    /** A line to go with it, where the target takes one (X, Telegram, email, the share sheet). */
+    text?: string;
+    /** The targets, in order. Default every one. */
+    targets?: readonly ShareTarget[];
+    /** Already-translated labels; English when absent. */
+    labels?: Partial<ShareMenuLabels>;
+    /** Icons per target; the library's own when absent (monochrome site marks drawn in `currentColor`). */
+    icons?: Partial<Record<ShareTarget, ReactNode>>;
+    /** The button that opens the menu — usually a `Button` with a share icon. */
+    trigger: ReactElement;
+    /** Which side of the trigger the menu lines up with. Default `end`. */
+    align?: "start" | "center" | "end";
+    /** Called when a target is chosen (and, for `copy`, once the link is on the clipboard). For analytics. */
+    onShare?: (target: ShareTarget) => void;
+    /** The clipboard refused the copy. The menu stays open so another target can be picked. */
+    onCopyError?: (error: unknown) => void;
+}
+
+/**
+ * Share a link: copy it, hand it to the device's share sheet, or open a
+ * site's own share page (X, Reddit, LinkedIn, Telegram) in a new tab, or start
+ * an email. Copy says "Link copied" in place for a moment, then closes the
+ * menu. Built on `DropdownMenu`, so focus, Escape and the arrow keys behave
+ * like every other menu.
+ */
+declare function ShareMenu({ url, title, text, targets, labels, icons, trigger, align, onShare, onCopyError, }: ShareMenuProps): React.JSX.Element;
+declare namespace ShareMenu {
+    var displayName: string;
+}
+
+export { ShareMenu, type ShareMenuLabels, type ShareMenuProps, type ShareTarget };

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

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

package/dist/components/share-menu/share-marks.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/share-menu/share-marks.tsx
+function XMark({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": true,
+		className,
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: "M17.75 3h3.07l-6.7 7.66L22 21h-6.17l-4.83-6.32L5.47 21H2.4l7.17-8.2L2 3h6.33l4.37 5.77L17.75 3Zm-1.08 16.18h1.7L7.4 4.73H5.58l11.1 14.45Z" })
+	});
+}
+function RedditMark({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": true,
+		className,
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: "M22 12.14a2.2 2.2 0 0 0-3.72-1.58 10.8 10.8 0 0 0-5.8-1.83l1-4.6 3.2.68a1.56 1.56 0 1 0 .16-.76l-3.58-.76a.38.38 0 0 0-.45.29l-1.1 5.15a10.8 10.8 0 0 0-5.88 1.83 2.2 2.2 0 1 0-2.42 3.6 4.3 4.3 0 0 0-.05.66c0 3.37 3.92 6.1 8.76 6.1s8.76-2.73 8.76-6.1c0-.22-.02-.44-.05-.66A2.2 2.2 0 0 0 22 12.14ZM7.04 13.7a1.56 1.56 0 1 1 3.12 0 1.56 1.56 0 0 1-3.12 0Zm8.72 4.13c-1.07 1.07-3.12 1.15-3.72 1.15-.6 0-2.65-.08-3.72-1.15a.4.4 0 0 1 .57-.57c.67.68 2.11.92 3.15.92 1.04 0 2.48-.24 3.15-.92a.4.4 0 1 1 .57.57Zm-.28-2.57a1.56 1.56 0 1 1 0-3.12 1.56 1.56 0 0 1 0 3.12Z" })
+	});
+}
+function LinkedInMark({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": true,
+		className,
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: "M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05a3.75 3.75 0 0 1 3.37-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28ZM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13ZM7.12 20.45H3.56V9h3.56v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0Z" })
+	});
+}
+//#endregion
+export { LinkedInMark, RedditMark, XMark };

package/dist/components/share-menu/share-menu.js

@@ -0,0 +1,140 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../core/animate-ui/components/radix/dropdown-menu.js";
+import { LinkedInMark, RedditMark, XMark } from "./share-marks.js";
+import { shareUrl } from "./share-urls.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Link, Mail, Send, Share2 } from "lucide-react";
+//#region src/components/share-menu/share-menu.tsx
+/** How long "Link copied" shows before the menu closes. */
+var COPIED_MS = 1400;
+var ALL_TARGETS = [
+	"copy",
+	"native",
+	"x",
+	"reddit",
+	"linkedin",
+	"telegram",
+	"email"
+];
+var DEFAULT_LABELS = {
+	copy: "Copy link",
+	copied: "Link copied",
+	native: "Share via…",
+	x: "Post on X",
+	reddit: "Share on Reddit",
+	linkedin: "Share on LinkedIn",
+	telegram: "Send on Telegram",
+	email: "Send by email"
+};
+var DEFAULT_ICONS = {
+	copy: /* @__PURE__ */ jsx(Link, { "aria-hidden": true }),
+	native: /* @__PURE__ */ jsx(Share2, { "aria-hidden": true }),
+	x: /* @__PURE__ */ jsx(XMark, { className: "size-4" }),
+	reddit: /* @__PURE__ */ jsx(RedditMark, { className: "size-4" }),
+	linkedin: /* @__PURE__ */ jsx(LinkedInMark, { className: "size-4" }),
+	telegram: /* @__PURE__ */ jsx(Send, { "aria-hidden": true }),
+	email: /* @__PURE__ */ jsx(Mail, { "aria-hidden": true })
+};
+function canShareNatively() {
+	return typeof navigator !== "undefined" && typeof navigator.share === "function";
+}
+/** Copied, and the moment it was, so the menu can say so and then close. */
+function useCopied(onDone) {
+	const [copied, setCopied] = React$1.useState(false);
+	const timer = React$1.useRef(null);
+	React$1.useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	return {
+		copied,
+		flash: React$1.useCallback(() => {
+			setCopied(true);
+			if (timer.current) clearTimeout(timer.current);
+			timer.current = setTimeout(() => {
+				setCopied(false);
+				onDone();
+			}, COPIED_MS);
+		}, [onDone])
+	};
+}
+/**
+* Share a link: copy it, hand it to the device's share sheet, or open a
+* site's own share page (X, Reddit, LinkedIn, Telegram) in a new tab, or start
+* an email. Copy says "Link copied" in place for a moment, then closes the
+* menu. Built on `DropdownMenu`, so focus, Escape and the arrow keys behave
+* like every other menu.
+*/
+function ShareMenu({ url, title, text, targets = ALL_TARGETS, labels, icons, trigger, align = "end", onShare, onCopyError }) {
+	const [open, setOpen] = React$1.useState(false);
+	const { copied, flash } = useCopied(React$1.useCallback(() => setOpen(false), []));
+	const words = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	const iconOf = (target) => icons?.[target] ?? DEFAULT_ICONS[target];
+	const shown = targets.filter((target) => target !== "native" || canShareNatively());
+	const actions = shown.filter((target) => target === "copy" || target === "native");
+	const sites = shown.filter((target) => target !== "copy" && target !== "native");
+	function copy(event) {
+		event.preventDefault();
+		navigator.clipboard.writeText(url).then(() => {
+			flash();
+			onShare?.("copy");
+		}).catch((error) => onCopyError?.(error));
+	}
+	function openSite(site) {
+		onShare?.(site);
+		const href = shareUrl(site, {
+			url,
+			title,
+			text
+		});
+		if (site === "email") {
+			window.location.assign(href);
+			return;
+		}
+		window.open(href, "_blank", "noopener,noreferrer");
+	}
+	function shareNatively() {
+		onShare?.("native");
+		navigator.share({
+			url,
+			title,
+			text
+		}).catch(() => void 0);
+	}
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align,
+			className: "min-w-52",
+			children: [
+				actions.map((target) => target === "copy" ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onSelect: copy,
+					children: [copied ? /* @__PURE__ */ jsx(Check, {
+						"aria-hidden": true,
+						className: "text-success"
+					}) : iconOf(target), /* @__PURE__ */ jsx("span", {
+						"aria-live": "polite",
+						children: copied ? words.copied : words.copy
+					})]
+				}, target) : /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onSelect: shareNatively,
+					children: [iconOf(target), words.native]
+				}, target)),
+				actions.length > 0 && sites.length > 0 ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+				sites.map((site) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onSelect: () => openSite(site),
+					children: [iconOf(site), words[site]]
+				}, site))
+			]
+		})]
+	});
+}
+ShareMenu.displayName = "ShareMenu";
+//#endregion
+export { ShareMenu };

package/dist/components/share-menu/share-urls.js

@@ -0,0 +1,15 @@
+//#region src/components/share-menu/share-urls.ts
+var q = encodeURIComponent;
+/** Where each site takes a post: its own share intent, filled in. */
+function shareUrl(site, { url, title, text }) {
+	const words = text ? `${title} — ${text}` : title;
+	switch (site) {
+		case "x": return `https://x.com/intent/post?url=${q(url)}&text=${q(words)}`;
+		case "reddit": return `https://www.reddit.com/submit?url=${q(url)}&title=${q(title)}`;
+		case "linkedin": return `https://www.linkedin.com/sharing/share-offsite/?url=${q(url)}`;
+		case "telegram": return `https://t.me/share/url?url=${q(url)}&text=${q(words)}`;
+		case "email": return `mailto:?subject=${q(title)}&body=${q(text ? `${text}\n\n${url}` : url)}`;
+	}
+}
+//#endregion
+export { shareUrl };

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Dialog } from 'radix-ui';
+import { HTMLMotionProps } from 'motion/react';
+import { k as StyleAxisProps, d as DensityProps } from '../../style-axes-DSQ2DGc5.js';
+
+type SheetProps$1 = React.ComponentProps<typeof Dialog.Root>;
+type SheetTriggerProps$1 = React.ComponentProps<typeof Dialog.Trigger>;
+type SheetCloseProps$1 = React.ComponentProps<typeof Dialog.Close>;
+type Side = 'top' | 'bottom' | 'left' | 'right';
+type SheetContentProps$1 = React.ComponentProps<typeof Dialog.Content> & HTMLMotionProps<'div'> & {
+    side?: Side;
+};
+type SheetHeaderProps$1 = React.ComponentProps<'div'>;
+type SheetFooterProps$1 = React.ComponentProps<'div'>;
+type SheetTitleProps$1 = React.ComponentProps<typeof Dialog.Title>;
+type SheetDescriptionProps$1 = React.ComponentProps<typeof Dialog.Description>;
+
+type SheetProps = SheetProps$1 & {
+    floating?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+};
+declare function Sheet({ floating, closeOnEscape, closeOnOutsideClick, ...props }: SheetProps): React.JSX.Element;
+type SheetTriggerProps = SheetTriggerProps$1;
+declare function SheetTrigger(props: SheetTriggerProps): React.JSX.Element;
+type SheetCloseProps = SheetCloseProps$1;
+declare function SheetClose(props: SheetCloseProps): React.JSX.Element;
+type SheetContentProps = SheetContentProps$1 & Pick<StyleAxisProps, 'radius' | 'elevation'> & DensityProps & {
+    showCloseButton?: boolean;
+};
+declare function SheetContent({ className, children, side, showCloseButton, onEscapeKeyDown, onPointerDownOutside, radius, elevation, density, style, ...props }: SheetContentProps): React.JSX.Element;
+type SheetHeaderProps = SheetHeaderProps$1;
+declare function SheetHeader({ className, ...props }: SheetHeaderProps): React.JSX.Element;
+type SheetFooterProps = SheetFooterProps$1;
+declare function SheetFooter({ className, ...props }: SheetFooterProps): React.JSX.Element;
+type SheetTitleProps = SheetTitleProps$1;
+declare function SheetTitle({ className, ...props }: SheetTitleProps): React.JSX.Element;
+type SheetDescriptionProps = SheetDescriptionProps$1;
+declare function SheetDescription({ className, ...props }: SheetDescriptionProps): React.JSX.Element;
+
+export { Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, type SheetDescriptionProps, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, type SheetProps, SheetTitle, type SheetTitleProps, SheetTrigger, type SheetTriggerProps };

package/dist/components/sheet/index.js

@@ -0,0 +1,2 @@
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "../../core/animate-ui/components/radix/sheet.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/components/showcase-card/index.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ReactNode, ReactElement } from 'react';
+
+/**
+ * Where the card's title goes: a page (a real link), a page of this app
+ * (`link` wraps the title in the router's own link, so it opens without a
+ * reload) or an action on this page (a button).
+ */
+type ShowcaseCardOpen = {
+    href: string;
+} | {
+    link: (title: ReactNode) => ReactElement;
+} | {
+    onOpen: () => void;
+    label: string;
+};
+interface ShowcaseCardProps {
+    /** The picture, filling the media area. */
+    media: ReactNode;
+    /** `bleed` (default) for a photo or drawing; `inset` for an icon on a tint, which `mediaClassName` gives. */
+    mediaLayout?: "bleed" | "inset";
+    /** On the media area: the inset tint, a different aspect. */
+    mediaClassName?: string;
+    /** Drawn over the picture, always visible (a rank numeral, a badge). */
+    mediaOverlay?: ReactNode;
+    /** The actions strip over the picture: on hover, always on touch screens. */
+    reveal?: ReactNode;
+    title: string;
+    /** What the title opens. Absent for a card whose one action is a button of its own (the footer's): the title is then plain text. */
+    open?: ShowcaseCardOpen;
+    /** Read with the title, before it (a screen-reader-only rank). */
+    titlePrefix?: ReactNode;
+    /** Beside the title, above the card's link (a popover button). */
+    titleAction?: ReactNode;
+    /** The row under the title: who made it, when, what it runs on. */
+    meta: ReactNode;
+    /** The bottom row: counters, what it brings. */
+    footer?: ReactNode;
+    /** On the body under the picture: a roomier card where it has the space. */
+    bodyClassName?: string;
+}
+
+/**
+ * A catalogue card on `MediaCard`: a picture with an actions strip that
+ * slides up over it, the name (the whole card opens it), a meta row and a
+ * footer row. Props only: builds, hardware parts or templates fill the same
+ * frame. Cards glide to their new places in a view transition
+ * (`view-transition-glide`), for instance when a filters panel opens beside
+ * the grid.
+ */
+declare function ShowcaseCard({ media, mediaLayout, mediaClassName, mediaOverlay, reveal, title, open, titlePrefix, titleAction, meta, footer, bodyClassName }: ShowcaseCardProps): React.JSX.Element;
+
+export { ShowcaseCard, type ShowcaseCardOpen, type ShowcaseCardProps };

package/dist/components/showcase-card/index.js

@@ -0,0 +1,2 @@
+import { ShowcaseCard } from "./showcase-card.js";
+export { ShowcaseCard };

package/dist/components/showcase-card/showcase-card.js

@@ -0,0 +1,75 @@
+import { cn } from "../../utils/cn.js";
+import { MediaCard, MediaCardAction, MediaCardBody, MediaCardFooter, MediaCardLink, MediaCardMedia, MediaCardMeta, MediaCardTitle } from "../media-card/media-card.js";
+import { MediaCardReveal } from "../media-card/media-card-reveal.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/showcase-card/showcase-card.tsx
+function TitleLink({ open, titlePrefix, title }) {
+	if (!open) return /* @__PURE__ */ jsxs(Fragment, { children: [titlePrefix, title] });
+	if ("href" in open) return /* @__PURE__ */ jsxs(MediaCardLink, {
+		href: open.href,
+		children: [titlePrefix, title]
+	});
+	if ("link" in open) return /* @__PURE__ */ jsx(MediaCardLink, {
+		asChild: true,
+		children: open.link(/* @__PURE__ */ jsxs(Fragment, { children: [titlePrefix, title] }))
+	});
+	return /* @__PURE__ */ jsx(MediaCardLink, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-label": open.label,
+			onClick: open.onOpen,
+			children: [titlePrefix, title]
+		})
+	});
+}
+/**
+* A catalogue card on `MediaCard`: a picture with an actions strip that
+* slides up over it, the name (the whole card opens it), a meta row and a
+* footer row. Props only: builds, hardware parts or templates fill the same
+* frame. Cards glide to their new places in a view transition
+* (`view-transition-glide`), for instance when a filters panel opens beside
+* the grid.
+*/
+function ShowcaseCard({ media, mediaLayout, mediaClassName, mediaOverlay, reveal, title, open, titlePrefix, titleAction, meta, footer, bodyClassName }) {
+	return /* @__PURE__ */ jsxs(MediaCard, {
+		elevation: "none",
+		className: "view-transition-glide h-full",
+		children: [/* @__PURE__ */ jsxs(MediaCardMedia, {
+			layout: mediaLayout,
+			className: mediaClassName,
+			children: [
+				media,
+				mediaOverlay,
+				reveal && /* @__PURE__ */ jsx(MediaCardReveal, {
+					variant: "strip",
+					className: "items-center justify-between gap-3",
+					children: reveal
+				})
+			]
+		}), /* @__PURE__ */ jsxs(MediaCardBody, {
+			className: cn("gap-3", bodyClassName),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2",
+					children: [/* @__PURE__ */ jsx(MediaCardTitle, {
+						className: "flex-1 font-semibold",
+						title,
+						children: /* @__PURE__ */ jsx(TitleLink, {
+							open,
+							titlePrefix,
+							title
+						})
+					}), titleAction && /* @__PURE__ */ jsx(MediaCardAction, { children: titleAction })]
+				}),
+				/* @__PURE__ */ jsx(MediaCardMeta, { children: meta }),
+				footer && /* @__PURE__ */ jsx(MediaCardFooter, {
+					className: "block",
+					children: footer
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { ShowcaseCard };