tembro 1.0.0

package/dist/components/notifications/toast.js

@@ -0,0 +1,193 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import * as n from "react";
+import { AlertCircleIcon as r, CheckCircle2Icon as i, InfoIcon as a, Loader2Icon as o, TriangleAlertIcon as s, XIcon as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/notifications/toast.tsx
+var d = n.createContext(null), f = {
+	default: "border-border bg-popover text-popover-foreground",
+	success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-950 dark:text-emerald-100",
+	info: "border-blue-500/20 bg-blue-500/10 text-blue-950 dark:text-blue-100",
+	warning: "border-amber-500/20 bg-amber-500/10 text-amber-950 dark:text-amber-100",
+	danger: "border-destructive/20 bg-destructive/10 text-destructive",
+	loading: "border-border bg-popover text-popover-foreground"
+}, p = {
+	default: /* @__PURE__ */ l(a, { className: "size-4" }),
+	success: /* @__PURE__ */ l(i, { className: "size-4" }),
+	info: /* @__PURE__ */ l(a, { className: "size-4" }),
+	warning: /* @__PURE__ */ l(s, { className: "size-4" }),
+	danger: /* @__PURE__ */ l(r, { className: "size-4" }),
+	loading: /* @__PURE__ */ l(o, { className: "size-4 animate-spin" })
+};
+function m() {
+	return `toast-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+function h(e) {
+	return typeof e == "object" && !!e && !n.isValidElement(e) && !Array.isArray(e);
+}
+function g(e, t) {
+	return h(e) ? {
+		...e,
+		tone: e.tone ?? t
+	} : {
+		title: e,
+		tone: t
+	};
+}
+function _(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var v = {
+	"top-right": "right-4 top-4",
+	"top-left": "left-4 top-4",
+	"bottom-right": "bottom-4 right-4",
+	"bottom-left": "bottom-4 left-4",
+	"top-center": "left-1/2 top-4 -translate-x-1/2",
+	"bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+};
+function y({ children: t, defaultDuration: r = 4e3, maxToasts: i = 5, pauseOnHover: a = !0, position: o = "top-right" }) {
+	let [s, c] = n.useState([]), f = n.useCallback((e) => {
+		c((t) => t.filter((t) => t.id !== e));
+	}, []), p = n.useCallback((e) => {
+		let t = e.id ?? m(), n = {
+			tone: "default",
+			duration: r,
+			dismissible: !0,
+			...e,
+			id: t
+		};
+		return c((e) => [n, ...e.filter((e) => e.id !== t)].slice(0, i)), t;
+	}, [r, i]), h = n.useCallback((e, t) => {
+		c((n) => n.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}, []), y = n.useCallback(() => {
+		c([]);
+	}, []), x = n.useCallback((e) => p(g(e, "success")), [p]), S = n.useCallback((e) => p(g(e, "info")), [p]), C = n.useCallback((e) => p(g(e, "warning")), [p]), w = n.useCallback((e) => p(g(e, "danger")), [p]), T = n.useCallback((e) => p({
+		duration: 0,
+		...g(e, "loading")
+	}), [p]), E = n.useCallback(async (e, t) => {
+		let n = p({
+			duration: 0,
+			dismissible: !1,
+			...g(t.loading, "loading")
+		});
+		try {
+			let i = await e;
+			return h(n, {
+				duration: r,
+				dismissible: !0,
+				...g(_(t.success, i), "success")
+			}), i;
+		} catch (e) {
+			throw h(n, {
+				duration: r,
+				dismissible: !0,
+				...g(_(t.error, e), "danger")
+			}), e;
+		}
+	}, [
+		p,
+		r,
+		h
+	]), D = n.useMemo(() => ({
+		toasts: s,
+		addToast: p,
+		updateToast: h,
+		dismissToast: f,
+		clearToasts: y,
+		success: x,
+		info: S,
+		warning: C,
+		error: w,
+		loading: T,
+		promise: E
+	}), [
+		p,
+		y,
+		f,
+		w,
+		S,
+		T,
+		E,
+		x,
+		s,
+		h,
+		C
+	]);
+	return /* @__PURE__ */ u(d.Provider, {
+		value: D,
+		children: [t, /* @__PURE__ */ l("div", {
+			"data-slot": "toast-viewport",
+			className: e("fixed z-[100] flex w-[min(100%-2rem,24rem)] flex-col gap-2", v[o]),
+			children: s.map((e) => /* @__PURE__ */ l(b, {
+				toast: e,
+				pauseOnHover: a,
+				onDismiss: f
+			}, e.id))
+		})]
+	});
+}
+function b({ toast: r, pauseOnHover: i, onDismiss: a }) {
+	let o = r.tone ?? "default", [s, d] = n.useState(!1);
+	return n.useEffect(() => {
+		if (r.duration === Infinity || r.duration === 0 || i && s) return;
+		let e = window.setTimeout(() => a(r.id), r.duration ?? 4e3);
+		return () => window.clearTimeout(e);
+	}, [
+		s,
+		a,
+		i,
+		r.duration,
+		r.id
+	]), /* @__PURE__ */ u("div", {
+		"data-slot": "toast",
+		"data-tone": o,
+		className: e("flex gap-3 rounded-lg border p-3 shadow-lg backdrop-blur", f[o]),
+		role: "status",
+		"aria-live": "polite",
+		onMouseEnter: () => d(!0),
+		onMouseLeave: () => d(!1),
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "mt-0.5 shrink-0",
+				children: p[o]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "min-w-0 flex-1 space-y-1",
+				children: [
+					r.title && /* @__PURE__ */ l("div", {
+						className: "text-sm font-medium leading-none",
+						children: r.title
+					}),
+					r.description && /* @__PURE__ */ l("div", {
+						className: "text-sm text-muted-foreground",
+						children: r.description
+					}),
+					r.action && /* @__PURE__ */ l("div", {
+						className: "pt-1",
+						children: r.action
+					})
+				]
+			}),
+			r.dismissible !== !1 && /* @__PURE__ */ u(t, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-xs",
+				onClick: () => a(r.id),
+				children: [/* @__PURE__ */ l(c, {}), /* @__PURE__ */ l("span", {
+					className: "sr-only",
+					children: "Dismiss"
+				})]
+			})
+		]
+	});
+}
+function x() {
+	let e = n.useContext(d);
+	if (!e) throw Error("useToast must be used inside ToastProvider");
+	return e;
+}
+//#endregion
+export { y as ToastProvider, x as useToast };

package/dist/components/overlay/alert-dialog.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../ui/button/index.cjs"),n=require("../ui/dialog/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o({title:e=`Are you sure?`,description:r,icon:o=(0,a.jsx)(i.AlertTriangleIcon,{}),cancelLabel:s=`Cancel`,actionLabel:c=`Continue`,actionTone:l=`destructive`,loading:u=!1,onAction:d,children:f,...p}){return(0,a.jsxs)(n.Dialog,{...p,children:[f,(0,a.jsxs)(n.DialogContent,{children:[(0,a.jsxs)(n.DialogHeader,{children:[(0,a.jsx)(`div`,{className:`mb-3 inline-flex size-11 items-center justify-center rounded-2xl border border-destructive/20 bg-destructive/10 text-destructive [&_svg]:size-5`,children:o}),(0,a.jsx)(n.DialogTitle,{children:e}),r?(0,a.jsx)(n.DialogDescription,{children:r}):null]}),(0,a.jsxs)(n.DialogFooter,{children:[(0,a.jsx)(n.DialogClose,{render:()=>(0,a.jsx)(t.Button,{type:`button`,variant:`outline`,disabled:u,children:s})}),(0,a.jsx)(t.Button,{type:`button`,variant:l===`destructive`?`destructive`:`default`,loading:u,onClick:()=>void d?.(),children:c})]})]})]})}exports.AlertDialog=o;

package/dist/components/overlay/alert-dialog.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Dialog } from "@/components/ui/dialog";
+export type AlertDialogProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    actionLabel?: React.ReactNode;
+    actionTone?: "default" | "destructive";
+    loading?: boolean;
+    onAction?: () => void | Promise<void>;
+    children?: React.ReactNode;
+};
+declare function AlertDialog({ title, description, icon, cancelLabel, actionLabel, actionTone, loading, onAction, children, ...props }: AlertDialogProps): React.JSX.Element;
+export { AlertDialog };

package/dist/components/overlay/alert-dialog.js

@@ -0,0 +1,32 @@
+import { Button as e } from "../ui/button/index.js";
+import { Dialog as t, DialogClose as n, DialogContent as r, DialogDescription as i, DialogFooter as a, DialogHeader as o, DialogTitle as s } from "../ui/dialog/index.js";
+import "react";
+import { AlertTriangleIcon as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/overlay/alert-dialog.tsx
+function d({ title: d = "Are you sure?", description: f, icon: p = /* @__PURE__ */ l(c, {}), cancelLabel: m = "Cancel", actionLabel: h = "Continue", actionTone: g = "destructive", loading: _ = !1, onAction: v, children: y, ...b }) {
+	return /* @__PURE__ */ u(t, {
+		...b,
+		children: [y, /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ u(o, { children: [
+			/* @__PURE__ */ l("div", {
+				className: "mb-3 inline-flex size-11 items-center justify-center rounded-2xl border border-destructive/20 bg-destructive/10 text-destructive [&_svg]:size-5",
+				children: p
+			}),
+			/* @__PURE__ */ l(s, { children: d }),
+			f ? /* @__PURE__ */ l(i, { children: f }) : null
+		] }), /* @__PURE__ */ u(a, { children: [/* @__PURE__ */ l(n, { render: () => /* @__PURE__ */ l(e, {
+			type: "button",
+			variant: "outline",
+			disabled: _,
+			children: m
+		}) }), /* @__PURE__ */ l(e, {
+			type: "button",
+			variant: g === "destructive" ? "destructive" : "default",
+			loading: _,
+			onClick: () => void v?.(),
+			children: h
+		})] })] })]
+	});
+}
+//#endregion
+export { d as AlertDialog };

package/dist/components/overlay/confirm-dialog.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("./dialog-actions.cjs"),n=require("./modal-shell.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a({cancelText:e=`Cancel`,confirmText:r=`Confirm`,confirmVariant:a=`default`,confirmDisabled:o=!1,cancelDisabled:s=!1,isLoading:c=!1,onCancel:l,onConfirm:u,onOpenChange:d,...f}){return(0,i.jsx)(n.ModalShell,{showCloseButton:!c,onOpenChange:e=>{c&&e===!1||d?.(e)},footer:(0,i.jsxs)(t.DialogActions,{children:[(0,i.jsx)(t.DialogActionButton,{type:`button`,variant:`outline`,disabled:s||c,onClick:()=>{l?.(),c||d?.(!1)},children:e}),(0,i.jsx)(t.DialogActionButton,{type:`button`,variant:a,disabled:o||c,isLoading:c,onClick:u,children:r})]}),...f})}exports.ConfirmDialog=a;

package/dist/components/overlay/confirm-dialog.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { DialogActionButton } from "@/components/overlay/dialog-actions";
+import { type ModalShellProps } from "@/components/overlay/modal-shell";
+type ConfirmVariant = React.ComponentProps<typeof DialogActionButton>["variant"];
+type ConfirmDialogProps = Omit<ModalShellProps, "footer"> & {
+    cancelText?: React.ReactNode;
+    confirmText?: React.ReactNode;
+    confirmVariant?: ConfirmVariant;
+    confirmDisabled?: boolean;
+    cancelDisabled?: boolean;
+    isLoading?: boolean;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+};
+declare function ConfirmDialog({ cancelText, confirmText, confirmVariant, confirmDisabled, cancelDisabled, isLoading, onCancel, onConfirm, onOpenChange, ...props }: ConfirmDialogProps): React.JSX.Element;
+export { ConfirmDialog };
+export type { ConfirmDialogProps };

package/dist/components/overlay/confirm-dialog.js

@@ -0,0 +1,32 @@
+import { DialogActionButton as e, DialogActions as t } from "./dialog-actions.js";
+import { ModalShell as n } from "./modal-shell.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/overlay/confirm-dialog.tsx
+function a({ cancelText: a = "Cancel", confirmText: o = "Confirm", confirmVariant: s = "default", confirmDisabled: c = !1, cancelDisabled: l = !1, isLoading: u = !1, onCancel: d, onConfirm: f, onOpenChange: p, ...m }) {
+	return /* @__PURE__ */ r(n, {
+		showCloseButton: !u,
+		onOpenChange: (e) => {
+			u && e === !1 || p?.(e);
+		},
+		footer: /* @__PURE__ */ i(t, { children: [/* @__PURE__ */ r(e, {
+			type: "button",
+			variant: "outline",
+			disabled: l || u,
+			onClick: () => {
+				d?.(), u || p?.(!1);
+			},
+			children: a
+		}), /* @__PURE__ */ r(e, {
+			type: "button",
+			variant: s,
+			disabled: c || u,
+			isLoading: u,
+			onClick: f,
+			children: o
+		})] }),
+		...m
+	});
+}
+//#endregion
+export { a as ConfirmDialog };

package/dist/components/overlay/demo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`dialog-actions`,`DialogActions`,`overlay`,`Modal footer action row with cancel, secondary and primary actions.`),e.component(`alert-dialog`,`AlertDialog`,`overlay`,`Destructive confirmation dialog with loading-ready action states.`),e.component(`drawer`,`Drawer`,`overlay`,`Side panel for contextual details without leaving the page.`)]);exports.overlayShowcaseDemoRegistry=t;

package/dist/components/overlay/demo.d.ts

@@ -0,0 +1,6 @@
+export declare const overlayShowcaseDemoRegistry: {
+    [k: string]: {
+        mock: import("../../showcase").ShowcaseDemoMock;
+        Showcase: (props: import("../../showcase").ShowcaseDemoProps) => import("react").JSX.Element;
+    };
+};

package/dist/components/overlay/demo.js

@@ -0,0 +1,9 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/overlay/demo.tsx
+var n = t([
+	e("dialog-actions", "DialogActions", "overlay", "Modal footer action row with cancel, secondary and primary actions."),
+	e("alert-dialog", "AlertDialog", "overlay", "Destructive confirmation dialog with loading-ready action states."),
+	e("drawer", "Drawer", "overlay", "Side panel for contextual details without leaving the page.")
+]);
+//#endregion
+export { n as overlayShowcaseDemoRegistry };

package/dist/components/overlay/dialog-actions.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o={start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`};function s({children:e,disabled:t,isLoading:r=!1,loadingLabel:o,className:s,...c}){return(0,a.jsxs)(n.Button,{className:s,disabled:t||r,"aria-busy":r||void 0,...c,children:[r&&(0,a.jsx)(i.Loader2Icon,{"data-icon":`inline-start`,className:`animate-spin`}),r&&o?o:e]})}function c({className:e,align:n=`end`,stackOnMobile:r=!0,...i}){return(0,a.jsx)(`div`,{"data-slot":`dialog-actions`,className:t.cn(`flex items-center gap-2`,r&&`flex-col-reverse sm:flex-row`,!r&&`flex-row`,o[n],e),...i})}exports.DialogActionButton=s,exports.DialogActions=c;

package/dist/components/overlay/dialog-actions.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+type DialogActionsAlign = "start" | "center" | "end" | "between";
+export type DialogActionButtonProps = React.ComponentProps<typeof Button> & {
+    isLoading?: boolean;
+    loadingLabel?: React.ReactNode;
+};
+export type DialogActionsProps = React.ComponentProps<"div"> & {
+    align?: DialogActionsAlign;
+    stackOnMobile?: boolean;
+};
+declare function DialogActionButton({ children, disabled, isLoading, loadingLabel, className, ...props }: DialogActionButtonProps): React.JSX.Element;
+declare function DialogActions({ className, align, stackOnMobile, ...props }: DialogActionsProps): React.JSX.Element;
+export { DialogActions, DialogActionButton };

package/dist/components/overlay/dialog-actions.js

@@ -0,0 +1,33 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import "react";
+import { Loader2Icon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/overlay/dialog-actions.tsx
+var a = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between"
+};
+function o({ children: e, disabled: a, isLoading: o = !1, loadingLabel: s, className: c, ...l }) {
+	return /* @__PURE__ */ i(t, {
+		className: c,
+		disabled: a || o,
+		"aria-busy": o || void 0,
+		...l,
+		children: [o && /* @__PURE__ */ r(n, {
+			"data-icon": "inline-start",
+			className: "animate-spin"
+		}), o && s ? s : e]
+	});
+}
+function s({ className: t, align: n = "end", stackOnMobile: i = !0, ...o }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "dialog-actions",
+		className: e("flex items-center gap-2", i && "flex-col-reverse sm:flex-row", !i && "flex-row", a[n], t),
+		...o
+	});
+}
+//#endregion
+export { o as DialogActionButton, s as DialogActions };

package/dist/components/overlay/drawer.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/dialog/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o={right:`left-auto right-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] sm:max-w-lg`,left:`left-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] sm:max-w-lg`,top:`left-0 top-0 h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-b-[var(--radius-3xl)]`,bottom:`bottom-0 left-0 top-auto h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-t-[var(--radius-3xl)]`};function s({trigger:e,title:n,description:i,side:s=`right`,footer:c,contentClassName:l,showCloseButton:u=!0,children:d,...f}){return(0,a.jsxs)(r.Dialog,{...f,children:[e?(0,a.jsx)(r.DialogTrigger,{render:e}):null,(0,a.jsxs)(r.DialogContent,{showCloseButton:u,className:t.cn(`fixed p-0`,o[s],l),children:[(n||i)&&(0,a.jsxs)(r.DialogHeader,{className:`border-b border-border/70 p-6`,children:[n?(0,a.jsx)(r.DialogTitle,{children:n}):null,i?(0,a.jsx)(r.DialogDescription,{children:i}):null]}),(0,a.jsx)(`div`,{"data-slot":`drawer-body`,className:`min-h-0 flex-1 overflow-y-auto p-6`,children:d}),c?(0,a.jsx)(`div`,{"data-slot":`drawer-footer`,className:`border-t border-border/70 p-5`,children:c}):null]})]})}function c({children:e=`Close`,...t}){return(0,a.jsx)(r.DialogClose,{render:()=>(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,...t,children:e})})}exports.Drawer=s,exports.DrawerCloseButton=c;

package/dist/components/overlay/drawer.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
+export type DrawerSide = "left" | "right" | "top" | "bottom";
+export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+    trigger?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    side?: DrawerSide;
+    footer?: React.ReactNode;
+    contentClassName?: string;
+    showCloseButton?: boolean;
+    children?: React.ReactNode;
+};
+declare function Drawer({ trigger, title, description, side, footer, contentClassName, showCloseButton, children, ...props }: DrawerProps): React.JSX.Element;
+declare function DrawerCloseButton({ children, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+export { Drawer, DrawerCloseButton };

package/dist/components/overlay/drawer.js

@@ -0,0 +1,47 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import { Dialog as n, DialogClose as r, DialogContent as i, DialogDescription as a, DialogHeader as o, DialogTitle as s, DialogTrigger as c } from "../ui/dialog/index.js";
+import "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/overlay/drawer.tsx
+var d = {
+	right: "left-auto right-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] sm:max-w-lg",
+	left: "left-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] sm:max-w-lg",
+	top: "left-0 top-0 h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-b-[var(--radius-3xl)]",
+	bottom: "bottom-0 left-0 top-auto h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-t-[var(--radius-3xl)]"
+};
+function f({ trigger: t, title: r, description: f, side: p = "right", footer: m, contentClassName: h, showCloseButton: g = !0, children: _, ...v }) {
+	return /* @__PURE__ */ u(n, {
+		...v,
+		children: [t ? /* @__PURE__ */ l(c, { render: t }) : null, /* @__PURE__ */ u(i, {
+			showCloseButton: g,
+			className: e("fixed p-0", d[p], h),
+			children: [
+				(r || f) && /* @__PURE__ */ u(o, {
+					className: "border-b border-border/70 p-6",
+					children: [r ? /* @__PURE__ */ l(s, { children: r }) : null, f ? /* @__PURE__ */ l(a, { children: f }) : null]
+				}),
+				/* @__PURE__ */ l("div", {
+					"data-slot": "drawer-body",
+					className: "min-h-0 flex-1 overflow-y-auto p-6",
+					children: _
+				}),
+				m ? /* @__PURE__ */ l("div", {
+					"data-slot": "drawer-footer",
+					className: "border-t border-border/70 p-5",
+					children: m
+				}) : null
+			]
+		})]
+	});
+}
+function p({ children: e = "Close", ...n }) {
+	return /* @__PURE__ */ l(r, { render: () => /* @__PURE__ */ l(t, {
+		type: "button",
+		variant: "outline",
+		...n,
+		children: e
+	}) });
+}
+//#endregion
+export { f as Drawer, p as DrawerCloseButton };

package/dist/components/overlay/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./alert-dialog.cjs"),t=require("./dialog-actions.cjs"),n=require("./modal-shell.cjs"),r=require("./confirm-dialog.cjs"),i=require("./drawer.cjs"),a=require("./sheet-shell.cjs");exports.AlertDialog=e.AlertDialog,exports.ConfirmDialog=r.ConfirmDialog,exports.DialogActionButton=t.DialogActionButton,exports.DialogActions=t.DialogActions,exports.Drawer=i.Drawer,exports.DrawerCloseButton=i.DrawerCloseButton,exports.ModalShell=n.ModalShell,exports.Sheet=a.Sheet,exports.SheetClose=a.SheetClose,exports.SheetContent=a.SheetContent,exports.SheetDescription=a.SheetDescription,exports.SheetFooter=a.SheetFooter,exports.SheetHeader=a.SheetHeader,exports.SheetOverlay=a.SheetOverlay,exports.SheetPortal=a.SheetPortal,exports.SheetShell=a.SheetShell,exports.SheetTitle=a.SheetTitle,exports.SheetTrigger=a.SheetTrigger;

package/dist/components/overlay/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./alert-dialog";
+export * from "./confirm-dialog";
+export * from "./dialog-actions";
+export * from "./drawer";
+export * from "./modal-shell";
+export * from "./sheet-shell";

package/dist/components/overlay/index.js

@@ -0,0 +1,7 @@
+import { AlertDialog as e } from "./alert-dialog.js";
+import { DialogActionButton as t, DialogActions as n } from "./dialog-actions.js";
+import { ModalShell as r } from "./modal-shell.js";
+import { ConfirmDialog as i } from "./confirm-dialog.js";
+import { Drawer as a, DrawerCloseButton as o } from "./drawer.js";
+import { Sheet as s, SheetClose as c, SheetContent as l, SheetDescription as u, SheetFooter as d, SheetHeader as f, SheetOverlay as p, SheetPortal as m, SheetShell as h, SheetTitle as g, SheetTrigger as _ } from "./sheet-shell.js";
+export { e as AlertDialog, i as ConfirmDialog, t as DialogActionButton, n as DialogActions, a as Drawer, o as DrawerCloseButton, r as ModalShell, s as Sheet, c as SheetClose, l as SheetContent, u as SheetDescription, d as SheetFooter, f as SheetHeader, p as SheetOverlay, m as SheetPortal, h as SheetShell, g as SheetTitle, _ as SheetTrigger };

package/dist/components/overlay/modal-shell.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/dialog/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={sm:`sm:max-w-sm`,md:`sm:max-w-lg`,lg:`sm:max-w-2xl`,xl:`sm:max-w-4xl`,full:`sm:max-w-[calc(100vw-2rem)] sm:h-[calc(100vh-2rem)]`};function o(e){return e?r.isValidElement(e)?(0,i.jsx)(n.DialogTrigger,{render:e}):(0,i.jsx)(n.DialogTrigger,{children:e}):null}function s({open:e,defaultOpen:r,onOpenChange:s,trigger:c,title:l,description:u,children:d,footer:f,size:p=`md`,showCloseButton:m=!0,contentClassName:h,headerClassName:g,bodyClassName:_}){let v=!!(l||u);return(0,i.jsxs)(n.Dialog,{open:e,defaultOpen:r,onOpenChange:s,children:[o(c),(0,i.jsxs)(n.DialogContent,{showCloseButton:m,className:t.cn(a[p],h),children:[v&&(0,i.jsxs)(n.DialogHeader,{className:g,children:[l&&(0,i.jsx)(n.DialogTitle,{children:l}),u&&(0,i.jsx)(n.DialogDescription,{children:u})]}),d&&(0,i.jsx)(`div`,{"data-slot":`modal-shell-body`,className:t.cn(`min-w-0`,_),children:d}),f&&(0,i.jsx)(`div`,{"data-slot":`modal-shell-footer`,children:f})]})]})}exports.ModalShell=s;

package/dist/components/overlay/modal-shell.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+type ModalShellSize = "sm" | "md" | "lg" | "xl" | "full";
+export type ModalShellProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: ModalShellSize;
+    showCloseButton?: boolean;
+    contentClassName?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+};
+declare function ModalShell({ open, defaultOpen, onOpenChange, trigger, title, description, children, footer, size, showCloseButton, contentClassName, headerClassName, bodyClassName, }: ModalShellProps): React.JSX.Element;
+export { ModalShell };
+export type { ModalShellSize };

package/dist/components/overlay/modal-shell.js

@@ -0,0 +1,44 @@
+import { cn as e } from "../../lib/utils.js";
+import { Dialog as t, DialogContent as n, DialogDescription as r, DialogHeader as i, DialogTitle as a, DialogTrigger as o } from "../ui/dialog/index.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/overlay/modal-shell.tsx
+var u = {
+	sm: "sm:max-w-sm",
+	md: "sm:max-w-lg",
+	lg: "sm:max-w-2xl",
+	xl: "sm:max-w-4xl",
+	full: "sm:max-w-[calc(100vw-2rem)] sm:h-[calc(100vh-2rem)]"
+};
+function d(e) {
+	return e ? s.isValidElement(e) ? /* @__PURE__ */ c(o, { render: e }) : /* @__PURE__ */ c(o, { children: e }) : null;
+}
+function f({ open: o, defaultOpen: s, onOpenChange: f, trigger: p, title: m, description: h, children: g, footer: _, size: v = "md", showCloseButton: y = !0, contentClassName: b, headerClassName: x, bodyClassName: S }) {
+	let C = !!(m || h);
+	return /* @__PURE__ */ l(t, {
+		open: o,
+		defaultOpen: s,
+		onOpenChange: f,
+		children: [d(p), /* @__PURE__ */ l(n, {
+			showCloseButton: y,
+			className: e(u[v], b),
+			children: [
+				C && /* @__PURE__ */ l(i, {
+					className: x,
+					children: [m && /* @__PURE__ */ c(a, { children: m }), h && /* @__PURE__ */ c(r, { children: h })]
+				}),
+				g && /* @__PURE__ */ c("div", {
+					"data-slot": "modal-shell-body",
+					className: e("min-w-0", S),
+					children: g
+				}),
+				_ && /* @__PURE__ */ c("div", {
+					"data-slot": "modal-shell-footer",
+					children: _
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { f as ModalShell };

package/dist/components/overlay/sheet-shell.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime"),o=require("@base-ui/react/dialog");var s=o.Dialog.Root;function c({...e}){return(0,a.jsx)(o.Dialog.Trigger,{"data-slot":`sheet-trigger`,...e})}function l({...e}){return(0,a.jsx)(o.Dialog.Portal,{"data-slot":`sheet-portal`,...e})}function u({...e}){return(0,a.jsx)(o.Dialog.Close,{"data-slot":`sheet-close`,...e})}function d({className:e,...n}){return(0,a.jsx)(o.Dialog.Backdrop,{"data-slot":`sheet-overlay`,className:t.cn(`fixed inset-0 z-50 bg-foreground/12 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0`,e),...n})}var f={top:`inset-x-0 top-0 max-h-[85vh] rounded-b-xl border-b data-open:slide-in-from-top data-closed:slide-out-to-top`,right:`inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-open:slide-in-from-right data-closed:slide-out-to-right sm:max-w-md`,bottom:`inset-x-0 bottom-0 max-h-[85vh] rounded-t-xl border-t data-open:slide-in-from-bottom data-closed:slide-out-to-bottom`,left:`inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-open:slide-in-from-left data-closed:slide-out-to-left sm:max-w-md`};function p({className:e,children:r,side:s=`right`,showCloseButton:c=!0,...p}){return(0,a.jsxs)(l,{children:[(0,a.jsx)(d,{}),(0,a.jsxs)(o.Dialog.Popup,{"data-slot":`sheet-content`,className:t.cn(`fixed z-50 flex flex-col gap-4 bg-background p-4 text-foreground shadow-xl outline-none duration-200 data-open:animate-in data-closed:animate-out`,f[s],e),...p,children:[r,c&&(0,a.jsxs)(u,{render:(0,a.jsx)(n.Button,{type:`button`,variant:`ghost`,size:`icon-sm`,className:`absolute right-3 top-3`}),children:[(0,a.jsx)(i.XIcon,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Close`})]})]})]})}function m({className:e,...n}){return(0,a.jsx)(`div`,{"data-slot":`sheet-header`,className:t.cn(`flex flex-col gap-2 pr-8`,e),...n})}function h({className:e,...n}){return(0,a.jsx)(`div`,{"data-slot":`sheet-footer`,className:t.cn(`mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,e),...n})}function g({className:e,...n}){return(0,a.jsx)(o.Dialog.Title,{"data-slot":`sheet-title`,className:t.cn(`font-heading text-base font-medium leading-none`,e),...n})}function _({className:e,...n}){return(0,a.jsx)(o.Dialog.Description,{"data-slot":`sheet-description`,className:t.cn(`text-sm text-muted-foreground`,e),...n})}function v(e){return e?r.isValidElement(e)?(0,a.jsx)(c,{render:e}):(0,a.jsx)(c,{children:e}):null}function y({open:e,defaultOpen:n,onOpenChange:r,trigger:i,title:o,description:c,children:l,footer:u,side:d=`right`,showCloseButton:f=!0,contentClassName:y,headerClassName:b,bodyClassName:x}){let S=!!(o||c);return(0,a.jsxs)(s,{open:e,defaultOpen:n,onOpenChange:r,children:[v(i),(0,a.jsxs)(p,{side:d,showCloseButton:f,className:y,children:[S&&(0,a.jsxs)(m,{className:b,children:[o&&(0,a.jsx)(g,{children:o}),c&&(0,a.jsx)(_,{children:c})]}),l&&(0,a.jsx)(`div`,{"data-slot":`sheet-shell-body`,className:t.cn(`min-w-0 flex-1`,x),children:l}),u&&(0,a.jsx)(h,{children:u})]})]})}exports.Sheet=s,exports.SheetClose=u,exports.SheetContent=p,exports.SheetDescription=_,exports.SheetFooter=h,exports.SheetHeader=m,exports.SheetOverlay=d,exports.SheetPortal=l,exports.SheetShell=y,exports.SheetTitle=g,exports.SheetTrigger=c;

package/dist/components/overlay/sheet-shell.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+type SheetSide = "top" | "right" | "bottom" | "left";
+type SheetShellProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    side?: SheetSide;
+    showCloseButton?: boolean;
+    contentClassName?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+};
+declare const Sheet: typeof DialogPrimitive.Root;
+declare function SheetTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
+declare function SheetPortal({ ...props }: DialogPrimitive.Portal.Props): React.JSX.Element;
+declare function SheetClose({ ...props }: DialogPrimitive.Close.Props): React.JSX.Element;
+declare function SheetOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): React.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
+    side?: SheetSide;
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
+declare function SheetShell({ open, defaultOpen, onOpenChange, trigger, title, description, children, footer, side, showCloseButton, contentClassName, headerClassName, bodyClassName, }: SheetShellProps): React.JSX.Element;
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetShell, SheetTitle, SheetTrigger, };
+export type { SheetShellProps, SheetSide };