@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/alert/alert.js

@@ -0,0 +1,85 @@
+import { cn } from "../../utils/cn.js";
+import { isPresetColor } from "../../utils/color.js";
+import { buttonVariants } from "../../core/button.js";
+import { IconTextActionCard } from "../icon-text-action-card/icon-text-action-card.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckCheck, CircleAlert, CircleX, Info, TriangleAlert, X } from "lucide-react";
+//#region src/components/alert/alert.tsx
+var typeIconMap = {
+	error: /* @__PURE__ */ jsx(CircleX, { className: "h-4 w-4" }),
+	info: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
+	warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "h-4 w-4" }),
+	success: /* @__PURE__ */ jsx(CheckCheck, { className: "h-4 w-4" })
+};
+var typeColorMap = {
+	error: "error",
+	info: "info",
+	warning: "warning",
+	success: "success"
+};
+var SEMANTIC_COLOR_TO_TYPE = {
+	error: "error",
+	info: "info",
+	warning: "warning",
+	success: "success"
+};
+function defaultIconFromColor(color) {
+	if (!isPresetColor(color)) return void 0;
+	const t = SEMANTIC_COLOR_TO_TYPE[color];
+	return t != null ? typeIconMap[t] : void 0;
+}
+/**
+* The close button tracks the alert `size` instead of `buttonVariants`' `h-9 w-9`,
+* which would tower over an `sm` alert row.
+*/
+var dismissButtonSizeClasses = {
+	sm: "size-6 [&_svg]:size-3.5",
+	default: "size-7 [&_svg]:size-4",
+	lg: "size-8 [&_svg]:size-4"
+};
+var Alert = React$1.forwardRef(({ icon, title, description, children, type, color, iconAvatarVariant = "solid", size = "sm", variant = "gradient", hideIcon = false, action, actions, actionsPlacement, dismissible = false, onDismiss, dismissLabel = "Close alert", className }, ref) => {
+	const [dismissed, setDismissed] = React$1.useState(false);
+	const handleDismiss = React$1.useCallback(() => {
+		setDismissed(true);
+		onDismiss?.();
+	}, [onDismiss]);
+	const resolvedColor = color ?? (type != null ? typeColorMap[type] : void 0) ?? "primary";
+	const resolvedDescription = description != null && children != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [description, children] }) : description ?? children;
+	const resolvedIcon = hideIcon ? void 0 : icon ?? (type != null ? typeIconMap[type] : void 0) ?? defaultIconFromColor(resolvedColor) ?? /* @__PURE__ */ jsx(CircleAlert, { className: "h-4 w-4" });
+	const dismissButton = dismissible ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": dismissLabel,
+		onClick: handleDismiss,
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: "icon"
+		}), dismissButtonSizeClasses[size], "shrink-0 text-current opacity-70 hover:bg-current/10 hover:text-current hover:opacity-100"),
+		children: /* @__PURE__ */ jsx(X, {
+			"aria-hidden": true,
+			strokeWidth: 2
+		})
+	}) : null;
+	const providedActions = actions ?? action;
+	const resolvedActions = dismissButton == null ? providedActions : providedActions == null ? dismissButton : /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-1",
+		children: [providedActions, dismissButton]
+	});
+	if (dismissed) return null;
+	return /* @__PURE__ */ jsx(IconTextActionCard, {
+		ref,
+		title,
+		description: resolvedDescription,
+		icon: resolvedIcon,
+		color: resolvedColor,
+		iconAvatarVariant,
+		size,
+		variant,
+		actions: resolvedActions,
+		actionsPlacement,
+		className
+	});
+});
+Alert.displayName = "Alert";
+//#endregion
+export { Alert };

package/dist/components/animated-containers/pop-collection-item.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+//#region src/components/animated-containers/pop-collection-item.tsx
+function PopCollectionItem({ index, children, layout = true, delayMultiplier = .1, transition }) {
+	const defaultTransition = {
+		duration: .2,
+		delay: index * delayMultiplier
+	};
+	return /* @__PURE__ */ jsx(motion.div, {
+		layout,
+		initial: {
+			opacity: 0,
+			y: 8
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .97
+		},
+		transition: transition ?? defaultTransition,
+		children
+	});
+}
+//#endregion
+export { PopCollectionItem };

package/dist/components/async-multi-select/async-multi-select.js

@@ -0,0 +1,199 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
+import { Badge } from "../../core/badge.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../../core/command.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, X } from "lucide-react";
+//#region src/components/async-multi-select/async-multi-select.tsx
+var triggerSizeClasses = {
+	sm: "min-h-8 px-3 text-xs",
+	default: "min-h-10 px-3.5 py-2 text-base md:text-sm",
+	lg: "min-h-12 px-5 text-lg"
+};
+var chevronSizeClasses = {
+	sm: "size-3.5",
+	default: "size-4",
+	lg: "size-5"
+};
+function normalizeValue(value, multiple) {
+	if (value == null) return [];
+	if (Array.isArray(value)) return value;
+	return multiple ? [value] : [value];
+}
+function AsyncMultiSelect({ options, multiple = true, value, onValueChange, onSearchChange, hasMore = false, onLoadMore, isLoading = false, disabled = false, placeholder = "Select...", emptyText = "No results.", searchPlaceholder = "Search...", label, required, size = "default", className, clearable = false, maxDisplayedBadges = 3, portal = true, renderOption }) {
+	const [open, setOpen] = React$1.useState(false);
+	const [inputValue, setInputValue] = React$1.useState("");
+	const listRef = React$1.useRef(null);
+	const sentinelRef = React$1.useRef(null);
+	const selected = normalizeValue(value, multiple);
+	const selectedOptions = React$1.useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const opt of options) map.set(opt.value, opt);
+		return selected.map((v) => map.get(v) ?? {
+			value: v,
+			label: v
+		});
+	}, [options, selected]);
+	React$1.useEffect(() => {
+		const sentinel = sentinelRef.current;
+		if (!open || !hasMore || !onLoadMore || !sentinel) return;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (entry.isIntersecting && !isLoading) onLoadMore();
+		}, {
+			root: listRef.current,
+			threshold: .1
+		});
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		hasMore,
+		onLoadMore,
+		isLoading,
+		open
+	]);
+	const handleSelect = (optionValue) => {
+		if (multiple) {
+			const next = selected.includes(optionValue) ? selected.filter((v) => v !== optionValue) : [...selected, optionValue];
+			onValueChange?.(next.length > 0 ? next : void 0);
+		} else {
+			const next = selected[0] === optionValue && clearable ? void 0 : optionValue;
+			onValueChange?.(next);
+			setOpen(false);
+		}
+	};
+	const handleRemove = (optionValue, e) => {
+		e.stopPropagation();
+		const next = selected.filter((v) => v !== optionValue);
+		onValueChange?.(multiple ? next.length > 0 ? next : void 0 : void 0);
+	};
+	const handleSearchChange = React$1.useCallback((q) => {
+		setInputValue(q);
+		onSearchChange?.(q);
+	}, [onSearchChange]);
+	const renderTriggerContent = () => {
+		if (multiple && selected.length > 0) {
+			const visible = selectedOptions.slice(0, maxDisplayedBadges);
+			const remaining = selected.length - maxDisplayedBadges;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-1",
+				children: [visible.map((opt) => /* @__PURE__ */ jsxs(Badge, {
+					variant: "soft",
+					color: "primary",
+					className: "gap-1 pr-1",
+					children: [opt.label, /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "ml-0.5 rounded-sm opacity-70 hover:opacity-100 focus:outline-none",
+						onPointerDown: (e) => e.stopPropagation(),
+						onClick: (e) => handleRemove(opt.value, e),
+						onKeyDown: (e) => {
+							if (e.key === "Enter" || e.key === " ") handleRemove(opt.value, e);
+						},
+						"aria-label": `Remove ${opt.label}`,
+						children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+					})]
+				}, opt.value)), remaining > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						"+",
+						remaining,
+						" more"
+					]
+				})]
+			});
+		}
+		if (!multiple && selected.length === 1) return /* @__PURE__ */ jsx("span", {
+			className: "truncate line-clamp-1",
+			children: selectedOptions[0]?.label ?? selected[0]
+		});
+		return /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: placeholder
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group space-y-2 flex-1",
+		"data-disabled": disabled || void 0,
+		children: [label != null && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-between",
+			children: /* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "text-destructive",
+					children: "*"
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "combobox",
+					"aria-expanded": open,
+					disabled,
+					className: cn("flex w-full items-center justify-between rounded-md border border-input bg-transparent ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", !multiple && "whitespace-nowrap [&>span]:line-clamp-1", triggerSizeClasses[size], className),
+					children: [renderTriggerContent(), /* @__PURE__ */ jsx(ChevronDown, { className: cn("ml-2 shrink-0 opacity-50", chevronSizeClasses[size]) })]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				portal,
+				className: "w-[var(--radix-popover-trigger-width)] min-w-[8rem] !px-1.5 !py-2 will-change-[opacity,transform] select-none",
+				align: "start",
+				children: /* @__PURE__ */ jsxs(Command, {
+					shouldFilter: false,
+					children: [/* @__PURE__ */ jsx(CommandInput, {
+						placeholder: searchPlaceholder,
+						value: inputValue,
+						onValueChange: handleSearchChange
+					}), /* @__PURE__ */ jsxs(CommandList, {
+						ref: listRef,
+						className: "overscroll-contain",
+						children: [
+							/* @__PURE__ */ jsx(CommandEmpty, { children: isLoading ? /* @__PURE__ */ jsx("div", {
+								className: "flex items-center justify-center py-6",
+								children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-4 border-primary border-t-transparent" })
+							}) : emptyText }),
+							/* @__PURE__ */ jsx(CommandGroup, {
+								className: "p-0",
+								children: options.map((opt) => {
+									const isSelected = selected.includes(opt.value);
+									const desc = opt.description?.trim();
+									return /* @__PURE__ */ jsxs(CommandItem, {
+										value: opt.value,
+										onSelect: () => handleSelect(opt.value),
+										className: "relative w-full py-2 pl-2.5 pr-9",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "absolute right-2.5 flex h-3.5 w-3.5 items-center justify-center",
+											children: /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4", isSelected ? "opacity-100" : "opacity-0") })
+										}), renderOption ? renderOption(opt) : desc ? /* @__PURE__ */ jsxs("div", {
+											className: "flex min-w-0 flex-col gap-0.5",
+											children: [/* @__PURE__ */ jsx("span", {
+												className: "font-medium leading-relaxed",
+												children: opt.label
+											}), /* @__PURE__ */ jsx("span", {
+												className: "truncate text-xs font-normal text-muted-foreground",
+												children: desc
+											})]
+										}) : opt.label]
+									}, opt.value);
+								})
+							}),
+							hasMore && /* @__PURE__ */ jsx("div", {
+								ref: sentinelRef,
+								className: "h-px"
+							}),
+							isLoading && options.length > 0 && /* @__PURE__ */ jsx("div", {
+								className: "flex items-center justify-center py-3",
+								children: /* @__PURE__ */ jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" })
+							})
+						]
+					})]
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { AsyncMultiSelect };

package/dist/components/avatar/avatar.js

@@ -0,0 +1,41 @@
+import { cn } from "../../utils/cn.js";
+import { resolveColor } from "../../utils/color.js";
+import { Avatar as Avatar$1, AvatarBadge, AvatarFallback, AvatarImage } from "../../core/avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { User } from "lucide-react";
+//#region src/components/avatar/avatar.tsx
+var sizeClasses = {
+	sm: "h-5 w-5 text-[10px]",
+	default: "h-7 w-7 text-xs",
+	lg: "h-10 w-10 text-sm"
+};
+function Avatar({ name, imageUrl, size = "default", className, badgeColor, badgeIcon }) {
+	const displayInitial = name ? name.charAt(0).toUpperCase() : null;
+	const showIconBadge = badgeIcon != null && badgeIcon !== false;
+	const colorResolved = !showIconBadge && badgeColor != null ? resolveColor(badgeColor, "bg") : void 0;
+	const hasBadge = showIconBadge || Boolean(colorResolved);
+	const avatar = /* @__PURE__ */ jsxs(Avatar$1, {
+		className: cn(sizeClasses[size], className),
+		children: [imageUrl && /* @__PURE__ */ jsx(AvatarImage, {
+			src: imageUrl,
+			alt: name ?? "User avatar"
+		}), /* @__PURE__ */ jsx(AvatarFallback, {
+			className: cn("bg-primary text-primary-foreground font-medium", sizeClasses[size], className),
+			children: displayInitial ?? /* @__PURE__ */ jsx(User, { className: "h-3/5 w-3/5" })
+		})]
+	});
+	if (!hasBadge) return avatar;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex shrink-0",
+		children: [avatar, showIconBadge ? /* @__PURE__ */ jsx(AvatarBadge, {
+			variant: "icon",
+			children: badgeIcon
+		}) : colorResolved ? /* @__PURE__ */ jsx(AvatarBadge, {
+			variant: "dot",
+			className: cn(colorResolved.className),
+			style: colorResolved.style
+		}) : null]
+	});
+}
+//#endregion
+export { Avatar as default };

package/dist/components/button/button.js

@@ -0,0 +1,191 @@
+import { cn } from "../../utils/cn.js";
+import { Button as Button$1, buttonVariants } from "../../core/button.js";
+import Tooltip from "../tooltip/tooltip.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { LoaderCircle } from "lucide-react";
+import { motion } from "framer-motion";
+//#region src/components/button/button.tsx
+var presetButtonColors = {
+	primary: {
+		default: "bg-primary text-primary-foreground hover:bg-primary/90",
+		outline: "border-primary/30 text-primary hover:bg-primary/5 hover:border-primary",
+		ghost: "text-primary hover:bg-primary/10",
+		link: "text-primary"
+	},
+	secondary: {
+		default: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
+		outline: "border-secondary/30 text-secondary hover:bg-secondary/5 hover:border-secondary",
+		ghost: "text-secondary hover:bg-secondary/10",
+		link: "text-secondary"
+	},
+	error: {
+		default: "bg-error text-error-foreground hover:bg-error/90",
+		outline: "border-error/30 text-error hover:bg-error/5 hover:border-error",
+		ghost: "text-error hover:bg-error/10",
+		link: "text-error"
+	},
+	info: {
+		default: "bg-info text-info-foreground hover:bg-info/90",
+		outline: "border-info/30 text-info hover:bg-info/5 hover:border-info",
+		ghost: "text-info hover:bg-info/10",
+		link: "text-info"
+	},
+	success: {
+		default: "bg-success text-success-foreground hover:bg-success/90",
+		outline: "border-success/30 text-success hover:bg-success/5 hover:border-success",
+		ghost: "text-success hover:bg-success/10",
+		link: "text-success"
+	},
+	warning: {
+		default: "bg-warning text-warning-foreground hover:bg-warning/90",
+		outline: "border-warning/30 text-warning hover:bg-warning/5 hover:border-warning",
+		ghost: "text-warning hover:bg-warning/10",
+		link: "text-warning"
+	},
+	disabled: {
+		default: "bg-disabled text-disabled-foreground",
+		outline: "border-disabled/30 text-disabled",
+		ghost: "text-disabled",
+		link: "text-disabled"
+	},
+	gray: {
+		default: "bg-gray text-gray-foreground hover:bg-gray/90",
+		outline: "border-input text-gray hover:bg-gray/5 hover:border-gray",
+		ghost: "text-gray hover:bg-gray/10",
+		link: "text-gray"
+	},
+	mist: {
+		default: "bg-mist text-mist-foreground hover:bg-mist/90",
+		outline: "border-mist-border text-mist-foreground hover:bg-mist hover:border-mist-border",
+		ghost: "text-mist-foreground hover:bg-mist",
+		link: "text-mist-foreground"
+	}
+};
+var primaryHoverRingClasses = "hover:ring-primary/90 focus-visible:ring-primary/90";
+var presetRingColors = {
+	primary: "hover:ring-primary/90 focus-visible:ring-primary/90",
+	secondary: "hover:ring-secondary/90 focus-visible:ring-secondary/90",
+	error: "hover:ring-error/90 focus-visible:ring-error/90",
+	info: "hover:ring-info/90 focus-visible:ring-info/90",
+	success: "hover:ring-success/90 focus-visible:ring-success/90",
+	warning: "hover:ring-warning/90 focus-visible:ring-warning/90",
+	disabled: "hover:ring-disabled/90 focus-visible:ring-disabled/90",
+	gray: "hover:ring-gray/90 focus-visible:ring-gray/90",
+	mist: "hover:ring-mist-border focus-visible:ring-mist-border"
+};
+/** `hideRingOnHover` still shows keyboard focus; only the hover ring is suppressed. */
+var presetFocusVisibleRingColors = {
+	primary: "focus-visible:ring-primary/90",
+	secondary: "focus-visible:ring-secondary/90",
+	error: "focus-visible:ring-error/90",
+	info: "focus-visible:ring-info/90",
+	success: "focus-visible:ring-success/90",
+	warning: "focus-visible:ring-warning/90",
+	disabled: "focus-visible:ring-disabled/90",
+	gray: "focus-visible:ring-gray/90",
+	mist: "focus-visible:ring-mist-border"
+};
+var iconOnlyLabelClasses = {
+	sm: "max-sm:sr-only",
+	md: "max-md:sr-only"
+};
+/** Square with only a start icon; tighter padding when a trailing icon (e.g. a chevron) stays. */
+var iconOnlyButtonClasses = {
+	sm: {
+		square: "max-sm:w-9 max-sm:gap-0 max-sm:px-0",
+		squareLarge: "max-sm:w-10 max-sm:gap-0 max-sm:px-0",
+		withEndIcon: "max-sm:px-2"
+	},
+	md: {
+		square: "max-md:w-9 max-md:gap-0 max-md:px-0",
+		squareLarge: "max-md:w-10 max-md:gap-0 max-md:px-0",
+		withEndIcon: "max-md:px-2"
+	}
+};
+function getIconOnlyButtonClasses(breakpoint, size, hasEndIcon) {
+	if (!breakpoint || size === "icon") return void 0;
+	const classes = iconOnlyButtonClasses[breakpoint];
+	if (hasEndIcon) return classes.withEndIcon;
+	if (size === "lg") return classes.squareLarge;
+	return classes.square;
+}
+function ProgressBarOverlay() {
+	const [progress, setProgress] = React$1.useState(10);
+	React$1.useEffect(() => {
+		if (progress >= 90) return;
+		const timeout = setTimeout(() => {
+			const increment = Math.random() * 15 + 5;
+			setProgress((prev) => Math.min(prev + increment, 90));
+		}, Math.random() * 800 + 200);
+		return () => clearTimeout(timeout);
+	}, [progress]);
+	return /* @__PURE__ */ jsx(motion.div, {
+		className: "absolute inset-y-0 left-0 bg-black/20 pointer-events-none rounded-[inherit]",
+		initial: { width: "10%" },
+		animate: { width: `${progress}%` },
+		transition: {
+			duration: .4,
+			ease: "easeOut"
+		}
+	});
+}
+var iconAnimateClasses = "transition-transform duration-200";
+var Button = React$1.forwardRef(({ children, color = "primary", startIcon, endIcon, fullWidth = true, loading = false, loadingIndicator = "spinner", animateStartIconOnHover = false, animateEndIconOnHover = false, hideRingOnHover = false, usePrimaryColorOnHover = false, tooltip, iconOnlyBelow, disabled, className, variant = "default", size, ...props }, ref) => {
+	const needsGroup = animateStartIconOnHover || animateEndIconOnHover;
+	const isProgressBar = loading && loadingIndicator === "progress-bar";
+	const isSpinner = loading && loadingIndicator === "spinner";
+	const resolvedVariant = variant ?? "default";
+	const colorClasses = presetButtonColors[color]?.[resolvedVariant] ?? "";
+	const ringClasses = presetRingColors[color] ?? "";
+	const primaryHoverSurface = usePrimaryColorOnHover && (resolvedVariant === "outline" || resolvedVariant === "ghost");
+	const primaryHoverLink = usePrimaryColorOnHover && resolvedVariant === "link";
+	const label = iconOnlyBelow && children != null ? /* @__PURE__ */ jsx("span", {
+		className: iconOnlyLabelClasses[iconOnlyBelow],
+		children
+	}) : children;
+	const wrapIcon = (icon, direction) => {
+		if (!icon) return null;
+		if (!(direction === "start" ? animateStartIconOnHover : animateEndIconOnHover)) return icon;
+		return /* @__PURE__ */ jsx("span", {
+			className: cn(iconAnimateClasses, direction === "start" ? "group-hover:-translate-x-0.5" : "group-hover:translate-x-0.5"),
+			children: icon
+		});
+	};
+	const button = /* @__PURE__ */ jsxs(Button$1, {
+		ref,
+		variant,
+		size,
+		disabled: disabled || loading,
+		className: cn(colorClasses, primaryHoverSurface && "hover:bg-primary/10", primaryHoverLink && "hover:text-primary", fullWidth && size !== "icon" && "w-full", needsGroup && "group", isProgressBar && "relative overflow-hidden", !hideRingOnHover && variant !== "link" && [
+			"ring-offset-background transition-all duration-300",
+			"hover:ring-2 hover:ring-offset-2 focus-visible:ring-2 focus-visible:ring-offset-2",
+			primaryHoverSurface ? primaryHoverRingClasses : ringClasses
+		], hideRingOnHover && variant !== "link" && [
+			"ring-offset-background transition-all duration-300",
+			"hover:ring-0 focus-visible:ring-2 focus-visible:ring-offset-2",
+			primaryHoverSurface ? "focus-visible:ring-primary/90" : presetFocusVisibleRingColors[color]
+		], variant === "link" && "hover:ring-0 focus-visible:underline", "shadow-none", getIconOnlyButtonClasses(iconOnlyBelow, size, Boolean(endIcon)), className),
+		...props,
+		children: [isProgressBar && /* @__PURE__ */ jsx(ProgressBarOverlay, {}), isProgressBar ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("span", {
+			className: "relative z-10 inline-flex items-center gap-2",
+			children: [
+				wrapIcon(startIcon, "start"),
+				label,
+				wrapIcon(endIcon, "end")
+			]
+		}) }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			isSpinner ? /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : wrapIcon(startIcon, "start"),
+			label,
+			!isSpinner && wrapIcon(endIcon, "end")
+		] })]
+	});
+	if (!tooltip) return button;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip,
+		children: button
+	});
+});
+Button.displayName = "Button";
+//#endregion
+export { Button, buttonVariants };

package/dist/components/button/flash-button.js

@@ -0,0 +1,110 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../../core/button/button.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ZapIcon } from "lucide-react";
+import { useAnimate } from "motion/react";
+//#region src/components/button/flash-button.tsx
+/** Resting bg + text; hover transitions to bg-background (invert). */
+var flashButtonBgClasses = {
+	primary: "bg-primary hover:bg-background text-primary-foreground",
+	secondary: "bg-secondary hover:bg-background text-secondary-foreground",
+	error: "bg-error hover:bg-background text-error-foreground",
+	info: "bg-info hover:bg-background text-info-foreground",
+	success: "bg-success hover:bg-background text-success-foreground",
+	warning: "bg-warning hover:bg-background text-warning-foreground",
+	disabled: "bg-disabled hover:bg-background text-disabled-foreground",
+	gray: "bg-gray hover:bg-background text-gray-foreground",
+	mist: "bg-mist hover:bg-background text-mist-foreground"
+};
+/** Flash overlay colour (the colour that blinks back in on hover). */
+var flashOverlayClasses = {
+	primary: "bg-primary",
+	secondary: "bg-secondary",
+	error: "bg-error",
+	info: "bg-info",
+	success: "bg-success",
+	warning: "bg-warning",
+	disabled: "bg-disabled",
+	gray: "bg-gray",
+	mist: "bg-mist"
+};
+/** Dark-mode hover border per colour. */
+var flashButtonDarkBorderClasses = {
+	primary: "dark:hover:border-primary/30",
+	secondary: "dark:hover:border-secondary/30",
+	error: "dark:hover:border-error/30",
+	info: "dark:hover:border-info/30",
+	success: "dark:hover:border-success/30",
+	warning: "dark:hover:border-warning/30",
+	disabled: "dark:hover:border-disabled/30",
+	gray: "dark:hover:border-gray/30",
+	mist: "dark:hover:border-mist-border/30"
+};
+function FlashButton({ label, icon, iconPosition = "end", hideIcon = false, size, color = "primary", className, onMouseEnter, onMouseLeave, ...props }) {
+	const [scope, animate] = useAnimate();
+	const isHovering = React$1.useRef(false);
+	const flashLoop = React$1.useCallback(async () => {
+		while (isHovering.current && scope.current) {
+			const peakOpacity = .5 + Math.random() * .5;
+			try {
+				await animate(scope.current, { opacity: [
+					0,
+					peakOpacity,
+					0
+				] }, {
+					duration: .08 + Math.random() * .14,
+					ease: "easeOut"
+				});
+			} catch {
+				break;
+			}
+			if (!isHovering.current) break;
+			const pause = 60 + Math.random() * 250;
+			await new Promise((r) => setTimeout(r, pause));
+		}
+	}, [animate, scope]);
+	const handleMouseEnter = React$1.useCallback((e) => {
+		isHovering.current = true;
+		flashLoop();
+		onMouseEnter?.(e);
+	}, [flashLoop, onMouseEnter]);
+	const handleMouseLeave = React$1.useCallback((e) => {
+		isHovering.current = false;
+		if (scope.current) animate(scope.current, { opacity: 0 }, { duration: .05 });
+		onMouseLeave?.(e);
+	}, [
+		animate,
+		scope,
+		onMouseLeave
+	]);
+	const iconSize = size === "lg" ? "size-4" : size === "sm" ? "size-2.5" : "size-3";
+	return /* @__PURE__ */ jsxs(Button, {
+		size,
+		className: cn(flashButtonBgClasses[color], "group relative cursor-pointer gap-1.5 overflow-hidden rounded-full transition-all duration-500 hover:shadow-md dark:border dark:border-transparent", flashButtonDarkBorderClasses[color], className),
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				ref: scope,
+				className: cn("pointer-events-none absolute inset-0 z-0 rounded-[inherit] opacity-0", flashOverlayClasses[color])
+			}),
+			!hideIcon && iconPosition === "start" && /* @__PURE__ */ jsx("span", {
+				className: "relative z-[1]",
+				children: icon ?? /* @__PURE__ */ jsx(ZapIcon, { className: cn(iconSize, "stroke-2 transition-all duration-500 group-hover:scale-110 group-hover:text-foreground") })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "relative z-[1] transition-colors duration-500 group-hover:text-foreground",
+				children: label
+			}),
+			!hideIcon && iconPosition === "end" && /* @__PURE__ */ jsx("span", {
+				className: "relative z-[1]",
+				children: icon ?? /* @__PURE__ */ jsx(ZapIcon, { className: cn(iconSize, "stroke-2 transition-all duration-500 group-hover:scale-110 group-hover:text-foreground") })
+			})
+		]
+	});
+}
+//#endregion
+export { FlashButton };

package/dist/components/button/invert-button.js

@@ -0,0 +1,13 @@
+import { CraftButton, CraftButtonIcon, CraftButtonLabel } from "../../core/button/craft-button.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpRightIcon } from "lucide-react";
+//#region src/components/button/invert-button.tsx
+function InvertButton({ label, icon, ...props }) {
+	return /* @__PURE__ */ jsxs(CraftButton, {
+		...props,
+		children: [/* @__PURE__ */ jsx(CraftButtonLabel, { children: label }), /* @__PURE__ */ jsx(CraftButtonIcon, { children: icon ?? /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "size-3 stroke-2 transition-transform duration-500 group-hover:rotate-45" }) })]
+	});
+}
+//#endregion
+export { InvertButton };