@inspirare/design-system 0.0.23 → 0.0.25

package/dist/components/ui/select.js

@@ -1,96 +1,156 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
 import { CheckIcon as t, ChevronDownIcon as n, ChevronUpIcon as r } from "lucide-react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-select";
+import * as o from "react";
+import { Select as s } from "@base-ui/react/select";
 //#region src/components/ui/select.tsx
-function s({ ...e }) {
-	return /* @__PURE__ */ i(o.Root, {
-		"data-slot": "select",
-		...e
+var c = o.createContext(null);
+function l({ children: e, ...t }) {
+	let [n, r] = o.useState({}), a = {
+		...o.useMemo(() => {
+			let t = {}, n = (e) => {
+				o.Children.forEach(e, (e) => {
+					if (o.isValidElement(e)) {
+						if (e.props && e.props.value !== void 0 && e.props.children) {
+							let n = "";
+							o.Children.forEach(e.props.children, (e) => {
+								(typeof e == "string" || typeof e == "number") && (n += e);
+							}), n && (t[e.props.value] = n);
+						}
+						e.props && e.props.children && n(e.props.children);
+					}
+				});
+			};
+			return n(e), t;
+		}, [e]),
+		...n
+	}, l = o.useCallback((e, t) => {
+		r((n) => n[e] === t ? n : {
+			...n,
+			[e]: t
+		});
+	}, []), u = o.useCallback((e) => a[e], [a]);
+	return /* @__PURE__ */ i(c.Provider, {
+		value: {
+			registerLabel: l,
+			getLabel: u
+		},
+		children: /* @__PURE__ */ i(s.Root, {
+			...t,
+			children: e
+		})
 	});
 }
-function c({ ...e }) {
-	return /* @__PURE__ */ i(o.Group, {
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ i(s.Group, {
 		"data-slot": "select-group",
-		...e
+		className: e("scroll-my-1 p-1", t),
+		...n
 	});
 }
-function l({ ...e }) {
-	return /* @__PURE__ */ i(o.Value, {
+function d({ className: t, children: n, ...r }) {
+	let a = o.useContext(c);
+	return /* @__PURE__ */ i(s.Value, {
 		"data-slot": "select-value",
-		...e
+		className: e("flex flex-1 text-left", t),
+		...r,
+		children: n || ((e) => {
+			if (!e) return null;
+			if (a) {
+				if (Array.isArray(e)) return e.map((e) => a.getLabel(e) || e).join(", ");
+				let t = a.getLabel(e);
+				if (t) return t;
+			}
+			return e;
+		})
 	});
 }
-function u({ className: t, size: r = "default", children: s, ...c }) {
-	return /* @__PURE__ */ a(o.Trigger, {
+function f({ className: t, size: r = "default", children: o, ...c }) {
+	return /* @__PURE__ */ a(s.Trigger, {
 		"data-slot": "select-trigger",
 		"data-size": r,
-		className: e("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]: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 dark:hover:bg-input/50 flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
+		className: e("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none 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 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
 		...c,
-		children: [s, /* @__PURE__ */ i(o.Icon, {
-			asChild: !0,
-			children: /* @__PURE__ */ i(n, { className: "size-4 opacity-50" })
-		})]
+		children: [o, /* @__PURE__ */ i(s.Icon, { render: /* @__PURE__ */ i(n, { className: "pointer-events-none size-4 text-muted-foreground" }) })]
 	});
 }
-function d({ className: t, children: n, position: r = "popper", ...s }) {
-	return /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ a(o.Content, {
-		"data-slot": "select-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", t),
-		position: r,
-		...s,
-		children: [
-			/* @__PURE__ */ i(h, {}),
-			/* @__PURE__ */ i(o.Viewport, {
-				className: e("p-1", r === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
-				children: n
-			}),
-			/* @__PURE__ */ i(g, {})
-		]
+function p({ className: t, children: n, side: r = "bottom", sideOffset: o = 4, align: c = "center", alignOffset: l = 0, alignItemWithTrigger: u = !0, ...d }) {
+	return /* @__PURE__ */ i(s.Portal, { children: /* @__PURE__ */ i(s.Positioner, {
+		side: r,
+		sideOffset: o,
+		align: c,
+		alignOffset: l,
+		alignItemWithTrigger: u,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ a(s.Popup, {
+			"data-slot": "select-content",
+			"data-align-trigger": u,
+			className: e("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-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:fade-out-0 data-closed:zoom-out-95", t),
+			...d,
+			children: [
+				/* @__PURE__ */ i(_, {}),
+				/* @__PURE__ */ i(s.List, { children: n }),
+				/* @__PURE__ */ i(v, {})
+			]
+		})
 	}) });
 }
-function f({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.Label, {
+function m({ className: t, ...n }) {
+	return /* @__PURE__ */ i(s.GroupLabel, {
 		"data-slot": "select-label",
-		className: e("text-muted-foreground px-2 py-1.5 text-xs", t),
+		className: e("px-1.5 py-1 text-xs text-muted-foreground", t),
 		...n
 	});
 }
-function p({ className: n, children: r, ...s }) {
-	return /* @__PURE__ */ a(o.Item, {
+function h({ className: n, children: r, value: l, ...u }) {
+	let d = o.useContext(c), f = o.useRef(null);
+	return o.useEffect(() => {
+		if (l !== void 0 && f.current && d) {
+			let e = f.current.textContent;
+			e && d.registerLabel(l, e.trim());
+		}
+	}, [
+		l,
+		d,
+		r
+	]), /* @__PURE__ */ a(s.Item, {
+		value: l,
 		"data-slot": "select-item",
-		className: e("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", n),
-		...s,
-		children: [/* @__PURE__ */ i("span", {
-			className: "absolute right-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ i(o.ItemIndicator, { children: /* @__PURE__ */ i(t, { className: "size-4" }) })
-		}), /* @__PURE__ */ i(o.ItemText, { children: r })]
+		className: e("relative flex w-full 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 not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", n),
+		...u,
+		children: [/* @__PURE__ */ i(s.ItemText, {
+			ref: f,
+			className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
+			children: r
+		}), /* @__PURE__ */ i(s.ItemIndicator, {
+			render: /* @__PURE__ */ i("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ i(t, { className: "pointer-events-none" })
+		})]
 	});
 }
-function m({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.Separator, {
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ i(s.Separator, {
 		"data-slot": "select-separator",
-		className: e("bg-border pointer-events-none -mx-1 my-1 h-px", t),
+		className: e("pointer-events-none -mx-1 my-1 h-px bg-border", t),
 		...n
 	});
 }
-function h({ className: t, ...n }) {
-	return /* @__PURE__ */ i(o.ScrollUpButton, {
+function _({ className: t, ...n }) {
+	return /* @__PURE__ */ i(s.ScrollUpArrow, {
 		"data-slot": "select-scroll-up-button",
-		className: e("flex cursor-pointer items-center justify-center py-1", t),
+		className: e("top-0 z-10 flex w-full cursor-pointer items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", t),
 		...n,
-		children: /* @__PURE__ */ i(r, { className: "size-4" })
+		children: /* @__PURE__ */ i(r, {})
 	});
 }
-function g({ className: t, ...r }) {
-	return /* @__PURE__ */ i(o.ScrollDownButton, {
+function v({ className: t, ...r }) {
+	return /* @__PURE__ */ i(s.ScrollDownArrow, {
 		"data-slot": "select-scroll-down-button",
-		className: e("flex cursor-pointer items-center justify-center py-1", t),
+		className: e("bottom-0 z-10 flex w-full cursor-pointer items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", t),
 		...r,
-		children: /* @__PURE__ */ i(n, { className: "size-4" })
+		children: /* @__PURE__ */ i(n, {})
 	});
 }
 //#endregion
-export { s as Select, d as SelectContent, c as SelectGroup, p as SelectItem, f as SelectLabel, g as SelectScrollDownButton, h as SelectScrollUpButton, m as SelectSeparator, u as SelectTrigger, l as SelectValue };
+export { l as Select, p as SelectContent, u as SelectGroup, h as SelectItem, m as SelectLabel, v as SelectScrollDownButton, _ as SelectScrollUpButton, g as SelectSeparator, f as SelectTrigger, d as SelectValue };

package/dist/components/ui/separator.js

@@ -1,16 +1,14 @@
 "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-separator";
+import { Separator as n } from "@base-ui/react/separator";
 //#region src/components/ui/separator.tsx
-function r({ className: r, orientation: i = "horizontal", decorative: a = !0, ...o }) {
-	return /* @__PURE__ */ t(n.Root, {
+function r({ className: r, orientation: i = "horizontal", ...a }) {
+	return /* @__PURE__ */ t(n, {
 		"data-slot": "separator",
-		decorative: a,
 		orientation: i,
-		className: e("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", r),
-		...o
+		className: e("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", r),
+		...a
 	});
 }
 //#endregion

package/dist/components/ui/sheet.js

@@ -1,84 +1,89 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "./button.js";
+import { XIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import "react";
-import { XIcon as t } from "lucide-react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import * as i from "@radix-ui/react-dialog";
+import { Dialog as a } from "@base-ui/react/dialog";
 //#region src/components/ui/sheet.tsx
-function a({ ...e }) {
-	return /* @__PURE__ */ n(i.Root, {
+function o({ ...e }) {
+	return /* @__PURE__ */ r(a.Root, {
 		"data-slot": "sheet",
 		...e
 	});
 }
-function o({ className: t, ...r }) {
-	return /* @__PURE__ */ n(i.Trigger, {
+function s({ ...e }) {
+	return /* @__PURE__ */ r(a.Trigger, {
 		"data-slot": "sheet-trigger",
-		className: e("cursor-pointer", t),
-		...r
+		...e
 	});
 }
-function s({ className: t, ...r }) {
-	return /* @__PURE__ */ n(i.Close, {
+function c({ ...e }) {
+	return /* @__PURE__ */ r(a.Close, {
 		"data-slot": "sheet-close",
-		className: e("cursor-pointer", t),
-		...r
+		...e
 	});
 }
-function c({ ...e }) {
-	return /* @__PURE__ */ n(i.Portal, {
+function l({ ...e }) {
+	return /* @__PURE__ */ r(a.Portal, {
 		"data-slot": "sheet-portal",
 		...e
 	});
 }
-function l({ className: t, ...r }) {
-	return /* @__PURE__ */ n(i.Overlay, {
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ r(a.Backdrop, {
 		"data-slot": "sheet-overlay",
-		className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", t),
-		...r
+		className: e("fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", t),
+		...n
 	});
 }
-function u({ className: a, children: o, side: s = "right", ...u }) {
-	return /* @__PURE__ */ r(c, { children: [/* @__PURE__ */ n(l, {}), /* @__PURE__ */ r(i.Content, {
+function d({ className: o, children: s, side: c = "right", showCloseButton: d = !0, ...f }) {
+	return /* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(u, {}), /* @__PURE__ */ i(a.Popup, {
 		"data-slot": "sheet-content",
-		className: e("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", s === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", s === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", s === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", s === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", a),
-		...u,
-		children: [o, /* @__PURE__ */ r(i.Close, {
-			className: "ring-offset-background cursor-pointer focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
-			children: [/* @__PURE__ */ n(t, { className: "size-4" }), /* @__PURE__ */ n("span", {
+		"data-side": c,
+		className: e("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", o),
+		...f,
+		children: [s, d && /* @__PURE__ */ i(a.Close, {
+			"data-slot": "sheet-close",
+			render: /* @__PURE__ */ r(t, {
+				variant: "ghost",
+				className: "absolute top-3 right-3",
+				size: "icon-sm"
+			}),
+			children: [/* @__PURE__ */ r(n, {}), /* @__PURE__ */ r("span", {
 				className: "sr-only",
 				children: "Close"
 			})]
 		})]
 	})] });
 }
-function d({ className: t, ...r }) {
-	return /* @__PURE__ */ n("div", {
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
 		"data-slot": "sheet-header",
-		className: e("flex flex-col gap-1.5 p-4", t),
-		...r
+		className: e("flex flex-col gap-0.5 p-4", t),
+		...n
 	});
 }
-function f({ className: t, ...r }) {
-	return /* @__PURE__ */ n("div", {
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
 		"data-slot": "sheet-footer",
 		className: e("mt-auto flex flex-col gap-2 p-4", t),
-		...r
+		...n
 	});
 }
-function p({ className: t, ...r }) {
-	return /* @__PURE__ */ n(i.Title, {
+function m({ className: t, ...n }) {
+	return /* @__PURE__ */ r(a.Title, {
 		"data-slot": "sheet-title",
-		className: e("text-foreground font-semibold", t),
-		...r
+		className: e("font-heading text-base font-medium text-foreground", t),
+		...n
 	});
 }
-function m({ className: t, ...r }) {
-	return /* @__PURE__ */ n(i.Description, {
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ r(a.Description, {
 		"data-slot": "sheet-description",
-		className: e("text-muted-foreground text-sm", t),
-		...r
+		className: e("text-sm text-muted-foreground", t),
+		...n
 	});
 }
 //#endregion
-export { a as Sheet, s as SheetClose, u as SheetContent, m as SheetDescription, f as SheetFooter, d as SheetHeader, p as SheetTitle, o as SheetTrigger };
+export { o as Sheet, c as SheetClose, d as SheetContent, h as SheetDescription, p as SheetFooter, f as SheetHeader, m as SheetTitle, s as SheetTrigger };