admin-ui-starter-kit 0.4.2 → 0.4.3

package/dist/showcase/assets/{navigation-Dufz6qnF.js → navigation-CHYgQTsY.js}

@@ -1,4 +1,4 @@
-import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,hr as i,mr as a,r as o,t as s,yr as c}from"./example-BIrQab7K.js";import{t as l}from"./heart-BWZYF4xJ.js";import{t as u}from"./plus-DkHZm34I.js";import{t as d}from"./sparkles-DFJmoAFP.js";import{t as f}from"./star-DK5onZCp.js";import{t as p}from"./zap-DHBVTfYZ.js";import{k as m,n as h,s as g}from"./index-Cz4UGUT2.js";import{t as _}from"./props-table-BR-KjRNe.js";import{t as v}from"./smart-card-B4P_C0nk.js";import{c as y,i as b,l as x,o as S,r as C,t as w,u as T}from"./item-CbiuwbAN.js";var E=g(),D={neutral:`secondary`,primary:`primary`,info:`info`,success:`success`,warning:`warning`,destructive:`error`},O={neutral:`bg-muted-foreground`,primary:`bg-primary`,info:`bg-info`,success:`bg-success`,warning:`bg-warning`,destructive:`bg-destructive`};function k({columns:e,className:t}){return(0,E.jsx)(v,{title:`Pipeline Overview`,titleSuffix:(0,E.jsxs)(c,{variant:`secondary`,children:[e.reduce((e,t)=>e+t.items.length,0),` items`]}),className:h(`kanban-board--component`,t),children:(0,E.jsx)(`div`,{className:`grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4`,children:e.map(e=>{let t=e.tone??`neutral`;return(0,E.jsxs)(`div`,{className:`rounded-md border border-border/60 bg-muted/30 p-2`,children:[(0,E.jsxs)(`div`,{className:`mb-2 flex items-center justify-between gap-2`,children:[(0,E.jsx)(r,{size:`xs`,weight:`semibold`,className:`truncate`,children:e.title}),(0,E.jsx)(c,{variant:D[t],children:e.items.length})]}),(0,E.jsx)(`div`,{className:`space-y-1.5`,children:e.items.map((n,i)=>(0,E.jsxs)(`div`,{className:`flex min-h-8 items-center gap-2 rounded-md border border-border/50 bg-card px-2 py-1.5 shadow-sm`,children:[(0,E.jsx)(`div`,{className:h(`h-1.5 w-1.5 flex-shrink-0 rounded-full`,O[n.tone??t])}),(0,E.jsx)(r,{size:`xs`,className:`truncate`,children:n.title})]},`${e.title}-${i}`))})]},e.title)})})})}k.displayName=`KanbanMicroBoard`;var A=t(n(),1);function j({title:e,tabs:t,defaultTab:n,className:i}){let a=Object.keys(t),[s,c]=(0,A.useState)(n??a[0]??``);return(0,E.jsxs)(v,{title:e,className:h(`tab-switcher--component`,`bg-gradient-to-b from-muted/30 to-card`,i),children:[(0,E.jsx)(`div`,{className:`mt-4 flex gap-1 rounded-full bg-muted/50 p-1`,children:a.map(e=>(0,E.jsx)(o,{variant:s===e?`light`:`secondary`,buttonStyle:s===e?`solid`:`ghost`,onClick:()=>c(e),className:h(`flex-1 rounded-full capitalize`,s===e?`shadow-sm`:``),children:e},e))}),(0,E.jsx)(`div`,{className:`mt-4 space-y-2`,children:t[s]?.map(e=>(0,E.jsxs)(`div`,{className:`flex items-center gap-3 rounded-xl px-2 py-2 transition-colors hover:bg-muted/20`,children:[!!e.icon&&(0,E.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-full bg-primary/10`,children:(0,E.jsx)(e.icon,{className:`size-4 text-primary`})}),(0,E.jsx)(r,{className:`flex-1`,children:e.name}),(0,E.jsx)(r,{weight:`bold`,children:e.value})]},e.name))})]})}j.displayName=`TabSwitcherCard`;var M={legendNone:`None`,legendLow:`Low`,legendMedium:`Medium`,legendHigh:`High`,legendNow:`Now`,formatHourTitle:(e,t)=>`${e}:00 - ${t} bookings`};function N({hours:e,currentHour:t,className:n,strings:i}){let a=m(M,i),o=Math.max(...e,1),s=e.indexOf(Math.max(...e));function c(e){if(e===0)return`bg-muted`;let t=e/o;return t<.33?`bg-primary/25`:t<.66?`bg-primary/55`:`bg-primary`}return(0,E.jsxs)(`div`,{className:h(`time-ruler--component`,`space-y-1.5`,n),children:[(0,E.jsx)(`div`,{className:`relative flex h-8 gap-[1px] rounded-md overflow-hidden`,children:e.map((e,t)=>(0,E.jsx)(`div`,{className:h(`relative flex-1 transition-colors duration-200`,c(e),t===s&&`ring-1 ring-primary ring-inset`),title:a.formatHourTitle(String(t).padStart(2,`0`),e)},t))}),(0,E.jsx)(`div`,{className:`relative flex`,children:e.map((e,t)=>(0,E.jsx)(`div`,{className:`flex-1 text-center`,children:t%4==0&&(0,E.jsx)(r,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:String(t).padStart(2,`0`)})},t))}),t!==void 0&&t>=0&&t<24&&(0,E.jsx)(`div`,{className:`relative h-0`,children:(0,E.jsx)(`div`,{className:`absolute -top-[42px] flex flex-col items-center`,style:{left:`${t/24*100}%`,transform:`translateX(-50%)`},children:(0,E.jsx)(`div`,{className:`h-0 w-0 border-x-[4px] border-b-[5px] border-x-transparent border-b-destructive`})})}),(0,E.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-muted`}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:a.legendNone})]}),(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-primary/25`}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:a.legendLow})]}),(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-primary/55`}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:a.legendMedium})]}),(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-primary`}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:a.legendHigh})]}),t!==void 0&&(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-0 w-0 border-x-[3px] border-b-[4px] border-x-transparent border-b-destructive`}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:a.legendNow})]})]})]})}N.displayName=`TimeDistributionRuler`;function P({rating:e,maxRating:t=5}){return(0,E.jsx)(`div`,{className:h(`vendor-performance--component`,`flex items-center gap-0.5`),children:Array.from({length:t},(t,n)=>(0,E.jsx)(`svg`,{className:h(`h-3.5 w-3.5`,n<e?`text-warning`:`text-muted`),viewBox:`0 0 24 24`,fill:`currentColor`,stroke:`none`,children:(0,E.jsx)(`path`,{d:`M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z`})},`star-${String(n)}`))})}function F(e){return e>=80?`bg-success`:e>=50?`bg-warning`:`bg-destructive`}function I({vendorName:e,rating:t,maxRating:n=5,metrics:i,performanceScore:a,lastActive:o,joinedDate:s,className:c}){return(0,E.jsx)(v,{title:e,className:c,footerText:(0,E.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,E.jsxs)(r,{size:`xxs`,type:`secondary`,children:[`Last active: `,o]}),(0,E.jsxs)(r,{size:`xxs`,type:`secondary`,children:[`Joined: `,s]})]}),children:(0,E.jsxs)(`div`,{className:`space-y-4`,children:[(0,E.jsx)(P,{rating:t,maxRating:n}),(0,E.jsx)(`div`,{className:`grid grid-cols-2 gap-2`,children:[{label:`Bookings`,value:String(i.bookings)},{label:`Revenue`,value:i.revenue},{label:`Avg Rating`,value:String(i.avgRating)},{label:`Response`,value:i.responseTime}].map(e=>(0,E.jsxs)(`div`,{className:`rounded-lg bg-muted/50 p-3 text-center`,children:[(0,E.jsx)(r,{size:`lg`,weight:`bold`,className:`tabular-nums`,children:e.value}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:e.label})]},e.label))}),(0,E.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,E.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,E.jsx)(r,{children:`Performance`}),(0,E.jsxs)(r,{weight:`semibold`,className:`tabular-nums`,children:[a,`%`]})]}),(0,E.jsx)(`div`,{className:`h-2 w-full overflow-hidden rounded-full bg-muted`,children:(0,E.jsx)(`div`,{className:h(`h-full rounded-full transition-all duration-500`,F(a)),style:{width:`${String(a)}%`}})})]})]})})}I.displayName=`VendorPerformanceCard`;var L={description:`Experiences completed this week`,addActionLabel:`Add activity`};function R({completed:e,total:t,activities:n,onAdd:i,strings:a,className:s}){let c=m(L,a);return(0,E.jsx)(v,{title:`${e} out of ${t}`,description:c.description,headerEnd:!!i&&(0,E.jsx)(o,{variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,"aria-label":c.addActionLabel,onClick:i,children:(0,E.jsx)(u,{className:`size-4`})}),className:h(`experience-activity--component`,s),children:(0,E.jsx)(S,{children:n.map((e,t)=>(0,E.jsxs)(`div`,{children:[t>0&&(0,E.jsx)(x,{}),(0,E.jsxs)(w,{size:`xs`,className:`px-0 items-start`,children:[(0,E.jsx)(y,{children:(0,E.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-md bg-primary/10 text-primary`,children:(0,E.jsx)(e.icon,{className:`size-4`})})}),(0,E.jsxs)(C,{children:[(0,E.jsx)(T,{children:e.title}),(0,E.jsx)(b,{clamp:1,children:e.time}),(0,E.jsx)(`div`,{className:`mt-2 grid grid-cols-2 gap-1.5`,children:e.metrics.map(e=>(0,E.jsxs)(`div`,{className:`rounded-md border border-border/50 bg-muted/25 px-2.5 py-1.5`,children:[(0,E.jsx)(r,{size:`xs`,type:`secondary`,children:e.label}),(0,E.jsx)(r,{size:`xs`,weight:`semibold`,children:e.value})]},e.label))})]})]})]},e.title))})})}R.displayName=`ExperienceActivityCard`;var z=e({ExperienceActivity:()=>W,KanbanMicroBoardExample:()=>B,TabSwitcherCardExample:()=>V,TimeDistributionRulerExample:()=>H,VendorPerformance:()=>U});function B(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(`div`,{className:`w-full max-w-4xl`,children:(0,E.jsx)(k,{columns:[{title:`Draft`,tone:`neutral`,items:[{title:`Spa Package v2`},{title:`Wine Tour`}]},{title:`Active`,tone:`info`,items:[{title:`Cooking Class`},{title:`Paragliding`}]},{title:`Review`,tone:`warning`,items:[{title:`Horse Riding`}]},{title:`Done`,tone:`success`,items:[{title:`Balloon Ride`},{title:`Photo Tour`}]}]})})})}function V(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(j,{title:`Gift Cards`,tabs:{recent:[{name:`Luxury Spa Voucher`,value:`150 USD`,icon:l},{name:`Adventure Day Pass`,value:`85 USD`,icon:p}],popular:[{name:`Wine Tasting for Two`,value:`95 USD`,icon:f},{name:`Hot Air Balloon`,value:`280 USD`,icon:d}]}})})}function H(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(v,{title:`Booking Density Today`,children:(0,E.jsx)(N,{hours:[0,0,0,0,0,0,1,3,8,12,15,10,14,11,16,18,12,8,5,3,2,1,0,0],currentHour:14})})})}function U(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(I,{vendorName:`Spa Retreat New York`,rating:5,metrics:{bookings:342,revenue:`89,200 USD`,avgRating:4.8,responseTime:`1.2 hrs`},performanceScore:94,lastActive:`2 hours ago`,joinedDate:`Jan 2023`})})}function W(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(`div`,{className:`w-full max-w-2xl`,children:(0,E.jsx)(R,{completed:2,total:5,activities:[{icon:l,title:`Couples Spa Day`,time:`Mar 25, 14:00`,metrics:[{label:`Duration`,value:`3h`},{label:`Value`,value:`180 USD`},{label:`Bookings`,value:`12`},{label:`Score`,value:`9.4`}]},{icon:f,title:`Wine & Dine Tour`,time:`Mar 24, 18:30`,metrics:[{label:`Duration`,value:`4h`},{label:`Value`,value:`220 USD`}]}],onAdd:()=>{}})})})}var G=`import { Heart, Star, Sparkles, Zap } from 'lucide-react';
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,jr as o,r as s,t as c}from"./example-Cz_880po.js";import{t as l}from"./heart-BJVBFZ-j.js";import{t as u}from"./plus-D5swsZCz.js";import{t as d}from"./sparkles-N8rqKQez.js";import{t as f}from"./star-BaV-UTPq.js";import{t as p}from"./zap-DIJUAJEb.js";import{k as m,n as h,s as g}from"./index-BQIv1ffM.js";import{t as _}from"./props-table-2pIZzGC-.js";import{t as v}from"./smart-card-Dhu_1A_u.js";import{c as y,i as b,l as x,o as S,r as C,t as w,u as T}from"./item-YF6wMI9W.js";var E=g(),D={neutral:`secondary`,primary:`primary`,info:`info`,success:`success`,warning:`warning`,destructive:`error`},O={neutral:`bg-muted-foreground`,primary:`bg-primary`,info:`bg-info`,success:`bg-success`,warning:`bg-warning`,destructive:`bg-destructive`};function k({columns:e,className:t}){return(0,E.jsx)(v,{title:`Pipeline Overview`,titleSuffix:(0,E.jsxs)(o,{variant:`secondary`,children:[e.reduce((e,t)=>e+t.items.length,0),` items`]}),className:h(`kanban-board--component`,t),children:(0,E.jsx)(`div`,{className:`grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4`,children:e.map(e=>{let t=e.tone??`neutral`;return(0,E.jsxs)(`div`,{className:`rounded-md border border-border/60 bg-muted/30 p-2`,children:[(0,E.jsxs)(`div`,{className:`mb-2 flex items-center justify-between gap-2`,children:[(0,E.jsx)(a,{size:`xs`,weight:`semibold`,className:`truncate`,children:e.title}),(0,E.jsx)(o,{variant:D[t],children:e.items.length})]}),(0,E.jsx)(`div`,{className:`space-y-1.5`,children:e.items.map((n,r)=>(0,E.jsxs)(`div`,{className:`flex min-h-8 items-center gap-2 rounded-md border border-border/50 bg-card px-2 py-1.5 shadow-sm`,children:[(0,E.jsx)(`div`,{className:h(`h-1.5 w-1.5 flex-shrink-0 rounded-full`,O[n.tone??t])}),(0,E.jsx)(a,{size:`xs`,className:`truncate`,children:n.title})]},`${e.title}-${r}`))})]},e.title)})})})}k.displayName=`KanbanMicroBoard`;var A=t(n(),1);function j({title:e,tabs:t,defaultTab:n,className:r}){let i=Object.keys(t),[o,c]=(0,A.useState)(n??i[0]??``);return(0,E.jsxs)(v,{title:e,className:h(`tab-switcher--component`,`bg-gradient-to-b from-muted/30 to-card`,r),children:[(0,E.jsx)(`div`,{className:`mt-4 flex gap-1 rounded-full bg-muted/50 p-1`,children:i.map(e=>(0,E.jsx)(s,{variant:o===e?`light`:`secondary`,buttonStyle:o===e?`solid`:`ghost`,onClick:()=>c(e),className:h(`flex-1 rounded-full capitalize`,o===e?`shadow-sm`:``),children:e},e))}),(0,E.jsx)(`div`,{className:`mt-4 space-y-2`,children:t[o]?.map(e=>(0,E.jsxs)(`div`,{className:`flex items-center gap-3 rounded-xl px-2 py-2 transition-colors hover:bg-muted/20`,children:[!!e.icon&&(0,E.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-full bg-primary/10`,children:(0,E.jsx)(e.icon,{className:`size-4 text-primary`})}),(0,E.jsx)(a,{className:`flex-1`,children:e.name}),(0,E.jsx)(a,{weight:`bold`,children:e.value})]},e.name))})]})}j.displayName=`TabSwitcherCard`;var M={legendNone:`None`,legendLow:`Low`,legendMedium:`Medium`,legendHigh:`High`,legendNow:`Now`,formatHourTitle:(e,t)=>`${e}:00 - ${t} bookings`};function N({hours:e,currentHour:t,className:n,strings:r}){let i=m(M,r),o=Math.max(...e,1),s=e.indexOf(Math.max(...e));function c(e){if(e===0)return`bg-muted`;let t=e/o;return t<.33?`bg-primary/25`:t<.66?`bg-primary/55`:`bg-primary`}return(0,E.jsxs)(`div`,{className:h(`time-ruler--component`,`space-y-1.5`,n),children:[(0,E.jsx)(`div`,{className:`relative flex h-8 gap-[1px] rounded-md overflow-hidden`,children:e.map((e,t)=>(0,E.jsx)(`div`,{className:h(`relative flex-1 transition-colors duration-200`,c(e),t===s&&`ring-1 ring-primary ring-inset`),title:i.formatHourTitle(String(t).padStart(2,`0`),e)},t))}),(0,E.jsx)(`div`,{className:`relative flex`,children:e.map((e,t)=>(0,E.jsx)(`div`,{className:`flex-1 text-center`,children:t%4==0&&(0,E.jsx)(a,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:String(t).padStart(2,`0`)})},t))}),t!==void 0&&t>=0&&t<24&&(0,E.jsx)(`div`,{className:`relative h-0`,children:(0,E.jsx)(`div`,{className:`absolute -top-[42px] flex flex-col items-center`,style:{left:`${t/24*100}%`,transform:`translateX(-50%)`},children:(0,E.jsx)(`div`,{className:`h-0 w-0 border-x-[4px] border-b-[5px] border-x-transparent border-b-destructive`})})}),(0,E.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-muted`}),(0,E.jsx)(a,{size:`xxs`,type:`secondary`,children:i.legendNone})]}),(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-primary/25`}),(0,E.jsx)(a,{size:`xxs`,type:`secondary`,children:i.legendLow})]}),(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-primary/55`}),(0,E.jsx)(a,{size:`xxs`,type:`secondary`,children:i.legendMedium})]}),(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-primary`}),(0,E.jsx)(a,{size:`xxs`,type:`secondary`,children:i.legendHigh})]}),t!==void 0&&(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-0 w-0 border-x-[3px] border-b-[4px] border-x-transparent border-b-destructive`}),(0,E.jsx)(a,{size:`xxs`,type:`secondary`,children:i.legendNow})]})]})]})}N.displayName=`TimeDistributionRuler`;function P({rating:e,maxRating:t=5}){return(0,E.jsx)(`div`,{className:h(`vendor-performance--component`,`flex items-center gap-0.5`),children:Array.from({length:t},(t,n)=>(0,E.jsx)(`svg`,{className:h(`h-3.5 w-3.5`,n<e?`text-warning`:`text-muted`),viewBox:`0 0 24 24`,fill:`currentColor`,stroke:`none`,children:(0,E.jsx)(`path`,{d:`M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z`})},`star-${String(n)}`))})}function F(e){return e>=80?`bg-success`:e>=50?`bg-warning`:`bg-destructive`}function I({vendorName:e,rating:t,maxRating:n=5,metrics:r,performanceScore:i,lastActive:o,joinedDate:s,className:c}){return(0,E.jsx)(v,{title:e,className:c,footerText:(0,E.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,E.jsxs)(a,{size:`xxs`,type:`secondary`,children:[`Last active: `,o]}),(0,E.jsxs)(a,{size:`xxs`,type:`secondary`,children:[`Joined: `,s]})]}),children:(0,E.jsxs)(`div`,{className:`space-y-4`,children:[(0,E.jsx)(P,{rating:t,maxRating:n}),(0,E.jsx)(`div`,{className:`grid grid-cols-2 gap-2`,children:[{label:`Bookings`,value:String(r.bookings)},{label:`Revenue`,value:r.revenue},{label:`Avg Rating`,value:String(r.avgRating)},{label:`Response`,value:r.responseTime}].map(e=>(0,E.jsxs)(`div`,{className:`rounded-lg bg-muted/50 p-3 text-center`,children:[(0,E.jsx)(a,{size:`lg`,weight:`bold`,className:`tabular-nums`,children:e.value}),(0,E.jsx)(a,{size:`xxs`,type:`secondary`,children:e.label})]},e.label))}),(0,E.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,E.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,E.jsx)(a,{children:`Performance`}),(0,E.jsxs)(a,{weight:`semibold`,className:`tabular-nums`,children:[i,`%`]})]}),(0,E.jsx)(`div`,{className:`h-2 w-full overflow-hidden rounded-full bg-muted`,children:(0,E.jsx)(`div`,{className:h(`h-full rounded-full transition-all duration-500`,F(i)),style:{width:`${String(i)}%`}})})]})]})})}I.displayName=`VendorPerformanceCard`;var L={description:`Experiences completed this week`,addActionLabel:`Add activity`};function R({completed:e,total:t,activities:n,onAdd:r,strings:i,className:o}){let c=m(L,i);return(0,E.jsx)(v,{title:`${e} out of ${t}`,description:c.description,headerEnd:!!r&&(0,E.jsx)(s,{variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,"aria-label":c.addActionLabel,onClick:r,children:(0,E.jsx)(u,{className:`size-4`})}),className:h(`experience-activity--component`,o),children:(0,E.jsx)(S,{children:n.map((e,t)=>(0,E.jsxs)(`div`,{children:[t>0&&(0,E.jsx)(x,{}),(0,E.jsxs)(w,{size:`xs`,className:`px-0 items-start`,children:[(0,E.jsx)(y,{children:(0,E.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-md bg-primary/10 text-primary`,children:(0,E.jsx)(e.icon,{className:`size-4`})})}),(0,E.jsxs)(C,{children:[(0,E.jsx)(T,{children:e.title}),(0,E.jsx)(b,{clamp:1,children:e.time}),(0,E.jsx)(`div`,{className:`mt-2 grid grid-cols-2 gap-1.5`,children:e.metrics.map(e=>(0,E.jsxs)(`div`,{className:`rounded-md border border-border/50 bg-muted/25 px-2.5 py-1.5`,children:[(0,E.jsx)(a,{size:`xs`,type:`secondary`,children:e.label}),(0,E.jsx)(a,{size:`xs`,weight:`semibold`,children:e.value})]},e.label))})]})]})]},e.title))})})}R.displayName=`ExperienceActivityCard`;var z=e({ExperienceActivity:()=>W,KanbanMicroBoardExample:()=>B,TabSwitcherCardExample:()=>V,TimeDistributionRulerExample:()=>H,VendorPerformance:()=>U});function B(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(`div`,{className:`w-full max-w-4xl`,children:(0,E.jsx)(k,{columns:[{title:`Draft`,tone:`neutral`,items:[{title:`Spa Package v2`},{title:`Wine Tour`}]},{title:`Active`,tone:`info`,items:[{title:`Cooking Class`},{title:`Paragliding`}]},{title:`Review`,tone:`warning`,items:[{title:`Horse Riding`}]},{title:`Done`,tone:`success`,items:[{title:`Balloon Ride`},{title:`Photo Tour`}]}]})})})}function V(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(j,{title:`Gift Cards`,tabs:{recent:[{name:`Luxury Spa Voucher`,value:`150 USD`,icon:l},{name:`Adventure Day Pass`,value:`85 USD`,icon:p}],popular:[{name:`Wine Tasting for Two`,value:`95 USD`,icon:f},{name:`Hot Air Balloon`,value:`280 USD`,icon:d}]}})})}function H(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(v,{title:`Booking Density Today`,children:(0,E.jsx)(N,{hours:[0,0,0,0,0,0,1,3,8,12,15,10,14,11,16,18,12,8,5,3,2,1,0,0],currentHour:14})})})}function U(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(I,{vendorName:`Spa Retreat New York`,rating:5,metrics:{bookings:342,revenue:`89,200 USD`,avgRating:4.8,responseTime:`1.2 hrs`},performanceScore:94,lastActive:`2 hours ago`,joinedDate:`Jan 2023`})})}function W(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(`div`,{className:`w-full max-w-2xl`,children:(0,E.jsx)(R,{completed:2,total:5,activities:[{icon:l,title:`Couples Spa Day`,time:`Mar 25, 14:00`,metrics:[{label:`Duration`,value:`3h`},{label:`Value`,value:`180 USD`},{label:`Bookings`,value:`12`},{label:`Score`,value:`9.4`}]},{icon:f,title:`Wine & Dine Tour`,time:`Mar 24, 18:30`,metrics:[{label:`Duration`,value:`4h`},{label:`Value`,value:`220 USD`}]}],onAdd:()=>{}})})})}var G=`import { Heart, Star, Sparkles, Zap } from 'lucide-react';
 import {
 	KanbanMicroBoard,
 	TabSwitcherCard,
@@ -87,4 +87,4 @@ export function ExperienceActivity() {
 		</>
 	);
 }
-`;function K(e){let t={h4:`h4`,...e.components};return z||J(`Examples`,!1),W||J(`Examples.ExperienceActivity`,!0),B||J(`Examples.KanbanMicroBoardExample`,!0),V||J(`Examples.TabSwitcherCardExample`,!0),H||J(`Examples.TimeDistributionRulerExample`,!0),U||J(`Examples.VendorPerformance`,!0),(0,E.jsxs)(i,{title:`Composed · Navigation & boards`,description:`Kanban, tab switcher, time ruler, vendor performance, experience activity.`,layer:`composed`,status:`ready`,children:[(0,E.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,E.jsx)(s,{name:`KanbanMicroBoardExample`,source:G,children:(0,E.jsx)(B,{})}),(0,E.jsx)(s,{name:`TabSwitcherCardExample`,source:G,children:(0,E.jsx)(V,{})}),(0,E.jsx)(s,{name:`TimeDistributionRulerExample`,source:G,children:(0,E.jsx)(H,{})}),(0,E.jsx)(s,{name:`VendorPerformance`,source:G,children:(0,E.jsx)(U,{})}),(0,E.jsx)(s,{name:`ExperienceActivity`,source:G,children:(0,E.jsx)(W,{})})]}),(0,E.jsxs)(a,{title:`API`,id:`api`,children:[(0,E.jsx)(t.h4,{children:`KanbanMicroBoard`}),(0,E.jsx)(_,{component:`KanbanMicroBoard`}),(0,E.jsx)(t.h4,{children:`TabSwitcherCard`}),(0,E.jsx)(_,{component:`TabSwitcherCard`}),(0,E.jsx)(t.h4,{children:`TimeDistributionRuler`}),(0,E.jsx)(_,{component:`TimeDistributionRuler`}),(0,E.jsx)(t.h4,{children:`VendorPerformanceCard`}),(0,E.jsx)(_,{component:`VendorPerformanceCard`}),(0,E.jsx)(t.h4,{children:`ExperienceActivityCard`}),(0,E.jsx)(_,{component:`ExperienceActivityCard`})]})]})}function q(e={}){let{wrapper:t}=e.components||{};return t?(0,E.jsx)(t,{...e,children:(0,E.jsx)(K,{...e})}):K(e)}function J(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{q as default};
+`;function K(e){let t={h4:`h4`,...e.components};return z||J(`Examples`,!1),W||J(`Examples.ExperienceActivity`,!0),B||J(`Examples.KanbanMicroBoardExample`,!0),V||J(`Examples.TabSwitcherCardExample`,!0),H||J(`Examples.TimeDistributionRulerExample`,!0),U||J(`Examples.VendorPerformance`,!0),(0,E.jsxs)(r,{title:`Composed · Navigation & boards`,description:`Kanban, tab switcher, time ruler, vendor performance, experience activity.`,layer:`composed`,status:`ready`,children:[(0,E.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,E.jsx)(c,{name:`KanbanMicroBoardExample`,source:G,children:(0,E.jsx)(B,{})}),(0,E.jsx)(c,{name:`TabSwitcherCardExample`,source:G,children:(0,E.jsx)(V,{})}),(0,E.jsx)(c,{name:`TimeDistributionRulerExample`,source:G,children:(0,E.jsx)(H,{})}),(0,E.jsx)(c,{name:`VendorPerformance`,source:G,children:(0,E.jsx)(U,{})}),(0,E.jsx)(c,{name:`ExperienceActivity`,source:G,children:(0,E.jsx)(W,{})})]}),(0,E.jsxs)(i,{title:`API`,id:`api`,children:[(0,E.jsx)(t.h4,{children:`KanbanMicroBoard`}),(0,E.jsx)(_,{component:`KanbanMicroBoard`}),(0,E.jsx)(t.h4,{children:`TabSwitcherCard`}),(0,E.jsx)(_,{component:`TabSwitcherCard`}),(0,E.jsx)(t.h4,{children:`TimeDistributionRuler`}),(0,E.jsx)(_,{component:`TimeDistributionRuler`}),(0,E.jsx)(t.h4,{children:`VendorPerformanceCard`}),(0,E.jsx)(_,{component:`VendorPerformanceCard`}),(0,E.jsx)(t.h4,{children:`ExperienceActivityCard`}),(0,E.jsx)(_,{component:`ExperienceActivityCard`})]})]})}function q(e={}){let{wrapper:t}=e.components||{};return t?(0,E.jsx)(t,{...e,children:(0,E.jsx)(K,{...e})}):K(e)}function J(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{q as default};

package/dist/showcase/assets/{navigation-Ds60FMAs.js → navigation-C_6gS4FA.js}

@@ -1,4 +1,4 @@
-import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,Hn as i,Tr as a,hr as o,mr as s,r as c,t as l,yr as u}from"./example-BIrQab7K.js";import{t as d}from"./bell-Dt3Nz2y2.js";import{t as f}from"./chart-column-DjAyOA-t.js";import{t as p}from"./chevron-down-CSn8HCwf.js";import{t as m}from"./credit-card-CYgRtM77.js";import{t as h}from"./database-BVwSMeGM.js";import{t as g}from"./ellipsis-ntuo3ejh.js";import{t as _}from"./file-text-D3AE37vP.js";import{t as v}from"./folder-open-Dp0sceCi.js";import{t as ee}from"./globe-BJHI134i.js";import{t as y}from"./house-CAQOnHLO.js";import{t as te}from"./inbox-D4UE_W9O.js";import{t as ne}from"./message-square-B0RnrJV6.js";import{t as re}from"./plus-DkHZm34I.js";import{t as b}from"./settings-BSRT_96A.js";import{t as x}from"./shield-CcR2q5u_.js";import{t as ie}from"./square-pen-CfvmmXYo.js";import{t as ae}from"./star-DK5onZCp.js";import{t as oe}from"./trash-2-OsaEm8cc.js";import{t as S}from"./users-ERTaffcv.js";import{k as se,n as C,s as ce}from"./index-Cz4UGUT2.js";import{t as w}from"./props-table-BR-KjRNe.js";import{a as le,l as ue,r as de,t as fe}from"./dropdown-menu-bPWrLPgm.js";import{t as pe}from"./separator-BjGdXNcn.js";import{t as me}from"./breadcrumbs-D_lniGJs.js";import{n as T,t as E}from"./action-menu-BOUHlGba.js";var D=t(n(),1),O=ce();function k({locales:e,onRenderLabel:t,variant:n=`buttons`,onSelect:r}){let i=(0,D.useCallback)((e,t)=>{t||r?.(e)},[r]);return e.length===0?null:n===`inline`?(0,O.jsxs)(`div`,{className:C(`language-switcher--component`,`flex items-center justify-center gap-2.5`),children:[(0,O.jsx)(ee,{className:`size-4 text-muted-foreground/70`,"aria-hidden":`true`}),(0,O.jsx)(`div`,{className:`flex items-center justify-center gap-2.5`,children:e.map((n,r)=>{let a=t?t(n):n.nativeLabel;return(0,O.jsxs)(D.Fragment,{children:[(0,O.jsx)(`button`,{type:`button`,onClick:()=>i(n.value,n.active),className:C(`text-xs transition-colors`,n.active?`text-primary font-medium`:`text-muted-foreground hover:text-foreground`),children:a}),r<e.length-1&&(0,O.jsx)(`span`,{"aria-hidden":`true`,className:`size-1 rounded-full bg-border`})]},n.value)})})]}):(0,O.jsx)(`div`,{className:`flex flex-wrap items-center justify-center gap-2`,children:e.map(e=>{let n=t?t(e):e.nativeLabel;return(0,O.jsx)(c,{type:`button`,variant:`secondary`,buttonStyle:e.active?`solid`:`ghost`,onClick:()=>i(e.value,e.active),className:C(`min-w-[4.5rem] justify-center transition-colors`,e.active?`font-semibold text-primary`:`text-muted-foreground`),children:n},e.value)})})}k.displayName=`LanguageSwitcher`;function A(e){if(e.length===0)return`/`;try{let t=typeof window<`u`?window.location.origin:`http://localhost`,n=new URL(e,t).pathname.replace(/\/+$/,``);return n.length>0?n:`/`}catch{let t=(e.split(`?`)[0]??e).replace(/\/+$/,``);return t.length>0?t:`/`}}function j({items:e,currentPath:t,activeClassName:n,itemClassName:r}){let a=A(t??(typeof window<`u`?window.location.pathname:``)),o=typeof n==`string`&&n.length>0?n:`bg-muted`,s=e.map(e=>({item:e,normalizedPath:A(e.href)})),c=s.filter(({normalizedPath:e})=>a===e||a.startsWith(`${e}/`)).sort((e,t)=>t.normalizedPath.length-e.normalizedPath.length)[0]?.normalizedPath??null;return(0,O.jsx)(`nav`,{className:C(`aside-navigation-menu--component`,`flex flex-col space-y-1 space-x-0`),children:s.map(({item:e,normalizedPath:t})=>(0,O.jsx)(i,{variant:`secondary`,buttonStyle:`ghost`,size:`sm`,fullWidth:!0,className:C(`justify-start`,r,t===c?o:null),nativeButton:!1,render:t=>(0,O.jsx)(`a`,{...t,href:e.href}),children:e.title},e.href))})}j.displayName=`AsideNavigationMenu`;function M({items:e,currentPath:t,className:n,ariaLabel:r=`Tab navigation`}){let i=t??(typeof window<`u`?window.location.pathname:``),a=(0,D.useMemo)(()=>e.map(e=>{let t=i===e.href,n=null;if(typeof e.icon==`string`)n=(0,O.jsx)(`span`,{className:`text-inherit`,children:e.icon});else if(e.icon){let t=e.icon;n=(0,O.jsx)(t,{className:`h-4 w-4`})}return{key:e.href,item:e,isActive:t,iconNode:n,ariaCurrent:t?`page`:void 0}}),[i,e]);return(0,O.jsx)(`div`,{className:C(`tab-navigation-menu--component`,`w-full`,n),children:(0,O.jsx)(`nav`,{className:`inline-flex bg-muted rounded-full items-center gap-1 p-1`,"aria-label":r,children:a.map(({key:e,item:t,isActive:n,iconNode:r,ariaCurrent:i})=>(0,O.jsxs)(`a`,{href:t.href,className:C(`whitespace-nowrap flex items-center gap-2`,`rounded-full px-4 py-2`,`text-sm font-medium`,`transition-all duration-200`,`focus-visible:outline-none focus-visible:ring-2`,`focus-visible:ring-ring focus-visible:ring-offset-2`,{"bg-background text-foreground shadow-sm":n,"text-muted-foreground hover:text-foreground hover:bg-background/50":!n}),"aria-current":i,children:[!!r&&(0,O.jsx)(`span`,{className:`text-inherit`,children:r}),t.title,!!t.badge&&(0,O.jsx)(`span`,{className:C(`ml-1.5 rounded-full px-2 py-0.5 text-xs font-medium`,n?`bg-primary/10 text-primary`:`bg-muted-foreground/10 text-muted-foreground`),children:t.badge})]},e))})})}M.displayName=`TabNavigationMenu`;var he={tabsAria:`Tabs`};function N({items:e,currentUrl:t,strings:n}){let r=se(he,n),i=t??(typeof window<`u`?window.location.pathname:`/`),a=e=>{try{return new URL(e,window.location.origin).pathname.replace(/\/+$/,``)}catch{return e.replace(/\/+$/,``).split(`?`)[0]}},o=a(i);return(0,O.jsx)(`div`,{className:C(`navigation-tabs--component`,`navigation-tabs-container w-full`),children:(0,O.jsx)(`nav`,{className:`inline-flex items-center gap-1 rounded-lg bg-muted/60 p-1`,"aria-label":r.tabsAria,children:e.map(e=>{let t=o===a(e.url);return(0,O.jsx)(`a`,{href:e.url,className:C(`whitespace-nowrap flex items-center gap-1 leading-tight rounded-md border border-transparent px-3 py-1.5 text-sm bg-background text-foreground hover:text-background hover:bg-primary transition-all duration-150`,{"!bg-primary !text-background font-semibold":t}),children:e.label},e.url)})})})}N.displayName=`NavigationTabs`;function P({eyebrow:e,title:t,description:n,badge:i,breadcrumbs:o,actions:s,children:c,className:l,withSeparator:d=!0}){return(0,O.jsxs)(`header`,{className:C(`page-header--component`,`w-full`,l),children:[!!o&&(0,O.jsx)(`div`,{className:`mb-3`,children:o}),(0,O.jsxs)(`div`,{className:`flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between`,children:[(0,O.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[!!e&&(0,O.jsx)(r,{size:`xxs`,type:`secondary`,weight:`semibold`,className:`mb-1 uppercase tracking-wider`,children:e}),(0,O.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,O.jsx)(a,{tag:`h2`,className:`text-2xl border-0 pb-0`,children:t}),!!i&&(0,O.jsx)(u,{variant:i.variant??`secondary`,children:i.label})]}),!!n&&(0,O.jsx)(r,{type:`secondary`,className:`mt-1 max-w-2xl`,children:n})]}),!!s&&(0,O.jsx)(`div`,{className:`flex shrink-0 items-center gap-2`,children:s})]}),!!c&&(0,O.jsx)(`div`,{className:`mt-4`,children:c}),!!d&&(0,O.jsx)(pe,{className:`mt-4`})]})}P.displayName=`PageHeader`;function F({items:e,rootMargin:t=`-40% 0px -50% 0px`,className:n,onSelect:i}){let[a,o]=(0,D.useState)(e[0]?.id??null);return(0,D.useEffect)(()=>{let n=new IntersectionObserver(e=>{let t=e.find(e=>e.isIntersecting);t?.target.id&&o(t.target.id)},{rootMargin:t,threshold:0});return e.forEach(e=>{let t=document.getElementById(e.id);t&&n.observe(t)}),()=>n.disconnect()},[e,t]),(0,O.jsx)(`nav`,{className:C(`section-nav--component`,`flex flex-col gap-0.5`,n),"aria-label":`Section navigation`,children:e.map(e=>{let t=e.icon,n=a===e.id;return(0,O.jsxs)(`a`,{href:`#${e.id}`,onClick:t=>{t.preventDefault(),document.getElementById(e.id)?.scrollIntoView({behavior:`smooth`,block:`start`}),o(e.id),i?.(e.id)},className:C(`flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors`,n?`bg-primary/10 text-primary`:`text-muted-foreground hover:bg-muted/50 hover:text-foreground`),children:[!!t&&(0,O.jsx)(t,{className:`size-3.5 shrink-0`}),(0,O.jsx)(r,{tag:`span`,weight:n?`semibold`:`medium`,children:e.label})]},e.id)})})}F.displayName=`SectionNav`;function I(e){if(e.length===0)return`/`;try{let t=typeof window<`u`?window.location.origin:`http://localhost`,n=new URL(e,t).pathname.replace(/\/+$/,``);return n.length>0?n:`/`}catch{let t=(e.split(`?`)[0]??e).replace(/\/+$/,``);return t.length>0?t:`/`}}function L({groups:e,currentPath:t,className:n,itemClassName:i,activeItemClassName:a,ariaLabel:o=`Side navigation`}){let s=I(t??(typeof window<`u`?window.location.pathname:``)),c=(0,D.useMemo)(()=>e.flatMap(e=>e.items.map(t=>({groupId:e.id,normalizedPath:I(t.href)}))),[e]).filter(({normalizedPath:e})=>s===e||s.startsWith(`${e}/`)).sort((e,t)=>t.normalizedPath.length-e.normalizedPath.length)[0]?.normalizedPath??null,[l,d]=(0,D.useState)(()=>Object.fromEntries(e.map(e=>[e.id,!!e.defaultCollapsed]))),f=e=>d(t=>({...t,[e]:!t[e]})),m=a&&a.length>0?a:`bg-primary/5 text-primary`;return(0,O.jsx)(`nav`,{className:C(`side-nav--component`,`flex flex-col gap-4`,n),"aria-label":o,children:e.map(e=>{let t=e.collapsible!==!1&&l[e.id],n=!!e.label,a=!t;return(0,O.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[!!n&&(e.collapsible===!1?(0,O.jsx)(r,{tag:`div`,size:`xs`,type:`secondary`,weight:`medium`,className:`px-3 py-1.5 uppercase tracking-wider`,children:e.label}):(0,O.jsxs)(`button`,{type:`button`,onClick:()=>f(e.id),className:C(`flex w-full items-center justify-between px-3 py-1.5 rounded-md`,`text-xs font-medium uppercase tracking-wider text-muted-foreground`,`hover:text-foreground transition-colors`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`),"aria-expanded":!t,children:[(0,O.jsx)(`span`,{children:e.label}),(0,O.jsx)(p,{className:C(`size-3.5 transition-transform`,t&&`-rotate-90`),"aria-hidden":`true`})]})),!!a&&(0,O.jsx)(`div`,{className:`flex flex-col gap-0.5`,children:e.items.map(e=>{let t=e.icon,n=I(e.href)===c;return(0,O.jsxs)(`a`,{href:e.disabled?void 0:e.href,"aria-current":n?`page`:void 0,"aria-disabled":e.disabled||void 0,className:C(`group flex items-center gap-2.5 rounded-md px-3 py-1.5`,`text-sm transition-colors`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,`hover:bg-muted/60`,e.disabled&&`pointer-events-none opacity-50`,n&&m,i),children:[!!t&&(0,O.jsx)(t,{className:C(`size-4 shrink-0`,n?`text-primary`:`text-muted-foreground`)}),(0,O.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!!e.badge&&(0,O.jsx)(u,{variant:n?`primary`:`secondary`,className:`shrink-0`,children:e.badge})]},e.href)})})]},e.id)})})}L.displayName=`SideNav`;var R=`inline-flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`;function z({items:e,value:t,onChange:n,className:r,tabClassName:i,activeTabClassName:a,moreLabel:o=`More`,ariaLabel:s=`Tab navigation`}){let c=(0,D.useRef)(null),l=(0,D.useRef)(null),[u,d]=(0,D.useState)(e.length);(0,D.useLayoutEffect)(()=>{if(!c.current||!l.current)return;let e=c.current,t=l.current,n=()=>{let n=e.clientWidth,r=Array.from(t.querySelectorAll(`[data-tab-id]`)),i=0,a=0;for(let e of r){let t=e.offsetWidth+4;if(i+t+72<=n)i+=t,a+=1;else break}d(a===r.length?a:Math.max(1,a))};n();let r=new ResizeObserver(n);return r.observe(e),()=>r.disconnect()},[e]);let f=(0,D.useMemo)(()=>{if(!t)return e;let n=e.findIndex(e=>e.id===t);if(n<0||n<u)return e;let r=[...e],i=Math.max(0,u-1);return[r[n],r[i]]=[r[i],r[n]],r},[e,t,u]),p=f.slice(0,u),m=f.slice(u),h=e=>{n?.(e.id),e.onClick?.()},_=(e,t)=>{let n=e.icon,r=C(R,t?C(`bg-card text-foreground shadow-sm`,a):`text-muted-foreground hover:bg-muted/60`,i),o=(0,O.jsxs)(O.Fragment,{children:[!!n&&(0,O.jsx)(n,{className:`size-3.5`}),(0,O.jsx)(`span`,{children:e.label}),!!e.badge&&(0,O.jsx)(`span`,{className:C(`ml-1 inline-flex items-center rounded-full px-1.5 py-0.5 text-xxs font-semibold`,t?`bg-primary/10 text-primary`:`bg-muted-foreground/10 text-muted-foreground`),children:e.badge})]});return e.href?(0,O.jsx)(`a`,{href:e.href,"data-tab-id":e.id,"aria-current":t?`page`:void 0,onClick:()=>h(e),className:C(`overflow-tab-bar--component`,r),children:o},e.id):(0,O.jsx)(`button`,{type:`button`,"data-tab-id":e.id,"aria-pressed":t,onClick:()=>h(e),className:r,children:o},e.id)};return(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(`div`,{ref:l,"aria-hidden":`true`,className:`pointer-events-none fixed left-0 top-0 z-[-1] flex h-0 w-0 items-center gap-1 overflow-hidden opacity-0`,children:e.map(e=>_(e,!1))}),(0,O.jsxs)(`div`,{ref:c,role:`tablist`,"aria-label":s,className:C(`relative flex w-full min-w-0 max-w-full items-center gap-1 overflow-hidden rounded-lg bg-muted/40 p-1`,r),children:[p.map(e=>_(e,e.id===t)),m.length>0&&(0,O.jsxs)(fe,{children:[(0,O.jsxs)(ue,{type:`button`,"aria-label":o,className:C(R,`text-muted-foreground hover:bg-muted/60`),children:[(0,O.jsx)(g,{className:`size-3.5`}),(0,O.jsx)(`span`,{children:o})]}),(0,O.jsx)(de,{align:`end`,className:`min-w-[160px]`,children:m.map(e=>{let n=e.icon;return(0,O.jsxs)(le,{onClick:()=>h(e),className:C(`text-xs gap-1.5 px-2 py-1.5`,e.id===t&&`bg-primary/5 text-primary`),children:[!!n&&(0,O.jsx)(n,{className:`size-3.5`}),(0,O.jsx)(`span`,{children:e.label})]},e.id)})})]})]})]})}z.displayName=`OverflowTabBar`;var ge=e({ActionMenuExample:()=>U,AsideNavigationMenuExample:()=>K,BreadcrumbsSizes:()=>H,LanguageSwitcherButtons:()=>W,LanguageSwitcherInline:()=>G,NavigationTabsRound:()=>J,OverflowTabBarResponsiveWithMoreMenu:()=>X,PageHeaderExample:()=>B,SectionNavSticky:()=>V,SideNavCollapsibleGroups:()=>Y,TabNavigationMenuExample:()=>q});function B(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(P,{eyebrow:`Settings`,title:`Team & Permissions`,description:`Invite teammates, set roles, and audit recent activity.`,badge:{label:`Beta`,variant:`info`},actions:(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(c,{icon:re,children:`Invite`})})})})}function V(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(`div`,{className:`grid gap-6 md:grid-cols-[200px_1fr]`,children:[(0,O.jsx)(`aside`,{className:`md:sticky md:top-24 md:self-start`,children:(0,O.jsx)(F,{items:[{id:`nav-overview`,label:`Overview`,icon:y},{id:`nav-orders`,label:`Orders`,icon:v},{id:`nav-team`,label:`Team`,icon:S},{id:`nav-preferences`,label:`Preferences`,icon:b}]})}),(0,O.jsxs)(`div`,{className:`space-y-6`,children:[(0,O.jsxs)(`section`,{id:`nav-overview`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,O.jsx)(`strong`,{children:`Overview`}),` — section anchor target.`]}),(0,O.jsxs)(`section`,{id:`nav-orders`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,O.jsx)(`strong`,{children:`Orders`}),` — section anchor target.`]}),(0,O.jsxs)(`section`,{id:`nav-team`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,O.jsx)(`strong`,{children:`Team`}),` — section anchor target.`]}),(0,O.jsxs)(`section`,{id:`nav-preferences`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,O.jsx)(`strong`,{children:`Preferences`}),` — section anchor target.`]})]})]})})}function H(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(`div`,{className:`space-y-2`,children:[`xs`,`sm`,`md`].map(e=>(0,O.jsx)(me,{size:e,breadcrumbs:[{label:`Dashboard`,href:`#/`},{label:`Orders`,href:`#/orders`},{label:`INV-2026-0392`}]},e))})})}function U(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(E,{align:`end`,children:[(0,O.jsx)(T,{icon:ie,label:`Edit`,onClick:()=>{}}),(0,O.jsx)(T,{icon:g,label:`Duplicate`,onClick:()=>{}}),(0,O.jsx)(T,{icon:oe,label:`Delete`,variant:`error`,onClick:()=>{}})]})})}function W(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(k,{locales:[{value:`en`,label:`English`,nativeLabel:`English`,active:!0},{value:`bg`,label:`USAn`,nativeLabel:`Български`,active:!1}],onSelect:()=>{}})})}function G(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(k,{variant:`inline`,locales:[{value:`en`,label:`English`,nativeLabel:`EN`,active:!0},{value:`bg`,label:`USAn`,nativeLabel:`БГ`,active:!1},{value:`de`,label:`German`,nativeLabel:`DE`,active:!1}],onSelect:()=>{}})})}function K(){let[e]=(0,D.useState)(`/dashboard/orders`);return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(`div`,{className:`max-w-xs rounded-md border border-border bg-card p-2`,children:(0,O.jsx)(j,{currentPath:e,items:[{title:`Home`,href:`#/`,icon:y},{title:`Orders`,href:`#/dashboard/orders`,icon:v},{title:`Customers`,href:`#/customers`,icon:S},{title:`Settings`,href:`#/settings`,icon:b}]})})})}function q(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(M,{currentPath:`#/orders`,items:[{title:`Overview`,href:`#/overview`},{title:`Orders`,href:`#/orders`,badge:`12`},{title:`Invoices`,href:`#/invoices`}]})})}function J(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(N,{currentUrl:`#/orders`,items:[{url:`#/overview`,label:`Overview`,active:!1},{url:`#/orders`,label:`Orders`,active:!0},{url:`#/invoices`,label:`Invoices`,active:!1}]})})}function Y(){let[e]=(0,D.useState)(`/dashboard/orders`);return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(`div`,{className:`max-w-xs rounded-md border border-border bg-card p-3`,children:(0,O.jsx)(L,{currentPath:e,groups:[{id:`main`,label:`Main`,items:[{label:`Inbox`,href:`#/inbox`,icon:te,badge:`12`},{label:`Orders`,href:`#/dashboard/orders`,icon:v,badge:`3`},{label:`Customers`,href:`#/customers`,icon:S},{label:`Reviews`,href:`#/reviews`,icon:ae}]},{id:`admin`,label:`Admin`,items:[{label:`Permissions`,href:`#/admin/permissions`,icon:x},{label:`Reports`,href:`#/admin/reports`,icon:f},{label:`Settings`,href:`#/admin/settings`,icon:b,disabled:!0}]}]})})})}function X(){let[e,t]=(0,D.useState)(`overview`);return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(z,{value:e,onChange:t,items:[{id:`overview`,label:`Overview`,icon:y},{id:`orders`,label:`Orders`,icon:v,badge:`12`},{id:`invoices`,label:`Invoices`,icon:_},{id:`customers`,label:`Customers`,icon:S},{id:`messages`,label:`Messages`,icon:ne,badge:`4`},{id:`alerts`,label:`Alerts`,icon:d},{id:`billing`,label:`Billing`,icon:m},{id:`data`,label:`Data`,icon:h}]})})}var Z=`import { useState } from 'react';
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{$n as r,Dr as i,Er as a,Lr as o,Rr as s,jr as c,r as l,t as u}from"./example-Cz_880po.js";import{t as d}from"./bell-C80n9VRl.js";import{t as f}from"./chart-column-DKcP77Dx.js";import{t as p}from"./chevron-down-ByPPEdNm.js";import{t as m}from"./credit-card-CAI3F3HB.js";import{t as h}from"./database-oHsxHUj-.js";import{t as g}from"./ellipsis-DsrebD1Y.js";import{t as _}from"./file-text-DwqbUujq.js";import{t as v}from"./folder-open-BThTng3d.js";import{t as ee}from"./globe-BCikLfKc.js";import{t as y}from"./house-C3fXPhlL.js";import{t as te}from"./inbox-C0GJ1KEC.js";import{t as ne}from"./message-square-CBNI_sf8.js";import{t as re}from"./plus-D5swsZCz.js";import{t as b}from"./settings-DRmWJILI.js";import{t as x}from"./shield-D1EaWJMG.js";import{t as ie}from"./square-pen-ImRrVwT8.js";import{t as ae}from"./star-BaV-UTPq.js";import{t as oe}from"./trash-2-CE9bDw49.js";import{t as S}from"./users-BgXAp2UO.js";import{k as se,n as C,s as ce}from"./index-BQIv1ffM.js";import{t as w}from"./props-table-2pIZzGC-.js";import{a as le,l as ue,r as de,t as fe}from"./dropdown-menu-Cto8-yDW.js";import{t as pe}from"./separator-BsYPzBlF.js";import{t as me}from"./breadcrumbs-BUm4gHzL.js";import{n as T,t as E}from"./action-menu-CMUF6gPp.js";var D=t(n(),1),O=ce();function k({locales:e,onRenderLabel:t,variant:n=`buttons`,onSelect:r}){let i=(0,D.useCallback)((e,t)=>{t||r?.(e)},[r]);return e.length===0?null:n===`inline`?(0,O.jsxs)(`div`,{className:C(`language-switcher--component`,`flex items-center justify-center gap-2.5`),children:[(0,O.jsx)(ee,{className:`size-4 text-muted-foreground/70`,"aria-hidden":`true`}),(0,O.jsx)(`div`,{className:`flex items-center justify-center gap-2.5`,children:e.map((n,r)=>{let a=t?t(n):n.nativeLabel;return(0,O.jsxs)(D.Fragment,{children:[(0,O.jsx)(`button`,{type:`button`,onClick:()=>i(n.value,n.active),className:C(`text-xs transition-colors`,n.active?`text-primary font-medium`:`text-muted-foreground hover:text-foreground`),children:a}),r<e.length-1&&(0,O.jsx)(`span`,{"aria-hidden":`true`,className:`size-1 rounded-full bg-border`})]},n.value)})})]}):(0,O.jsx)(`div`,{className:`flex flex-wrap items-center justify-center gap-2`,children:e.map(e=>{let n=t?t(e):e.nativeLabel;return(0,O.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:e.active?`solid`:`ghost`,onClick:()=>i(e.value,e.active),className:C(`min-w-[4.5rem] justify-center transition-colors`,e.active?`font-semibold text-primary`:`text-muted-foreground`),children:n},e.value)})})}k.displayName=`LanguageSwitcher`;function A(e){if(e.length===0)return`/`;try{let t=typeof window<`u`?window.location.origin:`http://localhost`,n=new URL(e,t).pathname.replace(/\/+$/,``);return n.length>0?n:`/`}catch{let t=(e.split(`?`)[0]??e).replace(/\/+$/,``);return t.length>0?t:`/`}}function j({items:e,currentPath:t,activeClassName:n,itemClassName:i}){let a=A(t??(typeof window<`u`?window.location.pathname:``)),o=typeof n==`string`&&n.length>0?n:`bg-muted`,s=e.map(e=>({item:e,normalizedPath:A(e.href)})),c=s.filter(({normalizedPath:e})=>a===e||a.startsWith(`${e}/`)).sort((e,t)=>t.normalizedPath.length-e.normalizedPath.length)[0]?.normalizedPath??null;return(0,O.jsx)(`nav`,{className:C(`aside-navigation-menu--component`,`flex flex-col space-y-1 space-x-0`),children:s.map(({item:e,normalizedPath:t})=>(0,O.jsx)(r,{variant:`secondary`,buttonStyle:`ghost`,size:`sm`,fullWidth:!0,className:C(`justify-start`,i,t===c?o:null),nativeButton:!1,render:t=>(0,O.jsx)(`a`,{...t,href:e.href}),children:e.title},e.href))})}j.displayName=`AsideNavigationMenu`;function M({items:e,currentPath:t,className:n,ariaLabel:r=`Tab navigation`}){let i=t??(typeof window<`u`?window.location.pathname:``),a=(0,D.useMemo)(()=>e.map(e=>{let t=i===e.href,n=null;if(typeof e.icon==`string`)n=(0,O.jsx)(`span`,{className:`text-inherit`,children:e.icon});else if(e.icon){let t=e.icon;n=(0,O.jsx)(t,{className:`h-4 w-4`})}return{key:e.href,item:e,isActive:t,iconNode:n,ariaCurrent:t?`page`:void 0}}),[i,e]);return(0,O.jsx)(`div`,{className:C(`tab-navigation-menu--component`,`w-full`,n),children:(0,O.jsx)(`nav`,{className:`inline-flex bg-muted rounded-full items-center gap-1 p-1`,"aria-label":r,children:a.map(({key:e,item:t,isActive:n,iconNode:r,ariaCurrent:i})=>(0,O.jsxs)(`a`,{href:t.href,className:C(`whitespace-nowrap flex items-center gap-2`,`rounded-full px-4 py-2`,`text-sm font-medium`,`transition-all duration-200`,`focus-visible:outline-none focus-visible:ring-2`,`focus-visible:ring-ring focus-visible:ring-offset-2`,{"bg-background text-foreground shadow-sm":n,"text-muted-foreground hover:text-foreground hover:bg-background/50":!n}),"aria-current":i,children:[!!r&&(0,O.jsx)(`span`,{className:`text-inherit`,children:r}),t.title,!!t.badge&&(0,O.jsx)(`span`,{className:C(`ml-1.5 rounded-full px-2 py-0.5 text-xs font-medium`,n?`bg-primary/10 text-primary`:`bg-muted-foreground/10 text-muted-foreground`),children:t.badge})]},e))})})}M.displayName=`TabNavigationMenu`;var he={tabsAria:`Tabs`};function N({items:e,currentUrl:t,strings:n}){let r=se(he,n),i=t??(typeof window<`u`?window.location.pathname:`/`),a=e=>{try{return new URL(e,window.location.origin).pathname.replace(/\/+$/,``)}catch{return e.replace(/\/+$/,``).split(`?`)[0]}},o=a(i);return(0,O.jsx)(`div`,{className:C(`navigation-tabs--component`,`navigation-tabs-container w-full`),children:(0,O.jsx)(`nav`,{className:`inline-flex items-center gap-1 rounded-lg bg-muted/60 p-1`,"aria-label":r.tabsAria,children:e.map(e=>{let t=o===a(e.url);return(0,O.jsx)(`a`,{href:e.url,className:C(`whitespace-nowrap flex items-center gap-1 leading-tight rounded-md border border-transparent px-3 py-1.5 text-sm bg-background text-foreground hover:text-background hover:bg-primary transition-all duration-150`,{"!bg-primary !text-background font-semibold":t}),children:e.label},e.url)})})})}N.displayName=`NavigationTabs`;function P({eyebrow:e,title:t,description:n,badge:r,breadcrumbs:i,actions:a,children:l,className:u,withSeparator:d=!0}){return(0,O.jsxs)(`header`,{className:C(`page-header--component`,`w-full`,u),children:[!!i&&(0,O.jsx)(`div`,{className:`mb-3`,children:i}),(0,O.jsxs)(`div`,{className:`flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between`,children:[(0,O.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[!!e&&(0,O.jsx)(s,{size:`xxs`,type:`secondary`,weight:`semibold`,className:`mb-1 uppercase tracking-wider`,children:e}),(0,O.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,O.jsx)(o,{tag:`h2`,className:`text-2xl border-0 pb-0`,children:t}),!!r&&(0,O.jsx)(c,{variant:r.variant??`secondary`,children:r.label})]}),!!n&&(0,O.jsx)(s,{type:`secondary`,className:`mt-1 max-w-2xl`,children:n})]}),!!a&&(0,O.jsx)(`div`,{className:`flex shrink-0 items-center gap-2`,children:a})]}),!!l&&(0,O.jsx)(`div`,{className:`mt-4`,children:l}),!!d&&(0,O.jsx)(pe,{className:`mt-4`})]})}P.displayName=`PageHeader`;function F({items:e,rootMargin:t=`-40% 0px -50% 0px`,className:n,onSelect:r}){let[i,a]=(0,D.useState)(e[0]?.id??null);return(0,D.useEffect)(()=>{let n=new IntersectionObserver(e=>{let t=e.find(e=>e.isIntersecting);t?.target.id&&a(t.target.id)},{rootMargin:t,threshold:0});return e.forEach(e=>{let t=document.getElementById(e.id);t&&n.observe(t)}),()=>n.disconnect()},[e,t]),(0,O.jsx)(`nav`,{className:C(`section-nav--component`,`flex flex-col gap-0.5`,n),"aria-label":`Section navigation`,children:e.map(e=>{let t=e.icon,n=i===e.id;return(0,O.jsxs)(`a`,{href:`#${e.id}`,onClick:t=>{t.preventDefault(),document.getElementById(e.id)?.scrollIntoView({behavior:`smooth`,block:`start`}),a(e.id),r?.(e.id)},className:C(`flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors`,n?`bg-primary/10 text-primary`:`text-muted-foreground hover:bg-muted/50 hover:text-foreground`),children:[!!t&&(0,O.jsx)(t,{className:`size-3.5 shrink-0`}),(0,O.jsx)(s,{tag:`span`,weight:n?`semibold`:`medium`,children:e.label})]},e.id)})})}F.displayName=`SectionNav`;function I(e){if(e.length===0)return`/`;try{let t=typeof window<`u`?window.location.origin:`http://localhost`,n=new URL(e,t).pathname.replace(/\/+$/,``);return n.length>0?n:`/`}catch{let t=(e.split(`?`)[0]??e).replace(/\/+$/,``);return t.length>0?t:`/`}}function L({groups:e,currentPath:t,className:n,itemClassName:r,activeItemClassName:i,ariaLabel:a=`Side navigation`}){let o=I(t??(typeof window<`u`?window.location.pathname:``)),l=(0,D.useMemo)(()=>e.flatMap(e=>e.items.map(t=>({groupId:e.id,normalizedPath:I(t.href)}))),[e]).filter(({normalizedPath:e})=>o===e||o.startsWith(`${e}/`)).sort((e,t)=>t.normalizedPath.length-e.normalizedPath.length)[0]?.normalizedPath??null,[u,d]=(0,D.useState)(()=>Object.fromEntries(e.map(e=>[e.id,!!e.defaultCollapsed]))),f=e=>d(t=>({...t,[e]:!t[e]})),m=i&&i.length>0?i:`bg-primary/5 text-primary`;return(0,O.jsx)(`nav`,{className:C(`side-nav--component`,`flex flex-col gap-4`,n),"aria-label":a,children:e.map(e=>{let t=e.collapsible!==!1&&u[e.id],n=!!e.label,i=!t;return(0,O.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[!!n&&(e.collapsible===!1?(0,O.jsx)(s,{tag:`div`,size:`xs`,type:`secondary`,weight:`medium`,className:`px-3 py-1.5 uppercase tracking-wider`,children:e.label}):(0,O.jsxs)(`button`,{type:`button`,onClick:()=>f(e.id),className:C(`flex w-full items-center justify-between px-3 py-1.5 rounded-md`,`text-xs font-medium uppercase tracking-wider text-muted-foreground`,`hover:text-foreground transition-colors`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`),"aria-expanded":!t,children:[(0,O.jsx)(`span`,{children:e.label}),(0,O.jsx)(p,{className:C(`size-3.5 transition-transform`,t&&`-rotate-90`),"aria-hidden":`true`})]})),!!i&&(0,O.jsx)(`div`,{className:`flex flex-col gap-0.5`,children:e.items.map(e=>{let t=e.icon,n=I(e.href)===l;return(0,O.jsxs)(`a`,{href:e.disabled?void 0:e.href,"aria-current":n?`page`:void 0,"aria-disabled":e.disabled||void 0,className:C(`group flex items-center gap-2.5 rounded-md px-3 py-1.5`,`text-sm transition-colors`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,`hover:bg-muted/60`,e.disabled&&`pointer-events-none opacity-50`,n&&m,r),children:[!!t&&(0,O.jsx)(t,{className:C(`size-4 shrink-0`,n?`text-primary`:`text-muted-foreground`)}),(0,O.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!!e.badge&&(0,O.jsx)(c,{variant:n?`primary`:`secondary`,className:`shrink-0`,children:e.badge})]},e.href)})})]},e.id)})})}L.displayName=`SideNav`;var R=`inline-flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`;function z({items:e,value:t,onChange:n,className:r,tabClassName:i,activeTabClassName:a,moreLabel:o=`More`,ariaLabel:s=`Tab navigation`}){let c=(0,D.useRef)(null),l=(0,D.useRef)(null),[u,d]=(0,D.useState)(e.length);(0,D.useLayoutEffect)(()=>{if(!c.current||!l.current)return;let e=c.current,t=l.current,n=()=>{let n=e.clientWidth,r=Array.from(t.querySelectorAll(`[data-tab-id]`)),i=0,a=0;for(let e of r){let t=e.offsetWidth+4;if(i+t+72<=n)i+=t,a+=1;else break}d(a===r.length?a:Math.max(1,a))};n();let r=new ResizeObserver(n);return r.observe(e),()=>r.disconnect()},[e]);let f=(0,D.useMemo)(()=>{if(!t)return e;let n=e.findIndex(e=>e.id===t);if(n<0||n<u)return e;let r=[...e],i=Math.max(0,u-1);return[r[n],r[i]]=[r[i],r[n]],r},[e,t,u]),p=f.slice(0,u),m=f.slice(u),h=e=>{n?.(e.id),e.onClick?.()},_=(e,t)=>{let n=e.icon,r=C(R,t?C(`bg-card text-foreground shadow-sm`,a):`text-muted-foreground hover:bg-muted/60`,i),o=(0,O.jsxs)(O.Fragment,{children:[!!n&&(0,O.jsx)(n,{className:`size-3.5`}),(0,O.jsx)(`span`,{children:e.label}),!!e.badge&&(0,O.jsx)(`span`,{className:C(`ml-1 inline-flex items-center rounded-full px-1.5 py-0.5 text-xxs font-semibold`,t?`bg-primary/10 text-primary`:`bg-muted-foreground/10 text-muted-foreground`),children:e.badge})]});return e.href?(0,O.jsx)(`a`,{href:e.href,"data-tab-id":e.id,"aria-current":t?`page`:void 0,onClick:()=>h(e),className:C(`overflow-tab-bar--component`,r),children:o},e.id):(0,O.jsx)(`button`,{type:`button`,"data-tab-id":e.id,"aria-pressed":t,onClick:()=>h(e),className:r,children:o},e.id)};return(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(`div`,{ref:l,"aria-hidden":`true`,className:`pointer-events-none fixed left-0 top-0 z-[-1] flex h-0 w-0 items-center gap-1 overflow-hidden opacity-0`,children:e.map(e=>_(e,!1))}),(0,O.jsxs)(`div`,{ref:c,role:`tablist`,"aria-label":s,className:C(`relative flex w-full min-w-0 max-w-full items-center gap-1 overflow-hidden rounded-lg bg-muted/40 p-1`,r),children:[p.map(e=>_(e,e.id===t)),m.length>0&&(0,O.jsxs)(fe,{children:[(0,O.jsxs)(ue,{type:`button`,"aria-label":o,className:C(R,`text-muted-foreground hover:bg-muted/60`),children:[(0,O.jsx)(g,{className:`size-3.5`}),(0,O.jsx)(`span`,{children:o})]}),(0,O.jsx)(de,{align:`end`,className:`min-w-[160px]`,children:m.map(e=>{let n=e.icon;return(0,O.jsxs)(le,{onClick:()=>h(e),className:C(`text-xs gap-1.5 px-2 py-1.5`,e.id===t&&`bg-primary/5 text-primary`),children:[!!n&&(0,O.jsx)(n,{className:`size-3.5`}),(0,O.jsx)(`span`,{children:e.label})]},e.id)})})]})]})]})}z.displayName=`OverflowTabBar`;var ge=e({ActionMenuExample:()=>U,AsideNavigationMenuExample:()=>K,BreadcrumbsSizes:()=>H,LanguageSwitcherButtons:()=>W,LanguageSwitcherInline:()=>G,NavigationTabsRound:()=>J,OverflowTabBarResponsiveWithMoreMenu:()=>X,PageHeaderExample:()=>B,SectionNavSticky:()=>V,SideNavCollapsibleGroups:()=>Y,TabNavigationMenuExample:()=>q});function B(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(P,{eyebrow:`Settings`,title:`Team & Permissions`,description:`Invite teammates, set roles, and audit recent activity.`,badge:{label:`Beta`,variant:`info`},actions:(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(l,{icon:re,children:`Invite`})})})})}function V(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(`div`,{className:`grid gap-6 md:grid-cols-[200px_1fr]`,children:[(0,O.jsx)(`aside`,{className:`md:sticky md:top-24 md:self-start`,children:(0,O.jsx)(F,{items:[{id:`nav-overview`,label:`Overview`,icon:y},{id:`nav-orders`,label:`Orders`,icon:v},{id:`nav-team`,label:`Team`,icon:S},{id:`nav-preferences`,label:`Preferences`,icon:b}]})}),(0,O.jsxs)(`div`,{className:`space-y-6`,children:[(0,O.jsxs)(`section`,{id:`nav-overview`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,O.jsx)(`strong`,{children:`Overview`}),` — section anchor target.`]}),(0,O.jsxs)(`section`,{id:`nav-orders`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,O.jsx)(`strong`,{children:`Orders`}),` — section anchor target.`]}),(0,O.jsxs)(`section`,{id:`nav-team`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,O.jsx)(`strong`,{children:`Team`}),` — section anchor target.`]}),(0,O.jsxs)(`section`,{id:`nav-preferences`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,O.jsx)(`strong`,{children:`Preferences`}),` — section anchor target.`]})]})]})})}function H(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(`div`,{className:`space-y-2`,children:[`xs`,`sm`,`md`].map(e=>(0,O.jsx)(me,{size:e,breadcrumbs:[{label:`Dashboard`,href:`#/`},{label:`Orders`,href:`#/orders`},{label:`INV-2026-0392`}]},e))})})}function U(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(E,{align:`end`,children:[(0,O.jsx)(T,{icon:ie,label:`Edit`,onClick:()=>{}}),(0,O.jsx)(T,{icon:g,label:`Duplicate`,onClick:()=>{}}),(0,O.jsx)(T,{icon:oe,label:`Delete`,variant:`error`,onClick:()=>{}})]})})}function W(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(k,{locales:[{value:`en`,label:`English`,nativeLabel:`English`,active:!0},{value:`bg`,label:`USAn`,nativeLabel:`Български`,active:!1}],onSelect:()=>{}})})}function G(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(k,{variant:`inline`,locales:[{value:`en`,label:`English`,nativeLabel:`EN`,active:!0},{value:`bg`,label:`USAn`,nativeLabel:`БГ`,active:!1},{value:`de`,label:`German`,nativeLabel:`DE`,active:!1}],onSelect:()=>{}})})}function K(){let[e]=(0,D.useState)(`/dashboard/orders`);return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(`div`,{className:`max-w-xs rounded-md border border-border bg-card p-2`,children:(0,O.jsx)(j,{currentPath:e,items:[{title:`Home`,href:`#/`,icon:y},{title:`Orders`,href:`#/dashboard/orders`,icon:v},{title:`Customers`,href:`#/customers`,icon:S},{title:`Settings`,href:`#/settings`,icon:b}]})})})}function q(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(M,{currentPath:`#/orders`,items:[{title:`Overview`,href:`#/overview`},{title:`Orders`,href:`#/orders`,badge:`12`},{title:`Invoices`,href:`#/invoices`}]})})}function J(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(N,{currentUrl:`#/orders`,items:[{url:`#/overview`,label:`Overview`,active:!1},{url:`#/orders`,label:`Orders`,active:!0},{url:`#/invoices`,label:`Invoices`,active:!1}]})})}function Y(){let[e]=(0,D.useState)(`/dashboard/orders`);return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(`div`,{className:`max-w-xs rounded-md border border-border bg-card p-3`,children:(0,O.jsx)(L,{currentPath:e,groups:[{id:`main`,label:`Main`,items:[{label:`Inbox`,href:`#/inbox`,icon:te,badge:`12`},{label:`Orders`,href:`#/dashboard/orders`,icon:v,badge:`3`},{label:`Customers`,href:`#/customers`,icon:S},{label:`Reviews`,href:`#/reviews`,icon:ae}]},{id:`admin`,label:`Admin`,items:[{label:`Permissions`,href:`#/admin/permissions`,icon:x},{label:`Reports`,href:`#/admin/reports`,icon:f},{label:`Settings`,href:`#/admin/settings`,icon:b,disabled:!0}]}]})})})}function X(){let[e,t]=(0,D.useState)(`overview`);return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(z,{value:e,onChange:t,items:[{id:`overview`,label:`Overview`,icon:y},{id:`orders`,label:`Orders`,icon:v,badge:`12`},{id:`invoices`,label:`Invoices`,icon:_},{id:`customers`,label:`Customers`,icon:S},{id:`messages`,label:`Messages`,icon:ne,badge:`4`},{id:`alerts`,label:`Alerts`,icon:d},{id:`billing`,label:`Billing`,icon:m},{id:`data`,label:`Data`,icon:h}]})})}var Z=`import { useState } from 'react';
 import {
 	Home, FolderOpen, Settings, Users, Edit, Trash2, MoreHorizontal, Plus,
 	Inbox, Star, Shield, BarChart3, MessageSquare, Bell, CreditCard, Database, FileText,
@@ -224,7 +224,7 @@ export function OverflowTabBarResponsiveWithMoreMenu() {
 		</>
 	);
 }
-`;function Q(e){let t={code:`code`,p:`p`,...e.components};return ge||$(`Examples`,!1),U||$(`Examples.ActionMenuExample`,!0),K||$(`Examples.AsideNavigationMenuExample`,!0),H||$(`Examples.BreadcrumbsSizes`,!0),W||$(`Examples.LanguageSwitcherButtons`,!0),G||$(`Examples.LanguageSwitcherInline`,!0),J||$(`Examples.NavigationTabsRound`,!0),X||$(`Examples.OverflowTabBarResponsiveWithMoreMenu`,!0),B||$(`Examples.PageHeaderExample`,!0),V||$(`Examples.SectionNavSticky`,!0),Y||$(`Examples.SideNavCollapsibleGroups`,!0),q||$(`Examples.TabNavigationMenuExample`,!0),(0,O.jsxs)(o,{title:`Navigation`,description:`The navigation primitives — PageHeader, Breadcrumbs, ActionMenu, LanguageSwitcher, SectionNav, SideNav, AsideNavigationMenu, TabNavigationMenu, NavigationTabs, OverflowTabBar.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/navigation`,children:[(0,O.jsx)(s,{title:`Overview`,id:`overview`,children:(0,O.jsxs)(t.p,{children:[`The `,(0,O.jsx)(t.code,{children:`navigation/`}),` folder bundles every cross-cutting nav surface — page
+`;function Q(e){let t={code:`code`,p:`p`,...e.components};return ge||$(`Examples`,!1),U||$(`Examples.ActionMenuExample`,!0),K||$(`Examples.AsideNavigationMenuExample`,!0),H||$(`Examples.BreadcrumbsSizes`,!0),W||$(`Examples.LanguageSwitcherButtons`,!0),G||$(`Examples.LanguageSwitcherInline`,!0),J||$(`Examples.NavigationTabsRound`,!0),X||$(`Examples.OverflowTabBarResponsiveWithMoreMenu`,!0),B||$(`Examples.PageHeaderExample`,!0),V||$(`Examples.SectionNavSticky`,!0),Y||$(`Examples.SideNavCollapsibleGroups`,!0),q||$(`Examples.TabNavigationMenuExample`,!0),(0,O.jsxs)(i,{title:`Navigation`,description:`The navigation primitives — PageHeader, Breadcrumbs, ActionMenu, LanguageSwitcher, SectionNav, SideNav, AsideNavigationMenu, TabNavigationMenu, NavigationTabs, OverflowTabBar.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/navigation`,children:[(0,O.jsx)(a,{title:`Overview`,id:`overview`,children:(0,O.jsxs)(t.p,{children:[`The `,(0,O.jsx)(t.code,{children:`navigation/`}),` folder bundles every cross-cutting nav surface — page
 headers, breadcrumb trails, side rails, tab bars, action menus, and the
 language switcher. All components are framework-agnostic — pass `,(0,O.jsx)(t.code,{children:`href`}),`s and
-let the consumer wire routing.`]})}),(0,O.jsx)(s,{title:`Page header`,id:`page-header`,children:(0,O.jsx)(l,{name:`PageHeaderExample`,source:Z,children:(0,O.jsx)(B,{})})}),(0,O.jsx)(s,{title:`Breadcrumbs`,id:`breadcrumbs`,children:(0,O.jsx)(l,{name:`BreadcrumbsSizes`,source:Z,children:(0,O.jsx)(H,{})})}),(0,O.jsxs)(s,{title:`Tabs`,id:`tabs`,children:[(0,O.jsx)(l,{name:`TabNavigationMenuExample`,source:Z,children:(0,O.jsx)(q,{})}),(0,O.jsx)(l,{name:`NavigationTabsRound`,source:Z,children:(0,O.jsx)(J,{})}),(0,O.jsx)(l,{name:`OverflowTabBarResponsiveWithMoreMenu`,source:Z,children:(0,O.jsx)(X,{})})]}),(0,O.jsxs)(s,{title:`Side nav & section nav`,id:`side-nav`,children:[(0,O.jsx)(l,{name:`AsideNavigationMenuExample`,source:Z,children:(0,O.jsx)(K,{})}),(0,O.jsx)(l,{name:`SideNavCollapsibleGroups`,source:Z,children:(0,O.jsx)(Y,{})}),(0,O.jsx)(l,{name:`SectionNavSticky`,source:Z,children:(0,O.jsx)(V,{})})]}),(0,O.jsx)(s,{title:`Action menu`,id:`action-menu`,children:(0,O.jsx)(l,{name:`ActionMenuExample`,source:Z,children:(0,O.jsx)(U,{})})}),(0,O.jsxs)(s,{title:`Language switcher`,id:`language-switcher`,children:[(0,O.jsx)(l,{name:`LanguageSwitcherButtons`,source:Z,children:(0,O.jsx)(W,{})}),(0,O.jsx)(l,{name:`LanguageSwitcherInline`,source:Z,children:(0,O.jsx)(G,{})})]}),(0,O.jsxs)(s,{title:`API`,id:`api`,children:[(0,O.jsx)(w,{component:`PageHeader`}),(0,O.jsx)(w,{component:`Breadcrumbs`}),(0,O.jsx)(w,{component:`ActionMenu`}),(0,O.jsx)(w,{component:`SectionNav`}),(0,O.jsx)(w,{component:`SideNav`}),(0,O.jsx)(w,{component:`OverflowTabBar`}),(0,O.jsx)(w,{component:`LanguageSwitcher`})]})]})}function _e(e={}){let{wrapper:t}=e.components||{};return t?(0,O.jsx)(t,{...e,children:(0,O.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{_e as default};
+let the consumer wire routing.`]})}),(0,O.jsx)(a,{title:`Page header`,id:`page-header`,children:(0,O.jsx)(u,{name:`PageHeaderExample`,source:Z,children:(0,O.jsx)(B,{})})}),(0,O.jsx)(a,{title:`Breadcrumbs`,id:`breadcrumbs`,children:(0,O.jsx)(u,{name:`BreadcrumbsSizes`,source:Z,children:(0,O.jsx)(H,{})})}),(0,O.jsxs)(a,{title:`Tabs`,id:`tabs`,children:[(0,O.jsx)(u,{name:`TabNavigationMenuExample`,source:Z,children:(0,O.jsx)(q,{})}),(0,O.jsx)(u,{name:`NavigationTabsRound`,source:Z,children:(0,O.jsx)(J,{})}),(0,O.jsx)(u,{name:`OverflowTabBarResponsiveWithMoreMenu`,source:Z,children:(0,O.jsx)(X,{})})]}),(0,O.jsxs)(a,{title:`Side nav & section nav`,id:`side-nav`,children:[(0,O.jsx)(u,{name:`AsideNavigationMenuExample`,source:Z,children:(0,O.jsx)(K,{})}),(0,O.jsx)(u,{name:`SideNavCollapsibleGroups`,source:Z,children:(0,O.jsx)(Y,{})}),(0,O.jsx)(u,{name:`SectionNavSticky`,source:Z,children:(0,O.jsx)(V,{})})]}),(0,O.jsx)(a,{title:`Action menu`,id:`action-menu`,children:(0,O.jsx)(u,{name:`ActionMenuExample`,source:Z,children:(0,O.jsx)(U,{})})}),(0,O.jsxs)(a,{title:`Language switcher`,id:`language-switcher`,children:[(0,O.jsx)(u,{name:`LanguageSwitcherButtons`,source:Z,children:(0,O.jsx)(W,{})}),(0,O.jsx)(u,{name:`LanguageSwitcherInline`,source:Z,children:(0,O.jsx)(G,{})})]}),(0,O.jsxs)(a,{title:`API`,id:`api`,children:[(0,O.jsx)(w,{component:`PageHeader`}),(0,O.jsx)(w,{component:`Breadcrumbs`}),(0,O.jsx)(w,{component:`ActionMenu`}),(0,O.jsx)(w,{component:`SectionNav`}),(0,O.jsx)(w,{component:`SideNav`}),(0,O.jsx)(w,{component:`OverflowTabBar`}),(0,O.jsx)(w,{component:`LanguageSwitcher`})]})]})}function _e(e={}){let{wrapper:t}=e.components||{};return t?(0,O.jsx)(t,{...e,children:(0,O.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{_e as default};

package/dist/showcase/assets/{navigation-extras-DKufT82I.js → navigation-extras-CflOar2P.js}

@@ -1,4 +1,4 @@
-import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,hr as i,jr as a,mr as o,r as s,t as c,yr as l}from"./example-BIrQab7K.js";import{t as u}from"./chevron-right-d-umkBru.js";import{t as d}from"./heart-BWZYF4xJ.js";import{t as f}from"./inbox-D4UE_W9O.js";import{t as p}from"./shopping-bag-B5BzpLV5.js";import{t as m}from"./sparkles-DFJmoAFP.js";import{t as h}from"./users-ERTaffcv.js";import{k as g,n as _,s as v}from"./index-Cz4UGUT2.js";import{t as y}from"./props-table-BR-KjRNe.js";import{t as b}from"./smart-card-B4P_C0nk.js";import{c as x,i as S,n as C,o as w,r as T,t as E,u as D}from"./item-CbiuwbAN.js";var O={stepLabel:`Step`,ofLabel:`of`},k=v();function A({steps:e,currentIndex:t,onStepClick:n,className:i,strings:o}){let c=g(O,o);return(0,k.jsxs)(`div`,{className:_(`breadcrumb-progress--component`,`w-full`,i),children:[(0,k.jsxs)(`div`,{className:`flex items-center justify-between mb-2`,children:[(0,k.jsxs)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:[c.stepLabel,` `,t+1,` `,c.ofLabel,` `,e.length]}),(0,k.jsxs)(r,{tag:`span`,size:`xs`,weight:`semibold`,className:`tabular-nums`,children:[Math.round((t+1)/e.length*100),`%`]})]}),(0,k.jsx)(`ol`,{className:`flex items-center gap-2`,children:e.map((i,o)=>{let c=o<t,l=o===t,u=n&&(c||l);return(0,k.jsxs)(`li`,{className:`flex min-w-0 flex-1 items-center gap-2`,children:[(0,k.jsxs)(s,{type:`button`,onClick:()=>u&&n?.(i.id,o),disabled:!u,variant:`secondary`,buttonStyle:`ghost`,size:`sm`,className:_(`h-auto min-w-0 justify-start gap-2 rounded-md px-2 py-1 text-left transition-colors`,u&&`hover:bg-muted/40`,!u&&`cursor-default`),children:[(0,k.jsx)(`span`,{className:_(`flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold tabular-nums`,c&&`bg-success text-success-foreground`,l&&`bg-primary text-primary-foreground ring-4 ring-primary/15`,!c&&!l&&`bg-muted text-muted-foreground`),children:c?(0,k.jsx)(a,{className:`size-3.5`}):o+1}),(0,k.jsxs)(`div`,{className:`hidden min-w-0 lg:block`,children:[(0,k.jsx)(r,{size:`xs`,weight:`semibold`,className:_(!l&&!c&&`text-muted-foreground`),children:i.label}),!!i.hint&&(0,k.jsx)(r,{size:`xxs`,type:`discrete`,className:`truncate`,children:i.hint})]})]}),o<e.length-1&&(0,k.jsx)(`div`,{className:_(`h-px flex-1`,c?`bg-success`:`bg-border`)})]},i.id)})})]})}A.displayName=`BreadcrumbProgress`;function j({title:e,items:t,activeId:n,onSelect:r,className:i}){return(0,k.jsx)(b,{title:e,padding:`sm`,className:_(`category-nav--component`,i),children:(0,k.jsx)(w,{children:t.map(e=>{let t=e.icon,i=e.id===n;return(0,k.jsxs)(E,{size:`xs`,onClick:()=>r?.(e.id),"data-state":i?`active`:`inactive`,className:_(`cursor-pointer transition-colors`,i?`bg-primary/10 text-primary`:`hover:bg-muted/50`),children:[!!t&&(0,k.jsx)(x,{variant:`icon`,className:_(i?`text-primary`:`text-muted-foreground`),children:(0,k.jsx)(t,{})}),(0,k.jsxs)(T,{children:[(0,k.jsx)(D,{bold:i,children:e.label}),!!e.hint&&(0,k.jsx)(S,{clamp:1,children:e.hint})]}),(0,k.jsxs)(C,{children:[typeof e.count==`number`&&(0,k.jsx)(l,{variant:i?`primary`:`secondary`,className:`tabular-nums`,children:e.count}),(0,k.jsx)(u,{className:_(`size-4 shrink-0 text-muted-foreground/60`,i&&`text-primary`)})]})]},e.id)})})})}j.displayName=`CategoryNavCard`;var M=e({BreadcrumbProgressExample:()=>P,CategoryNavCardExample:()=>F}),N=t(n(),1);function P(){let[e,t]=(0,N.useState)(2);return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(A,{steps:[{id:`cart`,label:`Cart`,hint:`Review items`},{id:`shipping`,label:`Shipping`,hint:`Address`},{id:`payment`,label:`Payment`,hint:`Card / wallet`},{id:`review`,label:`Review`,hint:`Confirm order`},{id:`done`,label:`Done`,hint:`Receipt`}],currentIndex:e,onStepClick:(e,n)=>t(n)})})}function F(){let[e,t]=(0,N.useState)(`orders`);return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(j,{title:`Inbox`,activeId:e,onSelect:t,items:[{id:`all`,label:`All`,icon:f,count:142},{id:`orders`,label:`Orders`,icon:p,count:24,hint:`Pending review`},{id:`reviews`,label:`Reviews`,icon:d,count:8},{id:`team`,label:`Team`,icon:h,count:3},{id:`ai`,label:`AI suggestions`,icon:m,hint:`Auto-generated`}]})})}var I=`import { useState } from 'react';
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,Ur as o,jr as s,r as c,t as l}from"./example-Cz_880po.js";import{t as u}from"./chevron-right-D4pIMCh9.js";import{t as d}from"./heart-BJVBFZ-j.js";import{t as f}from"./inbox-C0GJ1KEC.js";import{t as p}from"./shopping-bag-XmeqUqk9.js";import{t as m}from"./sparkles-N8rqKQez.js";import{t as h}from"./users-BgXAp2UO.js";import{k as g,n as _,s as v}from"./index-BQIv1ffM.js";import{t as y}from"./props-table-2pIZzGC-.js";import{t as b}from"./smart-card-Dhu_1A_u.js";import{c as x,i as S,n as C,o as w,r as T,t as E,u as D}from"./item-YF6wMI9W.js";var O={stepLabel:`Step`,ofLabel:`of`},k=v();function A({steps:e,currentIndex:t,onStepClick:n,className:r,strings:i}){let s=g(O,i);return(0,k.jsxs)(`div`,{className:_(`breadcrumb-progress--component`,`w-full`,r),children:[(0,k.jsxs)(`div`,{className:`flex items-center justify-between mb-2`,children:[(0,k.jsxs)(a,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:[s.stepLabel,` `,t+1,` `,s.ofLabel,` `,e.length]}),(0,k.jsxs)(a,{tag:`span`,size:`xs`,weight:`semibold`,className:`tabular-nums`,children:[Math.round((t+1)/e.length*100),`%`]})]}),(0,k.jsx)(`ol`,{className:`flex items-center gap-2`,children:e.map((r,i)=>{let s=i<t,l=i===t,u=n&&(s||l);return(0,k.jsxs)(`li`,{className:`flex min-w-0 flex-1 items-center gap-2`,children:[(0,k.jsxs)(c,{type:`button`,onClick:()=>u&&n?.(r.id,i),disabled:!u,variant:`secondary`,buttonStyle:`ghost`,size:`sm`,className:_(`h-auto min-w-0 justify-start gap-2 rounded-md px-2 py-1 text-left transition-colors`,u&&`hover:bg-muted/40`,!u&&`cursor-default`),children:[(0,k.jsx)(`span`,{className:_(`flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold tabular-nums`,s&&`bg-success text-success-foreground`,l&&`bg-primary text-primary-foreground ring-4 ring-primary/15`,!s&&!l&&`bg-muted text-muted-foreground`),children:s?(0,k.jsx)(o,{className:`size-3.5`}):i+1}),(0,k.jsxs)(`div`,{className:`hidden min-w-0 lg:block`,children:[(0,k.jsx)(a,{size:`xs`,weight:`semibold`,className:_(!l&&!s&&`text-muted-foreground`),children:r.label}),!!r.hint&&(0,k.jsx)(a,{size:`xxs`,type:`discrete`,className:`truncate`,children:r.hint})]})]}),i<e.length-1&&(0,k.jsx)(`div`,{className:_(`h-px flex-1`,s?`bg-success`:`bg-border`)})]},r.id)})})]})}A.displayName=`BreadcrumbProgress`;function j({title:e,items:t,activeId:n,onSelect:r,className:i}){return(0,k.jsx)(b,{title:e,padding:`sm`,className:_(`category-nav--component`,i),children:(0,k.jsx)(w,{children:t.map(e=>{let t=e.icon,i=e.id===n;return(0,k.jsxs)(E,{size:`xs`,onClick:()=>r?.(e.id),"data-state":i?`active`:`inactive`,className:_(`cursor-pointer transition-colors`,i?`bg-primary/10 text-primary`:`hover:bg-muted/50`),children:[!!t&&(0,k.jsx)(x,{variant:`icon`,className:_(i?`text-primary`:`text-muted-foreground`),children:(0,k.jsx)(t,{})}),(0,k.jsxs)(T,{children:[(0,k.jsx)(D,{bold:i,children:e.label}),!!e.hint&&(0,k.jsx)(S,{clamp:1,children:e.hint})]}),(0,k.jsxs)(C,{children:[typeof e.count==`number`&&(0,k.jsx)(s,{variant:i?`primary`:`secondary`,className:`tabular-nums`,children:e.count}),(0,k.jsx)(u,{className:_(`size-4 shrink-0 text-muted-foreground/60`,i&&`text-primary`)})]})]},e.id)})})})}j.displayName=`CategoryNavCard`;var M=e({BreadcrumbProgressExample:()=>P,CategoryNavCardExample:()=>F}),N=t(n(),1);function P(){let[e,t]=(0,N.useState)(2);return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(A,{steps:[{id:`cart`,label:`Cart`,hint:`Review items`},{id:`shipping`,label:`Shipping`,hint:`Address`},{id:`payment`,label:`Payment`,hint:`Card / wallet`},{id:`review`,label:`Review`,hint:`Confirm order`},{id:`done`,label:`Done`,hint:`Receipt`}],currentIndex:e,onStepClick:(e,n)=>t(n)})})}function F(){let[e,t]=(0,N.useState)(`orders`);return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(j,{title:`Inbox`,activeId:e,onSelect:t,items:[{id:`all`,label:`All`,icon:f,count:142},{id:`orders`,label:`Orders`,icon:p,count:24,hint:`Pending review`},{id:`reviews`,label:`Reviews`,icon:d,count:8},{id:`team`,label:`Team`,icon:h,count:3},{id:`ai`,label:`AI suggestions`,icon:m,hint:`Auto-generated`}]})})}var I=`import { useState } from 'react';
 import { Inbox, Heart, ShoppingBag, Sparkles, Users } from 'lucide-react';
 import { BreadcrumbProgress, CategoryNavCard } from '@/components/composed/navigation';
 
@@ -40,4 +40,4 @@ export function CategoryNavCardExample() {
 		</>
 	);
 }
-`;function L(e){let t={h4:`h4`,...e.components};return M||z(`Examples`,!1),P||z(`Examples.BreadcrumbProgressExample`,!0),F||z(`Examples.CategoryNavCardExample`,!0),(0,k.jsxs)(i,{title:`Composed · Navigation (extras)`,description:`BreadcrumbProgress wizard + CategoryNavCard sidebar.`,layer:`composed`,status:`ready`,children:[(0,k.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,k.jsx)(c,{name:`BreadcrumbProgressExample`,source:I,children:(0,k.jsx)(P,{})}),(0,k.jsx)(c,{name:`CategoryNavCardExample`,source:I,children:(0,k.jsx)(F,{})})]}),(0,k.jsxs)(o,{title:`API`,id:`api`,children:[(0,k.jsx)(t.h4,{children:`BreadcrumbProgress`}),(0,k.jsx)(y,{component:`BreadcrumbProgress`}),(0,k.jsx)(t.h4,{children:`CategoryNavCard`}),(0,k.jsx)(y,{component:`CategoryNavCard`})]})]})}function R(e={}){let{wrapper:t}=e.components||{};return t?(0,k.jsx)(t,{...e,children:(0,k.jsx)(L,{...e})}):L(e)}function z(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{R as default};
+`;function L(e){let t={h4:`h4`,...e.components};return M||z(`Examples`,!1),P||z(`Examples.BreadcrumbProgressExample`,!0),F||z(`Examples.CategoryNavCardExample`,!0),(0,k.jsxs)(r,{title:`Composed · Navigation (extras)`,description:`BreadcrumbProgress wizard + CategoryNavCard sidebar.`,layer:`composed`,status:`ready`,children:[(0,k.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,k.jsx)(l,{name:`BreadcrumbProgressExample`,source:I,children:(0,k.jsx)(P,{})}),(0,k.jsx)(l,{name:`CategoryNavCardExample`,source:I,children:(0,k.jsx)(F,{})})]}),(0,k.jsxs)(i,{title:`API`,id:`api`,children:[(0,k.jsx)(t.h4,{children:`BreadcrumbProgress`}),(0,k.jsx)(y,{component:`BreadcrumbProgress`}),(0,k.jsx)(t.h4,{children:`CategoryNavCard`}),(0,k.jsx)(y,{component:`CategoryNavCard`})]})]})}function R(e={}){let{wrapper:t}=e.components||{};return t?(0,k.jsx)(t,{...e,children:(0,k.jsx)(L,{...e})}):L(e)}function z(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{R as default};

package/dist/showcase/assets/{onboarding-checklist-DSkS2ktA.js → onboarding-checklist-CYiciKwv.js}

@@ -1,4 +1,4 @@
-import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,Tr as i,hr as a,mr as o,r as s,t as c,yr as l}from"./example-BIrQab7K.js";import{t as u}from"./circle-check-TT7cFQrr.js";import{a as d,k as f,n as p,s as m}from"./index-Cz4UGUT2.js";import{t as h}from"./props-table-BR-KjRNe.js";import{a as g,c as _,i as v,n as y,o as b,r as x,s as S,t as C}from"./accordion-variants-CVT_62VO.js";import{t as w}from"./smart-card-B4P_C0nk.js";import{t as T}from"./input-BPDdWrB1.js";import{t as E}from"./spinner-WEI7TMVk.js";import{t as D}from"./PreviewLayout-BG1B5TzA.js";var O=d(`qr-code`,[[`rect`,{width:`5`,height:`5`,x:`3`,y:`3`,rx:`1`,key:`1tu5fj`}],[`rect`,{width:`5`,height:`5`,x:`16`,y:`3`,rx:`1`,key:`1v8r4q`}],[`rect`,{width:`5`,height:`5`,x:`3`,y:`16`,rx:`1`,key:`1x03jg`}],[`path`,{d:`M21 16h-3a2 2 0 0 0-2 2v3`,key:`177gqh`}],[`path`,{d:`M21 21v.01`,key:`ents32`}],[`path`,{d:`M12 7v3a2 2 0 0 1-2 2H7`,key:`8crl2c`}],[`path`,{d:`M3 12h.01`,key:`nlz23k`}],[`path`,{d:`M12 3h.01`,key:`n36tog`}],[`path`,{d:`M12 16v.01`,key:`133mhm`}],[`path`,{d:`M16 12h1`,key:`1slzba`}],[`path`,{d:`M21 12v.01`,key:`1lwtk9`}],[`path`,{d:`M12 21v-1`,key:`1880an`}]]),k={regionAriaLabel:void 0,statusCompletedAria:`Completed`,statusInProgressAria:`In progress`,statusPendingAria:`Pending`},A=m();function j({status:e,ariaLabel:t,className:n}){return e===`completed`?(0,A.jsx)(`span`,{role:`img`,"aria-label":t,className:p(`flex size-8 items-center justify-center rounded-full bg-success/15 text-success ring-1 ring-success/20`,n),children:(0,A.jsx)(u,{className:`size-4`})}):e===`in-progress`?(0,A.jsx)(`span`,{role:`img`,"aria-label":t,className:p(`flex size-8 items-center justify-center rounded-full bg-warning/15 ring-1 ring-warning/30`,n),children:(0,A.jsx)(`span`,{className:`size-2 rounded-full bg-warning`})}):(0,A.jsx)(`span`,{role:`img`,"aria-label":t,className:p(`flex size-8 items-center justify-center rounded-full bg-muted text-muted-foreground/70 ring-1 ring-border/70`,n),children:(0,A.jsx)(E,{className:`size-4 opacity-60`})})}j.displayName=`StepStatusIndicator`;var M=t(n(),1),N={completed:`text-foreground`,"in-progress":`text-foreground`,pending:`text-muted-foreground`};function P(e,t){return e===`completed`?t.statusCompletedAria:e===`in-progress`?t.statusInProgressAria:t.statusPendingAria}function F(e){let t=e.find(e=>e.status!==`completed`&&!e.disabled);return t?[t.id]:[]}var I=(0,M.forwardRef)(function({steps:e,defaultExpanded:t,multiple:n=!1,value:i,onValueChange:a,onStepOpen:o,variant:s=`bordered`,className:c,stepClassName:l,strings:u},d){let m=f(k,u),h=i!==void 0,w=(0,M.useMemo)(()=>t??F(e),[]),[T,E]=(0,M.useState)(w),D=(0,M.useRef)(!1),O=h?i:T,I=(0,M.useRef)(new Set(w));(0,M.useEffect)(()=>{if(h||D.current||t!==void 0||e.length===0||T.length>0)return;let n=F(e);n.length>0&&E(n)},[e,h,t,T.length]);let L=(0,M.useCallback)(e=>{let t=e??[];D.current=!0,h||E(t),a?.(t)},[h,a]);return(0,M.useEffect)(()=>{if(!o){I.current=new Set(O);return}let e=I.current;for(let t of O)e.has(t)||o(t);I.current=new Set(O)},[O,o]),(0,A.jsx)(g,{ref:d,multiple:n,value:O,onValueChange:L,"aria-label":m.regionAriaLabel,className:p(`checklist--component`,x[s],c),children:e.map(e=>(0,A.jsxs)(S,{value:e.id,className:p(y[s],l),children:[(0,A.jsx)(_,{disabled:e.disabled,className:p(v,`min-h-16 items-center`),children:(0,A.jsxs)(`div`,{className:`flex w-full min-w-0 items-center gap-3 pr-2`,children:[(0,A.jsx)(j,{status:e.status,ariaLabel:P(e.status,m)}),(0,A.jsx)(r,{tag:`span`,weight:`semibold`,className:p(N[e.status]),children:e.title}),!!e.badge&&(0,A.jsx)(`span`,{className:`ml-auto inline-flex shrink-0`,children:e.badge})]})}),!!e.content&&(0,A.jsx)(b,{className:C.withMedallion,children:(0,A.jsx)(r,{type:`secondary`,className:`leading-relaxed`,tag:`div`,children:e.content})})]},e.id))})});I.displayName=`OnboardingChecklist`;var L=e({BorderedDefaultPointOfSaleOnboarding:()=>V,CardVariantWorkspaceSetupControlled:()=>H,FlatVariantMinimal:()=>U});function R(){return(0,A.jsxs)(`div`,{className:`flex flex-col gap-5 md:flex-row md:items-start md:justify-between`,children:[(0,A.jsxs)(`div`,{className:`flex-1 space-y-4`,children:[(0,A.jsx)(r,{size:`sm`,type:`secondary`,className:`leading-relaxed`,children:`Scan the QR code or send yourself the link to get the app. The mobile app is where you’ll manage orders, track inventory, and view analytics on the go.`}),(0,A.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,A.jsx)(T,{placeholder:`you@example.com`,className:`flex-1`}),(0,A.jsx)(s,{variant:`secondary`,children:`Send link`})]})]}),(0,A.jsx)(`div`,{className:`flex shrink-0 items-center justify-center rounded-md border border-border bg-muted/30 p-3`,children:(0,A.jsx)(O,{className:`size-20 text-foreground`,strokeWidth:1.5})})]})}var z=[{id:`add-products`,status:`completed`,title:`Add products`,badge:(0,A.jsx)(l,{variant:`success`,children:`Ready`}),content:(0,A.jsx)(r,{size:`sm`,type:`secondary`,children:`Your products have been successfully added and are ready for sale.`})},{id:`pos-app`,status:`in-progress`,title:`Get the point-of-sale application`,content:(0,A.jsx)(R,{})},{id:`price-stock`,status:`pending`,title:`Product price & stock`,content:(0,A.jsx)(r,{size:`sm`,type:`secondary`,children:`Configure your product pricing and manage stock levels across all locations.`})}],B=[{id:`workspace`,status:`completed`,title:`Create your workspace`,content:(0,A.jsx)(r,{size:`sm`,type:`secondary`,children:`Workspace created.`})},{id:`invite`,status:`completed`,title:`Invite teammates`,content:(0,A.jsx)(r,{size:`sm`,type:`secondary`,children:`3 members joined.`})},{id:`integrations`,status:`in-progress`,title:`Connect integrations`,badge:(0,A.jsx)(l,{variant:`warning`,children:`Recommended`}),content:(0,A.jsx)(r,{size:`sm`,type:`secondary`,children:`Connect Slack, GitHub, and Linear.`})},{id:`billing`,status:`pending`,title:`Add payment method`,content:(0,A.jsx)(r,{size:`sm`,type:`secondary`,children:`Required before launch.`}),disabled:!1}];function V(){return(0,A.jsx)(A.Fragment,{children:(0,A.jsx)(D,{className:`max-w-2xl`,children:(0,A.jsx)(I,{steps:z})})})}function H(){let[e,t]=(0,M.useState)([`integrations`]);return(0,A.jsx)(A.Fragment,{children:(0,A.jsx)(D,{className:`max-w-2xl`,children:(0,A.jsx)(w,{padding:`sm`,children:(0,A.jsxs)(D,{className:`gap-3`,children:[(0,A.jsx)(i,{tag:`h3`,className:`border-0 pb-0 text-base`,children:`Set up your workspace`}),(0,A.jsx)(I,{steps:B,variant:`card`,value:e,onValueChange:t})]})})})})}function U(){return(0,A.jsx)(A.Fragment,{children:(0,A.jsx)(D,{className:`max-w-2xl`,children:(0,A.jsx)(I,{steps:z,variant:`flat`,defaultExpanded:[]})})})}var W=`import { useState } from 'react';
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Lr as a,Rr as o,jr as s,r as c,t as l}from"./example-Cz_880po.js";import{t as u}from"./circle-check-1MSds3Vu.js";import{a as d,k as f,n as p,s as m}from"./index-BQIv1ffM.js";import{t as h}from"./props-table-2pIZzGC-.js";import{a as g,c as _,i as v,n as y,o as b,r as x,s as S,t as C}from"./accordion-variants-B9GD0oBE.js";import{t as w}from"./smart-card-Dhu_1A_u.js";import{t as T}from"./input-NIgvB9CZ.js";import{t as E}from"./spinner-BOjRziLu.js";import{t as D}from"./PreviewLayout-CGEkbS-i.js";var O=d(`qr-code`,[[`rect`,{width:`5`,height:`5`,x:`3`,y:`3`,rx:`1`,key:`1tu5fj`}],[`rect`,{width:`5`,height:`5`,x:`16`,y:`3`,rx:`1`,key:`1v8r4q`}],[`rect`,{width:`5`,height:`5`,x:`3`,y:`16`,rx:`1`,key:`1x03jg`}],[`path`,{d:`M21 16h-3a2 2 0 0 0-2 2v3`,key:`177gqh`}],[`path`,{d:`M21 21v.01`,key:`ents32`}],[`path`,{d:`M12 7v3a2 2 0 0 1-2 2H7`,key:`8crl2c`}],[`path`,{d:`M3 12h.01`,key:`nlz23k`}],[`path`,{d:`M12 3h.01`,key:`n36tog`}],[`path`,{d:`M12 16v.01`,key:`133mhm`}],[`path`,{d:`M16 12h1`,key:`1slzba`}],[`path`,{d:`M21 12v.01`,key:`1lwtk9`}],[`path`,{d:`M12 21v-1`,key:`1880an`}]]),k={regionAriaLabel:void 0,statusCompletedAria:`Completed`,statusInProgressAria:`In progress`,statusPendingAria:`Pending`},A=m();function j({status:e,ariaLabel:t,className:n}){return e===`completed`?(0,A.jsx)(`span`,{role:`img`,"aria-label":t,className:p(`flex size-8 items-center justify-center rounded-full bg-success/15 text-success ring-1 ring-success/20`,n),children:(0,A.jsx)(u,{className:`size-4`})}):e===`in-progress`?(0,A.jsx)(`span`,{role:`img`,"aria-label":t,className:p(`flex size-8 items-center justify-center rounded-full bg-warning/15 ring-1 ring-warning/30`,n),children:(0,A.jsx)(`span`,{className:`size-2 rounded-full bg-warning`})}):(0,A.jsx)(`span`,{role:`img`,"aria-label":t,className:p(`flex size-8 items-center justify-center rounded-full bg-muted text-muted-foreground/70 ring-1 ring-border/70`,n),children:(0,A.jsx)(E,{className:`size-4 opacity-60`})})}j.displayName=`StepStatusIndicator`;var M=t(n(),1),N={completed:`text-foreground`,"in-progress":`text-foreground`,pending:`text-muted-foreground`};function P(e,t){return e===`completed`?t.statusCompletedAria:e===`in-progress`?t.statusInProgressAria:t.statusPendingAria}function F(e){let t=e.find(e=>e.status!==`completed`&&!e.disabled);return t?[t.id]:[]}var I=(0,M.forwardRef)(function({steps:e,defaultExpanded:t,multiple:n=!1,value:r,onValueChange:i,onStepOpen:a,variant:s=`bordered`,className:c,stepClassName:l,strings:u},d){let m=f(k,u),h=r!==void 0,w=(0,M.useMemo)(()=>t??F(e),[]),[T,E]=(0,M.useState)(w),D=(0,M.useRef)(!1),O=h?r:T,I=(0,M.useRef)(new Set(w));(0,M.useEffect)(()=>{if(h||D.current||t!==void 0||e.length===0||T.length>0)return;let n=F(e);n.length>0&&E(n)},[e,h,t,T.length]);let L=(0,M.useCallback)(e=>{let t=e??[];D.current=!0,h||E(t),i?.(t)},[h,i]);return(0,M.useEffect)(()=>{if(!a){I.current=new Set(O);return}let e=I.current;for(let t of O)e.has(t)||a(t);I.current=new Set(O)},[O,a]),(0,A.jsx)(g,{ref:d,multiple:n,value:O,onValueChange:L,"aria-label":m.regionAriaLabel,className:p(`checklist--component`,x[s],c),children:e.map(e=>(0,A.jsxs)(S,{value:e.id,className:p(y[s],l),children:[(0,A.jsx)(_,{disabled:e.disabled,className:p(v,`min-h-16 items-center`),children:(0,A.jsxs)(`div`,{className:`flex w-full min-w-0 items-center gap-3 pr-2`,children:[(0,A.jsx)(j,{status:e.status,ariaLabel:P(e.status,m)}),(0,A.jsx)(o,{tag:`span`,weight:`semibold`,className:p(N[e.status]),children:e.title}),!!e.badge&&(0,A.jsx)(`span`,{className:`ml-auto inline-flex shrink-0`,children:e.badge})]})}),!!e.content&&(0,A.jsx)(b,{className:C.withMedallion,children:(0,A.jsx)(o,{type:`secondary`,className:`leading-relaxed`,tag:`div`,children:e.content})})]},e.id))})});I.displayName=`OnboardingChecklist`;var L=e({BorderedDefaultPointOfSaleOnboarding:()=>V,CardVariantWorkspaceSetupControlled:()=>H,FlatVariantMinimal:()=>U});function R(){return(0,A.jsxs)(`div`,{className:`flex flex-col gap-5 md:flex-row md:items-start md:justify-between`,children:[(0,A.jsxs)(`div`,{className:`flex-1 space-y-4`,children:[(0,A.jsx)(o,{size:`sm`,type:`secondary`,className:`leading-relaxed`,children:`Scan the QR code or send yourself the link to get the app. The mobile app is where you’ll manage orders, track inventory, and view analytics on the go.`}),(0,A.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,A.jsx)(T,{placeholder:`you@example.com`,className:`flex-1`}),(0,A.jsx)(c,{variant:`secondary`,children:`Send link`})]})]}),(0,A.jsx)(`div`,{className:`flex shrink-0 items-center justify-center rounded-md border border-border bg-muted/30 p-3`,children:(0,A.jsx)(O,{className:`size-20 text-foreground`,strokeWidth:1.5})})]})}var z=[{id:`add-products`,status:`completed`,title:`Add products`,badge:(0,A.jsx)(s,{variant:`success`,children:`Ready`}),content:(0,A.jsx)(o,{size:`sm`,type:`secondary`,children:`Your products have been successfully added and are ready for sale.`})},{id:`pos-app`,status:`in-progress`,title:`Get the point-of-sale application`,content:(0,A.jsx)(R,{})},{id:`price-stock`,status:`pending`,title:`Product price & stock`,content:(0,A.jsx)(o,{size:`sm`,type:`secondary`,children:`Configure your product pricing and manage stock levels across all locations.`})}],B=[{id:`workspace`,status:`completed`,title:`Create your workspace`,content:(0,A.jsx)(o,{size:`sm`,type:`secondary`,children:`Workspace created.`})},{id:`invite`,status:`completed`,title:`Invite teammates`,content:(0,A.jsx)(o,{size:`sm`,type:`secondary`,children:`3 members joined.`})},{id:`integrations`,status:`in-progress`,title:`Connect integrations`,badge:(0,A.jsx)(s,{variant:`warning`,children:`Recommended`}),content:(0,A.jsx)(o,{size:`sm`,type:`secondary`,children:`Connect Slack, GitHub, and Linear.`})},{id:`billing`,status:`pending`,title:`Add payment method`,content:(0,A.jsx)(o,{size:`sm`,type:`secondary`,children:`Required before launch.`}),disabled:!1}];function V(){return(0,A.jsx)(A.Fragment,{children:(0,A.jsx)(D,{className:`max-w-2xl`,children:(0,A.jsx)(I,{steps:z})})})}function H(){let[e,t]=(0,M.useState)([`integrations`]);return(0,A.jsx)(A.Fragment,{children:(0,A.jsx)(D,{className:`max-w-2xl`,children:(0,A.jsx)(w,{padding:`sm`,children:(0,A.jsxs)(D,{className:`gap-3`,children:[(0,A.jsx)(a,{tag:`h3`,className:`border-0 pb-0 text-base`,children:`Set up your workspace`}),(0,A.jsx)(I,{steps:B,variant:`card`,value:e,onValueChange:t})]})})})})}function U(){return(0,A.jsx)(A.Fragment,{children:(0,A.jsx)(D,{className:`max-w-2xl`,children:(0,A.jsx)(I,{steps:z,variant:`flat`,defaultExpanded:[]})})})}var W=`import { useState } from 'react';
 import { QrCode } from 'lucide-react';
 import { Badge } from '@/components/base/badge';
 import { Button } from '@/components/base/buttons';
@@ -116,4 +116,4 @@ export function FlatVariantMinimal() {
 		</>
 	);
 }
-`;function G(e){let t={h4:`h4`,...e.components};return L||q(`Examples`,!1),V||q(`Examples.BorderedDefaultPointOfSaleOnboarding`,!0),H||q(`Examples.CardVariantWorkspaceSetupControlled`,!0),U||q(`Examples.FlatVariantMinimal`,!0),(0,A.jsxs)(a,{title:`Composed · Onboarding · Checklist`,description:`Step-list accordion with completed / in-progress / pending status indicators. Auto-opens the next non-completed step. Strings + status ARIA fully overridable. Composes base/accordion.`,layer:`composed`,status:`ready`,children:[(0,A.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,A.jsx)(c,{name:`BorderedDefaultPointOfSaleOnboarding`,source:W,children:(0,A.jsx)(V,{})}),(0,A.jsx)(c,{name:`CardVariantWorkspaceSetupControlled`,source:W,children:(0,A.jsx)(H,{})}),(0,A.jsx)(c,{name:`FlatVariantMinimal`,source:W,children:(0,A.jsx)(U,{})})]}),(0,A.jsxs)(o,{title:`API`,id:`api`,children:[(0,A.jsx)(t.h4,{children:`OnboardingChecklist`}),(0,A.jsx)(h,{component:`OnboardingChecklist`})]})]})}function K(e={}){let{wrapper:t}=e.components||{};return t?(0,A.jsx)(t,{...e,children:(0,A.jsx)(G,{...e})}):G(e)}function q(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{K as default};
+`;function G(e){let t={h4:`h4`,...e.components};return L||q(`Examples`,!1),V||q(`Examples.BorderedDefaultPointOfSaleOnboarding`,!0),H||q(`Examples.CardVariantWorkspaceSetupControlled`,!0),U||q(`Examples.FlatVariantMinimal`,!0),(0,A.jsxs)(r,{title:`Composed · Onboarding · Checklist`,description:`Step-list accordion with completed / in-progress / pending status indicators. Auto-opens the next non-completed step. Strings + status ARIA fully overridable. Composes base/accordion.`,layer:`composed`,status:`ready`,children:[(0,A.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,A.jsx)(l,{name:`BorderedDefaultPointOfSaleOnboarding`,source:W,children:(0,A.jsx)(V,{})}),(0,A.jsx)(l,{name:`CardVariantWorkspaceSetupControlled`,source:W,children:(0,A.jsx)(H,{})}),(0,A.jsx)(l,{name:`FlatVariantMinimal`,source:W,children:(0,A.jsx)(U,{})})]}),(0,A.jsxs)(i,{title:`API`,id:`api`,children:[(0,A.jsx)(t.h4,{children:`OnboardingChecklist`}),(0,A.jsx)(h,{component:`OnboardingChecklist`})]})]})}function K(e={}){let{wrapper:t}=e.components||{};return t?(0,A.jsx)(t,{...e,children:(0,A.jsx)(G,{...e})}):G(e)}function q(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{K as default};

package/dist/showcase/assets/{overlays-BptoR4sm.js → overlays-HrH2wdTK.js}

@@ -1,4 +1,4 @@
-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{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n,t as r}from"./react-dom-Bz4cALsF.js";import{Br as i,Dr as a,Er as o,Rr as s,jr as c,r as l,t as u}from"./example-Cz_880po.js";import{t as d}from"./badge-check-D2C2BPUT.js";import{t as f}from"./circle-alert-BW-Btwgh.js";import{t as p}from"./circle-check-big-vBWkmhCZ.js";import{t as m}from"./circle-check-1MSds3Vu.js";import{t as h}from"./circle-question-mark-xYn9p1nL.js";import{t as g}from"./credit-card-CAI3F3HB.js";import{t as _}from"./file-text-DwqbUujq.js";import{t as v}from"./info-BimmreJ-.js";import{t as y}from"./send-BWzI7mwi.js";import{t as b}from"./settings-DRmWJILI.js";import{t as x}from"./shield-alert-DWsbR2jn.js";import{t as ee}from"./sparkles-N8rqKQez.js";import{t as te}from"./trash-2-CE9bDw49.js";import{t as S}from"./user-plus-CPxlPoxf.js";import{t as C}from"./x-D8UN9pOu.js";import{k as ne,n as w,s as T}from"./index-BQIv1ffM.js";import{t as E}from"./props-table-2pIZzGC-.js";import{r as D,t as O}from"./avatar-LGWm52rv.js";import{t as k}from"./input-NIgvB9CZ.js";import{n as A}from"./form-field-B5g_5Zjm.js";import{c as j,r as M,t as N,u as P}from"./item-YF6wMI9W.js";import{i as re,n as ie,r as ae,t as F}from"./dialog-D9-MRCRg.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)(h,{className:`text-muted-foreground h-5 w-5`}),error:(0,L.jsx)(f,{className:`text-destructive h-5 w-5`}),warning:(0,L.jsx)(i,{className:`text-warning h-5 w-5`}),info:(0,L.jsx)(v,{className:`text-info h-5 w-5`}),success:(0,L.jsx)(p,{className:`text-success h-5 w-5`})};function R({open:e,onOpenChange:t,onClose:n,children:r,title:i,description:a,className:o,contentClassName:c,initialFocusRef:u,closeOnEscape:d=!0,closeOnBackdropClick:f=!0,strings:p,showCancel:m=!0,showConfirm:h=!0,onCancel:g,onConfirm:_,onAsyncConfirm:v,closeOnAsyncComplete:y=!0,confirmVariant:b=`primary`,confirmStyle:x=`solid`,isLoading:ee=!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=i?M:void 0,ae=a?N:void 0,{isOpen:F,isClosing:R,openDialog:z,closeDialog:B,dialogProps:V,handleBackdropClick:H}=re({open:e,onOpenChange:t,onClose:n,closeOnEscape:d,closeOnBackdropClick:f,initialFocusRef:u}),{strings:U,finalConfirmVariant:W,confirmButtonOnClick:G,effectiveLoading:K,handleCancel:q}=ie({closeDialog:B,onConfirm:_,onAsyncConfirm:v,closeOnAsyncComplete:y,confirmVariant:b,isLoading:ee,formId:te,onCancel:g,customStrings:p,emphasis:ne,tone:T}),J=ce[O],Y=O===`left`||O===`right`,X=!!(r||D),Z=A&&(m||h||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`,o),"aria-modal":`true`,role:`dialog`,"aria-labelledby":P,"aria-describedby":ae,children:[(0,L.jsx)(l,{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`})}),!!(i||a)&&(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:[!!i&&(0,L.jsx)(s,{id:M,tag:`div`,size:`lg`,weight:`semibold`,children:i}),!!a&&(0,L.jsx)(s,{id:N,tag:`p`,type:`secondary`,className:`mt-1`,children:a})]})]}),!!X&&(0,L.jsxs)(`div`,{className:w(`flex-1 overflow-auto px-6`,i||a?`pb-6`:`py-6`,c),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)(s,{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:[!!m&&(0,L.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:q,children:U.cancel}),!!h&&(0,L.jsx)(l,{type:`button`,variant:W,buttonStyle:x,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)(h,{className:`h-6 w-6`}),iconColor:`text-muted-foreground`},error:{icon:(0,L.jsx)(f,{className:`h-6 w-6`}),iconColor:`text-destructive`},warning:{icon:(0,L.jsx)(i,{className:`h-6 w-6`}),iconColor:`text-warning`},info:{icon:(0,L.jsx)(v,{className:`h-6 w-6`}),iconColor:`text-info`},success:{icon:(0,L.jsx)(p,{className:`h-6 w-6`}),iconColor:`text-success`}};function V({open:e,onOpenChange:t,onClose:n,children:r,title:i,description:a,className:o,contentClassName:c,initialFocusRef:u,closeOnEscape:d=!0,closeOnBackdropClick:f=!1,strings:p,showCancel:m=!0,showConfirm:h=!0,onCancel:g,onConfirm:_,onAsyncConfirm:v,closeOnAsyncComplete:y=!0,confirmVariant:b,confirmStyle:x=`solid`,isLoading:ee=!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=i?O:void 0,j=a?k:void 0,{isOpen:M,isClosing:N,openDialog:P,closeDialog:F,dialogProps:se,handleBackdropClick:ce}=re({open:e,onOpenChange:t,onClose:n,closeOnEscape:d,closeOnBackdropClick:f,initialFocusRef:u}),le=ne(ae,p),R=(0,I.useMemo)(()=>D?`error`:b||{default:`primary`,error:`error`,warning:`warning`,info:`primary`,success:`success`}[C],[D,b,C]),{strings:z,confirmButtonOnClick:V,effectiveLoading:H,handleCancel:U}=ie({closeDialog:F,onConfirm:_,onAsyncConfirm:v,closeOnAsyncComplete:y,confirmVariant:R,isLoading:ee,formId:te,onCancel:g,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`,o),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})}),!!i&&(0,L.jsx)(s,{id:O,tag:`div`,size:`lg`,weight:`semibold`,align:`center`,children:i}),!!a&&(0,L.jsx)(s,{id:k,tag:`p`,type:`secondary`,align:`center`,className:`mt-2`,children:a}),!!r&&(0,L.jsx)(`div`,{className:w(`mt-4`,c),children:r})]}),!!(m||h||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:[!!m&&(0,L.jsx)(l,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:U,className:`w-full sm:w-auto`,children:z.cancel}),!!h&&(0,L.jsx)(l,{type:`button`,variant:R,buttonStyle:x,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)(s,{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)(l,{variant:`primary`,icon:b,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)(l,{variant:`primary`,icon:v,onClick:()=>t(!0),children:`Info`}),(0,L.jsx)(l,{variant:`warning`,icon:f,onClick:()=>r(!0),children:`Warning`}),(0,L.jsx)(l,{variant:`success`,icon:m,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)(l,{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)(s,{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)(s,{weight:`semibold`,children:`You invited stefan@example.com`}),(0,L.jsx)(s,{size:`xs`,type:`secondary`,children:`Editor · Read & write access`})]})]})]}),(0,L.jsx)(`div`,{className:`space-y-2`,children:[{icon:d,label:`Can edit pages and components`},{icon:d,label:`Can manage their own API keys`},{icon:d,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)(s,{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)(l,{variant:`primary`,icon:g,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),[i,a]=(0,I.useState)(!1),[o,u]=(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)(l,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>t(!0),children:`Right · booking detail`}),(0,L.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>r(!0),children:`Left · navigation`}),(0,L.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>a(!0),children:`Bottom · sheet`}),(0,L.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,onClick:()=>u(!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)(s,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Status`}),(0,L.jsx)(c,{variant:`success`,children:`Paid`})]}),(0,L.jsx)(s,{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)(s,{size:`xs`,type:`secondary`,children:e}),(0,L.jsx)(s,{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:_,label:`Bookings`},{icon:S,label:`Customers`},{icon:g,label:`Invoices`},{icon:b,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:i,onOpenChange:a,direction:`bottom`,title:`Quick actions`,onConfirm:()=>a(!1),children:(0,L.jsx)(`div`,{className:`grid grid-cols-2 gap-2 sm:grid-cols-4`,children:[{icon:y,label:`Send invoice`},{icon:S,label:`Add customer`},{icon:g,label:`Record payment`},{icon:_,label:`New booking`}].map(e=>(0,L.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,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)(s,{size:`xs`,weight:`medium`,align:`center`,children:e.label})]},e.label))})}),(0,L.jsx)(z,{open:o,onOpenChange:u,direction:`right`,title:`Help & shortcuts`,description:`No footer — useful for read-only side panels.`,showCancel:!1,showConfirm:!1,children:(0,L.jsxs)(s,{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)(l,{variant:`primary`,icon:y,onClick:()=>t(!0),children:`Send invoice`}),(0,L.jsx)(l,{variant:`error`,icon:te,onClick:()=>r(!0),children:`Delete`}),(0,L.jsx)(l,{variant:`warning`,buttonStyle:`outline`,icon:f,onClick:()=>a(!0),children:`Discard unsaved`}),(0,L.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,icon:x,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)(h,{className:`size-4 shrink-0 mt-0.5 text-info`,"aria-hidden":`true`}),(0,L.jsxs)(s,{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)(h,{className:`size-4 shrink-0 mt-0.5 text-info`,"aria-hidden":`true`}),(0,L.jsxs)(s,{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)(h,{className:`size-4 shrink-0 mt-0.5 text-info`,"aria-hidden":`true`}),(0,L.jsxs)(s,{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)(ee,{className:`size-4 shrink-0 mt-0.5 text-primary`,"aria-hidden":`true`}),(0,L.jsxs)(s,{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,
@@ -405,4 +405,4 @@ export function BestPractices() {
 		</>
 	);
 }
-`;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};
+`;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)(a,{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)(o,{title:`Examples`,id:`examples`,children:[(0,L.jsx)(u,{name:`APISurface`,source:Q,children:(0,L.jsx)(W,{})}),(0,L.jsx)(u,{name:`DialogDefault`,source:Q,children:(0,L.jsx)(G,{})}),(0,L.jsx)(u,{name:`DialogEmphasisTones`,source:Q,children:(0,L.jsx)(K,{})}),(0,L.jsx)(u,{name:`DialogRichContent`,source:Q,children:(0,L.jsx)(q,{})}),(0,L.jsx)(u,{name:`DialogFormPattern`,source:Q,children:(0,L.jsx)(J,{})}),(0,L.jsx)(u,{name:`Drawer4Directions`,source:Q,children:(0,L.jsx)(Y,{})}),(0,L.jsx)(u,{name:`AlertDialogConfirmationPatterns`,source:Q,children:(0,L.jsx)(X,{})}),(0,L.jsx)(u,{name:`BestPractices`,source:Q,children:(0,L.jsx)(Z,{})})]}),(0,L.jsxs)(o,{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};