@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/core/input/input-password.js

@@ -3,24 +3,28 @@ import { cn } from "../../utils/cn.js";
 import { Input } from "./input.js";
 import * as React$1 from "react";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 //#region src/core/input/input-password.tsx
-var InputPassword = React$1.forwardRef(({ className, ...props }, ref) => {
+var InputPassword = React$1.forwardRef(({ className, showPasswordLabel = "Show password", hidePasswordLabel = "Hide password", ...props }, ref) => {
 	const [isVisible, setIsVisible] = useState(false);
 	return /* @__PURE__ */ jsx(Input, {
 		ref,
 		type: isVisible ? "text" : "password",
 		className: cn("pr-9", className),
-		endIcon: /* @__PURE__ */ jsxs("button", {
+		endIcon: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => setIsVisible((prev) => !prev),
-			className: "pointer-events-auto cursor-pointer text-muted-foreground hover:text-foreground",
-			tabIndex: -1,
-			children: [isVisible ? /* @__PURE__ */ jsx(EyeOffIcon, { size: 16 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 16 }), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: isVisible ? "Hide password" : "Show password"
-			})]
+			className: "pointer-events-auto cursor-pointer rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+			"aria-label": isVisible ? hidePasswordLabel : showPasswordLabel,
+			"aria-pressed": isVisible,
+			children: isVisible ? /* @__PURE__ */ jsx(EyeOffIcon, {
+				size: 16,
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ jsx(EyeIcon, {
+				size: 16,
+				"aria-hidden": "true"
+			})
 		}),
 		...props
 	});

package/dist/core/input/input.js

@@ -1,14 +1,27 @@
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { FieldLabelRow, fieldHintClassName, inputLabelClassName } from "../field-label-row.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/core/input/input.tsx
 var sizeClasses = {
-	sm: "h-8 px-2 text-xs",
-	default: "h-10 px-3 py-2 text-base md:text-sm",
+	sm: "h-[var(--espd-control-height-sm,calc(var(--spacing)*8))] px-2 text-xs",
+	default: "h-[var(--espd-control-height-lg,calc(var(--spacing)*10))] px-3 py-2 text-base md:text-sm",
 	lg: "h-12 px-4 text-lg"
 };
-var Input = React$1.forwardRef(({ className, type, label, size, rounded, startHelperContent, endHelperContent, hintContent, error, errorContent, startIcon, endIcon, startAddOnContent, endAddOnContent, startAddOn, endAddOn, floatingLabel, charLimit, onChange, value, defaultValue, id, required, placeholder, ...restProps }, ref) => {
+/**
+* An add-on segment beside the field. A text add-on is a padded box. An
+* action add-on is a control that fills the box: no padding, stretched to the
+* field's height, square where it meets the text and clipped to the field's
+* outer corners. Its own focus ring is drawn as the segment's border plus one
+* inset pixel, so it sits exactly on the box's edges (the segment rises above
+* the field so the shared edge takes the ring colour too).
+*/
+function addOnClassName(side, action, full) {
+	const start = side === "start";
+	return cn("border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] border-input bg-background", start ? "-me-px" : "-ms-px", start && (full ? "rounded-s-full" : "rounded-s-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-lg)))]"), !start && (full ? "rounded-e-full" : "rounded-e-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-lg)))]"), action ? "relative flex shrink-0 overflow-hidden has-[:focus-visible]:z-20 has-[:focus-visible]:border-ring [&>*]:h-auto! [&>*]:self-stretch [&>*]:rounded-none! [&>*]:px-3! [&>*]:shadow-none! [&>*:focus-visible]:ring-1! [&>*:focus-visible]:ring-inset! [&>*:focus-visible]:ring-offset-0!" : "inline-flex items-center px-3 text-sm text-muted-foreground");
+}
+var Input = React$1.forwardRef(({ className, type, label, size, rounded, startHelperContent, endHelperContent, hintContent, error, errorContent, startIcon, endIcon, startAddOnContent, endAddOnContent, startAddOn, endAddOn, startAddOnAction, endAddOnAction, floatingLabel, charLimit, onChange, value, defaultValue, id, required, placeholder, radius, border, style, ...restProps }, ref) => {
 	const autoId = React$1.useId();
 	const inputId = id || autoId;
 	const [charCount, setCharCount] = React$1.useState(() => {
@@ -20,16 +33,22 @@ var Input = React$1.forwardRef(({ className, type, label, size, rounded, startHe
 	React$1.useEffect(() => {
 		if (charLimit !== void 0 && typeof value === "string") setCharCount(value.length);
 	}, [value, charLimit]);
-	if (!(label !== void 0 || size !== void 0 || rounded !== void 0 || startHelperContent !== void 0 || endHelperContent !== void 0 || hintContent !== void 0 || error !== void 0 || errorContent !== void 0 || startIcon !== void 0 || endIcon !== void 0 || startAddOnContent !== void 0 || endAddOnContent !== void 0 || startAddOn !== void 0 || endAddOn !== void 0 || floatingLabel !== void 0 || charLimit !== void 0)) return /* @__PURE__ */ jsx("input", {
+	const axes = useStyleAxes({
+		radius,
+		border,
+		style
+	}, ["radius", "border"]);
+	if (!(label !== void 0 || size !== void 0 || rounded !== void 0 || startHelperContent !== void 0 || endHelperContent !== void 0 || hintContent !== void 0 || error !== void 0 || errorContent !== void 0 || startIcon !== void 0 || endIcon !== void 0 || startAddOnContent !== void 0 || endAddOnContent !== void 0 || startAddOn !== void 0 || endAddOn !== void 0 || startAddOnAction !== void 0 || endAddOnAction !== void 0 || floatingLabel !== void 0 || charLimit !== void 0)) return /* @__PURE__ */ jsx("input", {
 		type,
 		id,
-		className: cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted md:text-sm", className),
+		className: cn("flex h-[var(--espd-control-height-lg,calc(var(--spacing)*10))] w-full rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] border-input bg-background px-3 py-2 text-base ring-offset-background transition-[box-shadow,border-color] duration-[var(--espd-duration-normal,200ms)] ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted md:text-sm", className),
 		ref,
 		onChange,
 		value,
 		defaultValue,
 		required,
 		placeholder,
+		style: axes.style,
 		...restProps
 	});
 	const effectiveSize = size || "default";
@@ -39,9 +58,12 @@ var Input = React$1.forwardRef(({ className, type, label, size, rounded, startHe
 		onChange?.(e);
 	};
 	const effectivePlaceholder = floatingLabel ? " " : placeholder;
-	const resolveAddOn = (content, text) => content != null && content !== false && content !== "" ? content : text || void 0;
-	const startAddOnNode = resolveAddOn(startAddOnContent, startAddOn);
-	const endAddOnNode = resolveAddOn(endAddOnContent, endAddOn);
+	const present = (node) => node != null && node !== false && node !== "";
+	const resolveAddOn = (content, text) => present(content) ? content : text || void 0;
+	const startIsAction = present(startAddOnAction);
+	const endIsAction = present(endAddOnAction);
+	const startAddOnNode = startIsAction ? startAddOnAction : resolveAddOn(startAddOnContent, startAddOn);
+	const endAddOnNode = endIsAction ? endAddOnAction : resolveAddOn(endAddOnContent, endAddOn);
 	const hasAddOn = startAddOnNode != null || endAddOnNode != null;
 	const hasOverlay = !!startIcon || !!endIcon || charLimit !== void 0 || !!floatingLabel;
 	const helperStartId = `${inputId}-helper-start`;
@@ -55,7 +77,7 @@ var Input = React$1.forwardRef(({ className, type, label, size, rounded, startHe
 		type,
 		id: inputId,
 		ref,
-		className: cn("flex w-full border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted z-10", floatingLabel ? "h-12 px-3 pt-4 pb-1 text-base md:text-sm" : sizeClasses[effectiveSize], rounded ? "rounded-full" : "rounded-md", hasError && "border-destructive focus-visible:ring-destructive", startIcon && "ps-9", endIcon && "pe-9", charLimit !== void 0 && !endIcon && "pe-14", charLimit !== void 0 && endIcon && "pe-20", startAddOnNode != null && "rounded-s-none shadow-none", endAddOnNode != null && "rounded-e-none shadow-none", "peer", floatingLabel && "placeholder:text-transparent", className),
+		className: cn("flex w-full border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-[var(--espd-duration-normal,200ms)] ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted z-10", floatingLabel ? "h-12 px-3 pt-4 pb-1 text-base md:text-sm" : sizeClasses[effectiveSize], rounded && radius === void 0 ? "rounded-full" : "rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))]", hasError && "border-destructive focus-visible:ring-destructive", startIcon && "ps-9", endIcon && "pe-9", charLimit !== void 0 && !endIcon && "pe-14", charLimit !== void 0 && endIcon && "pe-20", startAddOnNode != null && "rounded-s-none shadow-none", endAddOnNode != null && "rounded-e-none shadow-none", hasAddOn && "focus-visible:ring-0 focus-visible:ring-offset-0", "peer", floatingLabel && "placeholder:text-transparent", className),
 		required,
 		"aria-invalid": hasError || void 0,
 		"aria-describedby": describedBy,
@@ -64,6 +86,7 @@ var Input = React$1.forwardRef(({ className, type, label, size, rounded, startHe
 		defaultValue,
 		maxLength: charLimit,
 		placeholder: effectivePlaceholder,
+		style: axes.style,
 		...restProps
 	});
 	let inputContainer = inputElement;
@@ -97,15 +120,18 @@ var Input = React$1.forwardRef(({ className, type, label, size, rounded, startHe
 		]
 	});
 	if (hasAddOn) inputContainer = /* @__PURE__ */ jsxs("div", {
-		className: "flex rounded-lg",
+		className: cn("flex ring-offset-background transition-shadow duration-[var(--espd-duration-normal,200ms)] ease-in-out has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2", hasError ? "has-[input:focus-visible]:ring-destructive" : "has-[input:focus-visible]:ring-ring", rounded && radius === void 0 ? "rounded-full" : "rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-lg)))]"),
+		style: axes.partStyle,
 		children: [
 			startAddOnNode != null && /* @__PURE__ */ jsx("span", {
-				className: "-me-px inline-flex items-center rounded-s-lg border border-input bg-background px-3 text-sm text-muted-foreground",
+				style: axes.partStyle,
+				className: addOnClassName("start", startIsAction, rounded && radius === void 0),
 				children: startAddOnNode
 			}),
 			inputContainer,
 			endAddOnNode != null && /* @__PURE__ */ jsx("span", {
-				className: "-ms-px inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground",
+				style: axes.partStyle,
+				className: addOnClassName("end", endIsAction, rounded && radius === void 0),
 				children: endAddOnNode
 			})
 		]

package/dist/core/input-otp/input-otp.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { inputLabelClassName } from "../field-label-row.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -38,13 +39,14 @@ InputOTPSeparator.displayName = "InputOTPSeparator";
 * Renders one slot box. Mirrors `Input`'s border/focus/error tokens so a row of
 * slots visually lines up with an `Input` of the same `size`.
 */
-var SlotBox = ({ index, size, expand, rounded, hasError, cornerClass }) => {
+var SlotBox = ({ index, size, expand, rounded, hasError, cornerClass, axisStyle }) => {
 	const slot = React$1.useContext(OTPInputContext).slots[index];
 	if (!slot) return null;
 	const { char, hasFakeCaret, isActive } = slot;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-active": isActive || void 0,
-		className: cn("relative flex items-center justify-center border border-input bg-background font-medium text-foreground shadow-xs", "transition-[box-shadow,border-color] duration-200 ease-in-out", "ring-offset-background", "data-[active=true]:z-10 data-[active=true]:ring-2 data-[active=true]:ring-ring data-[active=true]:ring-offset-2", hasError && "border-destructive data-[active=true]:ring-destructive", rounded ? "rounded-full" : "rounded-md", cornerClass, expand ? cn("min-w-0 flex-1", slotExpandedSizeClasses[size]) : slotSizeClasses[size]),
+		style: axisStyle,
+		className: cn("relative flex items-center justify-center border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] border-input bg-background font-medium text-foreground shadow-xs", "transition-[box-shadow,border-color] duration-200 ease-in-out", "ring-offset-background", "data-[active=true]:z-10 data-[active=true]:ring-2 data-[active=true]:ring-ring data-[active=true]:ring-offset-2", hasError && "border-destructive data-[active=true]:ring-destructive", rounded ? "rounded-full" : "rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))]", cornerClass, expand ? cn("min-w-0 flex-1", slotExpandedSizeClasses[size]) : slotSizeClasses[size]),
 		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
 			children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" })
@@ -81,7 +83,8 @@ function clampLength(raw) {
 	}
 	return rounded;
 }
-var InputOTP = React$1.forwardRef(({ length, allowAlphaNumeric, regex, separators, expand, value, defaultValue, onChange, onComplete, label, required, size, rounded, disabled, startHelperContent, endHelperContent, hintContent, error, errorContent, id, name, autoFocus, autoComplete, className, containerClassName, ...restProps }, ref) => {
+var InputOTP = React$1.forwardRef(({ length, allowAlphaNumeric, regex, separators, expand, value, defaultValue, onChange, onComplete, label, required, size, rounded, radius, disabled, startHelperContent, endHelperContent, hintContent, error, errorContent, id, name, autoFocus, autoComplete, className, containerClassName, ...restProps }, ref) => {
+	const axes = useStyleAxes({ radius }, ["radius"]);
 	const autoId = React$1.useId();
 	const inputId = id || autoId;
 	const effectiveLength = React$1.useMemo(() => clampLength(length), [length]);
@@ -153,9 +156,10 @@ var InputOTP = React$1.forwardRef(({ length, allowAlphaNumeric, regex, separator
 							index: slotIndex,
 							size: effectiveSize,
 							expand: !!expand,
-							rounded: !!rounded,
+							rounded: !!rounded && radius === void 0,
 							hasError,
-							cornerClass
+							cornerClass,
+							axisStyle: axes.partStyle
 						}, slotIndex);
 					})
 				})] }, `g-${groupIndex}`))

package/dist/core/popover-group.js

@@ -0,0 +1,48 @@
+import { useControlledState } from "./hooks/use-controlled-state.js";
+import { useHoverRefs } from "./popover-hover.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/core/popover-group.tsx
+var PopoverGroupContext = React$1.createContext(null);
+function usePopoverGroupContext() {
+	return React$1.useContext(PopoverGroupContext);
+}
+/**
+* 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.
+*/
+function PopoverGroup({ value: valueProp, defaultValue = null, onValueChange, switchDelay = 350, children }) {
+	const [value, setValue] = useControlledState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const valueRef = React$1.useRef(value);
+	valueRef.current = value;
+	const hover = useHoverRefs();
+	const setGroupValue = React$1.useCallback((next) => {
+		valueRef.current = next;
+		setValue(next);
+	}, [setValue]);
+	const context = React$1.useMemo(() => ({
+		value,
+		valueRef,
+		setValue: setGroupValue,
+		switchDelay,
+		hover
+	}), [
+		value,
+		setGroupValue,
+		switchDelay,
+		hover
+	]);
+	return /* @__PURE__ */ jsx(PopoverGroupContext.Provider, {
+		value: context,
+		children
+	});
+}
+//#endregion
+export { PopoverGroup, PopoverGroupContext, usePopoverGroupContext };

package/dist/core/popover-hover.js

@@ -0,0 +1,127 @@
+import * as React$1 from "react";
+//#region src/core/popover-hover.tsx
+/** A fresh set of hover refs, for a lone popover or a group. */
+function useHoverRefs() {
+	const timer = React$1.useRef(void 0);
+	const openedByHover = React$1.useRef(false);
+	const closedAt = React$1.useRef(0);
+	const closedByHover = React$1.useRef(false);
+	React$1.useEffect(() => () => clearTimeout(timer.current), []);
+	return React$1.useMemo(() => ({
+		timer,
+		openedByHover,
+		closedAt,
+		closedByHover
+	}), []);
+}
+/** How long after a close a focus on the trigger counts as focus returning. */
+var RETURN_FOCUS_WINDOW_MS = 400;
+var passThrough = {
+	onOpenChange: () => {},
+	triggerProps: (props) => props,
+	contentProps: (props) => props
+};
+var PopoverHoverContext = React$1.createContext(passThrough);
+function usePopoverHoverContext() {
+	return React$1.useContext(PopoverHoverContext);
+}
+function chain(own, theirs) {
+	return (event) => {
+		theirs?.(event);
+		own(event);
+	};
+}
+/**
+* Hover-to-open for a Radix popover. Opening and closing are delayed so the
+* pointer can cross the gap between trigger and content; only a mouse hovers
+* (a touch "enter" is followed by the click, which toggles as usual).
+*/
+function usePopoverHover({ enabled, open, setOpen, openDelay, closeDelay, shared, replaced }) {
+	const own = useHoverRefs();
+	const { timer, openedByHover, closedAt, closedByHover } = shared ?? own;
+	const pinning = React$1.useRef(false);
+	return React$1.useMemo(() => {
+		const schedule = (next, delay) => {
+			clearTimeout(timer.current);
+			timer.current = setTimeout(() => {
+				openedByHover.current = next;
+				closedByHover.current = true;
+				setOpen(next, true);
+			}, delay);
+		};
+		const show = () => {
+			if (!open) schedule(true, openDelay);
+			else clearTimeout(timer.current);
+		};
+		const hide = () => {
+			if (openedByHover.current) schedule(false, closeDelay);
+			else if (!open) clearTimeout(timer.current);
+		};
+		const onOpenChange = (next) => {
+			if (!next && pinning.current) {
+				pinning.current = false;
+				return;
+			}
+			clearTimeout(timer.current);
+			openedByHover.current = false;
+			closedByHover.current = false;
+			if (!next) closedAt.current = Date.now();
+			setOpen(next);
+		};
+		const onFocus = () => {
+			if (Date.now() - closedAt.current > RETURN_FOCUS_WINDOW_MS) show();
+		};
+		const keepFocus = (e) => {
+			if (replaced?.() || enabled && closedByHover.current) e.preventDefault();
+		};
+		if (!enabled) return {
+			...passThrough,
+			onOpenChange,
+			contentProps: (props) => ({
+				...props,
+				onCloseAutoFocus: chain(keepFocus, props.onCloseAutoFocus)
+			})
+		};
+		const isMouse = (event) => event.pointerType === "mouse";
+		return {
+			onOpenChange,
+			triggerProps: (props) => ({
+				...props,
+				onPointerEnter: chain((e) => isMouse(e) && show(), props.onPointerEnter),
+				onPointerLeave: chain((e) => isMouse(e) && hide(), props.onPointerLeave),
+				onFocus: chain(onFocus, props.onFocus),
+				onBlur: chain(hide, props.onBlur),
+				onClick: chain(() => {
+					if (open && openedByHover.current) {
+						clearTimeout(timer.current);
+						openedByHover.current = false;
+						pinning.current = true;
+						queueMicrotask(() => {
+							pinning.current = false;
+						});
+					}
+				}, props.onClick)
+			}),
+			contentProps: (props) => ({
+				...props,
+				onPointerEnter: chain(() => clearTimeout(timer.current), props.onPointerEnter),
+				onPointerLeave: chain((e) => isMouse(e) && hide(), props.onPointerLeave),
+				onOpenAutoFocus: chain((e) => openedByHover.current && e.preventDefault(), props.onOpenAutoFocus),
+				onCloseAutoFocus: chain(keepFocus, props.onCloseAutoFocus)
+			})
+		};
+	}, [
+		enabled,
+		open,
+		setOpen,
+		openDelay,
+		closeDelay,
+		timer,
+		openedByHover,
+		closedAt,
+		closedByHover,
+		replaced
+	]);
+}
+//#endregion
+export { PopoverHoverContext, useHoverRefs, usePopoverHover, usePopoverHoverContext };

package/dist/core/popover.js

@@ -1,12 +1,79 @@
 import { cn } from "../utils/cn.js";
+import { useStyleAxes } from "../utils/style-axes.js";
+import { useControlledState } from "./hooks/use-controlled-state.js";
+import { useNestedLayerPressGuard } from "./hooks/use-nested-layer-press-guard.js";
+import { PopoverHoverContext, usePopoverHover, usePopoverHoverContext } from "./popover-hover.js";
+import { usePopoverGroupContext } from "./popover-group.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 //#region src/core/popover.tsx
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
+function Popover({ openOnHover = false, openDelay = 120, closeDelay = 150, open: openProp, defaultOpen, onOpenChange, value, ...props }) {
+	const group = usePopoverGroupContext();
+	const generatedKey = React$1.useId();
+	const key = value ?? generatedKey;
+	const [ownOpen, setOwnOpen] = useControlledState({
+		value: openProp,
+		defaultValue: defaultOpen ?? false,
+		onChange: onOpenChange
+	});
+	const inGroup = group !== null && openProp === void 0;
+	const open = inGroup ? group.value === key : ownOpen;
+	const setOpen = React$1.useCallback((next, viaHover = false) => {
+		if (!inGroup) {
+			setOwnOpen(next);
+			return;
+		}
+		if (next) group.setValue(key);
+		else if (viaHover ? group.valueRef.current !== null : group.valueRef.current === key) group.setValue(null);
+		onOpenChange?.(next);
+	}, [
+		inGroup,
+		group,
+		key,
+		setOwnOpen,
+		onOpenChange
+	]);
+	const replaced = React$1.useCallback(() => inGroup && group.valueRef.current !== null && group.valueRef.current !== key, [
+		inGroup,
+		group,
+		key
+	]);
+	const hover = usePopoverHover({
+		enabled: openOnHover,
+		open,
+		setOpen,
+		openDelay: inGroup && group.value !== null && group.value !== key ? group.switchDelay : openDelay,
+		closeDelay,
+		shared: inGroup ? group.hover : void 0,
+		replaced
+	});
+	return /* @__PURE__ */ jsx(PopoverHoverContext.Provider, {
+		value: hover,
+		children: /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
+			open,
+			onOpenChange: hover.onOpenChange,
+			...props
+		})
+	});
+}
+var PopoverTrigger = React$1.forwardRef((props, ref) => {
+	const hover = usePopoverHoverContext();
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+		ref,
+		...hover.triggerProps(props)
+	});
+});
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React$1.forwardRef(({ className, align = "center", sideOffset = 4, portal = true, onWheel, onTouchMove, ...props }, ref) => {
+var PopoverContent = React$1.forwardRef(({ className, align = "center", sideOffset = 4, portal = true, onWheel, onTouchMove, onPointerDownOutside, radius, elevation, style, ...props }, ref) => {
+	const axes = useStyleAxes({
+		radius,
+		elevation,
+		style
+	}, ["radius", "elevation"]);
+	const pressGuard = useNestedLayerPressGuard(ref, onPointerDownOutside);
+	const hover = usePopoverHoverContext();
 	const handleWheel = (event) => {
 		onWheel?.(event);
 		event.stopPropagation();
@@ -16,13 +83,15 @@ var PopoverContent = React$1.forwardRef(({ className, align = "center", sideOffs
 		event.stopPropagation();
 	};
 	const content = /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
-		ref,
+		ref: pressGuard.ref,
+		onPointerDownOutside: pressGuard.onPointerDownOutside,
 		align,
 		sideOffset,
 		onWheel: handleWheel,
 		onTouchMove: handleTouchMove,
-		className: cn("z-50 w-72 rounded-2xl border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin)", className),
-		...props
+		className: cn("z-50 w-72 rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-2xl)))] border bg-popover p-4 text-popover-foreground shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))] outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin)", className),
+		style: axes.style,
+		...hover.contentProps(props)
 	});
 	return portal ? /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: content }) : content;
 });

package/dist/core/select.js

@@ -1,4 +1,5 @@
 import { cn } from "../utils/cn.js";
+import { useStyleAxes } from "../utils/style-axes.js";
 import { FieldLabelRow, fieldHintClassName } from "./field-label-row.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,8 +10,8 @@ var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
 var triggerSizeClasses = {
-	sm: "h-8 px-3 text-xs",
-	default: "h-10 px-3.5 py-2 text-base md:text-sm",
+	sm: "h-[var(--espd-control-height-sm,calc(var(--spacing)*8))] px-3 text-xs",
+	default: "h-[var(--espd-control-height-lg,calc(var(--spacing)*10))] px-3.5 py-2 text-base md:text-sm",
 	lg: "h-12 px-5 text-lg"
 };
 /**
@@ -19,8 +20,13 @@ var triggerSizeClasses = {
 * Input shows matching icon dimensions whatever `size` they share.
 */
 var triggerIconClassName = "size-4 shrink-0 opacity-50";
-var SelectTrigger = React$1.forwardRef(({ className, children, size = "default", label, required, hintContent, error, errorContent, id, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+var SelectTrigger = React$1.forwardRef(({ className, children, size = "default", label, required, hintContent, error, errorContent, id, "aria-describedby": ariaDescribedBy, radius, border, style, ...props }, ref) => {
 	const autoId = React$1.useId();
+	const axes = useStyleAxes({
+		radius,
+		border,
+		style
+	}, ["radius", "border"]);
 	const hasEnhancedProps = label !== void 0 || required !== void 0 || hintContent !== void 0 || error !== void 0 || errorContent !== void 0;
 	const hasError = error || !!errorContent;
 	const triggerId = id ?? (hasEnhancedProps ? autoId : void 0);
@@ -32,7 +38,8 @@ var SelectTrigger = React$1.forwardRef(({ className, children, size = "default",
 		"aria-required": required || void 0,
 		"aria-invalid": hasError || void 0,
 		"aria-describedby": describedBy,
-		className: cn("flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out data-[placeholder]:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", triggerSizeClasses[size], hasError && "border-destructive focus-visible:ring-destructive", className),
+		className: cn("flex w-full items-center justify-between whitespace-nowrap rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out data-[placeholder]:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", triggerSizeClasses[size], hasError && "border-destructive focus-visible:ring-destructive", className),
+		style: axes.style,
 		...props,
 		children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 			asChild: true,
@@ -95,21 +102,29 @@ function releaseFocusScrolledOutOfView(event) {
 	if (itemRect.top >= viewportRect.top && itemRect.bottom <= viewportRect.bottom) return;
 	viewport.closest("[role=\"listbox\"]")?.focus({ preventScroll: true });
 }
-var SelectContent = React$1.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
-	ref,
-	className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-2xl border bg-popover px-1.5 py-2 text-popover-foreground shadow-lg outline-none will-change-[opacity,transform] select-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
-	position,
-	...props,
-	children: [
-		/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-		/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
-			className: cn("p-0", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
-			onScroll: releaseFocusScrolledOutOfView,
-			children
-		}),
-		/* @__PURE__ */ jsx(SelectScrollDownButton, {})
-	]
-}) }));
+var SelectContent = React$1.forwardRef(({ className, children, position = "popper", radius, elevation, style, ...props }, ref) => {
+	const axes = useStyleAxes({
+		radius,
+		elevation,
+		style
+	}, ["radius", "elevation"]);
+	return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
+		ref,
+		className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-2xl)))] border bg-popover px-1.5 py-2 text-popover-foreground shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))] outline-none will-change-[opacity,transform] select-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+		position,
+		style: axes.style,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+			/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
+				className: cn("p-0", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+				onScroll: releaseFocusScrolledOutOfView,
+				children
+			}),
+			/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+		]
+	}) });
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 var SelectLabel = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Label, {
 	ref,
@@ -119,7 +134,7 @@ var SelectLabel = React$1.forwardRef(({ className, ...props }, ref) => /* @__PUR
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 var SelectItem = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
 	ref,
-	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-2 pl-2.5 pr-9 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	className: cn("relative flex w-full cursor-default select-none items-center rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-sm)))] py-2 pl-2.5 pr-9 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		className: "absolute right-2.5 flex h-3.5 w-3.5 items-center justify-center",

package/dist/core/table.js

@@ -1,10 +1,12 @@
 import { cn } from "../utils/cn.js";
+import { densityStyle } from "../utils/style-axes.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/core/table.tsx
-var Table = React$1.forwardRef(({ className, containerRef, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var Table = React$1.forwardRef(({ className, containerRef, containerClassName, density, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref: containerRef,
 	"data-slot": "table-container",
+	style: densityStyle(density),
 	className: cn("relative w-full overflow-auto", containerClassName),
 	children: /* @__PURE__ */ jsx("table", {
 		ref,
@@ -39,13 +41,13 @@ var TableRow = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 TableRow.displayName = "TableRow";
 var TableHead = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", {
 	ref,
-	className: cn("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+	className: cn("h-[var(--espd-table-head-height,calc(var(--spacing)*10))] px-[var(--espd-table-cell-padding,calc(var(--spacing)*2))] text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
 	...props
 }));
 TableHead.displayName = "TableHead";
 var TableCell = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", {
 	ref,
-	className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+	className: cn("p-[var(--espd-table-cell-padding,calc(var(--spacing)*2))] align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
 	...props
 }));
 TableCell.displayName = "TableCell";