admin-ui-starter-kit 0.1.3 → 0.4.2

package/dist/showcase/assets/mention-inline-suggestions-DyW6IwL8.js

@@ -0,0 +1 @@
+import{Er as e,kr as t,r as n,yr as r}from"./example-BIrQab7K.js";import{k as i,n as a,s as o}from"./index-Cz4UGUT2.js";import{t as s}from"./popover-CECpX3MQ.js";import{i as c}from"./command-BtaMPVtf.js";import{a as l,i as u,n as d,r as f,t as p}from"./command-C37Q471b.js";var m=o(),h={primary:`secondary`,success:`success`,warning:`warning`,destructive:`destructive`,info:`info`,secondary:`secondary`},g=({mention:e,resource:t,asLink:n=!0,onClick:i,trailing:o,className:s})=>{if(t?.renderChip)return(0,m.jsx)(m.Fragment,{children:t.renderChip(e)});let c=h[t?.tone??`secondary`]??h.secondary,l=t?.icon,u=(0,m.jsxs)(r,{variant:c,inline:!0,"data-ref-id":e.id,"data-ref-kind":e.kind,className:a(`mention-chip--component`,`align-[-0.15em] cursor-default whitespace-nowrap`,s),children:[l?(0,m.jsx)(l,{className:`size-3 shrink-0`,"aria-hidden":!0}):null,(0,m.jsx)(`span`,{className:`truncate max-w-[14rem]`,children:e.label}),o]});return n&&e.href?(0,m.jsx)(`a`,{href:e.href,target:`_blank`,rel:`noreferrer noopener`,onClick:i,className:`inline align-baseline no-underline hover:opacity-90`,children:u}):i?(0,m.jsx)(`span`,{onClick:i,className:`inline align-baseline`,children:u}):u},_={title:`Insert reference`,searchPlaceholder:`Search…`,empty:`No matches.`,loading:`Searching…`},v={title:`Insert reference`,empty:`No matches.`,loading:`Searching…`};function y({open:r,activeKind:o,setActiveKind:h,kinds:g,resources:v,query:y,setQuery:b,suggestions:x,isLoading:S,onSelect:C,strings:w,className:T}){let E=i(_,w);return r?(0,m.jsxs)(s,{align:`start`,className:a(`mention-picker--component`,`w-72 overflow-hidden p-0`,T),children:[(0,m.jsxs)(`div`,{className:`border-b border-border/60 px-3 py-2`,children:[(0,m.jsx)(e,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wide`,children:E.title}),g.length>1&&(0,m.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-1`,children:g.map(e=>{let t=v?.[e],r=t?.icon,i=e===o;return(0,m.jsxs)(n,{type:`button`,variant:i?`primary`:`secondary`,buttonStyle:i?`solid`:`ghost`,size:`xs`,onClick:()=>h(e),className:a(`h-auto gap-1 rounded px-1.5 py-0.5 text-xxs font-medium ring-1 ring-inset transition-colors`,i?`bg-primary text-primary-foreground ring-primary`:`bg-muted text-muted-foreground ring-border/60 hover:bg-muted/80`),children:[r?(0,m.jsx)(r,{className:`size-3`}):null,(0,m.jsx)(`span`,{children:t?.label??String(e)})]},e)})})]}),(0,m.jsxs)(p,{shouldFilter:!1,children:[(0,m.jsx)(c,{placeholder:E.searchPlaceholder,value:y,onValueChange:b}),(0,m.jsxs)(l,{children:[S?(0,m.jsxs)(`div`,{className:`text-muted-foreground flex items-center justify-center gap-2 py-3`,children:[(0,m.jsx)(t,{className:`size-3.5 animate-spin`,"aria-hidden":!0}),(0,m.jsx)(e,{tag:`span`,size:`xs`,type:`secondary`,children:E.loading})]}):null,(0,m.jsx)(d,{children:E.empty}),(0,m.jsx)(f,{children:x.map(t=>{let n=t.kind??o??``;return(0,m.jsx)(u,{value:`${n}:${t.id}`,onSelect:()=>C(t),children:(0,m.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col leading-tight`,children:[(0,m.jsx)(e,{tag:`span`,size:`xs`,weight:`medium`,className:`truncate`,children:t.label}),t.description?(0,m.jsx)(e,{tag:`span`,size:`xxs`,type:`secondary`,className:`mt-0.5 truncate`,children:t.description}):null]})},`${n}:${t.id}`)})})]})]})]}):null}function b({open:r,activeKind:o,setActiveKind:s,kinds:c,resources:l,suggestionsByKind:u,suggestions:d,isLoading:f,query:p,onManualKindChange:h,onSelect:g,strings:_,className:y}){let b=i(v,_);return r?(0,m.jsxs)(`div`,{onMouseDown:e=>e.preventDefault(),className:a(`mention-inline-suggestions--component`,`bg-popover text-popover-foreground absolute left-0 top-full z-40 mt-1 w-80 max-w-[min(theme(spacing.96),100%)]`,`border-border/60 rounded-md border shadow-md ring-1 ring-foreground/[0.04]`,`overflow-hidden`,y),children:[(0,m.jsxs)(`div`,{className:`border-b border-border/60 px-3 py-2`,children:[(0,m.jsxs)(`div`,{className:`flex items-baseline justify-between gap-2`,children:[(0,m.jsx)(e,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wide`,children:b.title}),p?(0,m.jsxs)(e,{tag:`span`,size:`xxs`,type:`secondary`,className:`truncate font-mono`,children:[`“`,p,`”`]}):null]}),c.length>1&&(0,m.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-1`,children:c.map(e=>{let t=l?.[e],r=t?.icon,i=e===o,c=u?.[e]?.length??0;return(0,m.jsxs)(n,{type:`button`,variant:i?`primary`:`secondary`,buttonStyle:i?`solid`:`ghost`,size:`xs`,onClick:()=>{s(e),h?.()},className:a(`h-auto gap-1 rounded px-1.5 py-0.5 text-xxs font-medium ring-1 ring-inset transition-colors`,i?`bg-primary text-primary-foreground ring-primary`:c>0?`bg-muted text-foreground ring-border/60 hover:bg-muted/80`:`bg-muted/40 text-muted-foreground ring-border/40 hover:bg-muted/60`),children:[r?(0,m.jsx)(r,{className:`size-3`}):null,(0,m.jsx)(`span`,{children:t?.label??String(e)}),c>0&&(0,m.jsx)(`span`,{className:a(`tabular-nums`,i?`opacity-90`:`opacity-70`),children:c})]},e)})})]}),(0,m.jsxs)(`div`,{className:`max-h-72 overflow-y-auto py-1`,...d.length>0?{role:`listbox`,"aria-label":b.title}:{},children:[f?(0,m.jsxs)(`div`,{className:`text-muted-foreground flex items-center justify-center gap-2 py-3`,children:[(0,m.jsx)(t,{className:`size-3.5 animate-spin`,"aria-hidden":!0}),(0,m.jsx)(e,{tag:`span`,size:`xs`,type:`secondary`,children:b.loading})]}):null,!f&&d.length===0?(0,m.jsx)(`div`,{className:`px-3 py-3`,children:(0,m.jsx)(e,{size:`xs`,type:`secondary`,children:b.empty})}):null,d.map(t=>{let r=t.kind??o??``;return(0,m.jsx)(n,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`sm`,role:`option`,"data-ref-id":`${r}:${t.id}`,onClick:()=>g(t),className:a(`h-auto w-full min-w-0 justify-start gap-2 rounded-none px-3 py-1.5 text-left`,`hover:bg-muted/60 focus-visible:bg-muted/60 transition-colors`),children:(0,m.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col leading-tight`,children:[(0,m.jsx)(e,{tag:`span`,size:`xs`,weight:`medium`,className:`truncate`,children:t.label}),t.description?(0,m.jsx)(e,{tag:`span`,size:`xxs`,type:`secondary`,className:`mt-0.5 truncate`,children:t.description}):null]})},`${r}:${t.id}`)})]})]}):null}export{y as n,g as r,b as t};

package/dist/showcase/assets/mentions-Ea4pSJqG.js

@@ -0,0 +1,138 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,hr as i,mr as a,r as o,t as s,yr as c}from"./example-BIrQab7K.js";import{t as l}from"./calendar-days-pr8kXiTx.js";import{t as u}from"./hash-CtBGoIvf.js";import{a as d,s as f}from"./index-Cz4UGUT2.js";import{t as p}from"./props-table-BR-KjRNe.js";import{i as m,t as h}from"./popover-BSB11Qjp.js";import{n as g,r as _,t as v}from"./mention-inline-suggestions-DyW6IwL8.js";var y=d(`user-round`,[[`circle`,{cx:`12`,cy:`8`,r:`5`,key:`1hypcn`}],[`path`,{d:`M20 21a8 8 0 0 0-16 0`,key:`rfgkzh`}]]),b=e({InlineMentionSuggestions:()=>T,MentionPickerPopover:()=>E}),x=t(n(),1),S=f(),C={user:{label:`People`,icon:y,trigger:`@`,tone:`primary`},booking:{label:`Bookings`,icon:l,trigger:`#`,tone:`info`}},w=[{id:`user-1`,kind:`user`,label:`Maya Chen`,description:`Account owner`},{id:`booking-1048`,kind:`booking`,label:`Booking #1048`,description:`Chef table, Jun 24`}];function T(){let[e,t]=(0,x.useState)(`user`),[n,i]=(0,x.useState)(null),a=w.filter(t=>t.kind===e);return(0,S.jsxs)(`div`,{className:`space-y-3`,children:[(0,S.jsxs)(`div`,{className:`relative min-h-44 rounded-md border border-border/60 bg-card p-3`,children:[(0,S.jsxs)(r,{size:`sm`,children:[`Loop `,(0,S.jsx)(`span`,{className:`font-medium text-primary`,children:`@ma`}),` into the booking note.`]}),(0,S.jsx)(v,{open:!0,activeKind:e,setActiveKind:t,kinds:[`user`,`booking`],resources:C,query:`ma`,suggestions:a,suggestionsByKind:{user:w.filter(e=>e.kind===`user`),booking:w.filter(e=>e.kind===`booking`)},isLoading:!1,onSelect:i})]}),n?(0,S.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,S.jsx)(r,{size:`xs`,type:`secondary`,children:`Selected`}),(0,S.jsx)(c,{variant:`secondary`,children:n.label})]}):null]})}function E(){let[e,t]=(0,x.useState)(!1),[n,i]=(0,x.useState)(`user`),[a,s]=(0,x.useState)(``),[c,l]=(0,x.useState)(null),d=w.filter(e=>{let t=n===null||e.kind===n,r=e.label.toLowerCase().includes(a.toLowerCase());return t&&r});return(0,S.jsxs)(`div`,{className:`space-y-3`,children:[(0,S.jsxs)(h,{open:e,onOpenChange:t,children:[(0,S.jsx)(m,{asChild:!0,children:(0,S.jsx)(o,{type:`button`,variant:`secondary`,icon:u,children:`Add reference`})}),(0,S.jsx)(g,{open:e,activeKind:n,setActiveKind:i,kinds:[`user`,`booking`],resources:C,query:a,setQuery:s,suggestions:d,isLoading:!1,onSelect:e=>{l(e),t(!1)}})]}),c?(0,S.jsx)(_,{mention:{id:c.id,kind:c.kind??`user`,label:c.label},resource:C[c.kind??`user`]}):(0,S.jsx)(r,{size:`xs`,type:`secondary`,children:`No reference selected.`})]})}var D=`import { useState } from 'react';
+import { CalendarDays, Hash, UserRound } from 'lucide-react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { Popover, PopoverTrigger } from '@/components/base/popover';
+import {
+	MentionChip,
+	MentionInlineSuggestions,
+	MentionPicker,
+	type MentionSuggestion,
+} from '@/components/features/mentions';
+import { Text } from '@/components/typography';
+
+type Kind = 'user' | 'booking';
+
+const resources = {
+	user: {
+		label: 'People',
+		icon: UserRound,
+		trigger: '@',
+		tone: 'primary' as const,
+	},
+	booking: {
+		label: 'Bookings',
+		icon: CalendarDays,
+		trigger: '#',
+		tone: 'info' as const,
+	},
+};
+
+const suggestions: MentionSuggestion<Kind>[] = [
+	{
+		id: 'user-1',
+		kind: 'user',
+		label: 'Maya Chen',
+		description: 'Account owner',
+	},
+	{
+		id: 'booking-1048',
+		kind: 'booking',
+		label: 'Booking #1048',
+		description: 'Chef table, Jun 24',
+	},
+];
+
+export function InlineMentionSuggestions() {
+	const [activeKind, setActiveKind] = useState<Kind | null>('user');
+	const [selected, setSelected] = useState<MentionSuggestion<Kind> | null>(null);
+	const visibleSuggestions = suggestions.filter((item) => item.kind === activeKind);
+
+	return (
+		<div className="space-y-3">
+			<div className="relative min-h-44 rounded-md border border-border/60 bg-card p-3">
+				<Text size="sm">
+					Loop <span className="font-medium text-primary">@ma</span> into the booking note.
+				</Text>
+				<MentionInlineSuggestions
+					open
+					activeKind={activeKind}
+					setActiveKind={setActiveKind}
+					kinds={['user', 'booking']}
+					resources={resources}
+					query="ma"
+					suggestions={visibleSuggestions}
+					suggestionsByKind={{
+						user: suggestions.filter((item) => item.kind === 'user'),
+						booking: suggestions.filter((item) => item.kind === 'booking'),
+					}}
+					isLoading={false}
+					onSelect={setSelected}
+				/>
+			</div>
+			{selected ? (
+				<div className="flex items-center gap-2">
+					<Text size="xs" type="secondary">
+						Selected
+					</Text>
+					<Badge variant="secondary">{selected.label}</Badge>
+				</div>
+			) : null}
+		</div>
+	);
+}
+
+export function MentionPickerPopover() {
+	const [open, setOpen] = useState(false);
+	const [activeKind, setActiveKind] = useState<Kind | null>('user');
+	const [query, setQuery] = useState('');
+	const [selected, setSelected] = useState<MentionSuggestion<Kind> | null>(null);
+	const filtered = suggestions.filter((item) => {
+		const matchesKind = activeKind === null || item.kind === activeKind;
+		const matchesQuery = item.label.toLowerCase().includes(query.toLowerCase());
+		return matchesKind && matchesQuery;
+	});
+
+	return (
+		<div className="space-y-3">
+			<Popover open={open} onOpenChange={setOpen}>
+				<PopoverTrigger asChild>
+					<Button type="button" variant="secondary" icon={Hash}>
+						Add reference
+					</Button>
+				</PopoverTrigger>
+				<MentionPicker
+					open={open}
+					activeKind={activeKind}
+					setActiveKind={setActiveKind}
+					kinds={['user', 'booking']}
+					resources={resources}
+					query={query}
+					setQuery={setQuery}
+					suggestions={filtered}
+					isLoading={false}
+					onSelect={(item) => {
+						setSelected(item);
+						setOpen(false);
+					}}
+				/>
+			</Popover>
+			{selected ? (
+				<MentionChip
+					mention={{
+						id: selected.id,
+						kind: selected.kind ?? 'user',
+						label: selected.label,
+					}}
+					resource={resources[selected.kind ?? 'user']}
+				/>
+			) : (
+				<Text size="xs" type="secondary">
+					No reference selected.
+				</Text>
+			)}
+		</div>
+	);
+}
+`;function O(e){let t={h4:`h4`,...e.components};return b||A(`Examples`,!1),T||A(`Examples.InlineMentionSuggestions`,!0),E||A(`Examples.MentionPickerPopover`,!0),(0,S.jsxs)(i,{title:`Features · Mentions`,description:`Inline resource references for editors, comments, and event logs. Consumers provide resource registries and search callbacks; the package provides chips, picker UI, inline suggestions, parsing helpers, and headless hooks.`,layer:`features`,status:`ready`,sourcePath:`src/components/features/mentions`,children:[(0,S.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,S.jsx)(s,{name:`InlineMentionSuggestions`,source:D,children:(0,S.jsx)(T,{})}),(0,S.jsx)(s,{name:`MentionPickerPopover`,source:D,children:(0,S.jsx)(E,{})})]}),(0,S.jsxs)(a,{title:`API`,id:`api`,children:[(0,S.jsx)(t.h4,{children:`MentionInlineSuggestions`}),(0,S.jsx)(p,{component:`MentionInlineSuggestions`}),(0,S.jsx)(t.h4,{children:`MentionPicker`}),(0,S.jsx)(p,{component:`MentionPicker`}),(0,S.jsx)(t.h4,{children:`MentionChip`}),(0,S.jsx)(p,{component:`MentionChip`})]})]})}function k(e={}){let{wrapper:t}=e.components||{};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(O,{...e})}):O(e)}function A(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/menus-CJjtE4fD.js

@@ -0,0 +1,89 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{An as r,Ar as i,Gn as a,Ht as o,It as s,Ln as c,Sn as l,Un as u,Vt as d,Wt as ee,hr as f,mr as p,pn as te,t as m,ut as h,xn as g,y as ne}from"./example-BIrQab7K.js";import{t as _}from"./square-pen-CfvmmXYo.js";import{t as v}from"./trash-2-OsaEm8cc.js";import{n as y,s as b}from"./index-Cz4UGUT2.js";import{_ as x,a as S,b as C,c as w,d as T,f as E,g as D,h as O,l as k,m as A,o as j,p as M,r as N,t as P,u as re,v as F,y as I}from"./dropdown-menu-bPWrLPgm.js";import{t as ie}from"./Separator-KsPLUEno.js";import{a as L,i as ae,n as oe,o as se,r as R,t as ce}from"./command-BtaMPVtf.js";var z=t(n()),B=b();function V(e){let[t,n]=z.useState({getBoundingClientRect(){return DOMRect.fromRect({width:0,height:0,x:0,y:0})}}),r=z.useRef(null),i=z.useRef(null),a=z.useRef(null),o=z.useRef(null),s=z.useRef(!0),c=z.useRef(null),l=h(),u=z.useMemo(()=>({anchor:t,setAnchor:n,actionsRef:a,backdropRef:r,internalBackdropRef:i,positionerRef:o,allowMouseUpTriggerRef:s,initialCursorPointRef:c,rootId:l}),[t,l]);return(0,B.jsx)(x.Provider,{value:u,children:(0,B.jsx)(I.Provider,{value:void 0,children:(0,B.jsx)(T,{...e})})})}var H=500,U=z.forwardRef(function(e,t){let{render:n,className:i,style:u,...f}=e,{setAnchor:p,actionsRef:m,internalBackdropRef:h,backdropRef:_,positionerRef:v,allowMouseUpTriggerRef:y,initialCursorPointRef:b,rootId:x}=F(!1),{store:S}=C(!1),w=S.useState(`open`),T=S.useState(`disabled`),E=z.useRef(null),D=z.useRef(null),O=c(),k=c(),A=z.useRef(!1);function j(e,t,n){let r=n.type.startsWith(`touch`);b.current={x:e,y:t},p({getBoundingClientRect(){return DOMRect.fromRect({width:r?10:0,height:r?10:0,x:e,y:t})}}),A.current=!1,m.current?.setOpen(!0,o(te,n)),k.start(H,()=>{A.current=!0})}function M(e){T||(y.current=!0,r(e),j(e.clientX,e.clientY,e.nativeEvent),d(s(E.current),`mouseup`,e=>{if(y.current=!1,!A.current)return;k.clear(),A.current=!1;let t=l(e);g(v.current,t)||x&&t&&re(t)===x||m.current?.setOpen(!1,o(ee,e))},{once:!0}))}function N(e){if(!T&&(y.current=!1,e.touches.length===1)){e.stopPropagation();let t=e.touches[0];D.current={x:t.clientX,y:t.clientY},O.start(H,()=>{D.current&&j(D.current.x,D.current.y,e.nativeEvent)})}}function P(e){if(O.isStarted()&&D.current&&e.touches.length===1){let t=e.touches[0],n=Math.abs(t.clientX-D.current.x),r=Math.abs(t.clientY-D.current.y);(n>10||r>10)&&O.clear()}}function I(){O.clear(),D.current=null}return z.useEffect(()=>{function e(e){if(T)return;let t=l(e);(g(E.current,t)||g(h.current,t)||g(_.current,t))&&e.preventDefault()}return d(s(E.current),`contextmenu`,e)},[_,T,h]),a(`div`,e,{state:{open:w},ref:[E,t],props:[{onContextMenu:M,onTouchStart:N,onTouchMove:P,onTouchEnd:I,onTouchCancel:I,style:{WebkitTouchCallout:`none`}},f],stateAttributesMapping:ne})});function W({...e}){return(0,B.jsx)(V,{"data-slot":`context-menu`,...e})}function le({className:e,...t}){return(0,B.jsx)(U,{"data-slot":`context-menu-trigger`,className:y(`select-none`,e),...t})}function ue({className:e,align:t=`start`,alignOffset:n=4,side:r=`right`,sideOffset:i=0,...a}){return(0,B.jsx)(M,{children:(0,B.jsx)(E,{className:`isolate z-50 outline-none`,align:t,alignOffset:n,side:r,sideOffset:i,children:(0,B.jsx)(A,{"data-slot":`context-menu-content`,className:y(`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none`,e),...a})})})}function G({className:e,inset:t,...n}){return(0,B.jsx)(D,{"data-slot":`context-menu-label`,"data-inset":t,className:y(`text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8`,e),...n})}function K({className:e,inset:t,variant:n=`default`,...r}){return(0,B.jsx)(O,{"data-slot":`context-menu-item`,"data-inset":t,"data-variant":n,className:y(`focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0`,e),...r})}function q({className:e,...t}){return(0,B.jsx)(ie,{"data-slot":`context-menu-separator`,className:y(`bg-border -mx-1 my-1 h-px`,e),...t})}var de=e({CommandPalette:()=>X,ContextMenuRightClick:()=>Y,DropdownMenuExample:()=>J});function J(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsxs)(P,{children:[(0,B.jsx)(k,{render:e=>(0,B.jsx)(u,{variant:`outline`,...e,children:`Open menu`})}),(0,B.jsxs)(N,{children:[(0,B.jsx)(j,{children:`Actions`}),(0,B.jsx)(w,{}),(0,B.jsxs)(S,{children:[(0,B.jsx)(_,{className:`size-3.5`}),` Edit`]}),(0,B.jsxs)(S,{children:[(0,B.jsx)(i,{className:`size-3.5`}),` Duplicate`]}),(0,B.jsx)(w,{}),(0,B.jsxs)(S,{variant:`destructive`,children:[(0,B.jsx)(v,{className:`size-3.5`}),` Delete`]})]})]})})}function Y(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsxs)(W,{children:[(0,B.jsx)(le,{children:(0,B.jsx)(`div`,{className:`flex h-24 w-full items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground`,children:`Right-click here`})}),(0,B.jsxs)(ue,{children:[(0,B.jsx)(G,{children:`File`}),(0,B.jsx)(q,{}),(0,B.jsxs)(K,{children:[(0,B.jsx)(_,{className:`size-3.5`}),` Rename`]}),(0,B.jsxs)(K,{children:[(0,B.jsx)(i,{className:`size-3.5`}),` Copy`]}),(0,B.jsx)(q,{}),(0,B.jsxs)(K,{variant:`destructive`,children:[(0,B.jsx)(v,{className:`size-3.5`}),` Delete`]})]})]})})}function X(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsxs)(ce,{className:`rounded-md border border-border`,children:[(0,B.jsx)(ae,{placeholder:`Type a command…`}),(0,B.jsxs)(se,{children:[(0,B.jsx)(oe,{children:`No results.`}),(0,B.jsxs)(R,{heading:`Actions`,children:[(0,B.jsx)(L,{children:`Create order`}),(0,B.jsx)(L,{children:`Add customer`}),(0,B.jsx)(L,{children:`Generate invoice`})]}),(0,B.jsxs)(R,{heading:`Navigation`,children:[(0,B.jsx)(L,{children:`Go to Orders`}),(0,B.jsx)(L,{children:`Go to Settings`})]})]})]})})}var Z=`import { Edit, Trash2, Copy } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuLabel,
+	ContextMenuSeparator,
+	ContextMenuTrigger,
+} from '@/components/ui/context-menu';
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from '@/components/ui/command';
+
+export function DropdownMenuExample() {
+	return (
+		<>
+			<DropdownMenu>
+								<DropdownMenuTrigger render={(p) => <Button variant="outline" {...p}>Open menu</Button>} />
+								<DropdownMenuContent>
+									<DropdownMenuLabel>Actions</DropdownMenuLabel>
+									<DropdownMenuSeparator />
+									<DropdownMenuItem><Edit className="size-3.5" /> Edit</DropdownMenuItem>
+									<DropdownMenuItem><Copy className="size-3.5" /> Duplicate</DropdownMenuItem>
+									<DropdownMenuSeparator />
+									<DropdownMenuItem variant="destructive"><Trash2 className="size-3.5" /> Delete</DropdownMenuItem>
+								</DropdownMenuContent>
+							</DropdownMenu>
+		</>
+	);
+}
+
+export function ContextMenuRightClick() {
+	return (
+		<>
+			<ContextMenu>
+								<ContextMenuTrigger>
+									<div className="flex h-24 w-full items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground">
+										Right-click here
+									</div>
+								</ContextMenuTrigger>
+								<ContextMenuContent>
+									<ContextMenuLabel>File</ContextMenuLabel>
+									<ContextMenuSeparator />
+									<ContextMenuItem><Edit className="size-3.5" /> Rename</ContextMenuItem>
+									<ContextMenuItem><Copy className="size-3.5" /> Copy</ContextMenuItem>
+									<ContextMenuSeparator />
+									<ContextMenuItem variant="destructive"><Trash2 className="size-3.5" /> Delete</ContextMenuItem>
+								</ContextMenuContent>
+							</ContextMenu>
+		</>
+	);
+}
+
+export function CommandPalette() {
+	return (
+		<>
+			<Command className="rounded-md border border-border">
+								<CommandInput placeholder="Type a command…" />
+								<CommandList>
+									<CommandEmpty>No results.</CommandEmpty>
+									<CommandGroup heading="Actions">
+										<CommandItem>Create order</CommandItem>
+										<CommandItem>Add customer</CommandItem>
+										<CommandItem>Generate invoice</CommandItem>
+									</CommandGroup>
+									<CommandGroup heading="Navigation">
+										<CommandItem>Go to Orders</CommandItem>
+										<CommandItem>Go to Settings</CommandItem>
+									</CommandGroup>
+								</CommandList>
+							</Command>
+		</>
+	);
+}
+`;function Q(e){return de||$(`Examples`,!1),X||$(`Examples.CommandPalette`,!0),Y||$(`Examples.ContextMenuRightClick`,!0),J||$(`Examples.DropdownMenuExample`,!0),(0,B.jsx)(f,{title:`UI · Menus`,description:`DropdownMenu, ContextMenu, Command palette.`,layer:`ui`,status:`ready`,children:(0,B.jsxs)(p,{title:`Examples`,id:`examples`,children:[(0,B.jsx)(m,{name:`DropdownMenuExample`,source:Z,children:(0,B.jsx)(J,{})}),(0,B.jsx)(m,{name:`ContextMenuRightClick`,source:Z,children:(0,B.jsx)(Y,{})}),(0,B.jsx)(m,{name:`CommandPalette`,source:Z,children:(0,B.jsx)(X,{})})]})})}function fe(e={}){let{wrapper:t}=e.components||{};return t?(0,B.jsx)(t,{...e,children:(0,B.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/message-square-B0RnrJV6.js

@@ -0,0 +1 @@
+import{a as e}from"./index-Cz4UGUT2.js";var t=e(`message-square`,[[`path`,{d:`M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z`,key:`18887p`}]]);export{t};

package/dist/showcase/assets/metadata-list-DkN9yfTj.js

@@ -0,0 +1,288 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Ar as r,Er as i,hr as a,jr as ee,mr as o,r as te,t as s,yr as c}from"./example-BIrQab7K.js";import{t as l}from"./badge-check-BRAVo7dA.js";import{t as u}from"./building-2-zgcwuzxP.js";import{t as d}from"./calendar-days-pr8kXiTx.js";import{t as f}from"./clock-DuBsP5t3.js";import{t as ne}from"./credit-card-CYgRtM77.js";import{t as p}from"./external-link-DuJlM_H4.js";import{t as re}from"./git-branch-D9jt-u1q.js";import{t as m}from"./globe-BJHI134i.js";import{t as h}from"./hash-CtBGoIvf.js";import{t as g}from"./mail-w1nhszbW.js";import{t as _}from"./map-pin-DUl-Lt6t.js";import{t as v}from"./phone-DCNFH5yg.js";import{t as y}from"./shield-check-CRbBJXw2.js";import{t as b}from"./user-Bqmz8M16.js";import{a as x,s as ie}from"./index-Cz4UGUT2.js";import{t as ae}from"./props-table-BR-KjRNe.js";import{t as S}from"./smart-card-B4P_C0nk.js";import{r as oe,t as se}from"./avatar-5EFTnHEG.js";import{t as C}from"./metadata-list-fm8e58ID.js";var w=x(`tag`,[[`path`,{d:`M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z`,key:`vktsd0`}],[`circle`,{cx:`7.5`,cy:`7.5`,r:`.5`,fill:`currentColor`,key:`kqv944`}]]),T=e({APISurface:()=>z,Dense4ColumnOverview:()=>K,EmptyStateFallbacksCustomRenderers:()=>X,Example3ColumnWithIcons:()=>q,HorizontalPillSummary:()=>J,RowsReceiptStyle:()=>U,RowsTwoColumnWithHairlines:()=>H,RowsWithIconsTooltips:()=>W,SectionedMultiCard:()=>G,Vertical2ColumnNoIcons:()=>B,VerticalSingleColumnNoIcons:()=>V,WithTitleSeparator:()=>Y}),E=t(n(),1),D=ie();function O({value:e,mono:t=!0}){let[n,a]=(0,E.useState)(!1);return(0,D.jsxs)(te,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`xs`,onClick:()=>{try{navigator.clipboard.writeText(e)}catch{}a(!0),setTimeout(()=>a(!1),1200)},className:`group -ml-1 h-auto gap-1.5 rounded-md px-1 py-0.5 shadow-none transition-colors hover:bg-muted/60`,title:`Copy to clipboard`,children:[(0,D.jsx)(i,{tag:`span`,weight:`medium`,className:t?`font-mono tabular-nums`:`tabular-nums`,children:e}),n?(0,D.jsx)(ee,{className:`size-3 text-success`,"aria-hidden":`true`}):(0,D.jsx)(r,{className:`size-3 text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100`,"aria-hidden":`true`})]})}function k({initials:e,name:t,sub:n}){return(0,D.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,D.jsx)(se,{className:`size-6`,children:(0,D.jsx)(oe,{className:`text-xxs font-semibold`,children:e})}),(0,D.jsxs)(`span`,{className:`inline-flex flex-col leading-tight`,children:[(0,D.jsx)(i,{tag:`span`,weight:`medium`,children:t}),!!n&&(0,D.jsx)(i,{tag:`span`,size:`xxs`,type:`secondary`,children:n})]})]})}var A=[{id:`name`,label:`Name`,value:`Sarah Smitha`},{id:`email`,label:`Email`,value:`maria@example.com`},{id:`role`,label:`Role`,value:`Workspace owner`},{id:`joined`,label:`Joined`,value:`March 14, 2025`},{id:`lastSeen`,label:`Last seen`,value:`2 hours ago`},{id:`timezone`,label:`Timezone`,value:`Europe/New York (UTC+02:00)`}],j=[{id:`sku`,label:`SKU`,icon:h,value:(0,D.jsx)(O,{value:`SP-204-WL`}),tooltip:`Internal stock-keeping unit`},{id:`category`,label:`Category`,icon:w,value:(0,D.jsx)(c,{variant:`secondary`,children:`Wellness`})},{id:`status`,label:`Status`,icon:l,value:(0,D.jsx)(c,{variant:`success`,children:`Active`})},{id:`created`,label:`Created`,icon:d,value:`Apr 12, 2026`},{id:`updated`,label:`Last updated`,icon:f,value:`Apr 28, 2026 · 14:32`},{id:`version`,label:`Version`,icon:re,value:(0,D.jsx)(O,{value:`v3.2.1`})}],M=[{id:`id`,label:`Booking ID`,value:(0,D.jsx)(O,{value:`BKG-2026-0412`})},{id:`customer`,label:`Customer`,value:(0,D.jsx)(k,{initials:`MP`,name:`Sarah Smitha`,sub:`maria@example.com`})},{id:`experience`,label:`Experience`,value:`Spa Day Voucher`,description:`Wellness · 90 minutes · 2 guests`},{id:`scheduled`,label:`Scheduled for`,value:`Apr 18, 2026 · 14:00`,description:`Confirmed by SMS`},{id:`status`,label:`Status`,value:(0,D.jsx)(c,{variant:`success`,children:`Paid`})},{id:`amount`,label:`Total`,value:(0,D.jsx)(i,{tag:`span`,weight:`semibold`,className:`tabular-nums`,children:`180.00 USD`})}],N=[{id:`sub`,label:`Subtotal`,value:`180.00 USD`},{id:`tax`,label:`VAT (20%)`,value:`36.00 USD`},{id:`discount`,label:`Discount`,value:(0,D.jsx)(i,{tag:`span`,weight:`medium`,type:`success`,className:`tabular-nums`,children:`−25.00 USD`})},{id:`total`,label:`Total`,value:(0,D.jsx)(i,{tag:`span`,weight:`bold`,className:`tabular-nums`,children:`191.00 USD`})}],P=[{id:`name`,label:`Name`,icon:b,value:`Sarah Smitha`},{id:`email`,label:`Email`,icon:g,value:(0,D.jsx)(O,{value:`maria@example.com`,mono:!1})},{id:`phone`,label:`Phone`,icon:v,value:(0,D.jsx)(O,{value:`+1 888 123 456`})},{id:`address`,label:`Address`,icon:_,value:`ul. Vitosha 24, New York 1000`,description:`USA`}],F=[{id:`card`,label:`Card`,icon:ne,value:`Visa ending 4242`},{id:`billing`,label:`Billing address`,icon:u,value:`ul. Slavyanska 9, Los Angeles`},{id:`verified`,label:`Verified`,icon:y,value:(0,D.jsx)(c,{variant:`success`,children:`Yes`})}],I=[{id:`created`,label:`Created`,value:`Apr 12, 2026`},{id:`by`,label:`By`,value:`Sarah P.`},{id:`version`,label:`Version`,value:`v3.2.1`},{id:`env`,label:`Env`,value:`production`}],L=[{id:`sku`,label:`SKU`,value:`SP-204-WL`},{id:`isbn`,label:`ISBN`,value:null,emptyLabel:`Not assigned`},{id:`barcode`,label:`Barcode`,value:void 0},{id:`website`,label:`Website`,icon:m,render:()=>(0,D.jsxs)(`a`,{href:`#`,className:`inline-flex items-center gap-1 text-primary hover:underline`,children:[(0,D.jsx)(i,{tag:`span`,weight:`medium`,children:`example.com`}),(0,D.jsx)(p,{className:`size-3`,"aria-hidden":`true`})]})}],R=[{id:`plan`,label:`Plan`,value:`Pro Annual`},{id:`seats`,label:`Seats`,value:`12 / 50`},{id:`next`,label:`Next billing`,value:`May 12, 2026`}];function z(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsxs)(i,{type:`secondary`,children:[`Each item: `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`{ id, label, value, icon?, tooltip?, description?, render?, emptyLabel? }`}),`. List-level props: `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`layout`}),`, `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`columns`}),` (1–4), `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`dense`}),`, `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`title`}),`, `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`titleSeparator`}),`, `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`separator`}),`. Per-item `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`render`}),` escapes the default rendering — perfect for status pills, copyable IDs, links, inline edits.`]})})}function B(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(S,{title:`Account details`,padding:`base`,children:(0,D.jsx)(C,{items:A,columns:2})})})}function V(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(`div`,{className:`max-w-sm rounded-xl border border-border bg-card p-5`,children:(0,D.jsx)(C,{items:A.slice(0,4),columns:1})})})}function H(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(S,{title:`Booking #BKG-2026-0412`,padding:`base`,children:(0,D.jsx)(C,{items:M,layout:`rows`})})})}function U(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(`div`,{className:`max-w-sm rounded-xl border border-border bg-card p-5`,children:(0,D.jsx)(C,{items:N,layout:`rows`,dense:!0})})})}function W(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(S,{title:`Product details`,padding:`base`,children:(0,D.jsx)(C,{items:j,layout:`rows`})})})}function G(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-2`,children:[(0,D.jsx)(S,{title:`Customer`,children:(0,D.jsx)(C,{items:P,layout:`rows`})}),(0,D.jsx)(S,{title:`Payment`,children:(0,D.jsx)(C,{items:F,layout:`rows`})})]})})}function K(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(`div`,{className:`rounded-xl border border-border bg-card p-5`,children:(0,D.jsx)(C,{items:j,columns:4,dense:!0})})})}function q(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(`div`,{className:`rounded-xl border border-border bg-card p-5`,children:(0,D.jsx)(C,{items:j,columns:3})})})}function J(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsxs)(`div`,{className:`space-y-3`,children:[(0,D.jsx)(`div`,{className:`rounded-lg border border-border bg-card px-4 py-3`,children:(0,D.jsx)(C,{items:I,layout:`horizontal`,separator:`·`})}),(0,D.jsx)(`div`,{className:`rounded-lg border border-border bg-card px-4 py-3`,children:(0,D.jsx)(C,{items:I,layout:`horizontal`,separator:`:`,itemSeparator:!0})}),(0,D.jsx)(`div`,{className:`rounded-lg bg-muted/30 px-4 py-3`,children:(0,D.jsx)(C,{items:R,layout:`horizontal`,separator:`:`,itemSeparator:`•`})})]})})}function Y(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(C,{title:`Inventory metadata`,titleSeparator:!0,items:j,columns:2})})}function X(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(S,{title:`Mixed`,padding:`base`,children:(0,D.jsx)(C,{items:L,layout:`rows`})})})}var Z=`import { useState } from 'react';
+import {
+	BadgeCheck,
+	Building2,
+	CalendarDays,
+	Check,
+	Clock,
+	Copy,
+	CreditCard,
+	ExternalLink,
+	GitBranch,
+	Globe,
+	Hash,
+	Mail,
+	MapPin,
+	Phone,
+	ShieldCheck,
+	Tag,
+	User,
+} from 'lucide-react';
+import { Avatar, AvatarFallback } from '@/components/base/display/avatar';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { MetadataList, type MetadataListItem } from '@/components/base/display/metadata';
+import { Text } from '@/components/typography';
+
+// ─── Helpers ────────────────────────────────────────────────────────────
+
+function CopyableValue({ value, mono = true }: { value: string; mono?: boolean }) {
+	const [copied, setCopied] = useState(false);
+	return (
+		<Button
+			type="button"
+			variant="secondary"
+			buttonStyle="ghost"
+			size="xs"
+			onClick={() => {
+				try { navigator.clipboard.writeText(value); } catch { /* ignore */ }
+				setCopied(true);
+				setTimeout(() => setCopied(false), 1200);
+			}}
+			className="group -ml-1 h-auto gap-1.5 rounded-md px-1 py-0.5 shadow-none transition-colors hover:bg-muted/60"
+			title="Copy to clipboard"
+		>
+			<Text tag="span" weight="medium" className={mono ? 'font-mono tabular-nums' : 'tabular-nums'}>{value}</Text>
+			{copied ? (
+				<Check className="size-3 text-success" aria-hidden="true" />
+			) : (
+				<Copy className="size-3 text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100" aria-hidden="true" />
+			)}
+		</Button>
+	);
+}
+
+function PersonValue({ initials, name, sub }: { initials: string; name: string; sub?: string; src?: string }) {
+	return (
+		<span className="inline-flex items-center gap-2">
+			<Avatar className="size-6">
+				<AvatarFallback className="text-xxs font-semibold">{initials}</AvatarFallback>
+			</Avatar>
+			<span className="inline-flex flex-col leading-tight">
+				<Text tag="span" weight="medium">{name}</Text>
+				{!!sub && <Text tag="span" size="xxs" type="secondary">{sub}</Text>}
+			</span>
+		</span>
+	);
+}
+
+// ─── Datasets ───────────────────────────────────────────────────────────
+
+const SIMPLE_NO_ICONS: MetadataListItem[] = [
+	{ id: 'name', label: 'Name', value: 'Sarah Smitha' },
+	{ id: 'email', label: 'Email', value: 'maria@example.com' },
+	{ id: 'role', label: 'Role', value: 'Workspace owner' },
+	{ id: 'joined', label: 'Joined', value: 'March 14, 2025' },
+	{ id: 'lastSeen', label: 'Last seen', value: '2 hours ago' },
+	{ id: 'timezone', label: 'Timezone', value: 'Europe/New York (UTC+02:00)' },
+];
+
+const ENTITY_WITH_ICONS: MetadataListItem[] = [
+	{ id: 'sku', label: 'SKU', icon: Hash, value: <CopyableValue value="SP-204-WL" />, tooltip: 'Internal stock-keeping unit' },
+	{ id: 'category', label: 'Category', icon: Tag, value: <Badge variant="secondary">Wellness</Badge> },
+	{ id: 'status', label: 'Status', icon: BadgeCheck, value: <Badge variant="success">Active</Badge> },
+	{ id: 'created', label: 'Created', icon: CalendarDays, value: 'Apr 12, 2026' },
+	{ id: 'updated', label: 'Last updated', icon: Clock, value: 'Apr 28, 2026 · 14:32' },
+	{ id: 'version', label: 'Version', icon: GitBranch, value: <CopyableValue value="v3.2.1" /> },
+];
+
+const ROW_DETAIL: MetadataListItem[] = [
+	{ id: 'id', label: 'Booking ID', value: <CopyableValue value="BKG-2026-0412" /> },
+	{ id: 'customer', label: 'Customer', value: <PersonValue initials="MP" name="Sarah Smitha" sub="maria@example.com" /> },
+	{ id: 'experience', label: 'Experience', value: 'Spa Day Voucher', description: 'Wellness · 90 minutes · 2 guests' },
+	{ id: 'scheduled', label: 'Scheduled for', value: 'Apr 18, 2026 · 14:00', description: 'Confirmed by SMS' },
+	{ id: 'status', label: 'Status', value: <Badge variant="success">Paid</Badge> },
+	{ id: 'amount', label: 'Total', value: <Text tag="span" weight="semibold" className="tabular-nums">180.00 USD</Text> },
+];
+
+const RECEIPT_ROWS: MetadataListItem[] = [
+	{ id: 'sub', label: 'Subtotal', value: '180.00 USD' },
+	{ id: 'tax', label: 'VAT (20%)', value: '36.00 USD' },
+	{ id: 'discount', label: 'Discount', value: <Text tag="span" weight="medium" type="success" className="tabular-nums">−25.00 USD</Text> },
+	{ id: 'total', label: 'Total', value: <Text tag="span" weight="bold" className="tabular-nums">191.00 USD</Text> },
+];
+
+const CONTACT_META: MetadataListItem[] = [
+	{ id: 'name', label: 'Name', icon: User, value: 'Sarah Smitha' },
+	{ id: 'email', label: 'Email', icon: Mail, value: <CopyableValue value="maria@example.com" mono={false} /> },
+	{ id: 'phone', label: 'Phone', icon: Phone, value: <CopyableValue value="+1 888 123 456" /> },
+	{ id: 'address', label: 'Address', icon: MapPin, value: 'ul. Vitosha 24, New York 1000', description: 'USA' },
+];
+
+const PAYMENT_META: MetadataListItem[] = [
+	{ id: 'card', label: 'Card', icon: CreditCard, value: 'Visa ending 4242' },
+	{ id: 'billing', label: 'Billing address', icon: Building2, value: 'ul. Slavyanska 9, Los Angeles' },
+	{ id: 'verified', label: 'Verified', icon: ShieldCheck, value: <Badge variant="success">Yes</Badge> },
+];
+
+const PILL_META: MetadataListItem[] = [
+	{ id: 'created', label: 'Created', value: 'Apr 12, 2026' },
+	{ id: 'by', label: 'By', value: 'Sarah P.' },
+	{ id: 'version', label: 'Version', value: 'v3.2.1' },
+	{ id: 'env', label: 'Env', value: 'production' },
+];
+
+const EMPTY_META: MetadataListItem[] = [
+	{ id: 'sku', label: 'SKU', value: 'SP-204-WL' },
+	{ id: 'isbn', label: 'ISBN', value: null, emptyLabel: 'Not assigned' },
+	{ id: 'barcode', label: 'Barcode', value: undefined },
+	{ id: 'website', label: 'Website', icon: Globe, render: () => (
+		<a href="#" className="inline-flex items-center gap-1 text-primary hover:underline">
+			<Text tag="span" weight="medium">example.com</Text>
+			<ExternalLink className="size-3" aria-hidden="true" />
+		</a>
+	) },
+];
+
+const SHORT_PROFILE: MetadataListItem[] = [
+	{ id: 'plan', label: 'Plan', value: 'Pro Annual' },
+	{ id: 'seats', label: 'Seats', value: '12 / 50' },
+	{ id: 'next', label: 'Next billing', value: 'May 12, 2026' },
+];
+
+export function APISurface() {
+	return (
+		<>
+			<Text type="secondary">
+								Each item: <code className="rounded bg-muted px-1 py-0.5 text-xs">{'{ id, label, value, icon?, tooltip?, description?, render?, emptyLabel? }'}</code>. List-level props: <code className="rounded bg-muted px-1 py-0.5 text-xs">layout</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">columns</code> (1–4), <code className="rounded bg-muted px-1 py-0.5 text-xs">dense</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">title</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">titleSeparator</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">separator</code>. Per-item <code className="rounded bg-muted px-1 py-0.5 text-xs">render</code> escapes the default rendering — perfect for status pills, copyable IDs, links, inline edits.
+							</Text>
+		</>
+	);
+}
+
+export function Vertical2ColumnNoIcons() {
+	return (
+		<>
+			<SmartCard title="Account details" padding="base">
+								<MetadataList items={SIMPLE_NO_ICONS} columns={2} />
+							</SmartCard>
+		</>
+	);
+}
+
+export function VerticalSingleColumnNoIcons() {
+	return (
+		<>
+			<div className="max-w-sm rounded-xl border border-border bg-card p-5">
+								<MetadataList items={SIMPLE_NO_ICONS.slice(0, 4)} columns={1} />
+							</div>
+		</>
+	);
+}
+
+export function RowsTwoColumnWithHairlines() {
+	return (
+		<>
+			<SmartCard title="Booking #BKG-2026-0412" padding="base">
+								<MetadataList items={ROW_DETAIL} layout="rows" />
+							</SmartCard>
+		</>
+	);
+}
+
+export function RowsReceiptStyle() {
+	return (
+		<>
+			<div className="max-w-sm rounded-xl border border-border bg-card p-5">
+								<MetadataList items={RECEIPT_ROWS} layout="rows" dense />
+							</div>
+		</>
+	);
+}
+
+export function RowsWithIconsTooltips() {
+	return (
+		<>
+			<SmartCard title="Product details" padding="base">
+								<MetadataList items={ENTITY_WITH_ICONS} layout="rows" />
+							</SmartCard>
+		</>
+	);
+}
+
+export function SectionedMultiCard() {
+	return (
+		<>
+			<div className="grid gap-4 lg:grid-cols-2">
+								<SmartCard title="Customer">
+									<MetadataList items={CONTACT_META} layout="rows" />
+								</SmartCard>
+								<SmartCard title="Payment">
+									<MetadataList items={PAYMENT_META} layout="rows" />
+								</SmartCard>
+							</div>
+		</>
+	);
+}
+
+export function Dense4ColumnOverview() {
+	return (
+		<>
+			<div className="rounded-xl border border-border bg-card p-5">
+								<MetadataList items={ENTITY_WITH_ICONS} columns={4} dense />
+							</div>
+		</>
+	);
+}
+
+export function Example3ColumnWithIcons() {
+	return (
+		<>
+			<div className="rounded-xl border border-border bg-card p-5">
+								<MetadataList items={ENTITY_WITH_ICONS} columns={3} />
+							</div>
+		</>
+	);
+}
+
+export function HorizontalPillSummary() {
+	return (
+		<>
+			<div className="space-y-3">
+								<div className="rounded-lg border border-border bg-card px-4 py-3">
+									<MetadataList items={PILL_META} layout="horizontal" separator="·" />
+								</div>
+								<div className="rounded-lg border border-border bg-card px-4 py-3">
+									<MetadataList items={PILL_META} layout="horizontal" separator=":" itemSeparator />
+								</div>
+								<div className="rounded-lg bg-muted/30 px-4 py-3">
+									<MetadataList items={SHORT_PROFILE} layout="horizontal" separator=":" itemSeparator="•" />
+								</div>
+							</div>
+		</>
+	);
+}
+
+export function WithTitleSeparator() {
+	return (
+		<>
+			<MetadataList
+								title="Inventory metadata"
+								titleSeparator
+								items={ENTITY_WITH_ICONS}
+								columns={2}
+							/>
+		</>
+	);
+}
+
+export function EmptyStateFallbacksCustomRenderers() {
+	return (
+		<>
+			<SmartCard title="Mixed" padding="base">
+								<MetadataList items={EMPTY_META} layout="rows" />
+							</SmartCard>
+		</>
+	);
+}
+`;function Q(e){let t={code:`code`,p:`p`,pre:`pre`,...e.components};return T||$(`Examples`,!1),z||$(`Examples.APISurface`,!0),K||$(`Examples.Dense4ColumnOverview`,!0),X||$(`Examples.EmptyStateFallbacksCustomRenderers`,!0),q||$(`Examples.Example3ColumnWithIcons`,!0),J||$(`Examples.HorizontalPillSummary`,!0),U||$(`Examples.RowsReceiptStyle`,!0),H||$(`Examples.RowsTwoColumnWithHairlines`,!0),W||$(`Examples.RowsWithIconsTooltips`,!0),G||$(`Examples.SectionedMultiCard`,!0),B||$(`Examples.Vertical2ColumnNoIcons`,!0),V||$(`Examples.VerticalSingleColumnNoIcons`,!0),Y||$(`Examples.WithTitleSeparator`,!0),(0,D.jsxs)(a,{title:`Metadata list`,description:`Flexible label/value list for entity metadata. Three layouts (vertical grid, horizontal pills, two-column rows), per-item icons, tooltips, descriptions, and custom renderers — with first-class empty-state handling.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/display/metadata`,children:[(0,D.jsx)(o,{title:`Overview`,id:`overview`,children:(0,D.jsxs)(t.p,{children:[(0,D.jsx)(t.code,{children:`MetadataList`}),` renders an array of `,(0,D.jsx)(t.code,{children:`{ id, label, value, icon?, tooltip?, description?, render?, emptyLabel? }`}),` items. List-level props pick the
+`,(0,D.jsx)(t.code,{children:`layout`}),` (`,(0,D.jsx)(t.code,{children:`vertical`}),` / `,(0,D.jsx)(t.code,{children:`rows`}),` / `,(0,D.jsx)(t.code,{children:`horizontal`}),`), the `,(0,D.jsx)(t.code,{children:`columns`}),` count (1–4),
+and density. Per-item `,(0,D.jsx)(t.code,{children:`render`}),` escapes the default formatting for status
+pills, copyable IDs, links, or inline edits.`]})}),(0,D.jsxs)(o,{title:`Consumer usage`,id:`usage`,children:[(0,D.jsx)(t.p,{children:`Consumers import metadata primitives from the exact nested package entrypoint:`}),(0,D.jsx)(t.pre,{children:(0,D.jsx)(t.code,{className:`language-tsx`,children:`import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata';
+`})}),(0,D.jsxs)(t.p,{children:[`Use `,(0,D.jsx)(t.code,{children:`MetadataList`}),` for compact facts about a single entity: label/value
+attributes, receipt rows, account properties, audit details, or operational
+summaries. It is intentionally read-heavy and scan-first.`]}),(0,D.jsxs)(t.p,{children:[`Use `,(0,D.jsx)(t.code,{children:`Item`}),` instead when each row represents a separate object or action with a
+title stack, media, and trailing controls. Use `,(0,D.jsx)(t.code,{children:`FormField`}),` when the row contains
+an editable input. Metadata is for describing an entity; Item is for listing
+entities or actions.`]})]}),(0,D.jsx)(o,{title:`API surface`,id:`api-surface`,children:(0,D.jsx)(s,{name:`APISurface`,source:Z,children:(0,D.jsx)(z,{})})}),(0,D.jsxs)(o,{title:`Vertical grid`,id:`vertical`,children:[(0,D.jsx)(s,{name:`Vertical2ColumnNoIcons`,source:Z,children:(0,D.jsx)(B,{})}),(0,D.jsx)(s,{name:`VerticalSingleColumnNoIcons`,source:Z,children:(0,D.jsx)(V,{})}),(0,D.jsx)(s,{name:`Example3ColumnWithIcons`,source:Z,children:(0,D.jsx)(q,{})}),(0,D.jsx)(s,{name:`Dense4ColumnOverview`,source:Z,children:(0,D.jsx)(K,{})})]}),(0,D.jsxs)(o,{title:`Two-column rows`,id:`rows`,children:[(0,D.jsx)(s,{name:`RowsTwoColumnWithHairlines`,source:Z,children:(0,D.jsx)(H,{})}),(0,D.jsx)(s,{name:`RowsReceiptStyle`,source:Z,children:(0,D.jsx)(U,{})}),(0,D.jsx)(s,{name:`RowsWithIconsTooltips`,source:Z,children:(0,D.jsx)(W,{})})]}),(0,D.jsx)(o,{title:`Horizontal pills`,id:`horizontal`,children:(0,D.jsx)(s,{name:`HorizontalPillSummary`,source:Z,children:(0,D.jsx)(J,{})})}),(0,D.jsxs)(o,{title:`Composition`,id:`composition`,children:[(0,D.jsx)(s,{name:`SectionedMultiCard`,source:Z,children:(0,D.jsx)(G,{})}),(0,D.jsx)(s,{name:`WithTitleSeparator`,source:Z,children:(0,D.jsx)(Y,{})}),(0,D.jsx)(s,{name:`EmptyStateFallbacksCustomRenderers`,source:Z,children:(0,D.jsx)(X,{})})]}),(0,D.jsx)(o,{title:`API`,id:`api`,children:(0,D.jsx)(ae,{component:`MetadataList`})})]})}function ce(e={}){let{wrapper:t}=e.components||{};return t?(0,D.jsx)(t,{...e,children:(0,D.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{ce as default};

package/dist/showcase/assets/metadata-list-fm8e58ID.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Er as n,Tr as r,a as i,c as a,o,r as s}from"./example-BIrQab7K.js";import{t as c}from"./info-DFu8OfxV.js";import{k as l,n as u,s as d}from"./index-Cz4UGUT2.js";import{t as f}from"./separator-BjGdXNcn.js";var p=e(t(),1),m={formatInfoAriaLabel:e=>`${e} info`,infoFallback:`Info`},h=d(),g={1:`grid-cols-1`,2:`grid-cols-1 sm:grid-cols-2`,3:`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`,4:`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`},_={start:`justify-start`,end:`justify-end`,center:`justify-center`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`},v={start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`},y=(e,t)=>e.id?e.id:`metadata-${typeof e.label==`string`?e.label:`${t}`}-${t}`;function b({items:e,columns:t=2,dense:d=!1,emptyLabel:b=`—`,title:x,titleSeparator:S=!1,className:C,gapClassName:w,labelClassName:T,valueClassName:E,descriptionClassName:D,layout:O=`vertical`,justify:k=`start`,align:A=`center`,separator:j=`: `,itemSeparator:M=!1,wrap:N=!0,strings:P}){let F=l(m,P),I=p.useMemo(()=>e.filter(Boolean),[e]);if(p.useEffect(()=>{},[O,I]),I.length===0)return null;let L=g[t]??g[2],R=w??(d?`gap-2`:`gap-3`),z=d?`text-xxs`:`text-xs`,B=`text-sm`,V=x!=null,H=V&&S;if(O===`horizontal`){let e=_[k]??_.start,t=v[A]??v.center,l=typeof M==`string`?M:M?` | `:``,m=d?`gap-2`:`gap-3`,g=N?`flex-wrap`:`flex-nowrap`;return(0,h.jsxs)(`div`,{className:u(`metadata-list--component`,`metadata-list-container`,C),children:[!!V&&(0,h.jsx)(r,{tag:`h6`,className:`mb-1.5 font-medium text-muted-foreground uppercase tracking-wide`,children:x}),!!H&&(0,h.jsx)(f,{className:`mb-2`}),(0,h.jsx)(`div`,{className:u(`flex`,g,e,t,m),children:I.map((e,t)=>{let r=y(e,t),f=e.emptyLabel??b,m=e.value??f,g=e.icon,_=e.tooltip!==null&&e.tooltip!==void 0,v=typeof e.render==`function`,x=l&&t<I.length-1;return(0,h.jsxs)(p.Fragment,{children:[(0,h.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[!!g&&(0,h.jsx)(g,{className:u(`flex-shrink-0`,d?`h-3 w-3`:`h-3.5 w-3.5`,`text-muted-foreground`)}),(0,h.jsx)(n,{size:`xs`,type:`secondary`,className:u(`metadata--field tracking-wide whitespace-nowrap`,z,T),children:e.label}),!!_&&(0,h.jsxs)(i,{children:[(0,h.jsx)(a,{render:t=>(0,h.jsx)(s,{...t,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:u(`inline-flex items-center`,t.className),"aria-label":typeof e.label==`string`?F.formatInfoAriaLabel(e.label):F.infoFallback,children:(0,h.jsx)(c,{className:`h-3 w-3 text-muted-foreground cursor-help flex-shrink-0`})})}),(0,h.jsx)(o,{side:`top`,align:`start`,className:`max-w-xs`,children:(0,h.jsx)(n,{type:`inverse`,size:`xs`,children:e.tooltip})})]}),(0,h.jsx)(n,{size:`xs`,type:`secondary`,children:j}),v?e.render?.(e):(0,h.jsx)(n,{weight:`medium`,className:u(B,E),children:m})]}),!!x&&(0,h.jsx)(n,{size:`xs`,type:`secondary`,children:l})]},r)})})]})}if(O===`rows`){let e=d?`py-1.5`:`py-2.5`;return(0,h.jsxs)(`div`,{className:u(`metadata-list--component`,`metadata-list-container`,C),children:[!!V&&(0,h.jsx)(r,{tag:`h6`,className:`font-medium text-muted-foreground uppercase tracking-wide mb-2`,children:x}),!!H&&(0,h.jsx)(f,{className:`mb-2`}),(0,h.jsx)(`dl`,{className:`divide-y divide-border/50`,children:I.map((t,r)=>{let l=y(t,r),f=t.emptyLabel??b,p=t.value??f,m=t.icon,g=t.tooltip!==null&&t.tooltip!==void 0,_=typeof t.render==`function`;return(0,h.jsxs)(`div`,{className:u(`grid items-baseline gap-x-4 gap-y-1 grid-cols-[minmax(120px,1fr)_2fr]`,e),children:[(0,h.jsxs)(`dt`,{className:`flex items-center gap-1.5 min-w-0`,children:[!!m&&(0,h.jsx)(m,{className:u(`flex-shrink-0 text-muted-foreground`,d?`h-3 w-3`:`h-3.5 w-3.5`)}),(0,h.jsx)(n,{type:`secondary`,className:u(`metadata--field truncate tracking-wide`,z,T),children:t.label}),!!g&&(0,h.jsxs)(i,{children:[(0,h.jsx)(a,{render:e=>(0,h.jsx)(s,{...e,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:u(`inline-flex items-center`,e.className),"aria-label":typeof t.label==`string`?F.formatInfoAriaLabel(t.label):F.infoFallback,children:(0,h.jsx)(c,{className:`h-3 w-3 text-muted-foreground cursor-help flex-shrink-0`})})}),(0,h.jsx)(o,{side:`top`,align:`start`,className:`max-w-xs`,children:(0,h.jsx)(n,{type:`inverse`,size:`xs`,children:t.tooltip})})]})]}),(0,h.jsxs)(`dd`,{className:`min-w-0`,children:[_?t.render?.(t):(0,h.jsx)(n,{weight:`medium`,className:u(`break-words`,E),children:p}),!!t.description&&(0,h.jsx)(n,{size:`xs`,type:`secondary`,className:u(`mt-0.5`,D),children:t.description})]})]},l)})})]})}return(0,h.jsxs)(`div`,{className:u(`metadata-list--component`,`metadata-list-container`,C),children:[!!V&&(0,h.jsx)(r,{tag:`h6`,className:`mb-1.5 font-medium text-muted-foreground uppercase tracking-wide`,children:x}),!!H&&(0,h.jsx)(f,{className:`mb-2`}),(0,h.jsx)(`div`,{className:u(`grid`,L,R),children:I.map((e,t)=>{let r=y(e,t),l=e.emptyLabel??b,f=e.value??l,p=e.icon,m=e.tooltip!==null&&e.tooltip!==void 0,g=typeof e.render==`function`;return(0,h.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,h.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[!!p&&(0,h.jsx)(p,{className:u(`flex-shrink-0`,d?`h-3 w-3`:`h-3.5 w-3.5`,`text-muted-foreground`)}),(0,h.jsx)(n,{size:`xs`,type:`secondary`,className:u(`metadata--field tracking-wide`,z,T),children:e.label}),!!m&&(0,h.jsxs)(i,{children:[(0,h.jsx)(a,{render:t=>(0,h.jsx)(s,{...t,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:u(`inline-flex items-center`,t.className),"aria-label":typeof e.label==`string`?F.formatInfoAriaLabel(e.label):F.infoFallback,children:(0,h.jsx)(c,{className:`h-3 w-3 text-muted-foreground cursor-help flex-shrink-0`})})}),(0,h.jsx)(o,{side:`top`,align:`start`,className:`max-w-xs`,children:(0,h.jsx)(n,{type:`inverse`,size:`xs`,children:e.tooltip})})]})]}),g?e.render?.(e):(0,h.jsx)(n,{weight:`medium`,className:u(B,E),children:f}),!!e.description&&(0,h.jsx)(n,{size:`xs`,type:`secondary`,className:u(D),children:e.description})]},r)})})]})}b.displayName=`MetadataList`;export{b as t};

package/dist/showcase/assets/metric-bar-BydkmggA.js

@@ -0,0 +1 @@
+import{Er as e,r as t}from"./example-BIrQab7K.js";import{t as n}from"./calendar-DTgagmt7.js";import{n as r,s as i}from"./index-Cz4UGUT2.js";import{t as a}from"./metric-guQTLTAa.js";var o=i();function s({metrics:i,period:s,onPeriodChange:c,variant:l=`default`,size:u=`sm`,showSparklines:d=!0,showChanges:f=!0,footerText:p,className:m}){let h=(0,o.jsx)(`div`,{className:`grid min-w-0 flex-1 grid-cols-1 divide-y divide-border lg:flex lg:items-stretch lg:divide-x lg:divide-y-0`,children:i.map(e=>(0,o.jsx)(`div`,{className:`min-w-0 px-4 py-2.5 lg:min-w-36 lg:flex-1`,children:(0,o.jsx)(a,{data:e,variant:`default`,size:u,showSparkline:d,showChange:f})},e.id))}),g=!!s&&(0,o.jsx)(`div`,{className:`flex shrink-0 items-center border-b border-border px-3 py-2 lg:border-b-0 lg:py-0`,children:(0,o.jsxs)(t,{variant:`secondary`,buttonStyle:`ghost`,className:`gap-1.5`,onClick:c?()=>c(s.value):void 0,children:[(0,o.jsx)(n,{className:`size-3.5`,"aria-hidden":`true`}),(0,o.jsx)(e,{size:`xs`,weight:`medium`,children:s.label})]})});return l===`gradient`?(0,o.jsxs)(`div`,{className:r(`metric-bar--component`,`w-full`,`rounded-lg bg-gradient-to-r from-primary/8 via-info/5 to-success/8 p-[1px]`,m),children:[(0,o.jsxs)(`div`,{className:`flex min-w-0 flex-col overflow-hidden rounded-radius bg-card lg:flex-row`,children:[g&&(0,o.jsxs)(o.Fragment,{children:[g,(0,o.jsx)(`div`,{className:`hidden w-px bg-border lg:block`,"aria-hidden":`true`})]}),h]}),!!p&&(0,o.jsx)(`div`,{className:`rounded-b-radius border-t border-border/50 bg-card px-4 py-2`,children:(0,o.jsx)(e,{size:`xxs`,type:`discrete`,children:p})})]}):(0,o.jsxs)(`div`,{className:r(`metric-bar--component flex w-full flex-col overflow-hidden rounded-lg border border-border bg-card shadow-sm`,m),children:[(0,o.jsxs)(`div`,{className:`flex min-w-0 flex-col overflow-hidden lg:flex-row`,children:[g&&(0,o.jsxs)(o.Fragment,{children:[g,(0,o.jsx)(`div`,{className:`hidden w-px bg-border lg:block`,"aria-hidden":`true`})]}),h]}),!!p&&(0,o.jsx)(`div`,{className:`border-t border-border/50 px-4 py-2`,children:(0,o.jsx)(e,{size:`xxs`,type:`discrete`,children:p})})]})}s.displayName=`MetricBar`;export{s as t};

package/dist/showcase/assets/metric-grid-BKjrYpt9.js

@@ -0,0 +1 @@
+import{n as e,s as t}from"./index-Cz4UGUT2.js";import{t as n}from"./metric-guQTLTAa.js";var r=t(),i={sm:`gap-2`,md:`gap-3`,lg:`gap-4`};function a(e){return e<=1?`grid-cols-1`:e===2?`grid-cols-1 sm:grid-cols-2`:e===3?`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`:e===4?`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`:e===5||e===6?`grid-cols-2 sm:grid-cols-3 lg:grid-cols-6`:`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`}var o={1:`grid-cols-1`,2:`grid-cols-1 sm:grid-cols-2`,3:`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`,4:`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`,6:`grid-cols-2 sm:grid-cols-3 lg:grid-cols-6`};function s({metrics:t,variant:s=`card`,size:c=`md`,colorScheme:l=`default`,columns:u=`auto`,gap:d=`md`,showSparklines:f=!0,showChanges:p=!0,showIcons:m=!0,loading:h=!1,className:g}){return(0,r.jsx)(`div`,{className:e(`metric-grid--component`,`grid`,u===`auto`?a(t.length):o[u],i[d],g),children:t.map(e=>(0,r.jsx)(n,{data:e,variant:s,size:c,colorScheme:l,showSparkline:f,showChange:p,showIcon:m,loading:h},e.id))})}s.displayName=`MetricGrid`;export{s as t};

package/dist/showcase/assets/metric-guQTLTAa.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Er as n,Tr as r}from"./example-BIrQab7K.js";import{t as i}from"./arrow-up-right-CuAsO3-r.js";import{n as a,s as o}from"./index-Cz4UGUT2.js";import{t as s}from"./smart-card-B4P_C0nk.js";import{Zn as c,t as l,u}from"./AreaChart-DUe3j5uB.js";import{t as d}from"./analytics.strings-B9262Jmq.js";import{n as f,t as p}from"./format-metric-value-BTsvOjZQ.js";import{t as m}from"./metric-trend-chip-DehaJ3nC.js";var h=e(t(),1),g=o(),_={positive:`var(--success)`,negative:`var(--destructive)`,neutral:`var(--muted-foreground)`};function v({data:e,trend:t=`neutral`,color:n,className:r,animated:i=!0,"aria-label":o=`Trend sparkline`}){let s=(0,h.useId)(),d=(0,h.useMemo)(()=>`metric-spark-${s.replaceAll(`:`,``)}`,[s]),f=n??_[t],p=(0,h.useMemo)(()=>!Array.isArray(e)||e.length===0?[]:e.map((e,t)=>({i:t,v:e})),[e]);return p.length===0?(0,g.jsx)(`div`,{className:a(`metric-sparkline--component`,`w-full`,r),"aria-hidden":`true`}):(0,g.jsx)(`div`,{className:a(`w-full`,r),role:`img`,"aria-label":o,children:(0,g.jsx)(c,{width:`100%`,height:`100%`,initialDimension:{width:1,height:1},children:(0,g.jsxs)(l,{data:p,margin:{top:2,right:0,bottom:0,left:0},children:[(0,g.jsx)(`defs`,{children:(0,g.jsxs)(`linearGradient`,{id:d,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,g.jsx)(`stop`,{offset:`0%`,stopColor:f,stopOpacity:.25}),(0,g.jsx)(`stop`,{offset:`100%`,stopColor:f,stopOpacity:0})]})}),(0,g.jsx)(u,{type:`monotone`,dataKey:`v`,stroke:f,strokeWidth:1.75,fill:`url(#${d})`,dot:!1,activeDot:!1,isAnimationActive:i,animationDuration:600})]})})})}v.displayName=`MetricSparkline`;var y=({className:e})=>(0,g.jsx)(`div`,{className:a(`animate-pulse rounded bg-muted`,e)});function b({variant:e=`default`,size:t=`md`,className:n}){let r=t===`sm`?`p-3`:t===`lg`?`p-5`:`p-4`;return e===`card`||e===`bordered`||e===`accent`||e===`colored`?(0,g.jsxs)(`div`,{className:a(`metric-skeleton--component`,`rounded-xl border border-border bg-card shadow-sm`,r,n),"aria-busy":`true`,"aria-live":`polite`,children:[(0,g.jsx)(y,{className:`h-3 w-24`}),(0,g.jsx)(y,{className:a(`mt-3`,t===`lg`?`h-9 w-40`:`h-7 w-32`)}),(0,g.jsx)(y,{className:`mt-2 h-3 w-20`}),(0,g.jsx)(y,{className:`mt-3 h-8 w-full`})]}):e===`compact`?(0,g.jsxs)(`div`,{className:a(`flex items-center gap-3`,n),"aria-busy":`true`,children:[(0,g.jsx)(y,{className:`size-9 rounded-lg`}),(0,g.jsxs)(`div`,{className:`flex-1 space-y-1.5`,children:[(0,g.jsx)(y,{className:`h-3 w-20`}),(0,g.jsx)(y,{className:`h-4 w-28`})]}),(0,g.jsx)(y,{className:`h-5 w-12 rounded-full`})]}):e===`minimal`?(0,g.jsxs)(`div`,{className:a(`inline-flex items-baseline gap-2`,n),"aria-busy":`true`,children:[(0,g.jsx)(y,{className:`h-3 w-12`}),(0,g.jsx)(y,{className:`h-3 w-16`})]}):(0,g.jsxs)(`div`,{className:a(`flex flex-col gap-1.5`,r,n),"aria-busy":`true`,children:[(0,g.jsx)(y,{className:`h-3 w-20`}),(0,g.jsx)(y,{className:`h-5 w-28`}),(0,g.jsx)(y,{className:`mt-1 h-6 w-full`})]})}b.displayName=`MetricSkeleton`;var x={default:{border:`border-border`,bg:`bg-card`,bar:`bg-foreground`,dot:`bg-foreground`,ring:`ring-border`},primary:{border:`border-primary/25`,bg:`bg-primary/5`,bar:`bg-primary`,dot:`bg-primary`,ring:`ring-primary/20`},success:{border:`border-success/30`,bg:`bg-success/5`,bar:`bg-success`,dot:`bg-success`,ring:`ring-success/20`},warning:{border:`border-warning/40`,bg:`bg-warning/10`,bar:`bg-warning`,dot:`bg-warning`,ring:`ring-warning/30`},danger:{border:`border-destructive/30`,bg:`bg-destructive/5`,bar:`bg-destructive`,dot:`bg-destructive`,ring:`ring-destructive/20`},info:{border:`border-info/30`,bg:`bg-info/5`,bar:`bg-info`,dot:`bg-info`,ring:`ring-info/20`}},S={sm:`text-sm`,md:`text-lg`,lg:`text-xl`},C={sm:`text-xl`,md:`text-3xl`,lg:`text-4xl`},w={sm:`h-6`,md:`h-8`,lg:`h-10`},T=16;function E(e){let{data:t,variant:r=`default`,size:i=`md`,colorScheme:o=`default`,showSparkline:s=!0,showChange:c=!0,showIcon:l=!0,loading:u=!1,error:m=!1,errorLabel:_,progress:v=0,className:y,"aria-label":x}=e,S=(0,h.useMemo)(()=>p(t),[t]),C=(0,h.useMemo)(()=>f(t),[t]);if(u)return(0,g.jsx)(b,{variant:r,size:i,className:a(`metric--component`,y)});if(m)return(0,g.jsx)(`div`,{className:a(`flex items-center justify-center rounded-lg border border-border bg-card p-4 text-muted-foreground`,y),children:(0,g.jsx)(n,{children:_??d.metricErrorLabel})});let w={data:t,formattedValue:S,trend:C,size:i,showSparkline:s,showChange:c,showIcon:l,colorScheme:o,ariaLabel:x??t.label,className:y};switch(r){case`card`:return(0,g.jsx)(O,{...w});case`compact`:return(0,g.jsx)(k,{...w});case`minimal`:return(0,g.jsx)(A,{...w});case`bordered`:return(0,g.jsx)(j,{...w});case`accent`:return(0,g.jsx)(M,{...w});case`colored`:return(0,g.jsx)(N,{...w,progress:v});default:return(0,g.jsx)(D,{...w})}}E.displayName=`Metric`;function D({data:e,formattedValue:t,trend:i,size:o,showSparkline:s,showChange:c,showIcon:l,ariaLabel:u,className:d}){let f=e.icon;return(0,g.jsxs)(`div`,{className:a(`flex min-w-0 flex-col gap-1`,d),"aria-label":u,children:[(0,g.jsxs)(`div`,{className:`flex items-center gap-1.5 min-w-0 text-muted-foreground`,children:[!!l&&!!f&&(0,g.jsx)(f,{className:`size-3.5 shrink-0`,"aria-hidden":`true`}),(0,g.jsx)(n,{size:`xs`,type:`secondary`,weight:`medium`,className:`truncate`,children:e.label})]}),(0,g.jsx)(r,{tag:`h5`,className:a(`font-bold tabular-nums tracking-tight border-none pb-0 leading-tight truncate`,S[o]),title:t,children:t}),!!c&&!!e.change&&(0,g.jsx)(`div`,{className:`min-w-0`,children:(0,g.jsx)(m,{change:e.change,trend:e.trend,size:o,variant:`compact`})}),!!e.subtitle&&(0,g.jsx)(n,{size:`xs`,type:`secondary`,className:`truncate`,children:e.subtitle}),!!s&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:i,className:a(`mt-auto`,w[o])}),!!e.footer&&(0,g.jsx)(n,{size:`xxs`,type:`discrete`,className:`truncate`,children:e.footer})]})}function O({data:e,formattedValue:t,trend:i,size:o,showSparkline:c,showChange:l,showIcon:u,ariaLabel:d,className:f}){let p=e.icon,h=!!(e.href||e.onClick),_=o===`sm`?`sm`:o===`lg`?`lg`:`base`,y=(0,g.jsxs)(s,{title:e.label,icon:u&&p?(0,g.jsx)(p,{className:`size-4`,"aria-hidden":`true`}):null,tooltip:e.tooltip,padding:_,className:a(h&&`cursor-pointer transition-shadow hover:shadow-md`,f),"aria-label":d,children:[(0,g.jsxs)(`div`,{className:`flex items-baseline justify-between gap-3`,children:[(0,g.jsx)(r,{tag:o===`sm`?`h5`:o===`lg`?`h3`:`h4`,className:a(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none`,C[o]),children:t}),!!l&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:o,variant:`badge`})]}),!!e.subtitle&&(0,g.jsx)(n,{type:`secondary`,className:`mt-2`,children:e.subtitle}),!!c&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:i,className:a(`mt-3`,o===`lg`?`h-12`:`h-10`)}),!!e.footer&&(0,g.jsx)(n,{size:`xs`,type:`secondary`,className:`mt-2`,children:e.footer})]});return h&&e.onClick?(0,g.jsx)(`div`,{role:`button`,tabIndex:0,onClick:e.onClick,onKeyDown:t=>(t.key===`Enter`||t.key===` `)&&e.onClick?.(),className:`rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,children:y}):y}function k({data:e,formattedValue:t,size:r,showChange:i,showIcon:o,ariaLabel:s,className:c}){let l=e.icon;return(0,g.jsxs)(`div`,{className:a(`flex items-center gap-3`,c),"aria-label":s,children:[!!o&&!!l&&(0,g.jsx)(`span`,{className:`inline-flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground`,children:(0,g.jsx)(l,{className:`size-4`,"aria-hidden":`true`})}),(0,g.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,g.jsx)(n,{size:`xs`,type:`secondary`,className:`truncate`,children:e.label}),(0,g.jsx)(n,{tag:`span`,size:r===`sm`?`sm`:`lg`,weight:`bold`,className:`block truncate tabular-nums`,children:t})]}),!!i&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:r,variant:`badge`,className:`shrink-0`})]})}function A({data:e,formattedValue:t,size:r,showChange:i,ariaLabel:o,className:s}){return(0,g.jsxs)(`span`,{className:a(`inline-flex items-baseline gap-2`,s),"aria-label":o,children:[(0,g.jsxs)(n,{tag:`span`,size:r===`lg`?`sm`:`xs`,type:`secondary`,children:[e.label,`:`]}),(0,g.jsx)(n,{tag:`span`,size:r===`lg`?`sm`:`xs`,weight:`semibold`,className:`tabular-nums`,children:t}),!!i&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:`sm`,variant:`inline`})]})}function j({data:e,formattedValue:t,trend:i,size:o,showSparkline:s,showChange:c,showIcon:l,colorScheme:u,ariaLabel:d,className:f}){let p=e.icon,h=x[u];return(0,g.jsxs)(`div`,{className:a(`flex flex-col gap-3 rounded-xl border p-4 shadow-sm`,h.border,h.bg,f),"aria-label":d,children:[(0,g.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,g.jsxs)(`div`,{className:`flex items-center gap-2 text-muted-foreground`,children:[!!l&&!!p&&(0,g.jsx)(p,{className:`size-4 shrink-0`,"aria-hidden":`true`}),(0,g.jsx)(n,{size:`xs`,type:`secondary`,weight:`medium`,children:e.label})]}),!!c&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:o,variant:`badge`})]}),(0,g.jsx)(r,{tag:o===`lg`?`h3`:`h4`,className:a(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none`,C[o]),children:t}),!!e.subtitle&&(0,g.jsx)(n,{size:`xs`,type:`secondary`,children:e.subtitle}),!!s&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:i,className:w[o]}),!!e.footer&&(0,g.jsx)(n,{size:`xxs`,type:`discrete`,children:e.footer})]})}function M({data:e,formattedValue:t,trend:i,size:o,showSparkline:s,showChange:c,ariaLabel:l,className:u}){let d=e.icon;return(0,g.jsxs)(`div`,{className:a(`dark relative flex flex-col overflow-hidden rounded-lg bg-card text-card-foreground shadow-sm ring-1 ring-border`,u),"aria-label":l,children:[(0,g.jsxs)(`div`,{className:`flex flex-col gap-2 p-5`,children:[(0,g.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,g.jsx)(n,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e.label}),!!d&&(0,g.jsx)(`span`,{className:`inline-flex size-7 items-center justify-center rounded-lg bg-foreground/[0.08]`,children:(0,g.jsx)(d,{className:`size-3.5 text-muted-foreground`,"aria-hidden":`true`})})]}),(0,g.jsxs)(`div`,{className:`flex items-baseline gap-2.5`,children:[(0,g.jsx)(r,{tag:`h3`,className:a(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none text-foreground`,C[o]),children:t}),!!c&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:o,variant:`compact`})]}),!!e.subtitle&&(0,g.jsx)(n,{size:`xs`,type:`secondary`,children:e.subtitle})]}),!!s&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:i,className:`h-12 w-full`})]})}function N({data:e,formattedValue:t,size:o,showChange:s,colorScheme:c,ariaLabel:l,className:u,progress:d=0}){let f=x[c==="default"?`primary`:c],p=Math.round(Math.min(Math.max(d,0),100)/100*T);return(0,g.jsxs)(`div`,{className:a(`rounded-xl bg-card p-5 shadow-sm border border-border/50`,u),"aria-label":l,children:[(0,g.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,g.jsx)(n,{size:`xs`,type:`secondary`,weight:`medium`,className:`truncate`,children:e.label}),(0,g.jsx)(`span`,{className:a(`size-1.5 rounded-full shrink-0`,f.dot),"aria-hidden":`true`})]}),(0,g.jsxs)(`div`,{className:`mt-2.5 flex items-baseline gap-2`,children:[(0,g.jsx)(r,{tag:`h3`,className:a(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none`,C[o]),children:t}),!!e.subtitle&&(0,g.jsx)(n,{size:`xs`,type:`secondary`,children:e.subtitle})]}),(0,g.jsx)(`div`,{className:`mt-4 flex items-center gap-0.5`,role:`progressbar`,"aria-label":`${e.label} progress`,"aria-valuenow":d,"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":`${d}%`,children:Array.from({length:T},(e,t)=>(0,g.jsx)(`div`,{className:a(`h-6 w-1.5 rounded-sm transition-colors`,t<p?f.bar:`bg-muted`)},`seg-${t}`))}),!!s&&!!e.change&&(0,g.jsx)(`div`,{className:`mt-3`,children:(0,g.jsx)(m,{change:e.change,trend:e.trend,size:o,variant:`default`})}),!!e.footer&&(0,g.jsxs)(`div`,{className:`mt-2 inline-flex items-center gap-1 text-muted-foreground`,children:[(0,g.jsx)(i,{className:`size-3`,"aria-hidden":`true`}),(0,g.jsx)(n,{size:`xxs`,type:`secondary`,children:e.footer})]})]})}export{b as n,v as r,E as t};

package/dist/showcase/assets/metric-trend-chip-DehaJ3nC.js

@@ -0,0 +1 @@
+import{Er as e}from"./example-BIrQab7K.js";import{t}from"./arrow-down-CYh_aUsd.js";import{t as n}from"./arrow-up-BhmQRZs9.js";import{t as r}from"./minus-OyRBql2C.js";import{n as i,s as a}from"./index-Cz4UGUT2.js";var o=a(),s={positive:{text:`text-success`,badge:`bg-success/10 text-success`,arrow:`text-success`},negative:{text:`text-destructive`,badge:`bg-destructive/10 text-destructive`,arrow:`text-destructive`},neutral:{text:`text-muted-foreground`,badge:`bg-muted text-muted-foreground`,arrow:`text-muted-foreground`}},c={sm:`size-3`,md:`size-3.5`,lg:`size-4`},l={sm:`xxs`,md:`xs`,lg:`sm`},u={sm:`px-1.5 py-0.5`,md:`px-2 py-0.5`,lg:`px-2.5 py-1`};function d(e,t){return e||(t===`up`?`positive`:t===`down`?`negative`:`neutral`)}function f({change:a,trend:f,size:p=`md`,variant:m=`default`,className:h}){let g=d(f,a.direction),_=a.direction===`up`?n:a.direction===`down`?t:r,v=s[g],y=String(a.value),b=a.direction===`up`?`+`:(a.direction,``);return m===`inline`?(0,o.jsxs)(e,{tag:`span`,size:l[p],weight:`medium`,className:i(`metric-trend-chip--component`,v.text,`tabular-nums`,h),children:[b,y]}):m===`compact`?(0,o.jsxs)(`span`,{className:i(`inline-flex items-center gap-0.5`,v.text,h),children:[(0,o.jsx)(_,{className:c[p],strokeWidth:2.5,"aria-hidden":`true`}),(0,o.jsx)(e,{tag:`span`,size:l[p],weight:`semibold`,className:`text-current tabular-nums`,children:y})]}):m===`badge`?(0,o.jsxs)(`span`,{className:i(`inline-flex items-center gap-1 rounded-full font-medium tabular-nums`,v.badge,u[p],h),children:[(0,o.jsx)(_,{className:c[p],strokeWidth:2.5,"aria-hidden":`true`}),(0,o.jsx)(e,{tag:`span`,size:l[p],weight:`semibold`,className:`text-current tabular-nums`,children:y}),!!a.label&&(0,o.jsx)(e,{tag:`span`,size:l[p],className:`text-current opacity-70`,children:a.label})]}):(0,o.jsxs)(`span`,{className:i(`inline-flex items-center gap-1`,v.text,h),children:[(0,o.jsx)(_,{className:c[p],strokeWidth:2.5,"aria-hidden":`true`}),(0,o.jsx)(e,{tag:`span`,size:l[p],weight:`semibold`,className:`tabular-nums`,children:y}),!!a.label&&(0,o.jsx)(e,{tag:`span`,size:l[p],type:`secondary`,children:a.label})]})}f.displayName=`MetricTrendChip`;export{f as t};