tembro 2.0.5 → 2.1.0

package/dist/components/modern/tour.js

@@ -1,52 +1,74 @@
 import { cn as e } from "../../lib/utils.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/modern/tour.tsx
-function r({ steps: r, index: i = 0, onIndexChange: a, onClose: o, className: s, ...c }) {
-	let l = r[i];
-	return l ? /* @__PURE__ */ t("div", {
+function i({ steps: i, index: a = 0, onIndexChange: o, onClose: s, onSkip: c, onFinish: l, placement: u = "bottom", className: d, ...f }) {
+	let p = i[a], m = t.useRef(null);
+	return t.useEffect(() => {
+		m.current?.focus();
+	}, [a]), p ? /* @__PURE__ */ n("div", {
+		ref: m,
 		"data-slot": "tour",
-		className: e("rounded-xl border bg-popover p-4 text-popover-foreground shadow-lg", s),
-		...c,
-		children: /* @__PURE__ */ n("div", {
+		"data-placement": u,
+		tabIndex: -1,
+		className: e("rounded-xl border bg-popover p-4 text-popover-foreground shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/40", d),
+		...f,
+		children: /* @__PURE__ */ r("div", {
 			className: "grid gap-2",
 			children: [
-				/* @__PURE__ */ t("div", {
+				/* @__PURE__ */ n("div", {
 					className: "font-semibold",
-					children: l.title
+					children: p.title
 				}),
-				l.description && /* @__PURE__ */ t("div", {
+				p.description && /* @__PURE__ */ n("div", {
 					className: "text-sm text-muted-foreground",
-					children: l.description
+					children: p.description
 				}),
-				/* @__PURE__ */ n("div", {
+				p.target && /* @__PURE__ */ n("div", {
+					className: "text-xs text-muted-foreground",
+					children: p.target
+				}),
+				/* @__PURE__ */ r("div", {
 					className: "flex items-center justify-between gap-3 pt-2",
-					children: [/* @__PURE__ */ n("span", {
+					children: [/* @__PURE__ */ r("span", {
 						className: "text-xs text-muted-foreground",
 						children: [
-							i + 1,
+							a + 1,
 							" / ",
-							r.length
+							i.length
 						]
-					}), /* @__PURE__ */ n("div", {
+					}), /* @__PURE__ */ r("div", {
 						className: "flex gap-2",
-						children: [/* @__PURE__ */ t("button", {
-							type: "button",
-							className: "rounded-md border px-2.5 py-1 text-sm",
-							disabled: i === 0,
-							onClick: () => a?.(i - 1),
-							children: "Back"
-						}), i < r.length - 1 ? /* @__PURE__ */ t("button", {
-							type: "button",
-							className: "rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground",
-							onClick: () => a?.(i + 1),
-							children: "Next"
-						}) : /* @__PURE__ */ t("button", {
-							type: "button",
-							className: "rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground",
-							onClick: o,
-							children: "Done"
-						})]
+						children: [
+							/* @__PURE__ */ n("button", {
+								type: "button",
+								className: "rounded-md border px-2.5 py-1 text-sm",
+								onClick: () => {
+									c?.(), s?.();
+								},
+								children: "Skip"
+							}),
+							/* @__PURE__ */ n("button", {
+								type: "button",
+								className: "rounded-md border px-2.5 py-1 text-sm",
+								disabled: a === 0,
+								onClick: () => o?.(a - 1),
+								children: "Back"
+							}),
+							a < i.length - 1 ? /* @__PURE__ */ n("button", {
+								type: "button",
+								className: "rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground",
+								onClick: () => o?.(a + 1),
+								children: "Next"
+							}) : /* @__PURE__ */ n("button", {
+								type: "button",
+								className: "rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground",
+								onClick: () => {
+									l?.(), s?.();
+								},
+								children: "Done"
+							})
+						]
 					})]
 				})
 			]
@@ -54,4 +76,4 @@ function r({ steps: r, index: i = 0, onIndexChange: a, onClose: o, className: s,
 	}) : null;
 }
 //#endregion
-export { r as Tour };
+export { i as Tour };

package/dist/components/navigation/command-bar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({open:e=!0,position:n=`bottom`,children:i,className:a,...o}){return e?(0,r.jsx)(`div`,{"data-slot":`command-bar`,className:t.cn(`fixed left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-background/95 px-4 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/60`,n===`bottom`?`bottom-6`:`top-6`,a),...o,children:i}):null}exports.CommandBar=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({open:e=!0,position:n=`bottom`,grouped:i=!1,label:a,children:o,className:s,...c}){return e?(0,r.jsxs)(`div`,{"data-slot":`command-bar`,className:t.cn(`fixed left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-background/95 px-4 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/60`,n===`bottom`?`bottom-6`:`top-6`,i&&`gap-3 rounded-[28px] px-3 py-2.5`,s),...c,children:[a?(0,r.jsx)(`span`,{className:`text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground`,children:a}):null,o]}):null}exports.CommandBar=i;

package/dist/components/navigation/command-bar.d.ts

@@ -3,6 +3,8 @@ export type CommandBarProps = React.ComponentProps<"div"> & {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     position?: "bottom" | "top";
+    grouped?: boolean;
+    label?: React.ReactNode;
 };
-declare function CommandBar({ open, position, children, className, ...props }: CommandBarProps): React.JSX.Element | null;
+declare function CommandBar({ open, position, grouped, label, children, className, ...props }: CommandBarProps): React.JSX.Element | null;
 export { CommandBar };

package/dist/components/navigation/command-bar.js

@@ -1,14 +1,17 @@
 import { cn as e } from "../../lib/utils.js";
 import "react";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/navigation/command-bar.tsx
-function n({ open: n = !0, position: r = "bottom", children: i, className: a, ...o }) {
-	return n ? /* @__PURE__ */ t("div", {
+function r({ open: r = !0, position: i = "bottom", grouped: a = !1, label: o, children: s, className: c, ...l }) {
+	return r ? /* @__PURE__ */ n("div", {
 		"data-slot": "command-bar",
-		className: e("fixed left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-background/95 px-4 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/60", r === "bottom" ? "bottom-6" : "top-6", a),
-		...o,
-		children: i
+		className: e("fixed left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-background/95 px-4 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/60", i === "bottom" ? "bottom-6" : "top-6", a && "gap-3 rounded-[28px] px-3 py-2.5", c),
+		...l,
+		children: [o ? /* @__PURE__ */ t("span", {
+			className: "text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground",
+			children: o
+		}) : null, s]
 	}) : null;
 }
 //#endregion
-export { n as CommandBar };
+export { r as CommandBar };

package/dist/components/navigation/demo.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`pagination`,`Pagination`,`navigation`,`Controlled page navigation with edge buttons and active state.`),e.component(`nav-tabs`,`NavTabs`,`navigation`,`Navigation tabs for switching related document sections.`),e.component(`anchor-nav`,`AnchorNav`,`navigation`,`Section jump navigation for long detail pages.`),e.component(`page-tabs`,`PageTabs`,`navigation`,`Top-level page tab strip for route-sized sections.`),e.component(`stepper-tabs`,`StepperTabs`,`navigation`,`Step-like tabs for setup and onboarding progress.`)]);exports.navigationShowcaseDemoRegistry=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`pagination`,`Pagination`,`navigation`,`Controlled page navigation with edge buttons and active state.`),e.component(`nav-tabs`,`NavTabs`,`navigation`,`Navigation tabs for switching related document sections.`),e.component(`page-tabs`,`PageTabs`,`navigation`,`Top-level page tab strip for route-sized sections.`),e.component(`stepper-tabs`,`StepperTabs`,`navigation`,`Step-like tabs for setup and onboarding progress.`)]);exports.navigationShowcaseDemoRegistry=t;

package/dist/components/navigation/demo.js

@@ -3,7 +3,6 @@ import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/
 var n = t([
 	e("pagination", "Pagination", "navigation", "Controlled page navigation with edge buttons and active state."),
 	e("nav-tabs", "NavTabs", "navigation", "Navigation tabs for switching related document sections."),
-	e("anchor-nav", "AnchorNav", "navigation", "Section jump navigation for long detail pages."),
 	e("page-tabs", "PageTabs", "navigation", "Top-level page tab strip for route-sized sections."),
 	e("stepper-tabs", "StepperTabs", "navigation", "Step-like tabs for setup and onboarding progress.")
 ]);

package/dist/components/navigation/nav-tabs.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i={sm:`h-8 px-3 text-xs`,default:`h-10 px-4 text-sm`,lg:`h-11 px-5 text-base`};function a({items:e,value:n,onValueChange:a,size:o=`default`,fullWidth:s=!1,className:c,...l}){return(0,r.jsx)(`div`,{"data-slot":`nav-tabs`,className:t.cn(`inline-flex rounded-[var(--radius-xl)] border border-border/80 bg-muted/45 p-1`,s&&`w-full`,c),...l,children:e.map(e=>{let c=e.value===n,l=(0,r.jsxs)(r.Fragment,{children:[e.icon?(0,r.jsx)(`span`,{className:`[&_svg]:size-4`,children:e.icon}):null,(0,r.jsx)(`span`,{className:`truncate`,children:e.label})]}),u=t.cn(`inline-flex items-center justify-center gap-2 rounded-[calc(var(--radius-xl)-4px)] font-medium text-muted-foreground transition hover:text-foreground disabled:pointer-events-none disabled:opacity-50`,i[o],s&&`flex-1`,c&&`bg-background text-foreground shadow-sm`);return e.href?(0,r.jsx)(`a`,{href:e.href,"aria-current":c?`page`:void 0,className:u,children:l},e.value):(0,r.jsx)(`button`,{type:`button`,disabled:e.disabled,className:u,onClick:()=>a?.(e.value),children:l},e.value)})})}exports.NavTabs=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/tabs/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={sm:`h-8 px-3 text-xs`,default:`h-10 px-4 text-sm`,lg:`h-11 px-5 text-base`};function o({items:e,value:r,onValueChange:o,size:s=`default`,fullWidth:c=!1,className:l,...u}){return(0,i.jsx)(n.Tabs,{value:r,onValueChange:e=>o?.(String(e)),"data-slot":`nav-tabs`,className:t.cn(`min-w-0`,c&&`w-full`,l),...u,children:(0,i.jsx)(n.TabsList,{"data-slot":`nav-tabs-list`,variant:`pills`,overflow:`scroll`,className:t.cn(c&&`w-full`),children:e.map(e=>{let l=e.value===r,u=(0,i.jsxs)(i.Fragment,{children:[e.icon?(0,i.jsx)(`span`,{className:`[&_svg]:size-4`,children:e.icon}):null,(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]}),d=t.cn(`min-w-0 disabled:pointer-events-none disabled:opacity-50`,a[s],c&&`flex-1`,l&&`bg-background text-foreground shadow-sm`);return e.href?(0,i.jsx)(n.TabsTrigger,{value:e.value,render:(0,i.jsx)(`a`,{href:e.href,"aria-current":l?`page`:void 0,className:d}),children:u},e.value):(0,i.jsx)(n.TabsTrigger,{value:e.value,disabled:e.disabled,className:d,onClick:()=>o?.(e.value),children:u},e.value)})})})}exports.NavTabs=o;

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

@@ -1,39 +1,51 @@
 import { cn as e } from "../../lib/utils.js";
+import { Tabs as t, TabsList as n, TabsTrigger as r } from "../ui/tabs/index.js";
 import "react";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/navigation/nav-tabs.tsx
-var i = {
+var s = {
 	sm: "h-8 px-3 text-xs",
 	default: "h-10 px-4 text-sm",
 	lg: "h-11 px-5 text-base"
 };
-function a({ items: a, value: o, onValueChange: s, size: c = "default", fullWidth: l = !1, className: u, ...d }) {
-	return /* @__PURE__ */ n("div", {
+function c({ items: c, value: l, onValueChange: u, size: d = "default", fullWidth: f = !1, className: p, ...m }) {
+	return /* @__PURE__ */ a(t, {
+		value: l,
+		onValueChange: (e) => u?.(String(e)),
 		"data-slot": "nav-tabs",
-		className: e("inline-flex rounded-[var(--radius-xl)] border border-border/80 bg-muted/45 p-1", l && "w-full", u),
-		...d,
-		children: a.map((a) => {
-			let u = a.value === o, d = /* @__PURE__ */ r(t, { children: [a.icon ? /* @__PURE__ */ n("span", {
-				className: "[&_svg]:size-4",
-				children: a.icon
-			}) : null, /* @__PURE__ */ n("span", {
-				className: "truncate",
-				children: a.label
-			})] }), f = e("inline-flex items-center justify-center gap-2 rounded-[calc(var(--radius-xl)-4px)] font-medium text-muted-foreground transition hover:text-foreground disabled:pointer-events-none disabled:opacity-50", i[c], l && "flex-1", u && "bg-background text-foreground shadow-sm");
-			return a.href ? /* @__PURE__ */ n("a", {
-				href: a.href,
-				"aria-current": u ? "page" : void 0,
-				className: f,
-				children: d
-			}, a.value) : /* @__PURE__ */ n("button", {
-				type: "button",
-				disabled: a.disabled,
-				className: f,
-				onClick: () => s?.(a.value),
-				children: d
-			}, a.value);
+		className: e("min-w-0", f && "w-full", p),
+		...m,
+		children: /* @__PURE__ */ a(n, {
+			"data-slot": "nav-tabs-list",
+			variant: "pills",
+			overflow: "scroll",
+			className: e(f && "w-full"),
+			children: c.map((t) => {
+				let n = t.value === l, c = /* @__PURE__ */ o(i, { children: [t.icon ? /* @__PURE__ */ a("span", {
+					className: "[&_svg]:size-4",
+					children: t.icon
+				}) : null, /* @__PURE__ */ a("span", {
+					className: "truncate",
+					children: t.label
+				})] }), p = e("min-w-0 disabled:pointer-events-none disabled:opacity-50", s[d], f && "flex-1", n && "bg-background text-foreground shadow-sm");
+				return t.href ? /* @__PURE__ */ a(r, {
+					value: t.value,
+					render: /* @__PURE__ */ a("a", {
+						href: t.href,
+						"aria-current": n ? "page" : void 0,
+						className: p
+					}),
+					children: c
+				}, t.value) : /* @__PURE__ */ a(r, {
+					value: t.value,
+					disabled: t.disabled,
+					className: p,
+					onClick: () => u?.(t.value),
+					children: c
+				}, t.value);
+			})
 		})
 	});
 }
 //#endregion
-export { a as NavTabs };
+export { c as NavTabs };

package/dist/components/navigation/page-tabs.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/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a({value:e,items:r,onValueChange:a,variant:o=`underline`,size:s=`default`,className:c,...l}){let u=r.filter(e=>!e.hidden);return(0,i.jsx)(`div`,{"data-slot":`page-tabs`,"data-variant":o,className:t.cn(`flex min-w-0 flex-wrap gap-1.5 border-b border-border/70`,o===`pills`&&`rounded-full border border-border/75 bg-muted/22 p-1 shadow-[0_1px_0_rgba(255,255,255,0.04)]`,o===`cards`&&`gap-2 border-b-0`,o!==`underline`&&`border-b-0`,c),...l,children:u.map(r=>{let c=r.value===e;return(0,i.jsxs)(`button`,{type:`button`,disabled:r.disabled,"data-slot":`page-tab`,"data-active":c||void 0,className:t.cn(`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`,s===`sm`?`h-8`:`h-10`,o===`underline`&&`rounded-none border-b-2 border-transparent px-1 text-muted-foreground hover:text-foreground`,o===`underline`&&c&&`border-primary text-foreground`,o===`pills`&&`text-muted-foreground hover:bg-background/72 hover:text-foreground`,o===`pills`&&c&&`bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground`,o===`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`,o===`cards`&&c&&`border-primary/50 bg-primary/7 text-foreground`),onClick:()=>a?.(r.value,r),children:[r.icon,(0,i.jsx)(`span`,{className:`truncate`,children:r.label}),r.badge!==void 0&&(0,i.jsx)(n.Badge,{variant:c&&o===`pills`?`secondary`:`outline`,className:`rounded-full`,children:r.badge})]},r.value)})})}exports.PageTabs=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/badge/index.cjs"),r=require("../ui/tabs/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");function o({value:e,items:i,onValueChange:o,variant:s=`underline`,size:c=`default`,className:l,...u}){let d=i.filter(e=>!e.hidden);return(0,a.jsx)(r.Tabs,{value:e,onValueChange:e=>{let t=d.find(t=>t.value===e);t&&o?.(t.value,t)},"data-slot":`page-tabs`,"data-variant":s,className:t.cn(`min-w-0`,l),...u,children:(0,a.jsx)(r.TabsList,{"data-slot":`page-tabs-list`,variant:s===`underline`?`underline`:`pills`,overflow:`scroll`,className:t.cn(`w-full`,s===`cards`&&`gap-2 border-0 bg-transparent p-0 shadow-none`),children:d.map(i=>{let o=i.value===e;return(0,a.jsxs)(r.TabsTrigger,{disabled:i.disabled,value:i.value,"data-slot":`page-tab`,"data-active":o||void 0,className:t.cn(`min-w-0 px-3 disabled:pointer-events-none disabled:opacity-50`,c===`sm`?`h-8`:`h-10`,s===`underline`&&`px-1`,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`&&o&&`border-primary/50 bg-primary/7 text-foreground`),children:[i.icon,(0,a.jsx)(`span`,{className:`truncate`,children:i.label}),i.badge!==void 0&&(0,a.jsx)(n.Badge,{variant:o&&s===`pills`?`secondary`:`outline`,className:`rounded-full`,children:i.badge})]},i.value)})})})}exports.PageTabs=o;

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 };