tembro 2.0.5 → 2.1.0

package/dist/showcase/premium/loading-state/showcase.cjs

@@ -1 +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/loading-state.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[`Loading metrics`,`Loading table`,`Loading details`,`Loading export`],s=[`Preparing dashboard widgets and chart data.`,`Fetching list rows with filters applied.`,`Waiting for content details from the API.`,`Generating a local export file.`];function c({mode:e}){let[c,l]=i.useState(0),[u,d]=i.useState(e===`playground`);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:`Pending work`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Loading state should explain what is happening`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The label and description should tell the user which part of the page is waiting and why. Generic loading with no context is weak documentation.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Scoped loading`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Clear label`})]})]})}),e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>d(e=>!e),children:u?`Hide secondary`:`Show secondary`}),o.map((e,n)=>(0,a.jsx)(t.Button,{size:`sm`,variant:c===n?`default`:`outline`,onClick:()=>l(n),children:e},e))]}):null,(0,a.jsx)(r.LoadingState,{label:o[c],description:s[c]}),u?(0,a.jsx)(r.LoadingState,{label:`${o[c]} (compact)`,description:`This is a second loading area inside the same page.`}):null]})}exports.LoadingStateShowcase=c;
+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/loading-state.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[`Loading metrics`,`Loading table`,`Loading details`,`Loading export`],s=[`Preparing dashboard widgets and chart data.`,`Fetching list rows with filters applied.`,`Waiting for content details from the API.`,`Generating a local export file.`];function c({mode:e}){let[c,l]=i.useState(0),[u,d]=i.useState(e===`playground`);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:`Pending work`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Loading state should explain what is happening`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`The label and description should tell the user which part of the page is waiting and why. Generic loading with no context is weak documentation.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Scoped loading`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Clear label`})]})]})}),e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>d(e=>!e),children:u?`Hide secondary`:`Show secondary`}),o.map((e,n)=>(0,a.jsx)(t.Button,{size:`sm`,variant:c===n?`default`:`outline`,onClick:()=>l(n),children:e},e))]}):null,(0,a.jsx)(r.LoadingState,{label:o[c],description:s[c]}),u?(0,a.jsx)(r.LoadingState,{variant:`progress`,progress:68,label:`${o[c]} (progress)`,description:`This is a second loading area inside the same page.`}):null]})}exports.LoadingStateShowcase=c;

package/dist/showcase/premium/loading-state/showcase.js

@@ -73,7 +73,9 @@ function c({ mode: c }) {
 				description: s[l]
 			}),
 			d ? /* @__PURE__ */ i(n, {
-				label: `${o[l]} (compact)`,
+				variant: "progress",
+				progress: 68,
+				label: `${o[l]} (progress)`,
 				description: "This is a second loading area inside the same page."
 			}) : null
 		]

package/dist/showcase/premium/metric-grid/showcase.cjs

@@ -1 +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/display/metric-grid.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[{key:`users`,label:`Users`,value:`2,410`,description:`Last 30 days`,tone:`success`},{key:`revenue`,label:`Revenue`,value:`$132k`,description:`Compared with last month`,tone:`info`},{key:`errors`,label:`Errors`,value:`3`,description:`Immediate follow up`,tone:`danger`},{key:`churn`,label:`Churn`,value:`1.8%`,description:`Within target`,tone:`warning`}],o=[2,3,4];function s({mode:e}){let[s,c]=r.useState(!1),[l,u]=r.useState(3);return(0,i.jsxs)(`div`,{className:`space-y-4`,children:[e===`playground`?(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Button,{size:`sm`,variant:s?`outline`:`default`,onClick:()=>c(e=>!e),children:s?`Use spacious`:`Use compact`}),o.map(e=>(0,i.jsxs)(t.Button,{size:`sm`,variant:l===e?`default`:`outline`,onClick:()=>u(e),children:[e,` cols`]},e))]}):null,(0,i.jsx)(n.MetricGrid,{items:a,columns:l,compact:s})]})}exports.MetricGridShowcase=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/display/metric-grid.cjs"),r=require("../../../components/charts/charts.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[{key:`users`,label:`Users`,value:`2,410`,description:`Last 30 days`,tone:`success`,trend:`+12%`},{key:`revenue`,label:`Revenue`,value:`$132k`,description:`Compared with last month`,tone:`info`,trend:`+8.4%`},{key:`errors`,label:`Errors`,value:`3`,description:`Immediate follow up`,tone:`danger`},{key:`churn`,label:`Churn`,value:`1.8%`,description:`Within target`,tone:`warning`}],s=[2,3,4];function c({mode:e}){let[c,l]=i.useState(!1),[u,d]=i.useState(3);return(0,a.jsxs)(`div`,{className:`space-y-4`,children:[e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:c?`outline`:`default`,onClick:()=>l(e=>!e),children:c?`Use spacious`:`Use compact`}),s.map(e=>(0,a.jsxs)(t.Button,{size:`sm`,variant:u===e?`default`:`outline`,onClick:()=>d(e),children:[e,` cols`]},e))]}):null,(0,a.jsx)(n.MetricGrid,{items:o,columns:u,compact:c}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,a.jsx)(r.ChartFrame,{title:`Category performance`,description:`Bar chart shares the same token palette.`,children:(0,a.jsx)(r.BarChart,{data:[{label:`CRM`,value:42},{label:`Finance`,value:31},{label:`Auth`,value:-8},{label:`Forms`,value:26}]})}),(0,a.jsx)(r.ChartFrame,{title:`Traffic split`,description:`Donut, legend and KPI blocks stay visually aligned.`,children:(0,a.jsxs)(`div`,{className:`grid justify-items-center gap-4`,children:[(0,a.jsx)(r.DonutChart,{centerValue:`68%`,centerLabel:`Usage`,data:[{label:`Dashboard`,value:42},{label:`Forms`,value:18},{label:`Reports`,value:8}]}),(0,a.jsx)(r.ChartLegend,{data:[{label:`Dashboard`,value:42},{label:`Forms`,value:18},{label:`Reports`,value:8}]})]})})]})]})}exports.MetricGridShowcase=c;

package/dist/showcase/premium/metric-grid/showcase.js

@@ -1,22 +1,25 @@
 import { Button as e } from "../../../components/ui/button/index.js";
 import { MetricGrid as t } from "../../../components/display/metric-grid.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { BarChart as n, ChartFrame as r, ChartLegend as i, DonutChart as a } from "../../../components/charts/charts.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/showcase/premium/metric-grid/showcase.tsx
-var a = [
+var l = [
 	{
 		key: "users",
 		label: "Users",
 		value: "2,410",
 		description: "Last 30 days",
-		tone: "success"
+		tone: "success",
+		trend: "+12%"
 	},
 	{
 		key: "revenue",
 		label: "Revenue",
 		value: "$132k",
 		description: "Compared with last month",
-		tone: "info"
+		tone: "info",
+		trend: "+8.4%"
 	},
 	{
 		key: "errors",
@@ -32,34 +35,99 @@ var a = [
 		description: "Within target",
 		tone: "warning"
 	}
-], o = [
+], u = [
 	2,
 	3,
 	4
 ];
-function s({ mode: s }) {
-	let [c, l] = n.useState(!1), [u, d] = n.useState(3);
-	return /* @__PURE__ */ i("div", {
+function d({ mode: d }) {
+	let [f, p] = o.useState(!1), [m, h] = o.useState(3);
+	return /* @__PURE__ */ c("div", {
 		className: "space-y-4",
-		children: [s === "playground" ? /* @__PURE__ */ i("div", {
-			className: "flex flex-wrap gap-2",
-			children: [/* @__PURE__ */ r(e, {
-				size: "sm",
-				variant: c ? "outline" : "default",
-				onClick: () => l((e) => !e),
-				children: c ? "Use spacious" : "Use compact"
-			}), o.map((t) => /* @__PURE__ */ i(e, {
-				size: "sm",
-				variant: u === t ? "default" : "outline",
-				onClick: () => d(t),
-				children: [t, " cols"]
-			}, t))]
-		}) : null, /* @__PURE__ */ r(t, {
-			items: a,
-			columns: u,
-			compact: c
-		})]
+		children: [
+			d === "playground" ? /* @__PURE__ */ c("div", {
+				className: "flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ s(e, {
+					size: "sm",
+					variant: f ? "outline" : "default",
+					onClick: () => p((e) => !e),
+					children: f ? "Use spacious" : "Use compact"
+				}), u.map((t) => /* @__PURE__ */ c(e, {
+					size: "sm",
+					variant: m === t ? "default" : "outline",
+					onClick: () => h(t),
+					children: [t, " cols"]
+				}, t))]
+			}) : null,
+			/* @__PURE__ */ s(t, {
+				items: l,
+				columns: m,
+				compact: f
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ s(r, {
+					title: "Category performance",
+					description: "Bar chart shares the same token palette.",
+					children: /* @__PURE__ */ s(n, { data: [
+						{
+							label: "CRM",
+							value: 42
+						},
+						{
+							label: "Finance",
+							value: 31
+						},
+						{
+							label: "Auth",
+							value: -8
+						},
+						{
+							label: "Forms",
+							value: 26
+						}
+					] })
+				}), /* @__PURE__ */ s(r, {
+					title: "Traffic split",
+					description: "Donut, legend and KPI blocks stay visually aligned.",
+					children: /* @__PURE__ */ c("div", {
+						className: "grid justify-items-center gap-4",
+						children: [/* @__PURE__ */ s(a, {
+							centerValue: "68%",
+							centerLabel: "Usage",
+							data: [
+								{
+									label: "Dashboard",
+									value: 42
+								},
+								{
+									label: "Forms",
+									value: 18
+								},
+								{
+									label: "Reports",
+									value: 8
+								}
+							]
+						}), /* @__PURE__ */ s(i, { data: [
+							{
+								label: "Dashboard",
+								value: 42
+							},
+							{
+								label: "Forms",
+								value: 18
+							},
+							{
+								label: "Reports",
+								value: 8
+							}
+						] })]
+					})
+				})]
+			})
+		]
 	});
 }
 //#endregion
-export { s as MetricGridShowcase };
+export { d as MetricGridShowcase };

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

@@ -1 +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},{id:`2`,title:`Deployment ready`,description:`Release candidate passed checks and waits for promotion.`,time:`12m ago`,read:!1},{id:`3`,title:`Member invited`,description:`Operations workspace access was sent to Dilshod.`,time:`1h ago`,read:!0}];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}))),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;
+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/showcase/premium/notification-center/showcase.js

@@ -9,21 +9,24 @@ var a = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(-
 		title: "Invoice paid",
 		description: "Acme Growth settled invoice #2048.",
 		time: "2m ago",
-		read: !1
+		read: !1,
+		group: "Today"
 	},
 	{
 		id: "2",
 		title: "Deployment ready",
 		description: "Release candidate passed checks and waits for promotion.",
 		time: "12m ago",
-		read: !1
+		read: !1,
+		group: "Today"
 	},
 	{
 		id: "3",
 		title: "Member invited",
 		description: "Operations workspace access was sent to Dilshod.",
 		time: "1h ago",
-		read: !0
+		read: !0,
+		group: "Earlier"
 	}
 ];
 function s({ mode: s }) {
@@ -81,6 +84,7 @@ function s({ mode: s }) {
 							...e,
 							read: !0
 						}))),
+						onClearAll: () => l([]),
 						onNotificationClick: (e) => l((t) => t.map((t) => t.id === e.id ? {
 							...t,
 							read: !0

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

@@ -1 +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=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:u,title:u===`empty`?`No invoices found`:u===`loading`?`Preparing workspace`:u===`error`?`Connection failed`:u===`success`?`Workspace connected`:`Sync started`,description:u===`empty`?`Create the first invoice to unlock exports, reminders, and payment tracking.`:u===`loading`?`We are syncing permissions and bringing the latest workspace data into this route.`:u===`error`?`We could not sync workspace usage. Retry after restoring the API token.`:u===`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:u===`loading`?void 0:(0,a.jsx)(t.Button,{variant:u===`error`?`outline`:`default`,children:u===`empty`?`Create invoice`:u===`error`?`Retry sync`:u===`success`?`Open dashboard`:`View progress`})}),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;
+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=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:u,title:u===`empty`?`No invoices found`:u===`loading`?`Preparing workspace`:u===`error`?`Connection failed`:u===`success`?`Workspace connected`:`Sync started`,description:u===`empty`?`Create the first invoice to unlock exports, reminders, and payment tracking.`:u===`loading`?`We are syncing permissions and bringing the latest workspace data into this route.`:u===`error`?`We could not sync workspace usage. Retry after restoring the API token.`:u===`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:u===`loading`?void 0:(0,a.jsx)(t.Button,{variant:u===`error`?`outline`:`default`,children:u===`empty`?`Create invoice`:u===`error`?`Retry sync`:u===`success`?`Open dashboard`:`View progress`}),extra:u===`error`?(0,a.jsx)(t.Button,{variant:`ghost`,children:`Open logs`}):void 0}),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/showcase/premium/page-state/showcase.js

@@ -57,7 +57,11 @@ function c({ mode: c }) {
 				action: d === "loading" ? void 0 : /* @__PURE__ */ i(e, {
 					variant: d === "error" ? "outline" : "default",
 					children: d === "empty" ? "Create invoice" : d === "error" ? "Retry sync" : d === "success" ? "Open dashboard" : "View progress"
-				})
+				}),
+				extra: d === "error" ? /* @__PURE__ */ i(e, {
+					variant: "ghost",
+					children: "Open logs"
+				}) : void 0
 			}),
 			c === "playground" ? /* @__PURE__ */ i("section", {
 				className: o,

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

@@ -1 +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);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})]})}),(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:[`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;
+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;

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

@@ -5,7 +5,7 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/showcase/premium/pagination/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(6), [l, u] = n.useState(18), [d, f] = n.useState(!0);
+	let [s, c] = n.useState(6), [l, u] = n.useState(18), [d, f] = n.useState(!0), [p, m] = n.useState(20);
 	return /* @__PURE__ */ i("div", {
 		className: "space-y-5",
 		children: [
@@ -69,7 +69,16 @@ function o({ mode: o }) {
 						page: s,
 						pageCount: l,
 						onPageChange: c,
-						showEdges: d
+						showEdges: d,
+						totalCount: l * p,
+						pageSize: p,
+						pageSizeOptions: [
+							10,
+							20,
+							50
+						],
+						onPageSizeChange: m,
+						showSummary: !0
 					})]
 				})
 			}),
@@ -100,6 +109,10 @@ function o({ mode: o }) {
 								className: "font-medium aui-text-strong",
 								children: l
 							})] }),
+							/* @__PURE__ */ i("p", { children: ["Page size: ", /* @__PURE__ */ r("span", {
+								className: "font-medium aui-text-strong",
+								children: p
+							})] }),
 							/* @__PURE__ */ i("p", { children: ["Edges: ", /* @__PURE__ */ r("span", {
 								className: "font-medium aui-text-strong",
 								children: d ? "visible" : "hidden"

package/dist/showcase/premium/popover/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/popover/index.cjs"),n=require("./data.cjs");let r=require("react/jsx-runtime");var i=`border-t border-[color:var(--aui-divider)] py-6`;function a(){return(0,r.jsxs)(`div`,{className:`space-y-0`,children:[(0,r.jsx)(`section`,{className:`pb-6`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,r.jsxs)(`div`,{className:`max-w-xl`,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Popover`}),(0,r.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Keep it short and contextual`}),(0,r.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Popover should add nearby context, not replace the page or become a hidden modal.`})]}),(0,r.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,r.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Examples`}),(0,r.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:n.popoverDemoItems.length})]}),(0,r.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Use for`}),(0,r.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Short help`})]}),(0,r.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,r.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Avoid for`}),(0,r.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Full flows`})]})]})]})}),(0,r.jsx)(`section`,{className:i,children:(0,r.jsx)(`div`,{className:`grid gap-4 xl:grid-cols-3`,children:n.popoverDemoItems.map(n=>(0,r.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4`,children:[(0,r.jsxs)(`div`,{children:[(0,r.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:n.title}),(0,r.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:n.description})]}),(0,r.jsx)(`div`,{className:`mt-4`,children:(0,r.jsxs)(t.Popover,{children:[(0,r.jsx)(t.PopoverTrigger,{render:(0,r.jsx)(e.Button,{variant:n.variant}),children:n.label}),(0,r.jsx)(t.PopoverContent,{children:(0,r.jsxs)(t.PopoverHeader,{children:[(0,r.jsx)(t.PopoverTitle,{children:n.title}),(0,r.jsx)(t.PopoverDescription,{children:n.description})]})})]})})]},n.label))})}),(0,r.jsx)(`section`,{className:i,children:(0,r.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Trigger text should already hint that extra context exists.`,`If users need multiple actions or long reading, move up to a heavier surface.`,`Popover body should stay compact enough to scan in one glance.`].map(e=>(0,r.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))})})]})}exports.PopoverShowcase=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/input/index.cjs"),n=require("../../../components/ui/popover/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o(){return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsx)(`section`,{className:`pb-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end 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:`Popover`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Keep it short and contextual`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Popover should add nearby context, not replace the page or become a hidden modal.`})]}),(0,i.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Examples`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:r.popoverDemoItems.length})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Use for`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Short help`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Avoid for`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Full flows`})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`div`,{className:`grid gap-4 xl:grid-cols-3`,children:r.popoverDemoItems.map(t=>(0,i.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:t.title}),(0,i.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:t.description})]}),(0,i.jsx)(`div`,{className:`mt-4`,children:(0,i.jsxs)(n.Popover,{children:[(0,i.jsx)(n.PopoverTrigger,{render:(0,i.jsx)(e.Button,{variant:t.variant}),children:t.label}),(0,i.jsx)(n.PopoverContent,{children:(0,i.jsxs)(n.PopoverHeader,{children:[(0,i.jsx)(n.PopoverTitle,{children:t.title}),(0,i.jsx)(n.PopoverDescription,{children:t.description})]})})]})})]},t.label))})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`grid gap-5 xl:grid-cols-[0.85fr_1.15fr]`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-lg font-semibold aui-text-strong`,children:`Inline settings form`}),(0,i.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Short forms fit when they change a local view and can be dismissed without losing page context.`})]}),(0,i.jsx)(`div`,{className:`flex justify-start xl:justify-end`,children:(0,i.jsxs)(n.Popover,{children:[(0,i.jsx)(n.PopoverTrigger,{render:(0,i.jsx)(e.Button,{variant:`outline`}),children:`Edit workspace`}),(0,i.jsxs)(n.PopoverContent,{align:`end`,collisionPadding:16,children:[(0,i.jsxs)(n.PopoverHeader,{children:[(0,i.jsx)(n.PopoverTitle,{children:`Workspace details`}),(0,i.jsx)(n.PopoverDescription,{children:`Update the label used in local navigation.`})]}),(0,i.jsxs)(`div`,{className:`grid gap-3`,children:[(0,i.jsx)(t.Input,{"aria-label":`Workspace name`,defaultValue:`Growth analytics`}),(0,i.jsx)(t.Input,{"aria-label":`Workspace slug`,defaultValue:`growth`})]}),(0,i.jsxs)(`div`,{className:`flex justify-end gap-2`,children:[(0,i.jsx)(e.Button,{type:`button`,variant:`secondary`,size:`sm`,children:`Cancel`}),(0,i.jsx)(e.Button,{type:`button`,size:`sm`,children:`Save`})]})]})]})})]})})]})}exports.PopoverShowcase=o;

package/dist/showcase/premium/popover/showcase.js

@@ -1,62 +1,63 @@
 import { Button as e } from "../../../components/ui/button/index.js";
-import { Popover as t, PopoverContent as n, PopoverDescription as r, PopoverHeader as i, PopoverTitle as a, PopoverTrigger as o } from "../../../components/ui/popover/index.js";
-import { popoverDemoItems as s } from "./data.js";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Input as t } from "../../../components/ui/input/index.js";
+import { Popover as n, PopoverContent as r, PopoverDescription as i, PopoverHeader as a, PopoverTitle as o, PopoverTrigger as s } from "../../../components/ui/popover/index.js";
+import { popoverDemoItems as c } from "./data.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/showcase/premium/popover/showcase.tsx
-var u = "border-t border-[color:var(--aui-divider)] py-6";
-function d() {
-	return /* @__PURE__ */ l("div", {
+var d = "border-t border-[color:var(--aui-divider)] py-6";
+function f() {
+	return /* @__PURE__ */ u("div", {
 		className: "space-y-0",
 		children: [
-			/* @__PURE__ */ c("section", {
+			/* @__PURE__ */ l("section", {
 				className: "pb-6",
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ u("div", {
 					className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
-					children: [/* @__PURE__ */ l("div", {
+					children: [/* @__PURE__ */ u("div", {
 						className: "max-w-xl",
 						children: [
-							/* @__PURE__ */ c("p", {
+							/* @__PURE__ */ l("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 								children: "Popover"
 							}),
-							/* @__PURE__ */ c("h3", {
+							/* @__PURE__ */ l("h3", {
 								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 								children: "Keep it short and contextual"
 							}),
-							/* @__PURE__ */ c("p", {
+							/* @__PURE__ */ l("p", {
 								className: "mt-3 text-sm leading-6 aui-text-muted",
 								children: "Popover should add nearby context, not replace the page or become a hidden modal."
 							})
 						]
-					}), /* @__PURE__ */ l("div", {
+					}), /* @__PURE__ */ u("div", {
 						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
 						children: [
-							/* @__PURE__ */ l("div", {
+							/* @__PURE__ */ u("div", {
 								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ c("p", {
+								children: [/* @__PURE__ */ l("p", {
 									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 									children: "Examples"
-								}), /* @__PURE__ */ c("p", {
+								}), /* @__PURE__ */ l("p", {
 									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: s.length
+									children: c.length
 								})]
 							}),
-							/* @__PURE__ */ l("div", {
+							/* @__PURE__ */ u("div", {
 								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ c("p", {
+								children: [/* @__PURE__ */ l("p", {
 									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 									children: "Use for"
-								}), /* @__PURE__ */ c("p", {
+								}), /* @__PURE__ */ l("p", {
 									className: "mt-2 text-lg font-semibold aui-text-strong",
 									children: "Short help"
 								})]
 							}),
-							/* @__PURE__ */ l("div", {
+							/* @__PURE__ */ u("div", {
 								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ c("p", {
+								children: [/* @__PURE__ */ l("p", {
 									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 									children: "Avoid for"
-								}), /* @__PURE__ */ c("p", {
+								}), /* @__PURE__ */ l("p", {
 									className: "mt-2 text-lg font-semibold aui-text-strong",
 									children: "Full flows"
 								})]
@@ -65,44 +66,78 @@ function d() {
 					})]
 				})
 			}),
-			/* @__PURE__ */ c("section", {
-				className: u,
-				children: /* @__PURE__ */ c("div", {
+			/* @__PURE__ */ l("section", {
+				className: d,
+				children: /* @__PURE__ */ l("div", {
 					className: "grid gap-4 xl:grid-cols-3",
-					children: s.map((s) => /* @__PURE__ */ l("div", {
+					children: c.map((t) => /* @__PURE__ */ u("div", {
 						className: "rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4",
-						children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+						children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
 							className: "text-sm font-semibold aui-text-strong",
-							children: s.title
-						}), /* @__PURE__ */ c("p", {
+							children: t.title
+						}), /* @__PURE__ */ l("p", {
 							className: "mt-2 text-sm leading-6 aui-text-muted",
-							children: s.description
-						})] }), /* @__PURE__ */ c("div", {
+							children: t.description
+						})] }), /* @__PURE__ */ l("div", {
 							className: "mt-4",
-							children: /* @__PURE__ */ l(t, { children: [/* @__PURE__ */ c(o, {
-								render: /* @__PURE__ */ c(e, { variant: s.variant }),
-								children: s.label
-							}), /* @__PURE__ */ c(n, { children: /* @__PURE__ */ l(i, { children: [/* @__PURE__ */ c(a, { children: s.title }), /* @__PURE__ */ c(r, { children: s.description })] }) })] })
+							children: /* @__PURE__ */ u(n, { children: [/* @__PURE__ */ l(s, {
+								render: /* @__PURE__ */ l(e, { variant: t.variant }),
+								children: t.label
+							}), /* @__PURE__ */ l(r, { children: /* @__PURE__ */ u(a, { children: [/* @__PURE__ */ l(o, { children: t.title }), /* @__PURE__ */ l(i, { children: t.description })] }) })] })
 						})]
-					}, s.label))
+					}, t.label))
 				})
 			}),
-			/* @__PURE__ */ c("section", {
-				className: u,
-				children: /* @__PURE__ */ c("div", {
-					className: "border-y border-[color:var(--aui-divider)]",
-					children: [
-						"Trigger text should already hint that extra context exists.",
-						"If users need multiple actions or long reading, move up to a heavier surface.",
-						"Popover body should stay compact enough to scan in one glance."
-					].map((e) => /* @__PURE__ */ c("div", {
-						className: "border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0",
-						children: e
-					}, e))
+			/* @__PURE__ */ l("section", {
+				className: d,
+				children: /* @__PURE__ */ u("div", {
+					className: "grid gap-5 xl:grid-cols-[0.85fr_1.15fr]",
+					children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
+						className: "text-lg font-semibold aui-text-strong",
+						children: "Inline settings form"
+					}), /* @__PURE__ */ l("p", {
+						className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
+						children: "Short forms fit when they change a local view and can be dismissed without losing page context."
+					})] }), /* @__PURE__ */ l("div", {
+						className: "flex justify-start xl:justify-end",
+						children: /* @__PURE__ */ u(n, { children: [/* @__PURE__ */ l(s, {
+							render: /* @__PURE__ */ l(e, { variant: "outline" }),
+							children: "Edit workspace"
+						}), /* @__PURE__ */ u(r, {
+							align: "end",
+							collisionPadding: 16,
+							children: [
+								/* @__PURE__ */ u(a, { children: [/* @__PURE__ */ l(o, { children: "Workspace details" }), /* @__PURE__ */ l(i, { children: "Update the label used in local navigation." })] }),
+								/* @__PURE__ */ u("div", {
+									className: "grid gap-3",
+									children: [/* @__PURE__ */ l(t, {
+										"aria-label": "Workspace name",
+										defaultValue: "Growth analytics"
+									}), /* @__PURE__ */ l(t, {
+										"aria-label": "Workspace slug",
+										defaultValue: "growth"
+									})]
+								}),
+								/* @__PURE__ */ u("div", {
+									className: "flex justify-end gap-2",
+									children: [/* @__PURE__ */ l(e, {
+										type: "button",
+										variant: "secondary",
+										size: "sm",
+										children: "Cancel"
+									}), /* @__PURE__ */ l(e, {
+										type: "button",
+										size: "sm",
+										children: "Save"
+									})]
+								})
+							]
+						})] })
+					})]
 				})
 			})
 		]
 	});
 }
 //#endregion
-export { d as PopoverShowcase };
+export { f as PopoverShowcase };

package/dist/showcase/premium/radio-group/showcase.cjs

@@ -1 +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/ui/radio-group/index.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=[{value:`starter`,label:`Starter`,description:`Good for single workspace setup.`},{value:`growth`,label:`Growth`,description:`Adds more seats and team workflows.`},{value:`enterprise`,label:`Enterprise`,description:`Advanced controls and support.`}];function c(){let[e,c]=i.useState(`growth`);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`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:`Single choice`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Radio group should make one active choice obvious`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep all options visible when users should compare them before selecting one final answer.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Visible choices`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Single answer`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Workspace plan`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.RadioGroup,{value:e,onValueChange:c,options:s.map(e=>({...e}))})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selection summary`}),(0,a.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:s.find(t=>t.value===e)?.label}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:s.find(t=>t.value===e)?.description})]})]})]}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,a.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Current plan: `,e]})]}),(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:s.map(n=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n.value?`default`:`secondary`,onClick:()=>c(n.value),children:n.label},n.value))})]})})]})}exports.RadioGroupShowcase=c;
+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/ui/radio-group/index.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=[{value:`starter`,label:`Starter`,description:`Good for single workspace setup.`},{value:`growth`,label:`Growth`,description:`Adds more seats and team workflows.`},{value:`enterprise`,label:`Enterprise`,description:`Advanced controls and support.`,disabled:!0}];function c(){let[e,c]=i.useState(`growth`);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`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:`Single choice`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Radio group should make one active choice obvious`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep all options visible when users should compare them before selecting one final answer.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Visible choices`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Single answer`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Controlled`})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]`,children:[(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Workspace plan`}),(0,a.jsx)(`div`,{className:`mt-3`,children:(0,a.jsx)(r.RadioGroup,{value:e,onValueChange:c,options:s.map(e=>({...e}))})})]}),(0,a.jsxs)(`div`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Selection summary`}),(0,a.jsx)(`p`,{className:`mt-3 text-lg font-semibold aui-text-strong`,children:s.find(t=>t.value===e)?.label}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:s.find(t=>t.value===e)?.description})]})]})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Live state`}),(0,a.jsxs)(`h4`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:[`Current plan: `,e]})]}),(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:s.map(n=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===n.value?`default`:`secondary`,onClick:()=>c(n.value),children:n.label},n.value))})]}),(0,a.jsx)(`div`,{className:`mt-5`,children:(0,a.jsx)(r.RadioGroup,{invalid:!0,defaultValue:`card`,orientation:`horizontal`,options:[{value:`card`,label:`Card`},{value:`bank`,label:`Bank`},{value:`invoice`,label:`Invoice`,disabled:!0}]})})]})]})}exports.RadioGroupShowcase=c;

package/dist/showcase/premium/radio-group/showcase.js

@@ -18,7 +18,8 @@ var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(-
 	{
 		value: "enterprise",
 		label: "Enterprise",
-		description: "Advanced controls and support."
+		description: "Advanced controls and support.",
+		disabled: !0
 	}
 ];
 function c() {
@@ -98,9 +99,9 @@ function c() {
 					]
 				})]
 			})]
-		}), /* @__PURE__ */ i("section", {
+		}), /* @__PURE__ */ a("section", {
 			className: o,
-			children: /* @__PURE__ */ a("div", {
+			children: [/* @__PURE__ */ a("div", {
 				className: "flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",
 				children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
 					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
@@ -118,7 +119,29 @@ function c() {
 						children: t.label
 					}, t.value))
 				})]
-			})
+			}), /* @__PURE__ */ i("div", {
+				className: "mt-5",
+				children: /* @__PURE__ */ i(n, {
+					invalid: !0,
+					defaultValue: "card",
+					orientation: "horizontal",
+					options: [
+						{
+							value: "card",
+							label: "Card"
+						},
+						{
+							value: "bank",
+							label: "Bank"
+						},
+						{
+							value: "invoice",
+							label: "Invoice",
+							disabled: !0
+						}
+					]
+				})
+			})]
 		})]
 	});
 }