tembro 3.0.0 → 3.1.5

package/dist/src/showcase/premium/notification-center/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/notification-center/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { NotificationCenter } from \"tembro\"\n\nexport function Example() {\n  const [items, setItems] = React.useState([\n    { id: \"1\", title: \"Invoice paid\", description: \"Acme Growth settled invoice #2048.\", time: \"2m ago\", read: false },\n    { id: \"2\", title: \"Deployment ready\", description: \"Release candidate passed checks.\", time: \"12m ago\", read: true },\n  ])\n\n  return (\n    <NotificationCenter\n      notifications={items}\n      onMarkAllRead={() => setItems((current) => current.map((item) => ({ ...item, read: true })))}\n    />\n  )\n}",
+	highlights: [
+		"Unread count badge",
+		"Mark all read action",
+		"Popover-based notification list",
+		"Compact header action surface"
+	],
+	scenarios: [
+		{
+			title: "Workspace updates",
+			description: "Show billing, deployment, or access events in one compact center."
+		},
+		{
+			title: "Admin dashboard",
+			description: "Expose unread tasks without forcing a full dedicated route."
+		},
+		{
+			title: "Operational alerts",
+			description: "Let users clear or inspect events directly from the header."
+		}
+	],
+	capabilityNotes: [
+		"Notification center is best for short, recent events that require optional follow-up.",
+		"Unread count should reflect genuinely actionable items.",
+		"Avoid treating this as a dumping ground for every system message."
+	]
+};
+//#endregion
+export { e as notificationCenterMock };

package/dist/src/showcase/premium/notification-center/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/notifications/notification-center.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,o=[{id:`1`,title:`Invoice paid`,description:`Acme Growth settled invoice #2048.`,time:`2m ago`,read:!1,group:`Today`},{id:`2`,title:`Deployment ready`,description:`Release candidate passed checks and waits for promotion.`,time:`12m ago`,read:!1,group:`Today`},{id:`3`,title:`Member invited`,description:`Operations workspace access was sent to Dilshod.`,time:`1h ago`,read:!0,group:`Earlier`}];function s({mode:e}){let[s,c]=r.useState(o),l=s.filter(e=>!e.read).length;return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Header utility`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`NotificationCenter should summarize recent action without becoming a second inbox`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This control works when unread counts are honest and the list stays short, recent, and directly actionable.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Unread count`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Popover feed`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Live notification trigger`}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Open the bell and inspect unread items.`})]}),(0,i.jsx)(n.NotificationCenter,{notifications:s,onMarkAllRead:()=>c(e=>e.map(e=>({...e,read:!0}))),onClearAll:()=>c([]),onNotificationClick:e=>c(t=>t.map(t=>t.id===e.id?{...t,read:!0}:t))})]})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Unread items`}),(0,i.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:l})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Put only high-signal events here. If users need filters, threads, or archives, that usually means they need a dedicated notifications route.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:"Bell ichidagi itemga bosilsa read bo‘ladi, `Mark all read` esa hammasini tozalaydi."})}):null]})}exports.NotificationCenterShowcase=s;

package/dist/src/showcase/premium/notification-center/showcase.js

@@ -0,0 +1,128 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { NotificationCenter as t } from "../../../components/notifications/notification-center.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/notification-center/showcase.tsx
+var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", o = [
+	{
+		id: "1",
+		title: "Invoice paid",
+		description: "Acme Growth settled invoice #2048.",
+		time: "2m ago",
+		read: !1,
+		group: "Today"
+	},
+	{
+		id: "2",
+		title: "Deployment ready",
+		description: "Release candidate passed checks and waits for promotion.",
+		time: "12m ago",
+		read: !1,
+		group: "Today"
+	},
+	{
+		id: "3",
+		title: "Member invited",
+		description: "Operations workspace access was sent to Dilshod.",
+		time: "1h ago",
+		read: !0,
+		group: "Earlier"
+	}
+];
+function s({ mode: s }) {
+	let [c, l] = n.useState(o), u = c.filter((e) => !e.read).length;
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ r("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ i("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ r("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Header utility"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "NotificationCenter should summarize recent action without becoming a second inbox"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "This control works when unread counts are honest and the list stays short, recent, and directly actionable."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Unread count"
+						}), /* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Popover feed"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ i("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Live notification trigger"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Open the bell and inspect unread items."
+					})] }), /* @__PURE__ */ r(t, {
+						notifications: c,
+						onMarkAllRead: () => l((e) => e.map((e) => ({
+							...e,
+							read: !0
+						}))),
+						onClearAll: () => l([]),
+						onNotificationClick: (e) => l((t) => t.map((t) => t.id === e.id ? {
+							...t,
+							read: !0
+						} : t))
+					})]
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Unread items"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+						children: u
+					})]
+				}), /* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Usage note"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-sm leading-6 aui-text-muted",
+						children: "Put only high-signal events here. If users need filters, threads, or archives, that usually means they need a dedicated notifications route."
+					})]
+				})]
+			}),
+			s === "playground" ? /* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r("p", {
+					className: "text-sm aui-text-muted",
+					children: "Bell ichidagi itemga bosilsa read bo‘ladi, `Mark all read` esa hammasini tozalaydi."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { s as NotificationCenterShowcase };

package/dist/src/showcase/premium/otp-input/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.OtpInputShowcase=e.OtpInputShowcase,exports.otpInputMock=t.otpInputMock;

package/dist/src/showcase/premium/otp-input/index.js

@@ -0,0 +1,3 @@
+import { OtpInputShowcase as e } from "./showcase.js";
+import { otpInputMock as t } from "./mock.js";
+export { e as OtpInputShowcase, t as otpInputMock };

package/dist/src/showcase/premium/otp-input/mock.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { OtpInput } from "tembro"
+
+export function Example() {
+  const [code, setCode] = React.useState("")
+
+  return (
+    <OtpInput
+      value={code}
+      onValueChange={setCode}
+      length={6}
+    />
+  )
+}`,highlights:[`Fixed-length code entry`,`Auto-advance focus`,`Paste handling`,`Good for 2FA and verification flows`],scenarios:[{title:`Login verification`,description:`Capture a 2FA code without forcing users through one input character at a time manually.`},{title:`Sensitive action confirm`,description:`Verify a short access code before dangerous changes.`},{title:`Invite acceptance`,description:`Handle compact confirmation codes in onboarding flows.`}],capabilityNotes:[`OTP is for short fixed codes, not general PIN builders with complex rules.`,`Paste support matters because users often copy codes from mail or authenticator apps.`,`Keep the surrounding copy minimal and precise.`]};exports.otpInputMock=e;

package/dist/src/showcase/premium/otp-input/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/otp-input/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { OtpInput } from \"tembro\"\n\nexport function Example() {\n  const [code, setCode] = React.useState(\"\")\n\n  return (\n    <OtpInput\n      value={code}\n      onValueChange={setCode}\n      length={6}\n    />\n  )\n}",
+	highlights: [
+		"Fixed-length code entry",
+		"Auto-advance focus",
+		"Paste handling",
+		"Good for 2FA and verification flows"
+	],
+	scenarios: [
+		{
+			title: "Login verification",
+			description: "Capture a 2FA code without forcing users through one input character at a time manually."
+		},
+		{
+			title: "Sensitive action confirm",
+			description: "Verify a short access code before dangerous changes."
+		},
+		{
+			title: "Invite acceptance",
+			description: "Handle compact confirmation codes in onboarding flows."
+		}
+	],
+	capabilityNotes: [
+		"OTP is for short fixed codes, not general PIN builders with complex rules.",
+		"Paste support matters because users often copy codes from mail or authenticator apps.",
+		"Keep the surrounding copy minimal and precise."
+	]
+};
+//#endregion
+export { e as otpInputMock };

package/dist/src/showcase/premium/otp-input/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/inputs/otp-input.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({mode:e}){let[o,s]=r.useState(``);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Verification input`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`OtpInput should make fixed-code entry feel automatic`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Users should not wrestle with focus or manual cell management. Paste and auto-advance behavior are the main value here.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Auto advance`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Paste aware`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(n.OtpInput,{value:o,onValueChange:s,length:6})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current code`}),(0,i.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:o||`No code entered`})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Usage note`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Bir martalik tasdiqlash kodlari uchun ishlating. Odatda 4-6 belgili verification yoki 2FA oqimlarida eng foydali.`})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`p`,{className:`text-sm aui-text-muted`,children:`Clipboarddan 6 xonali kod paste qilib ham tekshirib ko‘ring.`})}):null]})}exports.OtpInputShowcase=o;

package/dist/src/showcase/premium/otp-input/showcase.js

@@ -0,0 +1,87 @@
+import { Badge as e } from "../../../components/ui/badge/index.js";
+import { OtpInput as t } from "../../../components/inputs/otp-input.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/otp-input/showcase.tsx
+var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function o({ mode: o }) {
+	let [s, c] = n.useState("");
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ r("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ i("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ r("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Verification input"
+							}),
+							/* @__PURE__ */ r("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "OtpInput should make fixed-code entry feel automatic"
+							}),
+							/* @__PURE__ */ r("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Users should not wrestle with focus or manual cell management. Paste and auto-advance behavior are the main value here."
+							})
+						]
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Auto advance"
+						}), /* @__PURE__ */ r(e, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Paste aware"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r(t, {
+					value: s,
+					onValueChange: c,
+					length: 6
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Current code"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-base font-medium aui-text-strong",
+						children: s || "No code entered"
+					})]
+				}), /* @__PURE__ */ i("section", {
+					className: a,
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Usage note"
+					}), /* @__PURE__ */ r("p", {
+						className: "mt-3 text-sm leading-6 aui-text-muted",
+						children: "Bir martalik tasdiqlash kodlari uchun ishlating. Odatda 4-6 belgili verification yoki 2FA oqimlarida eng foydali."
+					})]
+				})]
+			}),
+			o === "playground" ? /* @__PURE__ */ r("section", {
+				className: a,
+				children: /* @__PURE__ */ r("p", {
+					className: "text-sm aui-text-muted",
+					children: "Clipboarddan 6 xonali kod paste qilib ham tekshirib ko‘ring."
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { o as OtpInputShowcase };

package/dist/src/showcase/premium/page-state/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.PageStateShowcase=e.PageStateShowcase,exports.pageStateMock=t.pageStateMock;

package/dist/src/showcase/premium/page-state/index.js

@@ -0,0 +1,3 @@
+import { PageStateShowcase as e } from "./showcase.js";
+import { pageStateMock as t } from "./mock.js";
+export { e as PageStateShowcase, t as pageStateMock };

package/dist/src/showcase/premium/page-state/mock.cjs

@@ -0,0 +1,15 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Button, InlineState, PageState } from "tembro"
+
+export function Example() {
+  return (
+    <>
+      <PageState
+        tone="error"
+        title="Connection failed"
+        description="We could not sync workspace usage. Retry after restoring the API token."
+        action={<Button variant="outline">Retry sync</Button>}
+      />
+      <InlineState tone="empty" title="No comments" onRetry={() => refetch()} />
+    </>
+  )
+}`,highlights:[`Full-page and compact inline surfaces`,`Empty, loading, success, info, and error flows`,`Retry and custom action support`,`Accessible status and alert roles`],scenarios:[{title:`No data yet`,description:`Guide the first useful action when a route has no content.`},{title:`Load failed`,description:`Keep retry and explanation visible without dropping the user into confusion.`},{title:`Completed workflow`,description:`Confirm a decisive outcome after setup or publish flows.`}],capabilityNotes:[`Use page-state for route-level outcomes, not inline warnings.`,`Keep one primary next step visible.`,`Choose tone by outcome, not by brand color preference.`]};exports.pageStateMock=e;

package/dist/src/showcase/premium/page-state/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/page-state/mock.ts
+var e = {
+	code: "import { Button, InlineState, PageState } from \"tembro\"\n\nexport function Example() {\n  return (\n    <>\n      <PageState\n        tone=\"error\"\n        title=\"Connection failed\"\n        description=\"We could not sync workspace usage. Retry after restoring the API token.\"\n        action={<Button variant=\"outline\">Retry sync</Button>}\n      />\n      <InlineState tone=\"empty\" title=\"No comments\" onRetry={() => refetch()} />\n    </>\n  )\n}",
+	highlights: [
+		"Full-page and compact inline surfaces",
+		"Empty, loading, success, info, and error flows",
+		"Retry and custom action support",
+		"Accessible status and alert roles"
+	],
+	scenarios: [
+		{
+			title: "No data yet",
+			description: "Guide the first useful action when a route has no content."
+		},
+		{
+			title: "Load failed",
+			description: "Keep retry and explanation visible without dropping the user into confusion."
+		},
+		{
+			title: "Completed workflow",
+			description: "Confirm a decisive outcome after setup or publish flows."
+		}
+	],
+	capabilityNotes: [
+		"Use page-state for route-level outcomes, not inline warnings.",
+		"Keep one primary next step visible.",
+		"Choose tone by outcome, not by brand color preference."
+	]
+};
+//#endregion
+export { e as pageStateMock };

package/dist/src/showcase/premium/page-state/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/feedback/page-state.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,s=[`empty`,`loading`,`error`,`success`,`info`];function c({mode:e}){let[c,l]=i.useState(2),[u,d]=i.useState(`No action triggered yet`),[f,p]=i.useState(0),m=s[c]??`error`;return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Route feedback`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`PageState should explain the route outcome immediately`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`When the page is empty, blocked, loading, or complete, the user should understand what happened and what to do next in one glance.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Route-level`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Outcome first`})]})]})}),(0,a.jsx)(r.PageState,{tone:m,title:m===`empty`?`No invoices found`:m===`loading`?`Preparing workspace`:m===`error`?`Connection failed`:m===`success`?`Workspace connected`:`Sync started`,description:m===`empty`?`Create the first invoice to unlock exports, reminders, and payment tracking.`:m===`loading`?`We are syncing permissions and bringing the latest workspace data into this route.`:m===`error`?`We could not sync workspace usage. Retry after restoring the API token.`:m===`success`?`The workspace is ready and the team can continue with the next operational step.`:`Background sync is running. You can keep working while updates are processed.`,action:m===`loading`?void 0:(0,a.jsx)(t.Button,{variant:m===`error`?`outline`:`default`,onClick:()=>d(`${m} action completed`),children:m===`empty`?`Create invoice`:m===`error`?`Retry sync`:m===`success`?`Open dashboard`:`View progress`}),extra:m===`error`?(0,a.jsx)(t.Button,{variant:`ghost`,onClick:()=>d(`Logs opened`),children:`Open logs`}):void 0}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-2`,children:[(0,a.jsx)(r.InlineState,{tone:`error`,title:`Widget unavailable`,description:`Compact retry state. Attempts: ${f}`,retryLabel:`Retry widget`,onRetry:()=>p(e=>e+1)}),(0,a.jsx)(r.InlineState,{tone:`success`,title:`Changes published`,description:`Use the compact surface inside a section without replacing the whole route.`,action:(0,a.jsx)(t.Button,{size:`sm`,onClick:()=>d(`Published changes opened`),children:`View changes`})})]}),(0,a.jsx)(`p`,{"aria-live":`polite`,className:`mt-4 text-sm aui-text-muted`,children:u})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:s.map((e,n)=>(0,a.jsx)(t.Button,{size:`sm`,variant:c===n?`default`:`outline`,onClick:()=>l(n),children:e},e))})}):null]})}exports.PageStateShowcase=c;

package/dist/src/showcase/premium/page-state/showcase.js

@@ -0,0 +1,110 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { InlineState as n, PageState as r } from "../../../components/feedback/page-state.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/showcase/premium/page-state/showcase.tsx
+var s = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", c = [
+	"empty",
+	"loading",
+	"error",
+	"success",
+	"info"
+];
+function l({ mode: l }) {
+	let [u, d] = i.useState(2), [f, p] = i.useState("No action triggered yet"), [m, h] = i.useState(0), g = c[u] ?? "error";
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ a("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ o("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ o("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ a("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Route feedback"
+							}),
+							/* @__PURE__ */ a("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "PageState should explain the route outcome immediately"
+							}),
+							/* @__PURE__ */ a("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "When the page is empty, blocked, loading, or complete, the user should understand what happened and what to do next in one glance."
+							})
+						]
+					}), /* @__PURE__ */ o("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ a(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Route-level"
+						}), /* @__PURE__ */ a(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Outcome first"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ a(r, {
+				tone: g,
+				title: g === "empty" ? "No invoices found" : g === "loading" ? "Preparing workspace" : g === "error" ? "Connection failed" : g === "success" ? "Workspace connected" : "Sync started",
+				description: g === "empty" ? "Create the first invoice to unlock exports, reminders, and payment tracking." : g === "loading" ? "We are syncing permissions and bringing the latest workspace data into this route." : g === "error" ? "We could not sync workspace usage. Retry after restoring the API token." : g === "success" ? "The workspace is ready and the team can continue with the next operational step." : "Background sync is running. You can keep working while updates are processed.",
+				action: g === "loading" ? void 0 : /* @__PURE__ */ a(e, {
+					variant: g === "error" ? "outline" : "default",
+					onClick: () => p(`${g} action completed`),
+					children: g === "empty" ? "Create invoice" : g === "error" ? "Retry sync" : g === "success" ? "Open dashboard" : "View progress"
+				}),
+				extra: g === "error" ? /* @__PURE__ */ a(e, {
+					variant: "ghost",
+					onClick: () => p("Logs opened"),
+					children: "Open logs"
+				}) : void 0
+			}),
+			/* @__PURE__ */ o("section", {
+				className: s,
+				children: [/* @__PURE__ */ o("div", {
+					className: "grid gap-4 lg:grid-cols-2",
+					children: [/* @__PURE__ */ a(n, {
+						tone: "error",
+						title: "Widget unavailable",
+						description: `Compact retry state. Attempts: ${m}`,
+						retryLabel: "Retry widget",
+						onRetry: () => h((e) => e + 1)
+					}), /* @__PURE__ */ a(n, {
+						tone: "success",
+						title: "Changes published",
+						description: "Use the compact surface inside a section without replacing the whole route.",
+						action: /* @__PURE__ */ a(e, {
+							size: "sm",
+							onClick: () => p("Published changes opened"),
+							children: "View changes"
+						})
+					})]
+				}), /* @__PURE__ */ a("p", {
+					"aria-live": "polite",
+					className: "mt-4 text-sm aui-text-muted",
+					children: f
+				})]
+			}),
+			l === "playground" ? /* @__PURE__ */ a("section", {
+				className: s,
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: c.map((t, n) => /* @__PURE__ */ a(e, {
+						size: "sm",
+						variant: u === n ? "default" : "outline",
+						onClick: () => d(n),
+						children: t
+					}, t))
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { l as PageStateShowcase };

package/dist/src/showcase/premium/pagination/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.PaginationShowcase=e.PaginationShowcase,exports.paginationMock=t.paginationMock;

package/dist/src/showcase/premium/pagination/index.js

@@ -0,0 +1,3 @@
+import { PaginationShowcase as e } from "./showcase.js";
+import { paginationMock as t } from "./mock.js";
+export { e as PaginationShowcase, t as paginationMock };

package/dist/src/showcase/premium/pagination/mock.cjs

@@ -0,0 +1,15 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { Pagination } from "tembro"
+
+export function Example() {
+  const [page, setPage] = React.useState(6)
+
+  return (
+    <Pagination
+      page={page}
+      pageCount={18}
+      onPageChange={setPage}
+      showEdges
+    />
+  )
+}`,highlights:[`Controlled page state`,`First/last edge actions`,`Ellipsis generation for large datasets`,`Compact navigation for tables and audit logs`],scenarios:[{title:`Orders table`,description:`Switch through long operational tables without losing search and filters.`},{title:`Audit trail`,description:`Keep log browsing compact while preserving direct jumps to early and late pages.`},{title:`Review queue`,description:`Let teams move page-by-page through pending approvals.`}],capabilityNotes:[`Keep pagination controlled so URL params or table state remain the source of truth.`,"Use `showEdges` when the dataset spans many pages.",`Pair with visible total count so users know how far they are in the list.`]};exports.paginationMock=e;

package/dist/src/showcase/premium/pagination/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/pagination/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { Pagination } from \"tembro\"\n\nexport function Example() {\n  const [page, setPage] = React.useState(6)\n\n  return (\n    <Pagination\n      page={page}\n      pageCount={18}\n      onPageChange={setPage}\n      showEdges\n    />\n  )\n}",
+	highlights: [
+		"Controlled page state",
+		"First/last edge actions",
+		"Ellipsis generation for large datasets",
+		"Compact navigation for tables and audit logs"
+	],
+	scenarios: [
+		{
+			title: "Orders table",
+			description: "Switch through long operational tables without losing search and filters."
+		},
+		{
+			title: "Audit trail",
+			description: "Keep log browsing compact while preserving direct jumps to early and late pages."
+		},
+		{
+			title: "Review queue",
+			description: "Let teams move page-by-page through pending approvals."
+		}
+	],
+	capabilityNotes: [
+		"Keep pagination controlled so URL params or table state remain the source of truth.",
+		"Use `showEdges` when the dataset spans many pages.",
+		"Pair with visible total count so users know how far they are in the list."
+	]
+};
+//#endregion
+export { e as paginationMock };

package/dist/src/showcase/premium/pagination/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/navigation/pagination.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function o({mode:e}){let[o,s]=r.useState(6),[c,l]=r.useState(18),[u,d]=r.useState(!0),[f,p]=r.useState(20);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Navigation control`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Pagination should preserve context while moving through data`}),(0,i.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Good pagination feels quiet: the active page is obvious, edge jumps are available, and large datasets collapse into readable ellipsis states.`})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`}),(0,i.jsx)(t.Badge,{variant:`outline`,className:`rounded-full`,children:`Large lists`})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Review queue pages`}),(0,i.jsxs)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:[`Showing page `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:o}),` of `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:c}),`.`]})]}),(0,i.jsx)(n.Pagination,{page:o,pageCount:c,onPageChange:s,showEdges:u,totalCount:c*f,pageSize:f,pageSizeOptions:[10,20,50],onPageSizeChange:p,showSummary:!0})]})}),(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Why this matters`}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,i.jsx)(`p`,{children:`Tables, audit trails, and inboxes all need stable navigation that does not compete with the data itself.`}),(0,i.jsx)(`p`,{children:`Ellipsis should reduce noise, not hide where the user currently is.`})]})]}),(0,i.jsxs)(`section`,{className:a,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current demo state`}),(0,i.jsxs)(`div`,{className:`mt-4 space-y-2 text-sm leading-6 aui-text-muted`,children:[(0,i.jsxs)(`p`,{children:[`Page: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:o})]}),(0,i.jsxs)(`p`,{children:[`Total pages: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:c})]}),(0,i.jsxs)(`p`,{children:[`Page size: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:f})]}),(0,i.jsxs)(`p`,{children:[`Edges: `,(0,i.jsx)(`span`,{className:`font-medium aui-text-strong`,children:u?`visible`:`hidden`})]})]})]})]}),e===`playground`?(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(`button`,{type:`button`,className:`rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm`,onClick:()=>s(Math.max(1,o-1)),children:`Previous page`}),(0,i.jsx)(`button`,{type:`button`,className:`rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm`,onClick:()=>s(Math.min(c,o+1)),children:`Next page`}),(0,i.jsx)(`button`,{type:`button`,className:`rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm`,onClick:()=>d(e=>!e),children:`Toggle edges`}),(0,i.jsx)(`button`,{type:`button`,className:`rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm`,onClick:()=>l(e=>e===18?8:18),children:`Toggle page count`})]})}):null]})}exports.PaginationShowcase=o;