tembro 2.0.6 → 2.1.0

package/dist/components/navigation/page-tabs.js

@@ -1,39 +1,50 @@
 import { cn as e } from "../../lib/utils.js";
 import { Badge as t } from "../ui/badge/index.js";
+import { Tabs as n, TabsList as r, TabsTrigger as i } from "../ui/tabs/index.js";
 import "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/navigation/page-tabs.tsx
-function i({ value: i, items: a, onValueChange: o, variant: s = "underline", size: c = "default", className: l, ...u }) {
-	let d = a.filter((e) => !e.hidden);
-	return /* @__PURE__ */ n("div", {
+function s({ value: s, items: c, onValueChange: l, variant: u = "underline", size: d = "default", className: f, ...p }) {
+	let m = c.filter((e) => !e.hidden);
+	return /* @__PURE__ */ a(n, {
+		value: s,
+		onValueChange: (e) => {
+			let t = m.find((t) => t.value === e);
+			t && l?.(t.value, t);
+		},
 		"data-slot": "page-tabs",
-		"data-variant": s,
-		className: e("flex min-w-0 flex-wrap gap-1.5 border-b border-border/70", s === "pills" && "rounded-full border border-border/75 bg-muted/22 p-1 shadow-[0_1px_0_rgba(255,255,255,0.04)]", s === "cards" && "gap-2 border-b-0", s !== "underline" && "border-b-0", l),
-		...u,
-		children: d.map((a) => {
-			let l = a.value === i;
-			return /* @__PURE__ */ r("button", {
-				type: "button",
-				disabled: a.disabled,
-				"data-slot": "page-tab",
-				"data-active": l || void 0,
-				className: e("inline-flex min-w-0 items-center gap-2 rounded-full px-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4", c === "sm" ? "h-8" : "h-10", s === "underline" && "rounded-none border-b-2 border-transparent px-1 text-muted-foreground hover:text-foreground", s === "underline" && l && "border-primary text-foreground", s === "pills" && "text-muted-foreground hover:bg-background/72 hover:text-foreground", s === "pills" && l && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground", s === "cards" && "rounded-[var(--radius-2xl)] border border-border/75 bg-card/96 text-muted-foreground shadow-sm ring-1 ring-foreground/4 hover:border-primary/28 hover:text-foreground", s === "cards" && l && "border-primary/50 bg-primary/7 text-foreground"),
-				onClick: () => o?.(a.value, a),
-				children: [
-					a.icon,
-					/* @__PURE__ */ n("span", {
-						className: "truncate",
-						children: a.label
-					}),
-					a.badge !== void 0 && /* @__PURE__ */ n(t, {
-						variant: l && s === "pills" ? "secondary" : "outline",
-						className: "rounded-full",
-						children: a.badge
-					})
-				]
-			}, a.value);
+		"data-variant": u,
+		className: e("min-w-0", f),
+		...p,
+		children: /* @__PURE__ */ a(r, {
+			"data-slot": "page-tabs-list",
+			variant: u === "underline" ? "underline" : "pills",
+			overflow: "scroll",
+			className: e("w-full", u === "cards" && "gap-2 border-0 bg-transparent p-0 shadow-none"),
+			children: m.map((n) => {
+				let r = n.value === s;
+				return /* @__PURE__ */ o(i, {
+					disabled: n.disabled,
+					value: n.value,
+					"data-slot": "page-tab",
+					"data-active": r || void 0,
+					className: e("min-w-0 px-3 disabled:pointer-events-none disabled:opacity-50", d === "sm" ? "h-8" : "h-10", u === "underline" && "px-1", u === "cards" && "rounded-[var(--radius-2xl)] border border-border/75 bg-card/96 text-muted-foreground shadow-sm ring-1 ring-foreground/4 hover:border-primary/28 hover:text-foreground", u === "cards" && r && "border-primary/50 bg-primary/7 text-foreground"),
+					children: [
+						n.icon,
+						/* @__PURE__ */ a("span", {
+							className: "truncate",
+							children: n.label
+						}),
+						n.badge !== void 0 && /* @__PURE__ */ a(t, {
+							variant: r && u === "pills" ? "secondary" : "outline",
+							className: "rounded-full",
+							children: n.badge
+						})
+					]
+				}, n.value);
+			})
 		})
 	});
 }
 //#endregion
-export { i as PageTabs };
+export { s as PageTabs };

package/dist/components/navigation/pagination.cjs

@@ -1 +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");function o(e,t){let n=Math.max(t-e+1,0);return Array.from({length:n},(t,n)=>n+e)}function s(e,t,n=1){if(t<=n*2+5)return o(1,t);let r=Math.max(e-n,1),i=Math.min(e+n,t),a=r>2,s=i<t-1;return!a&&s?[...o(1,n*2+3),`ellipsis`,t]:a&&!s?[1,`ellipsis`,...o(t-(n*2+3)+1,t)]:[1,`ellipsis`,...o(r,i),`ellipsis`,t]}function c({className:e,page:r,pageCount:o,onPageChange:c,siblingCount:l=1,showEdges:u=!0,disabled:d=!1,labels:f,...p}){let m=Math.max(o,1),h=Math.min(Math.max(r,1),m),g=s(h,m,l),_=e=>{let t=Math.min(Math.max(e,1),m);t!==h&&c(t)};return(0,a.jsxs)(`nav`,{"data-slot":`pagination`,"aria-label":`Pagination`,className:t.cn(`flex items-center justify-center gap-1 rounded-full border border-border/70 bg-background/76 p-1 shadow-none backdrop-blur`,e),...p,children:[u&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon-sm`,disabled:d||h<=1,"aria-label":f?.first??`First page`,onClick:()=>_(1),children:(0,a.jsx)(i.ChevronFirstIcon,{})}),(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon-sm`,disabled:d||h<=1,"aria-label":f?.previous??`Previous page`,onClick:()=>_(h-1),children:(0,a.jsx)(i.ChevronLeftIcon,{})}),g.map((e,r)=>e===`ellipsis`?(0,a.jsxs)(`span`,{"data-slot":`pagination-ellipsis`,className:`flex size-8 items-center justify-center text-muted-foreground`,children:[(0,a.jsx)(i.MoreHorizontalIcon,{className:`size-4`}),(0,a.jsx)(`span`,{className:`sr-only`,children:`More pages`})]},`ellipsis-${r}`):(0,a.jsx)(n.Button,{type:`button`,variant:e===h?`default`:`outline`,size:`icon-sm`,disabled:d,"aria-current":e===h?`page`:void 0,"aria-label":f?.page?.(e)??`Page ${e}`,onClick:()=>_(e),className:t.cn(e!==h&&`border-border/70 bg-background/80 shadow-none`),children:e},e)),(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon-sm`,disabled:d||h>=m,"aria-label":f?.next??`Next page`,onClick:()=>_(h+1),children:(0,a.jsx)(i.ChevronRightIcon,{})}),u&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon-sm`,disabled:d||h>=m,"aria-label":f?.last??`Last page`,onClick:()=>_(m),children:(0,a.jsx)(i.ChevronLastIcon,{})})]})}exports.Pagination=c,exports.getPaginationItems=s;
+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");function o(e,t){let n=Math.max(t-e+1,0);return Array.from({length:n},(t,n)=>n+e)}function s(e,t,n=1){if(t<=n*2+5)return o(1,t);let r=Math.max(e-n,1),i=Math.min(e+n,t),a=r>2,s=i<t-1;return!a&&s?[...o(1,n*2+3),`ellipsis`,t]:a&&!s?[1,`ellipsis`,...o(t-(n*2+3)+1,t)]:[1,`ellipsis`,...o(r,i),`ellipsis`,t]}function c({className:e,page:r,pageCount:o,onPageChange:c,siblingCount:l=1,showEdges:u=!0,disabled:d=!1,labels:f,compact:p=!1,totalCount:m,pageSize:h,pageSizeOptions:g,onPageSizeChange:_,showSummary:v=!1,...y}){let b=Math.max(o,1),x=Math.min(Math.max(r,1),b),S=s(x,b,l),C=e=>{let t=Math.min(Math.max(e,1),b);t!==x&&c(t)};return(0,a.jsxs)(`nav`,{"data-slot":`pagination`,"aria-label":`Pagination`,className:t.cn(`flex flex-wrap items-center justify-center gap-1 rounded-full border border-border/70 bg-background/76 p-1 shadow-none backdrop-blur`,e),...y,children:[v&&m!==void 0&&h?(0,a.jsxs)(`div`,{className:`px-2 text-xs text-muted-foreground`,children:[Math.min((x-1)*h+1,m),`-`,Math.min(x*h,m),` of `,m]}):null,u&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:p?`icon-xs`:`icon-sm`,disabled:d||x<=1,"aria-label":f?.first??`First page`,onClick:()=>C(1),children:(0,a.jsx)(i.ChevronFirstIcon,{})}),(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:p?`icon-xs`:`icon-sm`,disabled:d||x<=1,"aria-label":f?.previous??`Previous page`,onClick:()=>C(x-1),children:(0,a.jsx)(i.ChevronLeftIcon,{})}),S.map((e,r)=>e===`ellipsis`?(0,a.jsxs)(`span`,{"data-slot":`pagination-ellipsis`,className:`flex size-8 items-center justify-center text-muted-foreground`,children:[(0,a.jsx)(i.MoreHorizontalIcon,{className:`size-4`}),(0,a.jsx)(`span`,{className:`sr-only`,children:`More pages`})]},`ellipsis-${r}`):(0,a.jsx)(n.Button,{type:`button`,variant:e===x?`default`:`outline`,size:p?`icon-xs`:`icon-sm`,disabled:d,"aria-current":e===x?`page`:void 0,"aria-label":f?.page?.(e)??`Page ${e}`,onClick:()=>C(e),className:t.cn(e!==x&&`border-border/70 bg-background/80 shadow-none`),children:e},e)),(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:p?`icon-xs`:`icon-sm`,disabled:d||x>=b,"aria-label":f?.next??`Next page`,onClick:()=>C(x+1),children:(0,a.jsx)(i.ChevronRightIcon,{})}),u&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:p?`icon-xs`:`icon-sm`,disabled:d||x>=b,"aria-label":f?.last??`Last page`,onClick:()=>C(b),children:(0,a.jsx)(i.ChevronLastIcon,{})}),g&&h&&_?(0,a.jsxs)(`label`,{className:`ml-1 inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/90 px-3 py-1 text-xs text-muted-foreground`,children:[(0,a.jsx)(`span`,{children:`Rows`}),(0,a.jsx)(`select`,{className:`bg-transparent text-foreground outline-none`,value:h,onChange:e=>_(Number(e.target.value)),disabled:d,children:g.map(e=>(0,a.jsx)(`option`,{value:e,children:e},e))})]}):null]})}exports.Pagination=c,exports.getPaginationItems=s;

package/dist/components/navigation/pagination.d.ts

@@ -15,7 +15,13 @@ export type PaginationProps = Omit<React.ComponentProps<"nav">, "onChange"> & {
     showEdges?: boolean;
     disabled?: boolean;
     labels?: PaginationLabels;
+    compact?: boolean;
+    totalCount?: number;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (pageSize: number) => void;
+    showSummary?: boolean;
 };
 declare function getPaginationItems(page: number, pageCount: number, siblingCount?: number): PaginationItem[];
-declare function Pagination({ className, page, pageCount, onPageChange, siblingCount, showEdges, disabled, labels, ...props }: PaginationProps): React.JSX.Element;
+declare function Pagination({ className, page, pageCount, onPageChange, siblingCount, showEdges, disabled, labels, compact, totalCount, pageSize, pageSizeOptions, onPageSizeChange, showSummary, ...props }: PaginationProps): React.JSX.Element;
 export { Pagination, getPaginationItems };

package/dist/components/navigation/pagination.js

@@ -27,36 +27,46 @@ function u(e, t, n = 1) {
 		t
 	];
 }
-function d({ className: l, page: d, pageCount: f, onPageChange: p, siblingCount: m = 1, showEdges: h = !0, disabled: g = !1, labels: _, ...v }) {
-	let y = Math.max(f, 1), b = Math.min(Math.max(d, 1), y), x = u(b, y, m), S = (e) => {
-		let t = Math.min(Math.max(e, 1), y);
-		t !== b && p(t);
+function d({ className: l, page: d, pageCount: f, onPageChange: p, siblingCount: m = 1, showEdges: h = !0, disabled: g = !1, labels: _, compact: v = !1, totalCount: y, pageSize: b, pageSizeOptions: x, onPageSizeChange: S, showSummary: C = !1, ...w }) {
+	let T = Math.max(f, 1), E = Math.min(Math.max(d, 1), T), D = u(E, T, m), O = (e) => {
+		let t = Math.min(Math.max(e, 1), T);
+		t !== E && p(t);
 	};
 	return /* @__PURE__ */ c("nav", {
 		"data-slot": "pagination",
 		"aria-label": "Pagination",
-		className: e("flex items-center justify-center gap-1 rounded-full border border-border/70 bg-background/76 p-1 shadow-none backdrop-blur", l),
-		...v,
+		className: e("flex flex-wrap items-center justify-center gap-1 rounded-full border border-border/70 bg-background/76 p-1 shadow-none backdrop-blur", l),
+		...w,
 		children: [
+			C && y !== void 0 && b ? /* @__PURE__ */ c("div", {
+				className: "px-2 text-xs text-muted-foreground",
+				children: [
+					Math.min((E - 1) * b + 1, y),
+					"-",
+					Math.min(E * b, y),
+					" of ",
+					y
+				]
+			}) : null,
 			h && /* @__PURE__ */ s(t, {
 				type: "button",
 				variant: "outline",
-				size: "icon-sm",
-				disabled: g || b <= 1,
+				size: v ? "icon-xs" : "icon-sm",
+				disabled: g || E <= 1,
 				"aria-label": _?.first ?? "First page",
-				onClick: () => S(1),
+				onClick: () => O(1),
 				children: /* @__PURE__ */ s(n, {})
 			}),
 			/* @__PURE__ */ s(t, {
 				type: "button",
 				variant: "outline",
-				size: "icon-sm",
-				disabled: g || b <= 1,
+				size: v ? "icon-xs" : "icon-sm",
+				disabled: g || E <= 1,
 				"aria-label": _?.previous ?? "Previous page",
-				onClick: () => S(b - 1),
+				onClick: () => O(E - 1),
 				children: /* @__PURE__ */ s(i, {})
 			}),
-			x.map((n, r) => n === "ellipsis" ? /* @__PURE__ */ c("span", {
+			D.map((n, r) => n === "ellipsis" ? /* @__PURE__ */ c("span", {
 				"data-slot": "pagination-ellipsis",
 				className: "flex size-8 items-center justify-center text-muted-foreground",
 				children: [/* @__PURE__ */ s(o, { className: "size-4" }), /* @__PURE__ */ s("span", {
@@ -65,33 +75,46 @@ function d({ className: l, page: d, pageCount: f, onPageChange: p, siblingCount:
 				})]
 			}, `ellipsis-${r}`) : /* @__PURE__ */ s(t, {
 				type: "button",
-				variant: n === b ? "default" : "outline",
-				size: "icon-sm",
+				variant: n === E ? "default" : "outline",
+				size: v ? "icon-xs" : "icon-sm",
 				disabled: g,
-				"aria-current": n === b ? "page" : void 0,
+				"aria-current": n === E ? "page" : void 0,
 				"aria-label": _?.page?.(n) ?? `Page ${n}`,
-				onClick: () => S(n),
-				className: e(n !== b && "border-border/70 bg-background/80 shadow-none"),
+				onClick: () => O(n),
+				className: e(n !== E && "border-border/70 bg-background/80 shadow-none"),
 				children: n
 			}, n)),
 			/* @__PURE__ */ s(t, {
 				type: "button",
 				variant: "outline",
-				size: "icon-sm",
-				disabled: g || b >= y,
+				size: v ? "icon-xs" : "icon-sm",
+				disabled: g || E >= T,
 				"aria-label": _?.next ?? "Next page",
-				onClick: () => S(b + 1),
+				onClick: () => O(E + 1),
 				children: /* @__PURE__ */ s(a, {})
 			}),
 			h && /* @__PURE__ */ s(t, {
 				type: "button",
 				variant: "outline",
-				size: "icon-sm",
-				disabled: g || b >= y,
+				size: v ? "icon-xs" : "icon-sm",
+				disabled: g || E >= T,
 				"aria-label": _?.last ?? "Last page",
-				onClick: () => S(y),
+				onClick: () => O(T),
 				children: /* @__PURE__ */ s(r, {})
-			})
+			}),
+			x && b && S ? /* @__PURE__ */ c("label", {
+				className: "ml-1 inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/90 px-3 py-1 text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ s("span", { children: "Rows" }), /* @__PURE__ */ s("select", {
+					className: "bg-transparent text-foreground outline-none",
+					value: b,
+					onChange: (e) => S(Number(e.target.value)),
+					disabled: g,
+					children: x.map((e) => /* @__PURE__ */ s("option", {
+						value: e,
+						children: e
+					}, e))
+				})]
+			}) : null
 		]
 	});
 }

package/dist/components/notifications/notification-center.cjs

@@ -1 +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/popover/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s({notifications:e,onMarkAllRead:i,onNotificationClick:s,emptyLabel:c=`No new notifications`,title:l=`Notifications`,className:u,...d}){let f=e.filter(e=>!e.read).length;return(0,o.jsx)(`div`,{"data-slot":`notification-center`,className:u,...d,children:(0,o.jsxs)(r.Popover,{children:[(0,o.jsxs)(n.Button,{render:(0,o.jsx)(r.PopoverTrigger,{}),variant:`ghost`,size:`icon`,className:`relative rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] text-foreground shadow-sm hover:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)]`,children:[(0,o.jsx)(a.BellIcon,{className:`size-5`}),f>0&&(0,o.jsxs)(`span`,{className:`absolute -right-1 -top-1 inline-flex min-w-5 items-center justify-center rounded-full bg-[color:var(--aui-brand-strong)] px-1.5 py-0.5 text-[10px] font-bold leading-none text-white shadow-[0_8px_20px_rgba(16,185,129,0.35)]`,children:[f,(0,o.jsxs)(`span`,{className:`sr-only`,children:[f,` unread notifications`]})]})]}),(0,o.jsxs)(r.PopoverContent,{className:`w-[24rem] overflow-hidden rounded-3xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] p-0 shadow-[0_24px_60px_rgba(15,23,42,0.18)]`,align:`end`,children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between border-b border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-5 py-4`,children:[(0,o.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,o.jsx)(`h4`,{className:`font-semibold tracking-tight text-foreground`,children:l}),(0,o.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:f>0?`${f} unread update${f>1?`s`:``}`:`You're all caught up`})]}),f>0&&i&&(0,o.jsx)(n.Button,{variant:`ghost`,size:`sm`,className:`h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground`,onClick:i,children:`Mark all read`})]}),(0,o.jsx)(`div`,{className:`max-h-[400px] overflow-y-auto bg-[color:var(--aui-page-bg)] p-2`,children:e.length===0?(0,o.jsx)(`div`,{className:`rounded-2xl border border-dashed border-[color:var(--aui-surface-border)] px-6 py-10 text-center text-sm text-muted-foreground`,children:c}):(0,o.jsx)(`div`,{className:`flex flex-col`,children:e.map(e=>(0,o.jsxs)(`button`,{className:t.cn(`flex flex-col gap-1 rounded-2xl border border-transparent px-4 py-3 text-left transition hover:border-[color:var(--aui-surface-border)] hover:bg-[color:var(--aui-control-bg)]`,!e.read&&`border-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,var(--aui-surface-border))] bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_8%,var(--aui-control-bg))]`),onClick:()=>s?.(e),children:[(0,o.jsxs)(`div`,{className:`flex w-full items-start justify-between gap-2`,children:[(0,o.jsx)(`span`,{className:`text-sm font-semibold leading-tight text-foreground`,children:e.title}),!e.read&&(0,o.jsx)(`span`,{className:`mt-1 flex size-2 shrink-0 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)]`})]}),e.description&&(0,o.jsx)(`span`,{className:`line-clamp-2 text-xs leading-5 text-muted-foreground`,children:e.description}),e.time&&(0,o.jsx)(`span`,{className:`mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/80`,children:e.time})]},e.id))})})]})]})})}exports.NotificationCenter=s;
+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/popover/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s({notifications:e,onMarkAllRead:i,onClearAll:s,onNotificationClick:c,emptyLabel:l=`No new notifications`,title:u=`Notifications`,className:d,...f}){let p=e.filter(e=>!e.read).length,m=e.reduce((e,t)=>{let n=String(t.group??`Recent`);return e[n]=[...e[n]??[],t],e},{});return(0,o.jsx)(`div`,{"data-slot":`notification-center`,className:d,...f,children:(0,o.jsxs)(r.Popover,{children:[(0,o.jsxs)(n.Button,{render:(0,o.jsx)(r.PopoverTrigger,{}),variant:`ghost`,size:`icon`,className:`relative rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] text-foreground shadow-sm hover:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)]`,children:[(0,o.jsx)(a.BellIcon,{className:`size-5`}),p>0&&(0,o.jsxs)(`span`,{className:`absolute -right-1 -top-1 inline-flex min-w-5 items-center justify-center rounded-full bg-[color:var(--aui-brand-strong)] px-1.5 py-0.5 text-[10px] font-bold leading-none text-white shadow-[0_8px_20px_rgba(16,185,129,0.35)]`,children:[p,(0,o.jsxs)(`span`,{className:`sr-only`,children:[p,` unread notifications`]})]})]}),(0,o.jsxs)(r.PopoverContent,{className:`w-[24rem] overflow-hidden rounded-3xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] p-0 shadow-[0_24px_60px_rgba(15,23,42,0.18)]`,align:`end`,children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between border-b border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-5 py-4`,children:[(0,o.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,o.jsx)(`h4`,{className:`font-semibold tracking-tight text-foreground`,children:u}),(0,o.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:p>0?`${p} unread update${p>1?`s`:``}`:`You're all caught up`})]}),(0,o.jsxs)(`div`,{className:`flex items-center gap-2`,children:[p>0&&i?(0,o.jsx)(n.Button,{variant:`ghost`,size:`sm`,className:`h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground`,onClick:i,children:`Mark all read`}):null,e.length>0&&s?(0,o.jsx)(n.Button,{variant:`ghost`,size:`sm`,className:`h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground`,onClick:s,children:`Clear all`}):null]})]}),(0,o.jsx)(`div`,{className:`max-h-[400px] overflow-y-auto bg-[color:var(--aui-page-bg)] p-2`,children:e.length===0?(0,o.jsx)(`div`,{className:`rounded-2xl border border-dashed border-[color:var(--aui-surface-border)] px-6 py-10 text-center text-sm text-muted-foreground`,children:l}):(0,o.jsx)(`div`,{className:`flex flex-col gap-3`,children:Object.entries(m).map(([e,n])=>(0,o.jsxs)(`div`,{className:`grid gap-2`,children:[(0,o.jsx)(`div`,{className:`px-2 pt-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground`,children:e}),n.map(e=>(0,o.jsxs)(`button`,{className:t.cn(`flex flex-col gap-1 rounded-2xl border border-transparent px-4 py-3 text-left transition hover:border-[color:var(--aui-surface-border)] hover:bg-[color:var(--aui-control-bg)]`,!e.read&&`border-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,var(--aui-surface-border))] bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_8%,var(--aui-control-bg))]`),onClick:()=>c?.(e),children:[(0,o.jsxs)(`div`,{className:`flex w-full items-start justify-between gap-2`,children:[(0,o.jsx)(`span`,{className:`text-sm font-semibold leading-tight text-foreground`,children:e.title}),!e.read&&(0,o.jsx)(`span`,{className:`mt-1 flex size-2 shrink-0 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)]`})]}),e.description&&(0,o.jsx)(`span`,{className:`line-clamp-2 text-xs leading-5 text-muted-foreground`,children:e.description}),e.time&&(0,o.jsx)(`span`,{className:`mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/80`,children:e.time})]},e.id))]},e))})})]})]})})}exports.NotificationCenter=s;

package/dist/components/notifications/notification-center.d.ts

@@ -5,13 +5,15 @@ export type NotificationItem = {
     description?: React.ReactNode;
     time?: React.ReactNode;
     read?: boolean;
+    group?: React.ReactNode;
 };
 export type NotificationCenterProps = React.ComponentProps<"div"> & {
     notifications: NotificationItem[];
     onMarkAllRead?: () => void;
+    onClearAll?: () => void;
     onNotificationClick?: (notification: NotificationItem) => void;
     emptyLabel?: React.ReactNode;
     title?: React.ReactNode;
 };
-declare function NotificationCenter({ notifications, onMarkAllRead, onNotificationClick, emptyLabel, title, className, ...props }: NotificationCenterProps): React.JSX.Element;
+declare function NotificationCenter({ notifications, onMarkAllRead, onClearAll, onNotificationClick, emptyLabel, title, className, ...props }: NotificationCenterProps): React.JSX.Element;
 export { NotificationCenter };

package/dist/components/notifications/notification-center.js

@@ -5,22 +5,25 @@ import "react";
 import { BellIcon as a } from "lucide-react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/notifications/notification-center.tsx
-function c({ notifications: c, onMarkAllRead: l, onNotificationClick: u, emptyLabel: d = "No new notifications", title: f = "Notifications", className: p, ...m }) {
-	let h = c.filter((e) => !e.read).length;
+function c({ notifications: c, onMarkAllRead: l, onClearAll: u, onNotificationClick: d, emptyLabel: f = "No new notifications", title: p = "Notifications", className: m, ...h }) {
+	let g = c.filter((e) => !e.read).length, _ = c.reduce((e, t) => {
+		let n = String(t.group ?? "Recent");
+		return e[n] = [...e[n] ?? [], t], e;
+	}, {});
 	return /* @__PURE__ */ o("div", {
 		"data-slot": "notification-center",
-		className: p,
-		...m,
+		className: m,
+		...h,
 		children: /* @__PURE__ */ s(n, { children: [/* @__PURE__ */ s(t, {
 			render: /* @__PURE__ */ o(i, {}),
 			variant: "ghost",
 			size: "icon",
 			className: "relative rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] text-foreground shadow-sm hover:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)]",
-			children: [/* @__PURE__ */ o(a, { className: "size-5" }), h > 0 && /* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ o(a, { className: "size-5" }), g > 0 && /* @__PURE__ */ s("span", {
 				className: "absolute -right-1 -top-1 inline-flex min-w-5 items-center justify-center rounded-full bg-[color:var(--aui-brand-strong)] px-1.5 py-0.5 text-[10px] font-bold leading-none text-white shadow-[0_8px_20px_rgba(16,185,129,0.35)]",
-				children: [h, /* @__PURE__ */ s("span", {
+				children: [g, /* @__PURE__ */ s("span", {
 					className: "sr-only",
-					children: [h, " unread notifications"]
+					children: [g, " unread notifications"]
 				})]
 			})]
 		}), /* @__PURE__ */ s(r, {
@@ -32,46 +35,61 @@ function c({ notifications: c, onMarkAllRead: l, onNotificationClick: u, emptyLa
 					className: "grid gap-0.5",
 					children: [/* @__PURE__ */ o("h4", {
 						className: "font-semibold tracking-tight text-foreground",
-						children: f
+						children: p
 					}), /* @__PURE__ */ o("span", {
 						className: "text-xs text-muted-foreground",
-						children: h > 0 ? `${h} unread update${h > 1 ? "s" : ""}` : "You're all caught up"
+						children: g > 0 ? `${g} unread update${g > 1 ? "s" : ""}` : "You're all caught up"
 					})]
-				}), h > 0 && l && /* @__PURE__ */ o(t, {
-					variant: "ghost",
-					size: "sm",
-					className: "h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground",
-					onClick: l,
-					children: "Mark all read"
+				}), /* @__PURE__ */ s("div", {
+					className: "flex items-center gap-2",
+					children: [g > 0 && l ? /* @__PURE__ */ o(t, {
+						variant: "ghost",
+						size: "sm",
+						className: "h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground",
+						onClick: l,
+						children: "Mark all read"
+					}) : null, c.length > 0 && u ? /* @__PURE__ */ o(t, {
+						variant: "ghost",
+						size: "sm",
+						className: "h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground",
+						onClick: u,
+						children: "Clear all"
+					}) : null]
 				})]
 			}), /* @__PURE__ */ o("div", {
 				className: "max-h-[400px] overflow-y-auto bg-[color:var(--aui-page-bg)] p-2",
 				children: c.length === 0 ? /* @__PURE__ */ o("div", {
 					className: "rounded-2xl border border-dashed border-[color:var(--aui-surface-border)] px-6 py-10 text-center text-sm text-muted-foreground",
-					children: d
+					children: f
 				}) : /* @__PURE__ */ o("div", {
-					className: "flex flex-col",
-					children: c.map((t) => /* @__PURE__ */ s("button", {
-						className: e("flex flex-col gap-1 rounded-2xl border border-transparent px-4 py-3 text-left transition hover:border-[color:var(--aui-surface-border)] hover:bg-[color:var(--aui-control-bg)]", !t.read && "border-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,var(--aui-surface-border))] bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_8%,var(--aui-control-bg))]"),
-						onClick: () => u?.(t),
-						children: [
-							/* @__PURE__ */ s("div", {
-								className: "flex w-full items-start justify-between gap-2",
-								children: [/* @__PURE__ */ o("span", {
-									className: "text-sm font-semibold leading-tight text-foreground",
-									children: t.title
-								}), !t.read && /* @__PURE__ */ o("span", { className: "mt-1 flex size-2 shrink-0 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)]" })]
-							}),
-							t.description && /* @__PURE__ */ o("span", {
-								className: "line-clamp-2 text-xs leading-5 text-muted-foreground",
-								children: t.description
-							}),
-							t.time && /* @__PURE__ */ o("span", {
-								className: "mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/80",
-								children: t.time
-							})
-						]
-					}, t.id))
+					className: "flex flex-col gap-3",
+					children: Object.entries(_).map(([t, n]) => /* @__PURE__ */ s("div", {
+						className: "grid gap-2",
+						children: [/* @__PURE__ */ o("div", {
+							className: "px-2 pt-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground",
+							children: t
+						}), n.map((t) => /* @__PURE__ */ s("button", {
+							className: e("flex flex-col gap-1 rounded-2xl border border-transparent px-4 py-3 text-left transition hover:border-[color:var(--aui-surface-border)] hover:bg-[color:var(--aui-control-bg)]", !t.read && "border-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,var(--aui-surface-border))] bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_8%,var(--aui-control-bg))]"),
+							onClick: () => d?.(t),
+							children: [
+								/* @__PURE__ */ s("div", {
+									className: "flex w-full items-start justify-between gap-2",
+									children: [/* @__PURE__ */ o("span", {
+										className: "text-sm font-semibold leading-tight text-foreground",
+										children: t.title
+									}), !t.read && /* @__PURE__ */ o("span", { className: "mt-1 flex size-2 shrink-0 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)]" })]
+								}),
+								t.description && /* @__PURE__ */ o("span", {
+									className: "line-clamp-2 text-xs leading-5 text-muted-foreground",
+									children: t.description
+								}),
+								t.time && /* @__PURE__ */ o("span", {
+									className: "mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/80",
+									children: t.time
+								})
+							]
+						}, t.id))]
+					}, t))
 				})
 			})]
 		})] })

package/dist/components/notifications/toast.cjs

@@ -1 +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=r.createContext(null),s={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`},c={default:(0,a.jsx)(i.InfoIcon,{className:`size-4`}),success:(0,a.jsx)(i.CheckCircle2Icon,{className:`size-4`}),info:(0,a.jsx)(i.InfoIcon,{className:`size-4`}),warning:(0,a.jsx)(i.TriangleAlertIcon,{className:`size-4`}),danger:(0,a.jsx)(i.AlertCircleIcon,{className:`size-4`}),loading:(0,a.jsx)(i.Loader2Icon,{className:`size-4 animate-spin`})};function l(){return`toast-${Date.now()}-${Math.random().toString(16).slice(2)}`}function u(e){return typeof e==`object`&&!!e&&!r.isValidElement(e)&&!Array.isArray(e)}function d(e,t){return u(e)?{...e,tone:e.tone??t}:{title:e,tone:t}}function f(e,t){return typeof e==`function`?e(t):e}var p={"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 m({children:e,defaultDuration:n=4e3,maxToasts:i=5,pauseOnHover:s=!0,position:c=`top-right`}){let[u,m]=r.useState([]),g=r.useCallback(e=>{m(t=>t.filter(t=>t.id!==e))},[]),_=r.useCallback(e=>{let t=e.id??l(),r={tone:`default`,duration:n,dismissible:!0,...e,id:t};return m(e=>[r,...e.filter(e=>e.id!==t)].slice(0,i)),t},[n,i]),v=r.useCallback((e,t)=>{m(n=>n.map(n=>n.id===e?{...n,...t}:n))},[]),y=r.useCallback(()=>{m([])},[]),b=r.useCallback(e=>_(d(e,`success`)),[_]),x=r.useCallback(e=>_(d(e,`info`)),[_]),S=r.useCallback(e=>_(d(e,`warning`)),[_]),C=r.useCallback(e=>_(d(e,`danger`)),[_]),w=r.useCallback(e=>_({duration:0,...d(e,`loading`)}),[_]),T=r.useCallback(async(e,t)=>{let r=_({duration:0,dismissible:!1,...d(t.loading,`loading`)});try{let i=await e;return v(r,{duration:n,dismissible:!0,...d(f(t.success,i),`success`)}),i}catch(e){throw v(r,{duration:n,dismissible:!0,...d(f(t.error,e),`danger`)}),e}},[_,n,v]),E=r.useMemo(()=>({toasts:u,addToast:_,updateToast:v,dismissToast:g,clearToasts:y,success:b,info:x,warning:S,error:C,loading:w,promise:T}),[_,y,g,C,x,w,T,b,u,v,S]);return(0,a.jsxs)(o.Provider,{value:E,children:[e,(0,a.jsx)(`div`,{"data-slot":`toast-viewport`,className:t.cn(`fixed z-[100] flex w-[min(100%-2rem,24rem)] flex-col gap-2`,p[c]),children:u.map(e=>(0,a.jsx)(h,{toast:e,pauseOnHover:s,onDismiss:g},e.id))})]})}function h({toast:e,pauseOnHover:o,onDismiss:l}){let u=e.tone??`default`,[d,f]=r.useState(!1);return r.useEffect(()=>{if(e.duration===1/0||e.duration===0||o&&d)return;let t=window.setTimeout(()=>l(e.id),e.duration??4e3);return()=>window.clearTimeout(t)},[d,l,o,e.duration,e.id]),(0,a.jsxs)(`div`,{"data-slot":`toast`,"data-tone":u,className:t.cn(`flex gap-3 rounded-lg border p-3 shadow-lg backdrop-blur`,s[u]),role:`status`,"aria-live":`polite`,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),children:[(0,a.jsx)(`div`,{className:`mt-0.5 shrink-0`,children:c[u]}),(0,a.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-1`,children:[e.title&&(0,a.jsx)(`div`,{className:`text-sm font-medium leading-none`,children:e.title}),e.description&&(0,a.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e.description}),e.action&&(0,a.jsx)(`div`,{className:`pt-1`,children:e.action})]}),e.dismissible!==!1&&(0,a.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`icon-xs`,onClick:()=>l(e.id),children:[(0,a.jsx)(i.XIcon,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Dismiss`})]})]})}function g(){let e=r.useContext(o);if(!e)throw Error(`useToast must be used inside ToastProvider`);return e}exports.ToastProvider=m,exports.useToast=g;
+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=r.createContext(null),s={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`},c={default:(0,a.jsx)(i.InfoIcon,{className:`size-4`}),success:(0,a.jsx)(i.CheckCircle2Icon,{className:`size-4`}),info:(0,a.jsx)(i.InfoIcon,{className:`size-4`}),warning:(0,a.jsx)(i.TriangleAlertIcon,{className:`size-4`}),danger:(0,a.jsx)(i.AlertCircleIcon,{className:`size-4`}),loading:(0,a.jsx)(i.Loader2Icon,{className:`size-4 animate-spin`})};function l(){return`toast-${Date.now()}-${Math.random().toString(16).slice(2)}`}function u(e){return typeof e==`object`&&!!e&&!r.isValidElement(e)&&!Array.isArray(e)}function d(e,t){return u(e)?{...e,tone:e.tone??t}:{title:e,tone:t}}function f(e,t){return typeof e==`function`?e(t):e}var p={"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 m({children:e,defaultDuration:n=4e3,maxToasts:i=5,pauseOnHover:s=!0,position:c=`top-right`}){let[u,m]=r.useState([]),g=r.useCallback(e=>{m(t=>t.filter(t=>t.id!==e))},[]),_=r.useCallback(e=>{let t=e.id??l(),r={tone:`default`,duration:n,dismissible:!0,...e,id:t};return m(e=>[r,...e.filter(e=>e.id!==t)].slice(0,i)),t},[n,i]),v=r.useCallback((e,t)=>{m(n=>n.map(n=>n.id===e?{...n,...t}:n))},[]),y=r.useCallback(()=>{m([])},[]),b=r.useCallback(e=>_(d(e,`success`)),[_]),x=r.useCallback(e=>_(d(e,`info`)),[_]),S=r.useCallback(e=>_(d(e,`warning`)),[_]),C=r.useCallback(e=>_(d(e,`danger`)),[_]),w=r.useCallback(e=>_({duration:0,...d(e,`loading`)}),[_]),T=r.useCallback(async(e,t)=>{let r=_({duration:0,dismissible:!1,...d(t.loading,`loading`)});try{let i=await e;return v(r,{duration:n,dismissible:!0,...d(f(t.success,i),`success`)}),i}catch(e){throw v(r,{duration:n,dismissible:!0,...d(f(t.error,e),`danger`)}),e}},[_,n,v]),E=r.useMemo(()=>({toasts:u,addToast:_,updateToast:v,dismissToast:g,clearToasts:y,success:b,info:x,warning:S,error:C,loading:w,promise:T}),[_,y,g,C,x,w,T,b,u,v,S]);return(0,a.jsxs)(o.Provider,{value:E,children:[e,(0,a.jsx)(`div`,{"data-slot":`toast-viewport`,className:t.cn(`fixed z-[100] flex w-[min(100%-2rem,24rem)] flex-col gap-2`,p[c]),children:u.map(e=>(0,a.jsx)(h,{toast:e,pauseOnHover:s,onDismiss:g},e.id))})]})}function h({toast:e,pauseOnHover:o,onDismiss:l}){let u=e.tone??`default`,[d,f]=r.useState(!1);return r.useEffect(()=>{if(e.duration===1/0||e.duration===0||o&&d)return;let t=window.setTimeout(()=>l(e.id),e.duration??4e3);return()=>window.clearTimeout(t)},[d,l,o,e.duration,e.id]),(0,a.jsxs)(`div`,{"data-slot":`toast`,"data-tone":u,className:t.cn(`flex gap-3 rounded-lg border p-3 shadow-lg backdrop-blur`,s[u]),role:`status`,"aria-live":`polite`,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),children:[(0,a.jsx)(`div`,{className:`mt-0.5 shrink-0`,children:c[u]}),(0,a.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-1`,children:[e.group?(0,a.jsx)(`div`,{className:`text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground`,children:e.group}):null,e.title&&(0,a.jsx)(`div`,{className:`text-sm font-medium leading-none`,children:e.title}),e.description&&(0,a.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e.description}),e.action&&(0,a.jsx)(`div`,{className:`pt-1`,children:e.action})]}),e.dismissible!==!1&&(0,a.jsxs)(n.Button,{type:`button`,variant:`ghost`,size:`icon-xs`,onClick:()=>l(e.id),children:[(0,a.jsx)(i.XIcon,{}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Dismiss`})]})]})}function g(){let e=r.useContext(o);if(!e)throw Error(`useToast must be used inside ToastProvider`);return e}exports.ToastProvider=m,exports.useToast=g;

package/dist/components/notifications/toast.d.ts

@@ -8,6 +8,7 @@ export type ToastItem = {
     action?: React.ReactNode;
     duration?: number;
     dismissible?: boolean;
+    group?: React.ReactNode;
 };
 export type CreateToastInput = Omit<ToastItem, "id"> & {
     id?: string;

package/dist/components/notifications/toast.js

@@ -157,6 +157,10 @@ function b({ toast: r, pauseOnHover: i, onDismiss: a }) {
 			/* @__PURE__ */ u("div", {
 				className: "min-w-0 flex-1 space-y-1",
 				children: [
+					r.group ? /* @__PURE__ */ l("div", {
+						className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground",
+						children: r.group
+					}) : null,
 					r.title && /* @__PURE__ */ l("div", {
 						className: "text-sm font-medium leading-none",
 						children: r.title

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

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../ui/button/index.cjs"),n=require("../ui/input/index.cjs"),r=require("../ui/dialog/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s({title:e=`Are you sure?`,description:s,icon:c=(0,o.jsx)(a.AlertTriangleIcon,{}),cancelLabel:l=`Cancel`,actionLabel:u=`Continue`,actionTone:d=`destructive`,cancelVariant:f=`outline`,loading:p=!1,closeOnAction:m=!0,confirmValue:h,confirmLabel:g=`Type to confirm`,confirmPlaceholder:_,confirmDescription:v,confirmCaseSensitive:y=!0,severityNote:b,errorMessage:x=`Action could not be completed. Try again.`,onActionError:S,onAction:C,children:w,preventCloseWhileLoading:T=!0,actionButtonProps:E,cancelButtonProps:D,onOpenChange:O,...k}){let[A,j]=i.useState(!1),[M,N]=i.useState(``),[P,F]=i.useState(null),I=p||A,L=!!h?.trim(),R=y?h?.trim():h?.trim().toLowerCase(),z=y?M.trim():M.trim().toLowerCase(),B=!L||z===R;i.useEffect(()=>{k.open||(N(``),F(null))},[k.open]);let V=i.useCallback((e,t)=>{!e&&T&&I||O?.(e,t)},[O,T,I]),H=()=>{V(!1,void 0)},U=async()=>{if(!(!B||I)){if(F(null),!C){m&&H();return}try{j(!0),await C(),m&&H()}catch(e){F(x),S?.(e)}finally{j(!1)}}};return(0,o.jsxs)(r.Dialog,{onOpenChange:V,...k,children:[w,(0,o.jsxs)(r.DialogContent,{children:[(0,o.jsxs)(r.DialogHeader,{children:[(0,o.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:c}),(0,o.jsx)(r.DialogTitle,{children:e}),s?(0,o.jsx)(r.DialogDescription,{children:s}):null]}),L?(0,o.jsxs)(`div`,{className:`grid gap-2.5`,children:[(0,o.jsxs)(`div`,{className:`space-y-1`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium text-foreground`,children:g}),(0,o.jsx)(`p`,{className:`text-xs leading-5 text-muted-foreground`,children:v??(0,o.jsxs)(o.Fragment,{children:[`Type `,(0,o.jsx)(`span`,{className:`font-semibold text-foreground`,children:h}),` to continue.`]})})]}),(0,o.jsx)(n.Input,{value:M,onValueChange:N,placeholder:_??h,autoComplete:`off`,autoCapitalize:`off`,spellCheck:!1,"aria-invalid":P?!0:void 0,"aria-describedby":P?`alert-dialog-error`:void 0})]}):null,b?(0,o.jsx)(`div`,{className:`rounded-2xl border border-border/70 bg-muted/35 px-3.5 py-3 text-sm leading-6 text-muted-foreground`,children:b}):null,P?(0,o.jsx)(`div`,{id:`alert-dialog-error`,role:`alert`,"aria-live":`polite`,className:`rounded-2xl border border-destructive/20 bg-destructive/8 px-3.5 py-3 text-sm leading-6 text-destructive`,children:P}):null,(0,o.jsxs)(r.DialogFooter,{children:[(0,o.jsx)(r.DialogClose,{render:()=>(0,o.jsx)(t.Button,{type:`button`,variant:f,disabled:I,...D,children:l})}),(0,o.jsx)(t.Button,{type:`button`,variant:d===`destructive`?`destructive`:`default`,loading:I,disabled:!B&&!I,onClick:()=>void U(),...E,children:u})]})]})]})}exports.AlertDialog=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../ui/button/index.cjs"),n=require("../ui/input/index.cjs"),r=require("../ui/dialog/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s({title:e=`Are you sure?`,description:s,icon:c=(0,o.jsx)(a.AlertTriangleIcon,{}),cancelLabel:l=`Cancel`,actionLabel:u=`Continue`,actionTone:d=`destructive`,cancelVariant:f=`outline`,loading:p=!1,closeOnAction:m=!0,confirmValue:h,confirmLabel:g=`Type to confirm`,confirmPlaceholder:_,confirmDescription:v,confirmCaseSensitive:y=!0,severityNote:b,errorMessage:x=`Action could not be completed. Try again.`,onActionError:S,onAction:C,children:w,preventCloseWhileLoading:T=!0,actionButtonProps:E,cancelButtonProps:D,onOpenChange:O,...k}){let[A,j]=i.useState(!1),[M,N]=i.useState(``),[P,F]=i.useState(null),I=p||A,L=!!h?.trim(),R=y?h?.trim():h?.trim().toLowerCase(),z=y?M.trim():M.trim().toLowerCase(),B=!L||z===R;i.useEffect(()=>{k.open||(N(``),F(null))},[k.open]);let V=i.useCallback((e,t)=>{!e&&T&&I||O?.(e,t)},[O,T,I]),H=()=>{V(!1,void 0)},U=async()=>{if(!(!B||I)){if(F(null),!C){m&&H();return}try{j(!0),await C(),m&&H()}catch(e){F(x),S?.(e)}finally{j(!1)}}};return(0,o.jsxs)(r.Dialog,{onOpenChange:V,...k,children:[w,(0,o.jsxs)(r.DialogContent,{children:[(0,o.jsxs)(r.DialogHeader,{children:[(0,o.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:c}),(0,o.jsx)(r.DialogTitle,{children:e}),s?(0,o.jsx)(r.DialogDescription,{children:s}):null]}),L?(0,o.jsxs)(`div`,{className:`grid gap-2.5`,children:[(0,o.jsxs)(`div`,{className:`space-y-1`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium text-foreground`,children:g}),(0,o.jsx)(`p`,{className:`text-xs leading-5 text-muted-foreground`,children:v??(0,o.jsxs)(o.Fragment,{children:[`Type `,(0,o.jsx)(`span`,{className:`font-semibold text-foreground`,children:h}),` to continue.`]})})]}),(0,o.jsx)(n.Input,{value:M,onValueChange:N,placeholder:_??h,autoComplete:`off`,autoCapitalize:`off`,spellCheck:!1,"aria-invalid":P?!0:void 0,"aria-describedby":P?`alert-dialog-error`:void 0})]}):null,b?(0,o.jsx)(`div`,{className:`rounded-2xl border border-border/70 bg-muted/35 px-3.5 py-3 text-sm leading-6 text-muted-foreground`,children:b}):null,P?(0,o.jsx)(`div`,{id:`alert-dialog-error`,role:`alert`,"aria-live":`polite`,className:`rounded-2xl border border-destructive/20 bg-destructive/8 px-3.5 py-3 text-sm leading-6 text-destructive`,children:P}):null,(0,o.jsxs)(r.DialogFooter,{children:[(0,o.jsx)(r.DialogClose,{render:()=>(0,o.jsx)(t.Button,{type:`button`,variant:f,disabled:I,...D,children:l})}),(0,o.jsx)(t.Button,{type:`button`,variant:d===`destructive`?`destructive`:`default`,loading:I,disabled:!B||I,onClick:()=>void U(),...E,children:u})]})]})]})}exports.AlertDialog=s;

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

@@ -95,7 +95,7 @@ function m({ title: m = "Are you sure?", description: h, icon: g = /* @__PURE__
 				type: "button",
 				variant: y === "destructive" ? "destructive" : "default",
 				loading: W,
-				disabled: !J && !W,
+				disabled: !J || W,
 				onClick: () => void Z(),
 				...P,
 				children: v

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

@@ -1 +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;
+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:a=`Confirm`,confirmVariant:o=`default`,confirmDisabled:s=!1,cancelDisabled:c=!1,isLoading:l=!1,closeOnConfirm:u=!0,onConfirmError:d,onCancel:f,onConfirm:p,onOpenChange:m,...h}){let[g,_]=r.useState(!1),v=l||g,y=e=>{v&&e===!1||m?.(e)},b=()=>{f?.(),v||m?.(!1)},x=async()=>{if(!(s||v))try{_(!0),await p?.(),u&&m?.(!1)}catch(e){d?.(e)}finally{_(!1)}};return(0,i.jsx)(n.ModalShell,{showCloseButton:!v,onOpenChange:y,footer:(0,i.jsxs)(t.DialogActions,{children:[(0,i.jsx)(t.DialogActionButton,{type:`button`,variant:`outline`,disabled:c||v,onClick:b,children:e}),(0,i.jsx)(t.DialogActionButton,{type:`button`,variant:o,disabled:s||v,isLoading:v,onClick:()=>void x(),children:a})]}),...h})}exports.ConfirmDialog=a;

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

@@ -9,9 +9,11 @@ type ConfirmDialogProps = Omit<ModalShellProps, "footer"> & {
     confirmDisabled?: boolean;
     cancelDisabled?: boolean;
     isLoading?: boolean;
+    closeOnConfirm?: boolean;
+    onConfirmError?: (error: unknown) => void;
     onCancel?: () => void;
-    onConfirm?: () => void;
+    onConfirm?: () => void | Promise<void>;
 };
-declare function ConfirmDialog({ cancelText, confirmText, confirmVariant, confirmDisabled, cancelDisabled, isLoading, onCancel, onConfirm, onOpenChange, ...props }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ cancelText, confirmText, confirmVariant, confirmDisabled, cancelDisabled, isLoading, closeOnConfirm, onConfirmError, onCancel, onConfirm, onOpenChange, ...props }: ConfirmDialogProps): React.JSX.Element;
 export { ConfirmDialog };
 export type { ConfirmDialogProps };

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

@@ -1,32 +1,41 @@
 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";
+import * as r from "react";
+import { jsx as i, jsxs as a } 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, {
+function o({ cancelText: o = "Cancel", confirmText: s = "Confirm", confirmVariant: c = "default", confirmDisabled: l = !1, cancelDisabled: u = !1, isLoading: d = !1, closeOnConfirm: f = !0, onConfirmError: p, onCancel: m, onConfirm: h, onOpenChange: g, ..._ }) {
+	let [v, y] = r.useState(!1), b = d || v, x = (e) => {
+		b && e === !1 || g?.(e);
+	}, S = () => {
+		m?.(), b || g?.(!1);
+	}, C = async () => {
+		if (!(l || b)) try {
+			y(!0), await h?.(), f && g?.(!1);
+		} catch (e) {
+			p?.(e);
+		} finally {
+			y(!1);
+		}
+	};
+	return /* @__PURE__ */ i(n, {
+		showCloseButton: !b,
+		onOpenChange: x,
+		footer: /* @__PURE__ */ a(t, { children: [/* @__PURE__ */ i(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,
+			disabled: u || b,
+			onClick: S,
 			children: o
+		}), /* @__PURE__ */ i(e, {
+			type: "button",
+			variant: c,
+			disabled: l || b,
+			isLoading: b,
+			onClick: () => void C(),
+			children: s
 		})] }),
-		...m
+		..._
 	});
 }
 //#endregion
-export { a as ConfirmDialog };
+export { o as ConfirmDialog };

package/dist/components/overlay/drawer.cjs

@@ -1 +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)] data-open:slide-in-from-right data-closed:slide-out-to-right 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)] data-open:slide-in-from-left data-closed:slide-out-to-left 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)] data-open:slide-in-from-top data-closed:slide-out-to-top`,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)] data-open:slide-in-from-bottom data-closed:slide-out-to-bottom`};function s({trigger:e,title:n,description:i,side:s=`right`,footer:c,headerClassName:l,bodyClassName:u,footerClassName:d,contentClassName:f,showCloseButton:p=!0,children:m,...h}){return(0,a.jsxs)(r.Dialog,{...h,children:[e?(0,a.jsx)(r.DialogTrigger,{render:e}):null,(0,a.jsxs)(r.DialogContent,{size:`full`,showCloseButton:p,className:t.cn(`fixed grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0 p-0`,o[s],f),children:[(n||i)&&(0,a.jsxs)(r.DialogHeader,{className:t.cn(`border-b border-border/70 p-6`,l),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:t.cn(`min-h-0 flex-1 overflow-y-auto p-6`,u),children:m}),c?(0,a.jsx)(`div`,{"data-slot":`drawer-footer`,className:t.cn(`border-t border-border/70 p-5`,d),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;
+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 translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] data-open:slide-in-from-right data-closed:slide-out-to-right`,left:`left-0 top-0 h-dvh max-h-dvh w-full translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] data-open:slide-in-from-left data-closed:slide-out-to-left`,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)] data-open:slide-in-from-top data-closed:slide-out-to-top`,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)] data-open:slide-in-from-bottom data-closed:slide-out-to-bottom`},s={sm:`sm:max-w-sm`,md:`sm:max-w-md`,lg:`sm:max-w-lg`,xl:`sm:max-w-2xl`,full:`max-w-none sm:max-w-[min(100vw,72rem)]`};function c({trigger:e,title:n,description:i,side:c=`right`,width:l=`lg`,footer:u,headerClassName:d,bodyClassName:f,footerClassName:p,contentClassName:m,showCloseButton:h=!0,children:g,..._}){return(0,a.jsxs)(r.Dialog,{..._,children:[e?(0,a.jsx)(r.DialogTrigger,{render:e}):null,(0,a.jsxs)(r.DialogContent,{size:`full`,showCloseButton:h,"data-side":c,"data-width":l,className:t.cn(`fixed grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overscroll-contain p-0`,o[c],(c===`left`||c===`right`)&&s[l],m),children:[(n||i)&&(0,a.jsxs)(r.DialogHeader,{className:t.cn(`border-b border-border/70 p-6`,d),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:t.cn(`min-h-0 flex-1 overflow-y-auto p-6`,f),children:g}),u?(0,a.jsx)(`div`,{"data-slot":`drawer-footer`,className:t.cn(`border-t border-border/70 p-5`,p),children:u}):null]})]})}function l({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=c,exports.DrawerCloseButton=l;

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

@@ -2,11 +2,13 @@ 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 DrawerWidth = "sm" | "md" | "lg" | "xl" | "full";
 export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
     trigger?: React.ReactNode;
     title?: React.ReactNode;
     description?: React.ReactNode;
     side?: DrawerSide;
+    width?: DrawerWidth;
     footer?: React.ReactNode;
     headerClassName?: string;
     bodyClassName?: string;
@@ -15,6 +17,6 @@ export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children">
     showCloseButton?: boolean;
     children?: React.ReactNode;
 };
-declare function Drawer({ trigger, title, description, side, footer, headerClassName, bodyClassName, footerClassName, contentClassName, showCloseButton, children, ...props }: DrawerProps): React.JSX.Element;
+declare function Drawer({ trigger, title, description, side, width, footer, headerClassName, bodyClassName, footerClassName, contentClassName, showCloseButton, children, ...props }: DrawerProps): React.JSX.Element;
 declare function DrawerCloseButton({ children, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
 export { Drawer, DrawerCloseButton };