@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/components/resizable/index.js

@@ -0,0 +1,4 @@
+import { ResizableGroup } from "./resizable-group.js";
+import { ResizablePanel } from "./resizable-panel.js";
+import { ResizableSeparator } from "./resizable-separator.js";
+export { ResizableGroup, ResizablePanel, ResizableSeparator };

package/dist/components/resizable/resizable-group.js

@@ -0,0 +1,23 @@
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Group } from "react-resizable-panels";
+//#region src/components/resizable/resizable-group.tsx
+/**
+* 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`.
+*/
+function ResizableGroup({ orientation, children, defaultLayout, onLayoutChanged, id, className }) {
+	return /* @__PURE__ */ jsx(Group, {
+		id,
+		orientation,
+		defaultLayout,
+		onLayoutChanged,
+		"data-slot": "resizable-group",
+		className: cn("flex h-full min-h-0 w-full min-w-0", className),
+		children
+	});
+}
+//#endregion
+export { ResizableGroup };

package/dist/components/resizable/resizable-panel.js

@@ -0,0 +1,28 @@
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Panel } from "react-resizable-panels";
+//#region src/components/resizable/resizable-panel.tsx
+/**
+* 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.
+*/
+function ResizablePanel({ id, children, collapsible, collapsedSize, collapsedThreshold, defaultSize, minSize, maxSize, panelRef, className }) {
+	return /* @__PURE__ */ jsx(Panel, {
+		id,
+		collapsible,
+		collapsedSize,
+		collapsedThreshold,
+		defaultSize,
+		minSize,
+		maxSize,
+		panelRef,
+		"data-slot": "resizable-panel",
+		className: cn("min-h-0 min-w-0 overflow-clip!", className),
+		children
+	});
+}
+//#endregion
+export { ResizablePanel };

package/dist/components/resizable/resizable-separator.js

@@ -0,0 +1,24 @@
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "react-resizable-panels";
+//#region src/components/resizable/resizable-separator.tsx
+/**
+* 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).
+*/
+function ResizableSeparator({ label, orientation, className }) {
+	const upright = orientation === "horizontal";
+	return /* @__PURE__ */ jsx(Separator, {
+		"aria-label": label,
+		"data-slot": "resizable-separator",
+		className: cn("group/separator relative shrink-0 outline-none", upright ? "w-1.5 cursor-col-resize" : "h-1.5 cursor-row-resize", className),
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn("absolute bg-border transition-colors duration-150 group-hover/separator:bg-primary group-focus-visible/separator:bg-primary group-active/separator:bg-primary motion-reduce:transition-none", upright ? "inset-y-0 left-1/2 w-px -translate-x-1/2" : "inset-x-0 top-1/2 h-px -translate-y-1/2")
+		})
+	});
+}
+//#endregion
+export { ResizableSeparator };

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface RevealProps {
+    /** The section has scrolled into view. */
+    revealed: boolean;
+    /** Its place in the entrance, 0 first; each one starts a beat later. */
+    order: 0 | 1 | 2 | 3;
+    /** Arrive slightly small too, and settle to full size (a card). */
+    grow?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+
+/**
+ * One part of a section's entrance: it rises into place and fades in when
+ * `revealed` turns true (the section first scrolled into view — pair it with
+ * `useIsInView` or an observer of your own). Uniform motion, so Tailwind
+ * utilities on library tokens; under reduced motion it is simply there.
+ */
+declare function Reveal({ revealed, order, grow, className, children }: RevealProps): React.JSX.Element;
+
+export { Reveal, type RevealProps };

package/dist/components/reveal/index.js

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

package/dist/components/reveal/reveal.js

@@ -0,0 +1,24 @@
+import { cn } from "../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/reveal/reveal.tsx
+var DELAY = [
+	"delay-0",
+	"delay-150",
+	"delay-300",
+	"delay-450"
+];
+/**
+* One part of a section's entrance: it rises into place and fades in when
+* `revealed` turns true (the section first scrolled into view — pair it with
+* `useIsInView` or an observer of your own). Uniform motion, so Tailwind
+* utilities on library tokens; under reduced motion it is simply there.
+*/
+function Reveal({ revealed, order, grow = false, className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "reveal",
+		className: cn("transition duration-700 ease-emphasized motion-reduce:transition-none", DELAY[order], revealed ? "translate-y-0 scale-100 opacity-100" : cn("translate-y-8 opacity-0", grow && "scale-97"), className),
+		children
+	});
+}
+//#endregion
+export { Reveal };

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    /**
+     * Which directions scroll. Default `"vertical"`: content is kept to the
+     * area's width, so wide children (tables, code, scrolling tab strips) use
+     * their own horizontal scrolling instead of stretching past the edge and
+     * being clipped. `"horizontal"` and `"both"` let content grow wider than the
+     * area and add the matching scrollbar.
+     */
+    orientation?: ScrollAreaOrientation;
+};
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * Which directions scroll. Default `"vertical"`: content is kept to the
+     * area's width, so wide children (tables, code, scrolling tab strips) use
+     * their own horizontal scrolling instead of stretching past the edge and
+     * being clipped. `"horizontal"` and `"both"` let content grow wider than the
+     * area and add the matching scrollbar.
+     */
+    orientation?: ScrollAreaOrientation;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollBar };

package/dist/components/scroll-area/index.js

@@ -0,0 +1,2 @@
+import { ScrollArea, ScrollBar } from "../../core/scroll-area.js";
+export { ScrollArea, ScrollBar };

package/dist/components/scrollable-sections/index.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface ScrollableSectionsProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Initial section id; scrolls into view without animation on mount. */
+    defaultValue?: string;
+    /**
+     * Optional override for which element receives scroll events for scroll-spy.
+     * By default the component listens on every vertically scrollable ancestor of
+     * the root (plus `window`), so shells with `overflow-y: auto` on `<main>` work
+     * without wiring a ref. Pass this when you need a single specific scrollport or
+     * auto-detection picks the wrong container.
+     */
+    scrollRootRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * CSS length applied as `top` on the sticky tab strip (desktop) and on the sticky
+     * section select (mobile).
+     * Increase this when the tabs render inside a shell that already has a sticky
+     * header at `top: 0` — pass a value tall enough to clear that header,
+     * e.g. `"calc(var(--espd-shell-header-height, var(--espd-header-height)) + 8rem)"`. Defaults to `"1rem"`.
+     *
+     * Note: an ancestor with `overflow: hidden` disables `position: sticky`, so the
+     * strip and select only stick when the scrolling ancestor is the page or a
+     * container with `overflow-y: auto`.
+     */
+    stickyTop?: string;
+}
+interface ScrollableSectionsTabsProps extends React.ComponentPropsWithoutRef<"div">, Pick<StyleAxisProps, "radius" | "border"> {
+}
+interface ScrollableSectionsTabProps extends React.ComponentPropsWithoutRef<"div"> {
+    id: string;
+    /** Shown in the mobile select when `children` is not a plain string. */
+    label?: string;
+}
+interface ScrollableSectionsContentProps extends React.ComponentPropsWithoutRef<"div"> {
+    id: string;
+}
+
+declare function ScrollableSectionsRoot({ className, children, defaultValue, scrollRootRef, stickyTop, style, ...rest }: ScrollableSectionsProps): React.JSX.Element;
+declare function ScrollableSectionsTabs({ className, children, radius, border, style, ...rest }: ScrollableSectionsTabsProps): React.JSX.Element;
+declare namespace ScrollableSectionsTabs {
+    var displayName: string;
+}
+declare function ScrollableSectionsTab(_props: ScrollableSectionsTabProps): null;
+declare namespace ScrollableSectionsTab {
+    var displayName: string;
+}
+declare function ScrollableSectionsContent({ id, className, children, ...rest }: ScrollableSectionsContentProps): React.JSX.Element;
+declare namespace ScrollableSectionsContent {
+    var displayName: string;
+}
+declare const ScrollableSections: typeof ScrollableSectionsRoot & {
+    Tabs: typeof ScrollableSectionsTabs;
+    Tab: typeof ScrollableSectionsTab;
+    Content: typeof ScrollableSectionsContent;
+};
+
+export { ScrollableSections, type ScrollableSectionsContentProps, type ScrollableSectionsProps, type ScrollableSectionsTabProps, type ScrollableSectionsTabsProps };

package/dist/components/scrollable-sections/index.js

@@ -0,0 +1,2 @@
+import { ScrollableSections } from "./scrollable-sections.js";
+export { ScrollableSections };

package/dist/components/scrollable-sections/scrollable-sections.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../core/select.js";
 import { Tabs, TabsList, TabsTrigger } from "../../core/animate-ui/components/animate/tabs.js";
 import * as React$1 from "react";
@@ -201,7 +202,12 @@ function ScrollableSectionsRoot({ className, children, defaultValue, scrollRootR
 		})
 	});
 }
-function ScrollableSectionsTabs({ className, children, ...rest }) {
+function ScrollableSectionsTabs({ className, children, radius, border, style, ...rest }) {
+	const axes = useStyleAxes({
+		radius,
+		border,
+		style
+	}, ["radius", "border"]);
 	const { activeId, selectSection, setTabsItems } = useScrollableSections();
 	const tabNodes = React$1.useMemo(() => React$1.Children.toArray(children).filter(isTabElement), [children]);
 	const items = React$1.useMemo(() => tabNodes.map((node) => {
@@ -215,12 +221,14 @@ function ScrollableSectionsTabs({ className, children, ...rest }) {
 		setTabsItems(items);
 	}, [items, setTabsItems]);
 	if (tabNodes.length === 0) return /* @__PURE__ */ jsx("div", {
-		className: cn("rounded-lg border border-border p-2", className),
+		className: cn("rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-lg)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,1px))] border-border p-2", className),
+		style: axes.style,
 		...rest
 	});
 	const tabValue = activeId && items.some((i) => i.id === activeId) ? activeId : items[0]?.id ?? "";
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("rounded-lg border border-border p-2", className),
+		className: cn("rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-lg)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,1px))] border-border p-2", className),
+		style: axes.style,
 		...rest,
 		children: /* @__PURE__ */ jsx(Tabs, {
 			value: tabValue,

package/dist/components/search-box/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { InputHTMLAttributes } from 'react';
+import { S as Size } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+/**
+ * What names the text field. A search box usually has no visible label, so
+ * pass `aria-label` (or point `aria-labelledby` at a heading, or `id` at a
+ * `<label htmlFor>`); the placeholder is not an accessible name everywhere.
+ * These go to the `<input>`, not the wrapper.
+ */
+type SearchBoxInputProps = Pick<InputHTMLAttributes<HTMLInputElement>, "id" | "name" | "aria-label" | "aria-labelledby" | "aria-describedby">;
+interface SearchBoxProps extends Pick<StyleAxisProps, "radius" | "border">, SearchBoxInputProps {
+    placeholder?: string;
+    /**
+     * The text in the box, controlled. Pass it with `onValueChange` when
+     * something outside the box changes the search (a "Clear all" button, the
+     * URL). Omit it and the box keeps its own text, starting at `defaultValue`.
+     */
+    value?: string;
+    /** The starting text of an uncontrolled box. Ignored when `value` is set. */
+    defaultValue?: string;
+    onSearch: (value: string) => void;
+    onClear: () => void;
+    onValueChange?: (value: string) => void;
+    size?: Size;
+    className?: string;
+}
+
+declare function SearchBox({ placeholder, value: controlledValue, defaultValue, onSearch, onClear, onValueChange, size, className, radius, border, id, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: SearchBoxProps): React.JSX.Element;
+
+export { SearchBox, type SearchBoxProps };

package/dist/components/search-box/index.js

@@ -0,0 +1,2 @@
+import SearchBox from "./search-box.js";
+export { SearchBox };

package/dist/components/search-box/search-box.js

@@ -1,12 +1,21 @@
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Button } from "../button/button.js";
 import { outlineSearchShellClasses, searchFieldContainerSizeClasses, searchFieldIconSizeClasses, searchFieldInputTextClasses } from "../search-field-shell.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Search, X } from "lucide-react";
 //#region src/components/search-box/search-box.tsx
-function SearchBox({ placeholder, onSearch, onClear, onValueChange, size = "default", className }) {
-	const [value, setValue] = useState("");
+function SearchBox({ placeholder, value: controlledValue, defaultValue = "", onSearch, onClear, onValueChange, size = "default", className, radius, border, id, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }) {
+	const axes = useStyleAxes({
+		radius,
+		border
+	}, ["radius", "border"]);
+	const [ownValue, setOwnValue] = useState(defaultValue);
+	const value = controlledValue ?? ownValue;
+	const setValue = (next) => {
+		if (controlledValue === void 0) setOwnValue(next);
+	};
 	const handleKeyDown = (e) => {
 		if (e.key === "Enter") onSearch(value.trim());
 	};
@@ -22,9 +31,15 @@ function SearchBox({ placeholder, onSearch, onClear, onValueChange, size = "defa
 	const iconSize = searchFieldIconSizeClasses[size];
 	const trailingBtnClass = "h-auto w-auto p-0 m-0 shrink-0";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(outlineSearchShellClasses, "flex w-full items-center gap-2 rounded-md", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 ring-offset-background", searchFieldContainerSizeClasses[size], className),
+		className: cn(outlineSearchShellClasses, "flex w-full items-center gap-2 rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))]", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 ring-offset-background", searchFieldContainerSizeClasses[size], className),
+		style: axes.style,
 		children: [/* @__PURE__ */ jsx("input", {
 			type: "text",
+			id,
+			name,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-describedby": ariaDescribedBy,
 			value,
 			onChange: (e) => handleValueChange(e.target.value),
 			onKeyDown: handleKeyDown,

package/dist/components/search-field-shell.js

@@ -1,6 +1,6 @@
 //#region src/components/search-field-shell.ts
 /** Matches `buttonVariants` outline surface (border, bg, shadow, hover). */
-var outlineSearchShellClasses = "border border-input bg-background transition-colors hover:bg-accent hover:text-accent-foreground";
+var outlineSearchShellClasses = "border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] border-input bg-background transition-colors hover:bg-accent hover:text-accent-foreground";
 var searchFieldContainerSizeClasses = {
 	default: "h-9 px-4 py-2 text-sm",
 	sm: "h-8 px-3 text-xs",

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { S as Size } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & Pick<StyleAxisProps, "radius" | "border"> & {
+    size?: Size;
+    /**
+     * Field chrome matching `Input`: a label row above the trigger and an
+     * error line below it. When none of `label`, `required`, `hintContent`,
+     * `error` or `errorContent` is set the trigger renders as a bare
+     * button, exactly as before these props existed.
+     */
+    label?: React.ReactNode;
+    required?: boolean;
+    hintContent?: React.ReactNode;
+    error?: boolean;
+    errorContent?: React.ReactNode;
+};
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & Pick<StyleAxisProps, "border" | "radius"> & {
+    size?: Size;
+    /**
+     * Field chrome matching `Input`: a label row above the trigger and an
+     * error line below it. When none of `label`, `required`, `hintContent`,
+     * `error` or `errorContent` is set the trigger renders as a bare
+     * button, exactly as before these props existed.
+     */
+    label?: React.ReactNode;
+    required?: boolean;
+    hintContent?: React.ReactNode;
+    error?: boolean;
+    errorContent?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<StyleAxisProps, "radius" | "elevation"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue };

package/dist/components/select/index.js

@@ -0,0 +1,2 @@
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "../../core/select.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

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

@@ -2,11 +2,11 @@
 import { cn } from "../../utils/cn.js";
 import { TooltipProvider } from "../../core/animate-ui/components/animate/tooltip.js";
 import { Checkbox } from "../../core/checkbox/motion-checkbox.js";
-import { FormFieldMirrors, SelectableCardListElementIndicator, SelectableCardListRowContent, controlAriaLabel, sizeStyles } from "./selectable-card-list-shared.js";
+import { FormFieldMirrors, SelectableCardListElementIndicator, SelectableCardListRowContent, controlAriaLabel, selectionClassName, sizeStyles } from "./selectable-card-list-shared.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/selectable-card-list/checkbox-card-list.tsx
 function CheckboxCardList(props) {
-	const { data, value, onChange, size, className, ariaLabel, ariaLabelledBy, name, form, element = "auto" } = props;
+	const { data, value, onChange, size, className, ariaLabel, ariaLabelledBy, name, form, element = "auto", rowStyle, selectionStyle = "border" } = props;
 	const s = sizeStyles[size];
 	const useNativeControl = element === "auto";
 	const isRowSelected = (id) => value.includes(id);
@@ -33,7 +33,7 @@ function CheckboxCardList(props) {
 			}), data.map((item) => {
 				const selected = isRowSelected(item.id);
 				const aria = controlAriaLabel(item);
-				const rowClassName = cn("flex cursor-pointer items-center rounded-lg border-2 bg-card text-left transition-colors", selected ? "border-primary" : "border-border", s.rowPad, s.gap, item.disabled && "cursor-not-allowed opacity-50", !item.disabled && !selected && "hover:bg-accent/10 hover:border-primary/20");
+				const rowClassName = cn("flex cursor-pointer items-center rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-lg)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,2px))] bg-card text-left transition-colors", selectionClassName(selected, selectionStyle), s.rowPad, s.gap, item.disabled && "cursor-not-allowed opacity-50", !item.disabled && !selected && "hover:bg-accent/10 hover:border-primary/20");
 				const rowContent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 					className: cn("flex min-w-0 flex-1 items-center", s.gap),
 					children: /* @__PURE__ */ jsx(SelectableCardListRowContent, {
@@ -55,6 +55,7 @@ function CheckboxCardList(props) {
 				})] });
 				if (useNativeControl) return /* @__PURE__ */ jsx("label", {
 					className: rowClassName,
+					style: rowStyle,
 					children: rowContent
 				}, item.id);
 				return /* @__PURE__ */ jsx("div", {
@@ -64,6 +65,7 @@ function CheckboxCardList(props) {
 					"aria-label": aria,
 					tabIndex: item.disabled ? -1 : 0,
 					className: rowClassName,
+					style: rowStyle,
 					onClick: () => {
 						if (item.disabled) return;
 						handleChecked(item.id, !selected);

package/dist/components/selectable-card-list/index.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+type SelectableCardListSize = "sm" | "default" | "lg";
+/** Display-only indicator on each row; selection semantics follow `allowMultiple`. */
+type SelectableCardListElement = "auto" | "switch" | "icon";
+/** When `primaryText` is not a plain string, `ariaLabel` must be supplied. */
+type SelectableCardListItem = (SelectableCardListItemCommon & {
+    primaryText: string;
+}) | (SelectableCardListItemCommon & {
+    primaryText: ReactNode;
+    ariaLabel: string;
+});
+/** The fields every item has, whatever its `primaryText`. Not exported: the union above is the public shape. */
+type SelectableCardListItemCommon = {
+    id: string;
+    /** Drawn in a round avatar before the text. Optional: without one the row starts with its text. */
+    icon?: ReactNode;
+    /** One line under the primary text, truncated with a tooltip. */
+    secondaryText?: ReactNode;
+    /**
+     * A line under the secondary text that is never truncated: why the row is
+     * suggested ("You said 'buzzer'"), or why it is disabled. In the primary
+     * colour, muted on a disabled row.
+     */
+    note?: ReactNode;
+    disabled?: boolean;
+};
+type CommonSelectableCardListProps = Pick<StyleAxisProps, "radius" | "border"> & {
+    data: SelectableCardListItem[];
+    size?: SelectableCardListSize;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /**
+     * When set, mirrors native radio / checkbox group behavior for form submission:
+     * single value → one `<input type="hidden" name={name} value={selectedId} />`;
+     * multiple → one hidden per selected id (same `name`, like a checkbox group).
+     * Use `name="field[]"` if your server expects an array from repeated keys.
+     */
+    name?: string;
+    /** Associates hidden inputs with a `<form id="...">` when the list is not nested inside that form. */
+    form?: string;
+    /**
+     * Row indicator visuals only. `auto` uses checkbox (multi) or radio (single).
+     * `switch` and `icon` replace the native control; `allowMultiple` still governs selection.
+     */
+    element?: SelectableCardListElement;
+    /**
+     * How a selected row shows it. `border` (default): a primary border.
+     * `tint`: a very subtle primary background, with the border in that same
+     * tint. `none`: no change; the row keeps its normal border and background
+     * (the indicator still shows the selection).
+     */
+    cardSelectionStyle?: CardSelectionStyle;
+};
+/** See `cardSelectionStyle`. Exported to the list's own modules, not from the package. */
+type CardSelectionStyle = "border" | "tint" | "none";
+/** Single selection; rendered as a radio group. */
+type SelectableCardListSingleProps = CommonSelectableCardListProps & {
+    allowMultiple?: false;
+    value: string;
+    onChange: (value: string) => void;
+};
+/** Multiple selection; rendered as checkboxes. */
+type SelectableCardListMultiProps = CommonSelectableCardListProps & {
+    allowMultiple: true;
+    value: string[];
+    onChange: (value: string[]) => void;
+};
+type SelectableCardListProps = SelectableCardListSingleProps | SelectableCardListMultiProps;
+
+declare function SelectableCardList(props: SelectableCardListProps): React.JSX.Element;
+
+export { SelectableCardList, type SelectableCardListElement, type SelectableCardListItem, type SelectableCardListMultiProps, type SelectableCardListProps, type SelectableCardListSingleProps, type SelectableCardListSize };

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

@@ -0,0 +1,2 @@
+import { SelectableCardList } from "./selectable-card-list.js";
+export { SelectableCardList };

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

@@ -2,15 +2,15 @@
 import { cn } from "../../utils/cn.js";
 import { TooltipProvider } from "../../core/animate-ui/components/animate/tooltip.js";
 import { Radio, RadioGroup } from "../../core/animate-ui/components/base/radio.js";
-import { FormFieldMirrors, SelectableCardListElementIndicator, SelectableCardListRowContent, controlAriaLabel, sizeStyles } from "./selectable-card-list-shared.js";
+import { FormFieldMirrors, SelectableCardListElementIndicator, SelectableCardListRowContent, controlAriaLabel, selectionClassName, sizeStyles } from "./selectable-card-list-shared.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/selectable-card-list/radio-card-list.tsx
-function RadioCardListRows({ data, value, onChange, size, element, s }) {
+function RadioCardListRows({ data, value, onChange, size, element, s, rowStyle, selectionStyle = "border" }) {
 	const useNativeControl = element === "auto";
 	return data.map((item) => {
 		const selected = value === item.id;
 		const aria = controlAriaLabel(item);
-		const rowClassName = cn("flex cursor-pointer items-center rounded-lg border-2 bg-card text-left transition-colors", selected ? "border-primary" : "border-border", s.rowPad, s.gap, item.disabled && "cursor-not-allowed opacity-50", !item.disabled && !selected && "hover:bg-accent/10 hover:border-primary/20");
+		const rowClassName = cn("flex cursor-pointer items-center rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-lg)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,2px))] bg-card text-left transition-colors", selectionClassName(selected, selectionStyle), s.rowPad, s.gap, item.disabled && "cursor-not-allowed opacity-50", !item.disabled && !selected && "hover:bg-accent/10 hover:border-primary/20");
 		const rowContent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: cn("flex min-w-0 flex-1 items-center", s.gap),
 			children: /* @__PURE__ */ jsx(SelectableCardListRowContent, {
@@ -31,6 +31,7 @@ function RadioCardListRows({ data, value, onChange, size, element, s }) {
 		})] });
 		if (useNativeControl) return /* @__PURE__ */ jsx("label", {
 			className: rowClassName,
+			style: rowStyle,
 			children: rowContent
 		}, item.id);
 		return /* @__PURE__ */ jsx("div", {
@@ -40,6 +41,7 @@ function RadioCardListRows({ data, value, onChange, size, element, s }) {
 			"aria-label": aria,
 			tabIndex: item.disabled ? -1 : 0,
 			className: rowClassName,
+			style: rowStyle,
 			onClick: () => {
 				if (item.disabled) return;
 				onChange(item.id);
@@ -55,7 +57,7 @@ function RadioCardListRows({ data, value, onChange, size, element, s }) {
 		}, item.id);
 	});
 }
-function RadioCardList({ data, value, onChange, size, className, ariaLabel, ariaLabelledBy, name, form, element = "auto" }) {
+function RadioCardList({ data, value, onChange, size, className, ariaLabel, ariaLabelledBy, name, form, element = "auto", rowStyle, selectionStyle }) {
 	const s = sizeStyles[size];
 	return /* @__PURE__ */ jsx(TooltipProvider, {
 		openDelay: 300,
@@ -77,7 +79,9 @@ function RadioCardList({ data, value, onChange, size, className, ariaLabel, aria
 				onChange,
 				size,
 				element,
-				s
+				s,
+				rowStyle,
+				selectionStyle
 			})
 		}) : /* @__PURE__ */ jsx("div", {
 			role: "radiogroup",
@@ -90,7 +94,9 @@ function RadioCardList({ data, value, onChange, size, className, ariaLabel, aria
 				onChange,
 				size,
 				element,
-				s
+				s,
+				rowStyle,
+				selectionStyle
 			})
 		})] })
 	});