@espressif/dashboard-ui-components 1.10.0 → 1.11.0

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

@@ -0,0 +1,416 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { getStrictContext } from "../../../utils/get-strict-context.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";
+import { Input } from "../../../input/input.js";
+import { Separator } from "../../../separator.js";
+import { Skeleton } from "../../../skeleton.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeftIcon } from "lucide-react";
+import { Slot } from "radix-ui";
+import { cva } from "class-variance-authority";
+//#region src/core/animate-ui/components/radix/sidebar.tsx
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
+var SIDEBAR_WIDTH = "var(--espd-sidebar-width)";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SIDEBAR_WIDTH_COLLAPSED = "var(--espd-sidebar-width-collapsed)";
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var [LocalSidebarProvider, useSidebar] = getStrictContext("SidebarContext");
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React$1.useState(false);
+	const [_open, _setOpen] = React$1.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React$1.useCallback((value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (setOpenProp) setOpenProp(openState);
+		else _setOpen(openState);
+		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+	}, [setOpenProp, open]);
+	const toggleSidebar = React$1.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [
+		isMobile,
+		setOpen,
+		setOpenMobile
+	]);
+	React$1.useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+	const state = open ? "expanded" : "collapsed";
+	return /* @__PURE__ */ jsx(LocalSidebarProvider, {
+		value: React$1.useMemo(() => ({
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar
+		}), [
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar
+		]),
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-wrapper",
+			style: {
+				"--sidebar-width": SIDEBAR_WIDTH,
+				"--sidebar-width-collapsed": SIDEBAR_WIDTH_COLLAPSED,
+				...style
+			},
+			className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
+			...props,
+			children
+		}) })
+	});
+}
+function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, animateOnHover = true, containerClassName, transition = {
+	type: "spring",
+	stiffness: 350,
+	damping: 35
+}, ...props }) {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+	if (collapsible === "none") return /* @__PURE__ */ jsx(Highlight, {
+		enabled: animateOnHover,
+		hover: true,
+		controlledItems: true,
+		mode: "parent",
+		containerClassName,
+		transition,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar",
+			className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
+			...props,
+			children
+		})
+	});
+	if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
+		open: openMobile,
+		onOpenChange: setOpenMobile,
+		...props,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			"data-sidebar": "sidebar",
+			"data-slot": "sidebar",
+			"data-mobile": "true",
+			className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
+			side,
+			children: [/* @__PURE__ */ jsxs(SheetHeader, {
+				className: "sr-only",
+				children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
+			}), /* @__PURE__ */ jsx(Highlight, {
+				enabled: animateOnHover,
+				hover: true,
+				controlledItems: true,
+				mode: "parent",
+				containerClassName: cn("h-full", containerClassName),
+				transition,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex h-full w-full flex-col",
+					children
+				})
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group peer text-sidebar-foreground hidden md:block",
+		"data-state": state,
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-variant": variant,
+		"data-side": side,
+		"data-slot": "sidebar",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-gap",
+			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-[cubic-bezier(0.7,-0.15,0.25,1.15)]", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-collapsed)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-collapsed)")
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-container",
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-[calc(var(--sidebar-width)+1px)] transition-[left,right,width] duration-200 ease-[cubic-bezier(0.75,0,0.25,1)] md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-collapsed)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-collapsed)+1px)] group-data-[side=left]:border-r group-data-[side=right]:border-l border-sidebar-border", className),
+			...props,
+			children: /* @__PURE__ */ jsx(Highlight, {
+				containerClassName: cn("size-full", containerClassName),
+				enabled: animateOnHover,
+				hover: true,
+				controlledItems: true,
+				mode: "parent",
+				forceUpdateBounds: true,
+				transition,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-sidebar": "sidebar",
+					"data-slot": "sidebar-inner",
+					className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+					children
+				})
+			})
+		})]
+	});
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-sidebar": "trigger",
+		"data-slot": "sidebar-trigger",
+		variant: "ghost",
+		size: "icon",
+		className: cn("size-7", className),
+		onClick: (event) => {
+			onClick?.(event);
+			toggleSidebar();
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle Sidebar"
+		})]
+	});
+}
+function SidebarRail({ className, ...props }) {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		"data-sidebar": "rail",
+		"data-slot": "sidebar-rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: -1,
+		onClick: toggleSidebar,
+		title: "Toggle Sidebar",
+		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+		...props
+	});
+}
+function SidebarInset({ className, ...props }) {
+	return /* @__PURE__ */ jsx("main", {
+		"data-slot": "sidebar-inset",
+		className: cn("bg-background relative flex w-full flex-1 flex-col", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
+		...props
+	});
+}
+function SidebarInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "sidebar-input",
+		"data-sidebar": "input",
+		className: cn("bg-background h-8 w-full shadow-none", className),
+		...props
+	});
+}
+function SidebarHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-header",
+		"data-sidebar": "header",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+}
+function SidebarFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-footer",
+		"data-sidebar": "footer",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+}
+function SidebarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "sidebar-separator",
+		"data-sidebar": "separator",
+		className: cn("bg-sidebar-border mx-2 w-auto", className),
+		...props
+	});
+}
+function SidebarContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-content",
+		"data-sidebar": "content",
+		className: cn("flex min-h-0 flex-1 flex-col group-data-[collapsible=icon]:overflow-hidden", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			className: "flex-1",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-2",
+				children
+			})
+		})
+	});
+}
+function SidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group",
+		"data-sidebar": "group",
+		className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+		...props
+	});
+}
+function SidebarGroupLabel({ className, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "div", {
+		"data-slot": "sidebar-group-label",
+		"data-sidebar": "group-label",
+		className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-300 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className),
+		...props
+	});
+}
+function SidebarGroupAction({ className, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
+		"data-slot": "sidebar-group-action",
+		"data-sidebar": "group-action",
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+function SidebarGroupContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group-content",
+		"data-sidebar": "group-content",
+		className: cn("w-full text-sm flex", className),
+		...props
+	});
+}
+function SidebarMenu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu",
+		"data-sidebar": "menu",
+		className: cn("flex w-full min-w-0 flex-col gap-1", className),
+		...props
+	});
+}
+function SidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-item",
+		"data-sidebar": "menu-item",
+		className: cn("group/menu-item relative group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center", className),
+		...props
+	});
+}
+var sidebarMenuButtonActiveVariants = cva("bg-sidebar-accent text-sidebar-accent-foreground rounded-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", {
+	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",
+			lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function SidebarMenuButton({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
+	const Comp = asChild ? Slot.Root : "button";
+	const { isMobile, state } = useSidebar();
+	const button = /* @__PURE__ */ jsx(HighlightItem, {
+		activeClassName: sidebarMenuButtonActiveVariants({ variant }),
+		children: /* @__PURE__ */ jsx(Comp, {
+			"data-slot": "sidebar-menu-button",
+			"data-sidebar": "menu-button",
+			"data-size": size,
+			"data-active": isActive,
+			className: cn(sidebarMenuButtonVariants({
+				variant,
+				size
+			}), className),
+			...props
+		})
+	});
+	if (!tooltip) return button;
+	if (typeof tooltip === "string") tooltip = { children: tooltip };
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: button
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		hidden: state !== "collapsed" || isMobile,
+		...tooltip
+	})] });
+}
+function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		className: cn("z-[1] text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1/2 right-1 flex aspect-square w-5 -translate-y-1/2 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0", className),
+		...props
+	});
+}
+function SidebarMenuBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-menu-badge",
+		"data-sidebar": "menu-badge",
+		className: cn("text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+	const width = React$1.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sidebar-menu-skeleton",
+		"data-sidebar": "menu-skeleton",
+		className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+		...props,
+		children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
+			className: "size-4 rounded-md",
+			"data-sidebar": "menu-skeleton-icon"
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: { "--skeleton-width": width }
+		})]
+	});
+}
+function SidebarMenuSub({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu-sub",
+		"data-sidebar": "menu-sub",
+		className: cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+function SidebarMenuSubItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-sub-item",
+		"data-sidebar": "menu-sub-item",
+		className: cn("group/menu-sub-item relative", 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",
+		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),
+			...props
+		})
+	});
+}
+//#endregion
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };

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

@@ -0,0 +1,34 @@
+import { cn } from "../../../../utils/cn.js";
+import { Switch as Switch$1, SwitchIcon, SwitchThumb } from "../../primitives/radix/switch.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/core/animate-ui/components/radix/switch.tsx
+function Switch({ className, pressedWidth = 19, startIcon, endIcon, thumbIcon, ...props }) {
+	return /* @__PURE__ */ jsxs(Switch$1, {
+		className: cn("relative peer focus-visible:border-ring focus-visible:ring-ring/50 flex h-5 w-8 px-px shrink-0 items-center justify-start rounded-full border border-transparent shadow-xs outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 data-[state=checked]:justify-end", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SwitchThumb, {
+				className: cn("relative z-10 bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0"),
+				pressedAnimation: { width: pressedWidth },
+				children: thumbIcon && /* @__PURE__ */ jsx(SwitchIcon, {
+					position: "thumb",
+					className: "absolute [&_svg]:size-[9px] left-1/2 top-1/2 -translate-1/2 dark:text-neutral-500 text-neutral-400",
+					children: thumbIcon
+				})
+			}),
+			startIcon && /* @__PURE__ */ jsx(SwitchIcon, {
+				position: "left",
+				className: "absolute [&_svg]:size-[9px] left-0.5 top-1/2 -translate-y-1/2 dark:text-neutral-500 text-neutral-400",
+				children: startIcon
+			}),
+			endIcon && /* @__PURE__ */ jsx(SwitchIcon, {
+				position: "right",
+				className: "absolute [&_svg]:size-[9px] right-0.5 top-1/2 -translate-y-1/2 dark:text-neutral-400 text-neutral-500",
+				children: endIcon
+			})
+		]
+	});
+}
+//#endregion
+export { Switch };

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

@@ -0,0 +1,115 @@
+import { cn } from "../../../../utils/cn.js";
+import { isPresetColor } from "../../../../utils/color.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";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/core/animate-ui/components/radix/toggle-group.tsx
+/** Matches default `TabsList` highlight + active trigger (see animate/tabs.tsx). */
+var presetSelectedHighlightBg = {
+	primary: "bg-primary/10",
+	secondary: "bg-secondary/10",
+	error: "bg-error/10",
+	info: "bg-info/10",
+	success: "bg-success/10",
+	warning: "bg-warning/10",
+	disabled: "bg-disabled/10",
+	gray: "bg-gray/10",
+	mist: "bg-mist"
+};
+var presetSelectedHighlightBorder = {
+	primary: "border border-primary/20",
+	secondary: "border border-secondary/20",
+	error: "border border-error/20",
+	info: "border border-info/20",
+	success: "border border-success/20",
+	warning: "border border-warning/20",
+	disabled: "border border-disabled/20",
+	gray: "border border-gray/20",
+	mist: "border border-mist-border"
+};
+var presetSelectedText = {
+	primary: "data-[state=on]:text-primary",
+	secondary: "data-[state=on]:text-secondary",
+	error: "data-[state=on]:text-error",
+	info: "data-[state=on]:text-info",
+	success: "data-[state=on]:text-success",
+	warning: "data-[state=on]:text-warning",
+	disabled: "data-[state=on]:text-disabled",
+	gray: "data-[state=on]:text-gray",
+	mist: "data-[state=on]:text-mist-foreground"
+};
+var presetMultipleSelectedSurface = {
+	primary: "data-[state=on]:bg-primary/10 data-[state=on]:border-primary/20",
+	secondary: "data-[state=on]:bg-secondary/10 data-[state=on]:border-secondary/20",
+	error: "data-[state=on]:bg-error/10 data-[state=on]:border-error/20",
+	info: "data-[state=on]:bg-info/10 data-[state=on]:border-info/20",
+	success: "data-[state=on]:bg-success/10 data-[state=on]:border-success/20",
+	warning: "data-[state=on]:bg-warning/10 data-[state=on]:border-warning/20",
+	disabled: "data-[state=on]:bg-disabled/10 data-[state=on]:border-disabled/20",
+	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"
+};
+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) {
+	if (isPresetColor(color)) return {
+		highlightClass: cn(presetSelectedHighlightBg[color], presetSelectedHighlightBorder[color]),
+		multipleSelectedSurfaceClass: cn("data-[state=on]:border", presetMultipleSelectedSurface[color]),
+		selectedTextClass: presetSelectedText[color]
+	};
+	return {
+		highlightClass: arbitrarySelectedHighlightClass,
+		multipleSelectedSurfaceClass: arbitraryMultipleSelectedSurfaceClass,
+		selectedTextClass: "data-[state=on]:text-[var(--toggle-group-accent)]",
+		arbitraryAccent: color
+	};
+}
+var [ToggleGroupProvider, useToggleGroup] = getStrictContext("ToggleGroupStyledContext");
+/** Horizontal padding + min width; applied after `toggleVariants` so it overrides size defaults. */
+var toggleGroupItemSizeClasses = {
+	sm: "px-2.5 min-w-9",
+	default: "px-3.5 min-w-10",
+	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]);
+	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 ? {
+			...style,
+			["--toggle-group-accent"]: colorTokens.arbitraryAccent
+		} : style,
+		...props,
+		children: /* @__PURE__ */ jsx(ToggleGroupProvider, {
+			value: {
+				size,
+				colorTokens
+			},
+			children: props.type === "single" ? /* @__PURE__ */ jsx(ToggleGroupHighlight, {
+				className: cn("rounded-md", colorTokens.highlightClass),
+				children
+			}) : children
+		})
+	});
+}
+function ToggleGroupItem({ className, children, size, ...props }) {
+	const { size: contextSize, colorTokens } = useToggleGroup();
+	const { type } = useToggleGroup$1();
+	const itemSize = contextSize ?? size ?? "default";
+	return /* @__PURE__ */ jsx(ToggleGroupHighlightItem, {
+		value: props.value,
+		className: cn(type === "multiple" && "rounded-md"),
+		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),
+			...props,
+			children
+		})
+	});
+}
+//#endregion
+export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,24 @@
+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", {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border 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",
+			icon: "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+//#endregion
+export { toggleVariants };