@espressif/dashboard-ui-components 1.9.1 → 1.11.0

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

@@ -0,0 +1,95 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
+import { Button } from "../../primitives/buttons/button.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { cva } from "class-variance-authority";
+//#region src/core/animate-ui/components/buttons/copy.tsx
+var buttonVariants = cva("flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+			accent: "bg-accent text-accent-foreground shadow-xs hover:bg-accent/90",
+			destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+			outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "size-9",
+			sm: "size-8 rounded-md",
+			lg: "size-10 rounded-md"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function CopyButton({ className, content, copied, onCopiedChange, onClick, variant, size, delay = 3e3, ...props }) {
+	const [isCopied, setIsCopied] = useControlledState({
+		value: copied,
+		onChange: onCopiedChange
+	});
+	const handleCopy = React$1.useCallback((e) => {
+		onClick?.(e);
+		if (copied) return;
+		if (content) navigator.clipboard.writeText(content).then(() => {
+			setIsCopied(true);
+			onCopiedChange?.(true, content);
+			setTimeout(() => {
+				setIsCopied(false);
+				onCopiedChange?.(false);
+			}, delay);
+		}).catch((error) => {
+			console.error("Error copying command", error);
+		});
+	}, [
+		onClick,
+		copied,
+		content,
+		setIsCopied,
+		onCopiedChange,
+		delay
+	]);
+	const Icon = isCopied ? CheckIcon : CopyIcon;
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "copy-button",
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		onClick: handleCopy,
+		...props,
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "popLayout",
+			children: /* @__PURE__ */ jsx(motion.span, {
+				"data-slot": "copy-button-icon",
+				initial: {
+					scale: 0,
+					opacity: .4,
+					filter: "blur(4px)"
+				},
+				animate: {
+					scale: 1,
+					opacity: 1,
+					filter: "blur(0px)"
+				},
+				exit: {
+					scale: 0,
+					opacity: .4,
+					filter: "blur(4px)"
+				},
+				transition: { duration: .25 },
+				children: /* @__PURE__ */ jsx(Icon, {})
+			}, isCopied ? "check" : "copy")
+		})
+	});
+}
+//#endregion
+export { CopyButton, buttonVariants };

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

@@ -0,0 +1,36 @@
+import { cn } from "../../../../utils/cn.js";
+import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, AccordionHeader, AccordionItem as AccordionItem$1, AccordionTrigger as AccordionTrigger$1 } from "../../primitives/radix/accordion.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+//#region src/core/animate-ui/components/radix/accordion.tsx
+function Accordion(props) {
+	return /* @__PURE__ */ jsx(Accordion$1, { ...props });
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AccordionItem$1, {
+		className: cn("border-b last:border-b-0", className),
+		...props
+	});
+}
+function AccordionTrigger({ className, children, showArrow = true, ...props }) {
+	return /* @__PURE__ */ jsx(AccordionHeader, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(AccordionTrigger$1, {
+			className: cn("flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180", className),
+			...props,
+			children: [children, showArrow && /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-px transition-transform duration-200" })]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(AccordionContent$1, {
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pb-4 text-sm", className),
+			children
+		})
+	});
+}
+//#endregion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,60 @@
+import { cn } from "../../../../utils/cn.js";
+import { Dialog as Dialog$1, DialogClose as DialogClose$1, DialogContent as DialogContent$1, DialogDescription as DialogDescription$1, DialogFooter as DialogFooter$1, DialogHeader as DialogHeader$1, DialogOverlay as DialogOverlay$1, DialogPortal, DialogTitle as DialogTitle$1, DialogTrigger as DialogTrigger$1 } from "../../primitives/radix/dialog.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+//#region src/core/animate-ui/components/radix/dialog.tsx
+function Dialog(props) {
+	return /* @__PURE__ */ jsx(Dialog$1, { ...props });
+}
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(DialogTrigger$1, { ...props });
+}
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(DialogClose$1, { ...props });
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogOverlay$1, {
+		className: cn("fixed inset-0 z-50 bg-black/50", className),
+		...props
+	});
+}
+function DialogContent({ className, children, showCloseButton = true, closeButtonClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogContent$1, {
+		className: cn("bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogClose$1, {
+			className: cn("ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 z-50 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", closeButtonClassName),
+			children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogHeader$1, {
+		className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogFooter$1, {
+		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogTitle$1, {
+		className: cn("text-lg leading-none font-semibold", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogDescription$1, {
+		className: cn("text-muted-foreground text-sm", className),
+		...props
+	});
+}
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

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

@@ -0,0 +1,129 @@
+import { cn } from "../../../../utils/cn.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";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+//#region src/core/animate-ui/components/radix/dropdown-menu.tsx
+function DropdownMenu(props) {
+	return /* @__PURE__ */ jsx(DropdownMenu$1, { ...props });
+}
+function DropdownMenuTrigger(props) {
+	return /* @__PURE__ */ jsx(DropdownMenuTrigger$1, { ...props });
+}
+function DropdownMenuContent({ sideOffset = 4, className, children, ...props }) {
+	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),
+		...props,
+		children: /* @__PURE__ */ jsx(DropdownMenuHighlight, {
+			className: "absolute inset-0 bg-accent z-0 rounded-sm",
+			children
+		})
+	});
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuGroup$1, { ...props });
+}
+function DropdownMenuItem({ className, inset, variant = "default", disabled, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuHighlightItem, {
+		activeClassName: variant === "destructive" ? "bg-destructive/10 dark:bg-destructive/20" : "",
+		disabled,
+		children: /* @__PURE__ */ jsx(DropdownMenuItem$1, {
+			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),
+			...props
+		})
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, checked, disabled, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuHighlightItem, {
+		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),
+			checked,
+			...props,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+				children: /* @__PURE__ */ jsx(DropdownMenuItemIndicator, {
+					initial: {
+						opacity: 0,
+						scale: .5
+					},
+					animate: {
+						opacity: 1,
+						scale: 1
+					},
+					children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+				})
+			}), children]
+		})
+	});
+}
+function DropdownMenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(DropdownMenuRadioGroup$1, { ...props });
+}
+function DropdownMenuRadioItem({ className, children, disabled, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuHighlightItem, {
+		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),
+			...props,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+				children: /* @__PURE__ */ jsx(DropdownMenuItemIndicator, {
+					layoutId: "dropdown-menu-item-indicator-radio",
+					children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" })
+				})
+			}), children]
+		})
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuLabel$1, {
+		"data-inset": inset,
+		className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuSeparator$1, {
+		className: cn("bg-border -mx-1 my-1 h-px", className),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuShortcut$1, {
+		className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
+		...props
+	});
+}
+function DropdownMenuSub(props) {
+	return /* @__PURE__ */ jsx(DropdownMenuSub$1, { ...props });
+}
+function DropdownMenuSubTrigger({ disabled, className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuHighlightItem, {
+		disabled,
+		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),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, {
+				"data-slot": "chevron",
+				className: "ml-auto size-4"
+			})]
+		})
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	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),
+		...props
+	});
+}
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

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

@@ -0,0 +1,110 @@
+import { cn } from "../../../../utils/cn.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";
+import { XIcon } from "lucide-react";
+//#region src/core/animate-ui/components/radix/sheet.tsx
+var SheetFloatingContext = React$1.createContext(false);
+var SheetDismissContext = React$1.createContext({
+	closeOnEscape: true,
+	closeOnOutsideClick: true
+});
+function Sheet({ floating = false, closeOnEscape = true, closeOnOutsideClick = true, ...props }) {
+	const dismissBehavior = React$1.useMemo(() => ({
+		closeOnEscape,
+		closeOnOutsideClick
+	}), [closeOnEscape, closeOnOutsideClick]);
+	return /* @__PURE__ */ jsx(SheetFloatingContext.Provider, {
+		value: floating,
+		children: /* @__PURE__ */ jsx(SheetDismissContext.Provider, {
+			value: dismissBehavior,
+			children: /* @__PURE__ */ jsx(Sheet$1, { ...props })
+		})
+	});
+}
+function SheetTrigger(props) {
+	return /* @__PURE__ */ jsx(SheetTrigger$1, { ...props });
+}
+function SheetOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetOverlay$1, {
+		className: cn("fixed inset-0 z-50 bg-black/50", className),
+		...props
+	});
+}
+function SheetClose(props) {
+	return /* @__PURE__ */ jsx(SheetClose$1, { ...props });
+}
+function SheetContent({ className, children, side = "right", showCloseButton = true, onEscapeKeyDown, onPointerDownOutside, ...props }) {
+	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";
+	if (floating) return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SheetContent$1, {
+		className: cn("fixed z-50 !p-3", side === "right" && "h-full w-[350px] max-w-full", side === "left" && "h-full w-[350px] max-w-full", side === "top" && "h-[350px] w-full", side === "bottom" && "h-[350px] w-full", className),
+		side,
+		onEscapeKeyDown: (event) => {
+			onEscapeKeyDown?.(event);
+			if (!closeOnEscape) event.preventDefault();
+		},
+		onPointerDownOutside: (event) => {
+			onPointerDownOutside?.(event);
+			if (!closeOnOutsideClick) event.preventDefault();
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "bg-background relative flex h-full flex-col gap-0 rounded-lg shadow-lg overflow-auto",
+			children: [children, showCloseButton && /* @__PURE__ */ jsxs(SheetClose, {
+				className: closeClassName,
+				children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})]
+		})
+	})] });
+	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),
+		side,
+		onEscapeKeyDown: (event) => {
+			onEscapeKeyDown?.(event);
+			if (!closeOnEscape) event.preventDefault();
+		},
+		onPointerDownOutside: (event) => {
+			onPointerDownOutside?.(event);
+			if (!closeOnOutsideClick) event.preventDefault();
+		},
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(SheetClose, {
+			className: closeClassName,
+			children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+}
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetHeader$1, {
+		className: cn("flex flex-col gap-1.5 p-4", className),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetFooter$1, {
+		className: cn("mt-auto flex flex-col gap-2 p-4", className),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetTitle$1, {
+		className: cn("text-foreground font-semibold", className),
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetDescription$1, {
+		className: cn("text-muted-foreground text-sm", className),
+		...props
+	});
+}
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };