admin-ui-starter-kit 0.7.0 → 0.7.1

package/dist/showcase/assets/ai-xShhEkrM.js

@@ -0,0 +1,207 @@
+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-C_rLy6Zn.js";import{t as s}from"./chart-column-CJx3qWPs.js";import{r as c,t as l}from"./example-BsDQngs7.js";import{t as u}from"./chevron-down-mjLUdP6b.js";import{t as d}from"./cpu-C8IgjvoP.js";import{t as f}from"./database-CZLgFKRy.js";import{t as p}from"./external-link-BvVwsJxR.js";import{t as ee}from"./file-text-C59ToXmU.js";import{t as te}from"./message-square-Cjuladix.js";import{t as m}from"./quote-BFMPQa3L.js";import{t as ne}from"./refresh-cw-DpfoVhbc.js";import{t as h}from"./sparkles-BDnbTUMq.js";import{n as g,r as re,t as _}from"./ai-tool-call-6qESA6We.js";import{M as ie,N as v,a as ae,c as oe,d as se,l as ce,n as y}from"./index-B4sKWDcN.js";import{t as b}from"./props-table-aynAz90t.js";import{t as le}from"./icon-badge-ruuI6tt0.js";import{t as x}from"./smart-card-CwDYx0xj.js";import{a as ue,c as S,i as C,n as de,o as fe,r as w,t as T,u as E}from"./item-WOhHNpnr.js";import{t as pe}from"./separator-CjWigMul.js";import{t as D}from"./inline-stat-C9Syz6in.js";var O=ce(`brain-circuit`,[[`path`,{d:`M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z`,key:`l5xja`}],[`path`,{d:`M9 13a4.5 4.5 0 0 0 3-4`,key:`10igwf`}],[`path`,{d:`M6.003 5.125A3 3 0 0 0 6.401 6.5`,key:`105sqy`}],[`path`,{d:`M3.477 10.896a4 4 0 0 1 .585-.396`,key:`ql3yin`}],[`path`,{d:`M6 18a4 4 0 0 1-1.967-.516`,key:`2e4loj`}],[`path`,{d:`M12 13h4`,key:`1ku699`}],[`path`,{d:`M12 18h6a2 2 0 0 1 2 2v1`,key:`105ag5`}],[`path`,{d:`M12 8h8`,key:`1lhi5i`}],[`path`,{d:`M16 8V5a2 2 0 0 1 2-2`,key:`u6izg6`}],[`circle`,{cx:`16`,cy:`13`,r:`.5`,key:`ry7gng`}],[`circle`,{cx:`18`,cy:`3`,r:`.5`,key:`1aiba7`}],[`circle`,{cx:`20`,cy:`21`,r:`.5`,key:`yhc1fs`}],[`circle`,{cx:`20`,cy:`8`,r:`.5`,key:`1e43v0`}]]),me={title:`AI Summary`,badgeLabel:`AI`,regenerate:`Regenerate`,confidenceLevels:{low:`low`,medium:`medium`,high:`high`}},he={title:`Classification`,complexityLabel:`Complexity`,flagsLabel:`Flags`,nextStepLabel:`Next Step`,confidencePrefix:`Confidence`,confidenceBands:{low:`Low`,medium:`Medium`,high:`High`}},k=se(),A={low:1,medium:2,high:3};function ge({level:e,label:t}){let n=A[e];return(0,k.jsxs)(`div`,{className:y(`ai-summary--confidence`,`flex items-center gap-1.5`),children:[(0,k.jsx)(`div`,{className:`flex items-center gap-0.5`,children:Array.from({length:3},(e,t)=>(0,k.jsx)(`div`,{className:y(`h-2.5 w-1 rounded-sm`,t<n?`bg-foreground/60`:`bg-muted-foreground/20`)},`bar-${String(t)}`))}),(0,k.jsx)(a,{size:`xs`,type:`secondary`,tag:`span`,className:`capitalize`,children:t})]})}function j({data:e,strings:t}){let n=v(me,t);return(0,k.jsx)(x,{icon:(0,k.jsx)(O,{className:`size-4`}),title:n.title,className:`ai-summary--component`,titleSuffix:(0,k.jsx)(i,{variant:`secondary`,children:n.badgeLabel}),footerText:(0,k.jsxs)(`div`,{className:`flex w-full items-center justify-between`,children:[(0,k.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,k.jsx)(a,{size:`xs`,type:`secondary`,tag:`span`,children:e.generatedAt}),(0,k.jsx)(a,{size:`xs`,type:`discrete`,tag:`span`,children:e.model})]}),!!e.onRegenerate&&(0,k.jsxs)(c,{variant:`secondary`,buttonStyle:`ghost`,onClick:e.onRegenerate,children:[(0,k.jsx)(ne,{className:`mr-1 h-3 w-3`}),n.regenerate]})]}),children:(0,k.jsxs)(`div`,{className:`space-y-3`,children:[(0,k.jsx)(a,{size:`sm`,lineHeight:`relaxed`,children:e.summary}),e.entities.length>0&&(0,k.jsx)(`div`,{className:`flex flex-wrap gap-1.5`,children:e.entities.map(e=>(0,k.jsx)(i,{variant:`secondary`,children:e},e))}),(0,k.jsx)(ge,{level:e.confidence,label:n.confidenceLevels[e.confidence]})]})})}function M({data:e,strings:t}){let n=v(he,t),r=e.confidence>=.9?n.confidenceBands.high:e.confidence>=.7?n.confidenceBands.medium:n.confidenceBands.low;return(0,k.jsx)(x,{icon:(0,k.jsx)(O,{className:`size-4`}),title:n.title,className:`ai-classification--component`,children:(0,k.jsxs)(`div`,{className:`space-y-3`,children:[(0,k.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[(0,k.jsx)(i,{variant:`primary`,children:e.requestType}),(0,k.jsx)(i,{variant:e.urgencyVariant,children:e.urgency}),(0,k.jsx)(i,{variant:e.toneVariant,dot:!0,children:e.tone})]}),(0,k.jsx)(D,{label:n.complexityLabel,labelClassName:`text-sm font-medium text-foreground`,value:(0,k.jsxs)(`span`,{className:`flex items-center gap-1`,children:[Array.from({length:5},(t,n)=>(0,k.jsx)(`span`,{className:y(`h-1.5 w-3 rounded-sm`,n<e.complexityScore?`bg-foreground/60`:`bg-muted`)},`cx-${String(n)}`)),(0,k.jsxs)(a,{tag:`span`,size:`xs`,type:`secondary`,className:`ml-1`,children:[String(e.complexityScore),`/5`]})]})}),e.flags.length>0&&(0,k.jsx)(D,{label:n.flagsLabel,labelClassName:`text-sm font-medium text-foreground`,value:(0,k.jsx)(`span`,{className:`flex gap-1`,children:e.flags.map(e=>(0,k.jsx)(i,{variant:`warning`,children:e},e))})}),(0,k.jsx)(D,{label:n.nextStepLabel,labelClassName:`text-sm font-medium text-foreground`,value:(0,k.jsx)(i,{variant:`info`,children:e.suggestedAction})}),(0,k.jsx)(a,{size:`sm`,lineHeight:`relaxed`,type:`secondary`,children:e.summary}),(0,k.jsx)(pe,{}),(0,k.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,k.jsxs)(i,{variant:`secondary`,children:[n.confidencePrefix,`: `,r]}),(0,k.jsx)(a,{size:`xs`,type:`discrete`,tag:`span`,children:e.model})]})]})})}var N={title:`AI Confidence`,confidenceLabel:`Overall`,factorsLabel:`Contributing factors`};function P(e){return e>=.85?{label:`High`,variant:`success`}:e>=.6?{label:`Medium`,variant:`warning`}:{label:`Low`,variant:`error`}}function F({score:e,model:t,factors:n,className:r,strings:o}){let s=v(N,o),c=Math.round(e*100),{label:l,variant:u}=P(e),d=2*Math.PI*24,f=d-c/100*d;return(0,k.jsxs)(x,{icon:(0,k.jsx)(h,{className:`size-4`}),title:s.title,titleSuffix:!!t&&(0,k.jsx)(i,{variant:`secondary`,size:`small`,children:t}),className:y(`ai-confidence--component`,r),children:[(0,k.jsxs)(`div`,{className:`grid gap-space-xl md:grid-cols-[auto_minmax(0,1fr)] md:items-center`,children:[(0,k.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,k.jsxs)(`svg`,{width:`56`,height:`56`,viewBox:`0 0 64 64`,"aria-hidden":`true`,children:[(0,k.jsx)(`circle`,{cx:`32`,cy:`32`,r:`24`,fill:`none`,stroke:`currentColor`,strokeWidth:`5`,className:`text-muted/60`}),(0,k.jsx)(`circle`,{cx:`32`,cy:`32`,r:`24`,fill:`none`,stroke:`currentColor`,strokeWidth:`5`,strokeLinecap:`round`,strokeDasharray:d,strokeDashoffset:f,transform:`rotate(-90 32 32)`,className:y(u===`success`&&`text-success`,u===`warning`&&`text-warning`,u===`error`&&`text-destructive`)})]}),(0,k.jsx)(`div`,{className:`absolute inset-0 flex flex-col items-center justify-center`,children:(0,k.jsxs)(a,{weight:`semibold`,className:`tabular-nums leading-none`,children:[c,`%`]})})]}),(0,k.jsxs)(`div`,{className:`grid min-w-0 gap-space-sm`,children:[(0,k.jsx)(a,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wide`,children:s.confidenceLabel}),(0,k.jsxs)(`div`,{className:`flex min-w-0 flex-wrap items-center gap-space-sm`,children:[(0,k.jsx)(i,{variant:u,children:l}),!!t&&(0,k.jsx)(a,{size:`xs`,type:`secondary`,className:`truncate`,children:t})]})]})]}),!!n&&n.length>0&&(0,k.jsxs)(`div`,{className:`mt-space-xl grid gap-space-md`,children:[(0,k.jsx)(a,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wide`,children:s.factorsLabel}),n.map(e=>(0,k.jsxs)(`div`,{className:`grid gap-space-sm`,children:[(0,k.jsx)(D,{label:e.label,value:`${Math.round(e.score*100)}%`,mono:!0,labelClassName:`text-xs font-medium text-foreground`,valueClassName:`text-xs font-semibold`}),(0,k.jsx)(`div`,{className:`h-1.5 w-full overflow-hidden rounded-full bg-muted/70`,children:(0,k.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${Math.round(e.score*100)}%`}})})]},e.label))]})]})}F.displayName=`AiConfidenceCard`;var I={title:`Try asking`,hint:`Tap a prompt to start`};function L({suggestions:e,onPick:t,className:n,strings:r}){let i=v(I,r);return(0,k.jsx)(x,{icon:(0,k.jsx)(h,{className:`size-4`}),title:i.title,description:i.hint,className:y(`ai-prompt-suggestions--component`,n),children:(0,k.jsx)(`div`,{className:`grid grid-cols-[repeat(auto-fit,minmax(min(15rem,100%),1fr))] gap-space-xl`,children:e.map(e=>{let n=e.icon;return(0,k.jsxs)(T,{variant:`outline`,render:(0,k.jsx)(`button`,{type:`button`,onClick:()=>t?.(e)}),className:y(`ai-prompt-suggestions--item h-full items-start gap-space-lg px-surface py-surface-sm transition-[border-color,background] duration-150`,`hover:border-foreground/20 hover:bg-muted/40`),children:[!!n&&(0,k.jsx)(S,{children:(0,k.jsx)(le,{icon:n,tone:`primary`,size:`default`,shape:`square`})}),(0,k.jsxs)(w,{className:`min-w-0 gap-space-sm`,children:[(0,k.jsx)(E,{children:e.label}),!!e.description&&(0,k.jsx)(C,{children:e.description})]})]},e.id)})})})}L.displayName=`AiPromptSuggestions`;var _e={title:`Token usage`,input:`Input`,output:`Output`,total:`Total`,cost:`Estimated cost`};function R({model:e,inputTokens:t,outputTokens:n,cost:r,maxTokens:o,className:s,strings:c}){let l=v(_e,c),u=t+n,f=o?Math.min(100,Math.round(u/o*100)):0;return(0,k.jsxs)(x,{icon:(0,k.jsx)(d,{className:`size-4`}),title:l.title,titleSuffix:!!e&&(0,k.jsx)(i,{variant:`secondary`,children:e}),className:y(`ai-token-usage--component`,s),children:[(0,k.jsx)(`div`,{className:`grid grid-cols-3 gap-2`,children:[{label:l.input,value:t},{label:l.output,value:n},{label:l.total,value:u}].map(e=>(0,k.jsxs)(`div`,{className:`rounded-md bg-muted/40 px-3 py-2`,children:[(0,k.jsx)(a,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e.label}),(0,k.jsx)(a,{weight:`semibold`,className:`tabular-nums`,children:e.value.toLocaleString()})]},e.label))}),!!o&&(0,k.jsxs)(`div`,{className:`mt-3`,children:[(0,k.jsx)(D,{label:`${u.toLocaleString()} / ${o.toLocaleString()}`,value:`${f}%`,mono:!0,labelClassName:`text-xs`,valueClassName:`text-xs font-semibold`}),(0,k.jsx)(`div`,{className:`mt-1 h-1.5 w-full overflow-hidden rounded-full bg-muted`,children:(0,k.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${f}%`}})})]}),!!r&&(0,k.jsx)(D,{className:`mt-3 rounded-md bg-primary/5 px-3 py-2`,label:l.cost,value:r,mono:!0,labelClassName:`text-xs`,valueClassName:`text-sm font-bold`})]})}R.displayName=`AiTokenUsageCard`;var ve={title:`Sources`,sourceCount:e=>e===1?`1 source`:`${e} sources`,expand:`Show sources`,collapse:`Hide sources`,visit:`Visit`,relevance:`Relevance`},z=t(n(),1);function B({sources:e,defaultExpanded:t=!1,maxCollapsedRows:n=0,className:r,strings:i}){let o=ie(ve,i),[s,l]=(0,z.useState)(t),d=s?e:e.slice(0,Math.max(0,n)),f=e.length-d.length;return(0,k.jsxs)(`div`,{className:y(`ai-citation--component`,`rounded-lg border border-border bg-card px-surface-sm py-surface-sm shadow-xs`,`space-y-space-lg`,r),children:[(0,k.jsxs)(c,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:()=>l(e=>!e),className:y(`ai-citation--trigger h-auto justify-start gap-space-sm rounded-md px-control py-row-y`,`text-muted-foreground hover:text-foreground hover:bg-muted/40`),"aria-expanded":s,"aria-label":s?o.collapse:o.expand,children:[(0,k.jsx)(m,{className:`size-3.5`}),(0,k.jsxs)(a,{size:`xs`,weight:`medium`,children:[o.title,` · `,o.sourceCount(e.length)]}),s?(0,k.jsx)(u,{className:`size-3.5`}):(0,k.jsx)(oe,{className:`size-3.5`})]}),(s||n>0)&&(0,k.jsxs)(fe,{children:[d.map((e,t)=>(0,k.jsx)(ye,{source:e,index:t+1,strings:o},e.id)),!s&&f>0&&(0,k.jsxs)(a,{size:`xs`,type:`secondary`,children:[`+`,f,` more`]})]})]})}B.displayName=`AiCitation`;function ye({source:e,index:t,strings:n}){let r=typeof e.relevance==`number`?Math.round(Math.max(0,Math.min(1,e.relevance))*100):null,i=e.url?`a`:`span`,o=e.url?{href:e.url,target:`_blank`,rel:`noopener noreferrer`}:{};return(0,k.jsxs)(T,{variant:`outline`,size:`small`,className:`items-start px-surface-sm py-surface-sm`,children:[(0,k.jsx)(S,{children:(0,k.jsx)(`span`,{className:`inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground tabular-nums`,children:t})}),(0,k.jsxs)(w,{children:[(0,k.jsx)(E,{className:`truncate`,children:(0,k.jsxs)(i,{...o,className:y(`truncate`,e.url&&`hover:text-primary hover:underline`),children:[e.title,!!e.url&&(0,k.jsx)(p,{className:`ml-1 inline size-3 align-baseline`})]})}),!!e.snippet&&(0,k.jsx)(C,{clamp:2,children:e.snippet}),(e.publisher||e.publishedAt)&&(0,k.jsxs)(ue,{className:`mt-1 justify-start gap-1.5`,children:[!!e.publisher&&(0,k.jsx)(a,{size:`xs`,type:`discrete`,children:e.publisher}),!!e.publisher&&!!e.publishedAt&&(0,k.jsx)(a,{size:`xs`,type:`discrete`,children:`·`}),!!e.publishedAt&&(0,k.jsx)(a,{size:`xs`,type:`discrete`,className:`tabular-nums`,children:e.publishedAt})]})]}),r!==null&&(0,k.jsxs)(de,{className:`w-16 flex-col items-end gap-0.5`,children:[(0,k.jsxs)(a,{size:`xs`,type:`secondary`,weight:`medium`,className:`tabular-nums`,children:[r,`%`]}),(0,k.jsx)(`div`,{className:`h-1 w-full overflow-hidden rounded-full bg-muted`,"aria-label":n.relevance,children:(0,k.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${r}%`}})})]})]})}var be=e({AIClassification:()=>H,AISummary:()=>V});function V(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(j,{data:{summary:`Customer requested a birthday experience booking for two adults near Los Angeles, preferring a weekend slot in early April.`,entities:[`Birthday`,`Outdoor`,`Los Angeles`,`2 Adults`],confidence:`high`,model:`Claude 3.5 Sonnet`,generatedAt:`Mar 27, 2026 — 14:32`,onRegenerate:()=>{}}})})}function H(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(M,{data:{requestType:`Product Inquiry`,urgency:`Medium`,urgencyVariant:`warning`,tone:`Professional`,toneVariant:`info`,flags:[`Gift Purchase`,`Wellness`],complexityScore:3,suggestedAction:`Auto-respond`,summary:`Standard product inquiry for a spa gift package.`,confidence:.92,model:`Claude 3.5 Sonnet`}})})}var xe=e({AiCitationExample:()=>J,AiConfidenceCardExample:()=>U,AiFeedbackExample:()=>Y,AiMessageBubbleExample:()=>K,AiPromptSuggestionsExample:()=>W,AiTokenUsageCardExample:()=>G,AiToolCallExample:()=>q});function U(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(F,{score:.84,model:`Claude 4.7`,factors:[{label:`Source quality`,score:.92},{label:`Context coverage`,score:.78},{label:`Prompt specificity`,score:.81}]})})}function W(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(L,{suggestions:[{id:`kpi`,label:`Summarise this month KPIs`,description:`Get a digest of revenue, orders, refunds.`,icon:s},{id:`invoice`,label:`Draft an overdue reminder`,description:`Polite + firm copy for unpaid invoices.`,icon:ee},{id:`lookup`,label:`Find similar customers`,description:`Pattern-match by spend and category.`,icon:ae},{id:`help`,label:`Answer a refund question`,description:`Explain refund policy in plain English.`,icon:te}],onPick:()=>{}})})}function G(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(R,{model:`Claude 4.7`,inputTokens:3240,outputTokens:812,cost:`$0.082`,maxTokens:2e4})})}function K(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,k.jsx)(g,{role:`user`,authorName:`You`,timestamp:`14:31`,children:`Can you summarise yesterday's bookings and flag anything unusual?`}),(0,k.jsx)(g,{role:`assistant`,authorName:`Claude 4.7`,timestamp:`14:31`,plainText:`You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed (one for a cancellation, one duplicate). The Spa package saw 2× the usual demand.`,onRegenerate:()=>{},children:`You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed (one for a cancellation, one duplicate). The Spa package saw 2× the usual demand.`})]})})}function q(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,k.jsx)(_,{name:`search_bookings`,status:`success`,durationMs:420,args:`{ from: '2026-04-01', to: '2026-04-28', status: 'paid' }`,result:`[ { id: 'B-1402', amount: 250.00, … }, …42 more ]`}),(0,k.jsx)(_,{name:`fetch_customer`,status:`running`,durationMs:120,icon:f}),(0,k.jsx)(_,{name:`send_email`,status:`error`,durationMs:2150,args:`{ to: 'maria@example.com', subject: '…' }`,error:`SMTP timeout after 2.0s. Retry suggested.`})]})})}function J(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(B,{defaultExpanded:!0,sources:[{id:`s1`,title:`Refund policy — Q2 2026 update`,url:`https://example.com/refund-policy`,snippet:`Refunds for bookings cancelled at least 48 hours in advance are processed within 5 business days.`,publisher:`Internal Wiki`,publishedAt:`Apr 12, 2026`,relevance:.93},{id:`s2`,title:`Customer service playbook`,url:`https://example.com/playbook`,snippet:`When a customer disputes a charge, acknowledge first, then check the booking record.`,publisher:`Operations`,publishedAt:`Mar 30, 2026`,relevance:.78},{id:`s3`,title:`Bookings API reference`,url:`https://example.com/api/bookings`,snippet:`GET /bookings/{id} returns the full booking record including refund history.`,publisher:`Engineering Docs`,publishedAt:`Feb 18, 2026`,relevance:.55}]})})}function Y(){let[e,t]=(0,z.useState)(null);return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(`div`,{className:`flex flex-col gap-3 rounded-lg border border-border bg-card p-4`,children:(0,k.jsx)(re,{value:e,onVote:t})})})}var X=`import { AiSummaryBlock, AiClassificationPanel } from '@/components/composed/ai';
+
+export function AISummary() {
+	return (
+		<>
+			<AiSummaryBlock
+								data={{
+									summary: 'Customer requested a birthday experience booking for two adults near Los Angeles, preferring a weekend slot in early April.',
+									entities: ['Birthday', 'Outdoor', 'Los Angeles', '2 Adults'],
+									confidence: 'high',
+									model: 'Claude 3.5 Sonnet',
+									generatedAt: 'Mar 27, 2026 — 14:32',
+									onRegenerate: () => {},
+								}}
+							/>
+		</>
+	);
+}
+
+export function AIClassification() {
+	return (
+		<>
+			<AiClassificationPanel
+								data={{
+									requestType: 'Product Inquiry',
+									urgency: 'Medium',
+									urgencyVariant: 'warning',
+									tone: 'Professional',
+									toneVariant: 'info',
+									flags: ['Gift Purchase', 'Wellness'],
+									complexityScore: 3,
+									suggestedAction: 'Auto-respond',
+									summary: 'Standard product inquiry for a spa gift package.',
+									confidence: 0.92,
+									model: 'Claude 3.5 Sonnet',
+								}}
+							/>
+		</>
+	);
+}
+`,Z=`import { useState } from 'react';
+import { BarChart3, Database, FileText, MessageSquare, Search } from 'lucide-react';
+import {
+	AiCitation,
+	AiConfidenceCard,
+	AiFeedback,
+	AiMessageBubble,
+	AiPromptSuggestions,
+	AiTokenUsageCard,
+	AiToolCall,
+	type AiFeedbackVote,
+} from '@/components/composed/ai';
+
+export function AiConfidenceCardExample() {
+	return (
+		<>
+			<AiConfidenceCard
+								score={0.84}
+								model="Claude 4.7"
+								factors={[
+									{ label: 'Source quality', score: 0.92 },
+									{ label: 'Context coverage', score: 0.78 },
+									{ label: 'Prompt specificity', score: 0.81 },
+								]}
+							/>
+		</>
+	);
+}
+
+export function AiPromptSuggestionsExample() {
+	return (
+		<>
+			<AiPromptSuggestions
+								suggestions={[
+									{ id: 'kpi', label: 'Summarise this month KPIs', description: 'Get a digest of revenue, orders, refunds.', icon: BarChart3 },
+									{ id: 'invoice', label: 'Draft an overdue reminder', description: 'Polite + firm copy for unpaid invoices.', icon: FileText },
+									{ id: 'lookup', label: 'Find similar customers', description: 'Pattern-match by spend and category.', icon: Search },
+									{ id: 'help', label: 'Answer a refund question', description: 'Explain refund policy in plain English.', icon: MessageSquare },
+								]}
+								onPick={() => {}}
+							/>
+		</>
+	);
+}
+
+export function AiTokenUsageCardExample() {
+	return (
+		<>
+			<AiTokenUsageCard
+								model="Claude 4.7"
+								inputTokens={3240}
+								outputTokens={812}
+								cost="$0.082"
+								maxTokens={20000}
+							/>
+		</>
+	);
+}
+
+export function AiMessageBubbleExample() {
+	return (
+		<>
+			<div className="flex flex-col gap-3">
+								<AiMessageBubble
+									role="user"
+									authorName="You"
+									timestamp="14:31"
+								>
+									Can you summarise yesterday's bookings and flag anything unusual?
+								</AiMessageBubble>
+								<AiMessageBubble
+									role="assistant"
+									authorName="Claude 4.7"
+									timestamp="14:31"
+									plainText="You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed (one for a cancellation, one duplicate). The Spa package saw 2× the usual demand."
+									onRegenerate={() => {}}
+								>
+									You had 23 bookings yesterday totalling 4,820 USD. Two refunds were processed
+									(one for a cancellation, one duplicate). The Spa package saw 2× the usual
+									demand.
+								</AiMessageBubble>
+							</div>
+		</>
+	);
+}
+
+export function AiToolCallExample() {
+	return (
+		<>
+			<div className="flex flex-col gap-2">
+								<AiToolCall
+									name="search_bookings"
+									status="success"
+									durationMs={420}
+									args="{ from: '2026-04-01', to: '2026-04-28', status: 'paid' }"
+									result="[ { id: 'B-1402', amount: 250.00, … }, …42 more ]"
+								/>
+								<AiToolCall
+									name="fetch_customer"
+									status="running"
+									durationMs={120}
+									icon={Database}
+								/>
+								<AiToolCall
+									name="send_email"
+									status="error"
+									durationMs={2150}
+									args="{ to: 'maria@example.com', subject: '…' }"
+									error="SMTP timeout after 2.0s. Retry suggested."
+								/>
+							</div>
+		</>
+	);
+}
+
+export function AiCitationExample() {
+	return (
+		<>
+			<AiCitation
+								defaultExpanded
+								sources={[
+									{
+										id: 's1',
+										title: 'Refund policy — Q2 2026 update',
+										url: 'https://example.com/refund-policy',
+										snippet:
+											'Refunds for bookings cancelled at least 48 hours in advance are processed within 5 business days.',
+										publisher: 'Internal Wiki',
+										publishedAt: 'Apr 12, 2026',
+										relevance: 0.93,
+									},
+									{
+										id: 's2',
+										title: 'Customer service playbook',
+										url: 'https://example.com/playbook',
+										snippet:
+											'When a customer disputes a charge, acknowledge first, then check the booking record.',
+										publisher: 'Operations',
+										publishedAt: 'Mar 30, 2026',
+										relevance: 0.78,
+									},
+									{
+										id: 's3',
+										title: 'Bookings API reference',
+										url: 'https://example.com/api/bookings',
+										snippet: 'GET /bookings/{id} returns the full booking record including refund history.',
+										publisher: 'Engineering Docs',
+										publishedAt: 'Feb 18, 2026',
+										relevance: 0.55,
+									},
+								]}
+							/>
+		</>
+	);
+}
+
+export function AiFeedbackExample() {
+	const [vote, setVote] = useState<AiFeedbackVote>(null);
+	return (
+		<>
+			<div className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4">
+								<AiFeedback value={vote} onVote={setVote} />
+							</div>
+		</>
+	);
+}
+`;function Q(e){let t={h4:`h4`,...e.components};return be||$(`Examples`,!1),H||$(`Examples.AIClassification`,!0),V||$(`Examples.AISummary`,!0),xe||$(`ExtraExamples`,!1),J||$(`ExtraExamples.AiCitationExample`,!0),U||$(`ExtraExamples.AiConfidenceCardExample`,!0),Y||$(`ExtraExamples.AiFeedbackExample`,!0),K||$(`ExtraExamples.AiMessageBubbleExample`,!0),W||$(`ExtraExamples.AiPromptSuggestionsExample`,!0),G||$(`ExtraExamples.AiTokenUsageCardExample`,!0),q||$(`ExtraExamples.AiToolCallExample`,!0),(0,k.jsxs)(r,{title:`Composed · AI`,description:`Summary block, classification panel, confidence card, prompt suggestions, usage card, message bubble, tool call, citation, and feedback.`,layer:`composed`,status:`ready`,children:[(0,k.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,k.jsx)(l,{name:`AISummary`,source:X,children:(0,k.jsx)(V,{})}),(0,k.jsx)(l,{name:`AIClassification`,source:X,children:(0,k.jsx)(H,{})})]}),(0,k.jsxs)(o,{title:`Assistive surfaces`,id:`assistive-surfaces`,children:[(0,k.jsx)(l,{name:`AiConfidenceCardExample`,source:Z,children:(0,k.jsx)(U,{})}),(0,k.jsx)(l,{name:`AiPromptSuggestionsExample`,source:Z,children:(0,k.jsx)(W,{})}),(0,k.jsx)(l,{name:`AiTokenUsageCardExample`,source:Z,children:(0,k.jsx)(G,{})})]}),(0,k.jsxs)(o,{title:`Message surfaces`,id:`message-surfaces`,children:[(0,k.jsx)(l,{name:`AiMessageBubbleExample`,source:Z,children:(0,k.jsx)(K,{})}),(0,k.jsx)(l,{name:`AiToolCallExample`,source:Z,children:(0,k.jsx)(q,{})}),(0,k.jsx)(l,{name:`AiCitationExample`,source:Z,children:(0,k.jsx)(J,{})}),(0,k.jsx)(l,{name:`AiFeedbackExample`,source:Z,children:(0,k.jsx)(Y,{})})]}),(0,k.jsxs)(o,{title:`API`,id:`api`,children:[(0,k.jsx)(t.h4,{children:`AiSummaryBlock`}),(0,k.jsx)(b,{component:`AiSummaryBlock`}),(0,k.jsx)(t.h4,{children:`AiClassificationPanel`}),(0,k.jsx)(b,{component:`AiClassificationPanel`}),(0,k.jsx)(t.h4,{children:`AiCitation`}),(0,k.jsx)(b,{component:`AiCitation`}),(0,k.jsx)(t.h4,{children:`AiConfidenceCard`}),(0,k.jsx)(b,{component:`AiConfidenceCard`}),(0,k.jsx)(t.h4,{children:`AiFeedback`}),(0,k.jsx)(b,{component:`AiFeedback`}),(0,k.jsx)(t.h4,{children:`AiMessageBubble`}),(0,k.jsx)(b,{component:`AiMessageBubble`}),(0,k.jsx)(t.h4,{children:`AiPromptSuggestions`}),(0,k.jsx)(b,{component:`AiPromptSuggestions`}),(0,k.jsx)(t.h4,{children:`AiTokenUsageCard`}),(0,k.jsx)(b,{component:`AiTokenUsageCard`}),(0,k.jsx)(t.h4,{children:`AiToolCall`}),(0,k.jsx)(b,{component:`AiToolCall`})]})]})}function Se(e={}){let{wrapper:t}=e.components||{};return t?(0,k.jsx)(t,{...e,children:(0,k.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{Se as default};

package/dist/showcase/assets/alert--MONSwFW.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{c as n,p as r}from"./section-C_rLy6Zn.js";import{d as i,n as a}from"./index-B4sKWDcN.js";import{t as o}from"./icon-size-BHn0d6Zp.js";var s=e(t(),1),c=i(),l=n([`alert--component relative grid w-full grid-cols-[0_1fr] items-start gap-y-1 rounded-lg border px-4 py-3 text-left`,`has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5`,`has-[>[data-slot=alert-action]]:sm:grid-cols-[auto_1fr_auto]`,`[&>svg]:row-span-2 [&>svg]:mt-0.5 [&>svg]:shrink-0`,o.default],{variants:{variant:{default:`border-border bg-card text-card-foreground`,info:`border-info/30 bg-info/5 text-card-foreground [&>svg]:text-info`,success:`border-success/30 bg-success/10 text-card-foreground [&>svg]:text-success`,warning:`border-warning/40 bg-warning/10 text-card-foreground [&>svg]:text-warning`,destructive:`border-destructive/30 bg-destructive/5 text-card-foreground [&>svg]:text-destructive`,inverse:[`border-foreground bg-foreground text-background`,`[&>svg]:text-background`,`[&_[data-slot=alert-title]_[data-typography=text]]:text-background`,`[&_[data-slot=alert-description]_[data-typography=text]]:text-background/75`]}},defaultVariants:{variant:`default`}}),u=(0,s.forwardRef)(function({className:e,variant:t,role:n=`alert`,...r},i){return(0,c.jsx)(`div`,{ref:i,"data-slot":`alert`,"data-variant":t??`default`,role:n,className:a(l({variant:t}),e),...r})});u.displayName=`Alert`;var d=(0,s.forwardRef)(function({className:e,children:t,...n},i){return(0,c.jsx)(`div`,{ref:i,"data-slot":`alert-title`,className:a(`alert--title col-start-2 min-h-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:opacity-80`,e),...n,children:(0,c.jsx)(r,{tag:`span`,weight:`semibold`,className:`leading-snug`,children:t})})});d.displayName=`AlertTitle`;var f=(0,s.forwardRef)(function({className:e,children:t,...n},i){return(0,c.jsx)(`div`,{ref:i,"data-slot":`alert-description`,className:a(`alert--description col-start-2 grid justify-items-start gap-1 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:opacity-80 [&_p]:leading-relaxed`,e),...n,children:(0,c.jsx)(r,{tag:`span`,size:`xs`,type:`secondary`,className:`leading-normal`,children:t})})});f.displayName=`AlertDescription`;var p=(0,s.forwardRef)(function({className:e,...t},n){return(0,c.jsx)(`div`,{ref:n,"data-slot":`alert-action`,className:a(`alert--action flex flex-wrap items-center gap-1.5 max-sm:col-start-2 max-sm:mt-2 max-sm:justify-start sm:col-start-3 sm:row-start-1 sm:justify-end sm:self-center`,e),...t})});p.displayName=`AlertAction`;export{d as i,p as n,f as r,u as t};

package/dist/showcase/assets/alert-BuMNu_BZ.js

@@ -0,0 +1,62 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{c as n,h as r,n as i,t as a}from"./section-C_rLy6Zn.js";import{er as o,t as s}from"./example-BsDQngs7.js";import{t as c}from"./circle-check-big-BuYdgE3Q.js";import{t as l}from"./circle-x-BavQ4wuc.js";import{t as u}from"./info-DXwnIz56.js";import{d,n as f}from"./index-B4sKWDcN.js";import{t as p}from"./PreviewLayout-CE0fmzoc.js";t();var m=d(),h=n(`grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert`,{variants:{variant:{default:`bg-card text-card-foreground`,destructive:`border-destructive/30 bg-destructive/5 text-destructive *:data-[slot=alert-description]:text-destructive/85 *:[svg]:text-current`,warning:`border-warning/40 bg-warning/10 text-warning-foreground *:data-[slot=alert-description]:text-warning-foreground/85 *:[svg]:text-current`,success:`border-success/30 bg-success/10 text-success *:data-[slot=alert-description]:text-success/85 *:[svg]:text-current`,info:`border-info/30 bg-info/5 text-info *:data-[slot=alert-description]:text-info/85 *:[svg]:text-current`}},defaultVariants:{variant:`default`}});function g({className:e,variant:t,...n}){return(0,m.jsx)(`div`,{"data-slot":`alert`,role:`alert`,className:f(h({variant:t}),e),...n})}function _({className:e,...t}){return(0,m.jsx)(`div`,{"data-slot":`alert-title`,className:f(`font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3`,e),...t})}function v({className:e,...t}){return(0,m.jsx)(`div`,{"data-slot":`alert-description`,className:f(`text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3`,e),...t})}function y({className:e,...t}){return(0,m.jsx)(`div`,{"data-slot":`alert-action`,className:f(`absolute top-2.5 right-3`,e),...t})}var b=e({TitleOnly:()=>C,Variants:()=>x,WithAlertAction:()=>S});function x(){return(0,m.jsx)(m.Fragment,{children:(0,m.jsxs)(p,{children:[(0,m.jsxs)(g,{children:[(0,m.jsx)(u,{}),(0,m.jsx)(_,{children:`Default`}),(0,m.jsx)(v,{children:`This is a default informational alert.`})]}),(0,m.jsxs)(g,{variant:`success`,children:[(0,m.jsx)(c,{}),(0,m.jsx)(_,{children:`Success`}),(0,m.jsx)(v,{children:`Your changes have been saved.`})]}),(0,m.jsxs)(g,{variant:`warning`,children:[(0,m.jsx)(r,{}),(0,m.jsx)(_,{children:`Warning`}),(0,m.jsx)(v,{children:`Be careful with this action.`})]}),(0,m.jsxs)(g,{variant:`destructive`,children:[(0,m.jsx)(l,{}),(0,m.jsx)(_,{children:`Destructive`}),(0,m.jsx)(v,{children:`This cannot be undone.`})]})]})})}function S(){return(0,m.jsx)(m.Fragment,{children:(0,m.jsxs)(g,{children:[(0,m.jsx)(u,{}),(0,m.jsx)(_,{children:`New version available`}),(0,m.jsx)(v,{children:`Reload the page to update.`}),(0,m.jsx)(y,{children:(0,m.jsx)(o,{variant:`link`,size:`xs`,className:`h-auto px-0`,children:`Reload`})})]})})}function C(){return(0,m.jsx)(m.Fragment,{children:(0,m.jsxs)(g,{variant:`success`,children:[(0,m.jsx)(c,{}),(0,m.jsx)(_,{children:`Saved successfully.`})]})})}var w=`import { Info, CheckCircle, AlertTriangle, XCircle } from 'lucide-react';
+import { Alert, AlertTitle, AlertDescription, AlertAction } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Col } from '../../PreviewLayout';
+
+export function Variants() {
+	return (
+		<>
+			<Col>
+								<Alert>
+									<Info />
+									<AlertTitle>Default</AlertTitle>
+									<AlertDescription>This is a default informational alert.</AlertDescription>
+								</Alert>
+								<Alert variant="success">
+									<CheckCircle />
+									<AlertTitle>Success</AlertTitle>
+									<AlertDescription>Your changes have been saved.</AlertDescription>
+								</Alert>
+								<Alert variant="warning">
+									<AlertTriangle />
+									<AlertTitle>Warning</AlertTitle>
+									<AlertDescription>Be careful with this action.</AlertDescription>
+								</Alert>
+								<Alert variant="destructive">
+									<XCircle />
+									<AlertTitle>Destructive</AlertTitle>
+									<AlertDescription>This cannot be undone.</AlertDescription>
+								</Alert>
+							</Col>
+		</>
+	);
+}
+
+export function WithAlertAction() {
+	return (
+		<>
+			<Alert>
+								<Info />
+								<AlertTitle>New version available</AlertTitle>
+								<AlertDescription>Reload the page to update.</AlertDescription>
+								<AlertAction>
+									<Button variant="link" size="xs" className="h-auto px-0">
+										Reload
+									</Button>
+								</AlertAction>
+							</Alert>
+		</>
+	);
+}
+
+export function TitleOnly() {
+	return (
+		<>
+			<Alert variant="success">
+								<CheckCircle />
+								<AlertTitle>Saved successfully.</AlertTitle>
+							</Alert>
+		</>
+	);
+}
+`;function T(e){return b||D(`Examples`,!1),C||D(`Examples.TitleOnly`,!0),x||D(`Examples.Variants`,!0),S||D(`Examples.WithAlertAction`,!0),(0,m.jsx)(i,{title:`UI · Alert`,description:`shadcn alert primitive: variants, with title/description/action.`,layer:`ui`,status:`ready`,children:(0,m.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,m.jsx)(s,{name:`Variants`,source:w,children:(0,m.jsx)(x,{})}),(0,m.jsx)(s,{name:`WithAlertAction`,source:w,children:(0,m.jsx)(S,{})}),(0,m.jsx)(s,{name:`TitleOnly`,source:w,children:(0,m.jsx)(C,{})})]})})}function E(e={}){let{wrapper:t}=e.components||{};return t?(0,m.jsx)(t,{...e,children:(0,m.jsx)(T,{...e})}):T(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{E as default};

package/dist/showcase/assets/alert-z1RP5MhA.js

@@ -0,0 +1,93 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{h as t,n,t as r}from"./section-C_rLy6Zn.js";import{r as i,t as a}from"./example-BsDQngs7.js";import{t as o}from"./circle-check-BjuHEm7p.js";import{t as s}from"./circle-x-BavQ4wuc.js";import{t as c}from"./info-DXwnIz56.js";import{t as l}from"./shield-alert-BldSpQ1t.js";import{d as u}from"./index-B4sKWDcN.js";import{t as d}from"./props-table-aynAz90t.js";import{i as f,n as p,r as m,t as h}from"./alert--MONSwFW.js";var g=e({AlertVariants:()=>v,AlertWithActions:()=>y,InverseAlert:()=>b,StatusRoleAlert:()=>x}),_=u();function v(){return(0,_.jsxs)(`div`,{className:`grid w-full max-w-2xl gap-3`,children:[(0,_.jsxs)(h,{children:[(0,_.jsx)(c,{}),(0,_.jsx)(f,{children:`Default notice`}),(0,_.jsx)(m,{children:`Workspace settings were updated by an administrator.`})]}),(0,_.jsxs)(h,{variant:`info`,children:[(0,_.jsx)(c,{}),(0,_.jsx)(f,{children:`Import queued`}),(0,_.jsx)(m,{children:`Catalog import will start after the current sync finishes.`})]}),(0,_.jsxs)(h,{variant:`success`,children:[(0,_.jsx)(o,{}),(0,_.jsx)(f,{children:`Billing profile verified`}),(0,_.jsx)(m,{children:`Invoices can now be issued for this workspace.`})]}),(0,_.jsxs)(h,{variant:`warning`,children:[(0,_.jsx)(t,{}),(0,_.jsx)(f,{children:`Usage is approaching the plan limit`}),(0,_.jsx)(m,{children:`Upgrade before the next billing cycle to avoid paused automations.`})]}),(0,_.jsxs)(h,{variant:`destructive`,children:[(0,_.jsx)(s,{}),(0,_.jsx)(f,{children:`Webhook delivery failed`}),(0,_.jsx)(m,{children:`Three endpoints rejected the latest payload.`})]})]})}function y(){return(0,_.jsxs)(h,{variant:`warning`,className:`max-w-2xl`,children:[(0,_.jsx)(l,{}),(0,_.jsx)(f,{children:`Two-factor enforcement is pending`}),(0,_.jsx)(m,{children:`12 team members have not enrolled. Enforcement begins at the end of the week.`}),(0,_.jsxs)(p,{children:[(0,_.jsx)(i,{variant:`warning`,buttonStyle:`outline`,size:`small`,children:`Review users`}),(0,_.jsx)(i,{variant:`secondary`,buttonStyle:`ghost`,size:`small`,children:`Dismiss`})]})]})}function b(){return(0,_.jsxs)(h,{variant:`inverse`,className:`max-w-2xl`,children:[(0,_.jsx)(c,{}),(0,_.jsx)(f,{children:`New analytics view is available`}),(0,_.jsx)(m,{children:`Switch to the updated report builder from the workspace menu.`}),(0,_.jsx)(p,{children:(0,_.jsx)(i,{variant:`light`,buttonStyle:`outline`,size:`small`,children:`Open builder`})})]})}function x(){return(0,_.jsxs)(h,{role:`status`,variant:`success`,className:`max-w-2xl`,children:[(0,_.jsx)(o,{}),(0,_.jsx)(f,{children:`Changes saved`}),(0,_.jsx)(m,{children:'This non-urgent confirmation uses `role="status"`.'})]})}var S=`import { AlertTriangle, CheckCircle2, Info, ShieldAlert, XCircle } from 'lucide-react';
+
+import {
+	Alert,
+	AlertAction,
+	AlertDescription,
+	AlertTitle,
+} from '@/components/base/display/alert';
+import { Button } from '@/components/base/buttons';
+
+export function AlertVariants() {
+	return (
+		<div className="grid w-full max-w-2xl gap-3">
+			<Alert>
+				<Info />
+				<AlertTitle>Default notice</AlertTitle>
+				<AlertDescription>Workspace settings were updated by an administrator.</AlertDescription>
+			</Alert>
+			<Alert variant="info">
+				<Info />
+				<AlertTitle>Import queued</AlertTitle>
+				<AlertDescription>Catalog import will start after the current sync finishes.</AlertDescription>
+			</Alert>
+			<Alert variant="success">
+				<CheckCircle2 />
+				<AlertTitle>Billing profile verified</AlertTitle>
+				<AlertDescription>Invoices can now be issued for this workspace.</AlertDescription>
+			</Alert>
+			<Alert variant="warning">
+				<AlertTriangle />
+				<AlertTitle>Usage is approaching the plan limit</AlertTitle>
+				<AlertDescription>Upgrade before the next billing cycle to avoid paused automations.</AlertDescription>
+			</Alert>
+			<Alert variant="destructive">
+				<XCircle />
+				<AlertTitle>Webhook delivery failed</AlertTitle>
+				<AlertDescription>Three endpoints rejected the latest payload.</AlertDescription>
+			</Alert>
+		</div>
+	);
+}
+
+export function AlertWithActions() {
+	return (
+		<Alert variant="warning" className="max-w-2xl">
+			<ShieldAlert />
+			<AlertTitle>Two-factor enforcement is pending</AlertTitle>
+			<AlertDescription>
+				12 team members have not enrolled. Enforcement begins at the end of the week.
+			</AlertDescription>
+			<AlertAction>
+				<Button variant="warning" buttonStyle="outline" size="small">Review users</Button>
+				<Button variant="secondary" buttonStyle="ghost" size="small">Dismiss</Button>
+			</AlertAction>
+		</Alert>
+	);
+}
+
+export function InverseAlert() {
+	return (
+		<Alert variant="inverse" className="max-w-2xl">
+			<Info />
+			<AlertTitle>New analytics view is available</AlertTitle>
+			<AlertDescription>Switch to the updated report builder from the workspace menu.</AlertDescription>
+			<AlertAction>
+				<Button variant="light" buttonStyle="outline" size="small">Open builder</Button>
+			</AlertAction>
+		</Alert>
+	);
+}
+
+export function StatusRoleAlert() {
+	return (
+		<Alert role="status" variant="success" className="max-w-2xl">
+			<CheckCircle2 />
+			<AlertTitle>Changes saved</AlertTitle>
+			<AlertDescription>This non-urgent confirmation uses \`role="status"\`.</AlertDescription>
+		</Alert>
+	);
+}
+`;function C(e){let t={code:`code`,h4:`h4`,p:`p`,pre:`pre`,...e.components};return g||T(`Examples`,!1),v||T(`Examples.AlertVariants`,!0),y||T(`Examples.AlertWithActions`,!0),b||T(`Examples.InverseAlert`,!0),x||T(`Examples.StatusRoleAlert`,!0),(0,_.jsxs)(n,{title:`Alert`,description:`Semantic notice primitive with icon, title, description, and responsive action regions.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/display/alert`,children:[(0,_.jsx)(r,{title:`Overview`,id:`overview`,children:(0,_.jsxs)(t.p,{children:[`Use `,(0,_.jsx)(t.code,{children:`Alert`}),` for inline notices inside admin workflows. Variants map to semantic
+tokens, actions wrap responsively, and title/description text is routed through
+the typography layer.`]})}),(0,_.jsxs)(r,{title:`Usage`,id:`usage`,children:[(0,_.jsx)(t.p,{children:`Import the package-owned alert from the display family:`}),(0,_.jsx)(t.pre,{children:(0,_.jsx)(t.code,{className:`language-tsx`,children:`import {
+	Alert,
+	AlertTitle,
+	AlertDescription,
+	AlertAction,
+} from 'admin-ui-starter-kit/base/display';
+`})}),(0,_.jsxs)(t.p,{children:[`Use `,(0,_.jsx)(t.code,{children:`variant`}),` for semantic tone: `,(0,_.jsx)(t.code,{children:`default`}),`, `,(0,_.jsx)(t.code,{children:`info`}),`, `,(0,_.jsx)(t.code,{children:`success`}),`, `,(0,_.jsx)(t.code,{children:`warning`}),`,
+`,(0,_.jsx)(t.code,{children:`destructive`}),`, or `,(0,_.jsx)(t.code,{children:`inverse`}),`. `,(0,_.jsx)(t.code,{children:`Alert`}),` defaults to `,(0,_.jsx)(t.code,{children:`role="alert"`}),` for urgent
+notices; pass `,(0,_.jsx)(t.code,{children:`role="status"`}),` for non-urgent confirmations. Place buttons,
+links, or other commands in `,(0,_.jsx)(t.code,{children:`AlertAction`}),` so actions stack on narrow screens and
+align to the right on wider admin layouts.`]})]}),(0,_.jsxs)(r,{title:`Examples`,id:`examples`,children:[(0,_.jsx)(a,{name:`AlertVariants`,source:S,children:(0,_.jsx)(v,{})}),(0,_.jsx)(a,{name:`AlertWithActions`,source:S,children:(0,_.jsx)(y,{})}),(0,_.jsx)(a,{name:`InverseAlert`,source:S,children:(0,_.jsx)(b,{})}),(0,_.jsx)(a,{name:`StatusRoleAlert`,source:S,children:(0,_.jsx)(x,{})})]}),(0,_.jsxs)(r,{title:`API`,id:`api`,children:[(0,_.jsx)(t.h4,{children:`Alert`}),(0,_.jsx)(d,{component:`Alert`}),(0,_.jsx)(t.h4,{children:`AlertTitle`}),(0,_.jsx)(d,{component:`AlertTitle`}),(0,_.jsx)(t.h4,{children:`AlertDescription`}),(0,_.jsx)(d,{component:`AlertDescription`}),(0,_.jsx)(t.h4,{children:`AlertAction`}),(0,_.jsx)(d,{component:`AlertAction`})]})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,_.jsx)(t,{...e,children:(0,_.jsx)(C,{...e})}):C(e)}function T(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{w as default};

package/dist/showcase/assets/api-key-list-BhmXUJty.js

@@ -0,0 +1,73 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,t as i}from"./section-C_rLy6Zn.js";import{t as a}from"./example-BsDQngs7.js";import{d as o}from"./index-B4sKWDcN.js";import{t as s}from"./props-table-aynAz90t.js";import{t as c}from"./PreviewLayout-CE0fmzoc.js";import{t as l}from"./api-key-list-hPTN6gwa.js";var u=e({DefaultVisibleSecretsCallbacksForAddDelete:()=>m,EmptyState:()=>g,LocalizedStrings:()=>_,MaskedSecretsStripeStyle:()=>h}),d=t(n(),1),f=o(),p=[{id:`1`,name:`Production`,value:`AUDO230454*242SDIFPPL`},{id:`2`,name:`Development`,value:`DUILO30454*242SDIFUIP`},{id:`3`,name:`Staging`,value:`IPPODAS230454*242SDI`}];function m(){let[e,t]=(0,d.useState)(p);return(0,f.jsx)(f.Fragment,{children:(0,f.jsx)(c,{className:`max-w-xl`,children:(0,f.jsx)(l,{items:e,onAdd:()=>{let n=String(e.length+1);t(e=>[...e,{id:n,name:`Key ${n}`,value:`KEY_${n}_${Math.random().toString(36).slice(2,10).toUpperCase()}`}])},onDelete:e=>t(t=>t.filter(t=>t.id!==e))})})})}function h(){let[e]=(0,d.useState)([{id:`live`,name:`Live`,value:`sk_live_3xy4cm9bnrUseEkJ4zDh2A4D`,displayValue:`sk_live_·············2A4D`},{id:`test`,name:`Test`,value:`sk_test_5j2lpQzKvFnH8PcQ7B3M`,displayValue:`sk_test_·············7B3M`}]);return(0,f.jsx)(f.Fragment,{children:(0,f.jsx)(c,{className:`max-w-xl`,children:(0,f.jsx)(l,{items:e,title:`Stripe API keys`})})})}function g(){return(0,f.jsx)(f.Fragment,{children:(0,f.jsx)(c,{className:`max-w-xl`,children:(0,f.jsx)(l,{items:[],onAdd:()=>{}})})})}function _(){return(0,f.jsx)(f.Fragment,{children:(0,f.jsx)(c,{className:`max-w-xl`,children:(0,f.jsx)(l,{items:p,strings:{title:`Clés API`,addAria:`Ajouter une clé`,rowMenuAria:`Actions de la clé`,copyMenuItem:`Copier la clé`,copiedMenuItem:`Copié`,deleteMenuItem:`Supprimer`},onAdd:()=>{}})})})}var v=`import { useState } from 'react';
+import { ApiKeyList, type ApiKeyListItem } from '@/components/composed/admin';
+import { Col } from '../../PreviewLayout';
+
+const initial: ApiKeyListItem[] = [
+	{ id: '1', name: 'Production', value: 'AUDO230454*242SDIFPPL' },
+	{ id: '2', name: 'Development', value: 'DUILO30454*242SDIFUIP' },
+	{ id: '3', name: 'Staging', value: 'IPPODAS230454*242SDI' },
+];
+
+export function DefaultVisibleSecretsCallbacksForAddDelete() {
+	const [keys, setKeys] = useState(initial);
+	return (
+		<>
+			<Col className="max-w-xl">
+								<ApiKeyList
+									items={keys}
+									onAdd={() => {
+										const id = String(keys.length + 1);
+										setKeys((k) => [...k, { id, name: \`Key \${id}\`, value: \`KEY_\${id}_\${Math.random().toString(36).slice(2, 10).toUpperCase()}\` }]);
+									}}
+									onDelete={(id) => setKeys((k) => k.filter((i) => i.id !== id))}
+								/>
+							</Col>
+		</>
+	);
+}
+
+export function MaskedSecretsStripeStyle() {
+	const [maskedKeys] = useState<ApiKeyListItem[]>([
+			{ id: 'live', name: 'Live', value: 'sk_live_3xy4cm9bnrUseEkJ4zDh2A4D', displayValue: 'sk_live_·············2A4D' },
+			{ id: 'test', name: 'Test', value: 'sk_test_5j2lpQzKvFnH8PcQ7B3M', displayValue: 'sk_test_·············7B3M' },
+		]);
+	return (
+		<>
+			<Col className="max-w-xl">
+								<ApiKeyList items={maskedKeys} title="Stripe API keys" />
+							</Col>
+		</>
+	);
+}
+
+export function EmptyState() {
+	return (
+		<>
+			<Col className="max-w-xl">
+								<ApiKeyList items={[]} onAdd={() => {}} />
+							</Col>
+		</>
+	);
+}
+
+export function LocalizedStrings() {
+	return (
+		<>
+			<Col className="max-w-xl">
+								<ApiKeyList
+									items={initial}
+									strings={{
+										title: 'Clés API',
+										addAria: 'Ajouter une clé',
+										rowMenuAria: 'Actions de la clé',
+										copyMenuItem: 'Copier la clé',
+										copiedMenuItem: 'Copié',
+										deleteMenuItem: 'Supprimer',
+									}}
+									onAdd={() => {}}
+								/>
+							</Col>
+		</>
+	);
+}
+`;function y(e){let t={h4:`h4`,...e.components};return u||x(`Examples`,!1),m||x(`Examples.DefaultVisibleSecretsCallbacksForAddDelete`,!0),g||x(`Examples.EmptyState`,!0),_||x(`Examples.LocalizedStrings`,!0),h||x(`Examples.MaskedSecretsStripeStyle`,!0),(0,f.jsxs)(r,{title:`Composed · Admin · API key list`,description:`Collapsible section with per-row dropdown menu (Copy / Delete) and an optional Add action in the header. Generic enough for any 'named secret list' — service tokens, webhook URLs, deployment hooks. Composes base/cards + base/display/collapsible + base/navigation/ActionMenu + base/copyable.`,layer:`composed`,status:`ready`,children:[(0,f.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,f.jsx)(a,{name:`DefaultVisibleSecretsCallbacksForAddDelete`,source:v,children:(0,f.jsx)(m,{})}),(0,f.jsx)(a,{name:`MaskedSecretsStripeStyle`,source:v,children:(0,f.jsx)(h,{})}),(0,f.jsx)(a,{name:`EmptyState`,source:v,children:(0,f.jsx)(g,{})}),(0,f.jsx)(a,{name:`LocalizedStrings`,source:v,children:(0,f.jsx)(_,{})})]}),(0,f.jsxs)(i,{title:`API`,id:`api`,children:[(0,f.jsx)(t.h4,{children:`ApiKeyList`}),(0,f.jsx)(s,{component:`ApiKeyList`})]})]})}function b(e={}){let{wrapper:t}=e.components||{};return t?(0,f.jsx)(t,{...e,children:(0,f.jsx)(y,{...e})}):y(e)}function x(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{b as default};

package/dist/showcase/assets/api-key-list-hPTN6gwa.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{p as n}from"./section-C_rLy6Zn.js";import{Dr as r,r as i}from"./example-BsDQngs7.js";import{t as a}from"./lock-BwI_fNQW.js";import{t as o}from"./plus-Dp_nZNjk.js";import{t as s}from"./trash-2-C-6T17-B.js";import{N as c,c as l,d as u,n as d}from"./index-B4sKWDcN.js";import{t as f}from"./icon-badge-ruuI6tt0.js";import{t as p}from"./smart-card-CwDYx0xj.js";import{c as m,n as h,r as g,t as _}from"./item-WOhHNpnr.js";import{n as v,r as y,t as b}from"./collapsible-BtawbO_2.js";import{n as x}from"./dist-SJMpFlRc.js";import{n as S,t as C}from"./action-menu-C3DOQfP4.js";var w=e(t(),1),T={title:`API keys`,addAria:`Add API key`,rowMenuAria:`Key actions`,copyMenuItem:`Copy key`,copiedMenuItem:`Copied`,deleteMenuItem:`Delete`,copyToastSuccess:`Copied to clipboard`,copyToastError:`Failed to copy`,emptyMessage:`No keys yet.`},E=u(),D=(0,w.forwardRef)(function({items:e,defaultOpen:t=!0,open:r,onOpenChange:a,onAdd:s,onDelete:u,onCopy:f,title:m,className:h,strings:g},_){let x=c(T,g),S=r!==void 0,[C,D]=(0,w.useState)(t),k=S?r:C,A=(0,w.useCallback)(e=>{S||D(e),a?.(e)},[S,a]);return(0,E.jsx)(p,{ref:_,className:d(`api-key-list--component`,h),children:(0,E.jsxs)(b,{open:k,onOpenChange:A,children:[(0,E.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,E.jsx)(y,{asChild:!0,children:(0,E.jsxs)(i,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`default`,className:`h-auto flex-1 justify-start gap-2 rounded-sm px-0 py-0 text-left`,children:[(0,E.jsx)(l,{"aria-hidden":`true`,className:d(`size-4 text-muted-foreground transition-transform`,k&&`rotate-90`)}),(0,E.jsx)(n,{tag:`span`,weight:`semibold`,children:m??x.title})]})}),!!s&&(0,E.jsx)(i,{variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,onClick:s,"aria-label":x.addAria,children:(0,E.jsx)(o,{className:`size-4`})})]}),(0,E.jsx)(v,{className:`pt-3`,children:e.length===0?(0,E.jsx)(n,{type:`secondary`,children:x.emptyMessage}):(0,E.jsx)(`div`,{className:`flex flex-col gap-2.5`,children:e.map(e=>(0,E.jsx)(O,{item:e,onDelete:u,onCopy:f,copyMenuLabel:x.copyMenuItem,copiedMenuLabel:x.copiedMenuItem,deleteMenuLabel:x.deleteMenuItem,rowMenuAria:x.rowMenuAria,copyToastSuccess:x.copyToastSuccess,copyToastError:x.copyToastError},e.id))})})]})})});D.displayName=`ApiKeyList`;function O({item:e,onDelete:t,onCopy:i,copyMenuLabel:o,copiedMenuLabel:c,deleteMenuLabel:l,rowMenuAria:u,copyToastSuccess:d,copyToastError:p}){let[v,y]=(0,w.useState)(!1),b=(0,w.useCallback)(async()=>{try{await navigator.clipboard.writeText(e.value),y(!0),setTimeout(()=>y(!1),1500),x.success(d),i?.(e.id,e)}catch{x.error(p)}},[e,i,d,p]),T=e.displayValue??e.value;return(0,E.jsxs)(_,{size:`small`,"data-slot":`api-key-row`,className:`flex-nowrap`,children:[(0,E.jsx)(m,{variant:`icon`,children:(0,E.jsx)(f,{size:`small`,shape:`square`,tone:`muted`,bordered:!0,className:`text-success`,children:e.icon??(0,E.jsx)(a,{className:`size-3.5`})})}),(0,E.jsxs)(g,{className:`min-w-0 flex-row items-center gap-2.5`,children:[(0,E.jsx)(n,{tag:`span`,size:`xs`,weight:`medium`,className:`w-20 shrink-0 truncate sm:w-24`,children:e.name}),(0,E.jsx)(`span`,{className:`min-w-0 flex-1 truncate rounded-sm bg-muted px-2 py-1 font-mono text-xs`,children:T})]}),(0,E.jsx)(h,{className:`shrink-0`,children:(0,E.jsxs)(C,{srText:u,align:`end`,closeOnSelect:!0,buttonProps:{buttonStyle:`ghost`,variant:`secondary`},children:[(0,E.jsx)(S,{label:v?c:o,icon:r,onClick:()=>{b()},disabled:e.disabled}),!!t&&(0,E.jsx)(S,{label:l,icon:s,variant:`error`,disabled:e.disabled,onClick:()=>t(e.id,e)})]})})]})}O.displayName=`ApiKeyRow`;export{D as t};

package/dist/showcase/assets/app-sidebar-CY-XpIu6.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{c as n,o as r,p as i}from"./section-C_rLy6Zn.js";import{t as a}from"./chevrons-up-down-C-9zUpl_.js";import{t as o}from"./external-link-BvVwsJxR.js";import{_ as s,c,d as l,f as u,h as d,l as f,m as p,n as m,o as h,s as g,u as _,v}from"./sidebar.context-CYk51BQ5.js";import{N as y,d as b,n as x}from"./index-B4sKWDcN.js";import{a as S,c as C,i as w,l as T,o as E,r as D,t as O}from"./dropdown-menu-5yqchTEF.js";import{r as k}from"./skeleton-DMWrHdVi.js";import{t as A}from"./scroll-area-CK1S6JpQ.js";import{t as j}from"./use-layout-link-DpqFiDf-.js";import{a as M,i as N,n as P,r as F,t as I}from"./sheet-O9T8bfRr.js";import{n as L,t as R}from"./sidebar-DPVgEwE0.js";var z=e(t(),1),B=b();function V(e){if(e.startsWith(`#/`))return e.slice(1).split(`?`)[0]?.split(`#`)[0]||`/`;try{return new URL(e,`http://local.invalid`).pathname}catch{return e}}function H(e,t){let n=V(e);return n===t||n.startsWith(t+`/`)||n.startsWith(t+`?`)}function U(e){return e.label??e.title??``}function W(e,t){let n=U(e);return e.handle??e.href??(typeof n==`string`||typeof n==`number`?n:`nav-${t??0}`)}function G({value:e,size:t=`default`}){return(0,B.jsx)(r,{variant:`secondary`,className:x(`ml-auto rounded-full tabular-nums text-sidebar-foreground`,t===`small`?`h-4 min-w-4 px-1.5`:`h-5 min-w-5 px-1.5`),children:e})}function K(e,t,n){return e&&n&&n[e]!=null?n[e]:t}function q({icon:e,iconMap:t={},size:n=20,className:r=`size-4`,...i}){if(!e)return null;if(typeof e==`string`){let n=t[e];return n?(0,B.jsx)(n,{className:r}):null}return z.isValidElement(e)?z.cloneElement(e,{className:x(r,e.props.className),...i}):typeof e==`function`||typeof e==`object`&&e&&`$$typeof`in e?(0,B.jsx)(e,{className:r,width:n,height:n,...i}):null}function J(e,t,n,r,i){return e({href:t.href,children:n,className:r,active:i,disabled:t.disabled||!t.href,external:t.external})}var ee=`18rem`;n(`peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0`,{variants:{variant:{default:`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,outline:`bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]`},size:{default:`h-8 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}});var te={mobileTitle:`Sidebar`,mobileDescription:`Displays the mobile sidebar.`};function Y({side:e=`left`,variant:t=`sidebar`,collapsible:n=`offcanvas`,className:r,surfaceClassName:i,children:a,strings:o,...s}){let{isMobile:c,state:l,openMobile:u,setOpenMobile:d}=m(),f=y(te,o);return n===`none`?(0,B.jsx)(`div`,{"data-slot":`sidebar`,className:x(`flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i,r),...s,children:a}):c?(0,B.jsx)(I,{open:u,onOpenChange:d,...s,children:(0,B.jsxs)(P,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:x(`w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden`,i),style:{"--sidebar-width":ee},side:e,children:[(0,B.jsxs)(N,{className:`sr-only`,children:[(0,B.jsx)(M,{children:f.mobileTitle}),(0,B.jsx)(F,{children:f.mobileDescription})]}),(0,B.jsx)(`div`,{className:`flex h-full w-full flex-col`,children:a})]})}):(0,B.jsx)(`div`,{className:`group peer sticky top-0 hidden h-full text-sidebar-foreground md:block`,"data-state":l,"data-collapsible":l===`collapsed`?n:``,"data-variant":t,"data-side":e,"data-slot":`sidebar`,children:(0,B.jsx)(`div`,{className:x(`inset-y-0 z-10 hidden h-full w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex`,e===`left`?`left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]`:`right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]`,t===`floating`||t===`inset`?`px-2 py-3 group-data-[collapsible=icon]:w-17`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon)`,r),...s,children:(0,B.jsx)(`div`,{"data-sidebar":`sidebar`,className:x(`sidebar flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm`,i),children:a})})})}function X({item:e,active:t=!1}){let n=U(e);return(0,B.jsx)(i,{tag:`span`,weight:t?`bold`:`medium`,className:`truncate text-inherit`,children:n})}function Z({navigationByGroups:e,currentUrl:t=`/`,iconMap:n={},liveBadges:r,renderLink:a,LinkComponent:o,emptySlot:l,renderItem:f,className:m}){let h=j({renderLink:a,LinkComponent:o}),g=e=>!!e&&H(t,V(e)),y=e=>{let n=-1,r=-1;for(let i=0;i<e.length;i+=1){let a=e[i],o=a?.href?V(a.href):``;o&&H(t,o)&&o.length>r&&(r=o.length,n=i)}return n},b=e=>!!e?.some(e=>g(e.href)||b(e.children)),S=(e,t=0,a=0)=>{let o=!!e.children?.length,c=g(e.href),l=o?b(e.children):!1,u=c||l,m=K(e.handle,e.badge,r),_=U(e),v={depth:t,active:c,expanded:u,badge:m,renderLink:h};if(f)return(0,B.jsx)(z.Fragment,{children:f(e,v)},W(e,a));if(o){let t=y(e.children??[]),o=(0,B.jsxs)(B.Fragment,{children:[!!e.icon&&(0,B.jsx)(q,{icon:e.icon,iconMap:n,className:`size-4`,"aria-hidden":`true`}),(0,B.jsx)(X,{item:e,active:u}),!!m&&(0,B.jsx)(G,{value:m})]});return(0,B.jsxs)(p,{children:[(0,B.jsx)(R,{isActive:u,render:e.href&&!e.disabled?J(h,e,o,void 0,u):void 0,tooltip:{children:_},disabled:e.disabled,className:x(`h-8 font-medium`,u&&`font-bold data-active:font-bold data-[active=true]:font-bold`,c&&`bg-sidebar-accent text-sidebar-foreground`,!c&&l&&`bg-sidebar-accent/60 text-sidebar-foreground`,e.disabled&&`cursor-not-allowed opacity-50`),children:o}),!!u&&(0,B.jsx)(d,{className:`gap-0.5`,children:e.children?.map((e,n)=>{let a=n===t||g(e.href),o=K(e.handle,e.badge,r),c=U(e),l=(0,B.jsxs)(B.Fragment,{children:[typeof c==`string`||typeof c==`number`?(0,B.jsx)(i,{tag:`span`,weight:a?`semibold`:`regular`,className:`min-w-0 flex-1 truncate text-inherit`,children:c}):c,!!o&&(0,B.jsx)(G,{value:o,size:`small`})]});return(0,B.jsx)(s,{children:(0,B.jsx)(L,{isActive:a,render:e.href&&!e.disabled?J(h,e,l,void 0,a):void 0,className:x(`w-full`,a&&`bg-transparent font-semibold text-primary hover:text-primary active:text-primary data-active:text-primary data-[active=true]:text-primary`),children:l})},W(e,n))})})]},W(e,a))}let S=(0,B.jsxs)(B.Fragment,{children:[!!e.icon&&(0,B.jsx)(q,{icon:e.icon,iconMap:n,className:`size-4`,"aria-hidden":`true`}),(0,B.jsx)(X,{item:e,active:c}),!!m&&(0,B.jsx)(G,{value:m})]});return(0,B.jsx)(p,{children:(0,B.jsx)(R,{isActive:c,render:e.href&&!e.disabled?J(h,e,S,void 0,c):void 0,tooltip:{children:_},disabled:e.disabled,className:x(`h-8 font-medium`,c&&`font-bold data-active:font-bold data-[active=true]:font-bold`,c&&`bg-sidebar-accent text-sidebar-foreground`,e.disabled&&`cursor-not-allowed opacity-50`),children:S})},W(e,a))},C=Object.entries(e).filter(([,e])=>e.length>0);return C.length===0?l??null:(0,B.jsx)(`div`,{className:m,children:C.map(([e,t],n)=>(0,B.jsxs)(z.Fragment,{children:[(0,B.jsxs)(c,{className:`px-2 py-0`,children:[!e.startsWith(`_`)&&(0,B.jsx)(_,{children:e}),(0,B.jsx)(u,{className:`gap-0.5`,children:t.map((e,t)=>S(e,0,t))})]}),n<C.length-1&&(0,B.jsx)(v,{className:`!mx-auto !my-1.5 !w-11/12 overflow-hidden px-4`})]},e))})}function ne({logo:e,collapsedLogo:t=null,className:n}){let{state:r}=m(),i=r===`collapsed`?t:e;return i?(0,B.jsx)(`div`,{className:x(`min-w-0`,n),children:i}):null}function Q({items:e,label:t,currentUrl:n=`/`,iconMap:r={},liveBadges:a,renderLink:s,LinkComponent:l,className:d}){let m=j({renderLink:s,LinkComponent:l});return(0,B.jsxs)(c,{className:x(`group-data-[collapsible=icon]:p-0`,d),children:[!!t&&(0,B.jsx)(_,{children:t}),(0,B.jsx)(f,{children:(0,B.jsx)(u,{className:`gap-0.5`,children:e.map((e,t)=>{let s=!!e.href&&H(n,V(e.href)),c=K(e.handle,e.badge,a),l=U(e),u=(0,B.jsxs)(B.Fragment,{children:[!!e.icon&&(0,B.jsx)(q,{icon:e.icon,iconMap:r,className:`size-4`,"aria-hidden":`true`}),typeof l==`string`||typeof l==`number`?(0,B.jsx)(i,{tag:`span`,className:`truncate text-inherit`,children:l}):l,!!c&&(0,B.jsx)(G,{value:c}),!!e.external&&(0,B.jsx)(o,{className:`ml-auto size-3 opacity-50`,"aria-hidden":`true`})]});return(0,B.jsx)(p,{children:(0,B.jsx)(R,{isActive:s,render:e.href&&!e.disabled?J(m,e,u,void 0,s):void 0,className:x(`h-8 font-medium text-sidebar-foreground/70 hover:text-sidebar-accent-foreground`,s&&`bg-sidebar-accent text-sidebar-accent-foreground`),tooltip:{children:l},disabled:e.disabled,children:u})},W(e,t))})})})]})}var re={label:`Workspace`,select:`Select workspace`};function $({logo:e,collapsedLogo:t,workspaceLinks:n,renderLink:r,LinkComponent:s,strings:c,contentClassName:l}){let d=y(re,c),f=j({renderLink:r,LinkComponent:s}),{state:h}=m(),g=h===`collapsed`;return(0,B.jsx)(u,{children:(0,B.jsx)(p,{children:(0,B.jsxs)(O,{children:[(0,B.jsxs)(T,{render:(0,B.jsx)(R,{size:`lg`,className:`data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground`}),children:[(0,B.jsxs)(`div`,{className:`flex min-w-0 flex-1 items-center gap-2`,children:[g?t??e:e,!g&&(0,B.jsx)(i,{tag:`span`,size:`xs`,className:`sr-only`,children:d.select})]}),!g&&(0,B.jsx)(a,{className:`ml-auto size-4 shrink-0`,"aria-hidden":`true`})]}),(0,B.jsx)(D,{className:x(`min-w-56`,l),align:`start`,side:`right`,sideOffset:8,children:(0,B.jsxs)(w,{children:[(0,B.jsx)(E,{children:(0,B.jsx)(i,{weight:`semibold`,children:d.label})}),(0,B.jsx)(C,{}),n.map(e=>{let t=(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(e.icon??o,{className:`size-4 shrink-0`,"aria-hidden":`true`}),(0,B.jsx)(i,{tag:`span`,size:`xs`,className:`text-inherit`,children:e.label})]});return(0,B.jsx)(S,{render:f({href:e.url,external:e.external??!0,children:null,className:`flex items-center gap-2`}),children:t},e.url)})]})})]})})})}function ie({navigationGroups:e,footerNavItems:t=[],footerLabel:n,logo:r,collapsedLogo:i,workspaceLinks:a=[],workspaceStrings:o,workspaceContentClassName:s,headerClassName:c,logoClassName:u,iconMap:d,currentUrl:f=`/`,liveBadges:p,renderLink:m,LinkComponent:_,loading:v,collapsible:y=`icon`,variant:b=`sidebar`,side:S=`left`,className:C,surfaceClassName:w,contentClassName:T,slots:E,renderItem:D}){let O=t.length>0||!!E?.footer,k=v||!e,j=a.length>0;return(0,B.jsxs)(Y,{collapsible:y,variant:b,side:S,className:x(`h-svh`,C),surfaceClassName:w,children:[E?.header??(!!r&&(0,B.jsx)(l,{className:c,children:j?(0,B.jsx)($,{logo:r,collapsedLogo:i,workspaceLinks:a,strings:o,contentClassName:s,renderLink:m,LinkComponent:_}):(0,B.jsx)(ne,{logo:r,collapsedLogo:i,className:u})})),(0,B.jsx)(h,{className:T,children:(0,B.jsxs)(A,{className:`h-full pr-1.5 pt-4`,children:[E?.beforeNavigation,k?E?.loading??(0,B.jsx)(ae,{}):(0,B.jsx)(Z,{navigationByGroups:e,currentUrl:f,iconMap:d,liveBadges:p,renderLink:m,LinkComponent:_,emptySlot:E?.empty,renderItem:D}),E?.afterNavigation]})}),O&&(0,B.jsx)(g,{children:E?.footer??(0,B.jsx)(Q,{items:t,label:n,currentUrl:f,iconMap:d,liveBadges:p,renderLink:m,LinkComponent:_})})]})}function ae(){let e=[9,3,4,2,1];return(0,B.jsx)(B.Fragment,{children:e.map((t,n)=>(0,B.jsxs)(z.Fragment,{children:[(0,B.jsx)(c,{className:`px-2 py-0`,children:(0,B.jsx)(u,{className:`gap-0.5`,children:Array.from({length:t},(e,t)=>(0,B.jsx)(p,{children:(0,B.jsxs)(`div`,{className:`flex h-8 items-center gap-2 px-2`,children:[(0,B.jsx)(k,{className:`h-4 w-4 shrink-0 rounded`}),(0,B.jsx)(k,{className:`h-3.5 rounded`,style:{width:`${60+(n*7+t*13)%40}px`}})]})},t))})}),n<e.length-1&&(0,B.jsx)(v,{className:`!mx-auto !my-1 !w-11/12 overflow-hidden px-4`})]},n))})}export{Y as a,W as c,J as d,K as f,Z as i,U as l,$ as n,q as o,V as p,Q as r,G as s,ie as t,H as u};

package/dist/showcase/assets/arrow-down-D0XbhSDi.js

@@ -0,0 +1 @@
+import{l as e}from"./index-B4sKWDcN.js";var t=e(`arrow-down`,[[`path`,{d:`M12 5v14`,key:`s699le`}],[`path`,{d:`m19 12-7 7-7-7`,key:`1idqje`}]]);export{t};

package/dist/showcase/assets/arrow-left-DBxsWbzL.js

@@ -0,0 +1 @@
+import{l as e}from"./index-B4sKWDcN.js";var t=e(`arrow-left`,[[`path`,{d:`m12 19-7-7 7-7`,key:`1l729n`}],[`path`,{d:`M19 12H5`,key:`x3x0zl`}]]);export{t};

package/dist/showcase/assets/arrow-right-Dk80zKWl.js

@@ -0,0 +1 @@
+import{l as e}from"./index-B4sKWDcN.js";var t=e(`arrow-right`,[[`path`,{d:`M5 12h14`,key:`1ays0h`}],[`path`,{d:`m12 5 7 7-7 7`,key:`xquz4c`}]]);export{t};

package/dist/showcase/assets/arrow-up-BiZ_VvpP.js

@@ -0,0 +1 @@
+import{l as e}from"./index-B4sKWDcN.js";var t=e(`arrow-up`,[[`path`,{d:`m5 12 7-7 7 7`,key:`hav0vg`}],[`path`,{d:`M12 19V5`,key:`x0mq9r`}]]);export{t};

package/dist/showcase/assets/arrow-up-right-OdmPQEwY.js

@@ -0,0 +1 @@
+import{l as e}from"./index-B4sKWDcN.js";var t=e(`arrow-up-right`,[[`path`,{d:`M7 7h10v10`,key:`1tivn9`}],[`path`,{d:`M7 17 17 7`,key:`1vkiza`}]]);export{t};

package/dist/showcase/assets/avatar-BThv_quW.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{d as n,n as r}from"./index-B4sKWDcN.js";import{a as i,i as a,n as o,o as s,r as c,t as l}from"./avatar-Dba0yVei.js";var u=e(t(),1),d=n(),f={small:`size-avatar-sm`,default:`size-avatar`};function p(e){return e===`small`||e==="default"?e:e===`xs`||e===`sm`?`small`:`default`}function m(e){return e===`small`?`sm`:`default`}var h=u.forwardRef(({size:e=`default`,className:t,...n},i)=>{let a=p(e);return(0,d.jsx)(l,{ref:i,size:m(a),"data-scale":a,className:r(`avatar--component`,f[a],t),...n})});h.displayName=`Avatar`;var g=u.forwardRef(({className:e,...t},n)=>(0,d.jsx)(s,{ref:n,className:r(`avatar--image`,e),...t}));g.displayName=`AvatarImage`;var _=u.forwardRef(({className:e,...t},n)=>(0,d.jsx)(c,{ref:n,className:r(`avatar--fallback text-xs font-medium leading-none`,e),...t}));_.displayName=`AvatarFallback`;var v=u.forwardRef(({className:e,...t},n)=>(0,d.jsx)(o,{ref:n,className:r(`avatar--badge`,e),...t}));v.displayName=`AvatarBadge`;var y=u.forwardRef(({className:e,...t},n)=>(0,d.jsx)(a,{ref:n,className:r(`avatar-group--component`,e),...t}));y.displayName=`AvatarGroup`;var b=u.forwardRef(({className:e,...t},n)=>(0,d.jsx)(i,{ref:n,className:r(`avatar-group-count--component size-avatar text-xs`,`group-has-data-[size=sm]/avatar-group:size-avatar-sm`,e),...t}));b.displayName=`AvatarGroupCount`;export{b as a,y as i,v as n,g as o,_ as r,h as t};

package/dist/showcase/assets/avatar-Bcy2snIC.js

@@ -0,0 +1,67 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,o as n,t as r}from"./section-C_rLy6Zn.js";import{t as i}from"./example-BsDQngs7.js";import{t as a}from"./circle-check-BjuHEm7p.js";import{d as o}from"./index-B4sKWDcN.js";import{t as s}from"./props-table-aynAz90t.js";import{o as c,r as l,t as u}from"./avatar-BThv_quW.js";import{t as d}from"./stacked-avatars-Ds8eV_Nx.js";import{c as f,i as p,n as m,r as h,t as g,u as _}from"./item-WOhHNpnr.js";import{t as v}from"./customers-DvBxRjHv.js";var y=e({AvatarSizes:()=>x,RealisticUserCard:()=>C,StackedAvatarsExample:()=>S}),b=o();function x(){return(0,b.jsxs)(`div`,{className:`flex items-end gap-space-md`,children:[(0,b.jsxs)(u,{size:`small`,children:[(0,b.jsx)(c,{src:`https://api.dicebear.com/7.x/avataaars/svg?seed=sarah`}),(0,b.jsx)(l,{children:`SS`})]}),(0,b.jsx)(u,{children:(0,b.jsx)(l,{children:`ML`})}),(0,b.jsxs)(u,{children:[(0,b.jsx)(c,{src:`https://api.dicebear.com/7.x/avataaars/svg?seed=aiko`}),(0,b.jsx)(l,{children:`AT`})]}),(0,b.jsx)(u,{className:`size-avatar-lg`,children:(0,b.jsx)(l,{children:`DR`})})]})}function S(){return(0,b.jsx)(d,{users:v.slice(0,5).map(e=>({id:e.id,name:e.name,imageUrl:`https://api.dicebear.com/7.x/avataaars/svg?seed=${e.avatarSeed}`})),max:3})}function C(){let e=v[0];return(0,b.jsxs)(g,{variant:`outline`,padding:`default`,className:`w-full max-w-md`,children:[(0,b.jsx)(f,{variant:`avatar`,children:(0,b.jsxs)(u,{children:[(0,b.jsx)(c,{src:`https://api.dicebear.com/7.x/avataaars/svg?seed=${e.avatarSeed}`}),(0,b.jsx)(l,{children:e.name.split(` `).map(e=>e[0]).join(``)})]})}),(0,b.jsxs)(h,{children:[(0,b.jsx)(_,{children:e.name}),(0,b.jsx)(p,{clamp:1,children:e.email})]}),(0,b.jsx)(m,{children:(0,b.jsxs)(n,{variant:`success`,className:`whitespace-nowrap`,children:[(0,b.jsx)(a,{className:`size-icon-sm`}),`Verified`]})})]})}var w=`import { CheckCircle2 } from 'lucide-react';
+
+import { Badge } from '@/components/base/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/base/display/avatar';
+import { StackedAvatars } from '@/components/base/display/stacked-avatars';
+import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/base/item';
+import { MOCK_CUSTOMERS } from '@/preview/_mocks';
+
+export function AvatarSizes() {
+	return (
+		<div className="flex items-end gap-space-md">
+			<Avatar size="small">
+				<AvatarImage src="https://api.dicebear.com/7.x/avataaars/svg?seed=sarah" />
+				<AvatarFallback>SS</AvatarFallback>
+			</Avatar>
+			<Avatar>
+				<AvatarFallback>ML</AvatarFallback>
+			</Avatar>
+			<Avatar>
+				<AvatarImage src="https://api.dicebear.com/7.x/avataaars/svg?seed=aiko" />
+				<AvatarFallback>AT</AvatarFallback>
+			</Avatar>
+			<Avatar className="size-avatar-lg">
+				<AvatarFallback>DR</AvatarFallback>
+			</Avatar>
+		</div>
+	);
+}
+
+export function StackedAvatarsExample() {
+	return (
+		<StackedAvatars
+			users={MOCK_CUSTOMERS.slice(0, 5).map((customer) => ({
+				id: customer.id,
+				name: customer.name,
+				imageUrl: \`https://api.dicebear.com/7.x/avataaars/svg?seed=\${customer.avatarSeed}\`,
+			}))}
+			max={3}
+		/>
+	);
+}
+
+export function RealisticUserCard() {
+	const customer = MOCK_CUSTOMERS[0];
+
+	return (
+		<Item variant="outline" padding="default" className="w-full max-w-md">
+			<ItemMedia variant="avatar">
+				<Avatar>
+					<AvatarImage src={\`https://api.dicebear.com/7.x/avataaars/svg?seed=\${customer.avatarSeed}\`} />
+					<AvatarFallback>{customer.name.split(' ').map((part) => part[0]).join('')}</AvatarFallback>
+				</Avatar>
+			</ItemMedia>
+			<ItemContent>
+				<ItemTitle>{customer.name}</ItemTitle>
+				<ItemDescription clamp={1}>{customer.email}</ItemDescription>
+			</ItemContent>
+			<ItemActions>
+				<Badge variant="success" className="whitespace-nowrap">
+					<CheckCircle2 className="size-icon-sm" />
+					Verified
+				</Badge>
+			</ItemActions>
+		</Item>
+	);
+}
+`;function T(e){return y||D(`Examples`,!1),x||D(`Examples.AvatarSizes`,!0),C||D(`Examples.RealisticUserCard`,!0),S||D(`Examples.StackedAvatarsExample`,!0),(0,b.jsxs)(t,{title:`Avatar`,description:`Avatar, fallback initials, and stacked avatars for compact identity surfaces.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/display/avatar`,children:[(0,b.jsxs)(r,{title:`Examples`,id:`examples`,children:[(0,b.jsx)(i,{name:`AvatarSizes`,source:w,children:(0,b.jsx)(x,{})}),(0,b.jsx)(i,{name:`StackedAvatarsExample`,source:w,children:(0,b.jsx)(S,{})}),(0,b.jsx)(i,{name:`RealisticUserCard`,source:w,children:(0,b.jsx)(C,{})})]}),(0,b.jsxs)(r,{title:`API`,id:`api`,children:[(0,b.jsx)(s,{component:`Avatar`}),(0,b.jsx)(s,{component:`StackedAvatars`})]})]})}function E(e={}){let{wrapper:t}=e.components||{};return t?(0,b.jsx)(t,{...e,children:(0,b.jsx)(T,{...e})}):T(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{E as default};