@inspirare/design-system 0.0.22 → 0.0.24

package/dist/components/ui/dropdown-menu.js

@@ -1,124 +1,137 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
-import { CheckIcon as t, ChevronRightIcon as n, CircleIcon as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-dropdown-menu";
+import { CheckIcon as t, ChevronRightIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as a from "react";
+import { Menu as o } from "@base-ui/react/menu";
 //#region src/components/ui/dropdown-menu.tsx
 function s({ ...e }) {
-	return /* @__PURE__ */ i(o.Root, {
+	return /* @__PURE__ */ r(o.Root, {
 		"data-slot": "dropdown-menu",
 		...e
 	});
 }
 function c({ ...e }) {
-	return /* @__PURE__ */ i(o.Portal, {
+	return /* @__PURE__ */ r(o.Portal, {
 		"data-slot": "dropdown-menu-portal",
 		...e
 	});
 }
-function l({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.Trigger, {
-		"data-slot": "dropdown-menu-trigger",
-		className: e("cursor-pointer", t),
-		...n
-	});
-}
-function u({ className: t, sideOffset: n = 4, ...r }) {
-	return /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ i(o.Content, {
+var l = a.forwardRef(({ ...e }, t) => /* @__PURE__ */ r(o.Trigger, {
+	ref: t,
+	"data-slot": "dropdown-menu-trigger",
+	...e
+}));
+l.displayName = "DropdownMenuTrigger";
+var u = a.forwardRef(({ align: t = "start", alignOffset: n = 0, side: i = "bottom", sideOffset: a = 4, className: s, ...c }, l) => /* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ r(o.Positioner, {
+	className: "isolate z-50 outline-none",
+	align: t,
+	alignOffset: n,
+	side: i,
+	sideOffset: a,
+	children: /* @__PURE__ */ r(o.Popup, {
+		ref: l,
 		"data-slot": "dropdown-menu-content",
-		sideOffset: n,
-		className: e("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", t),
-		...r
-	}) });
-}
+		className: e("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", s),
+		...c
+	})
+}) }));
+u.displayName = "DropdownMenuContent";
 function d({ ...e }) {
-	return /* @__PURE__ */ i(o.Group, {
+	return /* @__PURE__ */ r(o.Group, {
 		"data-slot": "dropdown-menu-group",
 		...e
 	});
 }
-function f({ className: t, inset: n, variant: r = "default", ...a }) {
-	return /* @__PURE__ */ i(o.Item, {
-		"data-slot": "dropdown-menu-item",
+function f({ className: t, inset: n, ...i }) {
+	return /* @__PURE__ */ r(o.GroupLabel, {
+		"data-slot": "dropdown-menu-label",
 		"data-inset": n,
-		"data-variant": r,
-		className: e("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
-		...a
-	});
-}
-function p({ className: n, children: r, checked: s, ...c }) {
-	return /* @__PURE__ */ a(o.CheckboxItem, {
-		"data-slot": "dropdown-menu-checkbox-item",
-		className: e("focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", n),
-		checked: s,
-		...c,
-		children: [/* @__PURE__ */ i("span", {
-			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ i(o.ItemIndicator, { children: /* @__PURE__ */ i(t, { className: "size-4" }) })
-		}), r]
+		className: e("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", t),
+		...i
 	});
 }
+var p = a.forwardRef(({ className: t, inset: n, variant: i = "default", ...a }, s) => /* @__PURE__ */ r(o.Item, {
+	ref: s,
+	"data-slot": "dropdown-menu-item",
+	"data-inset": n,
+	"data-variant": i,
+	className: e("group/dropdown-menu-item relative flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", t),
+	...a
+}));
+p.displayName = "DropdownMenuItem";
 function m({ ...e }) {
-	return /* @__PURE__ */ i(o.RadioGroup, {
-		"data-slot": "dropdown-menu-radio-group",
+	return /* @__PURE__ */ r(o.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
 		...e
 	});
 }
-function h({ className: t, children: n, ...s }) {
-	return /* @__PURE__ */ a(o.RadioItem, {
-		"data-slot": "dropdown-menu-radio-item",
-		className: e("focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
-		...s,
-		children: [/* @__PURE__ */ i("span", {
-			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ i(o.ItemIndicator, { children: /* @__PURE__ */ i(r, { className: "size-2 fill-current" }) })
-		}), n]
-	});
-}
-function g({ className: t, inset: n, ...r }) {
-	return /* @__PURE__ */ i(o.Label, {
-		"data-slot": "dropdown-menu-label",
-		"data-inset": n,
-		className: e("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", t),
-		...r
+var h = a.forwardRef(({ className: t, inset: a, children: s, ...c }, l) => /* @__PURE__ */ i(o.SubmenuTrigger, {
+	ref: l,
+	"data-slot": "dropdown-menu-sub-trigger",
+	"data-inset": a,
+	className: e("flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
+	...c,
+	children: [s, /* @__PURE__ */ r(n, { className: "ml-auto" })]
+}));
+h.displayName = "DropdownMenuSubTrigger";
+var g = a.forwardRef(({ align: t = "start", alignOffset: n = -3, side: i = "right", sideOffset: a = 0, className: o, ...s }, c) => /* @__PURE__ */ r(u, {
+	ref: c,
+	"data-slot": "dropdown-menu-sub-content",
+	className: e("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", o),
+	align: t,
+	alignOffset: n,
+	side: i,
+	sideOffset: a,
+	...s
+}));
+g.displayName = "DropdownMenuSubContent";
+var _ = a.forwardRef(({ className: n, children: a, checked: s, inset: c, ...l }, u) => /* @__PURE__ */ i(o.CheckboxItem, {
+	ref: u,
+	"data-slot": "dropdown-menu-checkbox-item",
+	"data-inset": c,
+	className: e("relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", n),
+	checked: s,
+	...l,
+	children: [/* @__PURE__ */ r("span", {
+		className: "pointer-events-none absolute right-2 flex items-center justify-center",
+		"data-slot": "dropdown-menu-checkbox-item-indicator",
+		children: /* @__PURE__ */ r(o.CheckboxItemIndicator, { children: /* @__PURE__ */ r(t, {}) })
+	}), a]
+}));
+_.displayName = "DropdownMenuCheckboxItem";
+function v({ ...e }) {
+	return /* @__PURE__ */ r(o.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...e
 	});
 }
-function _({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.Separator, {
+var y = a.forwardRef(({ className: n, children: a, inset: s, ...c }, l) => /* @__PURE__ */ i(o.RadioItem, {
+	ref: l,
+	"data-slot": "dropdown-menu-radio-item",
+	"data-inset": s,
+	className: e("relative flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", n),
+	...c,
+	children: [/* @__PURE__ */ r("span", {
+		className: "pointer-events-none absolute right-2 flex items-center justify-center",
+		"data-slot": "dropdown-menu-radio-item-indicator",
+		children: /* @__PURE__ */ r(o.RadioItemIndicator, { children: /* @__PURE__ */ r(t, {}) })
+	}), a]
+}));
+y.displayName = "DropdownMenuRadioItem";
+function b({ className: t, ...n }) {
+	return /* @__PURE__ */ r(o.Separator, {
 		"data-slot": "dropdown-menu-separator",
-		className: e("bg-border -mx-1 my-1 h-px", t),
+		className: e("-mx-1 my-1 h-px bg-border", t),
 		...n
 	});
 }
-function v({ className: t, ...n }) {
-	return /* @__PURE__ */ i("span", {
-		"data-slot": "dropdown-menu-shortcut",
-		className: e("text-muted-foreground ml-auto text-xs tracking-widest", t),
-		...n
-	});
-}
-function y({ ...e }) {
-	return /* @__PURE__ */ i(o.Sub, {
-		"data-slot": "dropdown-menu-sub",
-		...e
-	});
-}
-function b({ className: t, inset: r, children: s, ...c }) {
-	return /* @__PURE__ */ a(o.SubTrigger, {
-		"data-slot": "dropdown-menu-sub-trigger",
-		"data-inset": r,
-		className: e("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", t),
-		...c,
-		children: [s, /* @__PURE__ */ i(n, { className: "ml-auto size-4" })]
-	});
-}
 function x({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.SubContent, {
-		"data-slot": "dropdown-menu-sub-content",
-		className: e("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", t),
+	return /* @__PURE__ */ r("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: e("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", t),
 		...n
 	});
 }
 //#endregion
-export { s as DropdownMenu, p as DropdownMenuCheckboxItem, u as DropdownMenuContent, d as DropdownMenuGroup, f as DropdownMenuItem, g as DropdownMenuLabel, c as DropdownMenuPortal, m as DropdownMenuRadioGroup, h as DropdownMenuRadioItem, _ as DropdownMenuSeparator, v as DropdownMenuShortcut, y as DropdownMenuSub, x as DropdownMenuSubContent, b as DropdownMenuSubTrigger, l as DropdownMenuTrigger };
+export { s as DropdownMenu, _ as DropdownMenuCheckboxItem, u as DropdownMenuContent, d as DropdownMenuGroup, p as DropdownMenuItem, f as DropdownMenuLabel, c as DropdownMenuPortal, v as DropdownMenuRadioGroup, y as DropdownMenuRadioItem, b as DropdownMenuSeparator, x as DropdownMenuShortcut, m as DropdownMenuSub, g as DropdownMenuSubContent, h as DropdownMenuSubTrigger, l as DropdownMenuTrigger };

package/dist/components/ui/empty.js

@@ -1,3 +1,4 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
 import { jsx as t } from "react/jsx-runtime";
 import { cva as n } from "class-variance-authority";
@@ -5,21 +6,21 @@ import { cva as n } from "class-variance-authority";
 function r({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "empty",
-		className: e("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12", n),
+		className: e("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", n),
 		...r
 	});
 }
 function i({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "empty-header",
-		className: e("flex max-w-sm flex-col items-center gap-2 text-center", n),
+		className: e("flex max-w-sm flex-col items-center gap-2", n),
 		...r
 	});
 }
 var a = n("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: { variant: {
 		default: "bg-transparent",
-		icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+		icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -37,21 +38,21 @@ function o({ className: n, variant: r = "default", ...i }) {
 function s({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "empty-title",
-		className: e("text-lg font-medium tracking-tight", n),
+		className: e("font-heading text-sm font-medium tracking-tight", n),
 		...r
 	});
 }
 function c({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "empty-description",
-		className: e("text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4", n),
+		className: e("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", n),
 		...r
 	});
 }
 function l({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "empty-content",
-		className: e("flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm", n),
+		className: e("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", n),
 		...r
 	});
 }

package/dist/components/ui/field.js

@@ -2,107 +2,104 @@
 import { cn as e } from "../../lib/utils.js";
 import { Separator as t } from "./separator.js";
 import { Label as n } from "./label.js";
-import { useMemo as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useMemo as a } from "react";
 import { cva as o } from "class-variance-authority";
 //#region src/components/ui/field.tsx
 function s({ className: t, ...n }) {
-	return /* @__PURE__ */ i("fieldset", {
+	return /* @__PURE__ */ r("fieldset", {
 		"data-slot": "field-set",
-		className: e("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", t),
+		className: e("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", t),
 		...n
 	});
 }
-function c({ className: t, variant: n = "legend", ...r }) {
-	return /* @__PURE__ */ i("legend", {
+function c({ className: t, variant: n = "legend", ...i }) {
+	return /* @__PURE__ */ r("legend", {
 		"data-slot": "field-legend",
 		"data-variant": n,
-		className: e("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", t),
-		...r
+		className: e("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", t),
+		...i
 	});
 }
 function l({ className: t, ...n }) {
-	return /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ r("div", {
 		"data-slot": "field-group",
-		className: e("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", t),
+		className: e("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", t),
 		...n
 	});
 }
-var u = o("group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
+var u = o("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
 	variants: { orientation: {
-		vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
-		horizontal: [
-			"flex-row items-center",
-			"[&>[data-slot=field-label]]:flex-auto",
-			"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start"
-		],
-		responsive: [
-			"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-			"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-			"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
-		]
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
 	} },
 	defaultVariants: { orientation: "vertical" }
 });
-function d({ className: t, orientation: n = "vertical", ...r }) {
-	return /* @__PURE__ */ i("div", {
+function d({ className: t, orientation: n = "vertical", ...i }) {
+	return /* @__PURE__ */ r("div", {
 		role: "group",
 		"data-slot": "field",
 		"data-orientation": n,
 		className: e(u({ orientation: n }), t),
-		...r
+		...i
 	});
 }
 function f({ className: t, ...n }) {
-	return /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ r("div", {
 		"data-slot": "field-content",
-		className: e("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", t),
+		className: e("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", t),
 		...n
 	});
 }
-function p({ className: t, ...r }) {
-	return /* @__PURE__ */ i(n, {
+function p({ className: t, ...i }) {
+	return /* @__PURE__ */ r(n, {
 		"data-slot": "field-label",
-		className: e("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4", "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10", t),
-		...r
+		className: e("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", t),
+		...i
 	});
 }
 function m({ className: t, ...n }) {
-	return /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ r("div", {
 		"data-slot": "field-label",
-		className: e("flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50", t),
+		className: e("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", t),
 		...n
 	});
 }
 function h({ className: t, ...n }) {
-	return /* @__PURE__ */ i("p", {
+	return /* @__PURE__ */ r("p", {
 		"data-slot": "field-description",
-		className: e("text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance", "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", t),
+		className: e("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", t),
 		...n
 	});
 }
-function g({ children: n, className: r, ...o }) {
-	return /* @__PURE__ */ a("div", {
+function g({ children: n, className: a, ...o }) {
+	return /* @__PURE__ */ i("div", {
 		"data-slot": "field-separator",
 		"data-content": !!n,
-		className: e("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", r),
+		className: e("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", a),
 		...o,
-		children: [/* @__PURE__ */ i(t, { className: "absolute inset-0 top-1/2" }), n && /* @__PURE__ */ i("span", {
-			className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+		children: [/* @__PURE__ */ r(t, { className: "absolute inset-0 top-1/2" }), n && /* @__PURE__ */ r("span", {
+			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
 			"data-slot": "field-separator-content",
 			children: n
 		})]
 	});
 }
-function _({ className: t, children: n, errors: a, ...o }) {
-	let s = r(() => n || (a ? a?.length === 1 && a[0]?.message ? a[0].message : /* @__PURE__ */ i("ul", {
-		className: "ml-4 flex list-disc flex-col gap-1",
-		children: a.map((e, t) => e?.message && /* @__PURE__ */ i("li", { children: e.message }, t))
-	}) : null), [n, a]);
-	return s ? /* @__PURE__ */ i("div", {
+function _({ className: t, children: n, errors: i, ...o }) {
+	let s = a(() => {
+		if (n) return n;
+		if (!i?.length) return null;
+		let e = [...new Map(i.map((e) => [e?.message, e])).values()];
+		return e?.length == 1 ? e[0]?.message : /* @__PURE__ */ r("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: e.map((e, t) => e?.message && /* @__PURE__ */ r("li", { children: e.message }, t))
+		});
+	}, [n, i]);
+	return s ? /* @__PURE__ */ r("div", {
 		role: "alert",
 		"data-slot": "field-error",
-		className: e("text-destructive text-sm font-normal", t),
+		className: e("text-sm font-normal text-destructive", t),
 		...o,
 		children: s
 	}) : null;

package/dist/components/ui/form.js

@@ -1,17 +1,16 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { Label as t } from "./label.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 { Slot as i } from "@radix-ui/react-slot";
-import "@radix-ui/react-label";
 import { Controller as a, FormProvider as o, useFormContext as s, useFormState as c } from "react-hook-form";
 //#region src/components/ui/form.tsx
-var l = o, u = n.createContext({}), d = ({ ...e }) => /* @__PURE__ */ r(u.Provider, {
+var l = o, u = r.createContext({}), d = ({ ...e }) => /* @__PURE__ */ n(u.Provider, {
 	value: { name: e.name },
-	children: /* @__PURE__ */ r(a, { ...e })
+	children: /* @__PURE__ */ n(a, { ...e })
 }), f = () => {
-	let e = n.useContext(u), t = n.useContext(p), { getFieldState: r } = s(), i = c({ name: e.name }), a = r(e.name, i);
+	let e = r.useContext(u), t = r.useContext(p), { getFieldState: n } = s(), i = c({ name: e.name }), a = n(e.name, i);
 	if (!e) throw Error("useFormField should be used within <FormField>");
 	let { id: o } = t;
 	return {
@@ -22,54 +21,54 @@ var l = o, u = n.createContext({}), d = ({ ...e }) => /* @__PURE__ */ r(u.Provid
 		formMessageId: `${o}-form-item-message`,
 		...a
 	};
-}, p = n.createContext({});
+}, p = r.createContext({});
 function m({ className: t, ...i }) {
-	let a = n.useId();
-	return /* @__PURE__ */ r(p.Provider, {
+	let a = r.useId();
+	return /* @__PURE__ */ n(p.Provider, {
 		value: { id: a },
-		children: /* @__PURE__ */ r("div", {
+		children: /* @__PURE__ */ n("div", {
 			"data-slot": "form-item",
 			className: e("grid gap-2", t),
 			...i
 		})
 	});
 }
-function h({ className: n, ...i }) {
+function h({ className: r, ...i }) {
 	let { error: a, formItemId: o } = f();
-	return /* @__PURE__ */ r(t, {
+	return /* @__PURE__ */ n(t, {
 		"data-slot": "form-label",
 		"data-error": !!a,
-		className: e("data-[error=true]:text-destructive", n),
+		className: e("data-[error=true]:text-destructive", r),
 		htmlFor: o,
 		...i
 	});
 }
 function g({ ...e }) {
-	let { error: t, formItemId: n, formDescriptionId: a, formMessageId: o } = f();
-	return /* @__PURE__ */ r(i, {
+	let { error: t, formItemId: r, formDescriptionId: a, formMessageId: o } = f();
+	return /* @__PURE__ */ n(i, {
 		"data-slot": "form-control",
-		id: n,
+		id: r,
 		"aria-describedby": t ? `${a} ${o}` : `${a}`,
 		"aria-invalid": !!t,
 		...e
 	});
 }
-function _({ className: t, ...n }) {
+function _({ className: t, ...r }) {
 	let { formDescriptionId: i } = f();
-	return /* @__PURE__ */ r("p", {
+	return /* @__PURE__ */ n("p", {
 		"data-slot": "form-description",
 		id: i,
 		className: e("text-muted-foreground text-sm", t),
-		...n
+		...r
 	});
 }
-function v({ className: t, ...n }) {
-	let { error: i, formMessageId: a } = f(), o = i ? String(i?.message ?? "") : n.children;
-	return o ? /* @__PURE__ */ r("p", {
+function v({ className: t, ...r }) {
+	let { error: i, formMessageId: a } = f(), o = i ? String(i?.message ?? "") : r.children;
+	return o ? /* @__PURE__ */ n("p", {
 		"data-slot": "form-message",
 		id: a,
 		className: e("text-destructive text-sm", t),
-		...n,
+		...r,
 		children: o
 	}) : null;
 }

package/dist/components/ui/hover-card.js

@@ -1,8 +1,7 @@
 "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-hover-card";
+import { PreviewCard as n } from "@base-ui/react/preview-card";
 //#region src/components/ui/hover-card.tsx
 function r({ ...e }) {
 	return /* @__PURE__ */ t(n.Root, {
@@ -10,22 +9,26 @@ function r({ ...e }) {
 		...e
 	});
 }
-function i({ className: r, ...i }) {
+function i({ ...e }) {
 	return /* @__PURE__ */ t(n.Trigger, {
 		"data-slot": "hover-card-trigger",
-		className: e("cursor-pointer", r),
-		...i
+		...e
 	});
 }
-function a({ className: r, align: i = "center", sideOffset: a = 4, ...o }) {
+function a({ className: r, side: i = "bottom", sideOffset: a = 4, align: o = "center", alignOffset: s = 4, ...c }) {
 	return /* @__PURE__ */ t(n.Portal, {
 		"data-slot": "hover-card-portal",
-		children: /* @__PURE__ */ t(n.Content, {
-			"data-slot": "hover-card-content",
-			align: i,
+		children: /* @__PURE__ */ t(n.Positioner, {
+			align: o,
+			alignOffset: s,
+			side: i,
 			sideOffset: a,
-			className: e("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", r),
-			...o
+			className: "isolate z-50",
+			children: /* @__PURE__ */ t(n.Popup, {
+				"data-slot": "hover-card-content",
+				className: e("z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", r),
+				...c
+			})
 		})
 	});
 }