admin-ui-starter-kit 0.6.6 → 0.6.8

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

@@ -0,0 +1,231 @@
+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-BXsVHOsI.js";import{t as c}from"./bell-CTDSIOv8.js";import{t as l}from"./chart-column-CE_VhlUz.js";import{$n as u,r as d,t as f}from"./example-Cv05rz75.js";import{t as p}from"./chevron-down-1GeJ4hOO.js";import{t as m}from"./credit-card-QbZMZB90.js";import{t as ee}from"./database-isLkCvDd.js";import{t as te}from"./ellipsis-B9w0cuoH.js";import{t as ne}from"./file-text-BBWpAppG.js";import{t as h}from"./folder-open-DnFjlB3X.js";import{t as g}from"./globe-BiZgUZFZ.js";import{t as _}from"./house-CuLXFtjd.js";import{t as re}from"./inbox-DGF8FgvV.js";import{t as v}from"./message-square-BXyvikcZ.js";import{t as ie}from"./plus-BRcp6JhT.js";import{t as y}from"./settings-CCNP7XOu.js";import{t as b}from"./shield-D2gTWkwA.js";import{t as x}from"./square-pen-D-xHmIA0.js";import{t as ae}from"./star-dD4CAJ83.js";import{t as oe}from"./trash-2-zILxQmtX.js";import{t as S}from"./users-BVMmaveS.js";import{N as se,d as ce,n as C}from"./index-ATou_nFA.js";import{t as w}from"./props-table-BAfz1Zc6.js";import{t as le}from"./separator-BLOG_8oO.js";import{t as ue}from"./breadcrumbs-D7vYX_5y.js";import{n as T,t as de}from"./action-menu-D_wGvb_o.js";import{t as E}from"./overflow-tab-bar-DlqMmyTx.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)(g,{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-sm 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)(d,{type:`button`,variant:`secondary`,buttonStyle:e.active?`solid`:`ghost`,onClick:()=>i(e.value,e.active),className:C(`min-w-18 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 i=A(t??(typeof window<`u`?window.location.pathname:``)),a=typeof n==`string`&&n.length>0?n:`bg-muted`,o=e.map(e=>({item:e,normalizedPath:A(e.href)})),s=o.filter(({normalizedPath:e})=>i===e||i.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:o.map(({item:e,normalizedPath:t})=>(0,O.jsx)(u,{variant:`secondary`,buttonStyle:`ghost`,size:`default`,fullWidth:!0,className:C(`justify-start`,r,t===s?a: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:`size-icon-sm`})}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(`flex h-control whitespace-nowrap items-center gap-space-sm`,`rounded-full px-control`,`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-space-sm rounded-full px-space-md py-space-2xs text-sm font-medium`,n?`bg-primary/10 text-primary`:`bg-muted-foreground/10 text-muted-foreground`),children:t.badge})]},e))})})}M.displayName=`TabNavigationMenu`;var N={tabsAria:`Tabs`};function P({items:e,currentUrl:t,strings:n}){let r=se(N,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(`flex h-control whitespace-nowrap items-center gap-space-sm rounded-md border border-transparent bg-background px-control text-sm leading-tight text-foreground transition-all duration-150 hover:bg-primary hover:text-background`,{"!bg-primary !text-background font-semibold":t}),children:e.label},e.url)})})})}P.displayName=`NavigationTabs`;function F({eyebrow:e,title:t,description:n,badge:i,breadcrumbs:s,actions:c,children:l,className:u,withSeparator:d=!0}){return(0,O.jsxs)(`header`,{className:C(`page-header--component`,`w-full`,u),children:[!!s&&(0,O.jsx)(`div`,{className:`mb-3`,children:s}),(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)(o,{size:`xs`,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)(r,{tag:`h2`,className:`text-base border-0 pb-0`,children:t}),!!i&&(0,O.jsx)(a,{variant:i.variant??`secondary`,children:i.label})]}),!!n&&(0,O.jsx)(o,{type:`secondary`,className:`mt-1 max-w-2xl`,children:n})]}),!!c&&(0,O.jsx)(`div`,{className:`flex shrink-0 items-center gap-2`,children:c})]}),!!l&&(0,O.jsx)(`div`,{className:`mt-4`,children:l}),!!d&&(0,O.jsx)(le,{className:`mt-4`})]})}F.displayName=`PageHeader`;function I({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)(o,{tag:`span`,weight:n?`semibold`:`medium`,children:e.label})]},e.id)})})}I.displayName=`SectionNav`;function L(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 R({groups:e,currentPath:t,className:n,itemClassName:r,activeItemClassName:i,ariaLabel:s=`Side navigation`}){let c=L(t??(typeof window<`u`?window.location.pathname:``)),l=(0,D.useMemo)(()=>e.flatMap(e=>e.items.map(t=>({groupId:e.id,normalizedPath:L(t.href)}))),[e]).filter(({normalizedPath:e})=>c===e||c.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":s,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)(o,{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-sm 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=L(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)(a,{variant:n?`primary`:`secondary`,className:`shrink-0`,children:e.badge})]},e.href)})})]},e.id)})})}R.displayName=`SideNav`;var z=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)(F,{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)(d,{icon:ie,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)(I,{items:[{id:`nav-overview`,label:`Overview`,icon:_},{id:`nav-orders`,label:`Orders`,icon:h},{id:`nav-team`,label:`Team`,icon:S},{id:`nav-preferences`,label:`Preferences`,icon:y}]})}),(0,O.jsxs)(`div`,{className:`space-y-6`,children:[(0,O.jsxs)(`section`,{id:`nav-overview`,className:`min-h-35 rounded-md border border-border p-4`,children:[(0,O.jsx)(`strong`,{children:`Overview`}),` — section anchor target.`]}),(0,O.jsxs)(`section`,{id:`nav-orders`,className:`min-h-35 rounded-md border border-border p-4`,children:[(0,O.jsx)(`strong`,{children:`Orders`}),` — section anchor target.`]}),(0,O.jsxs)(`section`,{id:`nav-team`,className:`min-h-35 rounded-md border border-border p-4`,children:[(0,O.jsx)(`strong`,{children:`Team`}),` — section anchor target.`]}),(0,O.jsxs)(`section`,{id:`nav-preferences`,className:`min-h-35 rounded-md border border-border p-4`,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:[`default`,`small`].map(e=>(0,O.jsx)(ue,{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)(de,{align:`end`,children:[(0,O.jsx)(T,{icon:x,label:`Edit`,onClick:()=>{}}),(0,O.jsx)(T,{icon:te,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:_},{title:`Orders`,href:`#/dashboard/orders`,icon:h},{title:`Customers`,href:`#/customers`,icon:S},{title:`Settings`,href:`#/settings`,icon:y}]})})})}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)(P,{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)(R,{currentPath:e,groups:[{id:`main`,label:`Main`,items:[{label:`Inbox`,href:`#/inbox`,icon:re,badge:`12`},{label:`Orders`,href:`#/dashboard/orders`,icon:h,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:b},{label:`Reports`,href:`#/admin/reports`,icon:l},{label:`Settings`,href:`#/admin/settings`,icon:y,disabled:!0}]}]})})})}function X(){let[e,t]=(0,D.useState)(`overview`);return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(E,{value:e,onChange:t,items:[{id:`overview`,label:`Overview`,icon:_},{id:`orders`,label:`Orders`,icon:h,badge:`12`},{id:`invoices`,label:`Invoices`,icon:ne},{id:`customers`,label:`Customers`,icon:S},{id:`messages`,label:`Messages`,icon:v,badge:`4`},{id:`alerts`,label:`Alerts`,icon:c},{id:`billing`,label:`Billing`,icon:m},{id:`data`,label:`Data`,icon:ee}]})})}var Z=`import { useState } from 'react';
+import {
+	Home, FolderOpen, Settings, Users, Edit, Trash2, MoreHorizontal, Plus,
+	Inbox, Star, Shield, BarChart3, MessageSquare, Bell, CreditCard, Database, FileText,
+} from 'lucide-react';
+import { Breadcrumbs } from '@/components/base/navigation/breadcrumbs';
+import { ActionMenu, MenuAction } from '@/components/base/navigation/action-menu';
+import { LanguageSwitcher } from '@/components/base/navigation/language-switcher';
+import AsideNavigationMenu from '@/components/base/navigation/aside-navigation-menu';
+import TabNavigationMenu from '@/components/base/navigation/tab-navigation-menu';
+import NavigationTabs from '@/components/base/navigation/navigation-tabs';
+import { PageHeader } from '@/components/base/navigation/page-header';
+import { SectionNav } from '@/components/base/navigation/section-nav';
+import { SideNav } from '@/components/base/navigation/side-nav';
+import { OverflowTabBar } from '@/components/base/navigation/overflow-tab-bar';
+import { Button } from '@/components/base/buttons';
+
+export function PageHeaderExample() {
+	return (
+		<>
+			<PageHeader
+								eyebrow="Settings"
+								title="Team & Permissions"
+								description="Invite teammates, set roles, and audit recent activity."
+								badge={{ label: 'Beta', variant: 'info' }}
+								actions={(
+									<>
+										<Button icon={Plus}>Invite</Button>
+									</>
+								)}
+							/>
+		</>
+	);
+}
+
+export function SectionNavSticky() {
+	return (
+		<>
+			<div className="grid gap-6 md:grid-cols-[200px_1fr]">
+								<aside className="md:sticky md:top-24 md:self-start">
+									<SectionNav
+										items={[
+											{ id: 'nav-overview', label: 'Overview', icon: Home },
+											{ id: 'nav-orders', label: 'Orders', icon: FolderOpen },
+											{ id: 'nav-team', label: 'Team', icon: Users },
+											{ id: 'nav-preferences', label: 'Preferences', icon: Settings },
+										]}
+									/>
+								</aside>
+								<div className="space-y-6">
+									<section id="nav-overview" className="min-h-35 rounded-md border border-border p-4"><strong>Overview</strong> — section anchor target.</section>
+									<section id="nav-orders" className="min-h-35 rounded-md border border-border p-4"><strong>Orders</strong> — section anchor target.</section>
+									<section id="nav-team" className="min-h-35 rounded-md border border-border p-4"><strong>Team</strong> — section anchor target.</section>
+									<section id="nav-preferences" className="min-h-35 rounded-md border border-border p-4"><strong>Preferences</strong> — section anchor target.</section>
+								</div>
+							</div>
+		</>
+	);
+}
+
+export function BreadcrumbsSizes() {
+	return (
+		<>
+			<div className="space-y-2">
+								{(['default', 'small'] as const).map((s) => (
+									<Breadcrumbs
+										key={s}
+										size={s}
+										breadcrumbs={[
+											{ label: 'Dashboard', href: '#/' },
+											{ label: 'Orders', href: '#/orders' },
+											{ label: 'INV-2026-0392' },
+										]}
+									/>
+								))}
+							</div>
+		</>
+	);
+}
+
+export function ActionMenuExample() {
+	return (
+		<>
+			<ActionMenu align="end">
+								<MenuAction icon={Edit} label="Edit" onClick={() => {}} />
+								<MenuAction icon={MoreHorizontal} label="Duplicate" onClick={() => {}} />
+								<MenuAction icon={Trash2} label="Delete" variant="error" onClick={() => {}} />
+							</ActionMenu>
+		</>
+	);
+}
+
+export function LanguageSwitcherButtons() {
+	return (
+		<>
+			<LanguageSwitcher
+								locales={[
+									{ value: 'en', label: 'English', nativeLabel: 'English', active: true },
+									{ value: 'bg', label: 'USAn', nativeLabel: 'Български', active: false },
+								]}
+								onSelect={() => {}}
+							/>
+		</>
+	);
+}
+
+export function LanguageSwitcherInline() {
+	return (
+		<>
+			<LanguageSwitcher
+								variant="inline"
+								locales={[
+									{ value: 'en', label: 'English', nativeLabel: 'EN', active: true },
+									{ value: 'bg', label: 'USAn', nativeLabel: 'БГ', active: false },
+									{ value: 'de', label: 'German', nativeLabel: 'DE', active: false },
+								]}
+								onSelect={() => {}}
+							/>
+		</>
+	);
+}
+
+export function AsideNavigationMenuExample() {
+	const [path] = useState('/dashboard/orders');
+	return (
+		<>
+			<div className="max-w-xs rounded-md border border-border bg-card p-2">
+								<AsideNavigationMenu
+									currentPath={path}
+									items={[
+										{ title: 'Home', href: '#/', icon: Home },
+										{ title: 'Orders', href: '#/dashboard/orders', icon: FolderOpen },
+										{ title: 'Customers', href: '#/customers', icon: Users },
+										{ title: 'Settings', href: '#/settings', icon: Settings },
+									]}
+								/>
+							</div>
+		</>
+	);
+}
+
+export function TabNavigationMenuExample() {
+	return (
+		<>
+			<TabNavigationMenu
+								currentPath="#/orders"
+								items={[
+									{ title: 'Overview', href: '#/overview' },
+									{ title: 'Orders', href: '#/orders', badge: '12' },
+									{ title: 'Invoices', href: '#/invoices' },
+								]}
+							/>
+		</>
+	);
+}
+
+export function NavigationTabsRound() {
+	return (
+		<>
+			<NavigationTabs
+								currentUrl="#/orders"
+								items={[
+									{ url: '#/overview', label: 'Overview', active: false },
+									{ url: '#/orders', label: 'Orders', active: true },
+									{ url: '#/invoices', label: 'Invoices', active: false },
+								]}
+							/>
+		</>
+	);
+}
+
+export function SideNavCollapsibleGroups() {
+	const [path] = useState('/dashboard/orders');
+	return (
+		<>
+			<div className="max-w-xs rounded-md border border-border bg-card p-3">
+								<SideNav
+									currentPath={path}
+									groups={[
+										{
+											id: 'main',
+											label: 'Main',
+											items: [
+												{ label: 'Inbox', href: '#/inbox', icon: Inbox, badge: '12' },
+												{ label: 'Orders', href: '#/dashboard/orders', icon: FolderOpen, badge: '3' },
+												{ label: 'Customers', href: '#/customers', icon: Users },
+												{ label: 'Reviews', href: '#/reviews', icon: Star },
+											],
+										},
+										{
+											id: 'admin',
+											label: 'Admin',
+											items: [
+												{ label: 'Permissions', href: '#/admin/permissions', icon: Shield },
+												{ label: 'Reports', href: '#/admin/reports', icon: BarChart3 },
+												{ label: 'Settings', href: '#/admin/settings', icon: Settings, disabled: true },
+											],
+										},
+									]}
+								/>
+							</div>
+		</>
+	);
+}
+
+export function OverflowTabBarResponsiveWithMoreMenu() {
+	const [tab, setTab] = useState('overview');
+	return (
+		<>
+			<OverflowTabBar
+								value={tab}
+								onChange={setTab}
+								items={[
+									{ id: 'overview', label: 'Overview', icon: Home },
+									{ id: 'orders', label: 'Orders', icon: FolderOpen, badge: '12' },
+									{ id: 'invoices', label: 'Invoices', icon: FileText },
+									{ id: 'customers', label: 'Customers', icon: Users },
+									{ id: 'messages', label: 'Messages', icon: MessageSquare, badge: '4' },
+									{ id: 'alerts', label: 'Alerts', icon: Bell },
+									{ id: 'billing', label: 'Billing', icon: CreditCard },
+									{ id: 'data', label: 'Data', icon: Database },
+								]}
+							/>
+		</>
+	);
+}
+`;function Q(e){let t={code:`code`,p:`p`,...e.components};return z||$(`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)(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
+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. Breadcrumb scale is limited to `,(0,O.jsx)(t.code,{children:`default`}),` and
+`,(0,O.jsx)(t.code,{children:`small`}),`; spacing and typography come from the shared display/text variables.`]})}),(0,O.jsx)(s,{title:`Page header`,id:`page-header`,children:(0,O.jsx)(f,{name:`PageHeaderExample`,source:Z,children:(0,O.jsx)(B,{})})}),(0,O.jsx)(s,{title:`Breadcrumbs`,id:`breadcrumbs`,children:(0,O.jsx)(f,{name:`BreadcrumbsSizes`,source:Z,children:(0,O.jsx)(H,{})})}),(0,O.jsxs)(s,{title:`Tabs`,id:`tabs`,children:[(0,O.jsx)(f,{name:`TabNavigationMenuExample`,source:Z,children:(0,O.jsx)(q,{})}),(0,O.jsx)(f,{name:`NavigationTabsRound`,source:Z,children:(0,O.jsx)(J,{})}),(0,O.jsx)(f,{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)(f,{name:`AsideNavigationMenuExample`,source:Z,children:(0,O.jsx)(K,{})}),(0,O.jsx)(f,{name:`SideNavCollapsibleGroups`,source:Z,children:(0,O.jsx)(Y,{})}),(0,O.jsx)(f,{name:`SectionNavSticky`,source:Z,children:(0,O.jsx)(V,{})})]}),(0,O.jsx)(s,{title:`Action menu`,id:`action-menu`,children:(0,O.jsx)(f,{name:`ActionMenuExample`,source:Z,children:(0,O.jsx)(U,{})})}),(0,O.jsxs)(s,{title:`Language switcher`,id:`language-switcher`,children:[(0,O.jsx)(f,{name:`LanguageSwitcherButtons`,source:Z,children:(0,O.jsx)(W,{})}),(0,O.jsx)(f,{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 fe(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{fe as default};

package/dist/showcase/assets/navigation-extras-BVc1xQuB.js

@@ -0,0 +1,43 @@
+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-BXsVHOsI.js";import{Or as s,r as c,t as l}from"./example-Cv05rz75.js";import{t as u}from"./heart-C4t7PVKW.js";import{t as d}from"./inbox-DGF8FgvV.js";import{t as f}from"./shopping-bag-DAeaVQ5O.js";import{t as p}from"./sparkles-DqH40POl.js";import{t as m}from"./users-BVMmaveS.js";import{N as h,c as g,d as _,n as v}from"./index-ATou_nFA.js";import{t as y}from"./props-table-BAfz1Zc6.js";import{t as b}from"./smart-card-DER7dpD9.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-Baq-Mmy2.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:`xs`,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/notification-banner-1ivcmPLe.js

@@ -0,0 +1 @@
+import{n as e,t}from"./section-BXsVHOsI.js";import{t as n}from"./example-Cv05rz75.js";import{s as r,t as i,y as a}from"./display-utilities.examples-ByRydMl0.js";import{d as o}from"./index-ATou_nFA.js";import{t as s}from"./props-table-BAfz1Zc6.js";var c=o();function l(o){return a||d(`Examples`,!1),r||d(`Examples.NotificationBannerVariants`,!0),(0,c.jsxs)(e,{title:`Notification banner`,description:`Inline status banner for low-friction information, success, warning, and error states.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/display/notification-banner`,children:[(0,c.jsx)(t,{title:`Variants`,id:`variants`,children:(0,c.jsx)(n,{name:`NotificationBannerVariants`,source:i,children:(0,c.jsx)(r,{})})}),(0,c.jsx)(t,{title:`API`,id:`api`,children:(0,c.jsx)(s,{component:`NotificationBanner`})})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(l,{...e})}):l(e)}function d(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{u as default};

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

@@ -0,0 +1,119 @@
+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-BXsVHOsI.js";import{r as c,t as l}from"./example-Cv05rz75.js";import{t as u}from"./circle-check-DvCYlVmL.js";import{N as d,d as f,l as p,n as m}from"./index-ATou_nFA.js";import{t as h}from"./props-table-BAfz1Zc6.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-O6U7E38x.js";import{t as w}from"./smart-card-DER7dpD9.js";import{t as T}from"./input-Cmrgo51H.js";import{t as E}from"./spinner-C0YWWxyj.js";import{t as D}from"./PreviewLayout-Oik7TDHN.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-DlqMmyTx.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{t as n}from"./ellipsis-B9w0cuoH.js";import{d as r,n as i}from"./index-ATou_nFA.js";import{a,l as o,r as s,t as c}from"./dropdown-menu-MoIAG0ES.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-sm 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-sm 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};