@espressif/dashboard-ui-components 1.11.1 → 1.12.0

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

@@ -1,4 +1,5 @@
 import { cn } from "../../../../utils/cn.js";
+import { useStyleAxes } from "../../../../utils/style-axes.js";
 import { DropdownMenu as DropdownMenu$1, DropdownMenuCheckboxItem as DropdownMenuCheckboxItem$1, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuGroup as DropdownMenuGroup$1, DropdownMenuHighlight, DropdownMenuHighlightItem, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuItemIndicator, DropdownMenuLabel as DropdownMenuLabel$1, DropdownMenuRadioGroup as DropdownMenuRadioGroup$1, DropdownMenuRadioItem as DropdownMenuRadioItem$1, DropdownMenuSeparator as DropdownMenuSeparator$1, DropdownMenuShortcut as DropdownMenuShortcut$1, DropdownMenuSub as DropdownMenuSub$1, DropdownMenuSubContent as DropdownMenuSubContent$1, DropdownMenuSubTrigger as DropdownMenuSubTrigger$1, DropdownMenuTrigger as DropdownMenuTrigger$1 } from "../../primitives/radix/dropdown-menu.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -10,13 +11,21 @@ function DropdownMenu(props) {
 function DropdownMenuTrigger(props) {
 	return /* @__PURE__ */ jsx(DropdownMenuTrigger$1, { ...props });
 }
-function DropdownMenuContent({ sideOffset = 4, className, children, ...props }) {
+function DropdownMenuContent({ sideOffset = 4, className, children, radius, elevation, style, ...props }) {
+	const { partStyle } = useStyleAxes({
+		radius,
+		elevation
+	}, ["radius", "elevation"]);
 	return /* @__PURE__ */ jsx(DropdownMenuContent$1, {
 		sideOffset,
-		className: cn("bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] max-w-xs origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl border px-1 py-1.5 shadow-lg outline-none will-change-[opacity,transform] select-none", className),
+		style: partStyle ? {
+			...partStyle,
+			...style
+		} : style,
+		className: cn("bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] max-w-xs origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-2xl)))] border px-1 py-1.5 shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))] outline-none will-change-[opacity,transform] select-none", className),
 		...props,
 		children: /* @__PURE__ */ jsx(DropdownMenuHighlight, {
-			className: "absolute inset-0 bg-accent z-0 rounded-sm",
+			className: "absolute inset-0 bg-accent z-0 rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-sm)))]",
 			children
 		})
 	});
@@ -32,7 +41,7 @@ function DropdownMenuItem({ className, inset, variant = "default", disabled, ...
 			disabled,
 			"data-inset": inset,
 			"data-variant": variant,
-			className: cn("focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+			className: cn("focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-sm)))] px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 			...props
 		})
 	});
@@ -42,7 +51,7 @@ function DropdownMenuCheckboxItem({ className, children, checked, disabled, ...p
 		disabled,
 		children: /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem$1, {
 			disabled,
-			className: cn("focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+			className: cn("focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-sm)))] py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 			checked,
 			...props,
 			children: [/* @__PURE__ */ jsx("span", {
@@ -70,7 +79,7 @@ function DropdownMenuRadioItem({ className, children, disabled, ...props }) {
 		disabled,
 		children: /* @__PURE__ */ jsxs(DropdownMenuRadioItem$1, {
 			disabled,
-			className: cn("focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+			className: cn("focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-sm)))] py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 			...props,
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
@@ -110,7 +119,7 @@ function DropdownMenuSubTrigger({ disabled, className, inset, children, ...props
 		children: /* @__PURE__ */ jsxs(DropdownMenuSubTrigger$1, {
 			disabled,
 			"data-inset": inset,
-			className: cn("focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", "data-[state=open]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out", className),
+			className: cn("focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-sm)))] px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", "data-[state=open]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out", className),
 			...props,
 			children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, {
 				"data-slot": "chevron",
@@ -119,9 +128,17 @@ function DropdownMenuSubTrigger({ disabled, className, inset, children, ...props
 		})
 	});
 }
-function DropdownMenuSubContent({ className, ...props }) {
+function DropdownMenuSubContent({ className, radius, elevation, style, ...props }) {
+	const { partStyle } = useStyleAxes({
+		radius,
+		elevation
+	}, ["radius", "elevation"]);
 	return /* @__PURE__ */ jsx(DropdownMenuSubContent$1, {
-		className: cn("bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg outline-none", className),
+		style: partStyle ? {
+			...partStyle,
+			...style
+		} : style,
+		className: cn("bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-md)))] border p-1 shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))] outline-none", className),
 		...props
 	});
 }

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

@@ -1,4 +1,5 @@
 import { cn } from "../../../../utils/cn.js";
+import { densityStyle, useStyleAxes } from "../../../../utils/style-axes.js";
 import { Sheet as Sheet$1, SheetClose as SheetClose$1, SheetContent as SheetContent$1, SheetDescription as SheetDescription$1, SheetFooter as SheetFooter$1, SheetHeader as SheetHeader$1, SheetOverlay as SheetOverlay$1, SheetPortal, SheetTitle as SheetTitle$1, SheetTrigger as SheetTrigger$1 } from "../../primitives/radix/sheet.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,14 +28,19 @@ function SheetTrigger(props) {
 }
 function SheetOverlay({ className, ...props }) {
 	return /* @__PURE__ */ jsx(SheetOverlay$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 SheetClose(props) {
 	return /* @__PURE__ */ jsx(SheetClose$1, { ...props });
 }
-function SheetContent({ className, children, side = "right", showCloseButton = true, onEscapeKeyDown, onPointerDownOutside, ...props }) {
+function SheetContent({ className, children, side = "right", showCloseButton = true, onEscapeKeyDown, onPointerDownOutside, radius, elevation, density, style, ...props }) {
+	const { partStyle } = useStyleAxes({
+		radius,
+		elevation
+	}, ["radius", "elevation"]);
+	const density_ = densityStyle(density);
 	const floating = React$1.useContext(SheetFloatingContext);
 	const { closeOnEscape, closeOnOutsideClick } = React$1.useContext(SheetDismissContext);
 	const closeClassName = "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none";
@@ -49,9 +55,14 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
 			onPointerDownOutside?.(event);
 			if (!closeOnOutsideClick) event.preventDefault();
 		},
+		style: density_ ? {
+			...density_,
+			...style
+		} : style,
 		...props,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "bg-background relative flex h-full flex-col gap-0 rounded-lg shadow-lg overflow-auto",
+			style: partStyle,
+			className: "bg-background relative flex h-full flex-col gap-0 rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-lg)))] shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))] overflow-auto",
 			children: [children, showCloseButton && /* @__PURE__ */ jsxs(SheetClose, {
 				className: closeClassName,
 				children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
@@ -62,7 +73,7 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
 		})
 	})] });
 	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetContent$1, {
-		className: cn("bg-background fixed z-50 flex flex-col gap-0 shadow-lg", side === "right" && "h-full w-[350px] max-w-full border-l", side === "left" && "h-full w-[350px] max-w-full border-r", side === "top" && "h-[350px] w-full border-b", side === "bottom" && "h-[350px] w-full border-t", className),
+		className: cn("bg-background fixed z-50 flex flex-col gap-0 shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))]", side === "right" && "h-full w-[350px] max-w-full border-l", side === "left" && "h-full w-[350px] max-w-full border-r", side === "top" && "h-[350px] w-full border-b", side === "bottom" && "h-[350px] w-full border-t", className),
 		side,
 		onEscapeKeyDown: (event) => {
 			onEscapeKeyDown?.(event);
@@ -72,6 +83,11 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
 			onPointerDownOutside?.(event);
 			if (!closeOnOutsideClick) event.preventDefault();
 		},
+		style: partStyle || density_ ? {
+			...density_,
+			...partStyle,
+			...style
+		} : style,
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsxs(SheetClose, {
 			className: closeClassName,

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

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "../../../../utils/cn.js";
 import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../animate/tooltip.js";
 import { Highlight, HighlightItem } from "../../primitives/effects/highlight.js";
 import { Button } from "../../../button.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../animate/tooltip.js";
 import { ScrollArea } from "../../../scroll-area.js";
 import { useIsMobile } from "../../../hooks/use-mobile.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
@@ -83,7 +83,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		}) })
 	});
 }
-function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, animateOnHover = true, containerClassName, transition = {
+function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, animateOnHover = true, containerClassName, mobileClassName, transition = {
 	type: "spring",
 	stiffness: 350,
 	damping: 35
@@ -111,7 +111,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			"data-sidebar": "sidebar",
 			"data-slot": "sidebar",
 			"data-mobile": "true",
-			className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+			className: cn("bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", mobileClassName),
 			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
 			side,
 			children: [/* @__PURE__ */ jsxs(SheetHeader, {
@@ -297,22 +297,22 @@ function SidebarMenuItem({ className, ...props }) {
 		...props
 	});
 }
-var sidebarMenuButtonActiveVariants = cva("bg-sidebar-accent text-sidebar-accent-foreground rounded-md", {
+var sidebarMenuButtonActiveVariants = cva("bg-sidebar-accent text-sidebar-accent-foreground rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))]", {
 	variants: { variant: {
 		default: "bg-sidebar-accent text-sidebar-accent-foreground",
 		outline: "bg-sidebar-accent text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
 	} },
 	defaultVariants: { variant: "default" }
 });
-var sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&:not([data-highlight])]:data-[state=open]:hover:bg-sidebar-accent [&:not([data-highlight])]:data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+var sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&:not([data-highlight])]:data-[state=open]:hover:bg-sidebar-accent [&:not([data-highlight])]:data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: "[&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground",
 			outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground [&:not([data-highlight])]:hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
 		},
 		size: {
-			default: "h-8 text-sm",
-			sm: "h-7 text-xs",
+			default: "h-[var(--espd-sidebar-row-height,calc(var(--spacing)*8))] text-sm",
+			sm: "h-[var(--espd-sidebar-row-height-sm,calc(var(--spacing)*7))] text-xs",
 			lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
 		}
 	},
@@ -401,13 +401,13 @@ function SidebarMenuSubItem({ className, ...props }) {
 }
 function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
 	return /* @__PURE__ */ jsx(HighlightItem, {
-		activeClassName: "bg-sidebar-accent text-sidebar-accent-foreground rounded-md",
+		activeClassName: "bg-sidebar-accent text-sidebar-accent-foreground rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))]",
 		children: /* @__PURE__ */ jsx(asChild ? Slot.Root : "a", {
 			"data-slot": "sidebar-menu-sub-button",
 			"data-sidebar": "menu-sub-button",
 			"data-size": size,
 			"data-active": isActive,
-			className: cn("text-sidebar-foreground ring-sidebar-ring [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className),
+			className: cn("text-sidebar-foreground ring-sidebar-ring [&:not([data-highlight])]:hover:bg-sidebar-accent [&:not([data-highlight])]:hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className),
 			...props
 		})
 	});

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

@@ -1,5 +1,6 @@
 import { cn } from "../../../../utils/cn.js";
-import { isPresetColor } from "../../../../utils/color.js";
+import { contrastingForeground, isPresetColor } from "../../../../utils/color.js";
+import { useStyleAxes } from "../../../../utils/style-axes.js";
 import { getStrictContext } from "../../../utils/get-strict-context.js";
 import { ToggleGroup as ToggleGroup$1, ToggleGroupHighlight, ToggleGroupHighlightItem, ToggleGroupItem as ToggleGroupItem$1, useToggleGroup as useToggleGroup$1 } from "../../primitives/radix/toggle-group.js";
 import { toggleVariants } from "./toggle.js";
@@ -51,21 +52,99 @@ var presetMultipleSelectedSurface = {
 	gray: "data-[state=on]:bg-gray/10 data-[state=on]:border-gray/20",
 	mist: "data-[state=on]:bg-mist data-[state=on]:border-mist-border"
 };
+/** `glow`: the group's border and halo in its colour — the recipe of `TabsList variant="glow"`. */
+var presetGlowFrame = {
+	primary: "border-primary/30 shadow-glow shadow-primary/45",
+	secondary: "border-secondary/30 shadow-glow shadow-secondary/45",
+	error: "border-error/30 shadow-glow shadow-error/45",
+	info: "border-info/30 shadow-glow shadow-info/45",
+	success: "border-success/30 shadow-glow shadow-success/45",
+	warning: "border-warning/30 shadow-glow shadow-warning/45",
+	disabled: "border-disabled/30 shadow-glow shadow-disabled/45",
+	gray: "border-gray/30 shadow-glow shadow-gray/45",
+	mist: "border-mist-border shadow-glow shadow-mist-foreground/45"
+};
+/**
+* `solid`: the selected item is a pill filled with the group's colour, its
+* text in that preset's `-foreground` — the recipe of `TabsList
+* variant="solid"`. Mist is nearly the surface it sits on, so its pill keeps
+* its own hairline to stay visible.
+*/
+var presetSolidFill = {
+	primary: "bg-primary shadow-sm",
+	secondary: "bg-secondary shadow-sm",
+	error: "bg-error shadow-sm",
+	info: "bg-info shadow-sm",
+	success: "bg-success shadow-sm",
+	warning: "bg-warning shadow-sm",
+	disabled: "bg-disabled shadow-sm",
+	gray: "bg-gray shadow-sm",
+	mist: "bg-mist shadow-sm border border-mist-border"
+};
+var presetSolidText = {
+	primary: "data-[state=on]:text-primary-foreground",
+	secondary: "data-[state=on]:text-secondary-foreground",
+	error: "data-[state=on]:text-error-foreground",
+	info: "data-[state=on]:text-info-foreground",
+	success: "data-[state=on]:text-success-foreground",
+	warning: "data-[state=on]:text-warning-foreground",
+	disabled: "data-[state=on]:text-disabled-foreground",
+	gray: "data-[state=on]:text-gray-foreground",
+	mist: "data-[state=on]:text-mist-foreground"
+};
+/** `solid` with `type="multiple"`: no sliding pill, so each pressed item is filled itself. */
+var presetMultipleSolidSurface = {
+	primary: "data-[state=on]:bg-primary",
+	secondary: "data-[state=on]:bg-secondary",
+	error: "data-[state=on]:bg-error",
+	info: "data-[state=on]:bg-info",
+	success: "data-[state=on]:bg-success",
+	warning: "data-[state=on]:bg-warning",
+	disabled: "data-[state=on]:bg-disabled",
+	gray: "data-[state=on]:bg-gray",
+	mist: "data-[state=on]:bg-mist data-[state=on]:border-mist-border"
+};
+var arbitrarySolidFillClass = "bg-[var(--toggle-group-accent)] shadow-sm";
+var arbitrarySolidTextClass = "data-[state=on]:text-[var(--toggle-group-accent-foreground)]";
+var arbitraryMultipleSolidSurfaceClass = "data-[state=on]:bg-[var(--toggle-group-accent)]";
+var arbitraryGlowFrameClass = "border-[color-mix(in_srgb,var(--toggle-group-accent)_30%,transparent)] shadow-glow shadow-[color-mix(in_srgb,var(--toggle-group-accent)_45%,transparent)]";
 var arbitrarySelectedHighlightClass = "border bg-[color-mix(in_srgb,var(--toggle-group-accent)_10%,transparent)] border-[color-mix(in_srgb,var(--toggle-group-accent)_20%,transparent)]";
 var arbitraryMultipleSelectedSurfaceClass = "data-[state=on]:border data-[state=on]:bg-[color-mix(in_srgb,var(--toggle-group-accent)_10%,transparent)] data-[state=on]:border-[color-mix(in_srgb,var(--toggle-group-accent)_20%,transparent)]";
-function resolveToggleGroupColorTokens(color) {
+function resolveSolidColorTokens(color) {
+	if (isPresetColor(color)) return {
+		highlightClass: presetSolidFill[color],
+		multipleSelectedSurfaceClass: cn("data-[state=on]:border", presetMultipleSolidSurface[color]),
+		selectedTextClass: presetSolidText[color]
+	};
+	return {
+		highlightClass: arbitrarySolidFillClass,
+		multipleSelectedSurfaceClass: arbitraryMultipleSolidSurfaceClass,
+		selectedTextClass: arbitrarySolidTextClass,
+		arbitraryAccent: color,
+		arbitraryAccentForeground: contrastingForeground(color)
+	};
+}
+function resolveToggleGroupColorTokens(color, variant) {
+	if (variant === "solid") return resolveSolidColorTokens(color);
 	if (isPresetColor(color)) return {
 		highlightClass: cn(presetSelectedHighlightBg[color], presetSelectedHighlightBorder[color]),
 		multipleSelectedSurfaceClass: cn("data-[state=on]:border", presetMultipleSelectedSurface[color]),
-		selectedTextClass: presetSelectedText[color]
+		selectedTextClass: presetSelectedText[color],
+		glowFrameClass: presetGlowFrame[color]
 	};
 	return {
 		highlightClass: arbitrarySelectedHighlightClass,
+		glowFrameClass: arbitraryGlowFrameClass,
 		multipleSelectedSurfaceClass: arbitraryMultipleSelectedSurfaceClass,
 		selectedTextClass: "data-[state=on]:text-[var(--toggle-group-accent)]",
 		arbitraryAccent: color
 	};
 }
+/** Corner rounding for the frame, the highlight and the items. */
+var CONTROL_RADIUS = "rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))]";
+function radiusClass(variant) {
+	return variant === "default" ? CONTROL_RADIUS : "rounded-full";
+}
 var [ToggleGroupProvider, useToggleGroup] = getStrictContext("ToggleGroupStyledContext");
 /** Horizontal padding + min width; applied after `toggleVariants` so it overrides size defaults. */
 var toggleGroupItemSizeClasses = {
@@ -74,39 +153,50 @@ var toggleGroupItemSizeClasses = {
 	lg: "px-4 min-w-11",
 	icon: "px-3 min-w-10"
 };
-function ToggleGroup({ className, size, color = "primary", children, style, ...props }) {
-	const colorTokens = React$1.useMemo(() => resolveToggleGroupColorTokens(color), [color]);
+function ToggleGroup({ className, size, color = "primary", variant = "default", children, style, radius, ...props }) {
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
+	const colorTokens = React$1.useMemo(() => resolveToggleGroupColorTokens(color, variant), [color, variant]);
 	return /* @__PURE__ */ jsx(ToggleGroup$1, {
 		"data-size": size,
-		className: cn("group/toggle-group flex w-fit items-center gap-0.5 rounded-md border border-input bg-transparent p-1.5 ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out", "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", className),
-		style: colorTokens.arbitraryAccent ? {
+		className: cn("group/toggle-group flex w-fit items-center gap-0.5 border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] bg-transparent ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out", radiusClass(variant), variant === "default" ? "border-input p-1.5" : "p-1", variant === "rounded" && colorTokens.glowFrameClass?.split(" ")[0], variant === "glow" && colorTokens.glowFrameClass, variant === "solid" && "border-border", "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", className),
+		style: colorTokens.arbitraryAccent || partStyle ? {
+			...partStyle,
 			...style,
-			["--toggle-group-accent"]: colorTokens.arbitraryAccent
+			...colorTokens.arbitraryAccent && { ["--toggle-group-accent"]: colorTokens.arbitraryAccent },
+			...colorTokens.arbitraryAccentForeground && { ["--toggle-group-accent-foreground"]: colorTokens.arbitraryAccentForeground }
 		} : style,
 		...props,
 		children: /* @__PURE__ */ jsx(ToggleGroupProvider, {
 			value: {
 				size,
-				colorTokens
+				variant,
+				colorTokens,
+				axisStyle: partStyle
 			},
 			children: props.type === "single" ? /* @__PURE__ */ jsx(ToggleGroupHighlight, {
-				className: cn("rounded-md", colorTokens.highlightClass),
+				style: partStyle,
+				className: cn(radiusClass(variant), colorTokens.highlightClass),
 				children
 			}) : children
 		})
 	});
 }
 function ToggleGroupItem({ className, children, size, ...props }) {
-	const { size: contextSize, colorTokens } = useToggleGroup();
+	const { size: contextSize, variant, colorTokens, axisStyle } = useToggleGroup();
 	const { type } = useToggleGroup$1();
 	const itemSize = contextSize ?? size ?? "default";
 	return /* @__PURE__ */ jsx(ToggleGroupHighlightItem, {
 		value: props.value,
-		className: cn(type === "multiple" && "rounded-md"),
+		style: type === "multiple" ? axisStyle : void 0,
+		className: cn(type === "multiple" && radiusClass(variant)),
 		children: /* @__PURE__ */ jsx(ToggleGroupItem$1, {
 			"data-size": contextSize || size,
-			className: cn(toggleVariants({ size: contextSize || size }), "relative z-10 flex-1 shrink-0 rounded-md border border-transparent shadow-none focus:z-10 focus-visible:z-10", toggleGroupItemSizeClasses[itemSize], colorTokens.selectedTextClass, type === "single" && "data-[state=on]:bg-transparent", type === "multiple" && colorTokens.multipleSelectedSurfaceClass, className),
+			className: cn(toggleVariants({ size: contextSize || size }), "relative z-10 flex-1 shrink-0 border border-transparent shadow-none focus:z-10 focus-visible:z-10", radiusClass(variant), toggleGroupItemSizeClasses[itemSize], colorTokens.selectedTextClass, type === "single" && "data-[state=on]:bg-transparent", type === "multiple" && colorTokens.multipleSelectedSurfaceClass, className),
 			...props,
+			style: axisStyle ? {
+				...axisStyle,
+				...props.style
+			} : props.style,
 			children
 		})
 	});

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

@@ -2,16 +2,16 @@ import "react";
 import "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/core/animate-ui/components/radix/toggle.tsx
-var toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted/40 hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,background-color,box-shadow] duration-200 ease-in-out aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+var toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-[var(--espd-own-radius,var(--espd-radius-control,var(--radius-md)))] text-sm font-medium hover:bg-muted/40 hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,background-color,box-shadow] duration-200 ease-in-out aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
 	variants: {
 		variant: {
 			default: "bg-transparent",
-			outline: "border border-input bg-transparent shadow-xs hover:bg-accent/40 hover:text-accent-foreground"
+			outline: "border-[length:var(--espd-own-border-width,var(--espd-border-width-control,1px))] border-input bg-transparent shadow-xs hover:bg-accent/40 hover:text-accent-foreground"
 		},
 		size: {
-			default: "h-9 px-2 min-w-9",
-			sm: "h-8 px-1.5 min-w-8",
-			lg: "h-10 px-2.5 min-w-10",
+			default: "h-[var(--espd-control-height-md,calc(var(--spacing)*9))] px-2 min-w-[var(--espd-control-height-md,calc(var(--spacing)*9))]",
+			sm: "h-[var(--espd-control-height-sm,calc(var(--spacing)*8))] px-1.5 min-w-[var(--espd-control-height-sm,calc(var(--spacing)*8))]",
+			lg: "h-[var(--espd-control-height-lg,calc(var(--spacing)*10))] px-2.5 min-w-[var(--espd-control-height-lg,calc(var(--spacing)*10))]",
 			icon: "size-9"
 		}
 	},

package/dist/core/animate-ui/primitives/animate/code-block.js

@@ -5,10 +5,17 @@ import { escapeHtml } from "./escape-html.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/core/animate-ui/primitives/animate/code-block.tsx
+/** Plain, escaped text with the same line structure Shiki emits, so numbering, marks and ids work unhighlighted too. */
+function plainLines(code, mark) {
+	return `<pre><code>${code.split("\n").map((text, i) => {
+		const { id, marked } = mark(i + 1);
+		return `<span ${`class="line${marked ? " highlighted" : ""}" data-line="${i + 1}"${id ? ` id="${escapeHtml(id)}"` : ""}`}>${escapeHtml(text)}</span>`;
+	}).join("\n")}</code></pre>`;
+}
 function CodeBlock({ ref, code, lang, theme = "light", themes = {
 	light: "everforest-light",
 	dark: "everforest-dark"
-}, writing = false, duration = 5e3, delay = 0, onDone, onWrite, scrollContainerRef, inView = false, inViewOnce = true, inViewMargin = "0px", ...props }) {
+}, writing = false, duration = 5e3, delay = 0, onDone, onWrite, scrollContainerRef, inView = false, inViewOnce = true, inViewMargin = "0px", lineNumbers = false, highlightLines, lineIdPrefix, maxHighlightLength = 2e5, ...props }) {
 	const { ref: localRef, isInView } = useIsInView(ref, {
 		inView,
 		inViewOnce,
@@ -17,19 +24,35 @@ function CodeBlock({ ref, code, lang, theme = "light", themes = {
 	const [visibleCode, setVisibleCode] = React$1.useState("");
 	const [highlightedCode, setHighlightedCode] = React$1.useState("");
 	const [isDone, setIsDone] = React$1.useState(false);
+	const marks = (highlightLines ?? []).join(",");
 	React$1.useEffect(() => {
 		if (!visibleCode.length || !isInView) return;
+		const marked = new Set(marks ? marks.split(",").map(Number) : []);
+		const mark = (line) => ({
+			id: lineIdPrefix ? `${lineIdPrefix}${line}` : void 0,
+			marked: marked.has(line)
+		});
 		const loadHighlightedCode = async () => {
+			if (visibleCode.length > maxHighlightLength) {
+				setHighlightedCode(plainLines(visibleCode, mark));
+				return;
+			}
 			const normalizedLang = normalizeLang(lang);
 			try {
 				setHighlightedCode((await getHighlighter()).codeToHtml(visibleCode, {
 					lang: normalizedLang,
 					themes,
-					defaultColor: theme
+					defaultColor: theme,
+					transformers: [{ line(node, line) {
+						const { id, marked: isMarked } = mark(line);
+						node.properties["data-line"] = line;
+						if (id) node.properties.id = id;
+						if (isMarked) this.addClassToHast(node, "highlighted");
+					} }]
 				}));
 			} catch (e) {
 				console.warn(`[dashboard-ui-components] Falling back to plain text for lang="${lang}"; not in the curated Shiki bundle.`, e);
-				setHighlightedCode(`<pre><code>${escapeHtml(visibleCode)}</code></pre>`);
+				setHighlightedCode(plainLines(visibleCode, mark));
 			}
 		};
 		loadHighlightedCode();
@@ -41,7 +64,10 @@ function CodeBlock({ ref, code, lang, theme = "light", themes = {
 		duration,
 		delay,
 		visibleCode,
-		theme
+		theme,
+		marks,
+		lineIdPrefix,
+		maxHighlightLength
 	]);
 	React$1.useEffect(() => {
 		if (!writing) {
@@ -123,6 +149,7 @@ function CodeBlock({ ref, code, lang, theme = "light", themes = {
 		ref: localRef,
 		"data-writing": writing ? "" : void 0,
 		"data-done": isDone ? "" : void 0,
+		"data-line-numbers": lineNumbers ? "" : void 0,
 		dangerouslySetInnerHTML: { __html: highlightedCode },
 		...props
 	});

package/dist/core/animate-ui/primitives/animate/shiki-highlighter.js

@@ -11,7 +11,8 @@ var LANG_ALIASES = {
 	yml: "yaml",
 	"c++": "cpp",
 	"c#": "csharp",
-	docker: "dockerfile"
+	docker: "dockerfile",
+	properties: "ini"
 };
 var highlighterPromise = null;
 /**
@@ -49,7 +50,9 @@ function getHighlighter() {
 				import("shiki/langs/java.mjs"),
 				import("shiki/langs/sql.mjs"),
 				import("shiki/langs/xml.mjs"),
-				import("shiki/langs/dockerfile.mjs")
+				import("shiki/langs/dockerfile.mjs"),
+				import("shiki/langs/cmake.mjs"),
+				import("shiki/langs/ini.mjs")
 			],
 			engine: createOnigurumaEngine(import("shiki/wasm"))
 		});

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

@@ -1,7 +1,7 @@
 "use client";
 import { getStrictContext } from "../../../utils/get-strict-context.js";
-import { Highlight, HighlightItem } from "../effects/highlight.js";
 import { Slot } from "./slot.js";
+import { Highlight, HighlightItem } from "../effects/highlight.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { motion } from "motion/react";
@@ -75,7 +75,7 @@ function TabsHighlightItem(props) {
 		...props
 	});
 }
-function TabsTrigger({ ref, value, asChild = false, ...props }) {
+function TabsTrigger({ ref, value, asChild = false, onClick, ...props }) {
 	const { activeValue, handleValueChange, registerTrigger } = useTabs();
 	const localRef = React$1.useRef(null);
 	React$1.useImperativeHandle(ref, () => localRef.current);
@@ -87,9 +87,12 @@ function TabsTrigger({ ref, value, asChild = false, ...props }) {
 		ref: localRef,
 		"data-slot": "tabs-trigger",
 		role: "tab",
-		onClick: () => handleValueChange(value),
 		"data-state": activeValue === value ? "active" : "inactive",
-		...props
+		...props,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) handleValueChange(value);
+		}
 	});
 }
 function TabsContents({ children, transition = {

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

@@ -7,6 +7,10 @@ import { AnimatePresence, LayoutGroup, motion } from "motion/react";
 import { FloatingArrow, FloatingPortal, arrow, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react";
 //#region src/core/animate-ui/primitives/animate/tooltip.tsx
 var [GlobalTooltipProvider, useGlobalTooltip] = getStrictContext("GlobalTooltipProvider");
+var TooltipProviderPresence = React$1.createContext(false);
+function useHasTooltipProvider() {
+	return React$1.useContext(TooltipProviderPresence);
+}
 var [LocalTooltipProvider, useTooltip] = getStrictContext("LocalTooltipProvider");
 function getResolvedSide(placement) {
 	if (placement.includes("-")) return placement.split("-")[0];
@@ -69,7 +73,7 @@ function TooltipProvider({ children, id, openDelay = 700, closeDelay = 300, tran
 			window.removeEventListener("resize", hideImmediate, true);
 		};
 	}, [hideImmediate]);
-	return /* @__PURE__ */ jsxs(GlobalTooltipProvider, {
+	return /* @__PURE__ */ jsx(GlobalTooltipProvider, {
 		value: {
 			showTooltip,
 			hideTooltip,
@@ -80,7 +84,10 @@ function TooltipProvider({ children, id, openDelay = 700, closeDelay = 300, tran
 			setReferenceEl,
 			referenceElRef
 		},
-		children: [/* @__PURE__ */ jsx(LayoutGroup, { children }), /* @__PURE__ */ jsx(TooltipOverlay, {})]
+		children: /* @__PURE__ */ jsxs(TooltipProviderPresence.Provider, {
+			value: true,
+			children: [/* @__PURE__ */ jsx(LayoutGroup, { children }), /* @__PURE__ */ jsx(TooltipOverlay, {})]
+		})
 	});
 }
 var [RenderedTooltipProvider, useRenderedTooltip] = getStrictContext("RenderedTooltipContext");
@@ -348,4 +355,4 @@ function TooltipTrigger({ ref, onMouseEnter, onMouseLeave, onFocus, onBlur, onPo
 	});
 }
 //#endregion
-export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, useGlobalTooltip, useTooltip };
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, useGlobalTooltip, useHasTooltipProvider, useTooltip };

package/dist/core/animate-ui/primitives/base/preview-card.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 "react";
 import { jsx } from "react/jsx-runtime";
 import { AnimatePresence, motion, useMotionValue, useSpring } from "motion/react";
-import { PreviewCard } from "@base-ui-components/react/preview-card";
+import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/core/animate-ui/primitives/base/preview-card.tsx
 var [PreviewCardProvider, usePreviewCard] = getStrictContext("PreviewCardContext");
 function PreviewCard$1({ followCursor = false, followCursorSpringOptions = {

package/dist/core/animate-ui/primitives/base/progress.js

@@ -4,7 +4,7 @@ import { CountingNumber } from "../texts/counting-number.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { motion } from "motion/react";
-import { Progress } from "@base-ui-components/react/progress";
+import { Progress } from "@base-ui/react/progress";
 //#region src/core/animate-ui/primitives/base/progress.tsx
 var [ProgressProvider, useProgress] = getStrictContext("ProgressContext");
 var Progress$1 = (props) => {

package/dist/core/animate-ui/primitives/base/radio.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 * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
-import { RadioGroup } from "@base-ui-components/react/radio-group";
-import { Radio } from "@base-ui-components/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import { Radio } from "@base-ui/react/radio";
 //#region src/core/animate-ui/primitives/base/radio.tsx
 var [RadioGroupProvider, useRadioGroup] = getStrictContext("RadioGroupContext");
 var [RadioProvider, useRadio] = getStrictContext("RadioContext");