admin-ui-starter-kit 0.6.4 → 0.6.5

package/dist/showcase/assets/navigation-Da0MVkqr.js

@@ -1,90 +0,0 @@
-import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-BPNIPavy.js";import{r as s,t as c}from"./example-CJMJcnb4.js";import{t as l}from"./heart-B4fOMIr6.js";import{t as u}from"./plus-CQcelTNc.js";import{t as d}from"./sparkles-Z4V23xKK.js";import{t as f}from"./star-Ck8Lg5hm.js";import{t as p}from"./zap-Dpn8_pnQ.js";import{N as m,d as h,n as g}from"./index-jD-KSiHu.js";import{t as _}from"./props-table-DoDq8Mvr.js";import{t as v}from"./smart-card-p97LLZCW.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-ffIfXEGd.js";var E=h(),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)(i,{variant:`secondary`,children:[e.reduce((e,t)=>e+t.items.length,0),` items`]}),className:g(`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)(i,{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:g(`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:g(`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:g(`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:g(`time-ruler--component`,`space-y-1.5`,n),children:[(0,E.jsx)(`div`,{className:`relative flex h-8 gap-px overflow-hidden rounded-md`,children:e.map((e,t)=>(0,E.jsx)(`div`,{className:g(`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:g(`vendor-performance--component`,`flex items-center gap-0.5`),children:Array.from({length:t},(t,n)=>(0,E.jsx)(`svg`,{className:g(`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:g(`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-small`,"aria-label":c.addActionLabel,onClick:r,children:(0,E.jsx)(u,{className:`size-4`})}),className:g(`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:`small`,className:`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,
-	TimeDistributionRuler,
-	VendorPerformanceCard,
-	ExperienceActivityCard,
-} from '@/components/composed/navigation';
-import { SmartCard } from '@/components/base/cards';
-
-export function KanbanMicroBoardExample() {
-	return (
-		<>
-			<div className="w-full max-w-4xl">
-				<KanbanMicroBoard
-								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' }] },
-								]}
-							/>
-			</div>
-		</>
-	);
-}
-
-export function TabSwitcherCardExample() {
-	return (
-		<>
-			<TabSwitcherCard
-								title="Gift Cards"
-								tabs={{
-									recent: [
-										{ name: 'Luxury Spa Voucher', value: '150 USD', icon: Heart },
-										{ name: 'Adventure Day Pass', value: '85 USD', icon: Zap },
-									],
-									popular: [
-										{ name: 'Wine Tasting for Two', value: '95 USD', icon: Star },
-										{ name: 'Hot Air Balloon', value: '280 USD', icon: Sparkles },
-									],
-								}}
-							/>
-		</>
-	);
-}
-
-export function TimeDistributionRulerExample() {
-	return (
-		<>
-			<SmartCard title="Booking Density Today">
-								<TimeDistributionRuler 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} />
-							</SmartCard>
-		</>
-	);
-}
-
-export function VendorPerformance() {
-	return (
-		<>
-			<VendorPerformanceCard
-								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"
-							/>
-		</>
-	);
-}
-
-export function ExperienceActivity() {
-	return (
-		<>
-			<div className="w-full max-w-2xl">
-				<ExperienceActivityCard
-								completed={2}
-								total={5}
-								activities={[
-									{ icon: Heart, 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: Star, title: 'Wine & Dine Tour', time: 'Mar 24, 18:30', metrics: [{ label: 'Duration', value: '4h' }, { label: 'Value', value: '220 USD' }] },
-								]}
-								onAdd={() => {}}
-							/>
-			</div>
-		</>
-	);
-}
-`;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)(o,{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)(o,{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-extras-LpsdoXfx.js

@@ -1,43 +0,0 @@
-import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-BPNIPavy.js";import{Or as s,r as c,t as l}from"./example-CJMJcnb4.js";import{t as u}from"./heart-B4fOMIr6.js";import{t as d}from"./inbox-DqAmGdDd.js";import{t as f}from"./shopping-bag-DzMrGvpF.js";import{t as p}from"./sparkles-Z4V23xKK.js";import{t as m}from"./users-Bh7xGRX2.js";import{N as h,c as g,d as _,n as v}from"./index-jD-KSiHu.js";import{t as y}from"./props-table-DoDq8Mvr.js";import{t as b}from"./smart-card-p97LLZCW.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-ffIfXEGd.js";var O={stepLabel:`Step`,ofLabel:`of`},k=_();function A({steps:e,currentIndex:t,onStepClick:n,className:r,strings:i}){let o=h(O,i);return(0,k.jsxs)(`div`,{className:v(`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:[o.stepLabel,` `,t+1,` `,o.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 o=i<t,l=i===t,u=n&&(o||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:`default`,className:v(`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:v(`flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold tabular-nums`,o&&`bg-success text-success-foreground`,l&&`bg-primary text-primary-foreground ring-4 ring-primary/15`,!o&&!l&&`bg-muted text-muted-foreground`),children:o?(0,k.jsx)(s,{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:v(!l&&!o&&`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:v(`h-px flex-1`,o?`bg-success`:`bg-border`)})]},r.id)})})]})}A.displayName=`BreadcrumbProgress`;function j({title:e,items:t,activeId:n,onSelect:r,className:a}){return(0,k.jsx)(b,{title:e,padding:`default`,className:v(`category-nav--component`,a),children:(0,k.jsx)(w,{children:t.map(e=>{let t=e.icon,a=e.id===n;return(0,k.jsxs)(E,{size:`small`,onClick:()=>r?.(e.id),"data-state":a?`active`:`inactive`,className:v(`cursor-pointer transition-colors`,a?`bg-primary/10 text-primary`:`hover:bg-muted/50`),children:[!!t&&(0,k.jsx)(x,{variant:`icon`,className:v(a?`text-primary`:`text-muted-foreground`),children:(0,k.jsx)(t,{})}),(0,k.jsxs)(T,{children:[(0,k.jsx)(D,{bold:a,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)(i,{variant:a?`primary`:`secondary`,className:`tabular-nums`,children:e.count}),(0,k.jsx)(g,{className:v(`size-4 shrink-0 text-muted-foreground/60`,a&&`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:d,count:142},{id:`orders`,label:`Orders`,icon:f,count:24,hint:`Pending review`},{id:`reviews`,label:`Reviews`,icon:u,count:8},{id:`team`,label:`Team`,icon:m,count:3},{id:`ai`,label:`AI suggestions`,icon:p,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';
-
-export function BreadcrumbProgressExample() {
-	const [step, setStep] = useState(2);
-	return (
-		<>
-			<BreadcrumbProgress
-								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={step}
-								onStepClick={(_, idx) => setStep(idx)}
-							/>
-		</>
-	);
-}
-
-export function CategoryNavCardExample() {
-	const [activeCategory, setActiveCategory] = useState('orders');
-	return (
-		<>
-			<CategoryNavCard
-								title="Inbox"
-								activeId={activeCategory}
-								onSelect={setActiveCategory}
-								items={[
-									{ id: 'all', label: 'All', icon: Inbox, count: 142 },
-									{ id: 'orders', label: 'Orders', icon: ShoppingBag, count: 24, hint: 'Pending review' },
-									{ id: 'reviews', label: 'Reviews', icon: Heart, count: 8 },
-									{ id: 'team', label: 'Team', icon: Users, count: 3 },
-									{ id: 'ai', label: 'AI suggestions', icon: Sparkles, hint: 'Auto-generated' },
-								]}
-							/>
-		</>
-	);
-}
-`;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)(o,{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)(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};

package/dist/showcase/assets/onboarding-checklist-DPNatNOk.js

@@ -1,119 +0,0 @@
-import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{f as r,n as i,o as a,p as o,t as s}from"./section-BPNIPavy.js";import{r as c,t as l}from"./example-CJMJcnb4.js";import{t as u}from"./circle-check-C0X85t4j.js";import{N as d,d as f,l as p,n as m}from"./index-jD-KSiHu.js";import{t as h}from"./props-table-DoDq8Mvr.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-Bl4bIQH4.js";import{t as w}from"./smart-card-p97LLZCW.js";import{t as T}from"./input-CkNgwwCs.js";import{t as E}from"./spinner-CXu7z8-j.js";import{t as D}from"./PreviewLayout-B_l930k0.js";var O=p(`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=f();function j({status:e,ariaLabel:t,className:n}){return e===`completed`?(0,A.jsx)(`span`,{role:`img`,"aria-label":t,className:m(`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:m(`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:m(`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},f){let p=d(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:f,multiple:n,value:O,onValueChange:L,"aria-label":p.regionAriaLabel,className:m(`checklist--component`,x[s],c),children:e.map(e=>(0,A.jsxs)(S,{value:e.id,className:m(y[s],l),children:[(0,A.jsx)(_,{disabled:e.disabled,className:m(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,p)}),(0,A.jsx)(o,{tag:`span`,weight:`semibold`,className:m(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)(a,{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)(a,{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:`default`,children:(0,A.jsxs)(D,{className:`gap-3`,children:[(0,A.jsx)(r,{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';
-import { SmartCard } from '@/components/base/cards';
-import { Input } from '@/components/base/forms/fields';
-import {
-	OnboardingChecklist,
-	type OnboardingChecklistStep,
-} from '@/components/composed/onboarding';
-import { Heading, Text } from '@/components/typography';
-import { Col } from '../../PreviewLayout';
-
-function PosAppBody() {
-	return (
-		<div className="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
-			<div className="flex-1 space-y-4">
-				<Text size="sm" type="secondary" className="leading-relaxed">
-					Scan the QR code or send yourself the link to get the app. The
-					mobile app is where you&rsquo;ll manage orders, track inventory,
-					and view analytics on the go.
-				</Text>
-				<div className="flex items-center gap-2">
-					<Input placeholder="you@example.com" className="flex-1" />
-					<Button variant="secondary">Send link</Button>
-				</div>
-			</div>
-			<div className="flex shrink-0 items-center justify-center rounded-md border border-border bg-muted/30 p-3">
-				<QrCode className="size-20 text-foreground" strokeWidth={1.5} />
-			</div>
-		</div>
-	);
-}
-
-const onboardingSteps: OnboardingChecklistStep[] = [
-	{
-		id: 'add-products',
-		status: 'completed',
-		title: 'Add products',
-		badge: <Badge variant="success">Ready</Badge>,
-		content: (
-			<Text size="sm" type="secondary">
-				Your products have been successfully added and are ready for sale.
-			</Text>
-		),
-	},
-	{
-		id: 'pos-app',
-		status: 'in-progress',
-		title: 'Get the point-of-sale application',
-		content: <PosAppBody />,
-	},
-	{
-		id: 'price-stock',
-		status: 'pending',
-		title: 'Product price & stock',
-		content: (
-			<Text size="sm" type="secondary">
-				Configure your product pricing and manage stock levels across all
-				locations.
-			</Text>
-		),
-	},
-];
-
-const settingsSteps: OnboardingChecklistStep[] = [
-	{ id: 'workspace', status: 'completed', title: 'Create your workspace', content: <Text size="sm" type="secondary">Workspace created.</Text> },
-	{ id: 'invite', status: 'completed', title: 'Invite teammates', content: <Text size="sm" type="secondary">3 members joined.</Text> },
-	{ id: 'integrations', status: 'in-progress', title: 'Connect integrations', badge: <Badge variant="warning">Recommended</Badge>, content: <Text size="sm" type="secondary">Connect Slack, GitHub, and Linear.</Text> },
-	{ id: 'billing', status: 'pending', title: 'Add payment method', content: <Text size="sm" type="secondary">Required before launch.</Text>, disabled: false },
-];
-
-export function BorderedDefaultPointOfSaleOnboarding() {
-	return (
-		<>
-			<Col className="max-w-2xl">
-								<OnboardingChecklist steps={onboardingSteps} />
-							</Col>
-		</>
-	);
-}
-
-export function CardVariantWorkspaceSetupControlled() {
-	const [expanded, setExpanded] = useState<string[]>(['integrations']);
-	return (
-		<>
-			<Col className="max-w-2xl">
-								<SmartCard padding="default">
-									<Col className="gap-3">
-										<Heading tag="h3" className="border-0 pb-0 text-base">
-											Set up your workspace
-										</Heading>
-										<OnboardingChecklist
-											steps={settingsSteps}
-											variant="card"
-											value={expanded}
-											onValueChange={setExpanded}
-										/>
-									</Col>
-								</SmartCard>
-							</Col>
-		</>
-	);
-}
-
-export function FlatVariantMinimal() {
-	return (
-		<>
-			<Col className="max-w-2xl">
-								<OnboardingChecklist
-									steps={onboardingSteps}
-									variant="flat"
-									defaultExpanded={[]}
-								/>
-							</Col>
-		</>
-	);
-}
-`;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)(i,{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)(s,{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)(s,{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/overflow-tab-bar-C0vTzcEY.js

@@ -1 +0,0 @@
-import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{t as n}from"./ellipsis-BLyAd9A-.js";import{d as r,n as i}from"./index-jD-KSiHu.js";import{a,l as o,r as s,t as c}from"./dropdown-menu-C1G_y9dv.js";var l=e(t(),1),u=r(),d=`inline-flex h-control shrink-0 items-center gap-space-sm rounded-md px-control 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 f({items:e,value:t,onChange:r,className:f,tabClassName:p,activeTabClassName:m,moreLabel:h=`More`,ariaLabel:g=`Tab navigation`}){let _=(0,l.useRef)(null),v=(0,l.useRef)(null),[y,b]=(0,l.useState)(e.length);(0,l.useLayoutEffect)(()=>{if(!_.current||!v.current)return;let t=_.current,n=v.current,r=()=>{let r=t.clientWidth;if(r===0){b(e.length);return}let i=Array.from(n.querySelectorAll(`[data-tab-id]`)),a=0,o=0;for(let e of i){let t=e.offsetWidth+4;if(a+t+72<=r)a+=t,o+=1;else break}b(o===i.length?o:Math.max(1,o))};if(r(),typeof ResizeObserver>`u`)return;let i=new ResizeObserver(r);return i.observe(t),()=>i.disconnect()},[e]);let x=(0,l.useMemo)(()=>{if(!t)return e;let n=e.findIndex(e=>e.id===t);if(n<0||n<y)return e;let r=[...e],i=Math.max(0,y-1);return[r[n],r[i]]=[r[i],r[n]],r},[e,t,y]),S=x.slice(0,y),C=x.slice(y),w=e=>{r?.(e.id),e.onClick?.()},T=(e,n,r)=>{let a=e.icon,o=i(d,n?i(`bg-card text-foreground shadow-sm`,m):`text-muted-foreground hover:bg-muted/60`,p),s=(0,u.jsxs)(u.Fragment,{children:[!!a&&(0,u.jsx)(a,{className:`size-icon-sm`}),(0,u.jsx)(`span`,{children:e.label}),!!e.badge&&(0,u.jsx)(`span`,{className:i(`ml-1 inline-flex items-center rounded-full px-1.5 py-0.5 text-xxs font-semibold`,n?`bg-primary/10 text-primary`:`bg-muted-foreground/10 text-muted-foreground`),children:e.badge})]});return r?.measure?(0,u.jsx)(`span`,{"data-tab-id":e.id,className:i(`overflow-tab-bar--measure`,o),children:s},e.id):e.href?(0,u.jsx)(`a`,{href:e.href,"data-tab-id":e.id,role:`tab`,"aria-selected":n,tabIndex:n||!t?0:-1,onClick:()=>w(e),className:i(`overflow-tab-bar--component`,o),children:s},e.id):(0,u.jsx)(`button`,{type:`button`,"data-tab-id":e.id,role:`tab`,"aria-selected":n,tabIndex:n||!t?0:-1,onClick:()=>w(e),className:o,children:s},e.id)};return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`div`,{ref:v,"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=>T(e,!1,{measure:!0}))}),(0,u.jsxs)(`div`,{ref:_,className:i(`relative flex w-full min-w-0 max-w-full items-center gap-1 overflow-hidden rounded-lg bg-muted/40 p-1`,f),children:[(0,u.jsx)(`div`,{role:`tablist`,"aria-label":g,"aria-orientation":`horizontal`,className:`flex min-w-0 flex-1 items-center gap-1 overflow-hidden`,children:S.map(e=>T(e,e.id===t))}),C.length>0&&(0,u.jsxs)(c,{children:[(0,u.jsxs)(o,{type:`button`,"aria-label":h,className:i(d,`text-muted-foreground hover:bg-muted/60`),children:[(0,u.jsx)(n,{className:`size-icon-sm`}),(0,u.jsx)(`span`,{children:h})]}),(0,u.jsx)(s,{align:`end`,className:`min-w-40`,children:C.map(e=>{let n=e.icon;return(0,u.jsxs)(a,{onClick:()=>w(e),className:i(`text-xs gap-1.5 px-2 py-1.5`,e.id===t&&`bg-primary/5 text-primary`),children:[!!n&&(0,u.jsx)(n,{className:`size-3.5`}),(0,u.jsx)(`span`,{children:e.label})]},e.id)})})]})]})]})}f.displayName=`OverflowTabBar`;export{f as t};