beez-ui 0.4.2 → 0.5.1

package/dist/components/animated-theme-toggler.js

@@ -1,88 +1,227 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useSyncExternalStore } from "react";
+import { c as _c } from "react/compiler-runtime";
+import { useRef, useSyncExternalStore } from "react";
 import { Monitor, Moon, Sun, SunMoon } from "lucide-react";
 import { flushSync } from "react-dom";
 import { useTheme } from "next-themes";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./dropdown-menu.js";
 import { cn } from "../lib/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const THEME_OPTIONS = [
-    {
-        icon: Sun,
-        label: "Claro",
-        value: "light",
-    },
-    {
-        icon: Moon,
-        label: "Oscuro",
-        value: "dark",
-    },
-    {
-        icon: Monitor,
-        label: "Sistema",
-        value: "system",
-    },
+	{
+		icon: Sun,
+		label: "Claro",
+		value: "light"
+	},
+	{
+		icon: Moon,
+		label: "Oscuro",
+		value: "dark"
+	},
+	{
+		icon: Monitor,
+		label: "Sistema",
+		value: "system"
+	}
 ];
 /** Restricts transition styling to theme changes initiated by this component. */
 const THEME_TRANSITION_CLASS = "BeezThemeTransition";
 /** Respects user preferences when deciding whether to animate a theme change. */
 const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-export const AnimatedThemeToggler = ({ className, duration = 400, disabled, theme: controlledTheme, resolvedTheme: controlledResolvedTheme, onThemeChange: controlledOnThemeChange, ...props }) => {
-    const providerTheme = useTheme();
-    const theme = controlledTheme ?? providerTheme.theme;
-    const resolvedTheme = controlledResolvedTheme ?? providerTheme.resolvedTheme;
-    const onThemeChange = controlledOnThemeChange ?? providerTheme.setTheme;
-    const buttonRef = useRef(null);
-    const isHydrated = useSyncExternalStore(() => () => undefined, () => true, () => false);
-    const isThemeReady = isHydrated &&
-        (resolvedTheme === "light" || resolvedTheme === "dark");
-    const isDark = resolvedTheme === "dark";
-    const selectedTheme = theme === "light" || theme === "dark" || theme === "system"
-        ? theme
-        : "system";
-    const isDisabled = !isThemeReady || disabled;
-    const selectTheme = useCallback((nextTheme) => {
-        const button = buttonRef.current;
-        if (!button || typeof document === "undefined" || isDisabled) {
-            return;
-        }
-        const { top, left, width, height } = button.getBoundingClientRect();
-        const x = left + width / 2;
-        const y = top + height / 2;
-        const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
-        const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
-        const maxRadius = Math.hypot(Math.max(x, viewportWidth - x), Math.max(y, viewportHeight - y));
-        const applyTheme = () => {
-            onThemeChange(nextTheme);
-        };
-        if (typeof document.startViewTransition !== "function" ||
-            typeof document.documentElement.animate !== "function" ||
-            window.matchMedia?.(REDUCED_MOTION_QUERY).matches) {
-            applyTheme();
-            return;
-        }
-        document.documentElement.classList.add(THEME_TRANSITION_CLASS);
-        const transition = document.startViewTransition(() => {
-            flushSync(applyTheme);
-        });
-        void transition.ready.then(() => {
-            return document.documentElement.animate({
-                clipPath: [
-                    `circle(0px at ${x}px ${y}px)`,
-                    `circle(${maxRadius}px at ${x}px ${y}px)`,
-                ],
-            }, {
-                duration,
-                easing: "ease-in-out",
-                pseudoElement: "::view-transition-new(root)",
-            }).finished;
-        }).catch(() => {
-            // Skipped transitions retain the applied theme without an unhandled rejection.
-        }).finally(() => {
-            document.documentElement.classList.remove(THEME_TRANSITION_CLASS);
-        });
-    }, [duration, isDisabled, onThemeChange]);
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", ref: buttonRef, disabled: isDisabled, className: cn(className), ...props, children: [!isThemeReady ? _jsx(SunMoon, { "aria-hidden": "true" }) : isDark ? _jsx(Moon, { "aria-hidden": "true" }) : _jsx(Sun, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Alternar tema" })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-44 rounded-xl p-2", side: "bottom", sideOffset: 8, children: _jsx(DropdownMenuRadioGroup, { onValueChange: (nextTheme) => {
-                        selectTheme(nextTheme);
-                    }, value: selectedTheme, children: THEME_OPTIONS.map(({ icon: Icon, label, value }) => (_jsxs(DropdownMenuRadioItem, { className: "h-11 gap-3 px-3 pr-9 text-base", value: value, children: [_jsx(Icon, { "aria-hidden": "true", className: "size-5" }), _jsx("span", { children: label })] }, value))) }) })] }));
+export const AnimatedThemeToggler = (t0) => {
+	const $ = _c(32);
+	let className;
+	let controlledOnThemeChange;
+	let controlledResolvedTheme;
+	let controlledTheme;
+	let disabled;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, duration: t1, disabled, theme: controlledTheme, resolvedTheme: controlledResolvedTheme, onThemeChange: controlledOnThemeChange, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = controlledOnThemeChange;
+		$[3] = controlledResolvedTheme;
+		$[4] = controlledTheme;
+		$[5] = disabled;
+		$[6] = props;
+		$[7] = t1;
+	} else {
+		className = $[1];
+		controlledOnThemeChange = $[2];
+		controlledResolvedTheme = $[3];
+		controlledTheme = $[4];
+		disabled = $[5];
+		props = $[6];
+		t1 = $[7];
+	}
+	const duration = t1 === undefined ? 400 : t1;
+	const providerTheme = useTheme();
+	const theme = controlledTheme ?? providerTheme.theme;
+	const resolvedTheme = controlledResolvedTheme ?? providerTheme.resolvedTheme;
+	const onThemeChange = controlledOnThemeChange ?? providerTheme.setTheme;
+	const buttonRef = useRef(null);
+	const isHydrated = useSyncExternalStore(_temp2, _temp3, _temp4);
+	const isThemeReady = isHydrated && (resolvedTheme === "light" || resolvedTheme === "dark");
+	const isDark = resolvedTheme === "dark";
+	const selectedTheme = theme === "light" || theme === "dark" || theme === "system" ? theme : "system";
+	const isDisabled = !isThemeReady || disabled;
+	let t2;
+	if ($[8] !== duration || $[9] !== isDisabled || $[10] !== onThemeChange) {
+		t2 = (nextTheme) => {
+			const button = buttonRef.current;
+			if (!button || typeof document === "undefined" || isDisabled) {
+				return;
+			}
+			const { top, left, width, height } = button.getBoundingClientRect();
+			const x = left + width / 2;
+			const y = top + height / 2;
+			const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+			const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+			const maxRadius = Math.hypot(Math.max(x, viewportWidth - x), Math.max(y, viewportHeight - y));
+			const applyTheme = () => {
+				onThemeChange(nextTheme);
+			};
+			if (typeof document.startViewTransition !== "function" || typeof document.documentElement.animate !== "function" || window.matchMedia?.(REDUCED_MOTION_QUERY).matches) {
+				applyTheme();
+				return;
+			}
+			document.documentElement.classList.add(THEME_TRANSITION_CLASS);
+			const transition = document.startViewTransition(() => {
+				flushSync(applyTheme);
+			});
+			transition.ready.then(() => document.documentElement.animate({ clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${maxRadius}px at ${x}px ${y}px)`] }, {
+				duration,
+				easing: "ease-in-out",
+				pseudoElement: "::view-transition-new(root)"
+			}).finished).catch(_temp5).finally(_temp6);
+		};
+		$[8] = duration;
+		$[9] = isDisabled;
+		$[10] = onThemeChange;
+		$[11] = t2;
+	} else {
+		t2 = $[11];
+	}
+	const selectTheme = t2;
+	let t3;
+	if ($[12] !== className) {
+		t3 = cn(className);
+		$[12] = className;
+		$[13] = t3;
+	} else {
+		t3 = $[13];
+	}
+	let t4;
+	if ($[14] !== isDark || $[15] !== isThemeReady) {
+		t4 = !isThemeReady ? /* @__PURE__ */ _jsx(SunMoon, { "aria-hidden": "true" }) : isDark ? /* @__PURE__ */ _jsx(Moon, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsx(Sun, { "aria-hidden": "true" });
+		$[14] = isDark;
+		$[15] = isThemeReady;
+		$[16] = t4;
+	} else {
+		t4 = $[16];
+	}
+	let t5;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ _jsx("span", {
+			className: "sr-only",
+			children: "Alternar tema"
+		});
+		$[17] = t5;
+	} else {
+		t5 = $[17];
+	}
+	let t6;
+	if ($[18] !== isDisabled || $[19] !== props || $[20] !== t3 || $[21] !== t4) {
+		t6 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ _jsxs("button", {
+				type: "button",
+				ref: buttonRef,
+				disabled: isDisabled,
+				className: t3,
+				...props,
+				children: [t4, t5]
+			})
+		});
+		$[18] = isDisabled;
+		$[19] = props;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t6;
+	} else {
+		t6 = $[22];
+	}
+	let t7;
+	if ($[23] !== selectTheme) {
+		t7 = (nextTheme_0) => {
+			selectTheme(nextTheme_0);
+		};
+		$[23] = selectTheme;
+		$[24] = t7;
+	} else {
+		t7 = $[24];
+	}
+	let t8;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = THEME_OPTIONS.map(_temp7);
+		$[25] = t8;
+	} else {
+		t8 = $[25];
+	}
+	let t9;
+	if ($[26] !== selectedTheme || $[27] !== t7) {
+		t9 = /* @__PURE__ */ _jsx(DropdownMenuContent, {
+			align: "end",
+			className: "w-44 rounded-xl p-2",
+			side: "bottom",
+			sideOffset: 8,
+			children: /* @__PURE__ */ _jsx(DropdownMenuRadioGroup, {
+				onValueChange: t7,
+				value: selectedTheme,
+				children: t8
+			})
+		});
+		$[26] = selectedTheme;
+		$[27] = t7;
+		$[28] = t9;
+	} else {
+		t9 = $[28];
+	}
+	let t10;
+	if ($[29] !== t6 || $[30] !== t9) {
+		t10 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t6, t9] });
+		$[29] = t6;
+		$[30] = t9;
+		$[31] = t10;
+	} else {
+		t10 = $[31];
+	}
+	return t10;
 };
+function _temp() {}
+function _temp2() {
+	return _temp;
+}
+function _temp3() {
+	return true;
+}
+function _temp4() {
+	return false;
+}
+function _temp5() {}
+function _temp6() {
+	document.documentElement.classList.remove(THEME_TRANSITION_CLASS);
+}
+function _temp7(t0) {
+	const { icon: Icon, label, value } = t0;
+	return /* @__PURE__ */ _jsxs(DropdownMenuRadioItem, {
+		className: "h-11 gap-3 px-3 pr-9 text-base",
+		value,
+		children: [/* @__PURE__ */ _jsx(Icon, {
+			"aria-hidden": "true",
+			className: "size-5"
+		}), /* @__PURE__ */ _jsx("span", { children: label })]
+	}, value);
+}

package/dist/components/avatar.js

@@ -1,26 +1,258 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import { cn } from "../lib/utils.js";
 import { useBeezUIComponents } from "../providers/beez-ui-provider.js";
-function Avatar({ className, size = "default", ...props }) {
-    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }));
+import { jsx as _jsx } from "react/jsx-runtime";
+function Avatar(t0) {
+	const $ = _c(10);
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, size: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const size = t1 === undefined ? "default" : t1;
+	let t2;
+	if ($[4] !== className) {
+		t2 = cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className);
+		$[4] = className;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== props || $[7] !== size || $[8] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(AvatarPrimitive.Root, {
+			"data-slot": "avatar",
+			"data-size": size,
+			className: t2,
+			...props
+		});
+		$[6] = props;
+		$[7] = size;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	return t3;
 }
 /** Delegates loading, failure and fallback synchronization to the avatar primitive. */
-function AvatarImage({ alt = "", className, src, ...props }) {
-    const { Image: ImageComponent = "img" } = useBeezUIComponents();
-    return (_jsx(AvatarPrimitive.Image, { render: _jsx(ImageComponent, {}), keepMounted: true, alt: alt, "data-slot": "avatar-image", className: cn("absolute inset-0 aspect-square size-full rounded-full object-cover data-[loading]:opacity-0 data-[error]:hidden", className), src: src ?? undefined, loading: "lazy", decoding: "async", ...props }));
+function AvatarImage(t0) {
+	const $ = _c(15);
+	let className;
+	let props;
+	let src;
+	let t1;
+	if ($[0] !== t0) {
+		({alt: t1, className, src, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = src;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		src = $[3];
+		t1 = $[4];
+	}
+	const alt = t1 === undefined ? "" : t1;
+	const { Image: t2 } = useBeezUIComponents();
+	const ImageComponent = t2 === undefined ? "img" : t2;
+	let t3;
+	if ($[5] !== ImageComponent) {
+		t3 = /* @__PURE__ */ _jsx(ImageComponent, {});
+		$[5] = ImageComponent;
+		$[6] = t3;
+	} else {
+		t3 = $[6];
+	}
+	let t4;
+	if ($[7] !== className) {
+		t4 = cn("absolute inset-0 aspect-square size-full rounded-full object-cover data-[loading]:opacity-0 data-[error]:hidden", className);
+		$[7] = className;
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
+	const t5 = src ?? undefined;
+	let t6;
+	if ($[9] !== alt || $[10] !== props || $[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AvatarPrimitive.Image, {
+			render: t3,
+			keepMounted: true,
+			alt,
+			"data-slot": "avatar-image",
+			className: t4,
+			src: t5,
+			loading: "lazy",
+			decoding: "async",
+			...props
+		});
+		$[9] = alt;
+		$[10] = props;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else {
+		t6 = $[14];
+	}
+	return t6;
 }
-function AvatarFallback({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
+function AvatarFallback(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AvatarPrimitive.Fallback, {
+			"data-slot": "avatar-fallback",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
 }
-function AvatarBadge({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
+function AvatarBadge(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "avatar-badge",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
 }
-function AvatarGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
+function AvatarGroup(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "avatar-group",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
 }
-function AvatarGroupCount({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
+function AvatarGroupCount(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "avatar-group-count",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
 }
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

package/dist/components/badge.js

@@ -1,24 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { cn } from "../lib/utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
-    variants: {
-        variant: {
-            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-            destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-            outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-            ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-            link: "text-primary underline-offset-4 hover:underline",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-    },
+	variants: { variant: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline"
+	} },
+	defaultVariants: { variant: "default" }
 });
 function Badge({ className, variant = "default", asChild = false, ...props }) {
-    const Comp = asChild ? Slot.Root : "span";
-    return (_jsx(Comp, { "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props }));
+	const Comp = asChild ? Slot.Root : "span";
+	return /* @__PURE__ */ _jsx(Comp, {
+		"data-slot": "badge",
+		"data-variant": variant,
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
 }
 export { Badge, badgeVariants };