tembro 2.0.6 → 2.1.0

package/dist/showcase/premium/alert/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/alert.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=[`info`,`success`,`warning`,`destructive`];function c({mode:e}){let[c,l]=i.useState(2),[u,d]=i.useState(0),[f,p]=i.useState(!0),m=s[c]??`warning`;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:`Inline feedback`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Alert should guide the next user decision`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use alert when the page needs a visible, contextual message with a clear action. It should feel operational, not decorative.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Context aware`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Action ready`})]})]})}),f?(0,a.jsx)(r.Alert,{tone:m,dismissible:!0,onDismiss:()=>p(!1),title:m===`success`?`Workspace synced`:m===`destructive`?`Action blocked`:m===`info`?`Heads up`:`Review needed`,description:m===`success`?`Changes were saved and the team can continue safely.`:m===`destructive`?`The release cannot continue until billing permissions are restored.`:m===`info`?`Usage data refreshed and one metric changed since your last visit.`:`Billing rules changed and one approval is pending before publish.`,action:(0,a.jsx)(t.Button,{size:`sm`,variant:m===`destructive`?`destructive`:`default`,onClick:()=>d(e=>e+1),children:m===`success`?`Continue`:m===`destructive`?`Fix access`:m===`info`?`Open details`:`Open review`})}):(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Alert dismissed`}),(0,a.jsx)(t.Button,{className:`mt-4`,size:`sm`,variant:`outline`,onClick:()=>p(!0),children:`Restore alert`})]}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Action count`}),(0,a.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:u}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Alert CTA should resolve a real decision, not just dismiss a message.`})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Recommended usage`}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Put alert above the affected surface, form, or result area.`}),(0,a.jsx)(`p`,{children:`Prefer one primary action. If the user only needs acknowledgment, use toast instead.`})]})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`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)),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>d(0),children:`Reset counter`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>p(!0),children:`Show alert`})]})}):null]})}exports.AlertShowcase=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/alert.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=[`info`,`success`,`warning`,`destructive`];function c({mode:e}){let[c,l]=i.useState(2),[u,d]=i.useState(0),[f,p]=i.useState(!0),m=s[c]??`warning`;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:`Inline feedback`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Alert should guide the next user decision`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Use alert when the page needs a visible, contextual message with a clear action. It should feel operational, not decorative.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Context aware`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Action ready`})]})]})}),f?(0,a.jsx)(r.Alert,{tone:m,dismissible:!0,onDismiss:()=>p(!1),actionsAlign:m===`destructive`?`start`:`end`,title:m===`success`?`Workspace synced`:m===`destructive`?`Action blocked`:m===`info`?`Heads up`:`Review needed`,description:m===`success`?`Changes were saved and the team can continue safely.`:m===`destructive`?`The release cannot continue until billing permissions are restored.`:m===`info`?`Usage data refreshed and one metric changed since your last visit.`:`Billing rules changed and one approval is pending before publish.`,action:(0,a.jsx)(t.Button,{size:`sm`,variant:m===`destructive`?`destructive`:`default`,onClick:()=>d(e=>e+1),children:m===`success`?`Continue`:m===`destructive`?`Fix access`:m===`info`?`Open details`:`Open review`})}):(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Alert dismissed`}),(0,a.jsx)(t.Button,{className:`mt-4`,size:`sm`,variant:`outline`,onClick:()=>p(!0),children:`Restore alert`})]}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[0.9fr_1.1fr]`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Action count`}),(0,a.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:u}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Alert CTA should resolve a real decision, not just dismiss a message.`})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Recommended usage`}),(0,a.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm leading-6 aui-text-muted`,children:[(0,a.jsx)(`p`,{children:`Put alert above the affected surface, form, or result area.`}),(0,a.jsx)(`p`,{children:`Prefer one primary action. If the user only needs acknowledgment, use toast instead.`})]})]})]}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`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)),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>d(0),children:`Reset counter`}),(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>p(!0),children:`Show alert`})]})}):null]})}exports.AlertShowcase=c;

package/dist/showcase/premium/alert/showcase.js

@@ -53,6 +53,7 @@ function c({ mode: c }) {
 				tone: h,
 				dismissible: !0,
 				onDismiss: () => m(!1),
+				actionsAlign: h === "destructive" ? "start" : "end",
 				title: h === "success" ? "Workspace synced" : h === "destructive" ? "Action blocked" : h === "info" ? "Heads up" : "Review needed",
 				description: h === "success" ? "Changes were saved and the team can continue safely." : h === "destructive" ? "The release cannot continue until billing permissions are restored." : h === "info" ? "Usage data refreshed and one metric changed since your last visit." : "Billing rules changed and one approval is pending before publish.",
 				action: /* @__PURE__ */ i(e, {

package/dist/showcase/premium/app-sidebar/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs"),n=require("../../../components/ui/button/index.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/layout/app-sidebar.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");var c=[{key:`overview`,label:`Overview`,href:`/overview`,icon:(0,s.jsx)(o.HomeIcon,{className:`size-4`})},{key:`projects`,label:`Projects`,href:`/projects`,icon:(0,s.jsx)(o.FolderIcon,{className:`size-4`}),badge:`8`},{key:`reports`,label:`Reports`,href:`/reports`,icon:(0,s.jsx)(o.BarChart3Icon,{className:`size-4`})},{key:`billing`,label:`Billing`,href:`/billing`,icon:(0,s.jsx)(o.CreditCardIcon,{className:`size-4`}),badge:`2`},{key:`settings`,label:`Settings`,href:`/settings`,icon:(0,s.jsx)(o.SettingsIcon,{className:`size-4`}),disabled:!0}],l=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function u({mode:e}){let[o,u]=a.useState(`overview`),[d,f]=a.useState(e===`playground`),[p,m]=a.useState(`desktop`),h=a.useMemo(()=>c.map(e=>({...e,active:e.key===o,onSelect:()=>u(e.key)})),[o]),g=c.find(e=>e.key===o),_=p===`mobile`;return(0,s.jsxs)(`div`,{className:`space-y-5`,children:[(0,s.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,s.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,s.jsxs)(`div`,{className:`max-w-xl`,children:[(0,s.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Navigation shell`}),(0,s.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Sidebar should feel install-ready on its own`}),(0,s.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states and collapsed behavior.`})]}),(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Header slot`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Badges`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Mobile drawer`})]})]})}),e===`playground`?(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,s.jsx)(n.Button,{size:`sm`,variant:d?`outline`:`default`,onClick:()=>f(e=>!e),children:d?`Expand sidebar`:`Collapse sidebar`}),(0,s.jsx)(n.Button,{size:`sm`,variant:`outline`,onClick:()=>u(`reports`),children:`Jump to reports`}),(0,s.jsx)(n.Button,{size:`sm`,variant:_?`default`:`outline`,onClick:()=>m(`mobile`),children:`Mobile drawer`}),(0,s.jsx)(n.Button,{size:`sm`,variant:_?`outline`:`default`,onClick:()=>m(`desktop`),children:`Desktop rail`})]}):null,(0,s.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]`,children:[(0,s.jsx)(`section`,{className:t.cn(l,_&&`mx-auto w-full max-w-[420px]`),children:(0,s.jsx)(i.AppSidebar,{collapsed:d,items:h,responsive:!0,mobileBreakpoint:_?1e4:0,mobileTitle:`Workspace navigation`,mobileDescription:`Open routes, check badges, and move between sections from one compact drawer.`,mobileToggleLabel:`Open workspace menu`,header:(0,s.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`Azamat Workspace`}),footer:(0,s.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Starter plan • 3 editors`}),className:`min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`})}),(0,s.jsxs)(`section`,{className:l,children:[(0,s.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current route`}),(0,s.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:g?.label??`Overview`}),(0,s.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it.`}),(0,s.jsxs)(`div`,{className:`mt-6 grid gap-3 sm:grid-cols-3`,children:[(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Shell`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:_?`Mobile drawer`:d?`Collapsed`:`Expanded`})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Visible items`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:h.length})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Disabled`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`1 route`})]})]})]})]})]})}exports.AppSidebarShowcase=u;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs"),n=require("../../../components/ui/button/index.cjs"),r=require("../../../components/ui/badge/index.cjs"),i=require("../../../components/layout/app-sidebar.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("lucide-react"),s=require("react/jsx-runtime");var c=[{key:`overview`,label:`Overview`,href:`/overview`,icon:(0,s.jsx)(o.HomeIcon,{className:`size-4`})},{key:`projects`,label:`Projects`,href:`/projects`,icon:(0,s.jsx)(o.FolderIcon,{className:`size-4`}),badge:`8`},{key:`reports`,label:`Reports`,href:`/reports`,icon:(0,s.jsx)(o.BarChart3Icon,{className:`size-4`})},{key:`billing`,label:`Billing`,href:`/billing`,icon:(0,s.jsx)(o.CreditCardIcon,{className:`size-4`}),badge:`2`},{key:`settings`,label:`Settings`,href:`/settings`,icon:(0,s.jsx)(o.SettingsIcon,{className:`size-4`}),disabled:!0}],l=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function u({mode:e}){let[o,u]=a.useState(`overview`),[d,f]=a.useState(e===`playground`),[p,m]=a.useState(`desktop`),h=a.useMemo(()=>c.map(e=>({...e,active:e.key===o,onSelect:()=>u(e.key)})),[o]),g=c.find(e=>e.key===o),_=p===`mobile`;return(0,s.jsxs)(`div`,{className:`space-y-5`,children:[(0,s.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,s.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,s.jsxs)(`div`,{className:`max-w-xl`,children:[(0,s.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Navigation shell`}),(0,s.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Sidebar should feel install-ready on its own`}),(0,s.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This preview keeps the focus on one reusable sidebar surface: identity, route items, badges, disabled states and collapsed behavior.`})]}),(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Header slot`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Badges`}),(0,s.jsx)(r.Badge,{variant:`outline`,className:`rounded-full`,children:`Mobile drawer`})]})]})}),e===`playground`?(0,s.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,s.jsx)(n.Button,{size:`sm`,variant:d?`outline`:`default`,onClick:()=>f(e=>!e),children:d?`Expand sidebar`:`Collapse sidebar`}),(0,s.jsx)(n.Button,{size:`sm`,variant:`outline`,onClick:()=>u(`reports`),children:`Jump to reports`}),(0,s.jsx)(n.Button,{size:`sm`,variant:_?`default`:`outline`,onClick:()=>m(`mobile`),children:`Mobile drawer`}),(0,s.jsx)(n.Button,{size:`sm`,variant:_?`outline`:`default`,onClick:()=>m(`desktop`),children:`Desktop rail`})]}):null,(0,s.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]`,children:[(0,s.jsx)(`section`,{className:t.cn(l,_&&`mx-auto w-full max-w-[420px]`),children:(0,s.jsx)(i.AppSidebar,{collapsed:d,items:h,responsive:!0,mobileBreakpoint:_?1e4:0,mobileTitle:`Workspace navigation`,mobileDescription:`Open routes, check badges, and move between sections from one compact drawer.`,mobileToggleLabel:`Open workspace menu`,header:(0,s.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`Azamat Workspace`}),footer:(0,s.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Starter plan • 3 editors`}),footerClassName:`bg-[color:var(--aui-page-bg-alt)]/55`,className:`min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]`})}),(0,s.jsxs)(`section`,{className:l,children:[(0,s.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Current route`}),(0,s.jsx)(`p`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:g?.label??`Overview`}),(0,s.jsx)(`p`,{className:`mt-2 max-w-xl text-sm leading-6 aui-text-muted`,children:`Start with the sidebar itself as a stable navigation contract. Only after this feels right should the app introduce a bigger shell, page header, or route-level statistics around it.`}),(0,s.jsxs)(`div`,{className:`mt-6 grid gap-3 sm:grid-cols-3`,children:[(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Shell`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:_?`Mobile drawer`:d?`Collapsed`:`Expanded`})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Visible items`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:h.length})]}),(0,s.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3`,children:[(0,s.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Disabled`}),(0,s.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`1 route`})]})]})]})]})]})}exports.AppSidebarShowcase=u;

package/dist/showcase/premium/app-sidebar/showcase.js

@@ -141,6 +141,7 @@ function m({ mode: a }) {
 							className: "aui-text-muted px-3 py-2 text-xs",
 							children: "Starter plan • 3 editors"
 						}),
+						footerClassName: "bg-[color:var(--aui-page-bg-alt)]/55",
 						className: "min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
 					})
 				}), /* @__PURE__ */ d("section", {

package/dist/showcase/premium/badge/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("./data.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s({state:e,setState:s,mode:c}){let l=[`default`,`secondary`,`destructive`,`outline`,`ghost`,`link`],u=r.badgeDemoItems.find(t=>t.variant===e.badgeVariant)??r.badgeDemoItems[0],[d,f]=i.useState(!0);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsx)(`section`,{className:`pb-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end 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:`Status`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Badges should stay secondary`}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use them for metadata and state, not as the main content block.`})]}),(0,a.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Variant`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e.badgeVariant})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Current`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:u.label})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Samples`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:r.badgeDemoItems.length})]})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:l.map(n=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e.badgeVariant===n?`default`:`secondary`,onClick:()=>s({badgeVariant:n}),children:n},n))}),(0,a.jsx)(`div`,{className:`flex flex-wrap items-center gap-3`,children:r.badgeDemoItems.map((t,r)=>(0,a.jsx)(n.Badge,{variant:r===0?e.badgeVariant:t.variant,status:r===0?`success`:void 0,count:r===1?12:void 0,children:t.label},t.label))}),(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,1.02fr)_minmax(0,0.98fr)]`,children:[(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] pb-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Live example`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Customer workspace`})]}),(0,a.jsx)(n.Badge,{variant:e.badgeVariant,status:`success`,label:u.label})]}),(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:[[`Plan`,`Growth`],[`Owner`,`Azamat`],[`Last sync`,`2 min ago`]].map(([e,t])=>(0,a.jsxs)(`div`,{className:`inline-flex items-center gap-2 rounded-full border border-[color:var(--aui-divider)] px-3 py-2`,children:[(0,a.jsx)(`span`,{className:`text-xs aui-text-muted`,children:e}),(0,a.jsx)(`span`,{className:`text-sm font-medium aui-text-strong`,children:t})]},e))}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2 border-t border-[color:var(--aui-divider)] pt-4`,children:[(0,a.jsx)(n.Badge,{variant:`secondary`,label:`Customers`,count:18}),(0,a.jsx)(n.Badge,{status:`warning`,label:`Pending approval`}),d?(0,a.jsx)(n.Badge,{variant:`outline`,label:`Design owner`,removable:!0,onRemove:()=>f(!1)}):(0,a.jsx)(t.Button,{size:`sm`,variant:`secondary`,onClick:()=>f(!0),children:`Restore chip`})]})]}),(0,a.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:r.badgeDemoItems.map(e=>(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3 last:border-b-0`,children:[(0,a.jsxs)(`div`,{className:`min-w-0`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:e.label}),(0,a.jsx)(`p`,{className:`mt-1 text-sm leading-6 aui-text-muted`,children:e.note})]}),(0,a.jsx)(n.Badge,{variant:e.variant,status:e.label===`Live`?`success`:e.label===`Review`?`warning`:void 0,label:e.label})]},e.label))})]})]})}),c===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`div`,{className:`grid gap-3 md:grid-cols-2 xl:grid-cols-3`,children:r.badgeDemoItems.map(e=>(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,a.jsx)(n.Badge,{variant:e.variant,label:e.label,count:e.label===`Queued`?4:void 0}),(0,a.jsx)(`span`,{className:`text-[11px] uppercase tracking-[0.2em] aui-text-muted`,children:`sample`})]}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:e.note})]},e.label))})}):null]})}exports.BadgeShowcase=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/ui/badge/index.cjs"),r=require("./data.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`border-t border-[color:var(--aui-divider)] py-6`;function s({state:e,setState:s,mode:c}){let l=[`default`,`secondary`,`soft`,`destructive`,`outline`,`ghost`,`link`],u=r.badgeDemoItems.find(t=>t.variant===e.badgeVariant)??r.badgeDemoItems[0],[d,f]=i.useState(!0);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsx)(`section`,{className:`pb-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end 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:`Status`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Badges should stay secondary`}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use them for metadata and state, not as the main content block.`})]}),(0,a.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Variant`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e.badgeVariant})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Current`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:u.label})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Samples`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:r.badgeDemoItems.length})]})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:l.map(n=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e.badgeVariant===n?`default`:`secondary`,onClick:()=>s({badgeVariant:n}),children:n},n))}),(0,a.jsx)(`div`,{className:`flex flex-wrap items-center gap-3`,children:r.badgeDemoItems.map((t,r)=>(0,a.jsx)(n.Badge,{variant:r===0?e.badgeVariant:t.variant,status:r===0?`success`:void 0,count:r===1?12:void 0,children:t.label},t.label))}),(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,1.02fr)_minmax(0,0.98fr)]`,children:[(0,a.jsxs)(`div`,{className:`space-y-4`,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--aui-divider)] pb-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Live example`}),(0,a.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:`Customer workspace`})]}),(0,a.jsx)(n.Badge,{variant:e.badgeVariant,status:`success`,label:u.label})]}),(0,a.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:[[`Plan`,`Growth`],[`Owner`,`Azamat`],[`Last sync`,`2 min ago`]].map(([e,t])=>(0,a.jsxs)(`div`,{className:`inline-flex items-center gap-2 rounded-full border border-[color:var(--aui-divider)] px-3 py-2`,children:[(0,a.jsx)(`span`,{className:`text-xs aui-text-muted`,children:e}),(0,a.jsx)(`span`,{className:`text-sm font-medium aui-text-strong`,children:t})]},e))}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2 border-t border-[color:var(--aui-divider)] pt-4`,children:[(0,a.jsx)(n.Badge,{variant:`secondary`,label:`Customers`,count:18}),(0,a.jsx)(n.Badge,{variant:`soft`,tone:`info`,label:`Synced`,dot:!0}),(0,a.jsx)(n.Badge,{status:`warning`,label:`Pending approval`}),d?(0,a.jsx)(n.Badge,{variant:`outline`,label:`Design owner`,removable:!0,onRemove:()=>f(!1)}):(0,a.jsx)(t.Button,{size:`sm`,variant:`secondary`,onClick:()=>f(!0),children:`Restore chip`})]})]}),(0,a.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:r.badgeDemoItems.map(e=>(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3 last:border-b-0`,children:[(0,a.jsxs)(`div`,{className:`min-w-0`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold aui-text-strong`,children:e.label}),(0,a.jsx)(`p`,{className:`mt-1 text-sm leading-6 aui-text-muted`,children:e.note})]}),(0,a.jsx)(n.Badge,{variant:e.variant,status:e.label===`Live`?`success`:e.label===`Review`?`warning`:void 0,label:e.label})]},e.label))})]})]})}),c===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(`div`,{className:`grid gap-3 md:grid-cols-2 xl:grid-cols-3`,children:r.badgeDemoItems.map(e=>(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,a.jsx)(n.Badge,{variant:e.variant,label:e.label,count:e.label===`Queued`?4:void 0}),(0,a.jsx)(`span`,{className:`text-[11px] uppercase tracking-[0.2em] aui-text-muted`,children:`sample`})]}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:e.note})]},e.label))})}):null]})}exports.BadgeShowcase=s;

package/dist/showcase/premium/badge/showcase.js

@@ -9,6 +9,7 @@ function s({ state: s, setState: c, mode: l }) {
 	let u = [
 		"default",
 		"secondary",
+		"soft",
 		"destructive",
 		"outline",
 		"ghost",
@@ -142,6 +143,12 @@ function s({ state: s, setState: c, mode: l }) {
 												label: "Customers",
 												count: 18
 											}),
+											/* @__PURE__ */ i(t, {
+												variant: "soft",
+												tone: "info",
+												label: "Synced",
+												dot: !0
+											}),
 											/* @__PURE__ */ i(t, {
 												status: "warning",
 												label: "Pending approval"

package/dist/showcase/premium/badge/types.d.ts

@@ -1,5 +1,5 @@
 export type BadgeDemoItem = {
     label: string;
-    variant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+    variant: "default" | "secondary" | "soft" | "destructive" | "outline" | "ghost" | "link";
     note: string;
 };

package/dist/showcase/premium/breadcrumbs/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/layout/breadcrumbs.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[{key:`home`,label:`Home`,href:`/`},{key:`apps`,label:`Apps`,href:`/apps`},{key:`workspace`,label:`Workspace`,href:`/apps/workspace`},{key:`overview`,label:`Overview`,current:!0}],s=[{key:`home`,label:`Home`,href:`/`},{key:`dashboard`,label:`Dashboard`,current:!0}];function c({mode:e}){let[c,l]=i.useState(`full`),u=i.useMemo(()=>c===`full`?o:s,[c]);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:`Path context`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Breadcrumbs should answer where the user is`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep them short, directional, and useful. The preview should show both a fuller application path and a compact route path.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Full path`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Compact path`})]})]})}),e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:c===`full`?`default`:`outline`,onClick:()=>l(`full`),children:`Full path`}),(0,a.jsx)(t.Button,{size:`sm`,variant:c===`compact`?`default`:`outline`,onClick:()=>l(`compact`),children:`Compact path`})]}):null,(0,a.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3`,children:(0,a.jsx)(r.Breadcrumbs,{items:u,separator:c===`full`?`/`:(0,a.jsx)(`span`,{className:`px-1 aui-text-muted`,children:`→`})})})]})}exports.BreadcrumbsShowcase=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/layout/breadcrumbs.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[{key:`home`,label:`Home`,href:`/`},{key:`apps`,label:`Apps`,href:`/apps`},{key:`workspace`,label:`Workspace`,href:`/apps/workspace`},{key:`team`,label:`Team settings`,href:`/apps/workspace/team`},{key:`security`,label:`Security`,href:`/apps/workspace/team/security`},{key:`overview`,label:`Overview`,current:!0}],s=[{key:`home`,label:`Home`,href:`/`},{key:`dashboard`,label:`Dashboard`,current:!0}];function c({mode:e}){let[c,l]=i.useState(`full`),u=i.useMemo(()=>c===`full`?o:s,[c]);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:`Path context`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Breadcrumbs should answer where the user is`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`Keep them short, directional, and useful. The preview should show both a fuller application path and a compact route path.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Full path`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Compact path`})]})]})}),e===`playground`?(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,a.jsx)(t.Button,{size:`sm`,variant:c===`full`?`default`:`outline`,onClick:()=>l(`full`),children:`Full path`}),(0,a.jsx)(t.Button,{size:`sm`,variant:c===`compact`?`default`:`outline`,onClick:()=>l(`compact`),children:`Compact path`})]}):null,(0,a.jsx)(`div`,{className:`rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3`,children:(0,a.jsx)(r.Breadcrumbs,{items:u,separator:c===`full`?`/`:(0,a.jsx)(`span`,{className:`px-1 aui-text-muted`,children:`→`}),maxItems:c===`full`?4:void 0})})]})}exports.BreadcrumbsShowcase=c;

package/dist/showcase/premium/breadcrumbs/showcase.js

@@ -20,6 +20,16 @@ var o = [
 		label: "Workspace",
 		href: "/apps/workspace"
 	},
+	{
+		key: "team",
+		label: "Team settings",
+		href: "/apps/workspace/team"
+	},
+	{
+		key: "security",
+		label: "Security",
+		href: "/apps/workspace/team/security"
+	},
 	{
 		key: "overview",
 		label: "Overview",
@@ -94,7 +104,8 @@ function c({ mode: c }) {
 					separator: l === "full" ? "/" : /* @__PURE__ */ i("span", {
 						className: "px-1 aui-text-muted",
 						children: "→"
-					})
+					}),
+					maxItems: l === "full" ? 4 : void 0
 				})
 			})
 		]

package/dist/showcase/premium/button/mock.cjs

@@ -14,7 +14,7 @@ export function BasicExamples() {
 
       <div className="flex flex-wrap gap-3">
         <Button size="sm">Small</Button>
-        <Button size="icon" aria-label="Download">
+        <Button iconOnly aria-label="Download">
           <DownloadIcon className="size-4" />
         </Button>
         <Button>
@@ -33,9 +33,6 @@ export function BasicExamples() {
       </div>
 
       <div className="flex flex-wrap gap-3">
-        <Button asChild>
-          <a href="/docs">Open docs</a>
-        </Button>
         <a className={buttonVariants({ variant: "outline", size: "sm" })} href="/components">
           Link styled as button
         </a>

package/dist/showcase/premium/button/mock.js

@@ -1,6 +1,6 @@
 //#region src/showcase/premium/button/mock.ts
 var e = {
-	code: "import * as React from \"react\"\nimport { ArrowRightIcon, DownloadIcon } from \"lucide-react\"\nimport { Button, buttonVariants } from \"@/index\"\n\nexport function BasicExamples() {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"default\">Primary</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button size=\"sm\">Small</Button>\n        <Button size=\"icon\" aria-label=\"Download\">\n          <DownloadIcon className=\"size-4\" />\n        </Button>\n        <Button>\n          Continue\n          <ArrowRightIcon className=\"ml-2 size-4\" />\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"outline\" size=\"sm\" disabled>\n          Disabled\n        </Button>\n        <Button variant=\"default\" loading>\n          Loading\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button asChild>\n          <a href=\"/docs\">Open docs</a>\n        </Button>\n        <a className={buttonVariants({ variant: \"outline\", size: \"sm\" })} href=\"/components\">\n          Link styled as button\n        </a>\n      </div>\n    </div>\n  )\n}\n\nexport function ControlledButton() {\n  const [loading, setLoading] = React.useState(false)\n\n  return (\n    <Button\n      variant=\"default\"\n      onClick={() => {\n        setLoading(true)\n        window.setTimeout(() => setLoading(false), 1800)\n      }}\n      loading={loading}\n    >\n      Submit\n    </Button>\n  )\n}\n\n// Don't overuse buttonVariants for every button instance.\n// Use Button's own variant/size props by default, and keep buttonVariants\n// only for styling non-button elements (a, Link) with shared look.",
+	code: "import * as React from \"react\"\nimport { ArrowRightIcon, DownloadIcon } from \"lucide-react\"\nimport { Button, buttonVariants } from \"@/index\"\n\nexport function BasicExamples() {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"default\">Primary</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button size=\"sm\">Small</Button>\n        <Button iconOnly aria-label=\"Download\">\n          <DownloadIcon className=\"size-4\" />\n        </Button>\n        <Button>\n          Continue\n          <ArrowRightIcon className=\"ml-2 size-4\" />\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <Button variant=\"outline\" size=\"sm\" disabled>\n          Disabled\n        </Button>\n        <Button variant=\"default\" loading>\n          Loading\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap gap-3\">\n        <a className={buttonVariants({ variant: \"outline\", size: \"sm\" })} href=\"/components\">\n          Link styled as button\n        </a>\n      </div>\n    </div>\n  )\n}\n\nexport function ControlledButton() {\n  const [loading, setLoading] = React.useState(false)\n\n  return (\n    <Button\n      variant=\"default\"\n      onClick={() => {\n        setLoading(true)\n        window.setTimeout(() => setLoading(false), 1800)\n      }}\n      loading={loading}\n    >\n      Submit\n    </Button>\n  )\n}\n\n// Don't overuse buttonVariants for every button instance.\n// Use Button's own variant/size props by default, and keep buttonVariants\n// only for styling non-button elements (a, Link) with shared look.",
 	htmlCode: "<button data-slot=\"button\" data-variant=\"primary\">\n  Continue\n</button>",
 	cliCommand: "npx tembro add button",
 	highlights: [

package/dist/showcase/premium/button/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");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=[[`Default`,`default`],[`Secondary`,`secondary`],[`Outline`,`outline`],[`Ghost`,`ghost`],[`Destructive`,`destructive`]],s=[`Ready`,`Focus`,`Loading`,`Disabled`],c=`border-t border-[color:var(--aui-divider)] py-6`;function l({label:e,variant:n}){return(0,a.jsxs)(`div`,{className:`grid gap-3 border-b border-[color:var(--aui-divider)] py-4 last:border-b-0 md:grid-cols-[160px_1fr] md:items-center`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:e}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`npm package variant`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:n,children:e}),(0,a.jsx)(t.Button,{variant:n,size:`sm`,children:`Small`}),(0,a.jsx)(t.Button,{variant:n,size:`icon`,"aria-label":`${e} icon button`,children:(0,a.jsx)(i.ArrowRightIcon,{className:`size-4`})})]})]})}function u({state:e,variant:n}){return e===`Loading`?(0,a.jsx)(t.Button,{variant:n,loading:!0,loadingLabel:`Saving`,children:`Save`}):(0,a.jsx)(t.Button,{variant:n,pressed:e===`Focus`,disabled:e===`Disabled`,className:e===`Focus`?`ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]`:void 0,children:e})}function d(){let[e,d]=r.useState(`default`),[f,p]=r.useState(`idle`),[m,h]=r.useState(0);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed from npm`}),(0,a.jsx)(`h3`,{className:`aui-text-strong mt-3 text-2xl font-semibold tracking-tight`,children:`Real tembro buttons`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-3 max-w-2xl text-sm leading-6`,children:`This preview uses the exported Button component directly from the installed package. The docs page only provides spacing around it.`})]}),(0,a.jsxs)(`section`,{className:c,children:[(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px] xl:items-start`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Approval action row`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Primary, secondary and outline actions should read clearly without custom wrapper styles.`}),(0,a.jsx)(`div`,{className:`mt-5 flex flex-wrap gap-2`,children:o.map(([n,r])=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===r?`default`:`outline`,onClick:()=>d(r),children:n},r))})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:`Invoice #4821`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`Requires finance approval`})]}),(0,a.jsx)(n.Badge,{variant:f===`done`?`secondary`:`outline`,children:f===`idle`?`Pending`:f===`saving`?`Saving`:`Approved`})]}),(0,a.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,onClick:()=>h(e=>e+1),children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsx)(t.Button,{variant:e,fullWidth:!0,loading:f===`saving`,loadingLabel:`Approving`,onClick:()=>{h(e=>e+1),p(`saving`),window.setTimeout(()=>p(`done`),850)},children:f===`done`?`Approved`:`Approve invoice`})]})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-3 md:grid-cols-4`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Primary`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Main action with filled emphasis.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Secondary`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Alternative action without stealing focus.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Outline`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Low-emphasis action for previews and neutral workflows.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Destructive`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Reserved for archive, delete, or dangerous transitions.`})]})]})]}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Interaction states`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Keep the important states visible without a heavy table or nested card matrix.`}),(0,a.jsx)(`div`,{className:`mt-5 grid gap-3 sm:grid-cols-2`,children:s.map(t=>(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted text-xs font-semibold uppercase tracking-[0.2em]`,children:t}),(0,a.jsx)(u,{state:t,variant:e})]},t))})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Variant rail`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`All variants use the same exported Button API.`}),(0,a.jsx)(`div`,{className:`mt-2`,children:o.map(([e,t])=>(0,a.jsx)(l,{label:e,variant:t},t))})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-5 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Production footer`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`A compact footer pattern for forms, settings pages and dashboard actions.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsxs)(t.Button,{children:[`Continue`,(0,a.jsx)(i.ArrowRightIcon,{className:`ml-2 size-4`})]})]})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Icon, async and danger`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Loading and disabled states stay readable; destructive actions remain visually distinct.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsxs)(t.Button,{variant:`destructive`,children:[(0,a.jsx)(i.Trash2Icon,{className:`mr-2 size-4`}),`Delete`]}),(0,a.jsx)(t.Button,{loading:!0,loadingLabel:`Publishing`,children:`Publish`}),(0,a.jsx)(t.Button,{variant:`outline`,size:`icon`,"aria-label":`Download`,children:(0,a.jsx)(i.DownloadIcon,{className:`size-4`})}),(0,a.jsx)(`a`,{href:`#`,className:t.buttonVariants({variant:`link`}),children:`Text link`})]})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3 text-sm`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Interaction count:`}),(0,a.jsx)(n.Badge,{variant:`secondary`,children:m}),(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Selected variant:`}),(0,a.jsx)(n.Badge,{variant:`outline`,children:e})]})})]})}exports.ButtonShowcase=d;
+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");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o=[[`Default`,`default`],[`Secondary`,`secondary`],[`Outline`,`outline`],[`Ghost`,`ghost`],[`Destructive`,`destructive`]],s=[`Ready`,`Focus`,`Loading`,`Disabled`],c=`border-t border-[color:var(--aui-divider)] py-6`;function l({label:e,variant:n}){return(0,a.jsxs)(`div`,{className:`grid gap-3 border-b border-[color:var(--aui-divider)] py-4 last:border-b-0 md:grid-cols-[160px_1fr] md:items-center`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:e}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`npm package variant`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:n,children:e}),(0,a.jsx)(t.Button,{variant:n,size:`sm`,children:`Small`}),(0,a.jsx)(t.Button,{variant:n,iconOnly:!0,"aria-label":`${e} icon button`,children:(0,a.jsx)(i.ArrowRightIcon,{className:`size-4`})})]})]})}function u({state:e,variant:n}){return e===`Loading`?(0,a.jsx)(t.Button,{variant:n,loading:!0,loadingLabel:`Saving`,children:`Save`}):(0,a.jsx)(t.Button,{variant:n,pressed:e===`Focus`,disabled:e===`Disabled`,className:e===`Focus`?`ring-2 ring-[color:var(--aui-ring)] ring-offset-2 ring-offset-[color:var(--aui-page-bg)]`:void 0,children:e})}function d(){let[e,d]=r.useState(`default`),[f,p]=r.useState(`idle`),[m,h]=r.useState(0);return(0,a.jsxs)(`div`,{className:`space-y-0`,children:[(0,a.jsxs)(`section`,{className:`pb-6`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted`,children:`Installed from npm`}),(0,a.jsx)(`h3`,{className:`aui-text-strong mt-3 text-2xl font-semibold tracking-tight`,children:`Real tembro buttons`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-3 max-w-2xl text-sm leading-6`,children:`This preview uses the exported Button component directly from the installed package. The docs page only provides spacing around it.`})]}),(0,a.jsxs)(`section`,{className:c,children:[(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_360px] xl:items-start`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Approval action row`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Primary, secondary and outline actions should read clearly without custom wrapper styles.`}),(0,a.jsx)(`div`,{className:`mt-5 flex flex-wrap gap-2`,children:o.map(([n,r])=>(0,a.jsx)(t.Button,{type:`button`,size:`sm`,variant:e===r?`default`:`outline`,onClick:()=>d(r),children:n},r))})]}),(0,a.jsxs)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4`,children:[(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-sm font-semibold`,children:`Invoice #4821`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-1 text-xs`,children:`Requires finance approval`})]}),(0,a.jsx)(n.Badge,{variant:f===`done`?`secondary`:`outline`,children:f===`idle`?`Pending`:f===`saving`?`Saving`:`Approved`})]}),(0,a.jsxs)(`div`,{className:`mt-4 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,onClick:()=>h(e=>e+1),children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsx)(t.Button,{variant:e,fullWidth:!0,loading:f===`saving`,loadingLabel:`Approving`,onClick:()=>{h(e=>e+1),p(`saving`),window.setTimeout(()=>p(`done`),850)},children:f===`done`?`Approved`:`Approve invoice`})]})]})]}),(0,a.jsxs)(`div`,{className:`mt-6 grid gap-3 md:grid-cols-4`,children:[(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Primary`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Main action with filled emphasis.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Secondary`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Alternative action without stealing focus.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Outline`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Low-emphasis action for previews and neutral workflows.`})]}),(0,a.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm`,children:[(0,a.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Destructive`}),(0,a.jsx)(`p`,{className:`mt-2 leading-6 aui-text-muted`,children:`Reserved for archive, delete, or dangerous transitions.`})]})]})]}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Interaction states`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Keep the important states visible without a heavy table or nested card matrix.`}),(0,a.jsx)(`div`,{className:`mt-5 grid gap-3 sm:grid-cols-2`,children:s.map(t=>(0,a.jsxs)(`div`,{className:`flex items-center justify-between gap-4 border-b border-[color:var(--aui-divider)] py-3`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted text-xs font-semibold uppercase tracking-[0.2em]`,children:t}),(0,a.jsx)(u,{state:t,variant:e})]},t))})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Variant rail`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`All variants use the same exported Button API.`}),(0,a.jsx)(`div`,{className:`mt-2`,children:o.map(([e,t])=>(0,a.jsx)(l,{label:e,variant:t},t))})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`grid gap-5 xl:grid-cols-[1fr_1fr]`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Production footer`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`A compact footer pattern for forms, settings pages and dashboard actions.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsx)(t.Button,{variant:`secondary`,children:`Save draft`}),(0,a.jsx)(t.Button,{variant:`outline`,children:`Preview`}),(0,a.jsxs)(t.Button,{children:[`Continue`,(0,a.jsx)(i.ArrowRightIcon,{className:`ml-2 size-4`})]})]})]}),(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`aui-text-strong text-lg font-semibold`,children:`Icon, async and danger`}),(0,a.jsx)(`p`,{className:`aui-text-muted mt-2 max-w-xl text-sm leading-6`,children:`Loading and disabled states stay readable; destructive actions remain visually distinct.`}),(0,a.jsxs)(`div`,{className:`mt-5 flex flex-wrap items-center gap-2`,children:[(0,a.jsxs)(t.Button,{variant:`destructive`,children:[(0,a.jsx)(i.Trash2Icon,{className:`mr-2 size-4`}),`Delete`]}),(0,a.jsx)(t.Button,{loading:!0,loadingLabel:`Publishing`,children:`Publish`}),(0,a.jsx)(t.Button,{variant:`outline`,iconOnly:!0,"aria-label":`Download`,children:(0,a.jsx)(i.DownloadIcon,{className:`size-4`})}),(0,a.jsx)(`a`,{href:`#`,className:t.buttonVariants({variant:`link`}),children:`Text link`})]})]})]})}),(0,a.jsx)(`section`,{className:c,children:(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3 text-sm`,children:[(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Interaction count:`}),(0,a.jsx)(n.Badge,{variant:`secondary`,children:m}),(0,a.jsx)(`span`,{className:`aui-text-muted`,children:`Selected variant:`}),(0,a.jsx)(n.Badge,{variant:`outline`,children:e})]})})]})}exports.ButtonShowcase=d;

package/dist/showcase/premium/button/showcase.js

@@ -39,7 +39,7 @@ function f({ label: t, variant: n }) {
 				}),
 				/* @__PURE__ */ s(e, {
 					variant: n,
-					size: "icon",
+					iconOnly: !0,
 					"aria-label": `${t} icon button`,
 					children: /* @__PURE__ */ s(i, { className: "size-4" })
 				})
@@ -286,7 +286,7 @@ function m() {
 								}),
 								/* @__PURE__ */ s(e, {
 									variant: "outline",
-									size: "icon",
+									iconOnly: !0,
 									"aria-label": "Download",
 									children: /* @__PURE__ */ s(a, { className: "size-4" })
 								}),

package/dist/showcase/premium/card/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/card/index.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("./data.cjs");let r=require("react/jsx-runtime");var i=[`secondary`,`outline`,`destructive`],a=`border-t border-[color:var(--aui-divider)] py-6`;function o({state:o}){let s=n.cardDemoProjects[0],c=n.cardDemoProjects[1];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:`Container`}),(0,r.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One card should hold the whole story`}),(0,r.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show one rich card and one compact card, not extra chrome around them.`})]}),(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:`Primary`}),(0,r.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:s.title})]}),(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:`Compact`}),(0,r.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:o.cardCompact?`Small`:`Default`})]}),(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:`Metrics`}),(0,r.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:s.metrics.length})]})]})]})}),(0,r.jsx)(`section`,{className:a,children:(0,r.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)]`,children:[(0,r.jsx)(e.Card,{size:o.cardCompact?`sm`:`default`,title:s.title,description:s.description,content:(0,r.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:s.metrics.map(e=>(0,r.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm font-medium aui-text-strong`,children:e},e))}),footer:s.footer}),(0,r.jsx)(e.Card,{size:`sm`,title:c.title,description:c.description,content:(0,r.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:c.metrics.map((e,n)=>(0,r.jsx)(t.Badge,{variant:i[n],children:e},e))}),footer:c.footer})]})})]})}exports.CardShowcase=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/card/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("./data.cjs");let i=require("react/jsx-runtime");var a=[`secondary`,`outline`,`destructive`],o=`border-t border-[color:var(--aui-divider)] py-6`;function s({state:s}){let c=r.cardDemoProjects[0],l=r.cardDemoProjects[1];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:`Container`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One card should hold the whole story`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show one rich card and one compact card, not extra chrome around them.`})]}),(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:`Primary`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:c.title})]}),(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:`Compact`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:s.cardCompact?`Small`:`Default`})]}),(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:`Metrics`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:c.metrics.length})]})]})]})}),(0,i.jsxs)(`section`,{className:o,children:[(0,i.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)]`,children:[(0,i.jsx)(t.Card,{size:s.cardCompact?`sm`:`default`,eyebrow:`Content`,title:c.title,description:c.description,badge:(0,i.jsx)(n.Badge,{tone:`success`,variant:`soft`,children:`Live`}),action:(0,i.jsx)(e.Button,{type:`button`,size:`xs`,variant:`outline`,children:`Open`}),content:(0,i.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:c.metrics.map(e=>(0,i.jsx)(`div`,{className:`rounded-xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm font-medium aui-text-strong`,children:e},e))}),footer:c.footer}),(0,i.jsx)(t.Card,{size:`sm`,interactive:!0,selected:!0,eyebrow:`Selectable`,title:l.title,description:l.description,content:(0,i.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:l.metrics.map((e,t)=>(0,i.jsx)(n.Badge,{variant:a[t],children:e},e))}),footer:l.footer})]}),(0,i.jsxs)(`div`,{className:`mt-4 grid gap-4 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,i.jsx)(t.Card,{orientation:`horizontal`,mediaAspect:`square`,title:`Media card`,description:`The same Card primitive owns image, copy, action and footer slots.`,media:(0,i.jsx)(`div`,{className:`h-full min-h-36 bg-[linear-gradient(135deg,var(--primary),color-mix(in_oklch,var(--primary),white_42%))]`}),action:(0,i.jsx)(e.Button,{type:`button`,size:`xs`,children:`View`}),content:(0,i.jsx)(`p`,{className:`text-sm leading-6 aui-text-muted`,children:`Use media slots for previews, thumbnails, charts, or product visuals without creating another card component.`})}),(0,i.jsx)(t.Card,{size:`sm`,density:`compact`,title:`Compact action card`,description:`Dense layouts still use the same header, content and footer anatomy.`,content:(0,i.jsx)(`div`,{className:`text-sm aui-text-strong`,children:`12 files ready for review`}),footer:(0,i.jsx)(e.Button,{type:`button`,size:`xs`,variant:`secondary`,children:`Review files`})})]})]})]})}exports.CardShowcase=s;

package/dist/showcase/premium/card/showcase.js

@@ -1,105 +1,154 @@
-import { Card as e } from "../../../components/ui/card/index.js";
-import { Badge as t } from "../../../components/ui/badge/index.js";
-import { cardDemoProjects as n } from "./data.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Card as t } from "../../../components/ui/card/index.js";
+import { Badge as n } from "../../../components/ui/badge/index.js";
+import { cardDemoProjects as r } from "./data.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/showcase/premium/card/showcase.tsx
-var a = [
+var o = [
 	"secondary",
 	"outline",
 	"destructive"
-], o = "border-t border-[color:var(--aui-divider)] py-6";
-function s({ state: s }) {
-	let c = n[0], l = n[1];
-	return /* @__PURE__ */ i("div", {
+], s = "border-t border-[color:var(--aui-divider)] py-6";
+function c({ state: c }) {
+	let l = r[0], u = r[1];
+	return /* @__PURE__ */ a("div", {
 		className: "space-y-0",
-		children: [/* @__PURE__ */ r("section", {
+		children: [/* @__PURE__ */ i("section", {
 			className: "pb-6",
-			children: /* @__PURE__ */ i("div", {
+			children: /* @__PURE__ */ a("div", {
 				className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
-				children: [/* @__PURE__ */ i("div", {
+				children: [/* @__PURE__ */ a("div", {
 					className: "max-w-xl",
 					children: [
-						/* @__PURE__ */ r("p", {
+						/* @__PURE__ */ i("p", {
 							className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 							children: "Container"
 						}),
-						/* @__PURE__ */ r("h3", {
+						/* @__PURE__ */ i("h3", {
 							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 							children: "One card should hold the whole story"
 						}),
-						/* @__PURE__ */ r("p", {
+						/* @__PURE__ */ i("p", {
 							className: "mt-3 text-sm leading-6 aui-text-muted",
 							children: "Show one rich card and one compact card, not extra chrome around them."
 						})
 					]
-				}), /* @__PURE__ */ i("div", {
+				}), /* @__PURE__ */ a("div", {
 					className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
 					children: [
-						/* @__PURE__ */ i("div", {
+						/* @__PURE__ */ a("div", {
 							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ r("p", {
+							children: [/* @__PURE__ */ i("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Primary"
-							}), /* @__PURE__ */ r("p", {
+							}), /* @__PURE__ */ i("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: c.title
+								children: l.title
 							})]
 						}),
-						/* @__PURE__ */ i("div", {
+						/* @__PURE__ */ a("div", {
 							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ r("p", {
+							children: [/* @__PURE__ */ i("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Compact"
-							}), /* @__PURE__ */ r("p", {
+							}), /* @__PURE__ */ i("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: s.cardCompact ? "Small" : "Default"
+								children: c.cardCompact ? "Small" : "Default"
 							})]
 						}),
-						/* @__PURE__ */ i("div", {
+						/* @__PURE__ */ a("div", {
 							className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-							children: [/* @__PURE__ */ r("p", {
+							children: [/* @__PURE__ */ i("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 								children: "Metrics"
-							}), /* @__PURE__ */ r("p", {
+							}), /* @__PURE__ */ i("p", {
 								className: "mt-2 text-lg font-semibold aui-text-strong",
-								children: c.metrics.length
+								children: l.metrics.length
 							})]
 						})
 					]
 				})]
 			})
-		}), /* @__PURE__ */ r("section", {
-			className: o,
-			children: /* @__PURE__ */ i("div", {
+		}), /* @__PURE__ */ a("section", {
+			className: s,
+			children: [/* @__PURE__ */ a("div", {
 				className: "grid gap-4 xl:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)]",
-				children: [/* @__PURE__ */ r(e, {
-					size: s.cardCompact ? "sm" : "default",
-					title: c.title,
-					description: c.description,
-					content: /* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ i(t, {
+					size: c.cardCompact ? "sm" : "default",
+					eyebrow: "Content",
+					title: l.title,
+					description: l.description,
+					badge: /* @__PURE__ */ i(n, {
+						tone: "success",
+						variant: "soft",
+						children: "Live"
+					}),
+					action: /* @__PURE__ */ i(e, {
+						type: "button",
+						size: "xs",
+						variant: "outline",
+						children: "Open"
+					}),
+					content: /* @__PURE__ */ i("div", {
 						className: "grid gap-3 sm:grid-cols-3",
-						children: c.metrics.map((e) => /* @__PURE__ */ r("div", {
+						children: l.metrics.map((e) => /* @__PURE__ */ i("div", {
 							className: "rounded-xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm font-medium aui-text-strong",
 							children: e
 						}, e))
 					}),
-					footer: c.footer
-				}), /* @__PURE__ */ r(e, {
+					footer: l.footer
+				}), /* @__PURE__ */ i(t, {
 					size: "sm",
-					title: l.title,
-					description: l.description,
-					content: /* @__PURE__ */ r("div", {
+					interactive: !0,
+					selected: !0,
+					eyebrow: "Selectable",
+					title: u.title,
+					description: u.description,
+					content: /* @__PURE__ */ i("div", {
 						className: "flex flex-wrap gap-2",
-						children: l.metrics.map((e, n) => /* @__PURE__ */ r(t, {
-							variant: a[n],
+						children: u.metrics.map((e, t) => /* @__PURE__ */ i(n, {
+							variant: o[t],
 							children: e
 						}, e))
 					}),
-					footer: l.footer
+					footer: u.footer
 				})]
-			})
+			}), /* @__PURE__ */ a("div", {
+				className: "mt-4 grid gap-4 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]",
+				children: [/* @__PURE__ */ i(t, {
+					orientation: "horizontal",
+					mediaAspect: "square",
+					title: "Media card",
+					description: "The same Card primitive owns image, copy, action and footer slots.",
+					media: /* @__PURE__ */ i("div", { className: "h-full min-h-36 bg-[linear-gradient(135deg,var(--primary),color-mix(in_oklch,var(--primary),white_42%))]" }),
+					action: /* @__PURE__ */ i(e, {
+						type: "button",
+						size: "xs",
+						children: "View"
+					}),
+					content: /* @__PURE__ */ i("p", {
+						className: "text-sm leading-6 aui-text-muted",
+						children: "Use media slots for previews, thumbnails, charts, or product visuals without creating another card component."
+					})
+				}), /* @__PURE__ */ i(t, {
+					size: "sm",
+					density: "compact",
+					title: "Compact action card",
+					description: "Dense layouts still use the same header, content and footer anatomy.",
+					content: /* @__PURE__ */ i("div", {
+						className: "text-sm aui-text-strong",
+						children: "12 files ready for review"
+					}),
+					footer: /* @__PURE__ */ i(e, {
+						type: "button",
+						size: "xs",
+						variant: "secondary",
+						children: "Review files"
+					})
+				})]
+			})]
 		})]
 	});
 }
 //#endregion
-export { s as CardShowcase };
+export { c as CardShowcase };

package/dist/showcase/premium/carousel/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/carousel.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[{title:`Onboarding`,text:`Guide quickly from first login.`,tone:`Launch`},{title:`Components`,text:`Review ready-made dashboard patterns.`,tone:`Library`},{title:`Release`,text:`Publish, test, and iterate faster.`,tone:`Ship`}];function o(){let[e,o]=r.useState(!0),[s,c]=r.useState(!0),[l,u]=r.useState(!1),[d,f]=r.useState(0),[p,m]=r.useState(!1);return(0,i.jsxs)(`div`,{className:`space-y-5`,children:[(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,i.jsxs)(t.Button,{size:`sm`,variant:e?`default`:`outline`,onClick:()=>o(e=>!e),children:[e?`Hide`:`Show`,` arrows`]}),(0,i.jsxs)(t.Button,{size:`sm`,variant:s?`default`:`outline`,onClick:()=>c(e=>!e),children:[s?`Hide`:`Show`,` dots`]}),(0,i.jsxs)(t.Button,{size:`sm`,variant:l?`default`:`outline`,onClick:()=>u(e=>!e),children:[l?`Stop`:`Start`,` autoplay`]})]}),(0,i.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:a.map((e,n)=>(0,i.jsxs)(t.Button,{type:`button`,variant:d===n?`default`:`outline`,className:`justify-start`,onClick:()=>f(n),children:[n+1,`. `,e.title]},e.title))}),(0,i.jsx)(n.Carousel,{index:d,loop:!0,showArrows:e,showDots:s,autoplay:l,autoplayInterval:2200,showPlaybackControl:!0,onIndexChange:e=>f(e),onAutoplayChange:m,previousLabel:`Previous slide`,nextLabel:`Next slide`,children:a.map((e,t)=>(0,i.jsx)(n.CarouselItem,{children:(0,i.jsx)(`div`,{className:`min-h-56 rounded-xl border border-border bg-card p-8`,children:(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,i.jsxs)(`div`,{className:`grid gap-2`,children:[(0,i.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] text-primary`,children:e.tone}),(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground`,children:`Slide ${t+1}`}),(0,i.jsx)(`h3`,{className:`text-lg font-semibold text-foreground`,children:e.title}),(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:e.text})]}),(0,i.jsxs)(`div`,{className:`rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground`,children:[t+1,`/`,a.length]})]})})},e.title))}),(0,i.jsxs)(`div`,{className:`text-sm text-muted-foreground`,children:[`Playback: `,p||l?`active`:`paused`]})]})}exports.CarouselShowcase=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs"),n=require("../../../components/ui/button/index.cjs"),r=require("../../../components/display/carousel.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[{title:`Onboarding`,text:`Guide quickly from first login.`,tone:`Launch`,detail:`Hero slider for product onboarding and release tours.`},{title:`Components`,text:`Review ready-made dashboard patterns.`,tone:`Library`,detail:`Card rail, docs previews, and swipe-ready gallery states.`},{title:`Release`,text:`Publish, test, and iterate faster.`,tone:`Ship`,detail:`Active slide details stay below the main frame for context.`}];function s(){let[e,s]=i.useState(!0),[c,l]=i.useState(!0),[u,d]=i.useState(!1),[f,p]=i.useState(0),[m,h]=i.useState(!1);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,a.jsxs)(n.Button,{size:`sm`,variant:e?`default`:`outline`,onClick:()=>s(e=>!e),children:[e?`Hide`:`Show`,` arrows`]}),(0,a.jsxs)(n.Button,{size:`sm`,variant:c?`default`:`outline`,onClick:()=>l(e=>!e),children:[c?`Hide`:`Show`,` dots`]}),(0,a.jsxs)(n.Button,{size:`sm`,variant:u?`default`:`outline`,onClick:()=>d(e=>!e),children:[u?`Stop`:`Start`,` autoplay`]})]}),(0,a.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:o.map((e,t)=>(0,a.jsxs)(n.Button,{type:`button`,variant:f===t?`default`:`outline`,className:`justify-start`,onClick:()=>p(t),children:[t+1,`. `,e.title]},e.title))}),(0,a.jsx)(r.Carousel,{index:f,loop:!0,showArrows:e,showDots:c,showStatus:!0,showThumbnails:!0,autoplay:u,autoplayInterval:2200,showPlaybackControl:!0,aspectRatio:`16 / 9`,onIndexChange:e=>p(e),onAutoplayChange:h,previousLabel:`Previous slide`,nextLabel:`Next slide`,renderThumbnail:(e,n,r)=>(0,a.jsxs)(`div`,{className:t.cn(`grid gap-1 p-3`,r&&`bg-primary/5`),children:[(0,a.jsxs)(`div`,{className:`text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground`,children:[`0`,n+1]}),(0,a.jsx)(`div`,{className:`text-sm font-medium text-foreground`,children:o[n]?.title})]}),renderActiveDetail:(e,t)=>(0,a.jsxs)(`div`,{className:`rounded-[20px] border border-border/70 bg-card/80 p-4`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold text-foreground`,children:o[t]?.title}),(0,a.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:o[t]?.detail})]}),children:o.map((e,t)=>(0,a.jsx)(r.CarouselItem,{children:(0,a.jsx)(`div`,{className:`min-h-56 rounded-xl border border-border bg-card p-8`,children:(0,a.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,a.jsxs)(`div`,{className:`grid gap-2`,children:[(0,a.jsx)(`p`,{className:`text-[11px] font-semibold uppercase tracking-[0.24em] text-primary`,children:e.tone}),(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground`,children:`Slide ${t+1}`}),(0,a.jsx)(`h3`,{className:`text-lg font-semibold text-foreground`,children:e.title}),(0,a.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:e.text})]}),(0,a.jsxs)(`div`,{className:`rounded-full border border-border/70 px-3 py-1 text-xs text-muted-foreground`,children:[t+1,`/`,o.length]})]})})},e.title))}),(0,a.jsxs)(`div`,{className:`text-sm text-muted-foreground`,children:[`Playback: `,m||u?`active`:`paused`]})]})}exports.CarouselShowcase=s;