@inspirare/design-system 0.0.23 → 0.0.24

package/dist/components/ui/skeleton.js

@@ -1,49 +1,13 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/ui/skeleton.tsx
 function n({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
-		className: e("animate-pulse rounded-md bg-gradient-to-r from-muted via-muted/80 to-muted", "relative overflow-hidden", "before:absolute before:inset-0", "before:bg-gradient-to-r before:from-transparent before:via-primary/5 before:to-transparent", "before:animate-[shimmer_2s_ease-in-out_infinite]", n),
+		"data-slot": "skeleton",
+		className: e("animate-pulse rounded-md bg-muted", n),
 		...r
 	});
 }
-function r({ className: r, variant: i = "default", ...a }) {
-	return /* @__PURE__ */ t(n, {
-		className: e({
-			default: "h-4",
-			title: "h-6",
-			subtitle: "h-5",
-			caption: "h-3"
-		}[i], "bg-gradient-to-r from-muted via-primary/10 to-muted", r),
-		...a
-	});
-}
-function i({ className: r, size: i = "default", ...a }) {
-	return /* @__PURE__ */ t(n, {
-		className: e("rounded-full", {
-			sm: "h-6 w-6",
-			default: "h-8 w-8",
-			lg: "h-12 w-12"
-		}[i], "bg-gradient-to-br from-primary/20 via-muted to-primary/10", r),
-		...a
-	});
-}
-function a({ className: r, variant: i = "default", ...a }) {
-	return /* @__PURE__ */ t(n, {
-		className: e("rounded-md", {
-			sm: "h-7 w-16",
-			default: "h-9 w-20",
-			lg: "h-11 w-24"
-		}[i], "bg-gradient-to-r from-primary/10 via-muted to-primary/5", r),
-		...a
-	});
-}
-function o({ className: n, children: r, ...i }) {
-	return /* @__PURE__ */ t("div", {
-		className: e("rounded-lg border border-border/50 p-4 space-y-3", "bg-gradient-to-br from-background via-background/95 to-primary/5", "shadow-sm", n),
-		...i,
-		children: r
-	});
-}
 //#endregion
-export { n as Skeleton, i as SkeletonAvatar, a as SkeletonButton, o as SkeletonCard, r as SkeletonText };
+export { n as Skeleton };

package/dist/components/ui/slider.js

@@ -1,36 +1,34 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import * as i from "@radix-ui/react-slider";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Slider as r } from "@base-ui/react/slider";
 //#region src/components/ui/slider.tsx
-function a({ className: a, defaultValue: o, value: s, min: c = 0, max: l = 100, ...u }) {
-	let d = t.useMemo(() => Array.isArray(s) ? s : Array.isArray(o) ? o : [c, l], [
-		s,
-		o,
-		c,
-		l
-	]);
-	return /* @__PURE__ */ r(i.Root, {
+function i({ className: i, defaultValue: a, value: o, min: s = 0, max: c = 100, ...l }) {
+	let u = Array.isArray(o) ? o : Array.isArray(a) ? a : [s, c];
+	return /* @__PURE__ */ t(r.Root, {
+		className: e("data-horizontal:w-full data-vertical:h-full", i),
 		"data-slot": "slider",
-		defaultValue: o,
-		value: s,
-		min: c,
-		max: l,
-		className: e("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", a),
-		...u,
-		children: [/* @__PURE__ */ n(i.Track, {
-			"data-slot": "slider-track",
-			className: e("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"),
-			children: /* @__PURE__ */ n(i.Range, {
-				"data-slot": "slider-range",
-				className: e("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
-			})
-		}), Array.from({ length: d.length }, (e, t) => /* @__PURE__ */ n(i.Thumb, {
-			"data-slot": "slider-thumb",
-			className: "border-primary bg-background ring-ring/50 block size-4 shrink-0 cursor-pointer rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-		}, t))]
+		defaultValue: a,
+		value: o,
+		min: s,
+		max: c,
+		thumbAlignment: "edge",
+		...l,
+		children: /* @__PURE__ */ n(r.Control, {
+			className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+			children: [/* @__PURE__ */ t(r.Track, {
+				"data-slot": "slider-track",
+				className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1",
+				children: /* @__PURE__ */ t(r.Indicator, {
+					"data-slot": "slider-range",
+					className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+				})
+			}), Array.from({ length: u.length }, (e, n) => /* @__PURE__ */ t(r.Thumb, {
+				"data-slot": "slider-thumb",
+				className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+			}, n))]
+		})
 	});
 }
 //#endregion
-export { a as Slider };
+export { i as Slider };

package/dist/components/ui/sonner.js

@@ -1,20 +1,37 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import { useTheme as t } from "next-themes";
-import { Toaster as n, toast as r } from "sonner";
+import { CircleCheckIcon as e, InfoIcon as t, Loader2Icon as n, OctagonXIcon as r, TriangleAlertIcon as i } from "lucide-react";
+import { jsx as a } from "react/jsx-runtime";
+import { useTheme as o } from "next-themes";
+import { Toaster as s, toast as c } from "sonner";
 //#region src/components/ui/sonner.tsx
-var i = ({ ...r }) => {
-	let { theme: i = "system" } = t();
-	return /* @__PURE__ */ e(n, {
-		theme: i,
+var l = ({ ...c }) => {
+	let { theme: l = "system" } = o();
+	return /* @__PURE__ */ a(s, {
+		theme: l,
 		className: "toaster group",
+		icons: {
+			success: /* @__PURE__ */ a(e, { className: "size-4" }),
+			info: /* @__PURE__ */ a(t, { className: "size-4" }),
+			warning: /* @__PURE__ */ a(i, { className: "size-4" }),
+			error: /* @__PURE__ */ a(r, { className: "size-4" }),
+			loading: /* @__PURE__ */ a(n, { className: "size-4 animate-spin" })
+		},
 		style: {
 			"--normal-bg": "var(--popover)",
 			"--normal-text": "var(--popover-foreground)",
-			"--normal-border": "var(--border)"
+			"--normal-border": "var(--border)",
+			"--border-radius": "var(--radius)"
 		},
-		...r
+		toastOptions: { classNames: {
+			toast: "group toast group-[.toaster]:bg-card group-[.toaster]:text-card-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+			success: "group-[.toaster]:border-primary/30 group-[.toaster]:bg-primary/5 group-[.toaster]:text-foreground",
+			error: "group-[.toaster]:border-destructive/30 group-[.toaster]:bg-destructive/5 group-[.toaster]:text-destructive"
+		} },
+		...c
 	});
 };
 //#endregion
-export { i as Toaster, r as toast };
+export { l as Toaster, c as toast };

package/dist/components/ui/spinner.js

@@ -1,9 +1,11 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
 import { Loader2Icon as t } from "lucide-react";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/ui/spinner.tsx
 function r({ className: r, ...i }) {
 	return /* @__PURE__ */ n(t, {
+		"data-slot": "spinner",
 		role: "status",
 		"aria-label": "Loading",
 		className: e("size-4 animate-spin", r),

package/dist/components/ui/switch.js

@@ -1,18 +1,17 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
 import { jsx as t } from "react/jsx-runtime";
-import { Switch as n } from "radix-ui";
+import { Switch as n } from "@base-ui/react/switch";
 //#region src/components/ui/switch.tsx
 function r({ className: r, size: i = "default", ...a }) {
 	return /* @__PURE__ */ t(n.Root, {
 		"data-slot": "switch",
 		"data-size": i,
-		className: e("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", r),
+		className: e("peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", r),
 		...a,
 		children: /* @__PURE__ */ t(n.Thumb, {
 			"data-slot": "switch-thumb",
-			className: e("pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground")
+			className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
 		})
 	});
 }

package/dist/components/ui/table.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
 import { jsx as t } from "react/jsx-runtime";
+import "react";
 //#region src/components/ui/table.tsx
 function n({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
@@ -31,35 +31,35 @@ function i({ className: n, ...r }) {
 function a({ className: n, ...r }) {
 	return /* @__PURE__ */ t("tfoot", {
 		"data-slot": "table-footer",
-		className: e("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", n),
+		className: e("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", n),
 		...r
 	});
 }
 function o({ className: n, ...r }) {
 	return /* @__PURE__ */ t("tr", {
 		"data-slot": "table-row",
-		className: e("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", n),
+		className: e("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", n),
 		...r
 	});
 }
 function s({ className: n, ...r }) {
 	return /* @__PURE__ */ t("th", {
 		"data-slot": "table-head",
-		className: e("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", n),
+		className: e("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", n),
 		...r
 	});
 }
 function c({ className: n, ...r }) {
 	return /* @__PURE__ */ t("td", {
 		"data-slot": "table-cell",
-		className: e("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", n),
+		className: e("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", n),
 		...r
 	});
 }
 function l({ className: n, ...r }) {
 	return /* @__PURE__ */ t("caption", {
 		"data-slot": "table-caption",
-		className: e("text-muted-foreground mt-4 text-sm", n),
+		className: e("mt-4 text-sm text-muted-foreground", n),
 		...r
 	});
 }

package/dist/components/ui/tabs.js

@@ -1,36 +1,59 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
-import { jsx as t } from "react/jsx-runtime";
-import * as n from "@radix-ui/react-tabs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import * as r from "react";
+import { cva as i } from "class-variance-authority";
+import { Tabs as a } from "@base-ui/react/tabs";
 //#region src/components/ui/tabs.tsx
-function r({ className: r, ...i }) {
-	return /* @__PURE__ */ t(n.Root, {
+function o({ className: n, orientation: r = "horizontal", ...i }) {
+	return /* @__PURE__ */ t(a.Root, {
 		"data-slot": "tabs",
-		className: e("flex flex-col gap-2", r),
+		"data-orientation": r,
+		className: e("group/tabs flex gap-2 data-horizontal:flex-col", n),
 		...i
 	});
 }
-function i({ className: r, ...i }) {
-	return /* @__PURE__ */ t(n.List, {
+var s = i("group/tabs-list relative inline-flex items-center justify-center p-1 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
+	variants: { variant: {
+		default: "bg-background/50 border border-border/40 rounded-lg backdrop-blur-md shadow-sm text-muted-foreground",
+		line: "gap-1 bg-transparent text-muted-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function c({ className: r, variant: i = "default", ...o }) {
+	return /* @__PURE__ */ n(a.List, {
 		"data-slot": "tabs-list",
-		className: e("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", r),
-		...i
+		"data-variant": i,
+		className: e(s({ variant: i }), r),
+		...o,
+		children: [/* @__PURE__ */ t(a.Indicator, {
+			className: "absolute rounded-md bg-primary shadow-md transition-all duration-300 ease-[cubic-bezier(0.65,0,0.35,1)]",
+			style: {
+				left: "var(--active-tab-left)",
+				top: "var(--active-tab-top)",
+				width: "var(--active-tab-width)",
+				height: "var(--active-tab-height)"
+			}
+		}), o.children]
 	});
 }
-function a({ className: r, ...i }) {
-	return /* @__PURE__ */ t(n.Trigger, {
-		"data-slot": "tabs-trigger",
-		className: e("data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", r),
-		...i
-	});
-}
-function o({ className: r, ...i }) {
-	return /* @__PURE__ */ t(n.Content, {
+var l = r.forwardRef(({ className: n, children: r, ...i }, o) => /* @__PURE__ */ t(a.Tab, {
+	ref: o,
+	"data-slot": "tabs-trigger",
+	className: e("relative inline-flex flex-1 md:flex-none items-center justify-center gap-1.5 rounded-md px-3 sm:px-6 py-2.5 text-xs sm:text-sm font-semibold font-[family-name:var(--font-sans)] whitespace-nowrap transition-colors duration-300 z-10 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", "text-muted-foreground hover:text-foreground hover:bg-muted/50", "data-active:text-primary-foreground data-active:hover:bg-transparent", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring", n),
+	...i,
+	children: /* @__PURE__ */ t("span", {
+		className: "relative z-20 flex items-center justify-center gap-1.5",
+		children: r
+	})
+}));
+l.displayName = "TabsTrigger";
+function u({ className: n, ...r }) {
+	return /* @__PURE__ */ t(a.Panel, {
 		"data-slot": "tabs-content",
-		className: e("flex-1 outline-none", r),
-		...i
+		className: e("flex-1 text-sm outline-none", n),
+		...r
 	});
 }
 //#endregion
-export { r as Tabs, o as TabsContent, i as TabsList, a as TabsTrigger };
+export { o as Tabs, u as TabsContent, c as TabsList, l as TabsTrigger, s as tabsListVariants };

package/dist/components/ui/textarea.js

@@ -1,11 +1,12 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
 import { jsx as t } from "react/jsx-runtime";
+import "react";
 //#region src/components/ui/textarea.tsx
 function n({ className: n, ...r }) {
 	return /* @__PURE__ */ t("textarea", {
 		"data-slot": "textarea",
-		className: e("border-input placeholder:text-muted-foreground 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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", n),
+		className: e("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", n),
 		...r
 	});
 }

package/dist/components/ui/theme-toggle.js

@@ -1,56 +1,53 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "./button.js";
-import { memo as n, useCallback as r, useEffect as i, useState as a } from "react";
-import { Moon as o, Sun as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useTheme as u } from "next-themes";
+import { Tooltip as n, TooltipContent as r, TooltipTrigger as i } from "./tooltip.js";
+import { Moon as a, Sun as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { memo as l, useCallback as u, useEffect as d, useState as f } from "react";
+import { useTheme as p } from "next-themes";
 //#region src/components/ui/theme-toggle.tsx
-var d = n(function({ className: n, showLabel: d }) {
-	let { theme: f, setTheme: p } = u(), [m, h] = a(!1);
-	return i(() => {
-		h(!0);
-	}, []), /* @__PURE__ */ c("div", {
+var m = l(function({ className: l, showLabel: m }) {
+	let { theme: h, setTheme: g } = p(), [_, v] = f(!1);
+	d(() => {
+		v(!0);
+	}, []);
+	let y = u(() => {
+		g(h === "light" ? "dark" : "light");
+	}, [h, g]), b = () => {
+		if (!_) return /* @__PURE__ */ s(a, { className: "h-4 w-4" });
+		switch (h) {
+			case "light": return /* @__PURE__ */ s(o, { className: "h-4 w-4" });
+			default: return /* @__PURE__ */ s(a, { className: "h-4 w-4" });
+		}
+	}, x = () => {
+		if (!_) return "Alternar tema";
+		switch (h) {
+			case "light": return "Ativar tema escuro";
+			default: return "Ativar tema claro";
+		}
+	};
+	return /* @__PURE__ */ s("div", {
 		className: "relative",
-		children: /* @__PURE__ */ c(t, {
+		children: /* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s(i, { render: /* @__PURE__ */ s(t, {
 			variant: "ghost",
 			size: "sm",
-			onClick: r(() => {
-				p(f === "light" ? "dark" : "light");
-			}, [f, p]),
-			className: e("h-9 p-0 text-primary transition-all duration-300 rounded-lg", "hover:bg-accent/50 active:scale-95", d ? "px-3 w-auto" : "w-9", n),
-			title: (() => {
-				if (!m) return "Mudar para tema claro";
-				switch (f) {
-					case "light": return "Mudar para tema escuro";
-					default: return "Mudar para tema claro";
-				}
-			})(),
-			"aria-label": (() => {
-				if (!m) return "Tema escuro";
-				switch (f) {
-					case "light": return "Tema claro";
-					default: return "Tema escuro";
-				}
-			})(),
-			children: /* @__PURE__ */ l("div", {
-				className: e("flex items-center gap-1.5", !d && "justify-center"),
-				children: [/* @__PURE__ */ c("div", {
+			onClick: y,
+			className: e("h-11 p-0 text-primary transition-all duration-300 rounded-lg md:h-9", "hover:bg-accent/50 active:scale-95", m ? "px-3 w-auto" : "w-11 md:w-9", l),
+			"aria-label": x(),
+			"aria-live": "polite",
+			children: /* @__PURE__ */ c("div", {
+				className: e("flex items-center gap-1.5", !m && "justify-center"),
+				children: [/* @__PURE__ */ s("div", {
 					className: "transition-transform duration-300 hover:rotate-12",
-					children: (() => {
-						if (!m) return /* @__PURE__ */ c(o, { className: "h-4 w-4" });
-						switch (f) {
-							case "light": return /* @__PURE__ */ c(s, { className: "h-4 w-4" });
-							default: return /* @__PURE__ */ c(o, { className: "h-4 w-4" });
-						}
-					})()
-				}), d && /* @__PURE__ */ c("span", {
+					children: b()
+				}), m && /* @__PURE__ */ s("span", {
 					className: "text-sm font-medium hidden lg:inline",
 					children: "Tema"
 				})]
 			})
-		})
+		}) }), /* @__PURE__ */ s(r, { children: x() })] })
 	});
 });
 //#endregion
-export { d as ThemeToggle };
+export { m as ThemeToggle };

package/dist/components/ui/toggle-group.js

@@ -1,44 +1,53 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { toggleVariants as t } from "./toggle.js";
-import * as n from "react";
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
+import * as r from "react";
 import "class-variance-authority";
-import * as i from "@radix-ui/react-toggle-group";
+import { Toggle as i } from "@base-ui/react/toggle";
+import { ToggleGroup as a } from "@base-ui/react/toggle-group";
 //#region src/components/ui/toggle-group.tsx
-var a = n.createContext({
+var o = r.createContext({
 	size: "default",
-	variant: "default"
+	variant: "default",
+	spacing: 2,
+	orientation: "horizontal"
 });
-function o({ className: t, variant: n, size: o, children: s, ...c }) {
-	return /* @__PURE__ */ r(i.Root, {
+function s({ className: t, variant: r, size: i, spacing: s = 2, orientation: c = "horizontal", children: l, ...u }) {
+	return /* @__PURE__ */ n(a, {
 		"data-slot": "toggle-group",
-		"data-variant": n,
-		"data-size": o,
-		className: e("group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs", t),
-		...c,
-		children: /* @__PURE__ */ r(a.Provider, {
+		"data-variant": r,
+		"data-size": i,
+		"data-spacing": s,
+		"data-orientation": c,
+		style: { "--gap": s },
+		className: e("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch", t),
+		...u,
+		children: /* @__PURE__ */ n(o.Provider, {
 			value: {
-				variant: n,
-				size: o
+				variant: r,
+				size: i,
+				spacing: s,
+				orientation: c
 			},
-			children: s
+			children: l
 		})
 	});
 }
-function s({ className: o, children: s, variant: c, size: l, ...u }) {
-	let d = n.useContext(a);
-	return /* @__PURE__ */ r(i.Item, {
+function c({ className: a, children: s, variant: c = "default", size: l = "default", ...u }) {
+	let d = r.useContext(o);
+	return /* @__PURE__ */ n(i, {
 		"data-slot": "toggle-group-item",
 		"data-variant": d.variant || c,
 		"data-size": d.size || l,
-		className: e(t({
+		"data-spacing": d.spacing,
+		className: e("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", t({
 			variant: d.variant || c,
 			size: d.size || l
-		}), "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l", o),
+		}), a),
 		...u,
 		children: s
 	});
 }
 //#endregion
-export { o as ToggleGroup, s as ToggleGroupItem };
+export { s as ToggleGroup, c as ToggleGroupItem };

package/dist/components/ui/toggle.js

@@ -1,20 +1,19 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
 import { jsx as t } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
-import * as r from "@radix-ui/react-toggle";
+import { Toggle as r } from "@base-ui/react/toggle";
 //#region src/components/ui/toggle.tsx
-var i = n("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium cursor-pointer hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent 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,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+var i = n("group/toggle inline-flex items-center justify-center cursor-pointer gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none cursor-pointer hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			default: "bg-transparent",
-			outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+			outline: "border border-input bg-transparent hover:bg-muted"
 		},
 		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"
+			default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
 		}
 	},
 	defaultVariants: {
@@ -22,8 +21,8 @@ var i = n("inline-flex items-center justify-center gap-2 rounded-md text-sm font
 		size: "default"
 	}
 });
-function a({ className: n, variant: a, size: o, ...s }) {
-	return /* @__PURE__ */ t(r.Root, {
+function a({ className: n, variant: a = "default", size: o = "default", ...s }) {
+	return /* @__PURE__ */ t(r, {
 		"data-slot": "toggle",
 		className: e(i({
 			variant: a,