@espressif/dashboard-ui-components 1.11.1 → 1.12.0

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {
+    /**
+     * Also open when a mouse rests on the trigger or focus lands on it, and stay
+     * open while the pointer is over the content. A click still toggles it, so
+     * touch screens (which have no hover) open it the usual way; a click on a
+     * popover that hover opened keeps it open instead of closing it.
+     */
+    openOnHover?: boolean;
+    /** Milliseconds the pointer rests before a hover opens it. Defaults to 120. */
+    openDelay?: number;
+    /** Milliseconds after the pointer leaves before it closes. Defaults to 150. */
+    closeDelay?: number;
+    /**
+     * Inside a PopoverGroup: this popover's key, what the group's `value` and
+     * `onValueChange` name. Defaults to a generated one. Ignored outside a group.
+     */
+    value?: string;
+}
+declare function Popover({ openOnHover, openDelay, closeDelay, open: openProp, defaultOpen, onOpenChange, value, ...props }: PopoverProps): React.JSX.Element;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<StyleAxisProps, "radius" | "elevation"> & {
+    /**
+     * Render the content in a portal at the document body. Defaults to `true`.
+     * Set `false` to render inline in the DOM tree, e.g. to keep the content
+     * within a specific stacking context. Positioning is unaffected either way:
+     * Radix Popper uses a fixed strategy.
+     */
+    portal?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+
+interface PopoverGroupProps {
+    /** The `value` of the open popover, or null for none. Controlled. */
+    value?: string | null;
+    /** The open popover when uncontrolled. Defaults to none. */
+    defaultValue?: string | null;
+    /** Called when a popover in the group opens (its `value`) or the open one closes (null). */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * Milliseconds the pointer must rest on another trigger before its popover
+     * replaces the open one. Longer than a first open, so crossing triggers on
+     * the way to the open content does not switch it. Defaults to 350.
+     */
+    switchDelay?: number;
+    children: React.ReactNode;
+}
+/**
+ * Popovers that share one place on screen: at most one is open, and with
+ * `openOnHover` a hover moves the open panel from trigger to trigger with
+ * intent — the first opens after the popover's `openDelay`, another takes over
+ * only after `switchDelay`, and reaching the open content cancels a pending
+ * switch. For a grid or a row of items that each preview on hover.
+ */
+declare function PopoverGroup({ value: valueProp, defaultValue, onValueChange, switchDelay, children, }: PopoverGroupProps): React.JSX.Element;
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverGroup, type PopoverGroupProps, type PopoverProps, PopoverTrigger };

package/dist/components/popover/index.js

@@ -0,0 +1,3 @@
+import { PopoverGroup } from "../../core/popover-group.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../../core/popover.js";
+export { Popover, PopoverAnchor, PopoverContent, PopoverGroup, PopoverTrigger };

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { PreviewCard as PreviewCard$1 } from '@base-ui/react/preview-card';
+import { SpringOptions, HTMLMotionProps } from 'motion/react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+type PreviewCardProps$1 = React.ComponentProps<typeof PreviewCard$1.Root> & {
+    followCursor?: boolean | 'x' | 'y';
+    followCursorSpringOptions?: SpringOptions;
+};
+type PreviewCardTriggerProps$1 = React.ComponentProps<typeof PreviewCard$1.Trigger>;
+type PreviewCardPositionerProps = React.ComponentProps<typeof PreviewCard$1.Positioner>;
+type PreviewCardPopupProps = Omit<React.ComponentProps<typeof PreviewCard$1.Popup>, 'render'> & HTMLMotionProps<'div'>;
+type PreviewCardBackdropProps$1 = React.ComponentProps<typeof PreviewCard$1.Backdrop>;
+
+type PreviewCardProps = PreviewCardProps$1;
+declare function PreviewCard(props: PreviewCardProps): React.JSX.Element;
+type PreviewCardTriggerProps = PreviewCardTriggerProps$1;
+declare function PreviewCardTrigger(props: PreviewCardTriggerProps): React.JSX.Element;
+type PreviewCardPanelProps = PreviewCardPositionerProps & PreviewCardPopupProps & Pick<StyleAxisProps, 'radius' | 'elevation'>;
+declare function PreviewCardPanel({ className, align, sideOffset, style, children, radius, elevation, ...props }: PreviewCardPanelProps): React.JSX.Element;
+type PreviewCardBackdropProps = PreviewCardBackdropProps$1;
+declare function PreviewCardBackdrop(props: PreviewCardBackdropProps): React.JSX.Element;
+
+export { PreviewCard, PreviewCardBackdrop, type PreviewCardBackdropProps, PreviewCardPanel, type PreviewCardPanelProps, type PreviewCardProps, PreviewCardTrigger, type PreviewCardTriggerProps };

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

@@ -0,0 +1,2 @@
+import { PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger } from "../../core/animate-ui/components/base/preview-card.js";
+export { PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger };

package/dist/components/progress-bar/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Progress } from '@base-ui/react/progress';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+type ProgressProps$1 = React.ComponentProps<typeof Progress.Root>;
+
+type ProgressProps = ProgressProps$1;
+
+type ProgressBarSegment = {
+    value: number;
+    color: Color;
+    label?: string;
+    /** Shown on hover over this segment ("5 published with source"). */
+    tooltip?: React.ReactNode;
+};
+type ProgressBarProps = Omit<ProgressProps, 'value'> & {
+    value?: number;
+    showFakeProgress?: boolean;
+    label?: string;
+    showPercentage?: boolean;
+    color?: Color;
+    segments?: ProgressBarSegment[];
+    /**
+     * Segments only: draw each segment as its own rounded piece with a small gap
+     * between them, on no track, instead of one bar cut into colours. Reads as
+     * "parts of a whole" when neighbouring colours are close.
+     */
+    gapped?: boolean;
+};
+declare function ProgressBar({ showFakeProgress, value: valueProp, label, showPercentage, color, segments, gapped, className, ...props }: ProgressBarProps): React.JSX.Element;
+
+export { ProgressBar, type ProgressBarProps, type ProgressBarSegment };

package/dist/components/progress-bar/index.js

@@ -0,0 +1,2 @@
+import { ProgressBar } from "./progress-bar.js";
+export { ProgressBar };

package/dist/components/progress-bar/progress-bar.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../../utils/cn.js";
 import { isPresetColor, resolveColor } from "../../utils/color.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
 import { Progress, ProgressLabel, ProgressTrack, ProgressValue } from "../../core/animate-ui/components/base/progress.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -31,7 +32,7 @@ var presetIndicatorBgMap = {
 	gray: "bg-gray",
 	mist: "bg-mist"
 };
-function ProgressBar({ showFakeProgress = false, value: valueProp, label, showPercentage = false, color = "primary", segments, className, ...props }) {
+function ProgressBar({ showFakeProgress = false, value: valueProp, label, showPercentage = false, color = "primary", segments, gapped = false, className, ...props }) {
 	const [fakeValue, setFakeValue] = React$1.useState(FAKE_PROGRESS_MIN);
 	const intervalRef = React$1.useRef(null);
 	React$1.useEffect(() => {
@@ -56,7 +57,8 @@ function ProgressBar({ showFakeProgress = false, value: valueProp, label, showPe
 	const showHeader = label != null || showPercentage;
 	if (segments && segments.length > 0) {
 		const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
-		return /* @__PURE__ */ jsxs("div", {
+		const withTooltips = segments.some((s) => s.tooltip != null);
+		const segmented = /* @__PURE__ */ jsxs("div", {
 			className: cn("space-y-2", className),
 			children: [showHeader && /* @__PURE__ */ jsx("div", {
 				className: "flex items-center justify-between gap-1",
@@ -65,27 +67,41 @@ function ProgressBar({ showFakeProgress = false, value: valueProp, label, showPe
 					children: label
 				})
 			}), /* @__PURE__ */ jsx("div", {
-				className: "bg-mist-border relative h-2 w-full overflow-hidden rounded-full flex",
+				className: cn("relative flex h-2 w-full", gapped ? "gap-0.5" : "bg-mist-border overflow-hidden rounded-full"),
 				children: total === 0 ? null : segments.map((seg, idx) => {
 					const widthPct = Math.max(0, seg.value) / total * 100;
 					if (widthPct === 0) return null;
 					const isPreset = isPresetColor(seg.color);
-					return /* @__PURE__ */ jsx("div", {
-						className: cn("h-full", isPreset ? presetIndicatorBgMap[seg.color] : void 0),
+					const bar = /* @__PURE__ */ jsx("div", {
+						className: cn("h-full", gapped && "rounded-full", isPreset ? presetIndicatorBgMap[seg.color] : void 0),
 						style: {
 							width: `${widthPct}%`,
 							...isPreset ? {} : resolveColor(seg.color, "bg").style
 						},
 						"aria-label": seg.label
 					}, idx);
+					if (seg.tooltip == null) return bar;
+					return /* @__PURE__ */ jsxs(Tooltip, {
+						side: "top",
+						sideOffset: 6,
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							asChild: true,
+							children: bar
+						}), /* @__PURE__ */ jsx(TooltipContent, { children: seg.tooltip })]
+					}, idx);
 				})
 			})]
 		});
+		return withTooltips ? /* @__PURE__ */ jsx(TooltipProvider, {
+			openDelay: 0,
+			closeDelay: 0,
+			children: segmented
+		}) : segmented;
 	}
 	return /* @__PURE__ */ jsxs(Progress, {
 		value: (showFakeProgress ? fakeValue : valueProp) ?? 0,
 		max: 100,
-		className: cn("space-y-2", className),
+		className: cn("space-y-2 [&>[data-slot=progress-track]]:mb-0", className),
 		...props,
 		children: [showHeader && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between gap-1",

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { S as Size } from '../../index-BQANnKs9.js';
+
+interface RadioOption {
+    value: string;
+    label: string | ReactNode;
+    disabled?: boolean;
+}
+type RadioGroupSize = Size;
+interface RadioGroupProps {
+    options: RadioOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: 'horizontal' | 'vertical';
+    disabled?: boolean;
+    className?: string;
+    size?: RadioGroupSize;
+}
+
+declare function RadioGroup({ options, value, defaultValue, onValueChange, orientation, disabled, className, size, }: RadioGroupProps): React.JSX.Element;
+
+export { RadioGroup, type RadioGroupProps, type RadioGroupSize, type RadioOption };

package/dist/components/radio-group/index.js

@@ -0,0 +1,2 @@
+import { RadioGroup } from "./radio-group.js";
+export { RadioGroup };

package/dist/components/rank-numeral/index.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+type RankNumeralSize = "default" | "lg";
+type RankNumeralFill = "none" | "card";
+interface RankNumeralProps {
+    /** The rank to draw (1, 2, 3…). */
+    value: number;
+    /** `default` is 72px, `lg` 128px. Default `default`. */
+    size?: RankNumeralSize;
+    /**
+     * Inside the outline: `none` lets the background through (a flat tint);
+     * `card` fills it with the card colour so it reads over a photo. Default `none`.
+     */
+    fill?: RankNumeralFill;
+    /**
+     * Position and colour. The outline is drawn in the text colour
+     * (`text-primary`, `text-white`…); place it with absolute classes — it is
+     * made to bleed off the bottom edge of a media block (`absolute -bottom-6 left-3`).
+     */
+    className?: string;
+}
+
+/**
+ * A large outlined numeral for a ranked list — the "1", "2", "3" a top-N
+ * shelf draws in the corner of each card. Decorative: it is hidden from
+ * assistive technology, so the card's own accessible name must carry the rank.
+ */
+declare function RankNumeral({ value, size, fill, className }: RankNumeralProps): React.JSX.Element;
+
+export { RankNumeral, type RankNumeralFill, type RankNumeralProps, type RankNumeralSize };

package/dist/components/rank-numeral/index.js

@@ -0,0 +1,2 @@
+import { RankNumeral } from "./rank-numeral.js";
+export { RankNumeral };

package/dist/components/rank-numeral/rank-numeral.js

@@ -0,0 +1,26 @@
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/rank-numeral/rank-numeral.tsx
+var SIZE = {
+	default: "text-7xl [-webkit-text-stroke-width:1.5px]",
+	lg: "text-9xl [-webkit-text-stroke-width:2px]"
+};
+var FILL = {
+	none: "[-webkit-text-fill-color:transparent]",
+	card: "[-webkit-text-fill-color:var(--color-card)]"
+};
+/**
+* A large outlined numeral for a ranked list — the "1", "2", "3" a top-N
+* shelf draws in the corner of each card. Decorative: it is hidden from
+* assistive technology, so the card's own accessible name must carry the rank.
+*/
+function RankNumeral({ value, size = "default", fill = "none", className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-slot": "rank-numeral",
+		className: cn("pointer-events-none select-none font-extrabold leading-none tracking-tighter tabular-nums", "[-webkit-text-stroke-color:currentColor]", FILL[fill], SIZE[size], className),
+		children: value
+	});
+}
+//#endregion
+export { RankNumeral };

package/dist/components/reaction-button/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ReactElement } from 'react';
+import { P as PresetColor } from '../../index-BQANnKs9.js';
+
+interface ReactionButtonProps {
+    /** Whether the viewer has reacted (a like, an upvote, a want). */
+    pressed: boolean;
+    /** How many have reacted, the viewer included. */
+    count: number;
+    /** Called with the new state on click. */
+    onPressedChange: (pressed: boolean) => void;
+    /** The mark — a Lucide element such as `<Heart />`. Filled while pressed. */
+    icon: ReactElement<{
+        className?: string;
+    }>;
+    /** The accessible name for a state and count ("I want Desk clock, 3 so far"). */
+    ariaLabel: (pressed: boolean, count: number) => string;
+    /** Default `secondary`. */
+    color?: PresetColor;
+    disabled?: boolean;
+    className?: string;
+}
+
+/**
+ * A reaction with its count: a like, an upvote, "I want this too". Switching
+ * it ON is celebrated once — the mark pops, a ring spreads, six dots burst out
+ * and the count ticks into place; switching it off plays nothing. Motion only
+ * when the person allows it.
+ */
+declare function ReactionButton({ pressed, count, onPressedChange, icon, ariaLabel, color, disabled, className, }: ReactionButtonProps): React.JSX.Element;
+
+export { ReactionButton, type ReactionButtonProps };

package/dist/components/reaction-button/index.js

@@ -0,0 +1,2 @@
+import { ReactionButton } from "./reaction-button.js";
+export { ReactionButton };

package/dist/components/reaction-button/reaction-button.js

@@ -0,0 +1,50 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { cloneElement, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/reaction-button/reaction-button.tsx
+/**
+* A reaction with its count: a like, an upvote, "I want this too". Switching
+* it ON is celebrated once — the mark pops, a ring spreads, six dots burst out
+* and the count ticks into place; switching it off plays nothing. Motion only
+* when the person allows it.
+*/
+function ReactionButton({ pressed, count, onPressedChange, icon, ariaLabel, color = "secondary", disabled, className }) {
+	const [popping, setPopping] = useState(false);
+	function handleClick() {
+		setPopping(!pressed);
+		onPressedChange(!pressed);
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		color,
+		size: "sm",
+		fullWidth: false,
+		"aria-pressed": pressed,
+		"aria-label": ariaLabel(pressed, count),
+		disabled,
+		onClick: handleClick,
+		className: cn("relative gap-1.5 overflow-visible tabular-nums", className),
+		startIcon: /* @__PURE__ */ jsxs("span", {
+			className: "relative inline-flex",
+			children: [cloneElement(icon, {
+				"aria-hidden": true,
+				className: cn(icon.props.className, pressed && "fill-current", popping && "motion-safe:animate-heart-pop"),
+				onAnimationEnd: () => setPopping(false)
+			}), popping && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute inset-0 hidden rounded-full border-2 border-current motion-safe:block motion-safe:animate-espd-ripple"
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute top-1/2 left-1/2 hidden size-1 -translate-1/2 rounded-full motion-safe:block motion-safe:animate-sparkle"
+			})] })]
+		}),
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "reaction-count",
+			className: cn("inline-block", popping && "motion-safe:animate-rise-in"),
+			children: count
+		}, count)
+	});
+}
+//#endregion
+export { ReactionButton };

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/** One value on the plate, with its unit beside it in a dimmer ink. */
+interface ReadoutSegment {
+    value: string;
+    unit?: string;
+    /** What the value is ("Pitch"): drawn before it when the plate is `labelled`, and its tooltip either way. */
+    label?: string;
+}
+interface ReadoutProps {
+    segments: readonly ReadoutSegment[];
+    /** `selected`: its controls are open. `error`: the part did not answer. `stale`: not live yet (set before power-on). */
+    state?: "normal" | "selected" | "error" | "stale";
+    /** Draw each value's label before it, in a dimmer ink: for a plate with no drawing beside it to say what two numbers are. */
+    labelled?: boolean;
+    /** A button that opens the part's controls; without it, a plain display. */
+    onClick?: () => void;
+    /** Read out in full, with words for the units ("Room sensor, 23.1 degrees, 45.5 percent humidity"). */
+    "aria-label"?: string;
+    className?: string;
+}
+
+/**
+ * An instrument's display: values in a monospace ink on a dark plate, each
+ * with its unit beside it. The plate carries the dark theme itself (`.dark`),
+ * so it reads as the same instrument in both themes, like artwork — and stays
+ * made of tokens. With `onClick` it is a real (toggle) button.
+ */
+declare function Readout({ segments, state, labelled, onClick, "aria-label": label, className }: ReadoutProps): React.JSX.Element;
+
+export { Readout, type ReadoutProps, type ReadoutSegment };

package/dist/components/readout/index.js

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

package/dist/components/readout/readout.js

@@ -0,0 +1,63 @@
+import { cn } from "../../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/readout/readout.tsx
+var STATE = {
+	normal: "border-border",
+	selected: "border-primary ring-1 ring-primary",
+	error: "border-error",
+	stale: "border-border opacity-70"
+};
+function Segments({ segments, error, labelled }) {
+	return segments.map((segment, i) => /* @__PURE__ */ jsxs("span", {
+		title: segment.label,
+		className: cn("flex items-baseline gap-1 px-1.5", i > 0 && "border-l border-border"),
+		children: [
+			labelled && segment.label && /* @__PURE__ */ jsx("span", {
+				className: "font-sans text-foreground-secondary",
+				children: segment.label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: error ? "text-error" : "text-success",
+				children: segment.value
+			}),
+			segment.unit && /* @__PURE__ */ jsx("span", {
+				className: "text-foreground-secondary",
+				children: segment.unit
+			})
+		]
+	}, i));
+}
+/**
+* An instrument's display: values in a monospace ink on a dark plate, each
+* with its unit beside it. The plate carries the dark theme itself (`.dark`),
+* so it reads as the same instrument in both themes, like artwork — and stays
+* made of tokens. With `onClick` it is a real (toggle) button.
+*/
+function Readout({ segments, state = "normal", labelled = false, onClick, "aria-label": label, className }) {
+	const classes = cn("dark inline-flex h-6 items-center rounded-xs border bg-background font-mono text-xs leading-none tabular-nums", STATE[state], className);
+	if (!onClick) return /* @__PURE__ */ jsx("span", {
+		"aria-label": label,
+		"data-slot": "readout",
+		className: classes,
+		children: /* @__PURE__ */ jsx(Segments, {
+			segments,
+			error: state === "error",
+			labelled
+		})
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		"aria-pressed": state === "selected",
+		onClick,
+		"data-slot": "readout",
+		className: cn(classes, "cursor-pointer outline-none hover:border-primary focus-visible:ring-2 focus-visible:ring-ring"),
+		children: /* @__PURE__ */ jsx(Segments, {
+			segments,
+			error: state === "error",
+			labelled
+		})
+	});
+}
+//#endregion
+export { Readout };

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+type RequirementListSize = "sm" | "default" | "lg";
+/** One requirement, already resolved to display text and a pass/fail state. */
+interface RequirementListItem {
+    /** Stable identifier, used as the list key. */
+    id: string;
+    /** Display text for the requirement, e.g. "Must contain an uppercase letter". */
+    label: string;
+    /** Whether the requirement is currently satisfied. */
+    met: boolean;
+    /**
+     * A second, quieter line under the label: what the requirement means, or an
+     * example of meeting it ("A relay, an LED, a temperature sensor"). Muted in
+     * both states, so only the label carries met/unmet.
+     */
+    description?: string;
+}
+interface RequirementListProps extends Omit<HTMLAttributes<HTMLUListElement>, "children"> {
+    items: RequirementListItem[];
+    /** Defaults to "sm" — the size that reads as helper text under a field. */
+    size?: RequirementListSize;
+    /** Screen-reader suffix for satisfied rows. Defaults to "Requirement met". */
+    metLabel?: string;
+    /** Screen-reader suffix for unsatisfied rows. Defaults to "Requirement not met". */
+    unmetLabel?: string;
+    /**
+     * Whether to announce state changes as they happen. Defaults to `true`, which is
+     * right for a checklist that updates while the user types. Set `false` when the
+     * list is static, so it is not announced as a live region for no reason.
+     */
+    live?: boolean;
+    className?: string;
+}
+
+/**
+ * Live checklist of requirements a value does and does not yet satisfy — password
+ * policy rules, plan prerequisites, upload conditions.
+ *
+ * Pure: labels arrive already translated and the pass/fail state is computed by the
+ * caller, so the component knows nothing about the rules themselves.
+ *
+ * Each row carries a screen-reader-only state label. Without it the met/unmet
+ * distinction would be conveyed only by icon shape and colour, both invisible to a
+ * screen reader, and the polite live region would have no text change to announce.
+ *
+ * Carries no outer spacing so the surface hosting it owns its placement.
+ */
+declare const RequirementList: React.ForwardRefExoticComponent<RequirementListProps & React.RefAttributes<HTMLUListElement>>;
+
+export { RequirementList, type RequirementListItem, type RequirementListProps, type RequirementListSize };

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

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

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

@@ -17,25 +17,39 @@ var stateVisuals = {
 		textClass: "text-muted-foreground"
 	}
 };
-/** Aligned with SimpleList / VerticalStepper size scales. */
+/**
+* Aligned with SimpleList / VerticalStepper size scales. `iconTop` centres the
+* icon on the label's first line when a description makes the row two lines
+* (the row then aligns to the top); `description` is one step smaller than
+* the label, `describedRowGap` the roomier spacing two-line rows need.
+*/
 var sizeStyles = {
 	sm: {
 		text: "text-xs",
 		icon: "h-3.5 w-3.5 shrink-0",
 		gap: "gap-2",
-		rowGap: "gap-1"
+		rowGap: "gap-1",
+		iconTop: "mt-px",
+		description: "text-xs",
+		describedRowGap: "gap-2"
 	},
 	default: {
 		text: "text-sm",
 		icon: "size-4 shrink-0",
 		gap: "gap-2",
-		rowGap: "gap-1.5"
+		rowGap: "gap-1.5",
+		iconTop: "mt-0.5",
+		description: "text-xs",
+		describedRowGap: "gap-2.5"
 	},
 	lg: {
 		text: "text-base",
 		icon: "size-5 shrink-0",
 		gap: "gap-2.5",
-		rowGap: "gap-2"
+		rowGap: "gap-2",
+		iconTop: "mt-0.5",
+		description: "text-sm",
+		describedRowGap: "gap-3"
 	}
 };
 /**
@@ -53,22 +67,29 @@ var sizeStyles = {
 */
 var RequirementList = forwardRef(function RequirementList({ items, size = "sm", metLabel = "Requirement met", unmetLabel = "Requirement not met", live = true, className, ...rest }, ref) {
 	const styles = sizeStyles[size];
+	const described = items.some((item) => item.description);
 	return /* @__PURE__ */ jsx("ul", {
 		ref,
 		"aria-live": live ? "polite" : void 0,
 		...rest,
-		className: cn("flex flex-col", styles.rowGap, className),
+		className: cn("flex flex-col", described ? styles.describedRowGap : styles.rowGap, className),
 		children: items.map((item) => {
 			const visuals = stateVisuals[item.met ? "met" : "unmet"];
 			const Icon = visuals.icon;
 			return /* @__PURE__ */ jsxs("li", {
-				className: cn("flex items-center transition-colors", styles.gap, styles.text, visuals.textClass),
+				className: cn("flex transition-colors", item.description ? "items-start" : "items-center", styles.gap, styles.text, visuals.textClass),
 				children: [
 					/* @__PURE__ */ jsx(Icon, {
-						className: styles.icon,
+						className: cn(styles.icon, item.description && styles.iconTop),
 						"aria-hidden": true
 					}),
-					item.label,
+					item.description ? /* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-col gap-0.5",
+						children: [/* @__PURE__ */ jsx("span", { children: item.label }), /* @__PURE__ */ jsx("span", {
+							className: cn(styles.description, "text-muted-foreground"),
+							children: item.description
+						})]
+					}) : item.label,
 					/* @__PURE__ */ jsx("span", {
 						className: "sr-only",
 						children: item.met ? metLabel : unmetLabel

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { R as ResizableGroupProps, c as ResizablePanelProps, d as ResizableSeparatorProps } from '../../resizable.props-RxFY5tm_.js';
+export { P as PanelSize, a as ResizableLayout, b as ResizablePanelHandle } from '../../resizable.props-RxFY5tm_.js';
+import 'react-resizable-panels';
+
+/**
+ * A row or column of panels the person can resize by dragging the separators
+ * between them (react-resizable-panels, which also makes every separator a
+ * keyboard control). The group fills its parent; give the parent a height.
+ * Compose with `ResizablePanel` and `ResizableSeparator`.
+ */
+declare function ResizableGroup({ orientation, children, defaultLayout, onLayoutChanged, id, className }: ResizableGroupProps): React.JSX.Element;
+
+/**
+ * One panel of a `ResizableGroup`. It clips its content, so what is inside
+ * scrolls itself (give it `h-full min-h-0`). react-resizable-panels writes
+ * `overflow: auto` inline on every panel, which puts a native scrollbar on
+ * the panel the moment its content runs a pixel over; `overflow` is the one
+ * inline style it allows overriding, and it takes `!important` to win.
+ */
+declare function ResizablePanel({ id, children, collapsible, collapsedSize, collapsedThreshold, defaultSize, minSize, maxSize, panelRef, className }: ResizablePanelProps): React.JSX.Element;
+
+/**
+ * The handle between two panels: a hairline on the page, a wider strip to the
+ * pointer, lit in the primary colour while it is pointed at, held or focused.
+ * Keyboard: arrows step, Home/End go to the ends, Enter collapses a
+ * collapsible neighbour (react-resizable-panels' own behaviour).
+ */
+declare function ResizableSeparator({ label, orientation, className }: ResizableSeparatorProps): React.JSX.Element;
+
+export { ResizableGroup, ResizableGroupProps, ResizablePanel, ResizablePanelProps, ResizableSeparator, ResizableSeparatorProps };