admin-ui-starter-kit 0.6.6 → 0.6.8

package/dist/showcase/assets/overlays-KKZpxWjt.js

@@ -0,0 +1,408 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{h as r,n as i,o as a,p as o,t as s}from"./section-BXsVHOsI.js";import{t as c}from"./badge-check-BfY3RIjR.js";import{r as l,t as u}from"./example-Cv05rz75.js";import{t as d}from"./circle-alert-C6XBfkf2.js";import{t as f}from"./circle-check-big-C8o9clAE.js";import{t as ee}from"./circle-check-DvCYlVmL.js";import{t as p}from"./circle-question-mark-DYPX0qe9.js";import{t as m}from"./credit-card-QbZMZB90.js";import{t as h}from"./file-text-BBWpAppG.js";import{t as g}from"./info-DLaTRPUT.js";import{t as _}from"./send-Dxs1-xSj.js";import{t as v}from"./settings-CCNP7XOu.js";import{t as y}from"./shield-alert-C-3oWpoe.js";import{t as b}from"./sparkles-DqH40POl.js";import{t as te}from"./trash-2-zILxQmtX.js";import{t as x}from"./user-plus-DhswMZvb.js";import{t as ne}from"./x--LIqlhum.js";import{N as re,P as S,d as C,n as w}from"./index-ATou_nFA.js";import{t as T}from"./props-table-BAfz1Zc6.js";import{r as E,t as D}from"./avatar-BeFx8JQd.js";import{c as O,r as k,t as A,u as j}from"./item-Baq-Mmy2.js";import{t as M}from"./input-Cmrgo51H.js";import{n as N}from"./form-field-SW-Yp7H7.js";import{i as ie,n as ae,r as oe,t as P}from"./dialog-DiAkrPHO.js";var F=t(n(),1),se=t(S(),1),I=C(),L={xs:`max-w-xs`,sm:`max-w-sm`,md:`max-w-md`,lg:`max-w-lg`,xl:`max-w-xl`,"2xl":`max-w-2xl`,"3xl":`max-w-3xl`,"4xl":`max-w-4xl`,"5xl":`max-w-5xl`,full:`max-w-[calc(100vw-2rem)]`},ce={right:{position:`fixed top-0 right-0 bottom-0`,size:`h-full`,animation:`animate-in slide-in-from-right duration-300 [&.closing]:animate-out [&.closing]:slide-out-to-right [&.closing]:duration-200`,rounded:`rounded-l-xl`},left:{position:`fixed top-0 left-0 bottom-0`,size:`h-full`,animation:`animate-in slide-in-from-left duration-300 [&.closing]:animate-out [&.closing]:slide-out-to-left [&.closing]:duration-200`,rounded:`rounded-r-xl`},top:{position:`fixed top-0 left-0 right-0`,size:`w-full`,animation:`animate-in slide-in-from-top duration-300 [&.closing]:animate-out [&.closing]:slide-out-to-top [&.closing]:duration-200`,rounded:`rounded-b-xl`},bottom:{position:`fixed bottom-0 left-0 right-0`,size:`w-full`,animation:`animate-in slide-in-from-bottom duration-300 [&.closing]:animate-out [&.closing]:slide-out-to-bottom [&.closing]:duration-200`,rounded:`rounded-t-xl`}},le={default:(0,I.jsx)(p,{className:`text-muted-foreground h-5 w-5`}),error:(0,I.jsx)(d,{className:`text-destructive h-5 w-5`}),warning:(0,I.jsx)(r,{className:`text-warning h-5 w-5`}),info:(0,I.jsx)(g,{className:`text-info h-5 w-5`}),success:(0,I.jsx)(f,{className:`text-success h-5 w-5`})};function R({open:e,onOpenChange:t,onClose:n,children:r,title:i,description:a,visuallyHideHeader:s=!1,className:c,contentClassName:u,initialFocusRef:d,closeOnEscape:f=!0,closeOnBackdropClick:ee=!0,strings:p,showCancel:m=!0,showConfirm:h=!0,onCancel:g,onConfirm:_,onAsyncConfirm:v,closeOnAsyncComplete:y=!0,confirmVariant:b=`primary`,confirmStyle:te=`solid`,isLoading:x=!1,formId:re,footer:S,emphasis:C=!1,tone:T=`default`,showIcon:E=!1,alertMessage:D,direction:O=`right`,width:k=`lg`,showFooter:A=!0,trigger:j}){let M=(0,F.useId)(),N=(0,F.useId)(),oe=i?M:void 0,P=a?N:void 0,{isOpen:R,isClosing:z,openDialog:B,closeDialog:V,dialogProps:H,handleBackdropClick:U}=ie({open:e,onOpenChange:t,onClose:n,closeOnEscape:f,closeOnBackdropClick:ee,initialFocusRef:d}),{strings:W,finalConfirmVariant:G,confirmButtonOnClick:K,effectiveLoading:q,handleCancel:J}=ae({closeDialog:V,onConfirm:_,onAsyncConfirm:v,closeOnAsyncComplete:y,confirmVariant:b,isLoading:x,formId:re,onCancel:g,customStrings:p,emphasis:C,tone:T}),Y=ce[O],X=O===`left`||O===`right`,Z=!!(r||D),Q=A&&(m||h||S),ue=j&&(0,F.isValidElement)(j)?(0,F.cloneElement)(j,{onClick:e=>{let t=j.props.onClick;t?.(e),B()}}):j?(0,I.jsx)(`span`,{role:`button`,tabIndex:0,onClick:B,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),B())},className:`cursor-pointer`,children:j}):null;return!R&&!z&&!j?null:(0,I.jsxs)(I.Fragment,{children:[ue,!!(R||z)&&(0,se.createPortal)((0,I.jsxs)(`div`,{className:`fixed inset-0 z-50`,children:[(0,I.jsx)(`div`,{className:w(`absolute inset-0 bg-foreground/50 backdrop-blur-[1px]`,`transition-opacity duration-300`,z?`opacity-0`:`animate-in fade-in-0 duration-300`),onClick:U,"aria-hidden":`true`}),(0,I.jsxs)(`dialog`,{...H,className:w(`drawer--component inset-auto m-0 p-0`,Y.position,Y.size,`border shadow-xl`,`bg-background text-foreground`,Y.rounded,X&&`w-full`,X&&L[k],!X&&`max-h-[85vh]`,Y.animation,`outline-none focus-visible:outline-none`,`flex flex-col`,c),"aria-modal":`true`,role:`dialog`,"aria-labelledby":oe,"aria-describedby":P,children:[(0,I.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,onClick:V,className:w(`absolute right-4 top-4 z-10 size-7 rounded-md p-0`,`text-muted-foreground transition-colors`,`hover:bg-muted hover:text-foreground`,`disabled:pointer-events-none`),"aria-label":W.close,children:(0,I.jsx)(ne,{className:`h-4 w-4`})}),!!(i||a)&&(0,I.jsxs)(`div`,{className:w(`flex items-start gap-3 px-6 pb-4 pt-6`,s&&`sr-only`),children:[!!E&&(0,I.jsx)(`div`,{className:`shrink-0 pt-0.5`,children:le[T]}),(0,I.jsxs)(`div`,{className:`min-w-0 flex-1 pr-6`,children:[!!i&&(0,I.jsx)(o,{id:M,tag:`div`,size:`base`,weight:`semibold`,children:i}),!!a&&(0,I.jsx)(o,{id:N,tag:`p`,type:`secondary`,className:`mt-1`,children:a})]})]}),!!Z&&(0,I.jsxs)(`div`,{className:w(`flex-1 overflow-auto px-6`,i||a?`pb-6`:`py-6`,u),children:[!!D&&(0,I.jsx)(`div`,{className:w(`mb-4 rounded-md border p-3`,T===`error`&&`border-destructive/30 bg-destructive/5`,T===`warning`&&`border-warning/40 bg-warning/10`,T===`info`&&`border-info/40 bg-info/10`,T===`success`&&`border-success/40 bg-success/10`,T==="default"&&`border-border bg-muted/40`),children:(0,I.jsx)(o,{tag:`p`,children:D})}),r]}),!!Q&&(0,I.jsx)(`div`,{className:`border-t px-6 py-4`,children:S??(0,I.jsxs)(`div`,{className:`flex flex-col-reverse gap-3 sm:flex-row sm:justify-end`,children:[!!m&&(0,I.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:J,children:W.cancel}),!!h&&(0,I.jsx)(l,{type:`button`,variant:G,buttonStyle:te,onClick:K,loading:q,loadingLabels:{loading:W.loading},children:W.confirm})]})})]})]}),document.body)]})}var z=(0,F.memo)(R);z.displayName=`Drawer`;var B={default:{icon:(0,I.jsx)(p,{className:`h-6 w-6`}),iconColor:`text-muted-foreground`},error:{icon:(0,I.jsx)(d,{className:`h-6 w-6`}),iconColor:`text-destructive`},warning:{icon:(0,I.jsx)(r,{className:`h-6 w-6`}),iconColor:`text-warning`},info:{icon:(0,I.jsx)(g,{className:`h-6 w-6`}),iconColor:`text-info`},success:{icon:(0,I.jsx)(f,{className:`h-6 w-6`}),iconColor:`text-success`}};function V({open:e,onOpenChange:t,onClose:n,children:r,title:i,description:a,visuallyHideHeader:s=!1,className:c,contentClassName:u,initialFocusRef:d,closeOnEscape:f=!0,closeOnBackdropClick:ee=!1,strings:p,showCancel:m=!0,showConfirm:h=!0,onCancel:g,onConfirm:_,onAsyncConfirm:v,closeOnAsyncComplete:y=!0,confirmVariant:b,confirmStyle:te=`solid`,isLoading:x=!1,formId:ne,footer:S,tone:C=`default`,showIcon:T=!0,alertMessage:E,trigger:D,destructive:O=!1}){let k=(0,F.useId)(),A=(0,F.useId)(),j=i?k:void 0,M=a?A:void 0,{isOpen:N,isClosing:P,openDialog:L,closeDialog:ce,dialogProps:le,handleBackdropClick:R}=ie({open:e,onOpenChange:t,onClose:n,closeOnEscape:f,closeOnBackdropClick:ee,initialFocusRef:d}),z=re(oe,p),V=(0,F.useMemo)(()=>O?`error`:b||{default:`primary`,error:`error`,warning:`warning`,info:`primary`,success:`success`}[C],[O,b,C]),{strings:H,confirmButtonOnClick:U,effectiveLoading:W,handleCancel:G}=ae({closeDialog:ce,onConfirm:_,onAsyncConfirm:v,closeOnAsyncComplete:y,confirmVariant:V,isLoading:x,formId:ne,onCancel:g,customStrings:z}),K=B[C],q=D&&(0,F.isValidElement)(D)?(0,F.cloneElement)(D,{onClick:e=>{let t=D.props.onClick;t?.(e),L()}}):D?(0,I.jsx)(`span`,{role:`button`,tabIndex:0,onClick:L,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),L())},className:`cursor-pointer`,children:D}):null;return!N&&!P&&!D?null:(0,I.jsxs)(I.Fragment,{children:[q,!!(N||P)&&(0,se.createPortal)((0,I.jsxs)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center p-4`,children:[(0,I.jsx)(`div`,{className:w(`absolute inset-0 bg-foreground/50 backdrop-blur-[1px]`,`transition-opacity duration-200`,P?`opacity-0`:`animate-in fade-in-0 duration-200`),onClick:R,"aria-hidden":`true`}),(0,I.jsxs)(`dialog`,{...le,className:w(`alert-dialog--component relative z-10 m-0 w-full max-w-md p-0`,`max-h-[90vh] flex flex-col`,`rounded-lg border shadow-lg`,`bg-background text-foreground`,`animate-in fade-in-0 zoom-in-95 duration-200`,`[&.closing]:animate-out [&.closing]:fade-out-0 [&.closing]:zoom-out-95 [&.closing]:duration-150`,`outline-none focus-visible:outline-none`,c),role:`alertdialog`,"aria-modal":`true`,"aria-labelledby":j,"aria-describedby":M,children:[(0,I.jsxs)(`div`,{className:`flex-1 overflow-auto p-6`,children:[!!T&&!s&&(0,I.jsx)(`div`,{className:w(`mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full`,C===`error`&&`bg-destructive/10`,C===`warning`&&`bg-warning/15`,C===`info`&&`bg-info/15`,C===`success`&&`bg-success/15`,C==="default"&&`bg-muted`),children:(0,I.jsx)(`span`,{className:K.iconColor,children:K.icon})}),!!(i||a)&&(0,I.jsxs)(`div`,{className:w(s&&`sr-only`),children:[!!i&&(0,I.jsx)(o,{id:k,tag:`div`,size:`base`,weight:`semibold`,align:`center`,children:i}),!!a&&(0,I.jsx)(o,{id:A,tag:`p`,type:`secondary`,align:`center`,className:`mt-2`,children:a})]}),!!E&&(0,I.jsx)(`div`,{className:w(`mt-4 rounded-md border p-3 text-left`,C===`error`&&`border-destructive/30 bg-destructive/5`,C===`warning`&&`border-warning/40 bg-warning/10`,C===`info`&&`border-info/40 bg-info/10`,C===`success`&&`border-success/40 bg-success/10`,C==="default"&&`border-border bg-muted/40`),children:(0,I.jsx)(o,{tag:`p`,children:E})}),!!r&&(0,I.jsx)(`div`,{className:w(`mt-4`,u),children:r})]}),!!(m||h||S)&&(0,I.jsx)(`div`,{className:`border-t px-6 py-4`,children:S??(0,I.jsxs)(`div`,{className:`flex flex-col-reverse gap-3 sm:flex-row sm:justify-end`,children:[!!m&&(0,I.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:G,className:`w-full sm:w-auto`,children:H.cancel}),!!h&&(0,I.jsx)(l,{type:`button`,variant:V,buttonStyle:te,onClick:U,loading:W,loadingLabels:{loading:H.loading},className:`w-full sm:w-auto`,children:H.confirm})]})})]})]}),document.body)]})}var H=(0,F.memo)(V);H.displayName=`AlertDialog`;var U=e({APISurface:()=>W,AlertDialogConfirmationPatterns:()=>X,BestPractices:()=>Z,DialogDefault:()=>G,DialogEmphasisTones:()=>K,DialogFormPattern:()=>J,DialogRichContent:()=>q,Drawer4Directions:()=>Y});function W(){return(0,I.jsx)(I.Fragment,{children:(0,I.jsxs)(o,{type:`secondary`,children:[`All overlays accept the same core props: `,(0,I.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`{ open, onOpenChange, onClose, title, description, onConfirm, onCancel, onAsyncConfirm, tone, emphasis, alertMessage, footer, isLoading }`}),`. Backed by the native `,(0,I.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`<dialog>`}),` element for proper focus trapping, ESC handling, and accessibility — no extra portal libraries.`]})})}function G(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:(0,I.jsx)(l,{variant:`primary`,icon:v,onClick:()=>t(!0),children:`Open dialog`})}),(0,I.jsx)(P,{open:e,onOpenChange:t,title:`Save workspace settings?`,description:`Changes will apply immediately for everyone on the team. You can edit them again later from Settings → Workspace.`,onConfirm:()=>t(!1)})]})}function K(){let[e,t]=(0,F.useState)(!1),[n,r]=(0,F.useState)(!1),[i,a]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,I.jsx)(l,{variant:`primary`,icon:g,onClick:()=>t(!0),children:`Info`}),(0,I.jsx)(l,{variant:`warning`,icon:d,onClick:()=>r(!0),children:`Warning`}),(0,I.jsx)(l,{variant:`success`,icon:ee,onClick:()=>a(!0),children:`Success`})]}),(0,I.jsx)(P,{open:e,onOpenChange:t,title:`New beta feature available`,description:`The redesigned analytics dashboard is live for early-access workspaces. Try it out and let us know what works.`,tone:`info`,emphasis:!0,confirmVariant:`primary`,onConfirm:()=>t(!1)}),(0,I.jsx)(P,{open:n,onOpenChange:r,title:`Reset workspace?`,description:`This resets all custom views and starred items for your team. Members will see the default layout next sign-in.`,tone:`warning`,emphasis:!0,confirmVariant:`warning`,alertMessage:`Reset is irreversible — exports of custom views are not generated automatically.`,onConfirm:()=>r(!1)}),(0,I.jsx)(P,{open:i,onOpenChange:a,title:`Subscription activated`,description:`Your team is on the Pro Annual plan until May 12, 2027. The first invoice has been emailed to your billing contact.`,tone:`success`,emphasis:!0,confirmVariant:`success`,onConfirm:()=>a(!1)})]})}function q(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:(0,I.jsx)(l,{variant:`primary`,icon:x,onClick:()=>t(!0),children:`Invite teammate`})}),(0,I.jsx)(P,{open:e,onOpenChange:t,title:`Invite to workspace`,description:`They'll get an email with a link to join your workspace as an Editor.`,size:`md`,onConfirm:()=>t(!1),children:(0,I.jsxs)(`div`,{className:`space-y-3`,children:[(0,I.jsxs)(`div`,{className:`rounded-lg border border-border bg-muted/30 p-3`,children:[(0,I.jsx)(o,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Invitation preview`}),(0,I.jsxs)(`div`,{className:`mt-2 flex items-center gap-3`,children:[(0,I.jsx)(D,{className:`size-avatar`,children:(0,I.jsx)(E,{className:`bg-primary/10 text-primary text-xs font-semibold`,children:`YO`})}),(0,I.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,I.jsx)(o,{weight:`semibold`,children:`You invited stefan@example.com`}),(0,I.jsx)(o,{size:`xs`,type:`secondary`,children:`Editor · Read & write access`})]})]})]}),(0,I.jsx)(`div`,{className:`space-y-2`,children:[{icon:c,label:`Can edit pages and components`},{icon:c,label:`Can manage their own API keys`},{icon:c,label:`Cannot manage billing or members`}].map(e=>(0,I.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,I.jsx)(e.icon,{className:`size-3.5 shrink-0 text-success`,"aria-hidden":`true`}),(0,I.jsx)(o,{size:`xs`,type:`secondary`,children:e.label})]},e.label))})]})})]})}function J(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:(0,I.jsx)(l,{variant:`primary`,icon:m,onClick:()=>t(!0),children:`Add payment method`})}),(0,I.jsx)(P,{open:e,onOpenChange:t,title:`Add a payment method`,description:`We'll authorize a 0.00 USD transaction to verify the card.`,formId:`payment-form`,size:`md`,children:(0,I.jsxs)(`form`,{id:`payment-form`,onSubmit:e=>{e.preventDefault(),t(!1)},className:`space-y-3`,children:[(0,I.jsx)(N,{label:`Card number`,children:(0,I.jsx)(M,{type:`text`,placeholder:`4242 4242 4242 4242`,className:`font-mono tabular-nums`})}),(0,I.jsxs)(`div`,{className:`grid grid-cols-2 gap-3`,children:[(0,I.jsx)(N,{label:`Expiry`,children:(0,I.jsx)(M,{type:`text`,placeholder:`MM / YY`,className:`font-mono tabular-nums`})}),(0,I.jsx)(N,{label:`CVC`,children:(0,I.jsx)(M,{type:`text`,placeholder:`123`,className:`font-mono tabular-nums`})})]})]})})]})}function Y(){let[e,t]=(0,F.useState)(!1),[n,r]=(0,F.useState)(!1),[i,s]=(0,F.useState)(!1),[c,u]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,I.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>t(!0),children:`Right · booking detail`}),(0,I.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>r(!0),children:`Left · navigation`}),(0,I.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>s(!0),children:`Bottom · sheet`}),(0,I.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>u(!0),children:`Right · no footer`})]}),(0,I.jsx)(z,{open:e,onOpenChange:t,direction:`right`,title:`Booking #BKG-2026-0412`,description:`Inspect, edit, or cancel a booking from the side drawer — keeps the table visible behind.`,onConfirm:()=>t(!1),children:(0,I.jsxs)(`div`,{className:`space-y-4`,children:[(0,I.jsxs)(`div`,{className:`rounded-lg border border-border bg-muted/30 p-3`,children:[(0,I.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,I.jsx)(o,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Status`}),(0,I.jsx)(a,{variant:`success`,children:`Paid`})]}),(0,I.jsx)(o,{tag:`div`,size:`lg`,weight:`bold`,className:`mt-1 tabular-nums`,children:`180.00 USD`})]}),(0,I.jsx)(`div`,{className:`space-y-2`,children:[[`Customer`,`Sarah Smitha`],[`Experience`,`Spa Day Voucher`],[`Date`,`Apr 18, 2026 · 14:00`],[`Guests`,`2`]].map(([e,t])=>(0,I.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border/50 py-1.5 last:border-0`,children:[(0,I.jsx)(o,{size:`xs`,type:`secondary`,children:e}),(0,I.jsx)(o,{weight:`medium`,children:t})]},e))})]})}),(0,I.jsx)(z,{open:n,onOpenChange:r,direction:`left`,title:`Workspace`,description:`Quick-jump to common pages.`,showCancel:!1,showConfirm:!1,children:(0,I.jsx)(`nav`,{className:`space-y-1`,children:[{icon:h,label:`Bookings`},{icon:x,label:`Customers`},{icon:m,label:`Invoices`},{icon:v,label:`Settings`}].map(e=>(0,I.jsxs)(A,{render:(0,I.jsx)(`button`,{type:`button`}),className:`hover:bg-muted/50`,children:[(0,I.jsx)(O,{variant:`icon`,className:`text-muted-foreground`,children:(0,I.jsx)(e.icon,{})}),(0,I.jsx)(k,{children:(0,I.jsx)(j,{bold:!1,children:e.label})})]},e.label))})}),(0,I.jsx)(z,{open:i,onOpenChange:s,direction:`bottom`,title:`Quick actions`,onConfirm:()=>s(!1),children:(0,I.jsx)(`div`,{className:`grid grid-cols-2 gap-2 sm:grid-cols-4`,children:[{icon:_,label:`Send invoice`},{icon:x,label:`Add customer`},{icon:m,label:`Record payment`},{icon:h,label:`New booking`}].map(e=>(0,I.jsxs)(l,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,className:`h-auto flex-col gap-2 rounded-lg border border-border bg-card px-3 py-4 transition-colors hover:bg-muted/40`,children:[(0,I.jsx)(`span`,{className:`inline-flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary`,children:(0,I.jsx)(e.icon,{className:`size-4`})}),(0,I.jsx)(o,{size:`xs`,weight:`medium`,align:`center`,children:e.label})]},e.label))})}),(0,I.jsx)(z,{open:c,onOpenChange:u,direction:`right`,title:`Help & shortcuts`,description:`No footer — useful for read-only side panels.`,showCancel:!1,showConfirm:!1,children:(0,I.jsxs)(o,{type:`secondary`,children:[`Hide the footer entirely with `,(0,I.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`showCancel={false}`}),` + `,(0,I.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`showConfirm={false}`}),` for read-only side panels (help, settings, audit logs).`]})})]})}function X(){let[e,t]=(0,F.useState)(!1),[n,r]=(0,F.useState)(!1),[i,a]=(0,F.useState)(!1),[o,s]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,I.jsx)(l,{variant:`primary`,icon:_,onClick:()=>t(!0),children:`Send invoice`}),(0,I.jsx)(l,{variant:`error`,icon:te,onClick:()=>r(!0),children:`Delete`}),(0,I.jsx)(l,{variant:`warning`,buttonStyle:`outline`,icon:d,onClick:()=>a(!0),children:`Discard unsaved`}),(0,I.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,icon:y,onClick:()=>s(!0),children:`Sign out`})]}),(0,I.jsx)(H,{open:e,onOpenChange:t,title:`Send invoice now?`,description:`The customer will be emailed the PDF and a Stripe payment link. You can cancel any time before they pay.`,tone:`info`,onConfirm:()=>t(!1)}),(0,I.jsx)(H,{open:n,onOpenChange:r,title:`Delete this booking?`,description:`The booking, its payment, and all associated notes will be removed. This cannot be undone.`,destructive:!0,onConfirm:()=>r(!1)}),(0,I.jsx)(H,{open:i,onOpenChange:a,title:`Discard unsaved changes?`,description:`You have edits that haven't been saved yet. Leave the page and lose them?`,tone:`warning`,onConfirm:()=>a(!1)}),(0,I.jsx)(H,{open:o,onOpenChange:s,title:`Sign out of this device?`,description:`You'll need to sign in again next time you visit.`,onConfirm:()=>s(!1)})]})}function Z(){return(0,I.jsx)(I.Fragment,{children:(0,I.jsxs)(`div`,{className:`space-y-2 text-sm text-muted-foreground`,children:[(0,I.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,I.jsx)(p,{className:`size-4 shrink-0 mt-0.5 text-info`,"aria-hidden":`true`}),(0,I.jsxs)(o,{children:[(0,I.jsx)(`strong`,{className:`text-foreground font-semibold`,children:`Dialog`}),` for changes that affect content — settings, confirmations, edit forms.`]})]}),(0,I.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,I.jsx)(p,{className:`size-4 shrink-0 mt-0.5 text-info`,"aria-hidden":`true`}),(0,I.jsxs)(o,{children:[(0,I.jsx)(`strong`,{className:`text-foreground font-semibold`,children:`Drawer`}),` for content that lives next to the current view — record details, filters, navigation.`]})]}),(0,I.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,I.jsx)(p,{className:`size-4 shrink-0 mt-0.5 text-info`,"aria-hidden":`true`}),(0,I.jsxs)(o,{children:[(0,I.jsx)(`strong`,{className:`text-foreground font-semibold`,children:`AlertDialog`}),` for binary decisions that block other actions until resolved — destructive ops, sign-out, unsaved changes.`]})]}),(0,I.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,I.jsx)(b,{className:`size-4 shrink-0 mt-0.5 text-primary`,"aria-hidden":`true`}),(0,I.jsxs)(o,{children:[(0,I.jsx)(`strong`,{className:`text-foreground font-semibold`,children:`Async confirms`}),` — pass `,(0,I.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`onAsyncConfirm`}),` instead of `,(0,I.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`onConfirm`}),` to show a loading state while the action runs and auto-close on success.`]})]})]})})}var Q=`import { useState } from 'react';
+import {
+	AlertCircle,
+	BadgeCheck,
+	CheckCircle2,
+	CreditCard,
+	FileText,
+	HelpCircle,
+	Info,
+	Send,
+	Settings,
+	ShieldAlert,
+	Sparkles,
+	Trash2,
+	UserPlus,
+} from 'lucide-react';
+import { Avatar, AvatarFallback } from '@/components/base/display/avatar';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { FormField } from '@/components/base/forms';
+import { Input } from '@/components/base/forms/fields';
+import {
+	Item,
+	ItemContent,
+	ItemMedia,
+	ItemTitle,
+} from '@/components/base/item';
+import { Text } from '@/components/typography';
+import { AlertDialog, Dialog, Drawer } from '@/components/features/overlays';
+
+export function APISurface() {
+	return (
+		<>
+			<Text type="secondary">
+								All overlays accept the same core props: <code className="rounded bg-muted px-1 py-0.5 text-xs">{'{ open, onOpenChange, onClose, title, description, onConfirm, onCancel, onAsyncConfirm, tone, emphasis, alertMessage, footer, isLoading }'}</code>. Backed by the native <code className="rounded bg-muted px-1 py-0.5 text-xs">{'<dialog>'}</code> element for proper focus trapping, ESC handling, and accessibility — no extra portal libraries.
+							</Text>
+		</>
+	);
+}
+
+export function DialogDefault() {
+	// Dialog state
+		const [defaultOpen, setDefaultOpen] = useState(false);
+	return (
+		<>
+			<div className="flex flex-wrap gap-3">
+								<Button variant="primary" icon={Settings} onClick={() => setDefaultOpen(true)}>Open dialog</Button>
+							</div>
+							<Dialog
+								open={defaultOpen}
+								onOpenChange={setDefaultOpen}
+								title="Save workspace settings?"
+								description="Changes will apply immediately for everyone on the team. You can edit them again later from Settings → Workspace."
+								onConfirm={() => setDefaultOpen(false)}
+							/>
+		</>
+	);
+}
+
+export function DialogEmphasisTones() {
+	const [emphasisInfoOpen, setEmphasisInfoOpen] = useState(false);
+	const [emphasisWarningOpen, setEmphasisWarningOpen] = useState(false);
+	const [emphasisSuccessOpen, setEmphasisSuccessOpen] = useState(false);
+	return (
+		<>
+			<div className="flex flex-wrap gap-3">
+								<Button variant="primary" icon={Info} onClick={() => setEmphasisInfoOpen(true)}>Info</Button>
+								<Button variant="warning" icon={AlertCircle} onClick={() => setEmphasisWarningOpen(true)}>Warning</Button>
+								<Button variant="success" icon={CheckCircle2} onClick={() => setEmphasisSuccessOpen(true)}>Success</Button>
+							</div>
+							<Dialog
+								open={emphasisInfoOpen}
+								onOpenChange={setEmphasisInfoOpen}
+								title="New beta feature available"
+								description="The redesigned analytics dashboard is live for early-access workspaces. Try it out and let us know what works."
+								tone="info"
+								emphasis
+								confirmVariant="primary"
+								onConfirm={() => setEmphasisInfoOpen(false)}
+							/>
+							<Dialog
+								open={emphasisWarningOpen}
+								onOpenChange={setEmphasisWarningOpen}
+								title="Reset workspace?"
+								description="This resets all custom views and starred items for your team. Members will see the default layout next sign-in."
+								tone="warning"
+								emphasis
+								confirmVariant="warning"
+								alertMessage="Reset is irreversible — exports of custom views are not generated automatically."
+								onConfirm={() => setEmphasisWarningOpen(false)}
+							/>
+							<Dialog
+								open={emphasisSuccessOpen}
+								onOpenChange={setEmphasisSuccessOpen}
+								title="Subscription activated"
+								description="Your team is on the Pro Annual plan until May 12, 2027. The first invoice has been emailed to your billing contact."
+								tone="success"
+								emphasis
+								confirmVariant="success"
+								onConfirm={() => setEmphasisSuccessOpen(false)}
+							/>
+		</>
+	);
+}
+
+export function DialogRichContent() {
+	const [richContentOpen, setRichContentOpen] = useState(false);
+	return (
+		<>
+			<div className="flex flex-wrap gap-3">
+								<Button variant="primary" icon={UserPlus} onClick={() => setRichContentOpen(true)}>Invite teammate</Button>
+							</div>
+							<Dialog
+								open={richContentOpen}
+								onOpenChange={setRichContentOpen}
+								title="Invite to workspace"
+								description="They'll get an email with a link to join your workspace as an Editor."
+								size="md"
+								onConfirm={() => setRichContentOpen(false)}
+							>
+								<div className="space-y-3">
+									<div className="rounded-lg border border-border bg-muted/30 p-3">
+										<Text size="xs" type="secondary" weight="medium" className="uppercase tracking-wider">Invitation preview</Text>
+										<div className="mt-2 flex items-center gap-3">
+											<Avatar className="size-avatar">
+												<AvatarFallback className="bg-primary/10 text-primary text-xs font-semibold">YO</AvatarFallback>
+											</Avatar>
+											<div className="flex-1 min-w-0">
+												<Text weight="semibold">You invited stefan@example.com</Text>
+												<Text size="xs" type="secondary">Editor · Read & write access</Text>
+											</div>
+										</div>
+									</div>
+									<div className="space-y-2">
+										{[
+											{ icon: BadgeCheck, label: 'Can edit pages and components' },
+											{ icon: BadgeCheck, label: 'Can manage their own API keys' },
+											{ icon: BadgeCheck, label: 'Cannot manage billing or members' },
+										].map((row) => (
+											<div key={row.label} className="flex items-center gap-2">
+												<row.icon className="size-3.5 shrink-0 text-success" aria-hidden="true" />
+												<Text size="xs" type="secondary">{row.label}</Text>
+											</div>
+										))}
+									</div>
+								</div>
+							</Dialog>
+		</>
+	);
+}
+
+export function DialogFormPattern() {
+	const [formOpen, setFormOpen] = useState(false);
+	return (
+		<>
+			<div className="flex flex-wrap gap-3">
+								<Button variant="primary" icon={CreditCard} onClick={() => setFormOpen(true)}>Add payment method</Button>
+							</div>
+							<Dialog
+								open={formOpen}
+								onOpenChange={setFormOpen}
+								title="Add a payment method"
+								description="We'll authorize a 0.00 USD transaction to verify the card."
+								formId="payment-form"
+								size="md"
+							>
+								<form
+									id="payment-form"
+									onSubmit={(e) => {
+										e.preventDefault();
+										setFormOpen(false);
+									}}
+									className="space-y-3"
+								>
+									<FormField label="Card number">
+										<Input
+											type="text"
+											placeholder="4242 4242 4242 4242"
+											className="font-mono tabular-nums"
+										/>
+									</FormField>
+									<div className="grid grid-cols-2 gap-3">
+										<FormField label="Expiry">
+											<Input
+												type="text"
+												placeholder="MM / YY"
+												className="font-mono tabular-nums"
+											/>
+										</FormField>
+										<FormField label="CVC">
+											<Input
+												type="text"
+												placeholder="123"
+												className="font-mono tabular-nums"
+											/>
+										</FormField>
+									</div>
+								</form>
+							</Dialog>
+		</>
+	);
+}
+
+export function Drawer4Directions() {
+	// Drawer state
+		const [drawerRightOpen, setDrawerRightOpen] = useState(false);
+	const [drawerLeftOpen, setDrawerLeftOpen] = useState(false);
+	const [drawerBottomOpen, setDrawerBottomOpen] = useState(false);
+	const [drawerCustomOpen, setDrawerCustomOpen] = useState(false);
+	return (
+		<>
+			<div className="flex flex-wrap gap-3">
+								<Button variant="secondary" buttonStyle="outline" onClick={() => setDrawerRightOpen(true)}>Right · booking detail</Button>
+								<Button variant="secondary" buttonStyle="outline" onClick={() => setDrawerLeftOpen(true)}>Left · navigation</Button>
+								<Button variant="secondary" buttonStyle="outline" onClick={() => setDrawerBottomOpen(true)}>Bottom · sheet</Button>
+								<Button variant="secondary" buttonStyle="outline" onClick={() => setDrawerCustomOpen(true)}>Right · no footer</Button>
+							</div>
+
+							<Drawer
+								open={drawerRightOpen}
+								onOpenChange={setDrawerRightOpen}
+								direction="right"
+								title="Booking #BKG-2026-0412"
+								description="Inspect, edit, or cancel a booking from the side drawer — keeps the table visible behind."
+								onConfirm={() => setDrawerRightOpen(false)}
+							>
+								<div className="space-y-4">
+									<div className="rounded-lg border border-border bg-muted/30 p-3">
+										<div className="flex items-center justify-between">
+											<Text size="xs" type="secondary" weight="medium" className="uppercase tracking-wider">Status</Text>
+											<Badge variant="success">Paid</Badge>
+										</div>
+										<Text tag="div" size="lg" weight="bold" className="mt-1 tabular-nums">180.00 USD</Text>
+									</div>
+									<div className="space-y-2">
+										{[
+											['Customer', 'Sarah Smitha'],
+											['Experience', 'Spa Day Voucher'],
+											['Date', 'Apr 18, 2026 · 14:00'],
+											['Guests', '2'],
+										].map(([k, v]) => (
+											<div key={k} className="flex items-center justify-between border-b border-border/50 py-1.5 last:border-0">
+												<Text size="xs" type="secondary">{k}</Text>
+												<Text weight="medium">{v}</Text>
+											</div>
+										))}
+									</div>
+								</div>
+							</Drawer>
+
+							<Drawer
+								open={drawerLeftOpen}
+								onOpenChange={setDrawerLeftOpen}
+								direction="left"
+								title="Workspace"
+								description="Quick-jump to common pages."
+								showCancel={false}
+								showConfirm={false}
+							>
+								<nav className="space-y-1">
+									{[
+										{ icon: FileText, label: 'Bookings' },
+										{ icon: UserPlus, label: 'Customers' },
+										{ icon: CreditCard, label: 'Invoices' },
+										{ icon: Settings, label: 'Settings' },
+									].map((item) => (
+										<Item key={item.label} render={<button type="button" />} className="hover:bg-muted/50">
+											<ItemMedia variant="icon" className="text-muted-foreground">
+												<item.icon />
+											</ItemMedia>
+											<ItemContent>
+												<ItemTitle bold={false}>{item.label}</ItemTitle>
+											</ItemContent>
+										</Item>
+									))}
+								</nav>
+							</Drawer>
+
+							<Drawer
+								open={drawerBottomOpen}
+								onOpenChange={setDrawerBottomOpen}
+								direction="bottom"
+								title="Quick actions"
+								onConfirm={() => setDrawerBottomOpen(false)}
+							>
+								<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+									{[
+										{ icon: Send, label: 'Send invoice' },
+										{ icon: UserPlus, label: 'Add customer' },
+										{ icon: CreditCard, label: 'Record payment' },
+										{ icon: FileText, label: 'New booking' },
+									].map((a) => (
+										<Button
+											key={a.label}
+											type="button"
+											variant="secondary"
+											buttonStyle="ghost"
+											className="h-auto flex-col gap-2 rounded-lg border border-border bg-card px-3 py-4 transition-colors hover:bg-muted/40"
+										>
+											<span className="inline-flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+												<a.icon className="size-4" />
+											</span>
+											<Text size="xs" weight="medium" align="center">{a.label}</Text>
+										</Button>
+									))}
+								</div>
+							</Drawer>
+
+							<Drawer
+								open={drawerCustomOpen}
+								onOpenChange={setDrawerCustomOpen}
+								direction="right"
+								title="Help & shortcuts"
+								description="No footer — useful for read-only side panels."
+								showCancel={false}
+								showConfirm={false}
+							>
+								<Text type="secondary">
+									Hide the footer entirely with <code className="rounded bg-muted px-1 py-0.5 text-xs">{'showCancel={false}'}</code> + <code className="rounded bg-muted px-1 py-0.5 text-xs">{'showConfirm={false}'}</code> for read-only side panels (help, settings, audit logs).
+								</Text>
+							</Drawer>
+		</>
+	);
+}
+
+export function AlertDialogConfirmationPatterns() {
+	// AlertDialog state
+		const [confirmOpen, setConfirmOpen] = useState(false);
+	const [destructiveOpen, setDestructiveOpen] = useState(false);
+	const [unsavedOpen, setUnsavedOpen] = useState(false);
+	const [logoutOpen, setLogoutOpen] = useState(false);
+	return (
+		<>
+			<div className="flex flex-wrap gap-3">
+								<Button variant="primary" icon={Send} onClick={() => setConfirmOpen(true)}>Send invoice</Button>
+								<Button variant="error" icon={Trash2} onClick={() => setDestructiveOpen(true)}>Delete</Button>
+								<Button variant="warning" buttonStyle="outline" icon={AlertCircle} onClick={() => setUnsavedOpen(true)}>Discard unsaved</Button>
+								<Button variant="secondary" buttonStyle="outline" icon={ShieldAlert} onClick={() => setLogoutOpen(true)}>Sign out</Button>
+							</div>
+
+							<AlertDialog
+								open={confirmOpen}
+								onOpenChange={setConfirmOpen}
+								title="Send invoice now?"
+								description="The customer will be emailed the PDF and a Stripe payment link. You can cancel any time before they pay."
+								tone="info"
+								onConfirm={() => setConfirmOpen(false)}
+							/>
+							<AlertDialog
+								open={destructiveOpen}
+								onOpenChange={setDestructiveOpen}
+								title="Delete this booking?"
+								description="The booking, its payment, and all associated notes will be removed. This cannot be undone."
+								destructive
+								onConfirm={() => setDestructiveOpen(false)}
+							/>
+							<AlertDialog
+								open={unsavedOpen}
+								onOpenChange={setUnsavedOpen}
+								title="Discard unsaved changes?"
+								description="You have edits that haven't been saved yet. Leave the page and lose them?"
+								tone="warning"
+								onConfirm={() => setUnsavedOpen(false)}
+							/>
+							<AlertDialog
+								open={logoutOpen}
+								onOpenChange={setLogoutOpen}
+								title="Sign out of this device?"
+								description="You'll need to sign in again next time you visit."
+								onConfirm={() => setLogoutOpen(false)}
+							/>
+		</>
+	);
+}
+
+export function BestPractices() {
+	return (
+		<>
+			<div className="space-y-2 text-sm text-muted-foreground">
+								<div className="flex items-start gap-2">
+									<HelpCircle className="size-4 shrink-0 mt-0.5 text-info" aria-hidden="true" />
+									<Text>
+										<strong className="text-foreground font-semibold">Dialog</strong> for changes that affect content — settings, confirmations, edit forms.
+									</Text>
+								</div>
+								<div className="flex items-start gap-2">
+									<HelpCircle className="size-4 shrink-0 mt-0.5 text-info" aria-hidden="true" />
+									<Text>
+										<strong className="text-foreground font-semibold">Drawer</strong> for content that lives next to the current view — record details, filters, navigation.
+									</Text>
+								</div>
+								<div className="flex items-start gap-2">
+									<HelpCircle className="size-4 shrink-0 mt-0.5 text-info" aria-hidden="true" />
+									<Text>
+										<strong className="text-foreground font-semibold">AlertDialog</strong> for binary decisions that block other actions until resolved — destructive ops, sign-out, unsaved changes.
+									</Text>
+								</div>
+								<div className="flex items-start gap-2">
+									<Sparkles className="size-4 shrink-0 mt-0.5 text-primary" aria-hidden="true" />
+									<Text>
+										<strong className="text-foreground font-semibold">Async confirms</strong> — pass <code className="rounded bg-muted px-1 py-0.5 text-xs">onAsyncConfirm</code> instead of <code className="rounded bg-muted px-1 py-0.5 text-xs">onConfirm</code> to show a loading state while the action runs and auto-close on success.
+									</Text>
+								</div>
+							</div>
+		</>
+	);
+}
+`;function ue(e){let t={h4:`h4`,...e.components};return U||$(`Examples`,!1),W||$(`Examples.APISurface`,!0),X||$(`Examples.AlertDialogConfirmationPatterns`,!0),Z||$(`Examples.BestPractices`,!0),G||$(`Examples.DialogDefault`,!0),K||$(`Examples.DialogEmphasisTones`,!0),J||$(`Examples.DialogFormPattern`,!0),q||$(`Examples.DialogRichContent`,!0),Y||$(`Examples.Drawer4Directions`,!0),(0,I.jsxs)(i,{title:`Features · Overlays`,description:`Native dialog-backed Dialog, Drawer in four directions, and AlertDialog. Same emphasis/tone system, focus management, async-confirm flow, and confirm/cancel ergonomics across all three. Callback-driven so they slot into any framework.`,layer:`features`,status:`ready`,children:[(0,I.jsxs)(s,{title:`Examples`,id:`examples`,children:[(0,I.jsx)(u,{name:`APISurface`,source:Q,children:(0,I.jsx)(W,{})}),(0,I.jsx)(u,{name:`DialogDefault`,source:Q,children:(0,I.jsx)(G,{})}),(0,I.jsx)(u,{name:`DialogEmphasisTones`,source:Q,children:(0,I.jsx)(K,{})}),(0,I.jsx)(u,{name:`DialogRichContent`,source:Q,children:(0,I.jsx)(q,{})}),(0,I.jsx)(u,{name:`DialogFormPattern`,source:Q,children:(0,I.jsx)(J,{})}),(0,I.jsx)(u,{name:`Drawer4Directions`,source:Q,children:(0,I.jsx)(Y,{})}),(0,I.jsx)(u,{name:`AlertDialogConfirmationPatterns`,source:Q,children:(0,I.jsx)(X,{})}),(0,I.jsx)(u,{name:`BestPractices`,source:Q,children:(0,I.jsx)(Z,{})})]}),(0,I.jsxs)(s,{title:`API`,id:`api`,children:[(0,I.jsx)(t.h4,{children:`AlertDialog`}),(0,I.jsx)(T,{component:`AlertDialog`}),(0,I.jsx)(t.h4,{children:`Dialog`}),(0,I.jsx)(T,{component:`Dialog`}),(0,I.jsx)(t.h4,{children:`Drawer`}),(0,I.jsx)(T,{component:`Drawer`})]})]})}function de(e={}){let{wrapper:t}=e.components||{};return t?(0,I.jsx)(t,{...e,children:(0,I.jsx)(ue,{...e})}):ue(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{de as default};

package/dist/showcase/assets/overview-BjQe-YZE.js

@@ -0,0 +1,184 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,o as n,p as r,t as i}from"./section-BXsVHOsI.js";import{t as a}from"./example-Cv05rz75.js";import{t as o}from"./layers-DEZvT5cX.js";import{t as s}from"./route-B5vtDLsE.js";import{t as c}from"./shield-check-D11r1eJ8.js";import{a as l,d as u,l as d}from"./index-ATou_nFA.js";import{t as f}from"./icon-badge-Cr6DD-_7.js";import{t as p}from"./text-link-CqjW10Ce.js";import{t as m}from"./smart-card-DER7dpD9.js";var h=d(`blocks`,[[`path`,{d:`M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2`,key:`1ah6g2`}],[`rect`,{x:`14`,y:`2`,width:`8`,height:`8`,rx:`1`,key:`88lufb`}]]),g=d(`palette`,[[`path`,{d:`M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z`,key:`e79jfc`}],[`circle`,{cx:`13.5`,cy:`6.5`,r:`.5`,fill:`currentColor`,key:`1okk4w`}],[`circle`,{cx:`17.5`,cy:`10.5`,r:`.5`,fill:`currentColor`,key:`f64h9f`}],[`circle`,{cx:`6.5`,cy:`12.5`,r:`.5`,fill:`currentColor`,key:`qy21gx`}],[`circle`,{cx:`8.5`,cy:`7.5`,r:`.5`,fill:`currentColor`,key:`fotxhn`}]]),_=e({ArchitectureRule:()=>w,LayerMap:()=>x,NavigationModel:()=>S,OverviewSnapshot:()=>b,PackageFlow:()=>C}),v=u(),y=[{label:`Base`,description:`Tokenized wrappers around primitives: buttons, cards, forms, tables, display, and navigation.`,href:`#/base/buttons`,tone:`primary`},{label:`Services & hooks`,description:`Framework-neutral action runtime, provider hooks, layout hooks, and feature headless hooks.`,href:`#/services/actions`,tone:`info`},{label:`Layouts`,description:`Header, sidebar, app shell, page shell, and workspace layout contracts.`,href:`#/layout/app-shell`,tone:`warning`},{label:`Composed`,description:`Reusable domain surfaces assembled from base components.`,href:`#/composed/admin`,tone:`success`},{label:`Features`,description:`Callback-driven product features with strings, slots, hooks, and async seams.`,href:`#/features/global-search`,tone:`primary`}];function b(){return(0,v.jsxs)(`div`,{className:`grid w-full max-w-6xl gap-3 md:grid-cols-3`,children:[(0,v.jsx)(m,{title:`Package contract`,description:`Exact subpath imports, no framework dependencies.`,icon:(0,v.jsx)(f,{icon:c,tone:`success`,shape:`square`,size:`default`}),children:(0,v.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,v.jsx)(n,{variant:`success`,children:`Framework neutral`}),(0,v.jsx)(n,{variant:`secondary`,children:`Callback driven`}),(0,v.jsx)(n,{variant:`secondary`,children:`Tokenized`})]})}),(0,v.jsx)(m,{title:`Preview model`,description:`Every public surface has one route, examples, props, and source pointers.`,icon:(0,v.jsx)(f,{icon:s,tone:`info`,shape:`square`,size:`default`}),children:(0,v.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,v.jsx)(n,{variant:`secondary`,children:`MDX examples`}),(0,v.jsx)(n,{variant:`secondary`,children:`Props docs`}),(0,v.jsx)(n,{variant:`secondary`,children:`Visual QA`})]})}),(0,v.jsx)(m,{title:`Design system`,description:`Sizing and spacing resolve through CSS variables and UIProvider defaults.`,icon:(0,v.jsx)(f,{icon:g,tone:`primary`,shape:`square`,size:`default`}),children:(0,v.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,v.jsx)(n,{variant:`secondary`,children:`Action scale`}),(0,v.jsx)(n,{variant:`secondary`,children:`Display scale`}),(0,v.jsx)(n,{variant:`secondary`,children:`Row density`})]})})]})}function x(){return(0,v.jsx)(`div`,{className:`grid w-full max-w-6xl gap-3 md:grid-cols-2`,children:y.map(e=>(0,v.jsx)(m,{surface:`framed`,padding:`small`,className:`h-full`,children:(0,v.jsxs)(`div`,{className:`grid grid-cols-[var(--icon-lg)_minmax(0,1fr)] gap-3`,children:[(0,v.jsx)(f,{icon:h,tone:e.tone,shape:`square`,size:`small`}),(0,v.jsxs)(`div`,{className:`min-w-0 space-y-1.5`,children:[(0,v.jsxs)(`div`,{className:`flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1`,children:[(0,v.jsx)(r,{weight:`semibold`,children:e.label}),(0,v.jsx)(p,{href:e.href,size:`xs`,type:`primary`,weight:`medium`,underline:!1,children:`Browse`})]}),(0,v.jsx)(r,{size:`xs`,type:`secondary`,lineHeight:`snug`,className:`line-clamp-2`,children:e.description})]})]})},e.label))})}function S(){return(0,v.jsx)(m,{surface:`framed`,padding:`default`,className:`w-full max-w-4xl`,children:(0,v.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-[auto_minmax(0,1fr)] md:items-start`,children:[(0,v.jsx)(f,{icon:l,tone:`info`,shape:`square`}),(0,v.jsxs)(`div`,{className:`space-y-3`,children:[(0,v.jsxs)(`div`,{children:[(0,v.jsx)(r,{weight:`semibold`,children:`One sidebar owns the whole library map`}),(0,v.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1`,children:`Search routes, jump to CSS variables, then collapse Services & hooks, Base, Layouts, Composed, or Features while you work.`})]}),(0,v.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,v.jsx)(n,{variant:`secondary`,children:`Installation`}),(0,v.jsx)(n,{variant:`secondary`,children:`Overview`}),(0,v.jsx)(n,{variant:`secondary`,children:`CSS variables`}),(0,v.jsx)(n,{variant:`secondary`,children:`Showcase`}),(0,v.jsx)(n,{variant:`secondary`,children:`Services & hooks`}),(0,v.jsx)(n,{variant:`secondary`,children:`Component layers`})]})]})]})})}function C(){return(0,v.jsx)(`div`,{className:`grid w-full max-w-5xl gap-3 md:grid-cols-3`,children:[[`Install`,`Add the package, stylesheet, and optional feature peers.`],[`Compose`,`Import exact public subpaths and wire routing/data through callbacks.`],[`Verify`,`Use preview routes, docs checks, exports, build, and visual gates.`]].map(([e,t],n)=>(0,v.jsx)(m,{surface:`framed`,padding:`default`,children:(0,v.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,v.jsx)(`span`,{className:`inline-flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-foreground`,children:n+1}),(0,v.jsxs)(`div`,{children:[(0,v.jsx)(r,{weight:`semibold`,children:e}),(0,v.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1`,children:t})]})]})},e))})}function w(){return(0,v.jsx)(m,{surface:`framed`,padding:`default`,className:`w-full max-w-4xl`,children:(0,v.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,v.jsx)(f,{icon:o,tone:`primary`,shape:`square`}),(0,v.jsxs)(`div`,{className:`min-w-0`,children:[(0,v.jsx)(r,{weight:`semibold`,children:`Layer order is enforced, not advisory`}),(0,v.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1`,children:`Typography sits below base, base below layout and composed, and features can consume all lower public layers while staying callback-driven.`})]})]})})}var T=`import {
+	Blocks,
+	Layers3,
+	Palette,
+	Route,
+	Search,
+	ShieldCheck } from 'lucide-react';
+
+import { Badge } from '@/components/base/badge';
+import { SmartCard } from '@/components/base/cards';
+import { IconBadge,
+} from '@/components/base/display';
+import { Text, TextLink } from '@/components/typography';
+
+const LAYERS = [
+	{
+		label: 'Base',
+		description: 'Tokenized wrappers around primitives: buttons, cards, forms, tables, display, and navigation.',
+		href: '#/base/buttons',
+		tone: 'primary',
+	},
+	{
+		label: 'Services & hooks',
+		description: 'Framework-neutral action runtime, provider hooks, layout hooks, and feature headless hooks.',
+		href: '#/services/actions',
+		tone: 'info',
+	},
+	{
+		label: 'Layouts',
+		description: 'Header, sidebar, app shell, page shell, and workspace layout contracts.',
+		href: '#/layout/app-shell',
+		tone: 'warning',
+	},
+	{
+		label: 'Composed',
+		description: 'Reusable domain surfaces assembled from base components.',
+		href: '#/composed/admin',
+		tone: 'success',
+	},
+	{
+		label: 'Features',
+		description: 'Callback-driven product features with strings, slots, hooks, and async seams.',
+		href: '#/features/global-search',
+		tone: 'primary',
+	},
+] as const;
+
+export function OverviewSnapshot() {
+	return (
+		<div className="grid w-full max-w-6xl gap-3 md:grid-cols-3">
+			<SmartCard
+				title="Package contract"
+				description="Exact subpath imports, no framework dependencies."
+				icon={<IconBadge icon={ShieldCheck} tone="success" shape="square" size="default" />}
+			>
+				<div className="flex flex-wrap gap-2">
+					<Badge variant="success">Framework neutral</Badge>
+					<Badge variant="secondary">Callback driven</Badge>
+					<Badge variant="secondary">Tokenized</Badge>
+				</div>
+			</SmartCard>
+			<SmartCard
+				title="Preview model"
+				description="Every public surface has one route, examples, props, and source pointers."
+				icon={<IconBadge icon={Route} tone="info" shape="square" size="default" />}
+			>
+				<div className="flex flex-wrap gap-2">
+					<Badge variant="secondary">MDX examples</Badge>
+					<Badge variant="secondary">Props docs</Badge>
+					<Badge variant="secondary">Visual QA</Badge>
+				</div>
+			</SmartCard>
+			<SmartCard
+				title="Design system"
+				description="Sizing and spacing resolve through CSS variables and UIProvider defaults."
+				icon={<IconBadge icon={Palette} tone="primary" shape="square" size="default" />}
+			>
+				<div className="flex flex-wrap gap-2">
+					<Badge variant="secondary">Action scale</Badge>
+					<Badge variant="secondary">Display scale</Badge>
+					<Badge variant="secondary">Row density</Badge>
+				</div>
+			</SmartCard>
+		</div>
+	);
+}
+
+export function LayerMap() {
+	return (
+		<div className="grid w-full max-w-6xl gap-3 md:grid-cols-2">
+			{LAYERS.map((layer) => (
+				<SmartCard key={layer.label} surface="framed" padding="small" className="h-full">
+					<div className="grid grid-cols-[var(--icon-lg)_minmax(0,1fr)] gap-3">
+						<IconBadge icon={Blocks} tone={layer.tone} shape="square" size="small" />
+						<div className="min-w-0 space-y-1.5">
+							<div className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
+								<Text weight="semibold">{layer.label}</Text>
+								<TextLink href={layer.href} size="xs" type="primary" weight="medium" underline={false}>
+									Browse
+								</TextLink>
+							</div>
+							<Text size="xs" type="secondary" lineHeight="snug" className="line-clamp-2">
+								{layer.description}
+							</Text>
+						</div>
+					</div>
+				</SmartCard>
+			))}
+		</div>
+	);
+}
+
+export function NavigationModel() {
+	return (
+		<SmartCard surface="framed" padding="default" className="w-full max-w-4xl">
+			<div className="grid gap-3 md:grid-cols-[auto_minmax(0,1fr)] md:items-start">
+				<IconBadge icon={Search} tone="info" shape="square" />
+				<div className="space-y-3">
+					<div>
+						<Text weight="semibold">One sidebar owns the whole library map</Text>
+						<Text size="xs" type="secondary" className="mt-1">
+							Search routes, jump to CSS variables, then collapse Services & hooks, Base, Layouts, Composed, or Features while you work.
+						</Text>
+					</div>
+					<div className="flex flex-wrap gap-2">
+						<Badge variant="secondary">Installation</Badge>
+						<Badge variant="secondary">Overview</Badge>
+						<Badge variant="secondary">CSS variables</Badge>
+						<Badge variant="secondary">Showcase</Badge>
+						<Badge variant="secondary">Services & hooks</Badge>
+						<Badge variant="secondary">Component layers</Badge>
+					</div>
+				</div>
+			</div>
+		</SmartCard>
+	);
+}
+
+export function PackageFlow() {
+	return (
+		<div className="grid w-full max-w-5xl gap-3 md:grid-cols-3">
+			{[
+				['Install', 'Add the package, stylesheet, and optional feature peers.'],
+				['Compose', 'Import exact public subpaths and wire routing/data through callbacks.'],
+				['Verify', 'Use preview routes, docs checks, exports, build, and visual gates.'],
+			].map(([title, description], index) => (
+				<SmartCard key={title} surface="framed" padding="default">
+					<div className="flex items-start gap-3">
+						<span className="inline-flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-foreground">{index + 1}</span>
+						<div>
+							<Text weight="semibold">{title}</Text>
+							<Text size="xs" type="secondary" className="mt-1">
+								{description}
+							</Text>
+						</div>
+					</div>
+				</SmartCard>
+			))}
+		</div>
+	);
+}
+
+export function ArchitectureRule() {
+	return (
+		<SmartCard surface="framed" padding="default" className="w-full max-w-4xl">
+			<div className="flex items-start gap-3">
+				<IconBadge icon={Layers3} tone="primary" shape="square" />
+				<div className="min-w-0">
+					<Text weight="semibold">Layer order is enforced, not advisory</Text>
+					<Text size="xs" type="secondary" className="mt-1">
+						Typography sits below base, base below layout and composed, and features can consume all lower public layers while staying callback-driven.
+					</Text>
+				</div>
+			</div>
+		</SmartCard>
+	);
+}
+`;function E(e){let n={code:`code`,p:`p`,...e.components};return _||O(`Examples`,!1),w||O(`Examples.ArchitectureRule`,!0),x||O(`Examples.LayerMap`,!0),S||O(`Examples.NavigationModel`,!0),b||O(`Examples.OverviewSnapshot`,!0),C||O(`Examples.PackageFlow`,!0),(0,v.jsxs)(t,{title:`Overview`,description:`How the starter kit is organized, how to browse it, and which contracts consumers can rely on.`,layer:`docs`,status:`ready`,sourcePath:`src/preview/registry.tsx`,children:[(0,v.jsxs)(i,{title:`Package Model`,id:`package-model`,children:[(0,v.jsxs)(n.p,{children:[(0,v.jsx)(n.code,{children:`admin-ui-starter-kit`}),` is a publishable React component library. Consumers import
+exact public subpaths, bring the stylesheet once, and wire framework-owned
+routing, permissions, data fetching, and translations through props.`]}),(0,v.jsx)(a,{name:`OverviewSnapshot`,source:T,children:(0,v.jsx)(b,{})})]}),(0,v.jsxs)(i,{title:`Layers`,id:`layers`,children:[(0,v.jsx)(n.p,{children:`The public library is organized by responsibility, not by app route.`}),(0,v.jsx)(a,{name:`LayerMap`,source:T,children:(0,v.jsx)(x,{})}),(0,v.jsx)(a,{name:`ArchitectureRule`,source:T,children:(0,v.jsx)(w,{})})]}),(0,v.jsxs)(i,{title:`Navigation`,id:`navigation`,children:[(0,v.jsx)(n.p,{children:`The showcase sidebar is the canonical map. The first group contains docs and
+token reference pages; the remaining groups mirror package layers plus the
+public services and hooks boundary. Use the search box for route names,
+component families, service APIs, hooks, and token-focused pages such as CSS
+variables.`}),(0,v.jsx)(a,{name:`NavigationModel`,source:T,children:(0,v.jsx)(S,{})})]}),(0,v.jsx)(i,{title:`Workflow`,id:`workflow`,children:(0,v.jsx)(a,{name:`PackageFlow`,source:T,children:(0,v.jsx)(C,{})})})]})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,v.jsx)(t,{...e,children:(0,v.jsx)(E,{...e})}):E(e)}function O(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{D as default};

package/dist/showcase/assets/package-DhQRoFDo.js

@@ -0,0 +1 @@
+import{l as e}from"./index-ATou_nFA.js";var t=e(`package`,[[`path`,{d:`M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z`,key:`1a0edw`}],[`path`,{d:`M12 22V12`,key:`d0xqtd`}],[`polyline`,{points:`3.29 7 12 12 20.71 7`,key:`ousv84`}],[`path`,{d:`m7.5 4.27 9 5.15`,key:`1c824w`}]]);export{t};