admin-ui-starter-kit 0.1.0

package/dist/showcase/assets/menus-DdXgYKVA.js

@@ -0,0 +1,89 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{An as n,Cn as r,Ft as i,Jt as a,Ln as o,Pt as s,Sr as c,Ut as l,Yt as u,Zt as ee,_n as te,at as ne,cr as d,sr as f,t as p,vr as m,y as h,zn as re}from"./example-DPfw-R7_.js";import{t as g}from"./square-pen-Dp7lCfI3.js";import{t as _}from"./trash-2-B0_GprQM.js";import{a as v,k as y}from"./index-B-Z7p0So.js";import{_ as b,a as x,b as ie,c as S,d as C,f as w,g as T,h as E,l as D,m as O,o as k,p as A,r as j,t as M,u as N,v as P,y as F}from"./dropdown-menu-Cqv6D7Sb.js";import{t as I}from"./Separator-C9vXwWmZ.js";import{a as L,i as R,n as z,o as B,r as V,t as H}from"./command-DZqmBolX.js";var U=t(y()),W=v();function ae(e){let[t,n]=U.useState({getBoundingClientRect(){return DOMRect.fromRect({width:0,height:0,x:0,y:0})}}),r=U.useRef(null),i=U.useRef(null),a=U.useRef(null),o=U.useRef(null),s=U.useRef(!0),c=U.useRef(null),l=ne(),u=U.useMemo(()=>({anchor:t,setAnchor:n,actionsRef:a,backdropRef:r,internalBackdropRef:i,positionerRef:o,allowMouseUpTriggerRef:s,initialCursorPointRef:c,rootId:l}),[t,l]);return(0,W.jsx)(b.Provider,{value:u,children:(0,W.jsx)(F.Provider,{value:void 0,children:(0,W.jsx)(C,{...e})})})}var G=500,oe=U.forwardRef(function(e,t){let{render:o,className:c,style:ne,...d}=e,{setAnchor:f,actionsRef:p,internalBackdropRef:m,backdropRef:g,positionerRef:_,allowMouseUpTriggerRef:v,initialCursorPointRef:y,rootId:b}=P(!1),{store:x}=ie(!1),S=x.useState(`open`),C=x.useState(`disabled`),w=U.useRef(null),T=U.useRef(null),E=n(),D=n(),O=U.useRef(!1);function k(e,t,n){let r=n.type.startsWith(`touch`);y.current={x:e,y:t},f({getBoundingClientRect(){return DOMRect.fromRect({width:r?10:0,height:r?10:0,x:e,y:t})}}),O.current=!1,p.current?.setOpen(!0,u(te,n)),D.start(G,()=>{O.current=!0})}function A(e){C||(v.current=!0,r(e),k(e.clientX,e.clientY,e.nativeEvent),a(l(w.current),`mouseup`,e=>{if(v.current=!1,!O.current)return;D.clear(),O.current=!1;let t=i(e);s(_.current,t)||b&&t&&N(t)===b||p.current?.setOpen(!1,u(ee,e))},{once:!0}))}function j(e){if(!C&&(v.current=!1,e.touches.length===1)){e.stopPropagation();let t=e.touches[0];T.current={x:t.clientX,y:t.clientY},E.start(G,()=>{T.current&&k(T.current.x,T.current.y,e.nativeEvent)})}}function M(e){if(E.isStarted()&&T.current&&e.touches.length===1){let t=e.touches[0],n=Math.abs(t.clientX-T.current.x),r=Math.abs(t.clientY-T.current.y);(n>10||r>10)&&E.clear()}}function F(){E.clear(),T.current=null}return U.useEffect(()=>{function e(e){if(C)return;let t=i(e);(s(w.current,t)||s(m.current,t)||s(g.current,t))&&e.preventDefault()}return a(l(w.current),`contextmenu`,e)},[g,C,m]),re(`div`,e,{state:{open:S},ref:[w,t],props:[{onContextMenu:A,onTouchStart:j,onTouchMove:M,onTouchEnd:F,onTouchCancel:F,style:{WebkitTouchCallout:`none`}},d],stateAttributesMapping:h})});function se({...e}){return(0,W.jsx)(ae,{"data-slot":`context-menu`,...e})}function ce({className:e,...t}){return(0,W.jsx)(oe,{"data-slot":`context-menu-trigger`,className:m(`select-none`,e),...t})}function le({className:e,align:t=`start`,alignOffset:n=4,side:r=`right`,sideOffset:i=0,...a}){return(0,W.jsx)(A,{children:(0,W.jsx)(w,{className:`isolate z-50 outline-none`,align:t,alignOffset:n,side:r,sideOffset:i,children:(0,W.jsx)(O,{"data-slot":`context-menu-content`,className:m(`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 ue({className:e,inset:t,...n}){return(0,W.jsx)(T,{"data-slot":`context-menu-label`,"data-inset":t,className:m(`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,W.jsx)(E,{"data-slot":`context-menu-item`,"data-inset":t,"data-variant":n,className:m(`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,W.jsx)(I,{"data-slot":`context-menu-separator`,className:m(`bg-border -mx-1 my-1 h-px`,e),...t})}var de=e({CommandPalette:()=>X,ContextMenuRightClick:()=>Y,DropdownMenuExample:()=>J});function J(){return(0,W.jsx)(W.Fragment,{children:(0,W.jsxs)(M,{children:[(0,W.jsx)(D,{render:e=>(0,W.jsx)(o,{variant:`outline`,...e,children:`Open menu`})}),(0,W.jsxs)(j,{children:[(0,W.jsx)(k,{children:`Actions`}),(0,W.jsx)(S,{}),(0,W.jsxs)(x,{children:[(0,W.jsx)(g,{className:`size-3.5`}),` Edit`]}),(0,W.jsxs)(x,{children:[(0,W.jsx)(c,{className:`size-3.5`}),` Duplicate`]}),(0,W.jsx)(S,{}),(0,W.jsxs)(x,{variant:`destructive`,children:[(0,W.jsx)(_,{className:`size-3.5`}),` Delete`]})]})]})})}function Y(){return(0,W.jsx)(W.Fragment,{children:(0,W.jsxs)(se,{children:[(0,W.jsx)(ce,{children:(0,W.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,W.jsxs)(le,{children:[(0,W.jsx)(ue,{children:`File`}),(0,W.jsx)(q,{}),(0,W.jsxs)(K,{children:[(0,W.jsx)(g,{className:`size-3.5`}),` Rename`]}),(0,W.jsxs)(K,{children:[(0,W.jsx)(c,{className:`size-3.5`}),` Copy`]}),(0,W.jsx)(q,{}),(0,W.jsxs)(K,{variant:`destructive`,children:[(0,W.jsx)(_,{className:`size-3.5`}),` Delete`]})]})]})})}function X(){return(0,W.jsx)(W.Fragment,{children:(0,W.jsxs)(H,{className:`rounded-md border border-border`,children:[(0,W.jsx)(R,{placeholder:`Type a command…`}),(0,W.jsxs)(B,{children:[(0,W.jsx)(z,{children:`No results.`}),(0,W.jsxs)(V,{heading:`Actions`,children:[(0,W.jsx)(L,{children:`Create order`}),(0,W.jsx)(L,{children:`Add customer`}),(0,W.jsx)(L,{children:`Generate invoice`})]}),(0,W.jsxs)(V,{heading:`Navigation`,children:[(0,W.jsx)(L,{children:`Go to Orders`}),(0,W.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,W.jsx)(d,{title:`UI · Menus`,description:`DropdownMenu, ContextMenu, Command palette.`,layer:`ui`,status:`ready`,children:(0,W.jsxs)(f,{title:`Examples`,id:`examples`,children:[(0,W.jsx)(p,{name:`DropdownMenuExample`,source:Z,children:(0,W.jsx)(J,{})}),(0,W.jsx)(p,{name:`ContextMenuRightClick`,source:Z,children:(0,W.jsx)(Y,{})}),(0,W.jsx)(p,{name:`CommandPalette`,source:Z,children:(0,W.jsx)(X,{})})]})})}function fe(e={}){let{wrapper:t}=e.components||{};return t?(0,W.jsx)(t,{...e,children:(0,W.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-Bl6P4TA0.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B-Z7p0So.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-aXo96h_U.js

@@ -0,0 +1,278 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{Cr as n,Sr as r,a as i,c as a,cr as o,gr as s,hr as c,lr as l,o as u,r as d,sr as f,t as p,vr as m}from"./example-DPfw-R7_.js";import{t as h}from"./badge-check-oP2z_95u.js";import{t as g}from"./clock-ynCzs_rR.js";import{t as _}from"./credit-card--5vg7bQy.js";import{t as v}from"./external-link-DJNGkjZ0.js";import{t as y}from"./git-branch-D4-6vv6t.js";import{t as ee}from"./globe-CqLYhUfl.js";import{t as b}from"./info-DyB6KH3Z.js";import{t as te}from"./mail-DmOBTX4I.js";import{t as x}from"./map-pin-o3egisLq.js";import{t as S}from"./phone-XvU6LndA.js";import{t as ne}from"./shield-check-jGSgmijm.js";import{t as C}from"./user-3L762Mec.js";import{D as re,a as w,k as T,r as E}from"./index-B-Z7p0So.js";import{t as D}from"./props-table-BzUnIcv-.js";import{t as O}from"./smart-card-50WN9sCI.js";import{r as k,t as A}from"./avatar-DR2mqPpY.js";import{t as j}from"./separator-CZ_sPWQj.js";var ie=E(`building-2`,[[`path`,{d:`M10 12h4`,key:`a56b0p`}],[`path`,{d:`M10 8h4`,key:`1sr2af`}],[`path`,{d:`M14 21v-3a2 2 0 0 0-4 0v3`,key:`1rgiei`}],[`path`,{d:`M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2`,key:`secmi2`}],[`path`,{d:`M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16`,key:`16ra0t`}]]),ae=E(`calendar-days`,[[`path`,{d:`M8 2v4`,key:`1cmpym`}],[`path`,{d:`M16 2v4`,key:`4m81vk`}],[`rect`,{width:`18`,height:`18`,x:`3`,y:`4`,rx:`2`,key:`1hopcy`}],[`path`,{d:`M3 10h18`,key:`8toen8`}],[`path`,{d:`M8 14h.01`,key:`6423bh`}],[`path`,{d:`M12 14h.01`,key:`1etili`}],[`path`,{d:`M16 14h.01`,key:`1gbofw`}],[`path`,{d:`M8 18h.01`,key:`lrp35t`}],[`path`,{d:`M12 18h.01`,key:`mhygvu`}],[`path`,{d:`M16 18h.01`,key:`kzsmim`}]]),oe=E(`hash`,[[`line`,{x1:`4`,x2:`20`,y1:`9`,y2:`9`,key:`4lhtct`}],[`line`,{x1:`4`,x2:`20`,y1:`15`,y2:`15`,key:`vyu0kd`}],[`line`,{x1:`10`,x2:`8`,y1:`3`,y2:`21`,key:`1ggp8o`}],[`line`,{x1:`16`,x2:`14`,y1:`3`,y2:`21`,key:`weycgp`}]]),se=E(`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`}]]),M=t(T(),1),N=w(),ce={formatInfoAriaLabel:e=>`${e} info`,infoFallback:`Info`},le={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`},ue={start:`justify-start`,end:`justify-end`,center:`justify-center`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`},de={start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`},P=(e,t)=>e.id?e.id:`metadata-${typeof e.label==`string`?e.label:`${t}`}-${t}`;function F({items:e,columns:t=2,dense:n=!1,emptyLabel:r=`—`,title:o,titleSeparator:l=!1,className:f,gapClassName:p,labelClassName:h,valueClassName:g,descriptionClassName:_,layout:v=`vertical`,justify:y=`start`,align:ee=`center`,separator:te=`: `,itemSeparator:x=!1,wrap:S=!0,strings:ne}){let C=re(ce,ne),w=M.useMemo(()=>e.filter(Boolean),[e]);if(M.useEffect(()=>{},[v,w]),w.length===0)return null;let T=le[t]??le[2],E=p??(n?`gap-4`:`gap-6`),D=n?`text-xxs`:`text-xs`,O=`text-sm`,k=o!=null,A=k&&l;if(v===`horizontal`){let e=ue[y]??ue.start,t=de[ee]??de.center,l=typeof x==`string`?x:x?` | `:``,p=n?`gap-2`:`gap-3`,_=S?`flex-wrap`:`flex-nowrap`;return(0,N.jsxs)(`div`,{className:m(`metadata-list--component`,`metadata-list-container space-y-3`,f),children:[!!k&&(0,N.jsx)(c,{tag:`h6`,className:`font-medium text-muted-foreground uppercase tracking-wide`,children:o}),!!A&&(0,N.jsx)(j,{className:`my-3`}),(0,N.jsx)(`div`,{className:m(`flex`,_,e,t,p),children:w.map((e,t)=>{let o=P(e,t),c=e.emptyLabel??r,f=e.value??c,p=e.icon,_=e.tooltip!==null&&e.tooltip!==void 0,v=typeof e.render==`function`,y=l&&t<w.length-1;return(0,N.jsxs)(M.Fragment,{children:[(0,N.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[!!p&&(0,N.jsx)(p,{className:m(`flex-shrink-0`,n?`h-3 w-3`:`h-3.5 w-3.5`,`text-muted-foreground`)}),(0,N.jsx)(s,{size:`xs`,type:`secondary`,className:m(`metadata--field tracking-wide whitespace-nowrap`,D,h),children:e.label}),!!_&&(0,N.jsxs)(i,{children:[(0,N.jsx)(a,{render:t=>(0,N.jsx)(d,{...t,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:m(`inline-flex items-center`,t.className),"aria-label":typeof e.label==`string`?C.formatInfoAriaLabel(e.label):C.infoFallback,children:(0,N.jsx)(b,{className:`h-3 w-3 text-muted-foreground cursor-help flex-shrink-0`})})}),(0,N.jsx)(u,{side:`top`,align:`start`,className:`max-w-xs`,children:(0,N.jsx)(s,{type:`inverse`,size:`xs`,children:e.tooltip})})]}),(0,N.jsx)(s,{size:`xs`,type:`secondary`,children:te}),v?e.render?.(e):(0,N.jsx)(s,{weight:`medium`,className:m(O,g),children:f})]}),!!y&&(0,N.jsx)(s,{size:`xs`,type:`secondary`,children:l})]},o)})})]})}if(v===`rows`){let e=n?`py-1.5`:`py-2.5`;return(0,N.jsxs)(`div`,{className:m(`metadata-list-container`,f),children:[!!k&&(0,N.jsx)(c,{tag:`h6`,className:`font-medium text-muted-foreground uppercase tracking-wide mb-2`,children:o}),!!A&&(0,N.jsx)(j,{className:`mb-2`}),(0,N.jsx)(`dl`,{className:`divide-y divide-border/50`,children:w.map((t,o)=>{let c=P(t,o),l=t.emptyLabel??r,f=t.value??l,p=t.icon,v=t.tooltip!==null&&t.tooltip!==void 0,y=typeof t.render==`function`;return(0,N.jsxs)(`div`,{className:m(`grid items-baseline gap-x-4 gap-y-1 grid-cols-[minmax(120px,1fr)_2fr]`,e),children:[(0,N.jsxs)(`dt`,{className:`flex items-center gap-1.5 min-w-0`,children:[!!p&&(0,N.jsx)(p,{className:m(`flex-shrink-0 text-muted-foreground`,n?`h-3 w-3`:`h-3.5 w-3.5`)}),(0,N.jsx)(s,{type:`secondary`,className:m(`truncate`,h),children:t.label}),!!v&&(0,N.jsxs)(i,{children:[(0,N.jsx)(a,{render:e=>(0,N.jsx)(d,{...e,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:m(`inline-flex items-center`,e.className),"aria-label":typeof t.label==`string`?C.formatInfoAriaLabel(t.label):C.infoFallback,children:(0,N.jsx)(b,{className:`h-3 w-3 text-muted-foreground cursor-help flex-shrink-0`})})}),(0,N.jsx)(u,{side:`top`,align:`start`,className:`max-w-xs`,children:(0,N.jsx)(s,{type:`inverse`,size:`xs`,children:t.tooltip})})]})]}),(0,N.jsxs)(`dd`,{className:`min-w-0`,children:[y?t.render?.(t):(0,N.jsx)(s,{weight:`medium`,className:m(`break-words`,g),children:f}),!!t.description&&(0,N.jsx)(s,{size:`xs`,type:`secondary`,className:m(`mt-0.5`,_),children:t.description})]})]},c)})})]})}return(0,N.jsxs)(`div`,{className:m(`metadata-list-container space-y-3`,f),children:[!!k&&(0,N.jsx)(c,{tag:`h6`,className:`font-medium text-muted-foreground uppercase tracking-wide`,children:o}),!!A&&(0,N.jsx)(j,{className:`my-3`}),(0,N.jsx)(`div`,{className:m(`grid`,T,E),children:w.map((e,t)=>{let o=P(e,t),c=e.emptyLabel??r,l=e.value??c,f=e.icon,p=e.tooltip!==null&&e.tooltip!==void 0,v=typeof e.render==`function`;return(0,N.jsxs)(`div`,{className:`space-y-1`,children:[(0,N.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[!!f&&(0,N.jsx)(f,{className:m(`flex-shrink-0`,n?`h-3 w-3`:`h-3.5 w-3.5`,`text-muted-foreground`)}),(0,N.jsx)(s,{size:`xs`,type:`secondary`,className:m(` tracking-wide`,D,h),children:e.label}),!!p&&(0,N.jsxs)(i,{children:[(0,N.jsx)(a,{render:t=>(0,N.jsx)(d,{...t,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-xs`,className:m(`inline-flex items-center`,t.className),"aria-label":typeof e.label==`string`?C.formatInfoAriaLabel(e.label):C.infoFallback,children:(0,N.jsx)(b,{className:`h-3 w-3 text-muted-foreground cursor-help flex-shrink-0`})})}),(0,N.jsx)(u,{side:`top`,align:`start`,className:`max-w-xs`,children:(0,N.jsx)(s,{type:`inverse`,size:`xs`,children:e.tooltip})})]})]}),v?e.render?.(e):(0,N.jsx)(s,{weight:`medium`,className:m(O,g),children:l}),!!e.description&&(0,N.jsx)(s,{size:`xs`,type:`secondary`,className:m(_),children:e.description})]},o)})})]})}F.displayName=`MetadataList`;var fe=e({APISurface:()=>B,Dense4ColumnOverview:()=>q,EmptyStateFallbacksCustomRenderers:()=>Z,Example3ColumnWithIcons:()=>J,HorizontalPillSummary:()=>Y,RowsReceiptStyle:()=>W,RowsTwoColumnWithHairlines:()=>U,RowsWithIconsTooltips:()=>G,SectionedMultiCard:()=>K,Vertical2ColumnNoIcons:()=>V,VerticalSingleColumnNoIcons:()=>H,WithTitleSeparator:()=>X});function I({value:e,mono:t=!0}){let[i,a]=(0,M.useState)(!1);return(0,N.jsxs)(`button`,{type:`button`,onClick:()=>{try{navigator.clipboard.writeText(e)}catch{}a(!0),setTimeout(()=>a(!1),1200)},className:`group inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 -ml-1 transition-colors hover:bg-muted/60`,title:`Copy to clipboard`,children:[(0,N.jsx)(s,{tag:`span`,weight:`medium`,className:t?`font-mono tabular-nums`:`tabular-nums`,children:e}),i?(0,N.jsx)(n,{className:`size-3 text-success`,"aria-hidden":`true`}):(0,N.jsx)(r,{className:`size-3 text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100`,"aria-hidden":`true`})]})}function pe({initials:e,name:t,sub:n}){return(0,N.jsxs)(`span`,{className:`inline-flex items-center gap-2`,children:[(0,N.jsx)(A,{className:`size-6`,children:(0,N.jsx)(k,{className:`text-xxs font-semibold`,children:e})}),(0,N.jsxs)(`span`,{className:`inline-flex flex-col leading-tight`,children:[(0,N.jsx)(s,{tag:`span`,weight:`medium`,children:t}),!!n&&(0,N.jsx)(s,{tag:`span`,size:`xxs`,type:`secondary`,children:n})]})]})}var L=[{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)`}],R=[{id:`sku`,label:`SKU`,icon:oe,value:(0,N.jsx)(I,{value:`SP-204-WL`}),tooltip:`Internal stock-keeping unit`},{id:`category`,label:`Category`,icon:se,value:(0,N.jsx)(l,{variant:`secondary`,children:`Wellness`})},{id:`status`,label:`Status`,icon:h,value:(0,N.jsx)(l,{variant:`success`,children:`Active`})},{id:`created`,label:`Created`,icon:ae,value:`Apr 12, 2026`},{id:`updated`,label:`Last updated`,icon:g,value:`Apr 28, 2026 · 14:32`},{id:`version`,label:`Version`,icon:y,value:(0,N.jsx)(I,{value:`v3.2.1`})}],me=[{id:`id`,label:`Booking ID`,value:(0,N.jsx)(I,{value:`BKG-2026-0412`})},{id:`customer`,label:`Customer`,value:(0,N.jsx)(pe,{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,N.jsx)(l,{variant:`success`,children:`Paid`})},{id:`amount`,label:`Total`,value:(0,N.jsx)(s,{tag:`span`,weight:`semibold`,className:`tabular-nums`,children:`180.00 USD`})}],he=[{id:`sub`,label:`Subtotal`,value:`180.00 USD`},{id:`tax`,label:`VAT (20%)`,value:`36.00 USD`},{id:`discount`,label:`Discount`,value:(0,N.jsx)(s,{tag:`span`,weight:`medium`,type:`success`,className:`tabular-nums`,children:`−25.00 USD`})},{id:`total`,label:`Total`,value:(0,N.jsx)(s,{tag:`span`,weight:`bold`,className:`tabular-nums`,children:`191.00 USD`})}],ge=[{id:`name`,label:`Name`,icon:C,value:`Sarah Smitha`},{id:`email`,label:`Email`,icon:te,value:(0,N.jsx)(I,{value:`maria@example.com`,mono:!1})},{id:`phone`,label:`Phone`,icon:S,value:(0,N.jsx)(I,{value:`+1 888 123 456`})},{id:`address`,label:`Address`,icon:x,value:`ul. Vitosha 24, New York 1000`,description:`USA`}],_e=[{id:`card`,label:`Card`,icon:_,value:`Visa ending 4242`},{id:`billing`,label:`Billing address`,icon:ie,value:`ul. Slavyanska 9, Los Angeles`},{id:`verified`,label:`Verified`,icon:ne,value:(0,N.jsx)(l,{variant:`success`,children:`Yes`})}],z=[{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`}],ve=[{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:ee,render:()=>(0,N.jsxs)(`a`,{href:`#`,className:`inline-flex items-center gap-1 text-primary hover:underline`,children:[(0,N.jsx)(s,{tag:`span`,weight:`medium`,children:`example.com`}),(0,N.jsx)(v,{className:`size-3`,"aria-hidden":`true`})]})}],ye=[{id:`plan`,label:`Plan`,value:`Pro Annual`},{id:`seats`,label:`Seats`,value:`12 / 50`},{id:`next`,label:`Next billing`,value:`May 12, 2026`}];function B(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(s,{type:`secondary`,children:[`Each item: `,(0,N.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,N.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`layout`}),`, `,(0,N.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`columns`}),` (1–4), `,(0,N.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`dense`}),`, `,(0,N.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`title`}),`, `,(0,N.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`titleSeparator`}),`, `,(0,N.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`separator`}),`. Per-item `,(0,N.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 V(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(O,{title:`Account details`,padding:`base`,children:(0,N.jsx)(F,{items:L,columns:2})})})}function H(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(`div`,{className:`max-w-sm rounded-xl border border-border bg-card p-5`,children:(0,N.jsx)(F,{items:L.slice(0,4),columns:1})})})}function U(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(O,{title:`Booking #BKG-2026-0412`,padding:`base`,children:(0,N.jsx)(F,{items:me,layout:`rows`})})})}function W(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(`div`,{className:`max-w-sm rounded-xl border border-border bg-card p-5`,children:(0,N.jsx)(F,{items:he,layout:`rows`,dense:!0})})})}function G(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(O,{title:`Product details`,padding:`base`,children:(0,N.jsx)(F,{items:R,layout:`rows`})})})}function K(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-2`,children:[(0,N.jsx)(O,{title:`Customer`,children:(0,N.jsx)(F,{items:ge,layout:`rows`})}),(0,N.jsx)(O,{title:`Payment`,children:(0,N.jsx)(F,{items:_e,layout:`rows`})})]})})}function q(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(`div`,{className:`rounded-xl border border-border bg-card p-5`,children:(0,N.jsx)(F,{items:R,columns:4,dense:!0})})})}function J(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(`div`,{className:`rounded-xl border border-border bg-card p-5`,children:(0,N.jsx)(F,{items:R,columns:3})})})}function Y(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(`div`,{className:`space-y-3`,children:[(0,N.jsx)(`div`,{className:`rounded-lg border border-border bg-card px-4 py-3`,children:(0,N.jsx)(F,{items:z,layout:`horizontal`,separator:`·`})}),(0,N.jsx)(`div`,{className:`rounded-lg border border-border bg-card px-4 py-3`,children:(0,N.jsx)(F,{items:z,layout:`horizontal`,separator:`:`,itemSeparator:!0})}),(0,N.jsx)(`div`,{className:`rounded-lg bg-muted/30 px-4 py-3`,children:(0,N.jsx)(F,{items:ye,layout:`horizontal`,separator:`:`,itemSeparator:`•`})})]})})}function X(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(F,{title:`Inventory metadata`,titleSeparator:!0,items:R,columns:2})})}function Z(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(O,{title:`Mixed`,padding:`base`,children:(0,N.jsx)(F,{items:ve,layout:`rows`})})})}var Q=`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 { SmartCard } from '@/components/base/cards';
+import { Text } from '@/components/typography';
+import { MetadataList, type MetadataListItem } from '@/components/base/display/metadata/metadata-list';
+
+// ─── Helpers ────────────────────────────────────────────────────────────
+
+function CopyableValue({ value, mono = true }: { value: string; mono?: boolean }) {
+	const [copied, setCopied] = useState(false);
+	return (
+		<button
+			type="button"
+			onClick={() => {
+				try { navigator.clipboard.writeText(value); } catch { /* ignore */ }
+				setCopied(true);
+				setTimeout(() => setCopied(false), 1200);
+			}}
+			className="group inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 -ml-1 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 be(e){let t={code:`code`,p:`p`,...e.components};return fe||$(`Examples`,!1),B||$(`Examples.APISurface`,!0),q||$(`Examples.Dense4ColumnOverview`,!0),Z||$(`Examples.EmptyStateFallbacksCustomRenderers`,!0),J||$(`Examples.Example3ColumnWithIcons`,!0),Y||$(`Examples.HorizontalPillSummary`,!0),W||$(`Examples.RowsReceiptStyle`,!0),U||$(`Examples.RowsTwoColumnWithHairlines`,!0),G||$(`Examples.RowsWithIconsTooltips`,!0),K||$(`Examples.SectionedMultiCard`,!0),V||$(`Examples.Vertical2ColumnNoIcons`,!0),H||$(`Examples.VerticalSingleColumnNoIcons`,!0),X||$(`Examples.WithTitleSeparator`,!0),(0,N.jsxs)(o,{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,N.jsx)(f,{title:`Overview`,id:`overview`,children:(0,N.jsxs)(t.p,{children:[(0,N.jsx)(t.code,{children:`MetadataList`}),` renders an array of `,(0,N.jsx)(t.code,{children:`{ id, label, value, icon?, tooltip?, description?, render?, emptyLabel? }`}),` items. List-level props pick the
+`,(0,N.jsx)(t.code,{children:`layout`}),` (`,(0,N.jsx)(t.code,{children:`vertical`}),` / `,(0,N.jsx)(t.code,{children:`rows`}),` / `,(0,N.jsx)(t.code,{children:`horizontal`}),`), the `,(0,N.jsx)(t.code,{children:`columns`}),` count (1–4),
+and density. Per-item `,(0,N.jsx)(t.code,{children:`render`}),` escapes the default formatting for status
+pills, copyable IDs, links, or inline edits.`]})}),(0,N.jsx)(f,{title:`API surface`,id:`api-surface`,children:(0,N.jsx)(p,{name:`APISurface`,source:Q,children:(0,N.jsx)(B,{})})}),(0,N.jsxs)(f,{title:`Vertical grid`,id:`vertical`,children:[(0,N.jsx)(p,{name:`Vertical2ColumnNoIcons`,source:Q,children:(0,N.jsx)(V,{})}),(0,N.jsx)(p,{name:`VerticalSingleColumnNoIcons`,source:Q,children:(0,N.jsx)(H,{})}),(0,N.jsx)(p,{name:`Example3ColumnWithIcons`,source:Q,children:(0,N.jsx)(J,{})}),(0,N.jsx)(p,{name:`Dense4ColumnOverview`,source:Q,children:(0,N.jsx)(q,{})})]}),(0,N.jsxs)(f,{title:`Two-column rows`,id:`rows`,children:[(0,N.jsx)(p,{name:`RowsTwoColumnWithHairlines`,source:Q,children:(0,N.jsx)(U,{})}),(0,N.jsx)(p,{name:`RowsReceiptStyle`,source:Q,children:(0,N.jsx)(W,{})}),(0,N.jsx)(p,{name:`RowsWithIconsTooltips`,source:Q,children:(0,N.jsx)(G,{})})]}),(0,N.jsx)(f,{title:`Horizontal pills`,id:`horizontal`,children:(0,N.jsx)(p,{name:`HorizontalPillSummary`,source:Q,children:(0,N.jsx)(Y,{})})}),(0,N.jsxs)(f,{title:`Composition`,id:`composition`,children:[(0,N.jsx)(p,{name:`SectionedMultiCard`,source:Q,children:(0,N.jsx)(K,{})}),(0,N.jsx)(p,{name:`WithTitleSeparator`,source:Q,children:(0,N.jsx)(X,{})}),(0,N.jsx)(p,{name:`EmptyStateFallbacksCustomRenderers`,source:Q,children:(0,N.jsx)(Z,{})})]}),(0,N.jsx)(f,{title:`API`,id:`api`,children:(0,N.jsx)(D,{component:`MetadataList`})})]})}function xe(e={}){let{wrapper:t}=e.components||{};return t?(0,N.jsx)(t,{...e,children:(0,N.jsx)(be,{...e})}):be(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{xe as default};

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

@@ -0,0 +1 @@
+import{r as e}from"./chunk-CilyBKbf.js";import{gr as t,hr as n,vr as r}from"./example-DPfw-R7_.js";import{t as i}from"./arrow-up-right-C8r6vYfE.js";import{a,k as o}from"./index-B-Z7p0So.js";import{O as s,n as c,t as l}from"./AreaChart-D-RqNtqG.js";import{t as u}from"./smart-card-50WN9sCI.js";import{t as d}from"./analytics.strings-BcotPUad.js";import{n as f,t as p}from"./format-metric-value-cyOYS377.js";import{t as m}from"./metric-trend-chip-m389ipmG.js";var h=e(o(),1),g=a(),_={positive:`var(--success)`,negative:`var(--destructive)`,neutral:`var(--muted-foreground)`};function v({data:e,trend:t=`neutral`,color:n,className:i,animated:a=!0,"aria-label":o=`Trend sparkline`}){let u=(0,h.useId)(),d=(0,h.useMemo)(()=>`metric-spark-${u.replaceAll(`:`,``)}`,[u]),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:r(`metric-sparkline--component`,`w-full`,i),"aria-hidden":`true`}):(0,g.jsx)(`div`,{className:r(`w-full`,i),role:`img`,"aria-label":o,children:(0,g.jsx)(s,{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)(c,{type:`monotone`,dataKey:`v`,stroke:f,strokeWidth:1.75,fill:`url(#${d})`,dot:!1,activeDot:!1,isAnimationActive:a,animationDuration:600})]})})})}v.displayName=`MetricSparkline`;var y=({className:e})=>(0,g.jsx)(`div`,{className:r(`animate-pulse rounded bg-muted`,e)});function b({variant:e=`default`,size:t=`md`,className:n}){let i=t===`sm`?`p-3`:t===`lg`?`p-5`:`p-4`;return e===`card`||e===`bordered`||e===`accent`||e===`colored`?(0,g.jsxs)(`div`,{className:r(`metric-skeleton--component`,`rounded-xl border border-border bg-card shadow-sm`,i,n),"aria-busy":`true`,"aria-live":`polite`,children:[(0,g.jsx)(y,{className:`h-3 w-24`}),(0,g.jsx)(y,{className:r(`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:r(`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:r(`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:r(`flex flex-col gap-1.5`,i,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:n,variant:i=`default`,size:a=`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(n),[n]),C=(0,h.useMemo)(()=>f(n),[n]);if(u)return(0,g.jsx)(b,{variant:i,size:a,className:r(`metric--component`,y)});if(m)return(0,g.jsx)(`div`,{className:r(`flex items-center justify-center rounded-lg border border-border bg-card p-4 text-muted-foreground`,y),children:(0,g.jsx)(t,{children:_??d.metricErrorLabel})});let w={data:n,formattedValue:S,trend:C,size:a,showSparkline:s,showChange:c,showIcon:l,colorScheme:o,ariaLabel:x??n.label,className:y};switch(i){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:i,trend:a,size:o,showSparkline:s,showChange:c,showIcon:l,ariaLabel:u,className:d}){let f=e.icon;return(0,g.jsxs)(`div`,{className:r(`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)(t,{size:`xs`,type:`secondary`,weight:`medium`,className:`truncate`,children:e.label})]}),(0,g.jsx)(n,{tag:`h5`,className:r(`font-bold tabular-nums tracking-tight border-none pb-0 leading-tight truncate`,S[o]),title:i,children:i}),!!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)(t,{size:`xs`,type:`secondary`,className:`truncate`,children:e.subtitle}),!!s&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:a,className:r(`mt-auto`,w[o])}),!!e.footer&&(0,g.jsx)(t,{size:`xxs`,type:`discrete`,className:`truncate`,children:e.footer})]})}function O({data:e,formattedValue:i,trend:a,size:o,showSparkline:s,showChange:c,showIcon:l,ariaLabel:d,className:f}){let p=e.icon,h=!!(e.href||e.onClick),_=o===`sm`?`sm`:o===`lg`?`lg`:`base`,y=(0,g.jsxs)(u,{title:e.label,icon:l&&p?(0,g.jsx)(p,{className:`size-4`,"aria-hidden":`true`}):null,tooltip:e.tooltip,padding:_,className:r(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)(n,{tag:o===`sm`?`h5`:o===`lg`?`h3`:`h4`,className:r(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none`,C[o]),children:i}),!!c&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:o,variant:`badge`})]}),!!e.subtitle&&(0,g.jsx)(t,{type:`secondary`,className:`mt-2`,children:e.subtitle}),!!s&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:a,className:r(`mt-3`,o===`lg`?`h-12`:`h-10`)}),!!e.footer&&(0,g.jsx)(t,{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:n,size:i,showChange:a,showIcon:o,ariaLabel:s,className:c}){let l=e.icon;return(0,g.jsxs)(`div`,{className:r(`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)(t,{size:`xs`,type:`secondary`,className:`truncate`,children:e.label}),(0,g.jsx)(t,{tag:`span`,size:i===`sm`?`sm`:`lg`,weight:`bold`,className:`block truncate tabular-nums`,children:n})]}),!!a&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:i,variant:`badge`,className:`shrink-0`})]})}function A({data:e,formattedValue:n,size:i,showChange:a,ariaLabel:o,className:s}){return(0,g.jsxs)(`span`,{className:r(`inline-flex items-baseline gap-2`,s),"aria-label":o,children:[(0,g.jsxs)(t,{tag:`span`,size:i===`lg`?`sm`:`xs`,type:`secondary`,children:[e.label,`:`]}),(0,g.jsx)(t,{tag:`span`,size:i===`lg`?`sm`:`xs`,weight:`semibold`,className:`tabular-nums`,children:n}),!!a&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:`sm`,variant:`inline`})]})}function j({data:e,formattedValue:i,trend:a,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:r(`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)(t,{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)(n,{tag:o===`lg`?`h3`:`h4`,className:r(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none`,C[o]),children:i}),!!e.subtitle&&(0,g.jsx)(t,{size:`xs`,type:`secondary`,children:e.subtitle}),!!s&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:a,className:w[o]}),!!e.footer&&(0,g.jsx)(t,{size:`xxs`,type:`discrete`,children:e.footer})]})}function M({data:e,formattedValue:i,trend:a,size:o,showSparkline:s,showChange:c,ariaLabel:l,className:u}){let d=e.icon;return(0,g.jsxs)(`div`,{className:r(`dark relative flex flex-col rounded-2xl bg-card text-card-foreground shadow-lg ring-1 ring-border overflow-hidden`,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)(t,{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)(n,{tag:`h3`,className:r(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none text-foreground`,C[o]),children:i}),!!c&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:o,variant:`compact`})]}),!!e.subtitle&&(0,g.jsx)(t,{size:`xs`,type:`secondary`,children:e.subtitle})]}),!!s&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:a,className:`h-12 w-full`})]})}function N({data:e,formattedValue:a,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:r(`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)(t,{size:`xs`,type:`secondary`,weight:`medium`,className:`truncate`,children:e.label}),(0,g.jsx)(`span`,{className:r(`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)(n,{tag:`h3`,className:r(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none`,C[o]),children:a}),!!e.subtitle&&(0,g.jsx)(t,{size:`xs`,type:`secondary`,children:e.subtitle})]}),(0,g.jsx)(`div`,{className:`mt-4 flex items-center gap-0.5`,role:`progressbar`,"aria-valuenow":d,"aria-valuemin":0,"aria-valuemax":100,children:Array.from({length:T},(e,t)=>(0,g.jsx)(`div`,{className:r(`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)(t,{size:`xxs`,type:`secondary`,children:e.footer})]})]})}export{b as n,v as r,E as t};

package/dist/showcase/assets/metric-grid-6Dpj5eV3.js

@@ -0,0 +1 @@
+import{gr as e,r as t,vr as n}from"./example-DPfw-R7_.js";import{t as r}from"./calendar-dWZ2-0gU.js";import{a as i}from"./index-B-Z7p0So.js";import{t as a}from"./metric-BLHKuZtE.js";var o=i();function s({metrics:i,period:s,onPeriodChange:c,variant:l=`default`,size:u=`md`,showSparklines:d=!0,showChanges:f=!0,footerText:p,className:m}){let h=(0,o.jsx)(`div`,{className:`flex min-w-0 flex-1 items-stretch divide-x divide-border`,children:i.map(e=>(0,o.jsx)(`div`,{className:`flex-1 min-w-0 px-4 py-3`,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 px-3`,children:(0,o.jsxs)(t,{variant:`secondary`,buttonStyle:`ghost`,className:`gap-1.5`,onClick:c?()=>c(s.value):void 0,children:[(0,o.jsx)(r,{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:n(`metric-bar--component`,`rounded-xl bg-gradient-to-r from-primary/8 via-info/5 to-success/8 p-[1px]`,m),children:[(0,o.jsxs)(`div`,{className:`flex items-stretch overflow-hidden rounded-[11px] bg-card`,children:[g&&(0,o.jsxs)(o.Fragment,{children:[g,(0,o.jsx)(`div`,{className:`w-px bg-border`,"aria-hidden":`true`})]}),h]}),!!p&&(0,o.jsx)(`div`,{className:`rounded-b-[11px] 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:n(`flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm`,m),children:[(0,o.jsxs)(`div`,{className:`flex items-stretch`,children:[g&&(0,o.jsxs)(o.Fragment,{children:[g,(0,o.jsx)(`div`,{className:`w-px bg-border`,"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`;var c={sm:`gap-2`,md:`gap-3`,lg:`gap-4`};function l(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 u={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 d({metrics:e,variant:t=`card`,size:r=`md`,colorScheme:i=`default`,columns:s=`auto`,gap:d=`md`,showSparklines:f=!0,showChanges:p=!0,showIcons:m=!0,loading:h=!1,className:g}){return(0,o.jsx)(`div`,{className:n(`metric-grid--component`,`grid`,s===`auto`?l(e.length):u[s],c[d],g),children:e.map(e=>(0,o.jsx)(a,{data:e,variant:t,size:r,colorScheme:i,showSparkline:f,showChange:p,showIcon:m,loading:h},e.id))})}d.displayName=`MetricGrid`;export{s as n,d as t};

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

@@ -0,0 +1 @@
+import{gr as e,vr as t}from"./example-DPfw-R7_.js";import{t as n}from"./arrow-down-CfwCPcHL.js";import{t as r}from"./arrow-up-BYQ4F9L1.js";import{t as i}from"./minus-D-jmUi0G.js";import{a}from"./index-B-Z7p0So.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`?r:a.direction===`down`?n:i,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:t(`metric-trend-chip--component`,v.text,`tabular-nums`,h),children:[b,y]}):m===`compact`?(0,o.jsxs)(`span`,{className:t(`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:`tabular-nums`,children:y})]}):m===`badge`?(0,o.jsxs)(`span`,{className:t(`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:`tabular-nums`,children:y}),!!a.label&&(0,o.jsx)(e,{tag:`span`,size:l[p],className:`opacity-70`,children:a.label})]}):(0,o.jsxs)(`span`,{className:t(`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};

package/dist/showcase/assets/metrics-analytics-bar-B-1IUlHf.js

@@ -0,0 +1,44 @@
+import{n as e}from"./chunk-CilyBKbf.js";import{cr as t,sr as n,t as r}from"./example-DPfw-R7_.js";import{t as i}from"./credit-card--5vg7bQy.js";import{t as a}from"./dollar-sign-gJtl-XaL.js";import{t as o}from"./shopping-bag-Cd09Ga6D.js";import{t as s}from"./users-CxKZ7gt8.js";import{a as c}from"./index-B-Z7p0So.js";import{t as l}from"./props-table-BzUnIcv-.js";import{n as u,t as d}from"./metric-grid-6Dpj5eV3.js";var f=e({MetricBarDefault:()=>v,MetricBarGradientFrame:()=>y,MetricGridCompactCardsAlternative:()=>b}),p=c(),m=[12,18,15,25,22,30,28,35,32,40,38,45],h=[40,38,35,30,28,25,22,20,18,15,12,10],g=[{id:`rev`,label:`Revenue`,value:`52.3K`,change:{value:`12.5%`,direction:`up`},sparkline:m,icon:a},{id:`ord`,label:`Orders`,value:`284`,change:{value:`8.1%`,direction:`up`},sparkline:m,icon:o},{id:`cust`,label:`Customers`,value:`856`,change:{value:`2.3%`,direction:`down`},sparkline:h,icon:s},{id:`aov`,label:`Avg. Order`,value:`184 USD`,change:{value:`0%`,direction:`neutral`},sparkline:[20,22,21,23,20,22,21,23,22,21,23,22],icon:i}],_=[{id:`rev`,label:`Total Revenue`,value:`52,340 USD`,change:{value:`12.5%`,direction:`up`},sparkline:m},{id:`profit`,label:`Net Profit`,value:`31,404 USD`,change:{value:`8.7%`,direction:`up`},sparkline:[5,8,6,10,9,12,11,14]},{id:`exp`,label:`Expenses`,value:`20,936 USD`,change:{value:`3.2%`,direction:`down`},sparkline:h,trend:`positive`}];function v(){return(0,p.jsx)(p.Fragment,{children:(0,p.jsx)(u,{period:{label:`Last 30 days`,value:`last_30`},metrics:g})})}function y(){return(0,p.jsx)(p.Fragment,{children:(0,p.jsx)(u,{variant:`gradient`,metrics:_,footerText:`Updated just now`})})}function b(){return(0,p.jsx)(p.Fragment,{children:(0,p.jsx)(d,{metrics:g,variant:`compact`,columns:4})})}var x=`import { CreditCard, DollarSign, ShoppingBag, Users } from 'lucide-react';
+import { MetricBar, MetricGrid, type MetricData } from '@/components/composed/analytics';
+
+const UP = [12, 18, 15, 25, 22, 30, 28, 35, 32, 40, 38, 45];
+const DOWN = [40, 38, 35, 30, 28, 25, 22, 20, 18, 15, 12, 10];
+const FLAT = [20, 22, 21, 23, 20, 22, 21, 23, 22, 21, 23, 22];
+
+const KPIS: MetricData[] = [
+	{ id: 'rev', label: 'Revenue', value: '52.3K', change: { value: '12.5%', direction: 'up' }, sparkline: UP, icon: DollarSign },
+	{ id: 'ord', label: 'Orders', value: '284', change: { value: '8.1%', direction: 'up' }, sparkline: UP, icon: ShoppingBag },
+	{ id: 'cust', label: 'Customers', value: '856', change: { value: '2.3%', direction: 'down' }, sparkline: DOWN, icon: Users },
+	{ id: 'aov', label: 'Avg. Order', value: '184 USD', change: { value: '0%', direction: 'neutral' }, sparkline: FLAT, icon: CreditCard },
+];
+
+const FINANCE: MetricData[] = [
+	{ id: 'rev', label: 'Total Revenue', value: '52,340 USD', change: { value: '12.5%', direction: 'up' }, sparkline: UP },
+	{ id: 'profit', label: 'Net Profit', value: '31,404 USD', change: { value: '8.7%', direction: 'up' }, sparkline: [5, 8, 6, 10, 9, 12, 11, 14] },
+	{ id: 'exp', label: 'Expenses', value: '20,936 USD', change: { value: '3.2%', direction: 'down' }, sparkline: DOWN, trend: 'positive' },
+];
+
+export function MetricBarDefault() {
+	return (
+		<>
+			<MetricBar period={{ label: 'Last 30 days', value: 'last_30' }} metrics={KPIS} />
+		</>
+	);
+}
+
+export function MetricBarGradientFrame() {
+	return (
+		<>
+			<MetricBar variant="gradient" metrics={FINANCE} footerText="Updated just now" />
+		</>
+	);
+}
+
+export function MetricGridCompactCardsAlternative() {
+	return (
+		<>
+			<MetricGrid metrics={KPIS} variant="compact" columns={4} />
+		</>
+	);
+}
+`;function S(e){let i={h4:`h4`,...e.components};return f||w(`Examples`,!1),v||w(`Examples.MetricBarDefault`,!0),y||w(`Examples.MetricBarGradientFrame`,!0),b||w(`Examples.MetricGridCompactCardsAlternative`,!0),(0,p.jsxs)(t,{title:`Features · Metrics · Analytics bar`,description:"`MetricBar` — horizontal KPI strip with hairline-divided cells. Pair with `MetricGrid` for card-style layouts.",layer:`features`,status:`ready`,children:[(0,p.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,p.jsx)(r,{name:`MetricBarDefault`,source:x,children:(0,p.jsx)(v,{})}),(0,p.jsx)(r,{name:`MetricBarGradientFrame`,source:x,children:(0,p.jsx)(y,{})}),(0,p.jsx)(r,{name:`MetricGridCompactCardsAlternative`,source:x,children:(0,p.jsx)(b,{})})]}),(0,p.jsxs)(n,{title:`API`,id:`api`,children:[(0,p.jsx)(i.h4,{children:`MetricBar`}),(0,p.jsx)(l,{component:`MetricBar`}),(0,p.jsx)(i.h4,{children:`MetricGrid`}),(0,p.jsx)(l,{component:`MetricGrid`})]})]})}function C(e={}){let{wrapper:t}=e.components||{};return t?(0,p.jsx)(t,{...e,children:(0,p.jsx)(S,{...e})}):S(e)}function w(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{C as default};