@inspirare/design-system 0.0.23 → 0.0.25

package/dist/components/ui/card.js

@@ -1,32 +1,34 @@
+"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/card.tsx
-function n({ className: n, ...r }) {
+function n({ className: n, size: r = "default", ...i }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card",
-		className: e("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", n),
-		...r
+		"data-size": r,
+		className: e("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground border border-border/50 shadow-sm [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", n),
+		...i
 	});
 }
 function r({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-header",
-		className: e("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", n),
+		className: e("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", n),
 		...r
 	});
 }
 function i({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-title",
-		className: e("leading-none font-semibold", n),
+		className: e("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", n),
 		...r
 	});
 }
 function a({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-description",
-		className: e("text-muted-foreground text-sm", n),
+		className: e("text-sm text-muted-foreground", n),
 		...r
 	});
 }
@@ -40,14 +42,14 @@ function o({ className: n, ...r }) {
 function s({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-content",
-		className: e("px-6", n),
+		className: e("px-(--card-spacing)", n),
 		...r
 	});
 }
 function c({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-footer",
-		className: e("flex items-center px-6 [.border-t]:pt-6", n),
+		className: e("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", n),
 		...r
 	});
 }

package/dist/components/ui/carousel.js

@@ -1,116 +1,111 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "./button.js";
-import * as n from "react";
-import { ArrowLeft as r, ArrowRight as i } from "lucide-react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ChevronLeftIcon as n, ChevronRightIcon as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "react";
 import s from "embla-carousel-react";
 //#region src/components/ui/carousel.tsx
-var c = n.createContext(null);
+var c = o.createContext(null);
 function l() {
-	let e = n.useContext(c);
+	let e = o.useContext(c);
 	if (!e) throw Error("useCarousel must be used within a <Carousel />");
 	return e;
 }
-var u = n.forwardRef(({ orientation: t = "horizontal", opts: r, setApi: i, plugins: o, className: l, children: u, ...d }, f) => {
-	let [p, m] = s({
-		...r,
+function u({ orientation: t = "horizontal", opts: n, setApi: r, plugins: a, className: l, children: u, ...d }) {
+	let [f, p] = s({
+		...n,
 		axis: t === "horizontal" ? "x" : "y"
-	}, o), [h, g] = n.useState(!1), [_, v] = n.useState(!1), y = n.useCallback((e) => {
-		e && (g(e.canScrollPrev()), v(e.canScrollNext()));
-	}, []), b = n.useCallback(() => {
-		m?.scrollPrev();
-	}, [m]), x = n.useCallback(() => {
-		m?.scrollNext();
-	}, [m]), S = n.useCallback((e) => {
-		e.key === "ArrowLeft" ? (e.preventDefault(), b()) : e.key === "ArrowRight" && (e.preventDefault(), x());
-	}, [b, x]);
-	return n.useEffect(() => {
-		!m || !i || i(m);
-	}, [m, i]), n.useEffect(() => {
-		if (m) return y(m), m.on("reInit", y), m.on("select", y), () => {
-			m?.off("select", y);
+	}, a), [m, h] = o.useState(!1), [g, _] = o.useState(!1), v = o.useCallback((e) => {
+		e && (h(e.canScrollPrev()), _(e.canScrollNext()));
+	}, []), y = o.useCallback(() => {
+		p?.scrollPrev();
+	}, [p]), b = o.useCallback(() => {
+		p?.scrollNext();
+	}, [p]), x = o.useCallback((e) => {
+		e.key === "ArrowLeft" ? (e.preventDefault(), y()) : e.key === "ArrowRight" && (e.preventDefault(), b());
+	}, [y, b]);
+	return o.useEffect(() => {
+		!p || !r || r(p);
+	}, [p, r]), o.useEffect(() => {
+		if (p) return v(p), p.on("reInit", v), p.on("select", v), () => {
+			p?.off("select", v);
 		};
-	}, [m, y]), /* @__PURE__ */ a(c.Provider, {
+	}, [p, v]), /* @__PURE__ */ i(c.Provider, {
 		value: {
-			carouselRef: p,
-			api: m,
-			opts: r,
-			orientation: t || (r?.axis === "y" ? "vertical" : "horizontal"),
-			scrollPrev: b,
-			scrollNext: x,
-			canScrollPrev: h,
-			canScrollNext: _
+			carouselRef: f,
+			api: p,
+			opts: n,
+			orientation: t || (n?.axis === "y" ? "vertical" : "horizontal"),
+			scrollPrev: y,
+			scrollNext: b,
+			canScrollPrev: m,
+			canScrollNext: g
 		},
-		children: /* @__PURE__ */ a("div", {
-			ref: f,
-			onKeyDownCapture: S,
+		children: /* @__PURE__ */ i("div", {
+			onKeyDownCapture: x,
 			className: e("relative", l),
 			role: "region",
 			"aria-roledescription": "carousel",
+			"data-slot": "carousel",
 			...d,
 			children: u
 		})
 	});
-});
-u.displayName = "Carousel";
-var d = n.forwardRef(({ className: t, ...n }, r) => {
-	let { carouselRef: i, orientation: o } = l();
-	return /* @__PURE__ */ a("div", {
-		ref: i,
+}
+function d({ className: t, ...n }) {
+	let { carouselRef: r, orientation: a } = l();
+	return /* @__PURE__ */ i("div", {
+		ref: r,
 		className: "overflow-hidden",
-		children: /* @__PURE__ */ a("div", {
-			ref: r,
-			className: e("flex", o === "horizontal" ? "-ml-4" : "-mt-4 flex-col", t),
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ i("div", {
+			className: e("flex", a === "horizontal" ? "-ml-4" : "-mt-4 flex-col", t),
 			...n
 		})
 	});
-});
-d.displayName = "CarouselContent";
-var f = n.forwardRef(({ className: t, ...n }, r) => {
-	let { orientation: i } = l();
-	return /* @__PURE__ */ a("div", {
-		ref: r,
+}
+function f({ className: t, ...n }) {
+	let { orientation: r } = l();
+	return /* @__PURE__ */ i("div", {
 		role: "group",
 		"aria-roledescription": "slide",
-		className: e("min-w-0 shrink-0 grow-0 basis-full", i === "horizontal" ? "pl-4" : "pt-4", t),
+		"data-slot": "carousel-item",
+		className: e("min-w-0 shrink-0 grow-0 basis-full", r === "horizontal" ? "pl-4" : "pt-4", t),
 		...n
 	});
-});
-f.displayName = "CarouselItem";
-var p = n.forwardRef(({ className: n, variant: i = "outline", size: s = "icon", ...c }, u) => {
-	let { orientation: d, scrollPrev: f, canScrollPrev: p } = l();
-	return /* @__PURE__ */ o(t, {
-		ref: u,
-		variant: i,
+}
+function p({ className: r, variant: o = "outline", size: s = "icon-sm", ...c }) {
+	let { orientation: u, scrollPrev: d, canScrollPrev: f } = l();
+	return /* @__PURE__ */ a(t, {
+		"data-slot": "carousel-previous",
+		variant: o,
 		size: s,
-		className: e("absolute  h-8 w-8 rounded-full", d === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", n),
-		disabled: !p,
-		onClick: f,
+		className: e("absolute touch-manipulation rounded-full", u === "horizontal" ? "inset-y-0 -left-12 my-auto" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", r),
+		disabled: !f,
+		onClick: d,
 		...c,
-		children: [/* @__PURE__ */ a(r, { className: "h-4 w-4" }), /* @__PURE__ */ a("span", {
+		children: [/* @__PURE__ */ i(n, {}), /* @__PURE__ */ i("span", {
 			className: "sr-only",
 			children: "Previous slide"
 		})]
 	});
-});
-p.displayName = "CarouselPrevious";
-var m = n.forwardRef(({ className: n, variant: r = "outline", size: s = "icon", ...c }, u) => {
-	let { orientation: d, scrollNext: f, canScrollNext: p } = l();
-	return /* @__PURE__ */ o(t, {
-		ref: u,
-		variant: r,
+}
+function m({ className: n, variant: o = "outline", size: s = "icon-sm", ...c }) {
+	let { orientation: u, scrollNext: d, canScrollNext: f } = l();
+	return /* @__PURE__ */ a(t, {
+		"data-slot": "carousel-next",
+		variant: o,
 		size: s,
-		className: e("absolute h-8 w-8 rounded-full", d === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", n),
-		disabled: !p,
-		onClick: f,
+		className: e("absolute touch-manipulation rounded-full", u === "horizontal" ? "inset-y-0 -right-12 my-auto" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", n),
+		disabled: !f,
+		onClick: d,
 		...c,
-		children: [/* @__PURE__ */ a(i, { className: "h-4 w-4" }), /* @__PURE__ */ a("span", {
+		children: [/* @__PURE__ */ i(r, {}), /* @__PURE__ */ i("span", {
 			className: "sr-only",
 			children: "Next slide"
 		})]
 	});
-});
-m.displayName = "CarouselNext";
+}
 //#endregion
-export { u as Carousel, d as CarouselContent, f as CarouselItem, m as CarouselNext, p as CarouselPrevious };
+export { u as Carousel, d as CarouselContent, f as CarouselItem, m as CarouselNext, p as CarouselPrevious, l as useCarousel };

package/dist/components/ui/chart.js

@@ -1,53 +1,59 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import * as t from "react";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import * as i from "react";
 import * as a from "recharts";
 //#region src/components/ui/chart.tsx
 var o = {
 	light: "",
 	dark: ".dark"
-}, s = t.createContext(null);
-function c() {
-	let e = t.useContext(s);
+}, s = {
+	width: 320,
+	height: 200
+}, c = i.createContext(null);
+function l() {
+	let e = i.useContext(c);
 	if (!e) throw Error("useChart must be used within a <ChartContainer />");
 	return e;
 }
-var l = t.forwardRef(({ id: n, className: o, children: c, config: l, ...d }, f) => {
-	let p = t.useId(), m = `chart-${n || p.replace(/:/g, "")}`;
-	return /* @__PURE__ */ r(s.Provider, {
-		value: { config: l },
-		children: /* @__PURE__ */ i("div", {
-			"data-chart": m,
-			ref: f,
-			className: e("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", o),
-			...d,
-			children: [/* @__PURE__ */ r(u, {
-				id: m,
-				config: l
-			}), /* @__PURE__ */ r(a.ResponsiveContainer, { children: c })]
+function u({ id: t, className: o, children: l, config: u, initialDimension: f = s, ...p }) {
+	let m = i.useId(), h = `chart-${t ?? m.replace(/:/g, "")}`;
+	return /* @__PURE__ */ n(c.Provider, {
+		value: { config: u },
+		children: /* @__PURE__ */ r("div", {
+			"data-slot": "chart",
+			"data-chart": h,
+			className: e("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", o),
+			...p,
+			children: [/* @__PURE__ */ n(d, {
+				id: h,
+				config: u
+			}), /* @__PURE__ */ n(a.ResponsiveContainer, {
+				initialDimension: f,
+				children: l
+			})]
 		})
 	});
-});
-l.displayName = "Chart";
-var u = ({ id: e, config: t }) => {
-	let n = Object.entries(t).filter(([, e]) => e.theme || e.color);
-	return n.length ? /* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: Object.entries(o).map(([t, r]) => `
-${r} [data-chart=${e}] {
-${n.map(([e, n]) => {
-		let r = n.theme?.[t] || n.color;
+}
+var d = ({ id: e, config: t }) => {
+	let r = Object.entries(t).filter(([, e]) => e.theme ?? e.color);
+	return r.length ? /* @__PURE__ */ n("style", { dangerouslySetInnerHTML: { __html: Object.entries(o).map(([t, n]) => `
+${n} [data-chart=${e}] {
+${r.map(([e, n]) => {
+		let r = n.theme?.[t] ?? n.color;
 		return r ? `  --color-${e}: ${r};` : null;
 	}).join("\n")}
 }
 `).join("\n") } }) : null;
-}, d = a.Tooltip, f = t.forwardRef(({ active: a, payload: o, className: s, indicator: l = "dot", hideLabel: u = !1, hideIndicator: d = !1, label: f, labelFormatter: p, labelClassName: m, formatter: g, color: _, nameKey: v, labelKey: y }, b) => {
-	let { config: x } = c(), S = t.useMemo(() => {
+}, f = a.Tooltip;
+function p({ active: a, payload: o, className: s, indicator: c = "dot", hideLabel: u = !1, hideIndicator: d = !1, label: f, labelFormatter: p, labelClassName: m, formatter: h, color: _, nameKey: v, labelKey: y }) {
+	let { config: b } = l(), x = i.useMemo(() => {
 		if (u || !o?.length) return null;
-		let [t] = o, n = h(x, t, `${y || t?.dataKey || t?.name || "value"}`), i = !y && typeof f == "string" ? x[f]?.label || f : n?.label;
-		return p ? /* @__PURE__ */ r("div", {
+		let [t] = o, r = g(b, t, `${y ?? t?.dataKey ?? t?.name ?? "value"}`), i = !y && typeof f == "string" ? b[f]?.label ?? f : r?.label;
+		return p ? /* @__PURE__ */ n("div", {
 			className: e("font-medium", m),
 			children: p(i, o)
-		}) : i ? /* @__PURE__ */ r("div", {
+		}) : i ? /* @__PURE__ */ n("div", {
 			className: e("font-medium", m),
 			children: i
 		}) : null;
@@ -57,72 +63,69 @@ ${n.map(([e, n]) => {
 		o,
 		u,
 		m,
-		x,
+		b,
 		y
 	]);
 	if (!a || !o?.length) return null;
-	let C = o.length === 1 && l !== "dot";
-	return /* @__PURE__ */ i("div", {
-		ref: b,
-		className: e("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", s),
-		children: [C ? null : S, /* @__PURE__ */ r("div", {
+	let S = o.length === 1 && c !== "dot";
+	return /* @__PURE__ */ r("div", {
+		className: e("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", s),
+		children: [S ? null : x, /* @__PURE__ */ n("div", {
 			className: "grid gap-1.5",
-			children: o.filter((e) => e.type !== "none").map((t, a) => {
-				let o = h(x, t, `${v || t.name || t.dataKey || "value"}`), s = _ || t.payload.fill || t.color;
-				return /* @__PURE__ */ r("div", {
-					className: e("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", l === "dot" && "items-center"),
-					children: g && t?.value !== void 0 && t.name ? g(t.value, t.name, t, a, t.payload) : /* @__PURE__ */ i(n, { children: [o?.icon ? /* @__PURE__ */ r(o.icon, {}) : !d && /* @__PURE__ */ r("div", {
-						className: e("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
-							"h-2.5 w-2.5": l === "dot",
-							"w-1": l === "line",
-							"w-0 border-[1.5px] border-dashed bg-transparent": l === "dashed",
-							"my-0.5": C && l === "dashed"
+			children: o.filter((e) => e.type !== "none").map((i, a) => {
+				let o = g(b, i, `${v ?? i.name ?? i.dataKey ?? "value"}`), s = _ ?? i.payload?.fill ?? i.color;
+				return /* @__PURE__ */ n("div", {
+					className: e("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", c === "dot" && "items-center"),
+					children: h && i?.value !== void 0 && i.name ? h(i.value, i.name, i, a, i.payload) : /* @__PURE__ */ r(t, { children: [o?.icon ? /* @__PURE__ */ n(o.icon, {}) : !d && /* @__PURE__ */ n("div", {
+						className: e("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+							"h-2.5 w-2.5": c === "dot",
+							"w-1": c === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": c === "dashed",
+							"my-0.5": S && c === "dashed"
 						}),
 						style: {
 							"--color-bg": s,
 							"--color-border": s
 						}
-					}), /* @__PURE__ */ i("div", {
-						className: e("flex flex-1 justify-between leading-none", C ? "items-end" : "items-center"),
-						children: [/* @__PURE__ */ i("div", {
+					}), /* @__PURE__ */ r("div", {
+						className: e("flex flex-1 justify-between leading-none", S ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ r("div", {
 							className: "grid gap-1.5",
-							children: [C ? S : null, /* @__PURE__ */ r("span", {
+							children: [S ? x : null, /* @__PURE__ */ n("span", {
 								className: "text-muted-foreground",
-								children: o?.label || t.name
+								children: o?.label ?? i.name
 							})]
-						}), t.value && /* @__PURE__ */ r("span", {
-							className: "font-mono font-medium tabular-nums text-foreground",
-							children: t.value.toLocaleString()
+						}), i.value != null && /* @__PURE__ */ n("span", {
+							className: "font-mono font-medium text-foreground tabular-nums",
+							children: typeof i.value == "number" ? i.value.toLocaleString() : String(i.value)
 						})]
 					})] })
-				}, t.dataKey);
+				}, a);
 			})
 		})]
 	});
-});
-f.displayName = "ChartTooltip";
-var p = a.Legend, m = t.forwardRef(({ className: t, hideIcon: n = !1, payload: a, verticalAlign: o = "bottom", nameKey: s }, l) => {
-	let { config: u } = c();
-	return a?.length ? /* @__PURE__ */ r("div", {
-		ref: l,
+}
+var m = a.Legend;
+function h({ className: t, hideIcon: i = !1, payload: a, verticalAlign: o = "bottom", nameKey: s }) {
+	let { config: c } = l();
+	return a?.length ? /* @__PURE__ */ n("div", {
 		className: e("flex items-center justify-center gap-4", o === "top" ? "pb-3" : "pt-3", t),
-		children: a.filter((e) => e.type !== "none").map((t) => {
-			let a = h(u, t, `${s || t.dataKey || "value"}`);
-			return /* @__PURE__ */ i("div", {
+		children: a.filter((e) => e.type !== "none").map((t, a) => {
+			let o = g(c, t, `${s ?? t.dataKey ?? "value"}`);
+			return /* @__PURE__ */ r("div", {
 				className: e("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
-				children: [a?.icon && !n ? /* @__PURE__ */ r(a.icon, {}) : /* @__PURE__ */ r("div", {
+				children: [o?.icon && !i ? /* @__PURE__ */ n(o.icon, {}) : /* @__PURE__ */ n("div", {
 					className: "h-2 w-2 shrink-0 rounded-[2px]",
 					style: { backgroundColor: t.color }
-				}), a?.label]
-			}, t.value);
+				}), o?.label]
+			}, a);
 		})
 	}) : null;
-});
-m.displayName = "ChartLegend";
-function h(e, t, n) {
+}
+function g(e, t, n) {
 	if (typeof t != "object" || !t) return;
 	let r = "payload" in t && typeof t.payload == "object" && t.payload !== null ? t.payload : void 0, i = n;
 	return n in t && typeof t[n] == "string" ? i = t[n] : r && n in r && typeof r[n] == "string" && (i = r[n]), i in e ? e[i] : e[n];
 }
 //#endregion
-export { l as ChartContainer, p as ChartLegend, m as ChartLegendContent, u as ChartStyle, d as ChartTooltip, f as ChartTooltipContent };
+export { u as ChartContainer, m as ChartLegend, h as ChartLegendContent, d as ChartStyle, f as ChartTooltip, p as ChartTooltipContent };

package/dist/components/ui/checkbox.js

@@ -1,19 +1,18 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
 import { CheckIcon as t } from "lucide-react";
 import { jsx as n } from "react/jsx-runtime";
-import { Checkbox as r } from "radix-ui";
+import { Checkbox as r } from "@base-ui/react/checkbox";
 //#region src/components/ui/checkbox.tsx
 function i({ className: i, ...a }) {
 	return /* @__PURE__ */ n(r.Root, {
 		"data-slot": "checkbox",
-		className: e("peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary", i),
+		className: e("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary cursor-pointer dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary cursor-pointer data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary cursor-pointer dark:data-checked:bg-primary", i),
 		...a,
 		children: /* @__PURE__ */ n(r.Indicator, {
 			"data-slot": "checkbox-indicator",
-			className: "grid place-content-center text-current transition-none",
-			children: /* @__PURE__ */ n(t, { className: "size-3.5" })
+			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: /* @__PURE__ */ n(t, {})
 		})
 	});
 }

package/dist/components/ui/collapsible.js

@@ -1,26 +1,24 @@
 "use client";
-import { cn as e } from "../../lib/utils.js";
-import { jsx as t } from "react/jsx-runtime";
-import * as n from "@radix-ui/react-collapsible";
+import { jsx as e } from "react/jsx-runtime";
+import { Collapsible as t } from "@base-ui/react/collapsible";
 //#region src/components/ui/collapsible.tsx
-function r({ ...e }) {
-	return /* @__PURE__ */ t(n.Root, {
+function n({ ...n }) {
+	return /* @__PURE__ */ e(t.Root, {
 		"data-slot": "collapsible",
-		...e
+		...n
 	});
 }
-function i({ className: r, ...i }) {
-	return /* @__PURE__ */ t(n.CollapsibleTrigger, {
+function r({ ...n }) {
+	return /* @__PURE__ */ e(t.Trigger, {
 		"data-slot": "collapsible-trigger",
-		className: e("cursor-pointer", r),
-		...i
+		...n
 	});
 }
-function a({ ...e }) {
-	return /* @__PURE__ */ t(n.CollapsibleContent, {
+function i({ ...n }) {
+	return /* @__PURE__ */ e(t.Panel, {
 		"data-slot": "collapsible-content",
-		...e
+		...n
 	});
 }
 //#endregion
-export { r as Collapsible, a as CollapsibleContent, i as CollapsibleTrigger };
+export { n as Collapsible, i as CollapsibleContent, r as CollapsibleTrigger };