@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/vertical-stepper/vertical-stepper.js

@@ -0,0 +1,171 @@
+import { cn } from "../../utils/cn.js";
+import { cloneElement, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+//#region src/components/vertical-stepper/vertical-stepper.tsx
+var stateVisuals = {
+	complete: {
+		iconClass: "text-success",
+		iconBoxClass: "border-success/25 bg-success/10",
+		titleClass: "text-foreground",
+		descriptionClass: "text-muted-foreground",
+		connectorClass: "bg-success"
+	},
+	in_progress: {
+		iconClass: "text-primary",
+		iconBoxClass: "border-primary/25 bg-primary/10",
+		titleClass: "text-foreground",
+		descriptionClass: "text-muted-foreground",
+		connectorClass: "bg-border"
+	},
+	not_started: {
+		iconClass: "text-gray",
+		iconBoxClass: "border-border bg-background",
+		titleClass: "text-gray",
+		descriptionClass: "text-gray/80",
+		connectorClass: "bg-border"
+	}
+};
+var statusSrLabel = {
+	complete: "Completed",
+	in_progress: "Current step",
+	not_started: "Not started"
+};
+/** Aligned with StatusCardList / SelectableCardList size scales. */
+var sizeStyles = {
+	sm: {
+		rowGap: "gap-2",
+		stepGap: "pb-8",
+		primary: "text-xs font-semibold",
+		secondary: "text-xs",
+		icon: "h-[18px] w-[18px] shrink-0",
+		iconBox: "size-9",
+		iconBoxHeight: "h-9",
+		connectorStart: "start-[1.125rem]",
+		connectorTop: "top-9",
+		textGap: "gap-0.5",
+		endIcon: "size-4 shrink-0",
+		endGap: "gap-2"
+	},
+	default: {
+		rowGap: "gap-3",
+		stepGap: "pb-10",
+		primary: "text-sm font-semibold",
+		secondary: "text-sm",
+		icon: "h-6 w-6 shrink-0",
+		iconBox: "size-11",
+		iconBoxHeight: "h-11",
+		connectorStart: "start-[1.375rem]",
+		connectorTop: "top-11",
+		textGap: "gap-0.5",
+		endIcon: "size-5 shrink-0",
+		endGap: "gap-2"
+	},
+	lg: {
+		rowGap: "gap-4",
+		stepGap: "pb-12",
+		primary: "text-base font-semibold",
+		secondary: "text-sm",
+		icon: "h-8 w-8 shrink-0",
+		iconBox: "size-[52px]",
+		iconBoxHeight: "h-[52px]",
+		connectorStart: "start-[1.625rem]",
+		connectorTop: "top-[52px]",
+		textGap: "gap-0.5",
+		endIcon: "size-6 shrink-0",
+		endGap: "gap-3"
+	}
+};
+function iconSized(icon, iconClass) {
+	if (icon == null) return null;
+	if (isValidElement(icon)) {
+		const el = icon;
+		return cloneElement(el, { className: cn(el.props.className, iconClass) });
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center justify-center", iconClass),
+		"aria-hidden": true,
+		children: icon
+	});
+}
+function StepTextContent({ step, visuals, s }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: cn(s.primary, visuals.titleClass),
+		children: step.title
+	}), /* @__PURE__ */ jsx("span", {
+		className: cn(s.secondary, visuals.descriptionClass),
+		children: step.description
+	})] });
+}
+function VerticalStepperStepRow({ step, isLast, onStepClick, s }) {
+	const visuals = stateVisuals[step.status];
+	const srStatus = statusSrLabel[step.status];
+	const isInteractive = onStepClick != null;
+	const stepAriaLabel = `${step.title}, ${srStatus.toLowerCase()}`;
+	const iconBox = /* @__PURE__ */ jsx("div", {
+		className: cn("flex shrink-0 items-center justify-center rounded-lg border", s.iconBox, visuals.iconBoxClass),
+		"aria-hidden": true,
+		children: iconSized(step.icon, cn(s.icon, visuals.iconClass))
+	});
+	const textContent = /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-1 flex-col", s.textGap),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: srStatus
+		}), /* @__PURE__ */ jsx(StepTextContent, {
+			step,
+			visuals,
+			s
+		})]
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		className: cn("relative flex items-start last:pb-0", s.rowGap, s.stepGap),
+		"aria-current": step.status === "in_progress" ? "step" : void 0,
+		children: [
+			!isLast ? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: cn("pointer-events-none absolute bottom-0 w-px -translate-x-1/2", visuals.connectorClass, s.connectorStart, s.connectorTop)
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "relative z-10 shrink-0",
+				children: iconBox
+			}),
+			isInteractive ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("flex min-w-0 flex-1 flex-col rounded-md text-left outline-none", s.textGap, "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"),
+				"aria-label": stepAriaLabel,
+				onClick: () => onStepClick(step.id),
+				children: /* @__PURE__ */ jsx(StepTextContent, {
+					step,
+					visuals,
+					s
+				})
+			}) : textContent,
+			step.status === "complete" || step.endAction != null ? /* @__PURE__ */ jsxs("div", {
+				className: cn("flex shrink-0 items-center", s.iconBoxHeight, s.endGap),
+				children: [step.status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {
+					className: cn(s.endIcon, "text-success"),
+					"aria-hidden": true
+				}) : null, step.endAction]
+			}) : null
+		]
+	});
+}
+function VerticalStepper({ data, onStepClick, size = "default", className, ariaLabel = "Progress" }) {
+	const s = sizeStyles[size];
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className: cn(className),
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "flex min-w-0 flex-col",
+			children: data.map((step, index) => /* @__PURE__ */ jsx(VerticalStepperStepRow, {
+				step,
+				isLast: index === data.length - 1,
+				onStepClick,
+				s
+			}, step.id))
+		})
+	});
+}
+//#endregion
+export { VerticalStepper };

package/dist/core/alert.js

@@ -0,0 +1,33 @@
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/core/alert.tsx
+var alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", {
+	variants: { variant: {
+		default: "bg-background text-foreground",
+		destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+	} },
+	defaultVariants: { variant: "default" }
+});
+var Alert = React$1.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	role: "alert",
+	className: cn(alertVariants({ variant }), className),
+	...props
+}));
+Alert.displayName = "Alert";
+var AlertTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h5", {
+	ref,
+	className: cn("mb-1 font-medium leading-none tracking-tight", className),
+	...props
+}));
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("text-sm [&_p]:leading-relaxed", className),
+	...props
+}));
+AlertDescription.displayName = "AlertDescription";
+//#endregion
+export { Alert, AlertDescription, AlertTitle };

package/dist/core/animate-ui/components/animate/code-header.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { CopyButton } from "../buttons/copy.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/core/animate-ui/components/animate/code-header.tsx
+/** Header row shared by `Code` and `CodeEditor`: icon, file name, trailing actions and copy button. */
+function CodeHeader({ icon: Icon, fileName, copyContent, copyLabel = "Copy", actions }) {
+	const copyButton = copyContent !== void 0 && /* @__PURE__ */ jsx(CopyButton, {
+		content: copyContent,
+		size: "sm",
+		variant: "ghost",
+		"aria-label": copyLabel,
+		title: copyLabel,
+		className: cn(actions == null && "ml-auto", "w-auto h-auto p-2 -mr-2")
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "shrink-0 gap-x-2 border-b border-border/75 dark:border-border/50 text-sm flex text-muted-foreground items-center px-4 w-full h-10 font-medium",
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+			fileName,
+			actions != null ? /* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-1",
+				children: [actions, copyButton]
+			}) : copyButton
+		]
+	});
+}
+//#endregion
+export { CodeHeader };

package/dist/core/animate-ui/components/animate/code.js

@@ -0,0 +1,35 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { CodeBlock } from "../../primitives/animate/code-block.js";
+import { CodeHeader } from "./code-header.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/core/animate-ui/components/animate/code.tsx
+function Code({ className, code, icon: Icon, theme = "light", themes, copyButton, lang, fileName, height, style, ...props }) {
+	const showCopyButton = copyButton !== false && (copyButton === true || copyButton === void 0 && Boolean(lang));
+	const showHeader = fileName !== void 0 || showCopyButton;
+	const scrollRef = React$1.useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-col overflow-hidden border bg-background rounded-lg", className),
+		style: {
+			height,
+			...style
+		},
+		...props,
+		children: [showHeader && /* @__PURE__ */ jsx(CodeHeader, {
+			icon: Icon,
+			fileName,
+			copyContent: showCopyButton ? code : void 0
+		}), lang && /* @__PURE__ */ jsx(CodeBlock, {
+			ref: scrollRef,
+			theme,
+			themes,
+			scrollContainerRef: scrollRef,
+			className: cn("relative text-sm p-4 overflow-auto bg-accent/10 flex-1 min-h-0", "[&>pre,_&_code]:!bg-transparent [&>pre,_&_code]:[background:transparent_!important] [&>pre,_&_code]:border-none [&_code]:!text-[13px] [&_code_.line]:!px-0"),
+			code,
+			lang
+		})]
+	});
+}
+//#endregion
+export { Code };

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

@@ -0,0 +1,188 @@
+import { cn } from "../../../../utils/cn.js";
+import { useScrollOverflow } from "../../../hooks/use-scroll-overflow.js";
+import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsContents as TabsContents$1, TabsHighlight, TabsHighlightItem, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1, useTabs } from "../../primitives/animate/tabs.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/core/animate-ui/components/animate/tabs.tsx
+var TabsListVariantContext = React$1.createContext(void 0);
+var TABS_LIST_VARIANTS = {
+	default: {
+		highlight: {
+			mode: "parent",
+			className: "absolute z-0 inset-0 rounded-md bg-primary/10"
+		},
+		list: "bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-md p-1 border border-primary/30"
+	},
+	line: {
+		highlight: {
+			mode: "parent",
+			variant: "line",
+			lineHeight: 2,
+			boundsOffset: { top: 2 },
+			className: "absolute z-0 bg-primary rounded-none"
+		},
+		list: "text-muted-foreground inline-flex h-auto w-fit items-center justify-center gap-1 border-b border-border"
+	},
+	rounded: {
+		highlight: {
+			mode: "parent",
+			className: "absolute z-0 inset-0 rounded-full bg-primary/10"
+		},
+		list: "bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-full p-1 border border-primary/30"
+	}
+};
+/** Width of the edge fade, and the margin kept beside the active tab when it is scrolled into view. */
+var EDGE_SIZE = 40;
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+* Tracks whether a horizontal scroller has hidden content on either side and
+* keeps the active tab in view whenever the selection changes.
+*/
+function useTabsOverflow(scrollerRef, enabled) {
+	const { activeValue } = useTabs();
+	/** Scrolls the active tab into view, keeping `EDGE_SIZE` clear of the faded edges. */
+	const revealActive = React$1.useCallback((behavior) => {
+		const scroller = scrollerRef.current;
+		if (!scroller) return;
+		const trigger = scroller.querySelector("[role=\"tab\"][data-state=\"active\"]");
+		if (!trigger) return;
+		const scrollerRect = scroller.getBoundingClientRect();
+		const triggerRect = trigger.getBoundingClientRect();
+		const overStart = triggerRect.left - (scrollerRect.left + EDGE_SIZE);
+		const overEnd = triggerRect.right - (scrollerRect.right - EDGE_SIZE);
+		let delta = 0;
+		if (overStart < 0) delta = overStart;
+		else if (overEnd > 0) delta = Math.min(overEnd, overStart);
+		if (Math.abs(delta) >= 1) scroller.scrollBy({
+			left: delta,
+			behavior
+		});
+	}, [scrollerRef]);
+	const overflow = useScrollOverflow(scrollerRef, {
+		enabled,
+		getContent: (scroller) => scroller.querySelector("[data-slot=\"tabs-list\"]"),
+		onResize: () => revealActive("auto")
+	});
+	const mountedRef = React$1.useRef(false);
+	React$1.useEffect(() => {
+		if (!enabled || activeValue === void 0) return;
+		const instant = !mountedRef.current || prefersReducedMotion();
+		mountedRef.current = true;
+		revealActive(instant ? "auto" : "smooth");
+	}, [
+		enabled,
+		activeValue,
+		revealActive
+	]);
+	return {
+		overflow,
+		scrollByPage: React$1.useCallback((direction) => {
+			const scroller = scrollerRef.current;
+			if (!scroller) return;
+			scroller.scrollBy({
+				left: direction * scroller.clientWidth * .8,
+				behavior: prefersReducedMotion() ? "auto" : "smooth"
+			});
+		}, [scrollerRef])
+	};
+}
+function fadeMask(start, end) {
+	if (!start && !end) return {};
+	const image = `linear-gradient(to right, ${start ? `transparent, #000 ${EDGE_SIZE}px` : "#000"}, ${end ? `#000 calc(100% - ${EDGE_SIZE}px), transparent` : "#000"})`;
+	return {
+		maskImage: image,
+		WebkitMaskImage: image
+	};
+}
+var scrollButtonClass = "absolute top-1/2 z-10 -translate-y-1/2 inline-flex size-7 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-sm transition-colors hover:text-foreground [@media(pointer:coarse)]:hidden";
+function TabsListContent({ variant, fullWidth, className, ...props }) {
+	const config = TABS_LIST_VARIANTS[variant];
+	const scrollerRef = React$1.useRef(null);
+	const scrollable = props["aria-orientation"] !== "vertical";
+	const { overflow, scrollByPage } = useTabsOverflow(scrollerRef, scrollable);
+	const list = /* @__PURE__ */ jsx(TabsHighlight, {
+		ref: scrollerRef,
+		containerClassName: scrollable ? "flex -my-1 py-1 overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : void 0,
+		...config.highlight,
+		children: /* @__PURE__ */ jsx(TabsList$1, {
+			className: cn(config.list, scrollable && "shrink-0 min-w-fit", scrollable && fullWidth && "max-md:w-full", className),
+			...props
+		})
+	});
+	if (!scrollable) return list;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tabs-list-scroller",
+		"data-overflow-start": overflow.start || void 0,
+		"data-overflow-end": overflow.end || void 0,
+		className: cn("relative min-w-0 max-w-full", fullWidth && "max-md:w-full"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: fadeMask(overflow.start, overflow.end),
+				children: list
+			}),
+			overflow.start && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				"aria-hidden": true,
+				className: cn(scrollButtonClass, "left-0"),
+				onClick: () => scrollByPage(-1),
+				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+			}),
+			overflow.end && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				"aria-hidden": true,
+				className: cn(scrollButtonClass, "right-0"),
+				onClick: () => scrollByPage(1),
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+			})
+		]
+	});
+}
+function Tabs({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1, {
+		className: cn("flex flex-col gap-2", className),
+		...props
+	});
+}
+/**
+* When the tabs don't fit, the list scrolls horizontally: edges fade to signal
+* hidden tabs, chevron buttons page through them on pointer devices, and the
+* active tab is kept in view. Pass `aria-orientation="vertical"` for a stacked list.
+*/
+function TabsList({ variant, fullWidth = true, ...props }) {
+	return /* @__PURE__ */ jsx(TabsListVariantContext.Provider, {
+		value: variant,
+		children: /* @__PURE__ */ jsx(TabsListContent, {
+			variant: variant ?? "default",
+			fullWidth,
+			...props
+		})
+	});
+}
+var tabsTriggerBaseClass = "data-[state=active]:text-primary tracking-wide focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+function TabsTrigger({ className, ...props }) {
+	const isLine = React$1.useContext(TabsListVariantContext) === "line";
+	return /* @__PURE__ */ jsx(TabsHighlightItem, {
+		value: props.value,
+		className: "flex-1",
+		children: /* @__PURE__ */ jsx(TabsTrigger$1, {
+			className: cn(tabsTriggerBaseClass, isLine ? "text-muted-foreground py-2.5" : "text-muted-foreground h-[calc(100%-1px)] py-1", className),
+			...props
+		})
+	});
+}
+function TabsContents(props) {
+	return /* @__PURE__ */ jsx(TabsContents$1, { ...props });
+}
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TabsContent$1, {
+		className: cn("outline-none", className),
+		...props
+	});
+}
+//#endregion
+export { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger };

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

@@ -0,0 +1,39 @@
+import { cn } from "../../../../utils/cn.js";
+import { Tooltip as Tooltip$1, TooltipArrow, TooltipContent as TooltipContent$1, TooltipProvider as TooltipProvider$1, TooltipTrigger as TooltipTrigger$1 } from "../../primitives/animate/tooltip.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as motion from "motion/react-client";
+//#region src/core/animate-ui/components/animate/tooltip.tsx
+function TooltipProvider({ openDelay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipProvider$1, {
+		openDelay,
+		...props
+	});
+}
+function Tooltip({ sideOffset = 10, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1, {
+		sideOffset,
+		...props
+	});
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(TooltipTrigger$1, { ...props });
+}
+function TooltipContent({ className, children, layout = "preserve-aspect", ...props }) {
+	return /* @__PURE__ */ jsxs(TooltipContent$1, {
+		className: cn("z-50 w-fit bg-tooltip text-tooltip-foreground rounded-md", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(motion.div, {
+			className: "overflow-hidden px-3 py-1.5 text-xs text-balance",
+			children: /* @__PURE__ */ jsx(motion.div, {
+				layout,
+				children
+			})
+		}), /* @__PURE__ */ jsx(TooltipArrow, {
+			className: "fill-tooltip size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]",
+			tipRadius: 2
+		})]
+	});
+}
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/core/animate-ui/components/base/preview-card.js

@@ -0,0 +1,29 @@
+import { cn } from "../../../../utils/cn.js";
+import { PreviewCard as PreviewCard$1, PreviewCardBackdrop as PreviewCardBackdrop$1, PreviewCardPopup, PreviewCardPortal, PreviewCardPositioner, PreviewCardTrigger as PreviewCardTrigger$1 } from "../../primitives/base/preview-card.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/core/animate-ui/components/base/preview-card.tsx
+function PreviewCard(props) {
+	return /* @__PURE__ */ jsx(PreviewCard$1, { ...props });
+}
+function PreviewCardTrigger(props) {
+	return /* @__PURE__ */ jsx(PreviewCardTrigger$1, { ...props });
+}
+function PreviewCardPanel({ className, align = "center", sideOffset = 4, style, children, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCardPortal, { children: /* @__PURE__ */ jsx(PreviewCardPositioner, {
+		align,
+		sideOffset,
+		className: "z-50",
+		...props,
+		children: /* @__PURE__ */ jsx(PreviewCardPopup, {
+			className: cn("bg-popover text-popover-foreground w-64 origin-(--transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
+			style,
+			children
+		})
+	}) });
+}
+function PreviewCardBackdrop(props) {
+	return /* @__PURE__ */ jsx(PreviewCardBackdrop$1, { ...props });
+}
+//#endregion
+export { PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger };

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

@@ -0,0 +1,32 @@
+import { cn } from "../../../../utils/cn.js";
+import { Progress as Progress$1, ProgressIndicator, ProgressLabel as ProgressLabel$1, ProgressTrack as ProgressTrack$1, ProgressValue as ProgressValue$1 } from "../../primitives/base/progress.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/core/animate-ui/components/base/progress.tsx
+function Progress(props) {
+	return /* @__PURE__ */ jsx(Progress$1, { ...props });
+}
+function ProgressTrack({ className, indicatorClassName, indicatorStyle, ...props }) {
+	return /* @__PURE__ */ jsx(ProgressTrack$1, {
+		className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ProgressIndicator, {
+			className: cn("bg-primary rounded-full h-full w-full flex-1", indicatorClassName),
+			style: indicatorStyle
+		})
+	});
+}
+function ProgressLabel(props) {
+	return /* @__PURE__ */ jsx(ProgressLabel$1, {
+		className: "text-sm font-medium",
+		...props
+	});
+}
+function ProgressValue(props) {
+	return /* @__PURE__ */ jsx(ProgressValue$1, {
+		className: "text-sm",
+		...props
+	});
+}
+//#endregion
+export { Progress, ProgressLabel, ProgressTrack, ProgressValue };

package/dist/core/animate-ui/components/base/radio.js

@@ -0,0 +1,24 @@
+import { cn } from "../../../../utils/cn.js";
+import { Radio as Radio$1, RadioGroup as RadioGroup$1, RadioIndicator } from "../../primitives/base/radio.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { CircleIcon } from "lucide-react";
+//#region src/core/animate-ui/components/base/radio.tsx
+function RadioGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		className: cn("grid gap-3", className),
+		...props
+	});
+}
+function Radio({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Radio$1, {
+		className: cn("border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsx(RadioIndicator, {
+			className: "relative flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
+		})
+	});
+}
+//#endregion
+export { Radio, RadioGroup };