@inspirare/design-system 0.0.22 → 0.0.24

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

@@ -1,72 +1,133 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import * as t from "react";
-import { Check as n, ChevronRight as r, Circle as i } from "lucide-react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import * as s from "@radix-ui/react-context-menu";
+import { CheckIcon as t, ChevronRightIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import "react";
+import { ContextMenu as a } from "@base-ui/react/context-menu";
 //#region src/components/ui/context-menu.tsx
-var c = s.Root, l = s.Trigger, u = s.Group, d = s.Portal, f = s.Sub, p = s.RadioGroup, m = t.forwardRef(({ className: t, inset: n, children: i, ...c }, l) => /* @__PURE__ */ o(s.SubTrigger, {
-	ref: l,
-	className: e("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", n && "pl-8", t),
-	...c,
-	children: [i, /* @__PURE__ */ a(r, { className: "ml-auto h-4 w-4" })]
-}));
-m.displayName = s.SubTrigger.displayName;
-var h = t.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(s.SubContent, {
-	ref: r,
-	className: e("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-context-menu-content-transform-origin]", t),
-	...n
-}));
-h.displayName = s.SubContent.displayName;
-var g = t.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(s.Portal, { children: /* @__PURE__ */ a(s.Content, {
-	ref: r,
-	className: e("z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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 origin-[--radix-context-menu-content-transform-origin]", t),
-	...n
-}) }));
-g.displayName = s.Content.displayName;
-var _ = t.forwardRef(({ className: t, inset: n, ...r }, i) => /* @__PURE__ */ a(s.Item, {
-	ref: i,
-	className: e("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", n && "pl-8", t),
-	...r
-}));
-_.displayName = s.Item.displayName;
-var v = t.forwardRef(({ className: t, children: r, checked: i, ...c }, l) => /* @__PURE__ */ o(s.CheckboxItem, {
-	ref: l,
-	className: e("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", t),
-	checked: i,
-	...c,
-	children: [/* @__PURE__ */ a("span", {
-		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-		children: /* @__PURE__ */ a(s.ItemIndicator, { children: /* @__PURE__ */ a(n, { className: "h-4 w-4" }) })
-	}), r]
-}));
-v.displayName = s.CheckboxItem.displayName;
-var y = t.forwardRef(({ className: t, children: n, ...r }, c) => /* @__PURE__ */ o(s.RadioItem, {
-	ref: c,
-	className: e("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", t),
-	...r,
-	children: [/* @__PURE__ */ a("span", {
-		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-		children: /* @__PURE__ */ a(s.ItemIndicator, { children: /* @__PURE__ */ a(i, { className: "h-2 w-2 fill-current" }) })
-	}), n]
-}));
-y.displayName = s.RadioItem.displayName;
-var b = t.forwardRef(({ className: t, inset: n, ...r }, i) => /* @__PURE__ */ a(s.Label, {
-	ref: i,
-	className: e("px-2 py-1.5 text-sm font-semibold text-foreground", n && "pl-8", t),
-	...r
-}));
-b.displayName = s.Label.displayName;
-var x = t.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(s.Separator, {
-	ref: r,
-	className: e("-mx-1 my-1 h-px bg-border", t),
-	...n
-}));
-x.displayName = s.Separator.displayName;
-var S = ({ className: t, ...n }) => /* @__PURE__ */ a("span", {
-	className: e("ml-auto text-xs tracking-widest text-muted-foreground", t),
-	...n
-});
-S.displayName = "ContextMenuShortcut";
+function o({ ...e }) {
+	return /* @__PURE__ */ r(a.Root, {
+		"data-slot": "context-menu",
+		...e
+	});
+}
+function s({ ...e }) {
+	return /* @__PURE__ */ r(a.Portal, {
+		"data-slot": "context-menu-portal",
+		...e
+	});
+}
+function c({ className: t, ...n }) {
+	return /* @__PURE__ */ r(a.Trigger, {
+		"data-slot": "context-menu-trigger",
+		className: e("select-none", t),
+		...n
+	});
+}
+function l({ className: t, align: n = "start", alignOffset: i = 4, side: o = "right", sideOffset: s = 0, ...c }) {
+	return /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ r(a.Positioner, {
+		className: "isolate z-50 outline-none",
+		align: n,
+		alignOffset: i,
+		side: o,
+		sideOffset: s,
+		children: /* @__PURE__ */ r(a.Popup, {
+			"data-slot": "context-menu-content",
+			className: e("z-50 max-h-(--available-height) min-w-36 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:fade-out-0 data-closed:zoom-out-95", t),
+			...c
+		})
+	}) });
+}
+function u({ ...e }) {
+	return /* @__PURE__ */ r(a.Group, {
+		"data-slot": "context-menu-group",
+		...e
+	});
+}
+function d({ className: t, inset: n, ...i }) {
+	return /* @__PURE__ */ r(a.GroupLabel, {
+		"data-slot": "context-menu-label",
+		"data-inset": n,
+		className: e("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", t),
+		...i
+	});
+}
+function f({ className: t, inset: n, variant: i = "default", ...o }) {
+	return /* @__PURE__ */ r(a.Item, {
+		"data-slot": "context-menu-item",
+		"data-inset": n,
+		"data-variant": i,
+		className: e("group/context-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 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 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", t),
+		...o
+	});
+}
+function p({ ...e }) {
+	return /* @__PURE__ */ r(a.SubmenuRoot, {
+		"data-slot": "context-menu-sub",
+		...e
+	});
+}
+function m({ className: t, inset: o, children: s, ...c }) {
+	return /* @__PURE__ */ i(a.SubmenuTrigger, {
+		"data-slot": "context-menu-sub-trigger",
+		"data-inset": o,
+		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 data-inset:pl-7 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" })]
+	});
+}
+function h({ ...e }) {
+	return /* @__PURE__ */ r(l, {
+		"data-slot": "context-menu-sub-content",
+		className: "shadow-lg",
+		side: "right",
+		...e
+	});
+}
+function g({ className: n, children: o, checked: s, inset: c, ...l }) {
+	return /* @__PURE__ */ i(a.CheckboxItem, {
+		"data-slot": "context-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 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",
+			children: /* @__PURE__ */ r(a.CheckboxItemIndicator, { children: /* @__PURE__ */ r(t, {}) })
+		}), o]
+	});
+}
+function _({ ...e }) {
+	return /* @__PURE__ */ r(a.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...e
+	});
+}
+function v({ className: n, children: o, inset: s, ...c }) {
+	return /* @__PURE__ */ i(a.RadioItem, {
+		"data-slot": "context-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 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",
+			children: /* @__PURE__ */ r(a.RadioItemIndicator, { children: /* @__PURE__ */ r(t, {}) })
+		}), o]
+	});
+}
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ r(a.Separator, {
+		"data-slot": "context-menu-separator",
+		className: e("-mx-1 my-1 h-px bg-border", t),
+		...n
+	});
+}
+function b({ className: t, ...n }) {
+	return /* @__PURE__ */ r("span", {
+		"data-slot": "context-menu-shortcut",
+		className: e("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", t),
+		...n
+	});
+}
 //#endregion
-export { c as ContextMenu, v as ContextMenuCheckboxItem, g as ContextMenuContent, u as ContextMenuGroup, _ as ContextMenuItem, b as ContextMenuLabel, d as ContextMenuPortal, p as ContextMenuRadioGroup, y as ContextMenuRadioItem, x as ContextMenuSeparator, S as ContextMenuShortcut, f as ContextMenuSub, h as ContextMenuSubContent, m as ContextMenuSubTrigger, l as ContextMenuTrigger };
+export { o as ContextMenu, g as ContextMenuCheckboxItem, l as ContextMenuContent, u as ContextMenuGroup, f as ContextMenuItem, d as ContextMenuLabel, s as ContextMenuPortal, _ as ContextMenuRadioGroup, v as ContextMenuRadioItem, y as ContextMenuSeparator, b as ContextMenuShortcut, p as ContextMenuSub, h as ContextMenuSubContent, m as ContextMenuSubTrigger, c as ContextMenuTrigger };

package/dist/components/ui/dialog.js

@@ -1,88 +1,93 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-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 { 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 * as a from "react";
+import { Dialog as o } from "@base-ui/react/dialog";
 //#region src/components/ui/dialog.tsx
-function a({ ...e }) {
-	return /* @__PURE__ */ n(i.Root, {
+function s({ ...e }) {
+	return /* @__PURE__ */ r(o.Root, {
 		"data-slot": "dialog",
 		...e
 	});
 }
-function o({ className: t, ...r }) {
-	return /* @__PURE__ */ n(i.Trigger, {
-		"data-slot": "dialog-trigger",
-		className: e("cursor-pointer", t),
-		...r
-	});
-}
-function s({ ...e }) {
-	return /* @__PURE__ */ n(i.Portal, {
+var c = a.forwardRef(({ ...e }, t) => /* @__PURE__ */ r(o.Trigger, {
+	ref: t,
+	"data-slot": "dialog-trigger",
+	...e
+}));
+c.displayName = "DialogTrigger";
+function l({ ...e }) {
+	return /* @__PURE__ */ r(o.Portal, {
 		"data-slot": "dialog-portal",
 		...e
 	});
 }
-function c({ className: t, ...r }) {
-	return /* @__PURE__ */ n(i.Close, {
-		"data-slot": "dialog-close",
-		className: e("cursor-pointer", t),
-		...r
-	});
-}
-function l({ className: t, ...r }) {
-	return /* @__PURE__ */ n(i.Overlay, {
+var u = a.forwardRef(({ ...e }, t) => /* @__PURE__ */ r(o.Close, {
+	ref: t,
+	"data-slot": "dialog-close",
+	...e
+}));
+u.displayName = "DialogClose";
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ r(o.Backdrop, {
 		"data-slot": "dialog-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 isolate z-50 bg-black/80 backdrop-blur-sm duration-200 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", t),
+		...n
 	});
 }
-function u({ className: a, children: o, showCloseButton: c = !0, ...u }) {
-	return /* @__PURE__ */ r(s, {
-		"data-slot": "dialog-portal",
-		children: [/* @__PURE__ */ n(l, {}), /* @__PURE__ */ r(i.Content, {
-			"data-slot": "dialog-content",
-			className: e("bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border p-6 shadow-lg duration-200 sm:max-w-xl md:max-w-2xl lg:max-w-3xl", a),
-			...u,
-			children: [o, c && /* @__PURE__ */ r(i.Close, {
-				"data-slot": "dialog-close",
-				className: "ring-offset-background cursor-pointer focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				children: [/* @__PURE__ */ n(t, {}), /* @__PURE__ */ n("span", {
-					className: "sr-only",
-					children: "Close"
-				})]
-			})]
+var f = a.forwardRef(({ className: a, children: s, showCloseButton: c = !0, ...u }, f) => /* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(d, {}), /* @__PURE__ */ i(o.Popup, {
+	ref: f,
+	"data-slot": "dialog-content",
+	className: e("fixed top-1/2 left-1/2 z-50 grid w-[90vw] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl bg-popover/90 backdrop-blur-xl p-6 text-sm text-popover-foreground shadow-2xl ring-1 ring-border duration-200 outline-none 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", a),
+	...u,
+	children: [s, c && /* @__PURE__ */ i(o.Close, {
+		"data-slot": "dialog-close",
+		render: /* @__PURE__ */ r(t, {
+			variant: "ghost",
+			className: "absolute top-4 right-4 rounded-full",
+			size: "icon-sm"
+		}),
+		children: [/* @__PURE__ */ r(n, {}), /* @__PURE__ */ r("span", {
+			className: "sr-only",
+			children: "Close"
 		})]
-	});
-}
-function d({ className: t, ...r }) {
-	return /* @__PURE__ */ n("div", {
+	})]
+})] }));
+f.displayName = "DialogContent";
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
 		"data-slot": "dialog-header",
-		className: e("flex flex-col gap-2 text-center sm:text-left", t),
-		...r
+		className: e("flex flex-col gap-2", t),
+		...n
 	});
 }
-function f({ className: t, ...r }) {
-	return /* @__PURE__ */ n("div", {
+function m({ className: n, showCloseButton: a = !1, children: s, ...c }) {
+	return /* @__PURE__ */ i("div", {
 		"data-slot": "dialog-footer",
-		className: e("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
-		...r
+		className: e("flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end", n),
+		...c,
+		children: [s, a && /* @__PURE__ */ r(o.Close, {
+			render: /* @__PURE__ */ r(t, { variant: "outline" }),
+			children: "Close"
+		})]
 	});
 }
-function p({ className: t, ...r }) {
-	return /* @__PURE__ */ n(i.Title, {
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ r(o.Title, {
 		"data-slot": "dialog-title",
-		className: e("text-lg leading-none font-semibold", t),
-		...r
+		className: e("font-heading text-base leading-none font-medium", t),
+		...n
 	});
 }
-function m({ className: t, ...r }) {
-	return /* @__PURE__ */ n(i.Description, {
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ r(o.Description, {
 		"data-slot": "dialog-description",
-		className: e("text-muted-foreground text-sm", t),
-		...r
+		render: /* @__PURE__ */ r("div", {}),
+		className: e("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", t),
+		...n
 	});
 }
 //#endregion
-export { a as Dialog, c as DialogClose, u as DialogContent, m as DialogDescription, f as DialogFooter, d as DialogHeader, l as DialogOverlay, s as DialogPortal, p as DialogTitle, o as DialogTrigger };
+export { s as Dialog, u as DialogClose, f as DialogContent, g as DialogDescription, m as DialogFooter, p as DialogHeader, d as DialogOverlay, l as DialogPortal, h as DialogTitle, c as DialogTrigger };

package/dist/components/ui/drawer.js

@@ -1,80 +1,121 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Drawer as r } from "vaul";
+import * as r from "react";
+import { Drawer as i } from "@base-ui/react/drawer";
 //#region src/components/ui/drawer.tsx
-function i({ ...e }) {
-	return /* @__PURE__ */ t(r.Root, {
-		"data-slot": "drawer",
-		...e
+var a = r.createContext(null);
+function o() {
+	let e = r.useContext(a);
+	if (!e) throw Error("useDrawer must be used within a Drawer.");
+	return e;
+}
+function s({ modal: e = !0, showSwipeHandle: n = !1, snapPoints: o, swipeDirection: s = "down", ...c }) {
+	let l = o != null && o.length > 0, u = r.useMemo(() => ({
+		hasSnapPoints: l,
+		modal: e,
+		showSwipeHandle: n,
+		swipeDirection: s
+	}), [
+		l,
+		e,
+		n,
+		s
+	]);
+	return /* @__PURE__ */ t(a.Provider, {
+		value: u,
+		children: /* @__PURE__ */ t(i.Root, {
+			"data-slot": "drawer",
+			modal: e,
+			snapPoints: o,
+			swipeDirection: s,
+			...c
+		})
 	});
 }
-function a({ className: n, ...i }) {
-	return /* @__PURE__ */ t(r.Trigger, {
+function c({ ...e }) {
+	return /* @__PURE__ */ t(i.Trigger, {
 		"data-slot": "drawer-trigger",
-		className: e("cursor-pointer", n),
-		...i
+		...e
 	});
 }
-function o({ ...e }) {
-	return /* @__PURE__ */ t(r.Portal, {
+function l({ ...e }) {
+	return /* @__PURE__ */ t(i.Portal, {
 		"data-slot": "drawer-portal",
 		...e
 	});
 }
-function s({ className: n, ...i }) {
-	return /* @__PURE__ */ t(r.Close, {
+function u({ ...e }) {
+	return /* @__PURE__ */ t(i.Close, {
 		"data-slot": "drawer-close",
-		className: e("cursor-pointer", n),
-		...i
+		...e
 	});
 }
-function c({ className: n, ...i }) {
-	return /* @__PURE__ */ t(r.Overlay, {
+function d({ className: n, ...r }) {
+	return /* @__PURE__ */ t(i.Backdrop, {
 		"data-slot": "drawer-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", n),
-		...i
+		className: e("fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", n),
+		...r
 	});
 }
-function l({ className: i, children: a, ...s }) {
-	return /* @__PURE__ */ n(o, {
+function f({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "drawer-swipe-handle",
+		"aria-hidden": "true",
+		className: e("relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing", n),
+		...r
+	});
+}
+function p({ className: r, children: a, ...s }) {
+	let { hasSnapPoints: c, modal: u, showSwipeHandle: p, swipeDirection: m } = o(), h = m === "down" || m === "up" ? "y" : "x";
+	return /* @__PURE__ */ n(l, {
 		"data-slot": "drawer-portal",
-		children: [/* @__PURE__ */ t(c, {}), /* @__PURE__ */ n(r.Content, {
-			"data-slot": "drawer-content",
-			className: e("group/drawer-content bg-background fixed z-50 flex h-auto flex-col", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", i),
-			...s,
-			children: [/* @__PURE__ */ t("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), a]
+		children: [u === !0 && /* @__PURE__ */ t(d, { "data-snap-points": c ? "" : void 0 }), /* @__PURE__ */ t(i.Viewport, {
+			"data-slot": "drawer-viewport",
+			"data-modal": u,
+			className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto",
+			children: /* @__PURE__ */ n(i.Popup, {
+				"data-slot": "drawer-popup",
+				"data-swipe-axis": h,
+				"data-snap-points": c ? "" : void 0,
+				className: e("group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b", "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95", "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full", "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]", "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]", "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]", "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)", "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row", "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]", "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", r),
+				...s,
+				children: [p && /* @__PURE__ */ t(f, {}), /* @__PURE__ */ t(i.Content, {
+					"data-slot": "drawer-content",
+					className: e("flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"),
+					children: a
+				})]
+			})
 		})]
 	});
 }
-function u({ className: n, ...r }) {
+function m({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "drawer-header",
-		className: e("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", n),
+		className: e("flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left", n),
 		...r
 	});
 }
-function d({ className: n, ...r }) {
+function h({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "drawer-footer",
-		className: e("mt-auto flex flex-col gap-2 p-4", n),
+		className: e("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", n),
 		...r
 	});
 }
-function f({ className: n, ...i }) {
-	return /* @__PURE__ */ t(r.Title, {
+function g({ className: n, ...r }) {
+	return /* @__PURE__ */ t(i.Title, {
 		"data-slot": "drawer-title",
-		className: e("text-foreground font-semibold", n),
-		...i
+		className: e("font-heading text-base font-medium text-foreground", n),
+		...r
 	});
 }
-function p({ className: n, ...i }) {
-	return /* @__PURE__ */ t(r.Description, {
+function _({ className: n, ...r }) {
+	return /* @__PURE__ */ t(i.Description, {
 		"data-slot": "drawer-description",
-		className: e("text-muted-foreground text-sm", n),
-		...i
+		className: e("text-sm text-balance text-muted-foreground", n),
+		...r
 	});
 }
 //#endregion
-export { i as Drawer, s as DrawerClose, l as DrawerContent, p as DrawerDescription, d as DrawerFooter, u as DrawerHeader, c as DrawerOverlay, o as DrawerPortal, f as DrawerTitle, a as DrawerTrigger };
+export { s as Drawer, u as DrawerClose, p as DrawerContent, _ as DrawerDescription, h as DrawerFooter, m as DrawerHeader, d as DrawerOverlay, l as DrawerPortal, f as DrawerSwipeHandle, g as DrawerTitle, c as DrawerTrigger };