admin-ui-starter-kit 0.1.4 → 0.4.2

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

@@ -0,0 +1,408 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n,t as r}from"./react-dom-Bz4cALsF.js";import{Er as i,Or as a,hr as o,mr as s,r as c,t as l,yr as ee}from"./example-BIrQab7K.js";import{t as u}from"./badge-check-BRAVo7dA.js";import{t as d}from"./circle-alert-ysbx8rsZ.js";import{t as f}from"./circle-check-big-4RnJfeaC.js";import{t as p}from"./circle-check-TT7cFQrr.js";import{t as m}from"./circle-question-mark-Dbi-WTYN.js";import{t as h}from"./credit-card-CYgRtM77.js";import{t as g}from"./file-text-D3AE37vP.js";import{t as _}from"./info-DFu8OfxV.js";import{t as v}from"./send-BzGRF4t-.js";import{t as y}from"./settings-BSRT_96A.js";import{t as b}from"./shield-alert-DhbgXV1X.js";import{t as x}from"./sparkles-DFJmoAFP.js";import{t as te}from"./trash-2-OsaEm8cc.js";import{t as S}from"./user-plus-MMxrhI4h.js";import{t as C}from"./x-BqJnRkKw.js";import{k as ne,n as w,s as T}from"./index-Cz4UGUT2.js";import{t as E}from"./props-table-BR-KjRNe.js";import{r as D,t as O}from"./avatar-5EFTnHEG.js";import{t as k}from"./input-BPDdWrB1.js";import{n as A}from"./form-field-Cxm4APa9.js";import{c as j,r as M,t as N,u as P}from"./item-CbiuwbAN.js";import{i as re,n as ie,r as ae,t as F}from"./dialog-B85US9Ue.js";var I=t(n(),1),oe=t(r(),1),L=T(),se={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,L.jsx)(m,{className:`text-muted-foreground h-5 w-5`}),error:(0,L.jsx)(d,{className:`text-destructive h-5 w-5`}),warning:(0,L.jsx)(a,{className:`text-warning h-5 w-5`}),info:(0,L.jsx)(_,{className:`text-info h-5 w-5`}),success:(0,L.jsx)(f,{className:`text-success h-5 w-5`})};function R({open:e,onOpenChange:t,onClose:n,children:r,title:a,description:o,className:s,contentClassName:l,initialFocusRef:ee,closeOnEscape:u=!0,closeOnBackdropClick:d=!0,strings:f,showCancel:p=!0,showConfirm:m=!0,onCancel:h,onConfirm:g,onAsyncConfirm:_,closeOnAsyncComplete:v=!0,confirmVariant:y=`primary`,confirmStyle:b=`solid`,isLoading:x=!1,formId:te,footer:S,emphasis:ne=!1,tone:T=`default`,showIcon:E=!1,alertMessage:D,direction:O=`right`,width:k=`lg`,showFooter:A=!0,trigger:j}){let M=(0,I.useId)(),N=(0,I.useId)(),P=a?M:void 0,ae=o?N:void 0,{isOpen:F,isClosing:R,openDialog:z,closeDialog:B,dialogProps:V,handleBackdropClick:H}=re({open:e,onOpenChange:t,onClose:n,closeOnEscape:u,closeOnBackdropClick:d,initialFocusRef:ee}),{strings:U,finalConfirmVariant:W,confirmButtonOnClick:G,effectiveLoading:K,handleCancel:q}=ie({closeDialog:B,onConfirm:g,onAsyncConfirm:_,closeOnAsyncComplete:v,confirmVariant:y,isLoading:x,formId:te,onCancel:h,customStrings:f,emphasis:ne,tone:T}),J=ce[O],Y=O===`left`||O===`right`,X=!!(r||D),Z=A&&(p||m||S),Q=j&&(0,I.isValidElement)(j)?(0,I.cloneElement)(j,{onClick:e=>{let t=j.props.onClick;t?.(e),z()}}):j?(0,L.jsx)(`span`,{role:`button`,tabIndex:0,onClick:z,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),z())},className:`cursor-pointer`,children:j}):null;return!F&&!R&&!j?null:(0,L.jsxs)(L.Fragment,{children:[Q,!!(F||R)&&(0,oe.createPortal)((0,L.jsxs)(`div`,{className:`fixed inset-0 z-50`,children:[(0,L.jsx)(`div`,{className:w(`absolute inset-0 bg-foreground/50 backdrop-blur-[1px]`,`transition-opacity duration-300`,R?`opacity-0`:`animate-in fade-in-0 duration-300`),onClick:H,"aria-hidden":`true`}),(0,L.jsxs)(`dialog`,{...V,className:w(`drawer--component inset-auto m-0 p-0`,J.position,J.size,`border shadow-xl`,`bg-background text-foreground`,J.rounded,Y&&`w-full`,Y&&se[k],!Y&&`max-h-[85vh]`,J.animation,`outline-none focus-visible:outline-none`,`flex flex-col`,s),"aria-modal":`true`,role:`dialog`,"aria-labelledby":P,"aria-describedby":ae,children:[(0,L.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,onClick:B,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":U.close,children:(0,L.jsx)(C,{className:`h-4 w-4`})}),!!(a||o)&&(0,L.jsxs)(`div`,{className:`flex items-start gap-3 px-6 pb-4 pt-6`,children:[!!E&&(0,L.jsx)(`div`,{className:`shrink-0 pt-0.5`,children:le[T]}),(0,L.jsxs)(`div`,{className:`min-w-0 flex-1 pr-6`,children:[!!a&&(0,L.jsx)(i,{id:M,tag:`div`,size:`lg`,weight:`semibold`,children:a}),!!o&&(0,L.jsx)(i,{id:N,tag:`p`,type:`secondary`,className:`mt-1`,children:o})]})]}),!!X&&(0,L.jsxs)(`div`,{className:w(`flex-1 overflow-auto px-6`,a||o?`pb-6`:`py-6`,l),children:[!!D&&(0,L.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,L.jsx)(i,{tag:`p`,children:D})}),r]}),!!Z&&(0,L.jsx)(`div`,{className:`border-t px-6 py-4`,children:S??(0,L.jsxs)(`div`,{className:`flex flex-col-reverse gap-3 sm:flex-row sm:justify-end`,children:[!!p&&(0,L.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:q,children:U.cancel}),!!m&&(0,L.jsx)(c,{type:`button`,variant:W,buttonStyle:b,onClick:G,loading:K,loadingLabels:{loading:U.loading},children:U.confirm})]})})]})]}),document.body)]})}var z=(0,I.memo)(R);z.displayName=`Drawer`;var B={default:{icon:(0,L.jsx)(m,{className:`h-6 w-6`}),iconColor:`text-muted-foreground`},error:{icon:(0,L.jsx)(d,{className:`h-6 w-6`}),iconColor:`text-destructive`},warning:{icon:(0,L.jsx)(a,{className:`h-6 w-6`}),iconColor:`text-warning`},info:{icon:(0,L.jsx)(_,{className:`h-6 w-6`}),iconColor:`text-info`},success:{icon:(0,L.jsx)(f,{className:`h-6 w-6`}),iconColor:`text-success`}};function V({open:e,onOpenChange:t,onClose:n,children:r,title:a,description:o,className:s,contentClassName:l,initialFocusRef:ee,closeOnEscape:u=!0,closeOnBackdropClick:d=!1,strings:f,showCancel:p=!0,showConfirm:m=!0,onCancel:h,onConfirm:g,onAsyncConfirm:_,closeOnAsyncComplete:v=!0,confirmVariant:y,confirmStyle:b=`solid`,isLoading:x=!1,formId:te,footer:S,tone:C=`default`,showIcon:T=!0,trigger:E,destructive:D=!1}){let O=(0,I.useId)(),k=(0,I.useId)(),A=a?O:void 0,j=o?k:void 0,{isOpen:M,isClosing:N,openDialog:P,closeDialog:F,dialogProps:se,handleBackdropClick:ce}=re({open:e,onOpenChange:t,onClose:n,closeOnEscape:u,closeOnBackdropClick:d,initialFocusRef:ee}),le=ne(ae,f),R=(0,I.useMemo)(()=>D?`error`:y||{default:`primary`,error:`error`,warning:`warning`,info:`primary`,success:`success`}[C],[D,y,C]),{strings:z,confirmButtonOnClick:V,effectiveLoading:H,handleCancel:U}=ie({closeDialog:F,onConfirm:g,onAsyncConfirm:_,closeOnAsyncComplete:v,confirmVariant:R,isLoading:x,formId:te,onCancel:h,customStrings:le}),W=B[C],G=E&&(0,I.isValidElement)(E)?(0,I.cloneElement)(E,{onClick:e=>{let t=E.props.onClick;t?.(e),P()}}):E?(0,L.jsx)(`span`,{role:`button`,tabIndex:0,onClick:P,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),P())},className:`cursor-pointer`,children:E}):null;return!M&&!N&&!E?null:(0,L.jsxs)(L.Fragment,{children:[G,!!(M||N)&&(0,oe.createPortal)((0,L.jsxs)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center p-4`,children:[(0,L.jsx)(`div`,{className:w(`absolute inset-0 bg-foreground/50 backdrop-blur-[1px]`,`transition-opacity duration-200`,N?`opacity-0`:`animate-in fade-in-0 duration-200`),onClick:ce,"aria-hidden":`true`}),(0,L.jsxs)(`dialog`,{...se,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`,s),role:`alertdialog`,"aria-modal":`true`,"aria-labelledby":A,"aria-describedby":j,children:[(0,L.jsxs)(`div`,{className:`flex-1 overflow-auto p-6`,children:[!!T&&(0,L.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,L.jsx)(`span`,{className:W.iconColor,children:W.icon})}),!!a&&(0,L.jsx)(i,{id:O,tag:`div`,size:`lg`,weight:`semibold`,align:`center`,children:a}),!!o&&(0,L.jsx)(i,{id:k,tag:`p`,type:`secondary`,align:`center`,className:`mt-2`,children:o}),!!r&&(0,L.jsx)(`div`,{className:w(`mt-4`,l),children:r})]}),!!(p||m||S)&&(0,L.jsx)(`div`,{className:`border-t px-6 py-4`,children:S??(0,L.jsxs)(`div`,{className:`flex flex-col-reverse gap-3 sm:flex-row sm:justify-end`,children:[!!p&&(0,L.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:U,className:`w-full sm:w-auto`,children:z.cancel}),!!m&&(0,L.jsx)(c,{type:`button`,variant:R,buttonStyle:b,onClick:V,loading:H,loadingLabels:{loading:z.loading},className:`w-full sm:w-auto`,children:z.confirm})]})})]})]}),document.body)]})}var H=(0,I.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,L.jsx)(L.Fragment,{children:(0,L.jsxs)(i,{type:`secondary`,children:[`All overlays accept the same core props: `,(0,L.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,L.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,I.useState)(!1);return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:(0,L.jsx)(c,{variant:`primary`,icon:y,onClick:()=>t(!0),children:`Open dialog`})}),(0,L.jsx)(F,{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,I.useState)(!1),[n,r]=(0,I.useState)(!1),[i,a]=(0,I.useState)(!1);return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,L.jsx)(c,{variant:`primary`,icon:_,onClick:()=>t(!0),children:`Info`}),(0,L.jsx)(c,{variant:`warning`,icon:d,onClick:()=>r(!0),children:`Warning`}),(0,L.jsx)(c,{variant:`success`,icon:p,onClick:()=>a(!0),children:`Success`})]}),(0,L.jsx)(F,{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,L.jsx)(F,{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,L.jsx)(F,{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,I.useState)(!1);return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:(0,L.jsx)(c,{variant:`primary`,icon:S,onClick:()=>t(!0),children:`Invite teammate`})}),(0,L.jsx)(F,{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,L.jsxs)(`div`,{className:`space-y-3`,children:[(0,L.jsxs)(`div`,{className:`rounded-lg border border-border bg-muted/30 p-3`,children:[(0,L.jsx)(i,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Invitation preview`}),(0,L.jsxs)(`div`,{className:`mt-2 flex items-center gap-3`,children:[(0,L.jsx)(O,{className:`size-9`,children:(0,L.jsx)(D,{className:`bg-primary/10 text-primary text-xs font-semibold`,children:`YO`})}),(0,L.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,L.jsx)(i,{weight:`semibold`,children:`You invited stefan@example.com`}),(0,L.jsx)(i,{size:`xs`,type:`secondary`,children:`Editor · Read & write access`})]})]})]}),(0,L.jsx)(`div`,{className:`space-y-2`,children:[{icon:u,label:`Can edit pages and components`},{icon:u,label:`Can manage their own API keys`},{icon:u,label:`Cannot manage billing or members`}].map(e=>(0,L.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,L.jsx)(e.icon,{className:`size-3.5 shrink-0 text-success`,"aria-hidden":`true`}),(0,L.jsx)(i,{size:`xs`,type:`secondary`,children:e.label})]},e.label))})]})})]})}function J(){let[e,t]=(0,I.useState)(!1);return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:(0,L.jsx)(c,{variant:`primary`,icon:h,onClick:()=>t(!0),children:`Add payment method`})}),(0,L.jsx)(F,{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,L.jsxs)(`form`,{id:`payment-form`,onSubmit:e=>{e.preventDefault(),t(!1)},className:`space-y-3`,children:[(0,L.jsx)(A,{label:`Card number`,children:(0,L.jsx)(k,{type:`text`,placeholder:`4242 4242 4242 4242`,className:`font-mono tabular-nums`})}),(0,L.jsxs)(`div`,{className:`grid grid-cols-2 gap-3`,children:[(0,L.jsx)(A,{label:`Expiry`,children:(0,L.jsx)(k,{type:`text`,placeholder:`MM / YY`,className:`font-mono tabular-nums`})}),(0,L.jsx)(A,{label:`CVC`,children:(0,L.jsx)(k,{type:`text`,placeholder:`123`,className:`font-mono tabular-nums`})})]})]})})]})}function Y(){let[e,t]=(0,I.useState)(!1),[n,r]=(0,I.useState)(!1),[a,o]=(0,I.useState)(!1),[s,l]=(0,I.useState)(!1);return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,L.jsx)(c,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>t(!0),children:`Right · booking detail`}),(0,L.jsx)(c,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>r(!0),children:`Left · navigation`}),(0,L.jsx)(c,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>o(!0),children:`Bottom · sheet`}),(0,L.jsx)(c,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>l(!0),children:`Right · no footer`})]}),(0,L.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,L.jsxs)(`div`,{className:`space-y-4`,children:[(0,L.jsxs)(`div`,{className:`rounded-lg border border-border bg-muted/30 p-3`,children:[(0,L.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,L.jsx)(i,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Status`}),(0,L.jsx)(ee,{variant:`success`,children:`Paid`})]}),(0,L.jsx)(i,{tag:`div`,size:`lg`,weight:`bold`,className:`mt-1 tabular-nums`,children:`180.00 USD`})]}),(0,L.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,L.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border/50 py-1.5 last:border-0`,children:[(0,L.jsx)(i,{size:`xs`,type:`secondary`,children:e}),(0,L.jsx)(i,{weight:`medium`,children:t})]},e))})]})}),(0,L.jsx)(z,{open:n,onOpenChange:r,direction:`left`,title:`Workspace`,description:`Quick-jump to common pages.`,showCancel:!1,showConfirm:!1,children:(0,L.jsx)(`nav`,{className:`space-y-1`,children:[{icon:g,label:`Bookings`},{icon:S,label:`Customers`},{icon:h,label:`Invoices`},{icon:y,label:`Settings`}].map(e=>(0,L.jsxs)(N,{render:(0,L.jsx)(`button`,{type:`button`}),className:`hover:bg-muted/50`,children:[(0,L.jsx)(j,{variant:`icon`,className:`text-muted-foreground`,children:(0,L.jsx)(e.icon,{})}),(0,L.jsx)(M,{children:(0,L.jsx)(P,{bold:!1,children:e.label})})]},e.label))})}),(0,L.jsx)(z,{open:a,onOpenChange:o,direction:`bottom`,title:`Quick actions`,onConfirm:()=>o(!1),children:(0,L.jsx)(`div`,{className:`grid grid-cols-2 gap-2 sm:grid-cols-4`,children:[{icon:v,label:`Send invoice`},{icon:S,label:`Add customer`},{icon:h,label:`Record payment`},{icon:g,label:`New booking`}].map(e=>(0,L.jsxs)(c,{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,L.jsx)(`span`,{className:`inline-flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary`,children:(0,L.jsx)(e.icon,{className:`size-4`})}),(0,L.jsx)(i,{size:`xs`,weight:`medium`,align:`center`,children:e.label})]},e.label))})}),(0,L.jsx)(z,{open:s,onOpenChange:l,direction:`right`,title:`Help & shortcuts`,description:`No footer — useful for read-only side panels.`,showCancel:!1,showConfirm:!1,children:(0,L.jsxs)(i,{type:`secondary`,children:[`Hide the footer entirely with `,(0,L.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`showCancel={false}`}),` + `,(0,L.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,I.useState)(!1),[n,r]=(0,I.useState)(!1),[i,a]=(0,I.useState)(!1),[o,s]=(0,I.useState)(!1);return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,L.jsx)(c,{variant:`primary`,icon:v,onClick:()=>t(!0),children:`Send invoice`}),(0,L.jsx)(c,{variant:`error`,icon:te,onClick:()=>r(!0),children:`Delete`}),(0,L.jsx)(c,{variant:`warning`,buttonStyle:`outline`,icon:d,onClick:()=>a(!0),children:`Discard unsaved`}),(0,L.jsx)(c,{variant:`secondary`,buttonStyle:`outline`,icon:b,onClick:()=>s(!0),children:`Sign out`})]}),(0,L.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,L.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,L.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,L.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,L.jsx)(L.Fragment,{children:(0,L.jsxs)(`div`,{className:`space-y-2 text-sm text-muted-foreground`,children:[(0,L.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,L.jsx)(m,{className:`size-4 shrink-0 mt-0.5 text-info`,"aria-hidden":`true`}),(0,L.jsxs)(i,{children:[(0,L.jsx)(`strong`,{className:`text-foreground font-semibold`,children:`Dialog`}),` for changes that affect content — settings, confirmations, edit forms.`]})]}),(0,L.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,L.jsx)(m,{className:`size-4 shrink-0 mt-0.5 text-info`,"aria-hidden":`true`}),(0,L.jsxs)(i,{children:[(0,L.jsx)(`strong`,{className:`text-foreground font-semibold`,children:`Drawer`}),` for content that lives next to the current view — record details, filters, navigation.`]})]}),(0,L.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,L.jsx)(m,{className:`size-4 shrink-0 mt-0.5 text-info`,"aria-hidden":`true`}),(0,L.jsxs)(i,{children:[(0,L.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,L.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,L.jsx)(x,{className:`size-4 shrink-0 mt-0.5 text-primary`,"aria-hidden":`true`}),(0,L.jsxs)(i,{children:[(0,L.jsx)(`strong`,{className:`text-foreground font-semibold`,children:`Async confirms`}),` — pass `,(0,L.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`onAsyncConfirm`}),` instead of `,(0,L.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="xxs" type="secondary" weight="medium" className="uppercase tracking-wider">Invitation preview</Text>
+										<div className="mt-2 flex items-center gap-3">
+											<Avatar className="size-9">
+												<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="xxs" 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,L.jsxs)(o,{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,L.jsxs)(s,{title:`Examples`,id:`examples`,children:[(0,L.jsx)(l,{name:`APISurface`,source:Q,children:(0,L.jsx)(W,{})}),(0,L.jsx)(l,{name:`DialogDefault`,source:Q,children:(0,L.jsx)(G,{})}),(0,L.jsx)(l,{name:`DialogEmphasisTones`,source:Q,children:(0,L.jsx)(K,{})}),(0,L.jsx)(l,{name:`DialogRichContent`,source:Q,children:(0,L.jsx)(q,{})}),(0,L.jsx)(l,{name:`DialogFormPattern`,source:Q,children:(0,L.jsx)(J,{})}),(0,L.jsx)(l,{name:`Drawer4Directions`,source:Q,children:(0,L.jsx)(Y,{})}),(0,L.jsx)(l,{name:`AlertDialogConfirmationPatterns`,source:Q,children:(0,L.jsx)(X,{})}),(0,L.jsx)(l,{name:`BestPractices`,source:Q,children:(0,L.jsx)(Z,{})})]}),(0,L.jsxs)(s,{title:`API`,id:`api`,children:[(0,L.jsx)(t.h4,{children:`AlertDialog`}),(0,L.jsx)(E,{component:`AlertDialog`}),(0,L.jsx)(t.h4,{children:`Dialog`}),(0,L.jsx)(E,{component:`Dialog`}),(0,L.jsx)(t.h4,{children:`Drawer`}),(0,L.jsx)(E,{component:`Drawer`})]})]})}function de(e={}){let{wrapper:t}=e.components||{};return t?(0,L.jsx)(t,{...e,children:(0,L.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/overlays-CVGJ_FEg.js

@@ -0,0 +1,88 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n,t as r}from"./react-dom-Bz4cALsF.js";import{$ as i,A as a,Bn as o,C as s,D as c,E as l,Gn as u,Ht as d,I as f,Jn as p,L as m,M as h,N as g,O as _,P as v,Qt as y,R as b,Rn as x,S,Un as C,V as w,W as T,Y as E,Z as D,a as O,b as k,c as A,d as j,et as ee,f as te,fn as ne,g as re,h as ie,hr as ae,ir as oe,j as se,k as ce,lr as le,lt as ue,mr as de,nr as fe,o as pe,p as me,rr as M,t as N,tr as P,tt as he,u as ge,v as _e,w as ve,x as ye,zn as be}from"./example-BIrQab7K.js";import{n as xe,s as Se}from"./index-Cz4UGUT2.js";import{i as Ce,r as we,t as Te}from"./popover-BSB11Qjp.js";import{a as Ee,i as De,n as Oe,o as ke,r as Ae,s as je,t as Me}from"./dialog-iIgfMvTJ.js";import{n as Ne}from"./PreviewLayout-BG1B5TzA.js";import{a as Pe,i as Fe,n as Ie,o as Le,r as Re,t as ze}from"./sheet-CEuKOBxr.js";function F(e,t,n,r){return{left:e,top:t,right:n,bottom:r,x:e,y:t,width:n-e,height:r-t}}function Be(e){return{left:e.left,top:e.top,right:e.right,bottom:e.bottom,width:e.width,height:e.height}}function Ve(e){let t=[],n,r=1/0,i=1/0,a=-1/0,o=-1/0;for(let s of Array.from(e).sort((e,t)=>e.top-t.top)){if(r=Math.min(r,s.left),i=Math.min(i,s.top),a=Math.max(a,s.right),o=Math.max(o,s.bottom),!n||s.top-n.top>n.height/2)t.push(Be(s));else{let e=t[t.length-1];e.left=Math.min(e.left,s.left),e.right=Math.max(e.right,s.right),e.bottom=Math.max(e.bottom,s.bottom),e.width=e.right-e.left,e.height=e.bottom-e.top}n=s}return{lines:t,fallback:F(r,i,a,o)}}function I(e,t,n){return e.findIndex(e=>t>e.left-2&&t<e.right+2&&n>e.top-2&&n<e.bottom+2)}function L(e){return F(e.left,e.top,e.right,e.bottom)}function He(e,t,n){let{lines:r}=Ve(e.getClientRects());if(r.length<2)return;let i=I(r,t,n);return{x:t,y:n,lineIndex:i===-1?void 0:i,element:e}}function Ue(e,t,n){let{lines:r,fallback:i}=Ve(e.getClientRects());if(r.length<2)return null;let a=n?.x,o=n?.y,s=t[0];if(n?.lineIndex!=null&&r[n.lineIndex])return L(r[n.lineIndex]);if(a!=null&&o!=null){let e=I(r,a,o);if(e!==-1)return L(r[e])}if(r.length===2&&r[0].left>r[1].right&&a!=null&&o!=null)return i;if(s===`t`||s===`b`){let e=r[0],t=r[r.length-1],n=s===`t`?e:t;return F(n.left,e.top,n.right,t.bottom)}let c=s===`l`,l=r[0].left,u=r[0].right,d=c?1/0:-1/0,f=r[0],p=r[0];for(let e of r){l=Math.min(l,e.left),u=Math.max(u,e.right);let t=c?e.left:e.right;c&&t<d||!c&&t>d?(d=t,f=e,p=e):t===d&&(p=e)}return F(l,f.top,u,p.bottom)}function We(e){return`contextElement`in e&&e.contextElement?e.contextElement:le(e)?e:void 0}function Ge(e,t){function n(t){R(e,t.currentTarget,t.clientX,t.clientY)}function r(e){t||n(e)}return{onFocus(){e.current=void 0},onMouseEnter:n,onMouseMove:r}}function R(e,t,n,r){let i=He(t,n,r);return e.current=i,i}function Ke(e){return{name:`inline`,async fn(t){let n=t.elements.reference;if(typeof n?.getClientRects!=`function`)return{};let r=We(n),i=e.current,a=i?.element===n||i?.element===r?i:void 0,o=Ue(n,t.placement,a);if(!o||typeof t.platform.getElementRects!=`function`)return{};let s=await t.platform.getElementRects({reference:{contextElement:r,getBoundingClientRect(){return o}},floating:t.elements.floating,strategy:t.strategy});return t.rects.reference.x===s.reference.x&&t.rects.reference.y===s.reference.y&&t.rects.reference.width===s.reference.width&&t.rects.reference.height===s.reference.height?{}:{reset:{rects:s}}}}}var z=t(n()),B=z.createContext(void 0);function V(e){let t=z.useContext(B);if(t===void 0&&!e)throw Error(P(50));return t}var qe=t(r()),Je={..._,instantType:E(e=>e.instantType),hasViewport:E(e=>e.hasViewport)},Ye=class e extends T{constructor(e,t,n=!1){let r=new ce,i={...Xe(),...e};i.floatingRootContext=c(r,t,n),super(i,{popupRef:z.createRef(),onOpenChange:void 0,onOpenChangeComplete:void 0,triggerElements:r,closeDelayRef:{current:300},inlineRectCoordsRef:{current:void 0}},Je)}setOpen=(e,t)=>{let n=t.reason,r=n===ne,i=e&&n===`trigger-focus`,a=!e&&(n===`trigger-press`||n===`escape-key`);if(t.preventUnmountOnClose=()=>{this.set(`preventUnmountingOnClose`,!0)},this.context.onOpenChange?.(e,t),t.isCanceled)return;let o=t.event;e&&r&&t.trigger&&`clientX`in o&&`clientY`in o&&this.context.inlineRectCoordsRef.current?.element!==t.trigger&&R(this.context.inlineRectCoordsRef,t.trigger,o.clientX,o.clientY),this.state.floatingRootContext.dispatchOpenChange(e,t);let s=()=>{let r={open:e};i?r.instantType=`focus`:a?r.instantType=`dismiss`:n===`trigger-hover`&&(r.instantType=void 0),se(r,e,t.trigger),this.update(r)};r?qe.flushSync(s):s()};static useStore(t,n){return f(t,(t,r)=>new e(n,t,r)).store}};function Xe(){return{...l(),instantType:void 0,hasViewport:!1}}var H=Se();function U(e){let{open:t,defaultOpen:n=!1,onOpenChange:r,onOpenChangeComplete:i,actionsRef:a,handle:o,triggerId:s,defaultTriggerId:c=null,children:l}=e,u=Ye.useStore(o?.store,{open:n,openProp:t,activeTriggerId:c,triggerIdProp:s});x(()=>{t===void 0&&u.state.open===!1&&n===!0&&u.update({open:!0,activeTriggerId:c})}),u.useControlledProp(`openProp`,t),u.useControlledProp(`triggerIdProp`,s),u.useContextCallback(`onOpenChange`,r),u.useContextCallback(`onOpenChangeComplete`,i);let f=u.useState(`open`),p=u.useState(`activeTriggerId`),m=u.useState(`mounted`),_=u.useState(`payload`);h(u);let{forceUnmount:v}=g(f,u,()=>{u.context.inlineRectCoordsRef.current=void 0});M(()=>{f&&(p??u.set(`payload`,void 0))},[u,p,f]);let b=z.useCallback(()=>{u.setOpen(!1,d(y))},[u]);z.useImperativeHandle(a,()=>({unmount:v,close:b}),[v,b]);let S=f||m;return(0,H.jsxs)(B.Provider,{value:u,children:[S&&(0,H.jsx)(Ze,{store:u}),typeof l==`function`?l({payload:_}):l]})}function Ze({store:e}){let t=D(e.useState(`floatingRootContext`));return v(e,{activeTriggerProps:t.reference??p,inactiveTriggerProps:t.trigger??p,popupProps:z.useMemo(()=>fe(a,t.floating),[t.floating])}),null}var Qe=be(function(e){return V(!0)?(0,H.jsx)(U,{...e}):(0,H.jsx)(ee,{children:(0,H.jsx)(U,{...e})})}),W=z.createContext(void 0);function $e(){let e=z.useContext(W);if(e===void 0)throw Error(P(48));return e}var et=z.forwardRef(function(e,t){let{keepMounted:n=!1,...r}=e;return V().useState(`mounted`)||n?(0,H.jsx)(W.Provider,{value:n,children:(0,H.jsx)(ie,{ref:t,...r})}):null}),tt=o(function(e,t){let{render:n,className:r,delay:i,closeDelay:a,id:o,payload:s,handle:c,style:l,...d}=e,f=V(!0),p=c?.store??f;if(!p)throw Error(P(89));let h=re(o),g=p.useState(`isTriggerActive`,h),_=p.useState(`isOpenedByTrigger`,h),v=p.useState(`floatingRootContext`),y=p.context.inlineRectCoordsRef,b=z.useRef(null),x=i??600,C=a??300,{registerTrigger:w,isMountedByThisTrigger:T}=m(h,b,p,{payload:s});M(()=>{T&&(p.context.closeDelayRef.current=C)},[p,T,C]);let E=S(v,{mouseOnly:!0,move:!1,handleClose:ye(),delay:()=>({open:x,close:C}),triggerElementRef:b,isActiveTrigger:g,isClosing:()=>p.select(`transitionStatus`)===`ending`}),D=ve(v,{delay:x}),O={open:_},A=p.useState(`triggerProps`,T),j=Ge(y,_);return u(`a`,e,{state:O,ref:[t,w,b],props:[E,D.reference,A,j,{id:h},d],stateAttributesMapping:k})}),G=z.createContext(void 0);function nt(){let e=z.useContext(G);if(e===void 0)throw Error(P(49));return e}var rt=z.forwardRef(function(e,t){let{render:n,className:r,anchor:a,positionMethod:o=`absolute`,side:s=`bottom`,align:c=`center`,sideOffset:l=0,alignOffset:u=0,collisionBoundary:d=`clipping-ancestors`,collisionPadding:f=5,arrowPadding:p=5,sticky:m=!1,disableAnchorTracking:h=!1,collisionAvoidance:g=ue,style:_,...v}=e,y=V(),b=$e(),x=he(),S=y.useState(`open`),C=y.useState(`mounted`),w=y.useState(`floatingRootContext`),T=y.useState(`instantType`),E=y.useState(`transitionStatus`),D=y.useState(`hasViewport`),O=y.context.inlineRectCoordsRef,k=te({anchor:a,floatingRootContext:w,positionMethod:o,mounted:C,side:s,sideOffset:l,align:c,alignOffset:u,arrowPadding:p,collisionBoundary:d,collisionPadding:f,sticky:m,disableAnchorTracking:h,keepMounted:b,nodeId:x,collisionAvoidance:g,adaptiveOrigin:D?me:void 0,inline:Ke(O)}),A=k.update;M(()=>{S&&C&&A()},[S,C,A]);let j=ge(e,{open:S,side:k.side,align:k.align,anchorHidden:k.anchorHidden,instant:T},{styles:k.positionerStyles,transitionStatus:E,props:v,refs:[t,y.useStateSetter(`positionerElement`)],hidden:!C,inert:!S});return(0,H.jsx)(G.Provider,{value:k,children:(0,H.jsx)(i,{id:x,children:j})})}),it={..._e,...w},at=z.forwardRef(function(e,t){let{className:n,render:r,style:i,...a}=e,o=V(),{side:c,align:l}=nt(),d=o.useState(`open`),f=o.useState(`instantType`),p=o.useState(`transitionStatus`),m=o.useState(`popupProps`),h=o.useState(`floatingRootContext`);return b({open:d,ref:o.context.popupRef,onComplete(){d&&o.context.onOpenChangeComplete?.(!0)}}),s(h,{closeDelay:oe(()=>o.context.closeDelayRef.current)}),u(`div`,e,{state:{open:d,side:c,align:l,instant:f,transitionStatus:p},ref:[t,o.context.popupRef,o.useStateSetter(`popupElement`)],props:[m,j(p),a],stateAttributesMapping:it})});function ot({...e}){return(0,H.jsx)(Qe,{"data-slot":`hover-card`,...e})}function st({...e}){return(0,H.jsx)(tt,{"data-slot":`hover-card-trigger`,...e})}function ct({className:e,side:t=`bottom`,sideOffset:n=4,align:r=`center`,alignOffset:i=4,...a}){return(0,H.jsx)(et,{"data-slot":`hover-card-portal`,children:(0,H.jsx)(rt,{align:r,alignOffset:i,side:t,sideOffset:n,className:`isolate z-50`,children:(0,H.jsx)(at,{"data-slot":`hover-card-content`,className:xe(`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-4 text-sm shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 origin-(--transform-origin) outline-hidden`,e),...a})})})}var lt=e({DialogExample:()=>K,HoverCardExample:()=>X,PopoverExample:()=>J,SheetExample:()=>q,TooltipExample:()=>Y});function K(){let[e,t]=(0,z.useState)(!1);return(0,H.jsx)(H.Fragment,{children:(0,H.jsxs)(Me,{open:e,onOpenChange:t,children:[(0,H.jsx)(je,{render:e=>(0,H.jsx)(C,{...e,children:`Open dialog`})}),(0,H.jsxs)(Oe,{children:[(0,H.jsxs)(Ee,{children:[(0,H.jsx)(ke,{children:`Confirm action`}),(0,H.jsx)(Ae,{children:`This is a controlled dialog.`})]}),(0,H.jsxs)(De,{children:[(0,H.jsx)(C,{variant:`outline`,onClick:()=>t(!1),children:`Cancel`}),(0,H.jsx)(C,{onClick:()=>t(!1),children:`Confirm`})]})]})]})})}function q(){return(0,H.jsx)(H.Fragment,{children:(0,H.jsxs)(ze,{children:[(0,H.jsx)(Le,{render:e=>(0,H.jsx)(C,{variant:`outline`,...e,children:`Open sheet`})}),(0,H.jsxs)(Ie,{children:[(0,H.jsxs)(Fe,{children:[(0,H.jsx)(Pe,{children:`Sheet title`}),(0,H.jsx)(Re,{children:`Side-anchored panel.`})]}),(0,H.jsx)(`div`,{className:`px-4 py-2 text-sm`,children:`Sheet body content.`})]})]})})}function J(){return(0,H.jsx)(H.Fragment,{children:(0,H.jsxs)(Te,{children:[(0,H.jsx)(Ce,{render:e=>(0,H.jsx)(C,{variant:`outline`,...e,children:`Open popover`})}),(0,H.jsx)(we,{className:`w-64 text-sm`,children:`Popover content with arbitrary children.`})]})})}function Y(){return(0,H.jsx)(H.Fragment,{children:(0,H.jsx)(Ne,{children:(0,H.jsxs)(O,{children:[(0,H.jsx)(A,{render:e=>(0,H.jsx)(C,{variant:`outline`,...e,children:`Hover me`})}),(0,H.jsx)(pe,{children:`Hello, I'm a tooltip.`})]})})})}function X(){return(0,H.jsx)(H.Fragment,{children:(0,H.jsxs)(ot,{children:[(0,H.jsx)(st,{render:e=>(0,H.jsx)(C,{variant:`link`,...e,children:`@maria`})}),(0,H.jsxs)(ct,{className:`w-64 text-sm`,children:[(0,H.jsx)(`div`,{className:`font-medium`,children:`Sarah Smitha`}),(0,H.jsx)(`div`,{className:`text-muted-foreground`,children:`Account Manager`}),(0,H.jsx)(`div`,{className:`mt-2 text-xs text-muted-foreground`,children:`Joined Jan 2023.`})]})]})})}var Z=`import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/base/sheet';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+import { Row } from '../../PreviewLayout';
+
+export function DialogExample() {
+	const [open, setOpen] = useState(false);
+	return (
+		<>
+			<Dialog open={open} onOpenChange={setOpen}>
+									<DialogTrigger render={(p) => <Button {...p}>Open dialog</Button>} />
+									<DialogContent>
+										<DialogHeader>
+											<DialogTitle>Confirm action</DialogTitle>
+											<DialogDescription>This is a controlled dialog.</DialogDescription>
+										</DialogHeader>
+										<DialogFooter>
+											<Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
+											<Button onClick={() => setOpen(false)}>Confirm</Button>
+										</DialogFooter>
+									</DialogContent>
+								</Dialog>
+		</>
+	);
+}
+
+export function SheetExample() {
+	return (
+		<>
+			<Sheet>
+									<SheetTrigger render={(p) => <Button variant="outline" {...p}>Open sheet</Button>} />
+									<SheetContent>
+										<SheetHeader>
+											<SheetTitle>Sheet title</SheetTitle>
+											<SheetDescription>Side-anchored panel.</SheetDescription>
+										</SheetHeader>
+										<div className="px-4 py-2 text-sm">Sheet body content.</div>
+									</SheetContent>
+								</Sheet>
+		</>
+	);
+}
+
+export function PopoverExample() {
+	return (
+		<>
+			<Popover>
+									<PopoverTrigger render={(p) => <Button variant="outline" {...p}>Open popover</Button>} />
+									<PopoverContent className="w-64 text-sm">
+										Popover content with arbitrary children.
+									</PopoverContent>
+								</Popover>
+		</>
+	);
+}
+
+export function TooltipExample() {
+	return (
+		<>
+			<Row>
+									<Tooltip>
+										<TooltipTrigger render={(p) => <Button variant="outline" {...p}>Hover me</Button>} />
+										<TooltipContent>Hello, I'm a tooltip.</TooltipContent>
+									</Tooltip>
+								</Row>
+		</>
+	);
+}
+
+export function HoverCardExample() {
+	return (
+		<>
+			<HoverCard>
+									<HoverCardTrigger render={(p) => <Button variant="link" {...p}>@maria</Button>} />
+									<HoverCardContent className="w-64 text-sm">
+										<div className="font-medium">Sarah Smitha</div>
+										<div className="text-muted-foreground">Account Manager</div>
+										<div className="mt-2 text-xs text-muted-foreground">Joined Jan 2023.</div>
+									</HoverCardContent>
+								</HoverCard>
+		</>
+	);
+}
+`;function Q(e){return lt||$(`Examples`,!1),K||$(`Examples.DialogExample`,!0),X||$(`Examples.HoverCardExample`,!0),J||$(`Examples.PopoverExample`,!0),q||$(`Examples.SheetExample`,!0),Y||$(`Examples.TooltipExample`,!0),(0,H.jsx)(ae,{title:`UI · Overlays`,description:`Dialog, Sheet, Popover, Tooltip, HoverCard.`,layer:`ui`,status:`ready`,children:(0,H.jsxs)(de,{title:`Examples`,id:`examples`,children:[(0,H.jsx)(N,{name:`DialogExample`,source:Z,children:(0,H.jsx)(K,{})}),(0,H.jsx)(N,{name:`SheetExample`,source:Z,children:(0,H.jsx)(q,{})}),(0,H.jsx)(N,{name:`PopoverExample`,source:Z,children:(0,H.jsx)(J,{})}),(0,H.jsx)(N,{name:`TooltipExample`,source:Z,children:(0,H.jsx)(Y,{})}),(0,H.jsx)(N,{name:`HoverCardExample`,source:Z,children:(0,H.jsx)(X,{})})]})})}function ut(e={}){let{wrapper:t}=e.components||{};return t?(0,H.jsx)(t,{...e,children:(0,H.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{ut as default};

package/dist/showcase/assets/package-0ZgMoFm1.js

@@ -0,0 +1 @@
+import{a as e}from"./index-Cz4UGUT2.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};

package/dist/showcase/assets/package-check-CT0dhSM8.js

@@ -0,0 +1 @@
+import{a as e}from"./index-Cz4UGUT2.js";var t=e(`package-check`,[[`path`,{d:`M12 22V12`,key:`d0xqtd`}],[`path`,{d:`m16 17 2 2 4-4`,key:`uh5qu3`}],[`path`,{d:`M21 11.127V8a2 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.729l7 4a2 2 0 0 0 2 .001l1.32-.753`,key:`kpkbpo`}],[`path`,{d:`M3.29 7 12 12l8.71-5`,key:`19ckod`}],[`path`,{d:`m7.5 4.27 8.997 5.148`,key:`9yrvtv`}]]);export{t};

package/dist/showcase/assets/page-action-button-DrHJKFbp.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Hn as n}from"./example-BIrQab7K.js";import{n as r,s as i}from"./index-Cz4UGUT2.js";var a=e(t(),1),o=i(),s={xs:`xs`,sm:`sm`,base:`default`},c={xs:`h-7 px-2.5 text-xs`,sm:`h-8 px-3 text-xs`,base:`h-9 px-3.5 text-sm`},l=a.forwardRef(({variant:e=`secondary`,size:t,className:i,...a},l)=>{let u=e===`error`?`error`:e,d=t??`sm`;return(0,o.jsx)(n,{ref:l,variant:u,buttonStyle:`solid`,size:s[d],className:r(`page-action-button--component`,c[d],`shadow-none`,i),...a})});l.displayName=`PageActionButton`;export{l as t};

package/dist/showcase/assets/page-header-CikNDnqI.js

@@ -0,0 +1 @@
+import{Er as e,Tr as t,r as n,yr as r}from"./example-BIrQab7K.js";import{t as i}from"./arrow-left-pYYsNkZE.js";import{n as a,s as o}from"./index-Cz4UGUT2.js";import{t as s}from"./separator-BjGdXNcn.js";import{t as c}from"./use-layout-link-BK_oEoBg.js";var l=o(),u={h1:`border-0 pb-0 text-xl`,h2:`border-0 pb-0 text-lg`,h3:`text-base`,h4:`text-sm`,h5:`text-sm`,h6:`text-sm`};function d({title:o,description:d,headingTag:f=`h3`,backHref:p,onBack:m,backLabel:h=`Back`,titleBadges:g=[],actions:_,slots:v,renderLink:y,LinkComponent:b,className:x,contentClassName:S,actionsClassName:C,titleClassName:w,descriptionClassName:T}){let E=c({renderLink:y,LinkComponent:b}),D=p||m?(0,l.jsxs)(`div`,{className:`flex items-center gap-1.5 pt-1`,children:[p&&!m?E({href:p,"aria-label":h,children:(0,l.jsxs)(n,{variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:`h-7 w-7 rounded p-1`,children:[(0,l.jsx)(i,{className:`size-4`,"aria-hidden":`true`}),(0,l.jsx)(`span`,{className:`sr-only`,children:h})]})}):(0,l.jsx)(n,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:`h-7 w-7 rounded p-1`,onClick:m,"aria-label":h,children:(0,l.jsx)(i,{className:`size-4`,"aria-hidden":`true`})}),(0,l.jsx)(s,{orientation:`vertical`,className:`h-7`})]}):null;return(0,l.jsxs)(`header`,{className:a(`flex w-full flex-col gap-4 md:flex-row md:items-start md:justify-between`,x),children:[(0,l.jsxs)(`div`,{className:`flex min-w-0 flex-1 items-start gap-3`,children:[v?.back??D,(0,l.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-0.5`,children:[v?.beforeTitle,(0,l.jsxs)(`div`,{className:a(`flex max-w-[475px] flex-col gap-0.5`,S),children:[(0,l.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3`,children:[(0,l.jsx)(t,{tag:f,containerClassName:`space-y-0`,className:a(u[f],w),children:o}),g.length>0&&(0,l.jsx)(`div`,{className:`flex items-center gap-1.5`,children:g.map((e,t)=>(0,l.jsx)(r,{variant:e.variant??`secondary`,children:e.label},e.key??t))})]}),!!d&&(0,l.jsx)(e,{size:`xs`,type:`secondary`,className:T,children:d}),v?.afterDescription]})]})]}),v?.actions??(!!_&&(0,l.jsx)(`div`,{className:a(`shrink-0`,C),children:_}))]})}export{d as t};

package/dist/showcase/assets/pagination-CxuA2zkE.js

@@ -0,0 +1,42 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{hr as t,mr as n,t as r}from"./example-BIrQab7K.js";import{s as i}from"./index-Cz4UGUT2.js";import{a,i as o,n as s,o as c,r as l,s as u,t as d}from"./pagination-DsPLs2Tx.js";var f=e({Default:()=>m}),p=i();function m(){return(0,p.jsx)(p.Fragment,{children:(0,p.jsx)(d,{children:(0,p.jsxs)(s,{children:[(0,p.jsx)(o,{children:(0,p.jsx)(u,{href:`#`})}),(0,p.jsx)(o,{children:(0,p.jsx)(a,{href:`#`,children:`1`})}),(0,p.jsx)(o,{children:(0,p.jsx)(a,{href:`#`,isActive:!0,children:`2`})}),(0,p.jsx)(o,{children:(0,p.jsx)(a,{href:`#`,children:`3`})}),(0,p.jsx)(o,{children:(0,p.jsx)(l,{})}),(0,p.jsx)(o,{children:(0,p.jsx)(a,{href:`#`,children:`12`})}),(0,p.jsx)(o,{children:(0,p.jsx)(c,{href:`#`})})]})})})}var h=`import {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from '@/components/ui/pagination';
+
+export function Default() {
+	return (
+		<>
+			<Pagination>
+								<PaginationContent>
+									<PaginationItem>
+										<PaginationPrevious href="#" />
+									</PaginationItem>
+									<PaginationItem>
+										<PaginationLink href="#">1</PaginationLink>
+									</PaginationItem>
+									<PaginationItem>
+										<PaginationLink href="#" isActive>2</PaginationLink>
+									</PaginationItem>
+									<PaginationItem>
+										<PaginationLink href="#">3</PaginationLink>
+									</PaginationItem>
+									<PaginationItem>
+										<PaginationEllipsis />
+									</PaginationItem>
+									<PaginationItem>
+										<PaginationLink href="#">12</PaginationLink>
+									</PaginationItem>
+									<PaginationItem>
+										<PaginationNext href="#" />
+									</PaginationItem>
+								</PaginationContent>
+							</Pagination>
+		</>
+	);
+}
+`;function g(e){return f||v(`Examples`,!1),m||v(`Examples.Default`,!0),(0,p.jsx)(t,{title:`UI · Pagination`,description:`Manual composition of pagination controls.`,layer:`ui`,status:`ready`,children:(0,p.jsx)(n,{title:`Examples`,id:`examples`,children:(0,p.jsx)(r,{name:`Default`,source:h,children:(0,p.jsx)(m,{})})})})}function _(e={}){let{wrapper:t}=e.components||{};return t?(0,p.jsx)(t,{...e,children:(0,p.jsx)(g,{...e})}):g(e)}function v(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{_ as default};

package/dist/showcase/assets/pagination-DsPLs2Tx.js

@@ -0,0 +1 @@
+import"./chunk-QTnfLwEv.js";import{n as e}from"./react-dom-Bz4cALsF.js";import{Un as t}from"./example-BIrQab7K.js";import{t as n}from"./chevron-left-Ddj6-KOu.js";import{t as r}from"./chevron-right-d-umkBru.js";import{t as i}from"./ellipsis-ntuo3ejh.js";import{n as a,s as o}from"./index-Cz4UGUT2.js";e();var s=o();function c({className:e,...t}){return(0,s.jsx)(`nav`,{role:`navigation`,"aria-label":`pagination`,"data-slot":`pagination`,className:a(`mx-auto flex w-full justify-center`,e),...t})}function l({className:e,...t}){return(0,s.jsx)(`ul`,{"data-slot":`pagination-content`,className:a(`gap-1 flex items-center`,e),...t})}function u({...e}){return(0,s.jsx)(`li`,{"data-slot":`pagination-item`,...e})}function d({className:e,isActive:n,size:r=`icon`,...i}){return(0,s.jsx)(t,{variant:n?`outline`:`ghost`,size:r,className:a(e),nativeButton:!1,render:(0,s.jsx)(`a`,{"aria-current":n?`page`:void 0,"data-slot":`pagination-link`,"data-active":n,...i})})}function f({className:e,text:t=`Previous`,...r}){return(0,s.jsxs)(d,{"aria-label":`Go to previous page`,size:`default`,className:a(`pl-2!`,e),...r,children:[(0,s.jsx)(n,{"data-icon":`inline-start`}),(0,s.jsx)(`span`,{className:`hidden sm:block`,children:t})]})}function p({className:e,text:t=`Next`,...n}){return(0,s.jsxs)(d,{"aria-label":`Go to next page`,size:`default`,className:a(`pr-2!`,e),...n,children:[(0,s.jsx)(`span`,{className:`hidden sm:block`,children:t}),(0,s.jsx)(r,{"data-icon":`inline-end`})]})}function m({className:e,...t}){return(0,s.jsxs)(`span`,{"aria-hidden":!0,"data-slot":`pagination-ellipsis`,className:a(`size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center`,e),...t,children:[(0,s.jsx)(i,{}),(0,s.jsx)(`span`,{className:`sr-only`,children:`More pages`})]})}export{d as a,u as i,l as n,p as o,m as r,f as s,c as t};

package/dist/showcase/assets/paperclip-CDMZ_JAo.js

@@ -0,0 +1 @@
+import{a as e}from"./index-Cz4UGUT2.js";var t=e(`paperclip`,[[`path`,{d:`m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551`,key:`1miecu`}]]);export{t};