@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/core/animate-ui/components/animate/code.js

@@ -1,17 +1,79 @@
 "use client";
 import { cn } from "../../../../utils/cn.js";
+import { useStyleAxes } from "../../../../utils/style-axes.js";
 import { CodeBlock } from "../../primitives/animate/code-block.js";
 import { CodeHeader } from "./code-header.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/core/animate-ui/components/animate/code.tsx
-function Code({ className, code, icon: Icon, theme = "light", themes, copyButton, lang, fileName, height, style, ...props }) {
+/** Where each marked line sits in the block, measured from its `data-line` element whenever the block's lines change. */
+function useLinePlaces(blockRef, lines) {
+	const [places, setPlaces] = React$1.useState({});
+	React$1.useLayoutEffect(() => {
+		const block = blockRef.current;
+		if (!block || !lines) {
+			setPlaces({});
+			return;
+		}
+		const measure = () => {
+			const next = {};
+			for (const line of lines.split(",")) {
+				const el = block.querySelector(`[data-line="${line}"]`);
+				if (el) next[Number(line)] = {
+					top: el.offsetTop,
+					height: el.offsetHeight
+				};
+			}
+			setPlaces((prev) => JSON.stringify(prev) === JSON.stringify(next) ? prev : next);
+		};
+		measure();
+		const mutations = new MutationObserver(measure);
+		mutations.observe(block, {
+			childList: true,
+			subtree: true
+		});
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+		resize?.observe(block);
+		return () => {
+			mutations.disconnect();
+			resize?.disconnect();
+		};
+	}, [blockRef, lines]);
+	return places;
+}
+/** The marks layer: each mark on its line's row, in the left padding. */
+function LineMarks({ blockRef, marks }) {
+	const places = useLinePlaces(blockRef, Object.keys(marks).join(","));
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-line-marks",
+		className: "pointer-events-none absolute top-0 left-0",
+		children: Object.entries(marks).map(([line, mark]) => {
+			const place = places[Number(line)];
+			return place ? /* @__PURE__ */ jsx("div", {
+				"data-line-mark": line,
+				className: "pointer-events-auto absolute left-0.5 flex w-3.5 items-center justify-center",
+				style: {
+					top: place.top,
+					height: place.height
+				},
+				children: mark
+			}, line) : null;
+		})
+	});
+}
+function Code({ className, code, icon: Icon, theme = "light", themes, copyButton, lang, fileName, height, style, radius, border, lineNumbers, highlightLines, lineIdPrefix, maxHighlightLength, lineMarks, ...props }) {
+	const { partStyle } = useStyleAxes({
+		radius,
+		border
+	}, ["radius", "border"]);
 	const showCopyButton = copyButton !== false && (copyButton === true || copyButton === void 0 && Boolean(lang));
 	const showHeader = fileName !== void 0 || showCopyButton;
 	const scrollRef = React$1.useRef(null);
+	const blockRef = React$1.useRef(null);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex flex-col overflow-hidden border bg-background rounded-lg", className),
+		className: cn("relative flex flex-col overflow-hidden border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,1px))] bg-background rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-lg)))]", className),
 		style: {
+			...partStyle,
 			height,
 			...style
 		},
@@ -20,14 +82,26 @@ function Code({ className, code, icon: Icon, theme = "light", themes, copyButton
 			icon: Icon,
 			fileName,
 			copyContent: showCopyButton ? code : void 0
-		}), lang && /* @__PURE__ */ jsx(CodeBlock, {
+		}), lang && /* @__PURE__ */ jsxs("div", {
 			ref: scrollRef,
-			theme,
-			themes,
-			scrollContainerRef: scrollRef,
-			className: cn("relative text-sm p-4 overflow-auto bg-accent/10 flex-1 min-h-0", "[&>pre,_&_code]:!bg-transparent [&>pre,_&_code]:[background:transparent_!important] [&>pre,_&_code]:border-none [&_code]:!text-[13px] [&_code_.line]:!px-0"),
-			code,
-			lang
+			"data-slot": "code-scroll",
+			className: "relative flex-1 min-h-0 overflow-auto bg-accent/10",
+			children: [/* @__PURE__ */ jsx(CodeBlock, {
+				ref: blockRef,
+				theme,
+				themes,
+				scrollContainerRef: scrollRef,
+				className: cn("relative text-sm p-4", "[&>pre,_&_code]:!bg-transparent [&>pre,_&_code]:[background:transparent_!important] [&>pre,_&_code]:border-none [&_code]:!text-[13px] [&_code_.line]:!px-0", "[&_code_.line]:inline-block [&_code_.line]:min-w-full [&_code_.line.highlighted]:bg-primary/12", "data-[line-numbers]:[&_code]:[counter-reset:line] data-[line-numbers]:[&_code_.line]:before:[counter-increment:line] data-[line-numbers]:[&_code_.line]:before:content-[counter(line)] data-[line-numbers]:[&_code_.line]:before:inline-block data-[line-numbers]:[&_code_.line]:before:w-[4ch] data-[line-numbers]:[&_code_.line]:before:mr-4 data-[line-numbers]:[&_code_.line]:before:text-right data-[line-numbers]:[&_code_.line]:before:text-muted-foreground/60 data-[line-numbers]:[&_code_.line]:before:select-none"),
+				code,
+				lang,
+				lineNumbers,
+				highlightLines,
+				lineIdPrefix,
+				maxHighlightLength
+			}), lineMarks && Object.keys(lineMarks).length > 0 && /* @__PURE__ */ jsx(LineMarks, {
+				blockRef,
+				marks: lineMarks
+			})]
 		})]
 	});
 }

package/dist/core/animate-ui/components/animate/tabs.js

@@ -1,18 +1,35 @@
 import { cn } from "../../../../utils/cn.js";
+import { contrastingForeground, isPresetColor } from "../../../../utils/color.js";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import { useScrollOverflow } from "../../../hooks/use-scroll-overflow.js";
 import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsContents as TabsContents$1, TabsHighlight, TabsHighlightItem, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1, useTabs } from "../../primitives/animate/tabs.js";
 import * as React$1 from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 //#region src/core/animate-ui/components/animate/tabs.tsx
-var TabsListVariantContext = React$1.createContext(void 0);
+var TabsListContext = React$1.createContext({
+	variant: void 0,
+	size: "default",
+	collapsible: false,
+	collapsed: false,
+	toggleCollapsed: () => {}
+});
+/**
+* Every variant paints from `--espd-tabs-color` (the list's `color`, primary
+* by default), so one prop tints them all: the pill's 10% wash, the list's
+* 30% border, the glow's 45% halo — the same mixes the `/10` `/30` `/45`
+* utilities make — and the selected label.
+*/
+var TINT = "bg-[color:color-mix(in_oklab,var(--espd-tabs-color)_10%,transparent)]";
+var TINT_BORDER = "border-[color:color-mix(in_oklab,var(--espd-tabs-color)_30%,transparent)]";
 var TABS_LIST_VARIANTS = {
 	default: {
 		highlight: {
 			mode: "parent",
-			className: "absolute z-0 inset-0 rounded-md bg-primary/10"
+			className: `absolute z-0 inset-0 rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] ${TINT}`
 		},
-		list: "bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-md p-1 border border-primary/30"
+		list: `bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-md p-1 border ${TINT_BORDER}`
 	},
 	line: {
 		highlight: {
@@ -20,18 +37,80 @@ var TABS_LIST_VARIANTS = {
 			variant: "line",
 			lineHeight: 2,
 			boundsOffset: { top: 2 },
-			className: "absolute z-0 bg-primary rounded-none"
+			className: "absolute z-0 bg-[color:var(--espd-tabs-color)] rounded-none"
 		},
 		list: "text-muted-foreground inline-flex h-auto w-fit items-center justify-center gap-1 border-b border-border"
 	},
 	rounded: {
 		highlight: {
 			mode: "parent",
-			className: "absolute z-0 inset-0 rounded-full bg-primary/10"
+			className: `absolute z-0 inset-0 rounded-full ${TINT}`
+		},
+		list: `bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-full p-1 border ${TINT_BORDER}`
+	},
+	/** `rounded` with the halo the other components' `glow` variant uses. */
+	glow: {
+		highlight: {
+			mode: "parent",
+			className: `absolute z-0 inset-0 rounded-full ${TINT}`
 		},
-		list: "bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-full p-1 border border-primary/30"
+		list: `bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-full p-1 border ${TINT_BORDER} shadow-glow shadow-[color:color-mix(in_oklab,var(--espd-tabs-color)_45%,transparent)]`
+	},
+	/**
+	* The selected tab is a solid pill in the list's `color`; the text on it
+	* takes a colour that reads against the fill. The list itself stays quiet:
+	* a hairline, no tint.
+	*/
+	solid: {
+		highlight: {
+			mode: "parent",
+			className: "absolute z-0 inset-0 rounded-full bg-[color:var(--espd-tabs-color)] shadow-sm"
+		},
+		list: "bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-full p-1 border border-border"
 	}
 };
+/**
+* `sm`: the list's padding and its triggers shrink to a 28px strip, for a
+* toolbar. `lg`: 36px triggers with base text and 20px icons, for a page's
+* main switch; the rounded list grows by as much as `sm` shrinks it.
+*/
+var TABS_LIST_SIZE = {
+	default: {
+		list: "",
+		trigger: "",
+		lineTrigger: ""
+	},
+	sm: {
+		list: "p-0.5",
+		trigger: "h-6 px-2.5 py-0 text-xs",
+		lineTrigger: "py-1.5 text-xs"
+	},
+	lg: {
+		list: "",
+		trigger: "h-9 px-4 py-0 gap-2 text-base [&_svg:not([class*='size-'])]:size-5",
+		lineTrigger: "py-3 gap-2 text-base [&_svg:not([class*='size-'])]:size-5"
+	}
+};
+/** The CSS variables a list sets from its `color`: the colour, and (for `solid`) the text that reads on a fill of it. */
+function colorVars(color) {
+	if (isPresetColor(color)) return {
+		"--espd-tabs-color": `var(--color-${color})`,
+		"--espd-tabs-color-foreground": `var(--color-${color}-foreground)`
+	};
+	return {
+		"--espd-tabs-color": color,
+		"--espd-tabs-color-foreground": contrastingForeground(color)
+	};
+}
+/**
+* Room the scroller keeps around the list so its `glow` halo (it reaches
+* ~10px past the border) is not clipped; the fade mask's box grows by the
+* same amount.
+*/
+var GLOW_GUTTER = {
+	mask: "-m-3",
+	scroller: "p-3"
+};
 /** Width of the edge fade, and the margin kept beside the active tab when it is scrolled into view. */
 var EDGE_SIZE = 40;
 function prefersReducedMotion() {
@@ -98,28 +177,36 @@ function fadeMask(start, end) {
 	};
 }
 var scrollButtonClass = "absolute top-1/2 z-10 -translate-y-1/2 inline-flex size-7 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-sm transition-colors hover:text-foreground [@media(pointer:coarse)]:hidden";
-function TabsListContent({ variant, fullWidth, className, ...props }) {
+function TabsListContent({ variant, size, color, fullWidth, className, collapsible: _collapsible, collapsed: _collapsed, defaultCollapsed: _defaultCollapsed, onCollapsedChange: _onCollapsedChange, ...props }) {
 	const config = TABS_LIST_VARIANTS[variant];
+	const vars = colorVars(color);
 	const scrollerRef = React$1.useRef(null);
 	const scrollable = props["aria-orientation"] !== "vertical";
 	const { overflow, scrollByPage } = useTabsOverflow(scrollerRef, scrollable);
+	const isGlow = variant === "glow";
 	const list = /* @__PURE__ */ jsx(TabsHighlight, {
 		ref: scrollerRef,
-		containerClassName: scrollable ? "flex -my-1 py-1 overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : void 0,
+		containerClassName: scrollable ? cn("flex overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", isGlow ? GLOW_GUTTER.scroller : "-my-1 py-1") : void 0,
 		...config.highlight,
 		children: /* @__PURE__ */ jsx(TabsList$1, {
-			className: cn(config.list, scrollable && "shrink-0 min-w-fit", scrollable && fullWidth && "max-md:w-full", className),
+			className: cn(config.list, TABS_LIST_SIZE[size].list, scrollable && "shrink-0 min-w-fit", scrollable && fullWidth && "max-md:w-full", className),
 			...props
 		})
 	});
-	if (!scrollable) return list;
+	if (!scrollable) return /* @__PURE__ */ jsx("div", {
+		className: "contents",
+		style: vars,
+		children: list
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "tabs-list-scroller",
 		"data-overflow-start": overflow.start || void 0,
 		"data-overflow-end": overflow.end || void 0,
 		className: cn("relative min-w-0 max-w-full", fullWidth && "max-md:w-full"),
+		style: vars,
 		children: [
 			/* @__PURE__ */ jsx("div", {
+				className: isGlow ? GLOW_GUTTER.mask : void 0,
 				style: fadeMask(overflow.start, overflow.end),
 				children: list
 			}),
@@ -153,25 +240,153 @@ function Tabs({ className, ...props }) {
 * hidden tabs, chevron buttons page through them on pointer devices, and the
 * active tab is kept in view. Pass `aria-orientation="vertical"` for a stacked list.
 */
-function TabsList({ variant, fullWidth = true, ...props }) {
-	return /* @__PURE__ */ jsx(TabsListVariantContext.Provider, {
-		value: variant,
+function TabsList({ variant, size = "default", color = "primary", fullWidth = true, collapsible = false, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, ...props }) {
+	const [collapsed, setCollapsed] = useControlledState({
+		value: collapsedProp,
+		defaultValue: defaultCollapsed,
+		onChange: onCollapsedChange
+	});
+	const context = React$1.useMemo(() => ({
+		variant,
+		size,
+		collapsible,
+		collapsed,
+		toggleCollapsed: () => setCollapsed(!collapsed)
+	}), [
+		variant,
+		size,
+		collapsible,
+		collapsed,
+		setCollapsed
+	]);
+	return /* @__PURE__ */ jsx(TabsListContext.Provider, {
+		value: context,
 		children: /* @__PURE__ */ jsx(TabsListContent, {
 			variant: variant ?? "default",
+			size,
+			color,
 			fullWidth,
+			"data-collapsed": collapsed || void 0,
 			...props
 		})
 	});
 }
-var tabsTriggerBaseClass = "data-[state=active]:text-primary tracking-wide focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
-function TabsTrigger({ className, ...props }) {
-	const isLine = React$1.useContext(TabsListVariantContext) === "line";
+var tabsTriggerBaseClass = "data-[state=active]:text-[color:var(--espd-tabs-color)] tracking-wide focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] w-full px-2 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+/**
+* The selected label in the list's colour, its lightness held where text
+* reads (4.5:1 on the 10% pill, with room for an off-white page): at most
+* L 40 on a light page, at least L 62 on a dark one. Hue and chroma stay, and
+* a colour already in range is unchanged. Without relative colour syntax, the
+* colour as given. Not for `solid`, whose label sits on the fill.
+*/
+var readableLabelClass = "supports-[color:lch(from_red_l_c_h)]:data-[state=active]:text-[color:lch(from_var(--espd-tabs-color)_min(l,40)_c_h)] dark:supports-[color:lch(from_red_l_c_h)]:data-[state=active]:text-[color:lch(from_var(--espd-tabs-color)_max(l,62)_c_h)]";
+/** The label squeezes shut with a little overshoot; the fade is quicker than the squeeze. */
+var LABEL_SPRING = {
+	type: "spring",
+	stiffness: 420,
+	damping: 26,
+	opacity: { duration: .18 },
+	filter: { duration: .22 }
+};
+var ICON_WIGGLE = {
+	duration: .5,
+	ease: "easeOut"
+};
+var INSTANT = { duration: 0 };
+/** Gap between icon and label while the label shows (the trigger's own gap is off, so the icon centres when folded). */
+var LABEL_GAP = 6;
+/**
+* The icon, then the label. Folding squeezes the label to nothing (width, fade
+* and a touch of blur, on a spring) while the icon gives a small wiggle; the
+* label stays in the DOM, so it is still the tab's accessible name.
+* Nothing moves on first render or under reduced motion.
+*/
+function TriggerContent({ icon, label, iconOnly }) {
+	const reduceMotion = useReducedMotion();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(motion.span, {
+		"data-slot": "tabs-trigger-icon",
+		"aria-hidden": true,
+		className: "inline-flex",
+		initial: false,
+		animate: iconOnly ? {
+			rotate: [
+				0,
+				-16,
+				10,
+				0
+			],
+			scale: [
+				1,
+				1.25,
+				.92,
+				1
+			]
+		} : {
+			rotate: [
+				0,
+				16,
+				-10,
+				0
+			],
+			scale: [
+				1,
+				1.2,
+				.95,
+				1
+			]
+		},
+		transition: reduceMotion ? INSTANT : ICON_WIGGLE,
+		children: icon
+	}), /* @__PURE__ */ jsx(motion.span, {
+		"data-slot": "tabs-trigger-label",
+		"data-hidden": iconOnly || void 0,
+		className: "inline-flex items-center overflow-hidden whitespace-nowrap",
+		initial: false,
+		animate: iconOnly ? {
+			width: 0,
+			opacity: 0,
+			marginLeft: 0,
+			filter: "blur(4px)"
+		} : {
+			width: "auto",
+			opacity: 1,
+			marginLeft: LABEL_GAP,
+			filter: "blur(0px)"
+		},
+		transition: reduceMotion ? INSTANT : LABEL_SPRING,
+		children: label
+	})] });
+}
+function triggerContent(icon, label, iconOnly) {
+	if (!icon) return label;
+	return /* @__PURE__ */ jsx(TriggerContent, {
+		icon,
+		label,
+		iconOnly
+	});
+}
+function TabsTrigger({ className, icon, onClick, ...props }) {
+	const list = React$1.useContext(TabsListContext);
+	const { activeValue } = useTabs();
+	const isLine = list.variant === "line";
+	const isSolid = list.variant === "solid";
+	const sizing = TABS_LIST_SIZE[list.size];
+	const iconOnly = Boolean(icon) && list.collapsed;
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (icon && list.collapsible && activeValue === props.value) list.toggleCollapsed();
+	};
+	const child = props.children;
+	const children = props.asChild && React$1.isValidElement(child) ? React$1.cloneElement(child, void 0, triggerContent(icon, child.props.children, iconOnly)) : triggerContent(icon, child, iconOnly);
 	return /* @__PURE__ */ jsx(TabsHighlightItem, {
 		value: props.value,
 		className: "flex-1",
 		children: /* @__PURE__ */ jsx(TabsTrigger$1, {
-			className: cn(tabsTriggerBaseClass, isLine ? "text-muted-foreground py-2.5" : "text-muted-foreground h-[calc(100%-1px)] py-1", className),
-			...props
+			className: cn(tabsTriggerBaseClass, isLine ? "text-muted-foreground py-2.5" : "text-muted-foreground h-[calc(100%-1px)] py-1", isLine ? sizing.lineTrigger : sizing.trigger, isSolid ? "data-[state=active]:text-[color:var(--espd-tabs-color-foreground)]" : readableLabelClass, icon && "gap-0", className),
+			"data-icon-only": iconOnly || void 0,
+			...props,
+			onClick: handleClick,
+			children
 		})
 	});
 }

package/dist/core/animate-ui/components/animate/tooltip.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../../utils/cn.js";
+import { useStyleAxes } from "../../../../utils/style-axes.js";
 import { Tooltip as Tooltip$1, TooltipArrow, TooltipContent as TooltipContent$1, TooltipProvider as TooltipProvider$1, TooltipTrigger as TooltipTrigger$1 } from "../../primitives/animate/tooltip.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -19,9 +20,16 @@ function Tooltip({ sideOffset = 10, ...props }) {
 function TooltipTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(TooltipTrigger$1, { ...props });
 }
-function TooltipContent({ className, children, layout = "preserve-aspect", ...props }) {
+function TooltipContent({ className, children, layout = "preserve-aspect", radius, elevation, style, ...props }) {
+	const { style: axisStyle } = useStyleAxes({
+		radius,
+		elevation,
+		style
+	}, ["radius", "elevation"]);
 	return /* @__PURE__ */ jsxs(TooltipContent$1, {
-		className: cn("z-50 w-fit bg-tooltip text-tooltip-foreground rounded-md", className),
+		className: cn("z-50 w-fit bg-tooltip text-tooltip-foreground rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-md)))]", "shadow-[shadow:var(--espd-own-elevation,0_0_#0000)]", className),
+		style: axisStyle,
+		...typeof children === "string" || typeof children === "number" ? { "data-text": String(children) } : {},
 		...props,
 		children: [/* @__PURE__ */ jsx(motion.div, {
 			className: "overflow-hidden px-3 py-1.5 text-xs text-balance",

package/dist/core/animate-ui/components/base/preview-card.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../../utils/cn.js";
+import { useStyleAxes } from "../../../../utils/style-axes.js";
 import { PreviewCard as PreviewCard$1, PreviewCardBackdrop as PreviewCardBackdrop$1, PreviewCardPopup, PreviewCardPortal, PreviewCardPositioner, PreviewCardTrigger as PreviewCardTrigger$1 } from "../../primitives/base/preview-card.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
@@ -9,15 +10,31 @@ function PreviewCard(props) {
 function PreviewCardTrigger(props) {
 	return /* @__PURE__ */ jsx(PreviewCardTrigger$1, { ...props });
 }
-function PreviewCardPanel({ className, align = "center", sideOffset = 4, style, children, ...props }) {
+/** Puts the style-axis variables first; `style` may also be Base UI's function of state. */
+function withAxisStyle(partStyle, style) {
+	if (!partStyle) return style;
+	const s = style;
+	return typeof s === "function" ? (state) => ({
+		...partStyle,
+		...s(state)
+	}) : {
+		...partStyle,
+		...s
+	};
+}
+function PreviewCardPanel({ className, align = "center", sideOffset = 4, style, children, radius, elevation, ...props }) {
+	const { partStyle } = useStyleAxes({
+		radius,
+		elevation
+	}, ["radius", "elevation"]);
 	return /* @__PURE__ */ jsx(PreviewCardPortal, { children: /* @__PURE__ */ jsx(PreviewCardPositioner, {
 		align,
 		sideOffset,
 		className: "z-50",
 		...props,
 		children: /* @__PURE__ */ jsx(PreviewCardPopup, {
-			className: cn("bg-popover text-popover-foreground w-64 origin-(--transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
-			style,
+			className: cn("bg-popover text-popover-foreground w-64 origin-(--transform-origin) rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-md)))] border p-4 shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-md)))] outline-hidden", className),
+			style: withAxisStyle(partStyle, style),
 			children
 		})
 	}) });

package/dist/core/animate-ui/components/buttons/copy.js

@@ -1,19 +1,20 @@
 "use client";
 import { cn } from "../../../../utils/cn.js";
+import { useStyleAxes } from "../../../../utils/style-axes.js";
 import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import { Button } from "../../primitives/buttons/button.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-import { CheckIcon, CopyIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
 //#region src/core/animate-ui/components/buttons/copy.tsx
-var buttonVariants = cva("flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+var buttonVariants = cva("flex items-center justify-center rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
 			accent: "bg-accent text-accent-foreground shadow-xs hover:bg-accent/90",
-			destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+			destructive: "bg-destructive text-[color:var(--espd-on-solid-foreground,#fff)] shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
 			outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
 			secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
 			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
@@ -21,8 +22,8 @@ var buttonVariants = cva("flex items-center justify-center rounded-md transition
 		},
 		size: {
 			default: "size-9",
-			sm: "size-8 rounded-md",
-			lg: "size-10 rounded-md"
+			sm: "size-8 rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))]",
+			lg: "size-10 rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))]"
 		}
 	},
 	defaultVariants: {
@@ -30,7 +31,8 @@ var buttonVariants = cva("flex items-center justify-center rounded-md transition
 		size: "default"
 	}
 });
-function CopyButton({ className, content, copied, onCopiedChange, onClick, variant, size, delay = 3e3, ...props }) {
+function CopyButton({ className, content, copied, onCopiedChange, onClick, variant, size, delay = 3e3, radius, style, ...props }) {
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
 	const [isCopied, setIsCopied] = useControlledState({
 		value: copied,
 		onChange: onCopiedChange
@@ -65,6 +67,10 @@ function CopyButton({ className, content, copied, onCopiedChange, onClick, varia
 			className
 		})),
 		onClick: handleCopy,
+		style: partStyle ? {
+			...partStyle,
+			...style
+		} : style,
 		...props,
 		children: /* @__PURE__ */ jsx(AnimatePresence, {
 			mode: "popLayout",

package/dist/core/animate-ui/components/radix/dialog.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../../utils/cn.js";
+import { densityStyle, useStyleAxes } from "../../../../utils/style-axes.js";
 import { Dialog as Dialog$1, DialogClose as DialogClose$1, DialogContent as DialogContent$1, DialogDescription as DialogDescription$1, DialogFooter as DialogFooter$1, DialogHeader as DialogHeader$1, DialogOverlay as DialogOverlay$1, DialogPortal, DialogTitle as DialogTitle$1, DialogTrigger as DialogTrigger$1 } from "../../primitives/radix/dialog.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,13 +16,26 @@ function DialogClose(props) {
 }
 function DialogOverlay({ className, ...props }) {
 	return /* @__PURE__ */ jsx(DialogOverlay$1, {
-		className: cn("fixed inset-0 z-50 bg-black/50", className),
+		className: cn("fixed inset-0 z-50 bg-[var(--espd-overlay-scrim,rgb(0_0_0/0.5))] backdrop-blur-[var(--espd-overlay-blur,0px)]", className),
 		...props
 	});
 }
-function DialogContent({ className, children, showCloseButton = true, closeButtonClassName, ...props }) {
+function DialogContent({ className, children, showCloseButton = true, closeButtonClassName, radius, elevation, density, style, ...props }) {
+	const axes = useStyleAxes({
+		radius,
+		elevation
+	}, ["radius", "elevation"]);
+	const density_ = densityStyle(density);
+	const partStyle = axes.partStyle || density_ ? {
+		...density_,
+		...axes.partStyle
+	} : void 0;
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogContent$1, {
-		className: cn("bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg", className),
+		className: cn("bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-[var(--espd-gap-stack,calc(var(--spacing)*4))] rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-lg)))] border p-6 shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))] sm:max-w-lg", className),
+		style: partStyle ? {
+			...partStyle,
+			...style
+		} : style,
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogClose$1, {
 			className: cn("ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 z-50 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", closeButtonClassName),