@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/core/animate-ui/primitives/effects/highlight.js

@@ -392,6 +392,7 @@ function HighlightItem({ ref, as, children, id, value, className, style, transit
 			})
 		}), React$1.cloneElement(element, {
 			style: {
+				...element.props.style,
 				position: "relative",
 				zIndex: 1
 			},

package/dist/core/animate-ui/primitives/radix/accordion.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../../../utils/cn.js";
-import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Accordion } from "radix-ui";

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

@@ -1,10 +1,11 @@
 "use client";
-import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
+import { useNestedLayerPressGuard } from "../../../hooks/use-nested-layer-press-guard.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import { Dialog } from "radix-ui";
 import { AnimatePresence, motion } from "motion/react";
+import { Dialog } from "radix-ui";
 //#region src/core/animate-ui/primitives/radix/dialog.tsx
 var [DialogProvider, useDialog] = getStrictContext("DialogContext");
 function Dialog$1(props) {
@@ -72,13 +73,15 @@ function DialogContent({ from = "top", onOpenAutoFocus, onCloseAutoFocus, onEsca
 }, ...props }) {
 	const initialRotation = from === "bottom" || from === "left" ? "20deg" : "-20deg";
 	const rotateAxis = from === "top" || from === "bottom" ? "rotateX" : "rotateY";
+	const pressGuard = useNestedLayerPressGuard(void 0, onPointerDownOutside);
 	return /* @__PURE__ */ jsx(Dialog.Content, {
 		asChild: true,
 		forceMount: true,
+		ref: pressGuard.ref,
 		onOpenAutoFocus,
 		onCloseAutoFocus,
 		onEscapeKeyDown,
-		onPointerDownOutside,
+		onPointerDownOutside: pressGuard.onPointerDownOutside,
 		onInteractOutside,
 		children: /* @__PURE__ */ jsx(motion.div, {
 			"data-slot": "dialog-content",

package/dist/core/animate-ui/primitives/radix/dropdown-menu.js

@@ -1,12 +1,12 @@
 "use client";
-import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import { Highlight, HighlightItem } from "../effects/highlight.js";
 import { useDataState } from "../../../hooks/use-data-state.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-import { DropdownMenu } from "radix-ui";
 import { AnimatePresence, motion } from "motion/react";
+import { DropdownMenu } from "radix-ui";
 //#region src/core/animate-ui/primitives/radix/dropdown-menu.tsx
 var [DropdownMenuProvider, useDropdownMenu] = getStrictContext("DropdownMenuContext");
 var [DropdownMenuSubProvider, useDropdownMenuSub] = getStrictContext("DropdownMenuSubContext");

package/dist/core/animate-ui/primitives/radix/sheet.js

@@ -1,10 +1,11 @@
 "use client";
-import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
+import { useNestedLayerPressGuard } from "../../../hooks/use-nested-layer-press-guard.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import { Dialog } from "radix-ui";
 import { AnimatePresence, motion } from "motion/react";
+import { Dialog } from "radix-ui";
 //#region src/core/animate-ui/primitives/radix/sheet.tsx
 var [SheetProvider, useSheet] = getStrictContext("SheetContext");
 function Sheet(props) {
@@ -75,8 +76,9 @@ function SheetContent({ side = "right", transition = {
 	type: "spring",
 	stiffness: 150,
 	damping: 22
-}, style, children, ...props }) {
+}, style, children, onPointerDownOutside, ...props }) {
 	const { isOpen } = useSheet();
+	const pressGuard = useNestedLayerPressGuard(void 0, onPointerDownOutside);
 	const axis = side === "left" || side === "right" ? "x" : "y";
 	const offscreen = {
 		right: {
@@ -118,7 +120,9 @@ function SheetContent({ side = "right", transition = {
 		asChild: true,
 		forceMount: true,
 		...props,
+		onPointerDownOutside: pressGuard.onPointerDownOutside,
 		children: /* @__PURE__ */ jsx(motion.div, {
+			ref: pressGuard.ref,
 			"data-slot": "sheet-content",
 			"data-side": side,
 			initial: offscreen[side],

package/dist/core/animate-ui/primitives/radix/switch.js

@@ -1,10 +1,10 @@
 "use client";
-import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-import { Switch } from "radix-ui";
 import { motion } from "motion/react";
+import { Switch } from "radix-ui";
 //#region src/core/animate-ui/primitives/radix/switch.tsx
 var [SwitchProvider, useSwitch] = getStrictContext("SwitchContext");
 function Switch$1(props) {

package/dist/core/animate-ui/primitives/radix/toggle-group.js

@@ -1,11 +1,11 @@
 "use client";
-import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
 import { Highlight, HighlightItem } from "../effects/highlight.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ToggleGroup } from "radix-ui";
 import { AnimatePresence, motion } from "motion/react";
+import { ToggleGroup } from "radix-ui";
 //#region src/core/animate-ui/primitives/radix/toggle-group.tsx
 var [ToggleGroupProvider, useToggleGroup] = getStrictContext("ToggleGroupContext");
 function ToggleGroup$1(props) {

package/dist/core/badge.js

@@ -1,16 +1,19 @@
 import { cn } from "../utils/cn.js";
 import { resolveVariantStyles } from "../utils/variant.js";
+import { useStyleAxes } from "../utils/style-axes.js";
 import { VariantGradientUnderlay } from "../utils/variant-gradient-underlay.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/core/badge.tsx
-var badgeVariants = cva("inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2");
-function Badge({ className, variant = "soft", color = "primary", style, children, ...props }) {
+var badgeVariants = cva("inline-flex items-center rounded-[var(--espd-own-radius,var(--espd-radius-pill,var(--radius-md)))] px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2");
+function Badge({ className, variant = "soft", color = "primary", style, children, radius, ...props }) {
 	const styles = resolveVariantStyles(variant, color);
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(badgeVariants(), styles.container, className),
 		style: {
+			...partStyle,
 			...styles.containerStyle,
 			...style
 		},

package/dist/core/breadcrumb.js

@@ -1,8 +1,8 @@
 import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
 //#region src/core/breadcrumb.tsx
 var Breadcrumb = React$1.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
 	ref,

package/dist/core/button/button.js

@@ -4,21 +4,21 @@ import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 //#region src/core/button/button.tsx
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+			default: "bg-primary text-primary-foreground shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-control,var(--shadow-sm)))] hover:bg-primary/90",
 			destructive: "text-destructive [background:color-mix(in_oklab,var(--color-destructive)_15%,transparent)] hover:[background:color-mix(in_oklab,var(--color-destructive)_20%,transparent)]",
-			outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-			secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+			outline: "border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] border-input bg-background shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-control,var(--shadow-sm)))] hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-control,var(--shadow-sm)))] hover:bg-secondary/80",
 			ghost: "hover:bg-accent hover:text-accent-foreground",
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-9 px-4 py-2",
-			sm: "h-8 rounded-md px-3 text-xs",
-			lg: "h-10 rounded-md px-8",
-			icon: "h-9 w-9"
+			default: "h-[var(--espd-control-height-md,calc(var(--spacing)*9))] px-[var(--espd-button-padding-x-md,calc(var(--spacing)*4))] py-2",
+			sm: "h-[var(--espd-control-height-sm,calc(var(--spacing)*8))] rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] px-[var(--espd-button-padding-x-sm,calc(var(--spacing)*3))] text-xs",
+			lg: "h-[var(--espd-control-height-lg,calc(var(--spacing)*10))] rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] px-[var(--espd-button-padding-x-lg,calc(var(--spacing)*8))]",
+			icon: "h-[var(--espd-control-height-md,calc(var(--spacing)*9))] w-[var(--espd-control-height-md,calc(var(--spacing)*9))]"
 		}
 	},
 	defaultVariants: {

package/dist/core/button/craft-button.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Button } from "./button.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -59,7 +60,11 @@ function CraftButtonIcon({ children, className }) {
 	});
 }
 function CraftButton(props) {
-	const { children, size, color = "primary", asChild = false, className, ...rest } = props;
+	const { children, size, color = "primary", asChild = false, className, radius, style, ...rest } = props;
+	const axes = useStyleAxes({
+		radius,
+		style
+	}, ["radius"]);
 	return /* @__PURE__ */ jsx(CraftButtonContext.Provider, {
 		value: {
 			size,
@@ -68,7 +73,8 @@ function CraftButton(props) {
 		children: /* @__PURE__ */ jsx(Button, {
 			size,
 			asChild,
-			className: cn(craftButtonBgClasses[color], "group hover:bg-background relative cursor-pointer overflow-hidden rounded-full duration-500 hover:shadow-md dark:border dark:border-transparent", craftButtonDarkBorderClasses[color], className),
+			className: cn(craftButtonBgClasses[color], "group hover:bg-background relative cursor-pointer overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-control,calc(infinity*1px)))] duration-500 hover:shadow-md dark:border dark:border-transparent", craftButtonDarkBorderClasses[color], className),
+			style: axes.style,
 			...rest,
 			children
 		})

package/dist/core/button.js

@@ -4,19 +4,22 @@ import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 //#region src/core/button.tsx
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
 	variants: {
 		variant: {
-			default: "shadow",
-			outline: "border bg-background shadow-sm",
+			default: "shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-control,var(--shadow-sm)))]",
+			/** See-through like `ghost`: a button on a card, a band or a tinted panel shows that surface, not a page-coloured patch. A button over a picture gives itself a surface (`bg-card`). */
+			outline: "border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] bg-transparent shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-control,var(--shadow-sm)))]",
+			/** `outline` with a soft halo instead of the elevation shadow; the styled Button colours it. */
+			glow: "border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] bg-transparent shadow-glow",
 			ghost: "",
 			link: "underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-9 px-4 py-2",
-			sm: "h-8 rounded-md px-3 text-xs",
-			lg: "h-10 rounded-md px-8",
-			icon: "h-9 w-9"
+			default: "h-[var(--espd-control-height-md,calc(var(--spacing)*9))] px-[var(--espd-button-padding-x-md,calc(var(--spacing)*4))] py-2",
+			sm: "h-[var(--espd-control-height-sm,calc(var(--spacing)*8))] rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] px-[var(--espd-button-padding-x-sm,calc(var(--spacing)*3))] text-xs",
+			lg: "h-[var(--espd-control-height-lg,calc(var(--spacing)*10))] rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] px-[var(--espd-button-padding-x-lg,calc(var(--spacing)*8))]",
+			icon: "h-[var(--espd-control-height-md,calc(var(--spacing)*9))] w-[var(--espd-control-height-md,calc(var(--spacing)*9))]"
 		}
 	},
 	defaultVariants: {
@@ -24,6 +27,13 @@ var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespa
 		size: "default"
 	}
 });
+/**
+* Uncoloured base button: its `default` variant is only a shadow, with no
+* colour, ring or icon props. Apps almost always want the styled `Button`
+* from `@espressif/dashboard-ui-components/components` instead, which takes
+* `color`, `startIcon`, `endIcon`, `loading`, `tooltip` and `iconOnlyBelow`.
+* The two share a name on purpose (renaming either would break imports).
+*/
 var Button = React$1.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
 		className: cn(buttonVariants({

package/dist/core/card.js

@@ -1,12 +1,30 @@
 import { cn } from "../utils/cn.js";
+import { densityStyle, useStyleAxes } from "../utils/style-axes.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/core/card.tsx
-var Card = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-	ref,
-	className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
-	...props
-}));
+var Card = React$1.forwardRef(({ className, radius, elevation, border, density, style, ...props }, ref) => {
+	const density_ = densityStyle(density);
+	const axes = useStyleAxes({
+		radius,
+		elevation,
+		border,
+		style: density_ ? {
+			...density_,
+			...style
+		} : style
+	}, [
+		"radius",
+		"elevation",
+		"border"
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-xl)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,1px))] bg-card text-card-foreground shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-surface,var(--shadow-sm)))]", className),
+		style: axes.style,
+		...props
+	});
+});
 Card.displayName = "Card";
 var CardHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,

package/dist/core/combobox/combobox.js

@@ -1,12 +1,17 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronsUpDown } from "lucide-react";
 //#region src/core/combobox/combobox.tsx
-function AsyncCombobox({ value, onValueChange, options, onSearchChange, isLoading = false, placeholder = "Select...", emptyText = "No results.", searchPlaceholder = "Search...", label, required, disabled, className, clearable = false, hasMore = false, onLoadMore }) {
+function AsyncCombobox({ value, onValueChange, options, onSearchChange, isLoading = false, placeholder = "Select...", emptyText = "No results.", searchPlaceholder = "Search...", label, required, disabled, className, clearable = false, hasMore = false, onLoadMore, radius, border }) {
+	const axes = useStyleAxes({
+		radius,
+		border
+	}, ["radius", "border"]);
 	const [open, setOpen] = React$1.useState(false);
 	const [inputValue, setInputValue] = React$1.useState("");
 	const displayValue = options.find((o) => o.value === value)?.label ?? (value || "");
@@ -23,7 +28,8 @@ function AsyncCombobox({ value, onValueChange, options, onSearchChange, isLoadin
 		role: "combobox",
 		"aria-expanded": open,
 		disabled,
-		className: cn("flex h-10 w-full items-center justify-between 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 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 md:text-sm", !displayValue && "text-muted-foreground", className),
+		className: cn("flex h-10 w-full items-center justify-between 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-200 ease-in-out 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 md:text-sm", !displayValue && "text-muted-foreground", className),
+		style: axes.style,
 		onClick: () => setOpen(!open),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "truncate",

package/dist/core/command.js

@@ -6,7 +6,7 @@ import { Command } from "cmdk";
 //#region src/core/command.tsx
 var Command$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command, {
 	ref,
-	className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
+	className: cn("flex h-full w-full flex-col overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-md)))] bg-popover text-popover-foreground", className),
 	...props
 }));
 Command$1.displayName = Command.displayName;
@@ -15,7 +15,7 @@ var CommandInput = React$1.forwardRef(({ className, ...props }, ref) => /* @__PU
 	"cmdk-input-wrapper": "",
 	children: [/* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command.Input, {
 		ref,
-		className: cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", className),
+		className: cn("flex h-[var(--espd-control-height-lg,calc(var(--spacing)*10))] w-full rounded-md bg-transparent py-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", className),
 		...props
 	})]
 }));
@@ -46,7 +46,7 @@ var CommandSeparator = React$1.forwardRef(({ className, ...props }, ref) => /* @
 CommandSeparator.displayName = Command.Separator.displayName;
 var CommandItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command.Item, {
 	ref,
-	className: cn("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+	className: cn("relative flex cursor-default gap-2 select-none items-center rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-sm)))] px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
 	...props
 }));
 CommandItem.displayName = Command.Item.displayName;

package/dist/core/form.js

@@ -38,7 +38,7 @@ var FormItem = React$1.forwardRef(({ className, ...props }, ref) => {
 		value: { id },
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
-			className: cn("space-y-2", className),
+			className: cn("space-y-[var(--espd-gap-field,calc(var(--spacing)*2))]", className),
 			...props
 		})
 	});

package/dist/core/hooks/use-nested-layer-press-guard.js

@@ -0,0 +1,46 @@
+import * as React$1 from "react";
+//#region src/core/hooks/use-nested-layer-press-guard.tsx
+/**
+* Keeps a Radix Popover / Dialog open when an outside press only closed a
+* layer nested in it.
+*
+* Since Popover and Dialog 1.1.17, Radix defers their outside-press dismissal
+* from `pointerdown` to the `click` that follows. A nested layer that blocks
+* outside pointer events (an open Select's list) still closes on
+* `pointerdown`, so by `click` the outer layer believes it is on top again and
+* closes too: pressing a Select's trigger to close its list also closed the
+* popover or sheet around it.
+*
+* While a higher layer blocks it, Radix sets `pointer-events: none` on the
+* outer layer's element. This hook reads that at `pointerdown` (capture phase,
+* before any layer reacts) and cancels the deferred dismissal for that press.
+*/
+function useNestedLayerPressGuard(forwardedRef, onPointerDownOutside) {
+	const nodeRef = React$1.useRef(null);
+	const blockedRef = React$1.useRef(false);
+	React$1.useEffect(() => {
+		const record = () => {
+			blockedRef.current = nodeRef.current?.style.pointerEvents === "none";
+		};
+		document.addEventListener("pointerdown", record, true);
+		return () => document.removeEventListener("pointerdown", record, true);
+	}, []);
+	const ref = React$1.useCallback((node) => {
+		nodeRef.current = node;
+		if (typeof forwardedRef === "function") forwardedRef(node);
+		else if (forwardedRef) forwardedRef.current = node;
+	}, [forwardedRef]);
+	const handlePointerDownOutside = (event) => {
+		if (blockedRef.current) {
+			event.preventDefault();
+			return;
+		}
+		onPointerDownOutside?.(event);
+	};
+	return {
+		ref,
+		onPointerDownOutside: handlePointerDownOutside
+	};
+}
+//#endregion
+export { useNestedLayerPressGuard };

package/dist/core/hooks/use-on-screen.js

@@ -0,0 +1,33 @@
+import * as React$1 from "react";
+//#region src/core/hooks/use-on-screen.tsx
+function subscribeVisibility(onChange) {
+	if (typeof document === "undefined") return () => {};
+	document.addEventListener("visibilitychange", onChange);
+	return () => document.removeEventListener("visibilitychange", onChange);
+}
+var isDocumentVisible = () => !document.hidden;
+/**
+* True while any part of the element is on screen AND the tab is visible:
+* the signal for pausing loops nobody can see (autoplay, animation).
+*
+* Unlike `useIsInView` (motion's observer, for reveal-on-scroll), this one
+* also goes false when the tab is hidden. Where `IntersectionObserver` is
+* missing (SSR, jsdom) the element counts as on screen.
+*/
+function useOnScreen(ref) {
+	const [intersecting, setIntersecting] = React$1.useState(true);
+	const visible = React$1.useSyncExternalStore(subscribeVisibility, isDocumentVisible, () => true);
+	React$1.useEffect(() => {
+		const element = ref.current;
+		if (!element || typeof IntersectionObserver === "undefined") return void 0;
+		const observer = new IntersectionObserver((entries) => {
+			const entry = entries[entries.length - 1];
+			if (entry) setIntersecting(entry.isIntersecting);
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [ref]);
+	return intersecting && visible;
+}
+//#endregion
+export { useOnScreen };

package/dist/core/hooks/use-prefers-reduced-motion.js

@@ -0,0 +1,19 @@
+import * as React$1 from "react";
+//#region src/core/hooks/use-prefers-reduced-motion.tsx
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe(onChange) {
+	if (typeof window === "undefined" || !window.matchMedia) return () => {};
+	const query = window.matchMedia(REDUCED_MOTION_QUERY);
+	query.addEventListener?.("change", onChange);
+	return () => query.removeEventListener?.("change", onChange);
+}
+function read() {
+	if (typeof window === "undefined" || !window.matchMedia) return false;
+	return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+/** True while the person asks their system for reduced motion; autoplay never runs then. */
+function usePrefersReducedMotion() {
+	return React$1.useSyncExternalStore(subscribe, read, () => false);
+}
+//#endregion
+export { usePrefersReducedMotion };

package/dist/core/hooks/use-scroll-overflow.js

@@ -4,6 +4,13 @@ var NO_OVERFLOW = {
 	start: false,
 	end: false
 };
+/**
+* After a resize, keep measuring for this long. Content that animates to its
+* new size (a tab highlight springing narrower when the list folds) overflows
+* for a moment and settles without another resize, which would otherwise leave
+* a stale "more this way" edge behind.
+*/
+var SETTLE_MS = 800;
 /** Tracks whether a horizontal scroller has content hidden on either side. */
 function useScrollOverflow(ref, { enabled = true, getContent, onResize } = {}) {
 	const [overflow, setOverflow] = React$1.useState(NO_OVERFLOW);
@@ -29,11 +36,23 @@ function useScrollOverflow(ref, { enabled = true, getContent, onResize } = {}) {
 				end
 			});
 		};
+		let frame = 0;
+		let settleUntil = 0;
+		const settle = () => {
+			settleUntil = performance.now() + SETTLE_MS;
+			if (frame) return;
+			const tick = () => {
+				update();
+				frame = performance.now() < settleUntil ? requestAnimationFrame(tick) : 0;
+			};
+			frame = requestAnimationFrame(tick);
+		};
 		update();
 		scroller.addEventListener("scroll", update, { passive: true });
 		if (typeof ResizeObserver === "undefined") return () => scroller.removeEventListener("scroll", update);
 		const observer = new ResizeObserver(() => {
 			update();
+			settle();
 			onResizeRef.current?.();
 		});
 		observer.observe(scroller);
@@ -42,6 +61,7 @@ function useScrollOverflow(ref, { enabled = true, getContent, onResize } = {}) {
 		return () => {
 			scroller.removeEventListener("scroll", update);
 			observer.disconnect();
+			cancelAnimationFrame(frame);
 		};
 	}, [ref, enabled]);
 	return overflow;

package/dist/core/index.d.ts

@@ -2,14 +2,26 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-export { B as Badge, a as BadgeProps, b as Breadcrumb, c as BreadcrumbEllipsis, d as BreadcrumbItem, e as BreadcrumbLink, f as BreadcrumbList, g as BreadcrumbPage, h as BreadcrumbSeparator, Q as Button, i as ButtonGroup, j as ButtonGroupSeparator, k as ButtonGroupText, R as ButtonProps, C as Card, l as CardContent, m as CardDescription, n as CardFooter, o as CardHeader, p as CardTitle, q as Collapsible, r as CollapsibleContent, s as CollapsibleTrigger, L as Label, u as Popover, v as PopoverAnchor, w as PopoverContent, x as PopoverTrigger, S as Separator, y as SeparatorProps, z as Skeleton, J as badgeVariants, K as buttonGroupVariants, M as buttonVariants, O as useIsMobile } from '../popover-ByLD3-Qv.js';
+export { Badge, BadgeProps, badgeVariants } from '../components/badge/index.js';
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../components/breadcrumb/index.js';
+export { a as Button, B as ButtonProps, b as buttonVariants } from '../button-BK-DIR_L.js';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from '../components/button-group/index.js';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../components/card/index.js';
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/collapsible/index.js';
+export { Label } from '../components/label/index.js';
+export { Popover, PopoverAnchor, PopoverContent, PopoverGroup, PopoverGroupProps, PopoverProps, PopoverTrigger } from '../components/popover/index.js';
+export { Separator, SeparatorProps } from '../components/separator/index.js';
+export { Skeleton } from '../components/skeleton/index.js';
 export { u as useControlledState } from '../use-controlled-state-BL9NoHu8.js';
+export { useIsMobile } from '../components/use-mobile/index.js';
 import { UseInViewOptions } from 'motion/react';
-import '@radix-ui/react-label';
-import '@radix-ui/react-separator';
-import '@radix-ui/react-collapsible';
+import '../style-axes-DSQ2DGc5.js';
+import '../variant-D81RhpbR.js';
 import '../index-BQANnKs9.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-label';
 import '@radix-ui/react-popover';
+import '@radix-ui/react-separator';
 
 interface UseIsInViewOptions {
     inView?: boolean;
@@ -34,6 +46,19 @@ declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimiti
 type DataStateValue = string | boolean | null;
 declare function useDataState<T extends HTMLElement = HTMLElement>(key: string, forwardedRef?: React.Ref<T | null>, onChange?: (value: DataStateValue) => void): [DataStateValue, React.RefObject<T | null>];
 
+/**
+ * True while any part of the element is on screen AND the tab is visible:
+ * the signal for pausing loops nobody can see (autoplay, animation).
+ *
+ * Unlike `useIsInView` (motion's observer, for reveal-on-scroll), this one
+ * also goes false when the tab is hidden. Where `IntersectionObserver` is
+ * missing (SSR, jsdom) the element counts as on screen.
+ */
+declare function useOnScreen(ref: React.RefObject<Element | null>): boolean;
+
+/** True while the person asks their system for reduced motion; autoplay never runs then. */
+declare function usePrefersReducedMotion(): boolean;
+
 declare function getStrictContext<T>(name?: string): readonly [
     ({ value, children, }: {
         value: T;
@@ -42,4 +67,4 @@ declare function getStrictContext<T>(name?: string): readonly [
     () => T
 ];
 
-export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, type DataStateValue, type UseIsInViewOptions, getStrictContext, useDataState, useIsInView };
+export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, type DataStateValue, type UseIsInViewOptions, getStrictContext, useDataState, useIsInView, useOnScreen, usePrefersReducedMotion };

package/dist/core/index.js

@@ -1,18 +1,21 @@
-import { useControlledState } from "./hooks/use-controlled-state.js";
 import { getStrictContext } from "./utils/get-strict-context.js";
+import { useControlledState } from "./hooks/use-controlled-state.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { useDataState } from "./hooks/use-data-state.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
 import { Button, buttonVariants } from "./button.js";
+import { PopoverGroup } from "./popover-group.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { Separator } from "./separator.js";
 import { Skeleton } from "./skeleton.js";
 import { Label } from "./label.js";
 import { Badge, badgeVariants } from "./badge.js";
+import { usePrefersReducedMotion } from "./hooks/use-prefers-reduced-motion.js";
 import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "./button-group.js";
+import { useOnScreen } from "./hooks/use-on-screen.js";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
 import { useIsInView } from "./hooks/use-is-in-view.js";
 import { Alert, AlertDescription, AlertTitle } from "./alert.js";
-export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Separator, Skeleton, badgeVariants, buttonGroupVariants, buttonVariants, getStrictContext, useControlledState, useDataState, useIsInView, useIsMobile };
+export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Label, Popover, PopoverAnchor, PopoverContent, PopoverGroup, PopoverTrigger, Separator, Skeleton, badgeVariants, buttonGroupVariants, buttonVariants, getStrictContext, useControlledState, useDataState, useIsInView, useIsMobile, useOnScreen, usePrefersReducedMotion };