@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/floating-window/index.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface FloatingWindowPosition {
+    x: number;
+    y: number;
+}
+interface FloatingWindowProps {
+    /** The window's accessible name, shown in its bar and on its pill. */
+    title: string;
+    children: ReactNode;
+    /** Where it sits, from the viewport's top-left; null = the default spot. */
+    position: FloatingWindowPosition | null;
+    /** Called once a drag ends, with the new spot (kept inside the viewport). */
+    onMove: (position: FloatingWindowPosition) => void;
+    /** Folded to a pill in the bottom-left corner; the pill opens the window again where it was. */
+    minimized?: boolean;
+    onMinimize?: () => void;
+    /** Opens the window again from its pill. */
+    onRestore?: () => void;
+    /** Puts the content back where it came from (also Escape). */
+    onDock: () => void;
+    onClose: () => void;
+    dockLabel: string;
+    closeLabel: string;
+    minimizeLabel?: string;
+    /** The pill's accessible name. */
+    restoreLabel?: string;
+    /** Something inside wants the person (an expert waiting for an answer): the pill carries a dot, and this is said with its name. */
+    attention?: string;
+    /** The drag handle's accessible name. */
+    moveLabel: string;
+    className?: string;
+}
+
+/**
+ * A small window floating over the page, moved by its bar: a non-modal
+ * dialog, so the page behind it stays live. Its bar carries Minimize (to a
+ * pill in the bottom-left corner), the way back (Dock) and the way out
+ * (Close); Escape docks. Wrap `onMinimize` / `onRestore` in
+ * `startViewTransition` and the window morphs into its pill and back.
+ */
+declare function FloatingWindow({ title, children, position, onMove, minimized, onMinimize, onRestore, onDock, onClose, dockLabel, closeLabel, minimizeLabel, restoreLabel, attention, moveLabel, className }: FloatingWindowProps): React.JSX.Element;
+
+export { FloatingWindow, type FloatingWindowPosition, type FloatingWindowProps };

package/dist/components/floating-window/index.js

@@ -0,0 +1,2 @@
+import { FloatingWindow } from "./floating-window.js";
+export { FloatingWindow };

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

@@ -0,0 +1,28 @@
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/components/form/index.js

@@ -0,0 +1,2 @@
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "../../core/form.js";
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/components/fullscreen-dialog/fullscreen-dialog.js

@@ -19,7 +19,7 @@ var iconSizeMap = {
 		icon: "size-10 [&_svg]:size-10"
 	}
 };
-function FullscreenDialog({ icon, iconSize = "lg", heading, secondaryText, children, open, onOpenChange, closeOnEscape = true, noGutters = false }) {
+function FullscreenDialog({ icon, iconSize = "lg", heading, secondaryText, children, open, onOpenChange, closeOnEscape = true, noGutters = false, scrollable = true }) {
 	const sizeClasses = iconSizeMap[iconSize];
 	return /* @__PURE__ */ jsx(Dialog, {
 		open,
@@ -55,9 +55,13 @@ function FullscreenDialog({ icon, iconSize = "lg", heading, secondaryText, child
 							children: secondaryText
 						})
 					}),
-					/* @__PURE__ */ jsx(ScrollArea, {
+					scrollable ? /* @__PURE__ */ jsx(ScrollArea, {
 						className: cn("flex-1 min-h-0", noGutters ? "p-0" : "px-6 py-4"),
 						children
+					}) : /* @__PURE__ */ jsx("div", {
+						"data-slot": "fullscreen-dialog-body",
+						className: cn("flex-1 min-h-0 overflow-hidden", noGutters ? "p-0" : "px-6 py-4"),
+						children
 					})
 				]
 			})

package/dist/components/fullscreen-dialog/index.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+declare const iconSizeMap: {
+    readonly sm: {
+        readonly avatar: "h-12 w-12";
+        readonly icon: "size-6 [&_svg]:size-6";
+    };
+    readonly md: {
+        readonly avatar: "h-16 w-16";
+        readonly icon: "size-8 [&_svg]:size-8";
+    };
+    readonly lg: {
+        readonly avatar: "h-20 w-20";
+        readonly icon: "size-10 [&_svg]:size-10";
+    };
+};
+type FullscreenDialogIconSize = keyof typeof iconSizeMap;
+interface FullscreenDialogProps {
+    icon?: React.ReactNode;
+    iconSize?: FullscreenDialogIconSize;
+    heading?: string | React.ReactNode;
+    secondaryText?: string | React.ReactNode;
+    children: React.ReactNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    closeOnEscape?: boolean;
+    noGutters?: boolean;
+    /**
+     * `true` (default): the body scrolls when its content is taller than the
+     * screen. `false`: the body is exactly the height left under the heading
+     * and does not scroll, so content can fill it (`h-full`) — a picture shown
+     * whole, a canvas, a player.
+     */
+    scrollable?: boolean;
+}
+declare function FullscreenDialog({ icon, iconSize, heading, secondaryText, children, open, onOpenChange, closeOnEscape, noGutters, scrollable, }: FullscreenDialogProps): React.JSX.Element;
+
+export { FullscreenDialog, type FullscreenDialogProps };

package/dist/components/fullscreen-dialog/index.js

@@ -0,0 +1,2 @@
+import { FullscreenDialog } from "./fullscreen-dialog.js";
+export { FullscreenDialog };

package/dist/components/horizontal-stepper/horizontal-stepper.js

@@ -0,0 +1,122 @@
+import { cn } from "../../utils/cn.js";
+import { resolveColor } from "../../utils/color.js";
+import { cloneElement, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/horizontal-stepper/horizontal-stepper.tsx
+var sizes = {
+	sm: {
+		node: "size-7",
+		icon: "size-3.5",
+		label: "text-[11px]",
+		description: "text-[11px]",
+		line: "top-3.5",
+		lineFromNode: "left-9"
+	},
+	default: {
+		node: "size-9",
+		icon: "size-4.5",
+		label: "text-xs",
+		description: "text-xs",
+		line: "top-4.5",
+		lineFromNode: "left-11"
+	}
+};
+var tones = {
+	default: {
+		label: "text-foreground",
+		upcomingLabel: "text-muted-foreground",
+		upcoming: "border-border bg-background text-muted-foreground",
+		track: "bg-border"
+	},
+	inverse: {
+		label: "text-scrim-foreground",
+		upcomingLabel: "text-scrim-foreground/60",
+		upcoming: "border-scrim-foreground/40 bg-transparent text-scrim-foreground/70",
+		track: "bg-scrim-foreground/25"
+	}
+};
+var NODE_POP = "scale-50 opacity-0 transition duration-100 group-hover/media-card:scale-100 group-hover/media-card:opacity-100 group-hover/media-card:duration-450 group-hover/media-card:ease-overshoot group-focus-within/media-card:scale-100 group-focus-within/media-card:opacity-100 group-focus-within/media-card:duration-450 group-focus-within/media-card:ease-overshoot motion-reduce:scale-100 motion-reduce:opacity-100 motion-reduce:transition-none";
+var NODE_DELAYS = [
+	"group-hover/media-card:delay-0 group-focus-within/media-card:delay-0",
+	"group-hover/media-card:delay-120 group-focus-within/media-card:delay-120",
+	"group-hover/media-card:delay-200 group-focus-within/media-card:delay-200",
+	"group-hover/media-card:delay-260 group-focus-within/media-card:delay-260"
+];
+var LINE_FILL = "scale-x-0 transition-transform duration-100 group-hover/media-card:scale-x-100 group-hover/media-card:delay-300 group-hover/media-card:duration-600 group-hover/media-card:ease-emphasized group-focus-within/media-card:scale-x-100 group-focus-within/media-card:delay-300 group-focus-within/media-card:duration-600 group-focus-within/media-card:ease-emphasized motion-reduce:scale-x-100 motion-reduce:transition-none";
+function sized(icon, className) {
+	if (isValidElement(icon)) {
+		const el = icon;
+		return cloneElement(el, { className: cn(className, el.props.className) });
+	}
+	return icon;
+}
+/**
+* A few stops in a row joined by a line — how far something got (requested,
+* building, shipped). Steps reached are filled in `color`; the line is filled
+* up to the current step. A `stale` step (done, but out of date) is filled in
+* `warning`, a `failed` one in `error`. Read as one image with `ariaLabel`, since the status is also said
+* in words beside it.
+*/
+function HorizontalStepper({ steps, color = "primary", size = "default", tone = "default", animateIn, ariaLabel = "Progress", align = "center", semantics = "image", className }) {
+	const s = sizes[size];
+	const t = tones[tone];
+	const fill = resolveColor(color, "bg");
+	const onFill = resolveColor(color, "fg");
+	const animate = animateIn === "media-card-reveal";
+	const start = align === "start";
+	const asList = semantics === "list";
+	return /* @__PURE__ */ jsx("ol", {
+		role: asList ? void 0 : "img",
+		"aria-label": ariaLabel,
+		"data-align": align,
+		className: cn("m-0 flex w-full list-none items-start p-0", start && "gap-0", className),
+		children: steps.map((step, index) => {
+			const reached = step.status !== "not_started";
+			const stale = step.status === "stale";
+			const failed = step.status === "failed";
+			const next = steps[index + 1];
+			return /* @__PURE__ */ jsxs("li", {
+				"aria-hidden": asList ? void 0 : true,
+				"aria-current": asList && step.status === "in_progress" ? "step" : void 0,
+				className: cn("relative flex min-w-0 flex-1 flex-col gap-1.5", start ? "items-start pr-4 last:pr-0" : "items-center"),
+				children: [
+					start && next && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("absolute right-2 h-0.5 -translate-y-1/2 rounded-full", s.line, s.lineFromNode, t.track),
+						children: next.status !== "not_started" && /* @__PURE__ */ jsx("span", {
+							className: cn("absolute inset-0 origin-left rounded-full", fill.className, animate && LINE_FILL),
+							style: fill.style
+						})
+					}),
+					!start && index > 0 && /* @__PURE__ */ jsx("span", {
+						className: cn("absolute right-1/2 left-[-50%] h-0.5 -translate-y-1/2 rounded-full", s.line, t.track),
+						children: reached && /* @__PURE__ */ jsx("span", {
+							className: cn("absolute inset-0 origin-left rounded-full", fill.className, animate && LINE_FILL),
+							style: fill.style
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-status": step.status,
+						"aria-hidden": asList ? true : void 0,
+						className: cn("relative z-10 flex shrink-0 items-center justify-center rounded-full border-2", s.node, stale && "border-transparent bg-warning text-warning-foreground", failed && "border-transparent bg-error text-error-foreground", !stale && !failed && (reached ? cn("border-transparent", fill.className, onFill.className) : t.upcoming), animate && cn(NODE_POP, NODE_DELAYS[Math.min(index, NODE_DELAYS.length - 1)])),
+						style: reached && !stale && !failed && (fill.style || onFill.style) ? {
+							...fill.style,
+							...onFill.style
+						} : void 0,
+						children: sized(step.icon, s.icon)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn("max-w-full font-semibold", step.description ? "mt-1" : "truncate", s.label, reached ? t.label : t.upcomingLabel, start && "text-left"),
+						children: step.label
+					}),
+					step.description && /* @__PURE__ */ jsx("span", {
+						className: cn("max-w-full leading-snug text-muted-foreground", s.description, start ? "text-left" : "text-center"),
+						children: step.description
+					})
+				]
+			}, step.id);
+		})
+	});
+}
+//#endregion
+export { HorizontalStepper };

package/dist/components/horizontal-stepper/index.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { C as Color } from '../../index-BQANnKs9.js';
+import { c as VerticalStepperStepStatus } from '../../vertical-stepper.props-BXYcbW70.js';
+
+/** One stop on the line. `status` is the same as a `VerticalStepper` step's, so data moves between the two. */
+interface HorizontalStepperStep {
+    id: string;
+    /** Already-translated label under the node. */
+    label: string;
+    /** The node's icon: a Lucide element or any pre-sized element. */
+    icon: ReactNode;
+    status: VerticalStepperStepStatus;
+    /** Already-translated line under the label ("Plug it in over USB"). Wraps; never truncated. */
+    description?: string;
+}
+type HorizontalStepperSize = "sm" | "default";
+/**
+ * `center` (default): each node centred over its label, the line running
+ * node to node. `start`: nodes and text on the left of each column, the line
+ * running from each node to the right — for steps that carry a description.
+ */
+type HorizontalStepperAlign = "center" | "start";
+/**
+ * `image` (default): read as one picture by `ariaLabel`, because the status
+ * is said in words beside it. `list`: read as an ordered list of its steps,
+ * the `in_progress` one marked `aria-current="step"` — when the stepper IS
+ * the instructions (a "how to flash" sequence).
+ */
+type HorizontalStepperSemantics = "image" | "list";
+interface HorizontalStepperProps {
+    steps: HorizontalStepperStep[];
+    /** Fill of the steps reached (complete and current) and of the line between them. Default `primary`. */
+    color?: Color;
+    /** `sm`: 28px nodes and small labels, for a card. Default `default`. */
+    size?: HorizontalStepperSize;
+    /**
+     * `inverse` draws it for a dark overlay such as a `MediaCardReveal` panel, in
+     * either theme (scrim tokens). Default `default`.
+     */
+    tone?: "default" | "inverse";
+    /**
+     * `media-card-reveal`: the nodes pop in one by one and the line fills each
+     * time the surrounding `MediaCard` opens its reveal (hover or keyboard
+     * focus). Only meaningful inside a `MediaCardReveal`, where it starts hidden.
+     * Unset: drawn at rest. Nothing moves under reduced motion.
+     */
+    animateIn?: "media-card-reveal";
+    /**
+     * Accessible name for the whole line, read instead of its parts
+     * ("Progress: in progress"). Default `"Progress"`.
+     */
+    ariaLabel?: string;
+    /** Default `center`. */
+    align?: HorizontalStepperAlign;
+    /** Default `image`. */
+    semantics?: HorizontalStepperSemantics;
+    className?: string;
+}
+
+/**
+ * A few stops in a row joined by a line — how far something got (requested,
+ * building, shipped). Steps reached are filled in `color`; the line is filled
+ * up to the current step. A `stale` step (done, but out of date) is filled in
+ * `warning`, a `failed` one in `error`. Read as one image with `ariaLabel`, since the status is also said
+ * in words beside it.
+ */
+declare function HorizontalStepper({ steps, color, size, tone, animateIn, ariaLabel, align, semantics, className, }: HorizontalStepperProps): React.JSX.Element;
+
+export { HorizontalStepper, type HorizontalStepperAlign, type HorizontalStepperProps, type HorizontalStepperSemantics, type HorizontalStepperSize, type HorizontalStepperStep };

package/dist/components/horizontal-stepper/index.js

@@ -0,0 +1,2 @@
+import { HorizontalStepper } from "./horizontal-stepper.js";
+export { HorizontalStepper };

package/dist/components/icon-avatar/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { I as IconAvatarProps } from '../../icon-avatar.props-RYtw2eSW.js';
+export { a as IconAvatarRingProps, b as IconAvatarVariant } from '../../icon-avatar.props-RYtw2eSW.js';
+import '../../index-BQANnKs9.js';
+import '../../variant-D81RhpbR.js';
+
+declare function IconAvatar({ size, color, variant, ring, children, className, discClassName, discStyle, }: IconAvatarProps): React.JSX.Element;
+
+export { IconAvatar, IconAvatarProps };

package/dist/components/icon-avatar/index.js

@@ -0,0 +1,2 @@
+import { IconAvatar } from "./icon-avatar.js";
+export { IconAvatar };

package/dist/components/icon-text-action-card/icon-text-action-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 { PRESET_RING_CLASSES, renderGradientBackdropLayers, renderLeadingIconRow, renderTitleAndDescriptionBlocks, ringTransitionClass, useSimpleClickableCardSurface } from "../simple-clickable-card/simple-clickable-card-shared.js";
 import * as React$1 from "react";
@@ -35,7 +36,8 @@ function shellPresetRing(color) {
 	const c = color ?? "gray";
 	return isPresetColor(c) ? PRESET_RING_CLASSES[c] : "";
 }
-var IconTextActionCard = React$1.forwardRef(({ icon, title, description, truncateTitle = false, truncateDescription = false, onClick, actions, showActionsOnlyOnHover = false, actionsPlacement = "auto", color = "gray", iconAvatarVariant: iconAvatarVariantProp, iconAvatarColor: iconAvatarColorProp, size = "default", variant = "soft", className, type = "button", disabled, ...rest }, ref) => {
+var IconTextActionCard = React$1.forwardRef(({ icon, title, description, truncateTitle = false, truncateDescription = false, onClick, actions, showActionsOnlyOnHover = false, actionsPlacement = "auto", color = "gray", iconAvatarVariant: iconAvatarVariantProp, iconAvatarColor: iconAvatarColorProp, size = "default", variant = "soft", className, type = "button", disabled, radius, ...rest }, ref) => {
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
 	const { onMouseEnter: onMouseEnterProp, onMouseLeave: onMouseLeaveProp, ...domRest } = rest;
 	const interactive = onClick != null;
 	const showActionsSlot = actions != null;
@@ -80,6 +82,7 @@ var IconTextActionCard = React$1.forwardRef(({ icon, title, description, truncat
 		gradientZStyle: false
 	});
 	const surfaceStyleMerged = {
+		...partStyle,
 		...isArbitraryGradient ? surfaceStyleWithoutGradientBg : styles.containerStyle,
 		...ringAccentStyle
 	};
@@ -114,7 +117,7 @@ var IconTextActionCard = React$1.forwardRef(({ icon, title, description, truncat
 		children: /* @__PURE__ */ jsxs("div", {
 			ref,
 			"aria-disabled": disabled === true ? true : void 0,
-			className: cn("relative isolate inline-flex w-full cursor-default items-center overflow-hidden rounded-xl text-left ring-offset-background", variant === "gradient" && "group", disabled && "pointer-events-none opacity-50", s.rowPad, surfaceContainerClass, className),
+			className: cn("relative isolate inline-flex w-full cursor-default items-center overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-xl)))] text-left ring-offset-background", variant === "gradient" && "group", disabled && "pointer-events-none opacity-50", s.rowPad, surfaceContainerClass, className),
 			style: surfaceStyleMerged,
 			...domRest,
 			children: [gradientLayers, staticBlock]
@@ -126,7 +129,7 @@ var IconTextActionCard = React$1.forwardRef(({ icon, title, description, truncat
 		children: /* @__PURE__ */ jsxs("div", {
 			ref,
 			"aria-disabled": disabled === true ? true : void 0,
-			className: cn("relative isolate inline-flex w-full max-w-full cursor-default items-center overflow-hidden rounded-xl text-left ring-offset-background", ACTIONS_ROW_CLASS, showActionsSlot && "group", variant === "gradient" && "group", disabled && "pointer-events-none opacity-50", s.rowPad, s.gap, surfaceContainerClass, className),
+			className: cn("relative isolate inline-flex w-full max-w-full cursor-default items-center overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-xl)))] text-left ring-offset-background", ACTIONS_ROW_CLASS, showActionsSlot && "group", variant === "gradient" && "group", disabled && "pointer-events-none opacity-50", s.rowPad, s.gap, surfaceContainerClass, className),
 			style: surfaceStyleMerged,
 			...domRest,
 			children: [
@@ -144,7 +147,7 @@ var IconTextActionCard = React$1.forwardRef(({ icon, title, description, truncat
 		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", ACTIONS_ROW_CLASS, ringTransitionClass, showActionsSlot && "group", variant === "gradient" && "group", "focus-within:outline-none hover:ring-2 hover:ring-offset-2 focus-within:ring-2 focus-within:ring-offset-2", shellRingClass, disabled && "pointer-events-none opacity-50", s.rowPad, s.gap, 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", ACTIONS_ROW_CLASS, ringTransitionClass, showActionsSlot && "group", variant === "gradient" && "group", "focus-within:outline-none hover:ring-2 hover:ring-offset-2 focus-within:ring-2 focus-within:ring-offset-2", shellRingClass, disabled && "pointer-events-none opacity-50", s.rowPad, s.gap, surfaceContainerClass, className),
 			style: surfaceStyleMerged,
 			...domRest,
 			children: [
@@ -175,8 +178,9 @@ var IconTextActionCard = React$1.forwardRef(({ icon, title, description, truncat
 			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/icon-text-action-card/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { a as IconTextActionCardProps } from '../../icon-text-action-card.props-B2ggncUK.js';
+export { I as IconTextActionCardActionsPlacement, b as IconTextActionCardVariant } from '../../icon-text-action-card.props-B2ggncUK.js';
+import '../../index-BQANnKs9.js';
+import '../../variant-D81RhpbR.js';
+import '../../style-axes-DSQ2DGc5.js';
+import '../../icon-avatar.props-RYtw2eSW.js';
+
+declare const IconTextActionCard: React.ForwardRefExoticComponent<IconTextActionCardProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>>;
+
+export { IconTextActionCard, IconTextActionCardProps };

package/dist/components/icon-text-action-card/index.js

@@ -0,0 +1,2 @@
+import { IconTextActionCard } from "./icon-text-action-card.js";
+export { IconTextActionCard };

package/dist/components/identicon/identicon.js

@@ -0,0 +1,33 @@
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/identicon/identicon.tsx
+/** Each cell is drawn a touch smaller than its slot, with soft corners, so the pattern reads as tiles. */
+var INSET = .06;
+var CELL = 1 - INSET * 2;
+var CORNER = .16;
+/**
+* A generated avatar: a grid of square cells, the "on" ones drawn in the
+* current text colour on a transparent ground. It takes the cells rather than
+* a name, so the app that owns an identity also owns how it turns into a
+* picture. Scales to whatever box `className` gives it.
+*/
+function Identicon({ cells, columns = 5, title, className }) {
+	const cols = Math.max(1, Math.floor(columns));
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: `0 0 ${cols} ${Math.max(1, Math.ceil(cells.length / cols))}`,
+		role: title ? "img" : void 0,
+		"aria-label": title,
+		"aria-hidden": title ? void 0 : true,
+		className: cn("block size-full shrink-0", className),
+		fill: "currentColor",
+		children: cells.map((on, index) => on ? /* @__PURE__ */ jsx("rect", {
+			x: index % cols + INSET,
+			y: Math.floor(index / cols) + INSET,
+			width: CELL,
+			height: CELL,
+			rx: CORNER
+		}, index) : null)
+	});
+}
+//#endregion
+export { Identicon as default };

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+interface IdenticonProps {
+    /**
+     * The pattern, row by row: `true` cells are drawn. Usually 25 (5×5) derived
+     * from a stable hash of who it stands for — the derivation is the app's, so
+     * one person gets one picture everywhere that app draws them.
+     */
+    cells: readonly boolean[];
+    /** Cells per row. Default 5. */
+    columns?: number;
+    /** Accessible name. Without one the pattern is decorative (aria-hidden). */
+    title?: string;
+    /** Size and colour: the cells are drawn in `currentColor` (`size-10 text-primary`). */
+    className?: string;
+}
+
+/**
+ * A generated avatar: a grid of square cells, the "on" ones drawn in the
+ * current text colour on a transparent ground. It takes the cells rather than
+ * a name, so the app that owns an identity also owns how it turns into a
+ * picture. Scales to whatever box `className` gives it.
+ */
+declare function Identicon({ cells, columns, title, className }: IdenticonProps): React.JSX.Element;
+
+export { Identicon, type IdenticonProps };

package/dist/components/identicon/index.js

@@ -0,0 +1,2 @@
+import Identicon from "./identicon.js";
+export { Identicon };

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+declare function parseSvgViewBoxAspectRatio(svg: string): number | undefined;
+declare const illustrationRegistry: readonly [{
+    readonly id: "no-search-results";
+    readonly svg: string;
+    readonly aspectRatio: number;
+}, {
+    readonly id: "rm-data-download";
+    readonly svg: string;
+    readonly aspectRatio: number;
+}, {
+    readonly id: "rm-dashboard-update";
+    readonly svg: string;
+    readonly aspectRatio: number;
+}];
+type IllustrationType = (typeof illustrationRegistry)[number]["id"];
+declare const illustrationsById: Record<IllustrationType, (typeof illustrationRegistry)[number]>;
+
+interface IllustrationProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "dangerouslySetInnerHTML"> {
+    type: IllustrationType;
+    size?: number;
+    /** When set, the SVG is exposed to assistive tech with this label; omit for decorative art. */
+    alt?: string;
+    /**
+     * Plays the illustration's SMIL animations. Off by default: the static
+     * resting frame is rendered and every animation element is stripped, so
+     * nothing moves on pages that only need a picture. Illustrations without
+     * animations are unaffected.
+     */
+    animated?: boolean;
+}
+
+declare const Illustration: React.ForwardRefExoticComponent<IllustrationProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Illustration, type IllustrationProps, type IllustrationType, illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio };

package/dist/components/illustration/index.js

@@ -0,0 +1,3 @@
+import { illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio } from "./illustration-registry.js";
+import { Illustration } from "./illustration.js";
+export { Illustration, illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio };